/* QuilLab.net mockup stylesheet. Values copied from the app's client/styles/tokens.css (enhanced-dark = "Standard Dark"). */
:root{
  --bg:#121321; --s1:#1B1D2E; --s2:#262A40;
  --text:#F0ECE0; --t2:rgb(240 236 224/.82); --t3:rgb(240 236 224/.66); --dim:rgb(240 236 224/.48); --faint:rgb(240 236 224/.34);
  --acc:#EE6F2E; --acc-solid:#A94921; --acc-fg:#F0ECE0; --acc2:#9C78CF;
  --danger:#D7554C; --warn:#E9B13A; --ok:#5BBE78; --info:#6E9DCF;
  --sel:#56342E; --off:rgb(240 236 224/.15); --hov:rgb(240 236 224/.23); --on-soft:rgb(238 111 46/.22); --tint:rgb(238 111 46/.15);
  --line:rgb(240 236 224/.10); --line2:rgb(240 236 224/.16);
  --sh-panel:0 0 20px 2px rgb(0 0 0/.28),0 8px 32px 3px rgb(0 0 0/.16);
  --sh-tool:0 0 16px 1px rgb(0 0 0/.20),0 6px 24px 2px rgb(0 0 0/.15);
  --sh-sel:0 6px 16px rgb(0 0 0/.55);
  --sh-int:0 -2px 6px -1px rgb(0 0 0/.10),0 8px 20px -2px rgb(0 0 0/.10);
  --sh-well:inset 0 2px 10px rgb(0 0 0/.6);
  --inset:inset 0 1px 0 rgb(255 255 255/.10);
  --well:color-mix(in srgb,var(--bg) 70%,var(--s1));
  --grad:linear-gradient(-45deg,#35150e 0%,var(--bg) 50%,#26163e 100%);
  --grad-soft:linear-gradient(-45deg,#35150e 0%,var(--bg) 35%,var(--bg) 65%,#26163e 100%);
  --ui:"Manrope",system-ui,sans-serif; --ms:"Merriweather",Georgia,serif; --disp:"DM Serif Display",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--t2);text-decoration:none}a:hover{color:var(--text)}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:inherit}

/* page frame */
.page{min-height:100%;background:var(--bg);position:relative;overflow-x:clip}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.narrow{max-width:760px;margin:0 auto;padding:0 32px}
.sec{padding:112px 0}
.sec-tight{padding:72px 0}
.band{background:var(--s1)}
.grad{background:var(--grad-soft)}
.splat{position:absolute;pointer-events:none;opacity:.05;width:900px;height:900px;background-size:contain;background-repeat:no-repeat}

/* type */
.disp{font-family:var(--disp);font-size:72px;line-height:1.04;letter-spacing:-.01em}
.disp-m{font-family:var(--disp);font-size:56px;line-height:1.08}
.h2{font-family:var(--ms);font-size:36px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.h3{font-family:var(--ms);font-size:22px;line-height:1.35;font-weight:700}
.h4{font-family:var(--ms);font-size:17px;line-height:1.4;font-weight:700}
.lede{font-size:19px;line-height:1.65;color:var(--t2);max-width:620px}
.body{color:var(--t2)}
.small{font-size:13px;color:var(--t3)}
.eyebrow{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.eyebrow.acc{color:var(--acc)}
.serif-i{font-family:var(--ms);font-style:italic}
.acc{color:var(--acc)}
.tab-num{font-variant-numeric:tabular-nums}

/* buttons (Marginalia §9.14, scaled to 44px for marketing CTAs) */
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:6px;font-family:var(--ui);font-size:14.5px;font-weight:600;white-space:nowrap;transition:background .15s var(--ease)}
.btn-sm{height:34px;padding:0 14px;font-size:13px}
.btn-p{background:var(--acc-solid);color:var(--acc-fg)}
.btn-p:hover{background:color-mix(in srgb,var(--acc-solid) 88%,var(--text));color:var(--acc-fg)}
.btn-s{background:var(--off);color:var(--text)}
.btn-s:hover{background:var(--hov);color:var(--text)}
.btn-q{color:var(--t2);padding:0 12px}
.btn-q:hover{background:var(--off);color:var(--text)}
.ibtn{width:32px;height:32px;display:inline-grid;place-items:center;border-radius:6px;color:var(--t2)}
.ibtn:hover{background:var(--off);color:var(--text)}
.ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico-s{width:14px;height:14px}
.ico-l{width:20px;height:20px}

/* pills, keys */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:9999px;background:var(--off);font-size:11.5px;font-weight:600;color:var(--t2)}
.pill.on{background:var(--on-soft);color:var(--acc)}
.pill .dot{width:6px;height:6px;border-radius:50%}
.kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:4px;background:var(--s2);box-shadow:var(--sh-int);font-size:11px;font-weight:600;color:var(--t2)}
.kplus{font-size:11px;font-weight:600;color:var(--t3);padding:0 2px}

/* fields (§9.8) */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:600;color:var(--t2)}
.input{height:40px;padding:0 12px;border-radius:6px;background:var(--well);box-shadow:var(--sh-well);border:0;outline:0;font-family:var(--ms);font-size:14px;color:var(--text);width:100%}
.input::placeholder{font-style:italic;color:var(--faint)}
.input.focus{background-image:linear-gradient(var(--acc),var(--acc));background-size:calc(100% - 16px) 2px;background-position:8px calc(100% - 1px);background-repeat:no-repeat}
textarea.input{height:auto;padding:10px 12px;line-height:1.7;resize:none}

/* site header */
.hdr{position:sticky;top:0;z-index:20;background:rgb(18 19 33/.82);backdrop-filter:blur(18px);box-shadow:var(--sh-panel)}
.hdr-in{height:64px;display:flex;align-items:center;gap:28px;max-width:1280px;margin:0 auto;padding:0 32px}
.logo{height:28px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));display:block}
.nav{display:flex;align-items:center;gap:2px;flex:1}
.nav a,.nav button{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:6px;font-size:13.5px;font-weight:600;color:var(--t2)}
.nav a:hover,.nav button:hover{background:var(--off);color:var(--text)}
.nav .open{background:var(--sel);color:var(--text);box-shadow:var(--sh-sel)}
.hdr-r{display:flex;align-items:center;gap:6px}
.burger{display:none}

/* dropdown panels (§9.17 scaled) */
.pop{background:var(--s2);border-radius:8px;box-shadow:var(--sh-tool),var(--inset);padding:8px}
.mega{position:absolute;top:58px;left:50%;transform:translateX(-50%);width:880px;display:grid;grid-template-columns:1.35fr 1fr;gap:8px;padding:10px}
.mi{display:flex;gap:12px;padding:10px 12px;border-radius:6px;color:var(--t2)}
.mi:hover,.mi.hl{background:rgb(240 236 224/.07);color:var(--text)}
.mi .mi-ic{width:34px;height:34px;border-radius:6px;background:var(--off);display:grid;place-items:center;color:var(--acc);flex:none}
.mi b{display:block;font-family:var(--ms);font-size:14px;font-weight:700;color:var(--text)}
.mi span{font-size:12.5px;color:var(--t3);line-height:1.45}
.sep{height:1px;background:var(--line);margin:6px 8px}
.row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:4px;font-size:13px;color:var(--t2)}
.row:hover{background:rgb(240 236 224/.07);color:var(--text)}
.row .sc{margin-left:auto;font-size:11px;color:var(--t3)}

/* cards and panels: borderless, fill + shadow */
.card{background:var(--s1);border-radius:8px;box-shadow:var(--sh-int),var(--inset);padding:28px}
.card-2{background:var(--s2);border-radius:8px;padding:20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.stack{display:flex;flex-direction:column}
.g4{gap:4px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}.g48{gap:48px}
.hrow{display:flex;align-items:center}
.wrapx{flex-wrap:wrap}
.center{text-align:center;align-items:center}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}.mt64{margin-top:64px}

/* checklist */
.check{display:flex;gap:10px;align-items:flex-start;color:var(--t2);font-size:14.5px}
.check svg{margin-top:4px;color:var(--acc)}

/* app window frame for demos */
.win{background:var(--bg);border-radius:10px;box-shadow:0 30px 80px rgb(0 0 0/.55),0 0 0 1px rgb(240 236 224/.06);overflow:hidden;position:relative}
.win-bar{height:40px;display:flex;align-items:center;gap:10px;padding:0 12px;background:rgb(18 19 33/.9);box-shadow:var(--sh-panel);position:relative;z-index:2}
.win-bar .wm{height:16px}
.wtab{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:6px;font-size:11.5px;font-weight:600;color:var(--t3)}
.wtab.on{background:var(--s1);color:var(--text);box-shadow:0 0 14px 1px rgb(0 0 0/.25)}
.wtab.on svg{color:var(--acc)}
.win-body{display:flex;min-height:0}
.side{width:200px;background:var(--s1);padding:12px 8px;display:flex;flex-direction:column;gap:2px;flex:none}
.side .lbl{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:8px 8px 4px}
.srow{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;font-family:var(--ms);font-size:12px;color:var(--t2)}
.srow.on{background:var(--sel);color:var(--text);box-shadow:var(--sh-sel)}
.srow .n{margin-left:auto;font-family:var(--ui);font-size:10px;color:var(--t3)}
.ms{font-family:var(--ms);font-size:15px;line-height:1.85;color:var(--text)}
.ms p+p{text-indent:1.6em}
.caret{display:inline-block;width:1.5px;height:1.05em;background:var(--acc);vertical-align:-2px;margin-left:1px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ql-tag{font-family:var(--ms);font-style:italic;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--s2);color:var(--text)}
.ql-mention{color:var(--acc2);border-bottom:1px dashed rgb(156 120 207/.6)}
.ai-box{border:1.5px dashed rgb(238 111 46/.55);background:rgb(238 111 46/.06);border-radius:8px}
.ring{fill:none;stroke-linecap:round}

/* typed genre line */
.typed{color:var(--acc);font-style:italic;font-family:var(--disp);position:relative;white-space:nowrap}
.typed .sel{background:rgb(240 236 224/.32);border-radius:2px}
.typed .cur{display:inline-block;width:3px;height:.82em;background:var(--acc);margin-left:4px;vertical-align:-.04em;animation:blink .9s steps(1) infinite}

.typed .cur.solid{animation:none}
@media (prefers-reduced-motion:reduce){.caret,.typed .cur{animation:none}}

/* footer */
.ftr{background:var(--s1);padding:72px 0 40px}
.ftr-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.ftr h5{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.ftr a{display:block;font-size:13.5px;padding:4px 0;color:var(--t2)}
.ftr-b{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12.5px;color:var(--t3)}

/* docs */
.docs{display:grid;grid-template-columns:260px minmax(0,1fr) 220px;gap:48px;max-width:1320px;margin:0 auto;padding:40px 32px 96px}
.dnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:96px;align-self:start}
.dnav .lbl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:16px 10px 6px}
.dnav a{padding:6px 10px;border-radius:6px;font-size:13.5px;color:var(--t2)}
.dnav a.on{background:var(--sel);color:var(--text);box-shadow:var(--sh-sel)}
.prose{font-size:16px;line-height:1.75;color:var(--t2);max-width:72ch}
.prose h2{font-family:var(--ms);font-weight:700;font-size:24px;color:var(--text);margin:40px 0 12px}
.prose h3{font-family:var(--ms);font-weight:700;font-size:18px;color:var(--text);margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose ol{padding-left:22px;margin:0 0 16px}.prose li{margin:6px 0}
.callout{background:rgb(110 157 207/.10);border:1px solid rgb(110 157 207/.35);border-radius:8px;padding:14px 16px;font-size:14.5px;color:var(--t2)}
.callout.warn{background:rgb(233 177 58/.10);border-color:rgb(233 177 58/.4)}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);padding:10px 12px}
table.t td{padding:12px;color:var(--t2);background:var(--s1)}
table.t tr td:first-child{border-radius:6px 0 0 6px}table.t tr td:last-child{border-radius:0 6px 6px 0}
table.t{border-spacing:0 4px;border-collapse:separate}

/* nav current page */
.nav .cur{color:var(--text);background:var(--off)}
.chev{transition:transform .2s var(--ease)}
.open .chev{transform:rotate(180deg)}

/* ink splats (corner art from client/public/brand) */
.splat-tl{top:-260px;left:-300px;background-image:url(./Background_Top_Left.png)}
.splat-br{bottom:-300px;right:-300px;background-image:url(./Background_Bottom_Right.png)}

/* hover cards in demos */
.wl{position:relative;color:var(--text);border-bottom:1px dotted rgb(156 120 207/.75);cursor:default}
.wl:hover{background:rgb(156 120 207/.14)}
.hc{display:none;position:absolute;left:-8px;top:calc(100% + 8px);z-index:5;width:260px;background:var(--s2);border-radius:8px;box-shadow:var(--sh-tool),var(--inset);padding:12px 14px;font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--t2);text-indent:0;white-space:normal}
.wl:hover .hc,.typo:hover .hc{display:block}
.hc b{display:block;font-family:var(--ms);font-size:14px;color:var(--text);margin:2px 0 4px}
.typo{position:relative;text-decoration:underline wavy var(--danger);text-underline-offset:4px;text-decoration-thickness:1.5px;cursor:default}
.style-mark{text-decoration:underline wavy var(--info);text-underline-offset:4px;text-decoration-thickness:1.5px}
.kind{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2)}
.seg{display:flex;gap:2px}
.seg button{font-family:var(--ms);font-size:12.5px;color:var(--t3);padding:4px 10px 9px;position:relative}
.seg button.on{color:var(--text)}
.seg button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:1px;background:var(--acc)}
.status{display:flex;align-items:center;gap:10px;height:30px;padding:0 14px;font-size:11px;color:var(--t3);background:var(--s1)}
.bar{height:4px;border-radius:2px;background:var(--off);overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc);border-radius:2px}
.demo-cap{font-size:12.5px;color:var(--t3);display:flex;align-items:center;gap:8px}

/* responsive */
@media (max-width:900px){
  .wrap,.narrow{padding:0 16px}
  .sec{padding:72px 0}
  .disp{font-size:44px}.disp-m{font-size:38px}.h2{font-size:28px}
  .split,.split.rev,.grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr)}
  .nav,.hdr-r .hide-m{display:none}
  .burger{display:inline-grid}
  .hdr-in{padding:0 16px}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .docs{grid-template-columns:minmax(0,1fr);padding:24px 16px 72px}
  .dnav,.toc{display:none}
  .side{display:none}
  .mega{width:calc(100vw - 32px);grid-template-columns:1fr}
  .split-m{grid-template-columns:minmax(0,1fr)!important}
  .win-bar .wtab:nth-child(n+5),.win-bar .seg{display:none}
  .hide-m{display:none!important}
}

/* ===== v2: app primitives, copied from client/styles/controls.css and globals.css ===== */
.q-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:6px;font:600 13px/1 var(--ui);white-space:nowrap;transition:background .15s var(--ease)}
.q-btn.sm{height:26px;padding:0 10px;font-size:12px}
.q-btn.lg{height:40px;padding:0 18px;font-size:14px}
.q-p{background:var(--acc-solid);color:var(--acc-fg)}.q-p:hover{background:color-mix(in srgb,var(--acc-solid) 88%,var(--text));color:var(--acc-fg)}
.q-s{background:var(--off);color:var(--text)}.q-s:hover{background:var(--hov);color:var(--text)}
.q-q{color:var(--t2);padding:0 10px}.q-q:hover{background:var(--off);color:var(--text)}
.q-ib{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:6px;color:var(--t2)}.q-ib:hover{background:var(--off);color:var(--text)}
.q-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:9999px;background:var(--off);font:600 11.5px/1 var(--ui);color:var(--t2)}
.q-badge.on{background:var(--on-soft);color:var(--acc)}
.q-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 6px 2px 8px;border-radius:4px;background:var(--s2);font:italic 12.5px/1.4 var(--ms);color:var(--text)}
.q-eyebrow{font:600 11px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.q-kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:4px;background:var(--s2);box-shadow:var(--sh-int);font:600 11px/1 var(--ui);color:var(--t2)}
.q-seg{display:flex;gap:2px;flex-wrap:wrap}
.q-seg button,.q-seg a{position:relative;font:14px/1.3 var(--ms);color:var(--t3);padding:5px 12px 10px}
.q-seg button:hover,.q-seg a:hover{color:var(--t2)}
.q-seg .on{color:var(--text)}
.q-seg .on::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:1px;background:var(--acc)}
.q-seg .n{font:11px var(--ui);color:var(--t3);margin-left:5px}
.q-well{background:var(--well);box-shadow:var(--sh-well);border-radius:6px}
.q-panel{background:color-mix(in srgb,var(--s1) 88%,transparent);border-radius:8px;box-shadow:var(--sh-panel)}
.q-card{background:var(--s1);border-radius:8px}
.q-menu{background:var(--s2);border-radius:8px;padding:4px;box-shadow:var(--sh-tool);display:flex;flex-direction:column;gap:1px;min-width:200px}
.q-mi{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:4px;font:12.5px/1.35 var(--ui);color:var(--t2)}
.q-mi:hover{background:rgb(240 236 224/.07);color:var(--text)}
.q-mi.act{background:var(--tint);color:var(--acc)}
.q-mi .ic{width:15px;height:15px;flex:none;color:currentColor}
.q-mi .hint{margin-left:auto;font:11px var(--ui);color:var(--t3);font-variant-numeric:tabular-nums}
.q-mi .two{display:flex;flex-direction:column}.q-mi .two small{font-size:10.5px;color:var(--t3)}
.q-sep{height:1px;background:var(--line);margin:4px 8px}
.q-opt{display:flex;align-items:center;gap:8px;height:36px;padding:6px 9px;border-radius:4px;font:13px var(--ms);color:var(--t2)}
.q-opt.act{background:var(--tint);color:var(--acc)}
.q-kind{font:700 10px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.q-chip-sel{background:var(--sel);box-shadow:var(--sh-sel);color:var(--text)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.wlink{border-radius:4px;padding:1px 4px;font-weight:500;color:var(--acc2);background:rgb(156 120 207/.12);position:relative;cursor:default}
.wlink:hover{background:rgb(156 120 207/.18);text-decoration:underline}
.slink{color:var(--acc);background:rgb(238 111 46/.12)}
.wlink .hc{top:calc(100% + 6px)}
.wlink:hover .hc{display:block}
.cite{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;font:600 9px/1 var(--ui);margin:0 2px;vertical-align:middle;background:rgb(156 120 207/.2);color:var(--acc2)}
.cite.sc{background:rgb(238 111 46/.2);color:var(--acc)}

/* app window frame (v2) */
.appwin{-webkit-user-select:none;user-select:none;background:var(--bg);border-radius:10px;overflow:hidden;position:relative;box-shadow:0 30px 80px rgb(0 0 0/.5),0 0 0 1px rgb(240 236 224/.06);display:flex;flex-direction:column;font-family:var(--ui);color:var(--text);text-align:left}
.apphdr{height:56px;flex:none;display:flex;align-items:center;gap:20px;padding:0 18px;background:rgb(18 19 33/.8);box-shadow:var(--sh-panel);position:relative;z-index:3}
.apphdr .wm{height:24px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.atabs{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden}
.atab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;font:500 12px/1 var(--ui);color:var(--t3);white-space:nowrap;position:relative}
.atab svg{width:13px;height:13px}
.atab.on{background:var(--s1);color:var(--text);box-shadow:var(--sh-tab-sm,0 0 14px 1px rgb(0 0 0/.25),0 4px 20px 2px rgb(0 0 0/.13))}
.atab.on svg{color:var(--acc)}
.agroup{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:4px;background:var(--off);font:600 11px var(--ui);color:var(--t2)}
.appbody{flex:1;min-height:0;display:flex;gap:12px;padding:12px;background:var(--grad-soft)}
.marker{position:absolute;z-index:6;width:24px;height:24px;border-radius:50%;background:var(--acc-solid);color:var(--acc-fg);font:700 12px/24px var(--ui);text-align:center;box-shadow:0 0 0 3px var(--bg),var(--sh-sel)}

/* v2 page layout helpers */
.pg-title{font-family:var(--ms);font-weight:700;font-size:40px;line-height:1.2;letter-spacing:-.01em}
.keyed{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 14px;align-items:start}
.keyed .k{width:24px;height:24px;border-radius:50%;background:var(--acc-solid);color:var(--acc-fg);font:700 12px/24px var(--ui);text-align:center}
.reftable{width:100%;border-collapse:separate;border-spacing:0 2px;font-size:14px}
.reftable th{text-align:left;font:600 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:8px 14px}
.reftable td{padding:12px 14px;background:var(--s1);color:var(--t2);vertical-align:top}
.reftable td:first-child{border-radius:6px 0 0 6px;color:var(--text);font-family:var(--ms);font-weight:700;white-space:nowrap}
.reftable td:last-child{border-radius:0 6px 6px 0}
.tablebox{overflow-x:auto}
.srow2{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:6px;background:var(--s1)}
.srow2+.srow2{margin-top:2px}
.srow2 .lbl{font:600 12px var(--ui);color:var(--t3);width:120px;flex:none}
@media (max-width:900px){
  .hide-sm{display:none!important}
  .apphdr{gap:10px;padding:0 12px}.atab:nth-child(n+3){display:none}
  .pg-title{font-size:30px}
  .appbody{padding:8px}
  .reftable td:first-child{white-space:normal}
}
.prow{padding:9px 0;font-size:14px;color:var(--t2);border-top:1px solid var(--line)}
.prow:first-child{border-top:0}
.dash-card{padding:20px;border-radius:8px;background:rgb(27 29 46/.5);box-shadow:var(--sh-tool);min-width:0;overflow:hidden}
.dash-inner{border-radius:6px;background:rgb(27 29 46/.8);box-shadow:var(--sh-int)}
/* v2 header: the app header's surface, nav items use the app tab chip */
.hdr2{position:sticky;top:0;z-index:20;background:rgb(18 19 33/.8);backdrop-filter:blur(18px);box-shadow:var(--sh-panel)}
.hdr2-in{height:60px;display:flex;align-items:center;gap:24px;max-width:1200px;margin:0 auto;padding:0 24px}
.nav2{display:flex;align-items:center;gap:4px}
.nav2 a,.nav2 button{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border-radius:8px;font:500 13px/1 var(--ui);color:var(--t3);transition:background .15s var(--ease),color .15s var(--ease)}
.nav2 a:hover,.nav2 button:hover{color:var(--text);background:var(--off)}
.nav2 .cur,.nav2 .open{background:var(--s1);color:var(--text);box-shadow:0 0 14px 1px rgb(0 0 0/.25),0 4px 20px 2px rgb(0 0 0/.13)}
.nav2 .cur svg,.nav2 .open svg{color:var(--acc)}
.hdr2 .open .chev{transform:rotate(180deg)}
.burger2{display:none}
.menu-h{font:700 9.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:8px 9px 4px}
.q-mi.mob{min-height:44px;font-size:14px}
@media (max-width:900px){.nav2{display:none}.burger2{display:inline-grid}.hdr2-in{padding:0 12px 0 16px;gap:12px}}
/* v2 corrections from the app source */
.apphdr{height:56px}.apphdr .wm{height:28px}
.atab{height:28px;padding:0 8px 0 12px;border-radius:8px;font:500 12px/1 var(--ui);color:rgb(128 127 128)}
.atab.on{background:var(--s1);color:var(--text);box-shadow:0 0 14px 1px rgb(0 0 0/.25),0 4px 20px 2px rgb(0 0 0/.13)}
.awin-ctl{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--t2)}
.awin-ctl svg{width:14px;height:14px}
.corner-tl{position:absolute;top:0;left:0;height:100%;aspect-ratio:1;background:url(./Background_Top_Left_Strong.png) top left/contain no-repeat;pointer-events:none;opacity:.08}
.corner-br{position:absolute;bottom:0;right:0;height:100%;aspect-ratio:1;background:url(./Background_Bottom_Right_Strong.png) bottom right/contain no-repeat;pointer-events:none;opacity:.08}
.mention{position:relative;cursor:default}
.mention .whc{display:none;position:absolute;left:-10px;top:calc(100% + 8px);z-index:8;width:300px;background:var(--s2);border:1px solid var(--line2);border-radius:8px;box-shadow:var(--sh-panel);padding:10px 12px;font:12px/1.4 var(--ui);color:var(--t2);text-indent:0}
.mention:hover .whc,.whc.show{display:block}
.whc .h{display:flex;align-items:center;gap:8px}
.whc .chip{width:22px;height:22px;border-radius:6px;background:rgb(238 111 46/.12);color:var(--acc);display:grid;place-items:center}
.whc .t{font:700 14px var(--ms);color:var(--text)}
.whc .k{font-size:10px;color:var(--dim)}
.whc .f{display:flex;gap:6px;align-items:baseline;margin-top:5px}
.whc .f i{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;transform:translateY(-1px)}
.whc .f b{font:700 9px var(--ui);text-transform:uppercase;color:var(--dim);letter-spacing:.06em}
.whc .ft{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:10px;color:var(--dim)}
.err{text-decoration:underline wavy rgb(215 85 76);text-underline-offset:3px;text-decoration-skip-ink:none}
.warnu{text-decoration:underline wavy rgb(233 177 58);text-underline-offset:3px;text-decoration-skip-ink:none}
/* Rainy Window mood (feat/mood-overhaul, lib/moods/builtins/rainy-window.ts) */
.mood-rain{position:relative;overflow:hidden;background:#070C12}
.mood-rain .l-grad{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 8%,rgba(39,88,128,.28) 0%,rgba(8,15,24,.96) 58%,rgba(4,8,14,1) 100%)}
.mood-rain .l-haze{position:absolute;inset:0;mix-blend-mode:lighten;opacity:.304;background:radial-gradient(140% 100% at 50% 84%,rgba(96,150,190,.26) 0%,transparent 56%),radial-gradient(130% 84% at 15% 76%,rgba(96,150,190,.26) 0%,transparent 52%),radial-gradient(130% 84% at 85% 76%,rgba(96,150,190,.26) 0%,transparent 52%)}
.mood-rain .l-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(132% 96% at 50% 50%,rgba(0,0,0,0) 40%,rgba(0,0,0,.2436) 72%,rgba(0,0,0,.4524) 100%),radial-gradient(94% 28% at 50% -2%,rgba(0,0,0,.1392),rgba(0,0,0,0) 72%),radial-gradient(94% 28% at 50% 102%,rgba(0,0,0,.1392),rgba(0,0,0,0) 72%),radial-gradient(44% 38% at 0% 0%,rgba(0,0,0,.1972),rgba(0,0,0,0) 80%),radial-gradient(44% 38% at 100% 0%,rgba(0,0,0,.1972),rgba(0,0,0,0) 80%),radial-gradient(44% 38% at 0% 100%,rgba(0,0,0,.1972),rgba(0,0,0,0) 80%),radial-gradient(44% 38% at 100% 100%,rgba(0,0,0,.1972),rgba(0,0,0,0) 80%)}
.mood-rain .l-rain{position:absolute;inset:0;opacity:.26}
.mood-rain:hover .l-rain{opacity:.34}
.drop{position:absolute;top:-30px;border-radius:1px;background:linear-gradient(to bottom,rgba(143,195,232,0),#8FC3E8);box-shadow:0 0 8px rgba(143,195,232,.35);transform:rotate(7deg);animation:fall linear infinite}
@keyframes fall{from{translate:0 -40px}to{translate:-60px 820px}}
@media (prefers-reduced-motion:reduce){.drop{animation:none}}
.parts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 28px;align-items:start}
.parts figure{margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.parts figcaption{font-size:14px;line-height:1.6;color:var(--t2);max-width:46ch}
.frag{background:var(--s1);border-radius:8px;padding:20px;box-shadow:var(--sh-panel);position:relative}
.wk{height:20px;border-radius:4px}
.tree{display:flex;align-items:center;gap:8px;padding:6px 10px 6px calc(10px + var(--d) * 16px);border-radius:6px;color:var(--t2);font-family:var(--ms)}
.tree::before{content:"";width:13px;height:11px;border-radius:2px;background:rgb(240 236 224/.18);flex:none}
.tree.on{background:var(--sel);box-shadow:var(--sh-sel);color:var(--text)}
.tree span{margin-left:auto;font:11px var(--ui);color:var(--t3)}
@media (max-width:900px){.parts>*{grid-column:1/-1!important}.parts{gap:32px}}
.subnav{border-bottom:1px solid var(--line)}
.subnav .q-seg a{padding-top:14px;padding-bottom:14px}
.subnav .q-seg .on::after{bottom:0}
.keygrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px}
.thumb{width:540px;height:324px;overflow:hidden;border-radius:10px;flex:none}
.thumb>*{width:1200px;transform:scale(.45);transform-origin:top left}
@media (max-width:900px){.keygrid{grid-template-columns:minmax(0,1fr)}.thumb{width:100%;height:auto}.thumb>*{width:100%;transform:none}}
.ovrow{display:grid;grid-template-columns:540px minmax(0,1fr);gap:48px;align-items:center;padding:20px;border-radius:10px;color:var(--text)}
.ovrow:hover{background:var(--s1);color:var(--text)}
@media (max-width:900px){.ovrow{grid-template-columns:minmax(0,1fr);gap:20px;padding:12px 0}}
/* account profile banner, carried over from src/components/account/AccountView.tsx */
.ink-splat{position:absolute;pointer-events:none;left:-2%;top:50%;width:52%;height:240%;transform:translateY(-50%)}
.ink-splat::before{content:"";position:absolute;inset:0;background:var(--acc2);opacity:.07;-webkit-mask:url(./splat-03.png) center/contain no-repeat;mask:url(./splat-03.png) center/contain no-repeat;transform:rotate(212deg)}
.banner-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px}
@media (max-width:640px){.banner-row{flex-direction:column;align-items:flex-start;padding:24px}}