/* Articles of NakTop. Direction: a calm editorial column on a sheet of Daylight Glass: dark ink, one blue accent, 68 characters
   to a line, type and air do the work. The values fall back to their own numbers because the panel's preview shows this file
   without the rest of the site. */
.art-page,.blog-page,.art-preview,.art-toc,.art-toc-pill,.art-toc-backdrop{
  --a-ink:var(--g-ink,#0E1A2B);--a-ink-2:var(--g-ink-2,#46546A);--a-ink-3:var(--g-ink-3,#6B7890);--a-line:var(--g-line,rgba(14,26,43,.1));
  --a-accent:var(--g-accent,#1F7AE0);--a-accent-soft:var(--g-accent-soft,rgba(31,122,224,.1));
  --a-sheet:rgba(255,255,255,.78);--a-card:rgba(255,255,255,.72);--a-border:rgba(255,255,255,.7);--a-shadow:0 1px 2px rgba(14,26,43,.04),0 24px 60px -32px rgba(14,26,43,.28);
  --a-font:var(--g-font,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);--a-ease:cubic-bezier(.2,.8,.2,1);--a-col:680px}

/* the sheet */
.art-page{max-width:920px;margin:24px auto 64px;font-family:var(--a-font);color:var(--a-ink)}
.art{background:var(--a-sheet);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border:1px solid var(--a-border);border-radius:32px;box-shadow:var(--a-shadow);padding:48px clamp(20px,8vw,120px) 56px}
.art>*{max-width:var(--a-col);margin-left:auto;margin-right:auto}
.art-crumbs{font-size:14px;margin-bottom:32px}
.art-crumbs a{color:var(--a-ink-3);text-decoration:none}
.art-crumbs a:hover{color:var(--a-accent)}
.art-crumbs a::before{content:"←";margin-right:8px}
.art-head h1{margin:0;font-size:clamp(32px,4.6vw,48px);line-height:1.1;letter-spacing:-.03em;font-weight:600;color:var(--a-ink);text-wrap:balance}
.art-lead{margin:24px 0 0;font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--a-ink-2)}
.art-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;font-size:14px;color:var(--a-ink-3);font-variant-numeric:tabular-nums}
.art-cover{margin:40px auto 0;max-width:100%}
.art-cover img{display:block;width:100%;height:auto;border-radius:20px}

/* the text */
.art-body{margin-top:40px;font-size:18px;line-height:1.65;color:var(--a-ink);overflow-wrap:break-word}
.art-body>:first-child{margin-top:0}
.art-body p{margin:0 0 24px}
.art-body h2,.art-body h3{scroll-margin-top:96px;color:var(--a-ink);text-wrap:balance}
.art-body h2{margin:56px 0 16px;font-size:30px;line-height:1.2;letter-spacing:-.02em;font-weight:600}
.art-body h3{margin:40px 0 12px;font-size:22px;line-height:1.3;letter-spacing:-.01em;font-weight:600}
.art-body strong{font-weight:600}
.art-body a{color:var(--a-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.art-body a:hover{text-decoration-thickness:2px}
.art-body ul,.art-body ol{margin:0 0 24px;padding-left:28px}
.art-body li{margin-bottom:8px;padding-left:4px}
.art-body li::marker{color:var(--a-ink-3)}
.art-body hr{border:0;height:1px;background:var(--a-line);margin:48px 0}
.art-body blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--a-accent)}
.art-body blockquote p{margin:0;font-size:21px;line-height:1.5;letter-spacing:-.01em}
.art-body cite{display:block;margin-top:12px;font-size:14px;font-style:normal;color:var(--a-ink-3)}
.art-callout{margin:32px 0;padding:20px 24px;border-radius:16px;background:var(--a-accent-soft)}
.art-callout p{margin:0!important;font-size:17px;line-height:1.55}
.art-callout-warn{background:rgba(14,26,43,.05)}
.art-figure{margin:40px 0}
.art-figure img{display:block;width:100%;height:auto;border-radius:16px}
.art-figure figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--a-ink-3)}
.art-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:40px 0;padding:24px;border-radius:20px;background:var(--a-card);border:1px solid var(--a-line)}
.art-cta-text strong{display:block;font-size:19px;line-height:1.3;letter-spacing:-.01em}
.art-cta-text p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--a-ink-2)}
.art-body a.art-cta-button,.art-cta-button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;background:var(--a-accent);color:#fff;font-size:15px;font-weight:500;text-decoration:none;transition:transform .18s var(--a-ease),background .18s var(--a-ease)}
.art-cta-button:hover{transform:translateY(-1px);background:#1869c4}
.art-cta-button:focus-visible,.art-like:focus-visible,.art-to-services:focus-visible,.art-toc a:focus-visible,.art-toc-pill:focus-visible{outline:2px solid var(--a-accent);outline-offset:2px}

/* the end of the article */
.art-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--a-line)}
.art-like{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--a-line);border-radius:999px;background:transparent;color:var(--a-ink-2);font:500 15px var(--a-font);cursor:pointer;transition:background .18s var(--a-ease),color .18s var(--a-ease),border-color .18s var(--a-ease)}
.art-like:hover{border-color:var(--a-accent);color:var(--a-accent)}
.art-like.on{background:var(--a-accent-soft);border-color:transparent;color:var(--a-accent)}
.art-like.on svg{fill:currentColor}
.art-like-count{font-variant-numeric:tabular-nums}
.art-to-services{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--a-accent);font-size:15px;font-weight:500;text-decoration:none}
.art-to-services:hover{text-decoration:underline;text-underline-offset:3px}
.art-more{margin-top:32px;padding:0 8px}
.art-more h2{margin:0 0 16px;font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--a-ink-3)}
.art-more-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.art-more-list a{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:20px;border-radius:20px;background:var(--a-card);border:1px solid var(--a-border);color:var(--a-ink);text-decoration:none;transition:transform .18s var(--a-ease)}
.art-more-list a:hover{transform:translateY(-2px)}
.art-more-list strong{font-size:16px;line-height:1.35;font-weight:500}
.art-more-list span{font-size:13px;color:var(--a-ink-3)}

/* contents. Without the script: a plain list above the text. The script moves it to <body>: the sheet's backdrop-filter would make "fixed" relative to the sheet */
.art-toc{margin-top:32px}
.art-toc-card{padding:16px 20px;border-radius:16px;background:rgba(14,26,43,.03)}
.art-toc-title{margin:0 0 8px;font-size:13px;font-weight:500;color:var(--a-ink-3)}
.art-toc ol{list-style:none;margin:0;padding:0}
.art-toc a{display:flex;align-items:center;min-height:36px;color:var(--a-ink-2);font-size:15px;line-height:1.35;text-decoration:none;border-radius:8px}
.art-toc a:hover{color:var(--a-accent)}
.art-toc a.on{color:var(--a-accent);font-weight:500}
.art-toc-h3 a{padding-left:16px;font-size:14px}
.art-toc-dash{display:none}

/* wide screen with a mouse: a rail of dashes on the right that opens on hover or keyboard focus */
@media (min-width:1240px) and (hover:hover){
  .art-toc.art-js{position:fixed;z-index:30;top:50%;right:20px;transform:translateY(-50%);margin:0;max-width:none}
  .art-js .art-toc-card{width:36px;max-height:72vh;overflow:hidden;padding:12px 8px;background:transparent;border:1px solid transparent;border-radius:16px;transition:width .22s var(--a-ease),background .18s var(--a-ease),box-shadow .18s var(--a-ease)}
  .art-js .art-toc-title{display:none}
  .art-toc.art-js a{justify-content:flex-end;min-height:16px;font-size:14px}
  .art-js .art-toc-h3 a{padding-left:0}
  .art-js .art-toc-dash{display:block;width:18px;height:2px;border-radius:2px;background:rgba(14,26,43,.22);transition:background .18s var(--a-ease),width .18s var(--a-ease)}
  .art-js .art-toc-h3 .art-toc-dash{width:11px}
  .art-toc.art-js a:hover .art-toc-dash{background:var(--a-ink-2)}
  .art-toc.art-js a.on .art-toc-dash{background:var(--a-accent)}
  .art-js .art-toc-text{display:none}
  .art-toc.art-js:hover .art-toc-card,.art-toc.art-js:focus-within .art-toc-card{width:300px;overflow-y:auto;padding:12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-color:var(--a-line);box-shadow:0 1px 2px rgba(14,26,43,.05),0 16px 40px -16px rgba(14,26,43,.3)}
  .art-toc.art-js:hover .art-toc-title,.art-toc.art-js:focus-within .art-toc-title{display:block;padding:4px 8px 0}
  .art-toc.art-js:hover .art-toc-text,.art-toc.art-js:focus-within .art-toc-text{display:block;animation:art-fade .18s var(--a-ease)}
  .art-toc.art-js:hover .art-toc-dash,.art-toc.art-js:focus-within .art-toc-dash{display:none}
  .art-toc.art-js:hover a,.art-toc.art-js:focus-within a{justify-content:flex-start;min-height:36px;padding:6px 8px}
  .art-toc.art-js:hover .art-toc-h3 a,.art-toc.art-js:focus-within .art-toc-h3 a{padding-left:20px}
  .art-toc.art-js:hover a:hover,.art-toc.art-js:focus-within a:hover{background:rgba(14,26,43,.04)}
  .art-toc.art-js:hover a.on,.art-toc.art-js:focus-within a.on{background:var(--a-accent-soft)}
}
@keyframes art-fade{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:none}}

/* phone or touch screen: a small pill at the bottom opens the list as a sheet */
.art-toc-pill,.art-toc-backdrop{display:none}
@media (max-width:1239.98px),(hover:none){
  .art-toc.art-js{position:fixed;z-index:60;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));margin:0;max-width:560px;margin-inline:auto;visibility:hidden;opacity:0;transform:translateY(16px);transition:opacity .18s var(--a-ease),transform .22s var(--a-ease),visibility .22s}
  .art-toc.art-js.open{visibility:visible;opacity:1;transform:none}
  .art-toc.art-js .art-toc-card{max-height:min(70vh,70dvh);overflow-y:auto;overscroll-behavior:contain;padding:16px;border-radius:24px;background:#fff;box-shadow:0 24px 60px -16px rgba(14,26,43,.45)}
  .art-toc.art-js a{min-height:44px;padding:8px 12px;border-radius:12px}
  .art-toc.art-js .art-toc-h3 a{padding-left:24px}
  .art-toc.art-js a.on{background:var(--a-accent-soft)}
  .art-toc-backdrop.open{display:block;position:fixed;z-index:59;inset:0;background:rgba(14,26,43,.28)}
  .art-toc-pill{position:fixed;z-index:50;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;max-width:min(72vw,320px);min-height:44px;padding:0 16px;border:1px solid var(--a-line);border-radius:999px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 8px 24px -8px rgba(14,26,43,.3);color:var(--a-ink);font:500 14px var(--a-font);cursor:pointer;transition:opacity .18s var(--a-ease),transform .18s var(--a-ease)}
  .art-toc-pill[hidden]{display:inline-flex;opacity:0;pointer-events:none;transform:translateY(8px)}
  .art-toc-pill span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .art-toc-pill svg{flex:none;color:var(--a-accent)}
}

/* the list of articles */
.blog-page{max-width:1040px;margin:24px auto 64px;font-family:var(--a-font);color:var(--a-ink)}
.blog-head{max-width:680px;padding:16px 8px 32px}
.blog-head h1{margin:0;font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:600}
.blog-head p{margin:16px 0 0;font-size:18px;line-height:1.5;color:var(--a-ink-2)}
.blog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.blog-empty{grid-column:1/-1;margin:0;padding:32px;border-radius:24px;background:var(--a-sheet);font-size:17px;line-height:1.5;color:var(--a-ink-2)}
.blog-empty a{color:var(--a-accent)}
.blog-card{min-width:0}
.blog-card>a{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:24px;background:var(--a-sheet);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border:1px solid var(--a-border);box-shadow:var(--a-shadow);color:inherit;text-decoration:none;transition:transform .22s var(--a-ease)}
.blog-card>a:hover{transform:translateY(-3px)}
.blog-card>a:focus-visible{outline:2px solid var(--a-accent);outline-offset:2px}
.blog-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:rgba(14,26,43,.04)}
.blog-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.blog-card-text{display:flex;flex:1;flex-direction:column;padding:24px}
.blog-card h2{margin:0;font-size:22px;line-height:1.25;letter-spacing:-.015em;font-weight:600}
.blog-card p{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--a-ink-2)}
.blog-card-meta{margin-top:auto;padding-top:16px;font-size:13px;color:var(--a-ink-3)}
.blog-card-first{grid-column:1/-1}
.blog-card-first>a{flex-direction:row}
.blog-card-first .blog-card-img{flex:0 0 56%;aspect-ratio:auto;min-height:320px}
.blog-card-first .blog-card-text{justify-content:center;padding:40px}
.blog-card-first h2{font-size:32px;line-height:1.15;letter-spacing:-.025em}
.blog-card-first p{font-size:17px}

@media (max-width:760px){
  .art-page,.blog-page{margin:12px auto 32px}
  .art{padding:28px 20px 32px;border-radius:24px}
  .art-crumbs{margin-bottom:20px}
  .art-body{font-size:17px;margin-top:32px}
  .art-body h2{margin-top:44px;font-size:25px}
  .art-body h3{margin-top:32px;font-size:20px}
  .art-body blockquote p{font-size:19px}
  .art-cover{margin-top:28px}
  .art-cover img{border-radius:16px}
  .art-cta{flex-direction:column;align-items:stretch;gap:16px;padding:20px}
  .art-cta-button{justify-content:center}
  .blog-list{grid-template-columns:minmax(0,1fr)}
  .blog-head{padding:8px 8px 24px}
  .blog-card-first>a{flex-direction:column}
  .blog-card-first .blog-card-img{flex:none;aspect-ratio:16/9;min-height:0}
  .blog-card-first .blog-card-text{padding:24px}
  .blog-card-first h2{font-size:24px}
  .blog-card-first p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .art *,.art-toc *,.blog-card>a,.art-toc-pill,.art-toc.art-js{transition:none!important;animation:none!important}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .art,.blog-card>a{background:#fff}
}
/* the panel's preview frame */
.art-preview{margin:0;padding:24px;background:linear-gradient(180deg,#eef3f9,#f7f9fb);font-family:var(--a-font)}
.art-preview a{pointer-events:none}
.art-preview .art-page{margin-top:0}
.art-preview .art-like{pointer-events:none}