/* NANALOG Docs. Rides on the studio's own CSS (app.css: RAL tokens, fonts, .ipad pads, .scrlab readouts, LEDs).
   The studio is an instrument at 13px; the docs are for reading, so body type steps up while the materials stay the same.
   Light language, as in the studio: green = on, amber = what's set (readouts, lit keys), orange = where you are. */
:root{--rd:16px;--rd-s:14px;--rd-h1:40px;--rd-h2:23px;--rd-h3:17px;--navw:236px;--tocw:200px;--topH:58px;--line:rgba(236,236,231,.075)}
/* the page scrolls as a document (the app's height:100% would make body its own scroller) */
html:has(body.docs),body.docs{height:auto!important;overflow:visible!important;position:static!important;inset:auto!important}
body.docs{background:var(--bg);color:var(--text);font:400 var(--rd)/1.65 var(--sans);overflow-x:clip!important}
.docs a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;z-index:50;padding:6px 10px;background:var(--acc);color:#fff;border-radius:var(--r-s)}.skip:focus{left:8px}

/* ---------- top bar: the studio's own bar ---------- */
.dtop{position:sticky;top:0;z-index:20;height:var(--topH);display:flex;align-items:center;gap:16px;padding:0 18px;
  background:linear-gradient(180deg,#1d1f21,#141517);box-shadow:inset 0 -1px 0 rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.03),0 8px 18px -10px rgba(0,0,0,.9)}
.dbrand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.dmark{width:26px;height:24px;color:var(--mkc);display:block}.dmark svg{width:100%;height:100%;display:block}
.dwm{height:15px;width:auto;display:block}
.dtag{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-xs) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--disp);padding:4px 8px;border-radius:var(--r-s);background:#08090a;box-shadow:inset 0 1px 3px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.04)}
.led{display:inline-block;width:6px;height:6px;border-radius:50%;background:#2a2d2f;box-shadow:inset 0 1px 1px rgba(0,0,0,.6);flex:none}
.led.on{background:var(--led);box-shadow:0 0 7px color-mix(in srgb,var(--led) 75%,transparent)}
.dtag .led.on,.scrlab .led.on{background:var(--disp);box-shadow:0 0 7px color-mix(in srgb,var(--disp) 70%,transparent)}
.dsearch{position:relative;flex:1;min-width:0;max-width:520px;margin-left:auto;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:var(--r-m);background:#08090a;box-shadow:inset 0 1px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.04)}
.dsearch input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font:400 var(--rd-s) var(--sans);color:var(--text)}
.dsearch input::placeholder{color:var(--faint)}
.dsearch kbd,.docs kbd{font:500 var(--fs-xs) var(--mono);color:var(--dim);padding:2px 6px;border-radius:var(--r-xs);background:var(--ctl);box-shadow:inset 0 -1px 0 rgba(0,0,0,.5)}
.dsearch:focus-within{box-shadow:inset 0 1px 4px rgba(0,0,0,.9),0 0 0 1.5px var(--acc)}
.dres{position:absolute;left:0;right:0;top:40px;max-height:min(70vh,520px);overflow:auto;padding:6px;border-radius:var(--r-l);background:rgba(24,25,28,.96);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(0,0,0,.7),0 18px 40px -12px rgba(0,0,0,.9)}
.dres a{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:8px 10px;border-radius:var(--r-m);text-decoration:none}
.dres a:hover,.dres a.on{background:var(--ctl)}
.dres .k{grid-row:1/3;align-self:center;font:500 var(--fs-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--disp);width:62px}
.dres b{font:500 var(--rd-s)/1.3 var(--sans)}.dres span{font:400 12px var(--mono);color:var(--faint)}
.dres .none{padding:12px;color:var(--faint);font:400 var(--rd-s) var(--sans)}
/* keys: the studio's Export key (orange GO) and a plain key */
.dgo,.dkey{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:var(--r-m);text-decoration:none;font:600 var(--fs-s) var(--mono);letter-spacing:.12em;text-transform:uppercase;flex:none;transition:transform .07s}
.dgo{color:#fff;background:linear-gradient(180deg,#ff5a26,var(--acc));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 4px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.6),0 2px 0 #7a2208,0 8px 16px -8px rgba(244,70,17,.7)}
.dkey{color:var(--text);background:radial-gradient(130% 90% at 50% 0%,#2a2c30,#18191c 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -3px 7px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c}
.dgo:active,.dkey:active{transform:translateY(2px)}
.dburger{display:none;width:34px;height:34px;border:0;border-radius:var(--r-m);background:var(--ctl);padding:9px 8px;flex-direction:column;justify-content:space-between}
.dburger i{display:block;width:100%;height:2px;border-radius:2px;background:var(--text)!important;flex:none}

/* ---------- frame: nav · page · on this page ---------- */
.dwrap{display:grid;grid-template-columns:var(--navw) minmax(0,1fr) var(--tocw);min-height:calc(100vh - var(--topH))}
body:not(:has(.dtoc)) .dwrap{grid-template-columns:var(--navw) minmax(0,1fr)}
.dnav{position:sticky;top:var(--topH);align-self:start;height:calc(100vh - var(--topH));overflow:auto;padding:18px 12px 40px 16px;background:linear-gradient(90deg,#141517,#121314);box-shadow:inset -1px 0 0 var(--line);scrollbar-width:thin}
.nsec{margin-bottom:16px}
.docs .dh{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:500 var(--fs-xs)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.docs .dh .led.on{background:var(--pc,var(--led));box-shadow:0 0 6px color-mix(in srgb,var(--pc,var(--led)) 70%,transparent)}
.docs .dh em{font-style:normal;color:var(--faint)}
.nl{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;margin:1px 0;border-radius:var(--r-s);text-decoration:none;font:400 var(--rd-s)/1.35 var(--sans);color:var(--dim)}
.nl em{font:500 var(--fs-xs) var(--mono);font-style:normal;color:var(--faint)}
.nl:hover{color:var(--text);background:rgba(255,255,255,.035)}
.nl.on{color:var(--text);background:var(--ctl);box-shadow:inset 2px 0 0 var(--acc)}
.nsec.fx .nl{font-size:13.5px;padding:3px 10px}
.dmain{min-width:0;padding:36px clamp(18px,4vw,56px) 80px}
.dtoc{position:sticky;top:var(--topH);align-self:start;padding:36px 18px 0 0}
.dtoc a{display:block;padding:4px 0 4px 10px;font:400 13px/1.4 var(--sans);color:var(--faint);text-decoration:none;box-shadow:inset 1px 0 0 var(--line)}
.dtoc a:hover,.dtoc a.on{color:var(--text);box-shadow:inset 2px 0 0 var(--acc)}
.dfoot{display:flex;gap:18px;align-items:center;padding:18px 24px;box-shadow:inset 0 1px 0 var(--line);color:var(--faint);font:400 13px var(--sans)}.dfoot a{margin-left:auto;font:500 var(--fs-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ---------- page type ---------- */
.fxhead{max-width:820px;margin-bottom:22px}
.docs h1{margin:10px 0 10px;font:650 var(--rd-h1)/1.08 var(--sans);letter-spacing:-.02em;text-wrap:balance}
.docs h2{margin:44px 0 12px;font:620 var(--rd-h2)/1.25 var(--sans);letter-spacing:-.01em;scroll-margin-top:80px}
.docs h3{margin:28px 0 8px;font:600 var(--rd-h3)/1.3 var(--sans);scroll-margin-top:80px}
.docs h2.dh,.docs h3.dh{font:500 var(--fs-xs)/1 var(--mono);letter-spacing:.14em;margin:0 0 12px}
.lede{margin:12px 0 0;max-width:68ch;font:400 19px/1.55 var(--sans);color:#c9ccca;text-wrap:pretty}
.prose{max-width:760px}
.prose p,.fxmain>p,.prose li{max-width:68ch;color:#d4d6d3}
.prose ul,.prose ol{padding-left:22px}.prose li{margin:5px 0}.prose li::marker{color:var(--disp)}
.docs code{font:500 .88em var(--mono);padding:1px 6px;border-radius:var(--r-xs);background:var(--ctl);color:var(--disp)}
.docs strong{font-weight:600;color:var(--text)}
.prose a,.fxmain p a,.cap a{color:var(--text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 70%,transparent);text-underline-offset:3px}
.prose img{max-width:100%;border-radius:var(--r-m);box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.chiprd{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--r-s);background:#08090a;box-shadow:inset 0 1px 3px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.04);font:500 var(--fs-xs) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--disp)}
.chiprd .led.on{background:var(--disp);box-shadow:0 0 7px color-mix(in srgb,var(--disp) 70%,transparent)}
.crumb{display:block;margin-bottom:6px}.crumb a{text-decoration:none}.crumb a:hover{color:var(--text)}
.sub{margin:-4px 0 14px}
.stub{padding:12px 14px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line)}
/* callout: a faceplate screen */
.callout{position:relative;max-width:68ch;margin:22px 0;padding:34px 18px 14px;border-radius:var(--r-l);background:#07080a;box-shadow:inset 0 2px 8px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.03),0 1px 0 rgba(255,255,255,.04)}
.callout p{margin:0;color:#d4d6d3}
.tbl{overflow-x:auto;margin:18px 0}.tbl table{border-collapse:collapse;min-width:100%;font:400 var(--rd-s)/1.5 var(--sans)}
.tbl th{text-align:left;font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:8px 12px;box-shadow:inset 0 -1px 0 var(--line)}
.tbl td{padding:9px 12px;vertical-align:top;box-shadow:inset 0 -1px 0 var(--line);color:#d4d6d3}

/* ---------- pads: the Looks bar's pads, with a screen for the picture ---------- */
.pads{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.pads.four{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.docs .ipad{text-decoration:none;padding:10px 11px 12px}
.docs .ipad>b{font:550 15px/1.25 var(--sans)}
.docs .ipad .ps{font-size:10.5px;line-height:1.45}
.docs .ipad .pd{font:400 13px/1.45 var(--sans);color:var(--dim)}
.pimg{display:block;overflow:hidden;border-radius:6px;background:#050506;box-shadow:inset 0 1px 4px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.7);aspect-ratio:4/5}
.pimg img{display:block;width:100%;height:100%;object-fit:cover}
.fxpad .cnt{color:var(--dim)}
.grp{margin:34px 0}.grp .dh .more{margin-left:auto;text-decoration:none;color:var(--faint)}.grp .dh .more:hover{color:var(--text)}
.filt{display:flex;align-items:center;gap:10px;max-width:420px;height:36px;margin-top:18px;padding:0 12px;border-radius:var(--r-m);background:#08090a;box-shadow:inset 0 1px 4px rgba(0,0,0,.9)}
.filt input{flex:1;border:0;background:none;outline:0;font:400 var(--rd-s) var(--sans);color:var(--text)}

/* ---------- effect page ---------- */
.fxgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start}
.fxmain{min-width:0;max-width:820px}
.fxplate{position:sticky;top:calc(var(--topH) + 18px);max-height:calc(100vh - var(--topH) - 36px);overflow:auto;scrollbar-width:thin;padding:12px;border-radius:var(--r-l);background:var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(0,0,0,.7),0 14px 30px -14px rgba(0,0,0,.9)}
.plate{pointer-events:none;font-size:var(--fs-b);line-height:1.45}
.ab{position:relative;margin:6px 0 8px;max-width:620px;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;background:#050506;box-shadow:inset 0 2px 8px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.75),0 0 0 6px #121315,0 0 0 7px rgba(255,255,255,.04)}
.ab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ab .a{clip-path:inset(0 0 0 var(--r))}
.ab::after{content:"";position:absolute;top:0;bottom:0;left:var(--r);width:2px;margin-left:-1px;background:var(--disp);box-shadow:0 0 10px var(--disp);pointer-events:none}
.ab input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ab .scrlab{z-index:3}
.cap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;max-width:620px;margin:0 0 24px}
.ogo{margin-left:auto;text-decoration:none!important;color:var(--acc)!important}
.fsec{margin:18px 0 26px;padding:16px 16px 6px;border-radius:var(--r-l);background:linear-gradient(180deg,#191a1d,#151618);box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 0 1px rgba(0,0,0,.65)}
.ctls{list-style:none;margin:0;padding:0}
.ctl{display:grid;grid-template-columns:118px minmax(0,1fr);gap:2px 16px;padding:11px 0;box-shadow:inset 0 -1px 0 var(--line);scroll-margin-top:90px}
.ctl:last-child{box-shadow:none}
.ctl .ck{grid-row:1/4;font:500 var(--fs-xs)/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ctl b{font:550 15.5px/1.35 var(--sans)}
.ctl .rng{font:400 12.5px/1.5 var(--mono);color:var(--dim)}
.ro{color:var(--disp)}
.ctl p{margin:4px 0 0;font-size:15px;color:#c9ccca}
.ctl:target{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 10%,transparent),transparent 70%)}
.steps{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.steps .kc{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:var(--r-s);color:var(--dim);background:radial-gradient(130% 90% at 50% 0%,#26282b,#18191c 75%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 4px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.65)}
.steps .kc.on{color:var(--disp);text-shadow:0 0 8px color-mix(in srgb,var(--disp) 55%,transparent)}
.prepad .pd{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pn2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}.pn2 .nx{text-align:right}.pn2 .ipad.row span{gap:4px}.pn2 em{font:500 var(--fs-xs) var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center;margin:8px 0 48px}
.hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.02}.hero h1 em{font-style:normal;color:var(--disp);text-shadow:0 0 22px rgba(255,178,0,.22)}
.hgo{display:flex;gap:10px;margin-top:26px}
.hscr{position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:#050506;box-shadow:inset 0 2px 8px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.75),0 0 0 7px #121315,0 0 0 8px rgba(255,255,255,.04),0 30px 60px -30px rgba(0,0,0,.9)}
.hscr video{width:100%;height:100%;object-fit:cover;display:block}
.ways{margin:34px 0}
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.sthumb{display:grid;gap:6px;text-decoration:none}.sthumb img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.75);display:block;transition:transform .15s}
.sthumb:hover img{transform:translateY(-2px)}.sthumb:hover .lbl{color:var(--text)}

/* ---------- small screens ---------- */
@media (max-width:1180px){.dwrap,body:not(:has(.dtoc)) .dwrap{grid-template-columns:var(--navw) minmax(0,1fr)}.dtoc{display:none}.fxgrid{grid-template-columns:minmax(0,1fr)}.fxplate{position:static;max-height:none;justify-self:start}}
@media (max-width:860px){
  :root{--rd-h1:32px}
  .dburger{display:flex}.dwm{height:13px}.dtag{display:none}.dgo{padding:0 10px;font-size:9.5px}.dsearch kbd{display:none}
  .dwrap,body:not(:has(.dtoc)) .dwrap{grid-template-columns:minmax(0,1fr)}
  .dnav{position:fixed;left:0;top:var(--topH);z-index:15;width:min(300px,86vw);transform:translateX(-102%);transition:transform .2s;box-shadow:12px 0 30px rgba(0,0,0,.6)}
  body.navon .dnav{transform:none}
  .dmain{padding:24px 16px 60px}.hero{grid-template-columns:1fr}.strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ctl{grid-template-columns:1fr}.ctl .ck{grid-row:auto}.pn2{grid-template-columns:1fr}.fxplate{display:none}}
@media (max-width:520px){.dtop .dgo{display:none}.dtop{gap:10px;padding:0 12px}.dsearch{min-width:0}.dsearch .lbl{display:none}.dwm{display:none}.pads,.pads.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.vkey{position:absolute;right:12px;bottom:12px;z-index:3;height:28px;padding:0 12px;border:0;border-radius:var(--r-s);font:500 var(--fs-xs) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--disp);background:rgba(8,9,10,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(0,0,0,.7)}
.ab .scrlab{padding:4px 8px;border-radius:var(--r-s);background:rgba(8,9,10,.8);box-shadow:0 0 0 1px rgba(0,0,0,.6)}

/* live demos */
.ab .playk{position:absolute;right:12px;bottom:12px;z-index:4;height:32px;padding:0 14px;border:0;border-radius:var(--r-m);font:600 var(--fs-s) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,#ff5a26,var(--acc));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 4px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.6),0 2px 0 #7a2208,0 8px 16px -8px rgba(244,70,17,.7)}
.ab .playk:active{transform:translateY(2px)}
.ab.live{max-width:none;width:100%;aspect-ratio:auto;height:min(80vh,680px)}
.ab.live::after{display:none}
.ab iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg)}
.ab .stopk{left:22px;right:auto;bottom:22px;height:28px;background:rgba(8,9,10,.85);color:var(--disp);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.ab.live .scrlab{left:auto;right:auto;display:none}
.fwarn{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;background:rgba(5,5,6,.86);backdrop-filter:blur(6px)}
.fwarn p{margin:0;max-width:34ch;color:var(--text);font:400 15px/1.5 var(--sans)}
.fwarn .playk{position:static}
@media (max-width:760px){.ab .playk{display:none}}
/* made with NANALOG */
.show{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.shw{margin:0;display:grid;gap:8px}.shw .pimg.sq{aspect-ratio:1/1}.shw figcaption{display:grid;gap:3px}.shw b{font:550 14px/1.3 var(--sans)}.shw .lbl{font-size:10px;line-height:1.4;text-transform:none;letter-spacing:.04em}
.ways .dh .more{margin-left:auto;text-decoration:none;color:var(--faint)}
/* while a demo is live it takes the page's full width; the frozen faceplate steps aside for the real one */
.fxgrid:has(.ab.live){grid-template-columns:minmax(0,1fr)}
.fxgrid:has(.ab.live) .fxplate{display:none}
.fxgrid:has(.ab.live) .fxmain{max-width:none}
.fxgrid:has(.ab.live) .fxmain>:not(.ab){max-width:820px}