/* ─────────────────────────────────────────────────────────────────────────
   DropWave — the design system for every page except the landing page.

   THERE ARE NO CARDS ON THIS SITE. No boxed grids, no fills with shadows, no
   rounded rectangles standing in for structure. Structure comes from type
   size, white space and hairlines, and from drawn pictures of the product
   sitting beside the writing. If a component here starts growing a border,
   a background and a shadow at the same time, it has become a card and it is
   wrong.

   The landing page (public/index.html) keeps its own inline copy of the
   tokens and the nav on purpose: it is one file that fetches nothing. The
   tokens below are the same values.

   Dark only. That is what the product ships with.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#0a0a0c;
  --bg-soft:#0f0f12;
  --panel:#151519;
  --panel-2:#1b1b20;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --fg:#f5f5f7;
  --fg-dim:#a1a1a6;
  --fg-faint:#6e6e78;
  --blue:#0A84FF;
  --blue-bright:#3aa0ff;
  --green:#30d158;
  --amber:#ffa23a;
  --red:#ff375f;
  --radius:20px;
  --ease:cubic-bezier(.22,.7,.25,1);
  --page:1120px;
  --gutter:clamp(20px,5vw,28px);
  --nav-h:58px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
[hidden]{display:none!important}
::selection{background:rgba(10,132,255,.32)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:820px}

.skip{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:10px 16px;border-radius:10px;
  background:var(--fg);color:#0a0a0c;font-size:14px;font-weight:600;
  transform:translateY(-160%);transition:transform .2s var(--ease);
}
.skip:focus{transform:none}

/* ── navigation ──────────────────────────────────────────────────────── */
nav#nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px var(--gutter);
  padding-top:max(10px,env(safe-area-inset-top));
  background:rgba(10,10,12,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:600;letter-spacing:-.2px;flex-shrink:0}
.brand img{width:24px;height:24px;border-radius:6px}
.nav-links{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--fg-dim)}

.navgroup{position:relative}
.navbtn{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 12px;border-radius:10px;border:1px solid transparent;background:none;
  font:inherit;font-size:14px;color:var(--fg-dim);cursor:pointer;
  transition:color .2s,background .2s;
}
.navbtn .cv{opacity:.55;transition:transform .22s var(--ease)}
.navbtn:hover,.navbtn[aria-expanded="true"]{color:var(--fg);background:rgba(255,255,255,.06)}
.navbtn[aria-expanded="true"] .cv{transform:rotate(180deg)}
.navbtn.here{color:var(--fg)}

.navmenu{
  position:absolute;top:calc(100% + 10px);left:-6px;z-index:70;
  display:flex;flex-direction:column;gap:2px;
  width:292px;padding:8px;
  border-radius:16px;border:1px solid var(--line-strong);
  background:rgba(21,21,25,.94);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
  animation:menuIn .18s var(--ease) both;
}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.navmenu a{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:11px;transition:background .16s}
.navmenu a b{font-size:14px;font-weight:600;color:var(--fg)}
.navmenu a span{font-size:12.5px;color:var(--fg-faint);line-height:1.35}
.navmenu a:hover{background:rgba(255,255,255,.07)}
.navmenu a[aria-current="page"]{background:rgba(10,132,255,.13)}
.navmenu a[aria-current="page"] b{color:var(--blue-bright)}

.nav-cta{
  display:inline-flex;align-items:center;gap:7px;margin-left:10px;
  padding:9px 16px;border-radius:980px;background:var(--fg);color:#0a0a0c;
  font-size:14px;font-weight:600;white-space:nowrap;
  transition:transform .16s var(--ease),opacity .2s;
}
.nav-cta:hover{transform:translateY(-1px);opacity:.9}
.nav-cta:active{transform:translateY(0) scale(.97)}

.navtoggle{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--fg);cursor:pointer;
}
.navpanel{
  position:fixed;inset:var(--nav-h) 0 0;z-index:59;
  overflow-y:auto;overscroll-behavior:contain;
  background:rgba(10,10,12,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:panelIn .22s var(--ease) both;
}
@keyframes panelIn{from{opacity:0}to{opacity:1}}
.navpanel-inner{display:flex;flex-direction:column;gap:26px;padding:26px var(--gutter) calc(40px + env(safe-area-inset-bottom))}
.navpanel section{display:flex;flex-direction:column;gap:2px}
.navpanel h2{font-size:11.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--fg-faint);margin-bottom:8px}
.navpanel a:not(.btn){padding:11px 0;font-size:17px;font-weight:500;border-bottom:1px solid var(--line)}
.navpanel a[aria-current="page"]{color:var(--blue-bright)}

@media(max-width:1010px){
  .nav-links{display:none}
  .navtoggle{display:flex}
}
@media(min-width:1011px){
  .navpanel{display:none!important}
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 26px;border-radius:980px;border:1px solid transparent;
  font-size:15.5px;font-weight:600;letter-spacing:-.15px;cursor:pointer;
  font-family:inherit;text-align:center;
  transition:transform .16s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s;
}
.btn-primary{background:var(--fg);color:#0a0a0c;box-shadow:0 8px 30px rgba(255,255,255,.12)}
.btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line-strong);color:var(--fg)}
@media(hover:hover){
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,255,255,.18)}
  .btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
}
.btn:active{transform:translateY(0) scale(.982);transition-duration:.06s}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:479px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn{width:100%}
}

/* ── page header ─────────────────────────────────────────────────────── */
.phead{
  position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(48px,8vw,96px)) 0 clamp(38px,6vw,62px);
  border-bottom:1px solid var(--line);
}
.phead::before{
  content:"";position:absolute;left:50%;top:-46%;width:min(1020px,124%);aspect-ratio:2/1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,132,255,.17),transparent 72%);
}
.phead > *{position:relative}
.phead .kicker{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.phead h1{
  font-size:clamp(34px,5.6vw,58px);font-weight:700;letter-spacing:-.038em;line-height:1.04;
  text-wrap:balance;max-width:17ch;
}
.phead .lede{
  margin-top:20px;max-width:62ch;
  font-size:clamp(16.5px,1.8vw,20px);color:var(--fg-dim);line-height:1.6;text-wrap:pretty;
}
.phead .meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;
  font-size:13px;color:var(--fg-faint);
}
.phead .meta time{color:var(--fg-dim)}

.crumbs{margin-bottom:22px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;font-size:13px;color:var(--fg-faint)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--fg-faint);opacity:.6}
.crumbs a{color:var(--fg-dim);transition:color .2s}
.crumbs a:hover{color:var(--fg)}
.crumbs [aria-current]{color:var(--fg-faint)}

/* ── prose ───────────────────────────────────────────────────────────── */
.prose{max-width:min(100%,72ch);font-size:16.5px;line-height:1.72;color:var(--fg-dim);text-wrap:pretty;overflow-wrap:break-word}
.prose > *+*{margin-top:1.15em}
.prose > :first-child{margin-top:0}
.prose h2{
  font-size:clamp(24px,2.8vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.18;
  color:var(--fg);margin-top:2.2em;text-wrap:balance;scroll-margin-top:calc(var(--nav-h) + 22px);
}
.prose h3{
  font-size:clamp(18px,2vw,21px);font-weight:650;letter-spacing:-.018em;line-height:1.3;
  color:var(--fg);margin-top:1.9em;scroll-margin-top:calc(var(--nav-h) + 22px);
}
.prose h4{font-size:16.5px;font-weight:650;color:var(--fg);margin-top:1.6em}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:.7em}
.prose strong{color:var(--fg);font-weight:650}
.prose a:not(.btn){
  color:var(--blue-bright);
  text-decoration:underline;text-decoration-color:rgba(58,160,255,.34);text-underline-offset:3px;
  transition:text-decoration-color .2s,color .2s;
}
.prose a:not(.btn):hover{text-decoration-color:var(--blue-bright)}
.prose ul,.prose ol{padding-left:1.35em;display:flex;flex-direction:column;gap:.5em}
.prose li::marker{color:var(--fg-faint)}
.prose li>strong:first-child{color:var(--fg)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
.prose code{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.88em;padding:.14em .42em;border-radius:6px;
  background:rgba(255,255,255,.07);color:#dce6f5;
}
.prose .code{padding:16px 18px;border-radius:14px;overflow-x:auto;border:1px solid var(--line);background:#0d0d10}
.prose .code code{background:none;padding:0;font-size:13.5px;line-height:1.65;color:#cfd8e6;display:block}
.prose figure{margin-top:2.2em}
.prose figcaption{margin-top:14px;font-size:13.5px;color:var(--fg-faint);line-height:1.55}

/* Tables are hairline-ruled, not boxed — the same rule as everything else. */
.table-wrap{overflow-x:auto}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:460px}
.prose th,.prose td{padding:13px 16px 13px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose thead th{
  font-size:11.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;
  color:var(--fg-faint);white-space:nowrap;border-bottom-color:var(--line-strong);
}
.prose tbody th{font-weight:600;color:var(--fg)}

/* A callout is a rule and a colour, not a filled box. */
.callout{padding:2px 0 2px 20px;border-left:2px solid var(--blue);font-size:15.5px;line-height:1.65;color:var(--fg-dim)}
.callout p{margin:0}
.callout-warn{border-left-color:var(--amber)}
.callout-beta{border-left-color:var(--green)}

/* ── layout ──────────────────────────────────────────────────────────── */
.page{padding:clamp(40px,6vw,68px) 0 clamp(64px,9vw,104px)}

.docs-shell{display:grid;gap:clamp(28px,4vw,54px)}
@media(min-width:1000px){.docs-shell{grid-template-columns:210px minmax(0,1fr) 186px;align-items:start}}
@media(min-width:760px) and (max-width:999px){.docs-shell{grid-template-columns:206px minmax(0,1fr)}}

.docs-side{position:sticky;top:calc(var(--nav-h) + 24px);max-height:calc(100vh - var(--nav-h) - 48px);overflow-y:auto;padding-bottom:20px}
.docs-side h2{font-size:11.5px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--fg-faint);margin:24px 0 8px}
.docs-side h2:first-of-type{margin-top:0}
.docs-side ul{list-style:none;display:flex;flex-direction:column;gap:1px}
.docs-side a{
  display:block;padding:6px 0 6px 12px;border-left:1px solid var(--line);
  font-size:14.5px;color:var(--fg-dim);
  transition:color .16s,border-color .16s;
}
.docs-side a:hover{color:var(--fg);border-left-color:var(--line-strong)}
.docs-side a[aria-current="page"]{color:var(--blue-bright);border-left-color:var(--blue);font-weight:600}
@media(max-width:759px){
  .docs-side{position:static;max-height:none;order:2;border-top:1px solid var(--line);padding-top:28px;margin-top:12px}
}

.docs-toc{position:sticky;top:calc(var(--nav-h) + 24px);font-size:13.5px}
.docs-toc h2{font-size:11.5px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--fg-faint);margin-bottom:10px}
.docs-toc ul{list-style:none;display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--line)}
.docs-toc a{display:block;padding:5px 12px;margin-left:-1px;border-left:1px solid transparent;color:var(--fg-faint);line-height:1.4;transition:color .16s,border-color .16s}
.docs-toc a:hover{color:var(--fg-dim)}
.docs-toc a.lvl3{padding-left:24px}
.docs-toc a.active{color:var(--blue-bright);border-left-color:var(--blue)}
@media(max-width:999px){.docs-toc{display:none}}

/* prev / next — two ruled cells, no boxes */
.pager{display:grid;gap:0;margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--line)}
@media(min-width:620px){.pager{grid-template-columns:1fr 1fr}}
.pager a{
  display:flex;flex-direction:column;gap:5px;padding:22px 0;
  transition:opacity .2s;
}
.pager a+a{border-top:1px solid var(--line)}
@media(min-width:620px){
  .pager a+a{border-top:0;border-left:1px solid var(--line);padding-left:24px}
}
.pager a:hover{opacity:.72}
.pager span{font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--fg-faint)}
.pager b{font-size:16px;font-weight:600;color:var(--fg)}
.pager .next{text-align:right;align-items:flex-end}

/* ── ruled index rows — what replaced every card grid ─────────────────── */
.rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rows a{
  position:relative;display:grid;align-items:baseline;gap:6px 28px;
  padding:22px 34px 22px 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease);
}
@media(min-width:720px){
  .rows a{grid-template-columns:minmax(180px,.85fr) 1.3fr}
}
.rows-t{font-size:clamp(18px,2.1vw,22px);font-weight:650;letter-spacing:-.022em;color:var(--fg);line-height:1.25;text-wrap:balance}
.rows-d{font-size:15px;color:var(--fg-dim);line-height:1.55;text-wrap:pretty}
.rows-a{
  position:absolute;right:4px;top:50%;transform:translateY(-50%) translateX(-6px);
  color:var(--fg-faint);opacity:0;
  transition:opacity .25s var(--ease),transform .25s var(--ease),color .25s var(--ease);
}
@media(hover:hover){
  .rows a:hover{padding-left:14px}
  .rows a:hover .rows-t{color:#fff}
  .rows a:hover .rows-a{opacity:1;transform:translateY(-50%);color:var(--blue-bright)}
}
.rows a:focus-visible .rows-a{opacity:1;transform:translateY(-50%);color:var(--blue-bright)}
/* A hairline that draws itself in under the row being pointed at. */
.rows a::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--blue),transparent);
  transition:width .45s var(--ease);
}
@media(hover:hover){.rows a:hover::after{width:100%}}

/* A numbered variant, for sequences where order is the point. */
.rows.numbered a{padding-left:46px}
.rows.numbered a::before{
  counter-increment:row;content:counter(row,decimal-leading-zero);
  position:absolute;left:0;top:24px;
  font-size:11.5px;font-weight:600;letter-spacing:1.2px;color:var(--fg-faint);
}
.rows.numbered{counter-reset:row}
@media(hover:hover){.rows.numbered a:hover{padding-left:60px}}

/* ── split: writing beside a drawn picture ───────────────────────────── */
.split{display:grid;gap:clamp(28px,4vw,60px);align-items:center;padding:clamp(48px,7vw,88px) 0}
.split+.split{border-top:1px solid var(--line)}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .split.flip .split-text{grid-column:2;grid-row:1}
  .split.flip .split-vis{grid-column:1;grid-row:1}
}
.split-text h2{font-size:clamp(25px,3.2vw,36px);font-weight:700;letter-spacing:-.032em;line-height:1.12;color:var(--fg);text-wrap:balance}
.split-text .kicker{font-size:11.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.split-text p{margin-top:16px;font-size:16.5px;line-height:1.68;color:var(--fg-dim);max-width:52ch;text-wrap:pretty}
.split-text ul{margin-top:18px;list-style:none;display:flex;flex-direction:column;gap:11px}
.split-text ul li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.6;color:var(--fg-dim)}
.split-text ul li::before{
  content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--blue);
}
.split-text .more{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:15px;font-weight:600;color:var(--blue-bright);
}
.split-text .more::after{content:"→";transition:transform .2s var(--ease)}
.split-text .more:hover::after{transform:translateX(4px)}

/* ── sections ────────────────────────────────────────────────────────── */
.sec{padding:clamp(48px,7vw,84px) 0}
.sec.ruled{border-top:1px solid var(--line)}
.sec-head{max-width:640px;margin-bottom:clamp(26px,3.4vw,40px)}
.sec-head .kicker{font-size:11.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.sec-head h2{font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:-.032em;line-height:1.1;text-wrap:balance}
.sec-head h2 .dim{color:var(--fg-faint)}
.sec-head p{margin-top:14px;font-size:16.5px;color:var(--fg-dim);line-height:1.65;text-wrap:pretty}

/* ── the drawn product windows ───────────────────────────────────────── */
/* These are pictures of DropWave, not containers for content. They carry the
   window chrome because they are windows. */
.vis,.split-vis{position:relative}
.win{
  width:100%;max-width:460px;margin:0 auto;
  border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#1a1a1f,#131317);
  border:1px solid var(--line-strong);
  box-shadow:0 50px 110px -50px rgba(0,0,0,.95),0 0 80px -34px rgba(10,132,255,.26);
}
.win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line)}
.wdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.wdot.r{background:#ff5f57}.wdot.y{background:#febc2e}.wdot.g{background:#28c840}
.win-title{margin-left:auto;margin-right:auto;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--fg-dim);transform:translateX(-14px)}
.win-title svg{color:var(--blue)}
.win-file{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 17px;border-bottom:1px solid var(--line)}
.win-file .fn{font-size:12.5px;font-weight:600;color:var(--fg)}
.win-file .fs{font-size:11.5px;color:var(--fg-faint)}
.win-file .tag{
  font-size:9.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;white-space:nowrap;
  color:var(--blue);background:rgba(10,132,255,.14);border:1px solid rgba(10,132,255,.26);
  padding:3px 9px;border-radius:980px;
}
.win-body{padding:18px 17px 20px}

.w-wave{position:relative;display:flex;align-items:center;gap:2px;height:66px;margin-bottom:16px}
.w-wave i{flex:1;border-radius:2px;background:rgba(255,255,255,.15)}
.w-wave i.hit{background:var(--blue);box-shadow:0 0 8px rgba(10,132,255,.45)}
.w-wave.grid::after{
  content:"";position:absolute;inset:-6px 0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 12.5%);
}

.w-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:16px}
.w-stats > div{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.w-stats > div + div{border-left:1px solid var(--line)}
.w-stats .k{font-size:9px;font-weight:600;letter-spacing:1.1px;color:var(--fg-faint);text-transform:uppercase}
.w-stats .v{font-size:26px;font-weight:500;letter-spacing:-1px;line-height:1;color:var(--fg)}
.w-stats .v.accent{color:var(--blue)}
.w-stats .s{font-size:10px;color:var(--fg-faint)}
.w-stats .b{font-size:10px;font-weight:700;color:var(--blue);background:rgba(10,132,255,.15);padding:3px 9px;border-radius:980px}

.w-rows{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2px 0}
.w-rows > div{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;font-size:12.5px}
.w-rows > div span:first-child{color:var(--fg-dim)}
.w-rows > div span:last-child{font-weight:500;color:var(--fg)}

.w-conf{padding-top:15px;display:flex;flex-direction:column;gap:13px}
.w-c .t{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;margin-bottom:7px;color:var(--fg-dim)}
.w-c .tr{height:3px;border-radius:980px;background:var(--line)}
.w-c .tr i{display:block;height:100%;border-radius:980px}

.w-chroma{display:flex;align-items:flex-end;gap:5px;height:96px;margin-bottom:22px}
.w-chroma i{position:relative;flex:1;height:var(--h);border-radius:3px 3px 0 0;background:rgba(255,255,255,.12)}
.w-chroma i.lit{background:linear-gradient(180deg,var(--blue-bright),var(--blue))}
.w-chroma i.half{background:rgba(10,132,255,.42)}
.w-chroma b{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font-size:9px;font-weight:600;color:var(--fg-faint)}
.w-tune .sc{display:flex;justify-content:space-between;font-size:10px;color:var(--fg-faint)}
.w-tune .tk{position:relative;height:3px;border-radius:980px;background:var(--line);margin-top:11px}
.w-tune .tk::before{content:"";position:absolute;left:50%;top:-5px;width:1px;height:13px;background:var(--line-strong)}
.w-tune .nd{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(10,132,255,.18)}

.w-read{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:16px}
.w-read .big{font-size:30px;font-weight:600;letter-spacing:-1.2px;line-height:1;color:var(--fg)}
.w-read .big.accent{color:var(--blue)}
.w-read .unit{font-size:12px;color:var(--fg-faint)}
.w-note{margin-top:12px;font-size:11.5px;color:var(--fg-faint)}

.w-meters{display:flex;flex-direction:column;gap:22px}
.w-meters .mt{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;color:var(--fg-dim);margin-bottom:9px}
.w-meters .mt b{font-size:16px;font-weight:600;letter-spacing:-.4px;color:var(--fg)}
.w-meters .mk{position:relative;height:8px;border-radius:980px;background:var(--line)}
.w-meters .fill{position:absolute;left:0;top:0;bottom:0;border-radius:980px;background:linear-gradient(90deg,var(--blue),var(--blue-bright))}
.w-meters .hot{position:absolute;top:0;bottom:0;right:0;width:8.3%;border-radius:0 980px 980px 0;background:repeating-linear-gradient(45deg,rgba(255,55,95,.4) 0 3px,transparent 3px 7px)}
.w-meters .tick{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--fg-faint);border-radius:2px}
.w-meters .ms{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--fg-faint);margin-top:8px}

.vis-wheel svg{width:min(100%,400px);height:auto;margin:0 auto}

/* ── the plugin scene: a session, with the plugin in front of it ─────── */
/* Prose is set to a reading measure; a laptop drawn at that width is a
   thumbnail, and the readings on the plugin are the entire point of the
   picture. So the scene — and only the scene — steps outside the measure and
   centres itself against it. */
.scene{position:relative;container-type:inline-size;padding-bottom:9%;margin:2.4em auto}
@media(min-width:900px){
  .prose > .scene{
    width:min(860px,calc(100vw - 2 * var(--gutter)));
    margin-left:50%;
    transform:translateX(-50%);
  }
}
.mac{display:block;width:88%;position:relative}
.mac::after{
  content:"";position:absolute;left:4%;right:4%;top:100%;height:5.5cqw;
  background:radial-gradient(52% 50% at 50% 0,rgba(0,0,0,.6),transparent 74%);
  filter:blur(5px);pointer-events:none;
}
.mac-lid{
  position:relative;padding:1.4cqw;border-radius:2.2cqw;
  background:linear-gradient(158deg,#54545b,#2b2b30 42%,#3c3c43);
  box-shadow:0 36px 80px -34px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.07);
}
.mac-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;width:17%;height:1.4cqw;background:#1c1c20;border-radius:0 0 5px 5px}
.mac-screen{position:relative;overflow:hidden;background:#0e0e11;aspect-ratio:16/10.2;border-radius:.8cqw}
.mac-screen::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 34%,transparent 52%);
}
.mac-base{
  position:relative;width:113%;left:-6.5%;height:1.5cqw;
  background:linear-gradient(180deg,#63636a,#3a3a41 55%,#212125);
  border-radius:0 0 7px 7px;box-shadow:0 22px 34px -16px rgba(0,0,0,.85);
}
.mac-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:11%;height:44%;background:#2b2b31;border-radius:0 0 5px 5px}

.daw-ui{position:absolute;inset:0;display:flex;flex-direction:column;background:#27272c;font-size:1.15cqw}
.daw-top{display:flex;align-items:center;gap:.6cqw;flex:0 0 auto;padding:0 1cqw;height:9%;background:linear-gradient(180deg,#3a3a40,#2c2c31);border-bottom:1px solid rgba(0,0,0,.5)}
.dw-tp{width:.85cqw;aspect-ratio:1;border-radius:50%;background:#5a5a63;flex:0 0 auto}
.dw-tp.play{background:#63c76a}
.dw-tp.rec{background:#d9534f}
.daw-lcd{margin:0 auto;display:flex;align-items:baseline;gap:1.1cqw;padding:.35cqw 1.3cqw;border-radius:.5cqw;background:#121215;box-shadow:inset 0 1px 2px rgba(0,0,0,.7);color:#8ea6c4;letter-spacing:.03em}
.daw-lcd b{color:#cfe0f5;font-weight:600;font-size:1.5cqw}
.daw-tools{display:flex;gap:.5cqw}
.daw-tools i{width:1.5cqw;height:.9cqw;border-radius:.2cqw;background:#4a4a52}
.daw-main{flex:1;display:flex;min-height:0}
.daw-heads{flex:0 0 22%;display:flex;flex-direction:column;background:#222227;border-right:1px solid rgba(0,0,0,.55);padding-top:5%}
.dh{flex:1;display:flex;align-items:center;gap:.55cqw;margin:.18cqw .3cqw;padding:0 .6cqw;border-radius:.35cqw;background:linear-gradient(180deg,#43434b,#38383f);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);color:#c9c9d2;overflow:hidden}
.dh .sw{width:.5cqw;align-self:stretch;margin:.28cqw 0;border-radius:1cqw;flex:0 0 auto}
.dh-n{flex:1;white-space:nowrap;overflow:hidden;font-weight:500}
.dh-b{width:1.1cqw;height:1.1cqw;border-radius:.2cqw;background:#4c4c55;flex:0 0 auto}
.daw-time{position:relative;flex:1;display:flex;flex-direction:column;background:#1d1e22;min-width:0}
.daw-ruler{flex:0 0 5%;display:flex;background:#26262b;border-bottom:1px solid rgba(0,0,0,.5)}
.daw-ruler i{flex:1;border-left:1px solid rgba(255,255,255,.14)}
.daw-rows{flex:1;display:flex;flex-direction:column;background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 12.5%)}
.dr{flex:1;position:relative;border-bottom:1px solid rgba(255,255,255,.045)}
.rg{position:absolute;left:var(--x);width:var(--w);top:12%;bottom:12%;border-radius:.35cqw;overflow:hidden;background:linear-gradient(180deg,var(--rg-2),var(--rg-1));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.rg.b{--rg-1:#2f6ea8;--rg-2:#4a8fd0}
.rg.p{--rg-1:#5a4a9e;--rg-2:#8877d6}
.rg.g{--rg-1:#37814a;--rg-2:#59b06e}
.rg.o{--rg-1:#a26a24;--rg-2:#d59a3d}
.rg.t{--rg-1:#2a7078;--rg-2:#48a6ae}
.rg::before{content:"";position:absolute;left:0;right:0;top:0;height:26%;background:rgba(255,255,255,.16)}
.rg::after{content:"";position:absolute;left:.3cqw;right:.3cqw;top:38%;bottom:14%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 2.5px)}
.rg.g::after{top:34%;bottom:18%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 3px,transparent 3px 7px)}
.daw-play{position:absolute;left:34%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.8);z-index:3}
.daw-play::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);border-left:.5cqw solid transparent;border-right:.5cqw solid transparent;border-top:.7cqw solid #fff}

/* The plugin window, breaking out of the laptop's corner. Inside the screen
   it would be a thumbnail, and the readings are the entire point of it. */
.plug{
  position:absolute;right:0;bottom:0;width:54%;z-index:3;
  border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#1b1b21,#131317);
  border:1px solid var(--line-strong);
  box-shadow:0 44px 90px -30px rgba(0,0,0,.96),0 0 70px -26px rgba(10,132,255,.45);
}
.plug-bar{display:flex;align-items:center;gap:7px;padding:2.1cqw 2.4cqw;border-bottom:1px solid var(--line);font-size:2.05cqw;font-weight:600;color:var(--fg)}
.plug-bar svg{color:var(--blue);width:2.6cqw;height:2.6cqw}
.plug-ch{margin-left:auto;font-size:1.7cqw;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:rgba(10,132,255,.14);border:1px solid rgba(10,132,255,.26);padding:.4cqw 1.1cqw;border-radius:980px}
.plug-body{padding:2.4cqw}
.plug-wave{display:flex;align-items:center;gap:.3cqw;height:7cqw;margin-bottom:2.4cqw}
.plug-wave i{flex:1;border-radius:1px;background:rgba(255,255,255,.16)}
.plug-read{display:flex;align-items:center;gap:2.4cqw}
.plug-wheel{flex:0 0 40%}
.plug-wheel svg{width:100%;height:auto}
.plug-nums{flex:1;display:flex;flex-direction:column;gap:1.5cqw;min-width:0}
.plug-nums > div{display:flex;flex-direction:column;gap:.3cqw}
.plug-nums .k{font-size:1.5cqw;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-faint)}
.plug-nums .v{font-size:3.1cqw;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--fg)}
.plug-nums .v.accent{color:var(--blue)}
.plug-nums .v.quiet{color:var(--fg-faint)}
.plug-nums .s{font-size:1.45cqw;color:var(--fg-faint)}
.plug-btn{
  display:block;width:100%;margin-top:2.4cqw;padding:1.6cqw;border:0;border-radius:1.4cqw;
  background:var(--fg);color:#0a0a0c;font-family:inherit;font-size:2cqw;font-weight:700;
  letter-spacing:.02em;cursor:default;pointer-events:none;
}

/* Below 900px the laptop would only shrink the window it exists to frame, so
   the plugin stands on its own. */
@media(max-width:899px){
  .scene{padding-bottom:0}
  .mac{display:none}
  .plug{position:static;width:100%;max-width:460px;margin:0 auto;container-type:inline-size}
  .plug-bar{padding:12px 15px;font-size:13px}
  .plug-bar svg{width:15px;height:15px}
  .plug-ch{font-size:9.5px;padding:3px 9px}
  .plug-body{padding:16px 15px 18px}
  .plug-wave{height:52px;gap:2px;margin-bottom:16px}
  .plug-read{gap:16px}
  .plug-nums{gap:12px}
  .plug-nums .k{font-size:9px}
  .plug-nums .v{font-size:21px}
  .plug-nums .s{font-size:10px}
  .plug-btn{margin-top:18px;padding:13px;border-radius:11px;font-size:14px}
}

/* ── figures strip — hairlines, not tiles ────────────────────────────── */
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figs div{padding:clamp(22px,3vw,32px) 0;text-align:center}
.figs div+div{border-left:1px solid var(--line)}
.figs .n{font-size:clamp(21px,3vw,32px);font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--fg)}
.figs .l{margin-top:10px;font-size:12.5px;color:var(--fg-faint);line-height:1.4;padding:0 10px}
@media(max-width:700px){
  .figs{grid-template-columns:repeat(2,1fr)}
  .figs div:nth-child(odd){border-left:0}
  .figs div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ── CTA — a rule and space, not a panel ─────────────────────────────── */
.cta{margin-top:clamp(52px,7vw,84px);padding-top:clamp(34px,4.6vw,52px);border-top:1px solid var(--line)}
.cta h2{font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.032em;line-height:1.12;text-wrap:balance;max-width:20ch}
.cta p{margin:16px 0 26px;max-width:54ch;font-size:16px;color:var(--fg-dim);line-height:1.62}
.cta .fine{margin-top:18px;margin-bottom:0;font-size:13px;color:var(--fg-faint)}

/* ── search ──────────────────────────────────────────────────────────── */
.searchbox{position:relative;margin-bottom:24px}
.searchbox input{
  width:100%;padding:9px 12px 9px 30px;
  border:0;border-bottom:1px solid var(--line);background:none;
  color:var(--fg);font:inherit;font-size:14.5px;border-radius:0;
}
.searchbox input::placeholder{color:var(--fg-faint)}
.searchbox input:focus{outline:0;border-bottom-color:var(--blue)}
.searchbox svg{position:absolute;left:4px;top:50%;transform:translateY(-50%);color:var(--fg-faint);pointer-events:none}
.results{list-style:none;display:flex;flex-direction:column;margin-top:6px}
.results li a{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
.results li a:hover b,.results li a:focus-visible b{color:var(--blue-bright)}
.results b{display:block;font-size:14px;font-weight:600;color:var(--fg);transition:color .16s}
.results span{display:block;margin-top:3px;font-size:12.5px;color:var(--fg-faint);line-height:1.45}
.results .empty{padding:10px 0;font-size:13.5px;color:var(--fg-faint)}

/* ── footer ──────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:clamp(46px,6vw,68px) 0 calc(36px + env(safe-area-inset-bottom))}
.foot-map{display:grid;gap:clamp(26px,3vw,36px);grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
.foot-brand{grid-column:1/-1}
@media(min-width:900px){.foot-brand{grid-column:auto;max-width:280px}}
.foot-brand p{margin-top:12px;font-size:13.5px;color:var(--fg-faint);line-height:1.6;max-width:36ch}
.foot-status{display:flex;align-items:center;gap:8px}
.pip{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(48,209,88,.6);flex-shrink:0}
.foot-map h2{font-size:11.5px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--fg-faint);margin-bottom:12px}
.foot-map ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--fg-dim)}
.foot-map a{transition:color .2s}
.foot-map a:hover{color:var(--fg)}
.foot-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:clamp(34px,4vw,46px);padding-top:22px;border-top:1px solid var(--line)}
.copy{font-size:12.5px;color:var(--fg-faint)}

/* ── 404 ─────────────────────────────────────────────────────────────── */
.oops{padding:calc(var(--nav-h) + 84px) 0 40px}
.oops h1{font-size:clamp(34px,6vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.oops p{margin:18px 0 0;max-width:50ch;font-size:16.5px;color:var(--fg-dim);line-height:1.6}

/* ── motion ──────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

@media print{
  nav#nav,.navpanel,.docs-side,.docs-toc,.skip,.cta,.pager,footer,.split-vis{display:none!important}
  body{background:#fff;color:#000}
  .prose{max-width:none;color:#000}
  .prose a{color:#000;text-decoration:underline}
}