[data-href]{cursor:pointer}
/* ============================================================
   SWISS BANK IN ORBITAL CYBERSPACE
   Hypermodern LLC — design language & component library
   The canonical token set + reusable components. Load this on
   any Hypermodern surface; the docs in Design System.html are
   rendered entirely from these styles (the system dogfoods itself).
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --hue:211;

  /* ink — the bank's paper trail, near-black to near-white, all one cool hue */
  --ink:hsl(var(--hue),32%,12%);
  --ink-m:hsl(var(--hue),14%,42%);
  --ink-f:hsl(var(--hue),10%,58%);
  --ink-g:hsl(var(--hue),8%,72%);

  /* accent — the only saturated color. one hue, two lightnesses. */
  --accent:hsl(var(--hue),58%,38%);
  --accent-d:hsl(var(--hue),40%,58%);

  /* surfaces */
  --white:hsl(var(--hue),20%,99.5%);
  --paper:hsl(var(--hue),22%,98.6%);
  --border:hsl(var(--hue),12%,88%);
  --border-f:hsl(var(--hue),8%,92%);

  /* glass — orbital cyberspace: frosted, backlit, weightless */
  --ge:hsla(var(--hue),30%,80%,.25);
  --gf:hsla(var(--hue),25%,96%,.5);
  --gfh:hsla(var(--hue),25%,97%,.7);

  /* type */
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* space + form */
  --pad:clamp(1.25rem,4vw,5rem);
  --radius:2px;
  --radius-lg:3px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* code surface — soft, light-mode "paper" form (dark mode flips these) */
  --code-bg:hsl(var(--hue),24%,96.5%);
  --code-fg:hsl(var(--hue),30%,22%);
  --code-border:var(--ge);
  --code-lbl:var(--ink-g);
  --code-gutter:hsl(var(--hue),14%,68%);

  /* syntax tokens — tuned for the light surface */
  --c-key:hsl(var(--hue),56%,44%);
  --c-str:hsl(150,46%,30%);
  --c-num:hsl(28,60%,38%);
  --c-title:hsl(266,42%,50%);
  --c-attr:hsl(190,52%,32%);
  --c-com:hsl(var(--hue),13%,55%);
  --c-punc:var(--ink-m);
}

/* ============================================================
   ONO-SENDAI — dark theme. Token override only; every surface
   inherits it because they all route through the vars above.
   "Black ICE. The most exclusive party — past ze FACEKONTROL."
   Carbon blacks are placeholders, structured for exact-value swap.
   ============================================================ */
html[data-theme="onosendai"]{
  /* text — white-ass, stepping down to ghost */
  --ink:hsl(var(--hue),16%,96%);
  --ink-m:hsl(var(--hue),12%,70%);
  --ink-f:hsl(var(--hue),11%,52%);
  --ink-g:hsl(var(--hue),12%,36%);

  /* accent — lifted for luminance on carbon */
  --accent:hsl(var(--hue),72%,64%);
  --accent-d:hsl(var(--hue),38%,52%);

  /* surfaces — carbon stack (swap these for exact ono-sendai levels) */
  --white:hsl(var(--hue),16%,6.5%);    /* base background */
  --paper:hsl(var(--hue),15%,9%);      /* lifted panel */
  --border:hsl(var(--hue),14%,18%);
  --border-f:hsl(var(--hue),13%,14%);

  /* glass — frosted black, backlit from within */
  --ge:hsla(var(--hue),22%,70%,.13);
  --gf:hsla(var(--hue),20%,62%,.038);
  --gfh:hsla(var(--hue),24%,66%,.07);

  /* code — back to the luminous on-dark palette */
  --code-bg:hsl(var(--hue),18%,10%);
  --code-fg:hsla(var(--hue),20%,99%,.9);
  --code-border:hsla(var(--hue),20%,40%,.22);
  --code-lbl:hsla(var(--hue),50%,70%,.7);
  --code-gutter:hsla(var(--hue),20%,99%,.28);
  --c-key:hsl(var(--hue),62%,72%);
  --c-str:hsl(150,34%,63%);
  --c-num:hsl(28,44%,67%);
  --c-title:hsl(266,40%,76%);
  --c-attr:hsl(190,40%,67%);
  --c-com:hsla(var(--hue),18%,92%,.4);
  --c-punc:hsla(var(--hue),20%,99%,.7);
}
/* grain reads heavier on carbon; bloom runs hotter */
html[data-theme="onosendai"] .grain::after{opacity:.03}
html[data-theme="onosendai"] .orbital-ambient i:nth-child(1){background:radial-gradient(ellipse,hsla(var(--hue),60%,32%,.22),transparent 70%)}
html[data-theme="onosendai"] .orbital-ambient i:nth-child(2){background:radial-gradient(ellipse,hsla(var(--hue),55%,28%,.16),transparent 65%)}
html[data-theme="onosendai"] .amb i:nth-child(1){background:radial-gradient(ellipse,hsla(var(--hue),60%,32%,.2),transparent 70%)}
html[data-theme="onosendai"] .amb i:nth-child(2){background:radial-gradient(ellipse,hsla(var(--hue),55%,28%,.14),transparent 65%)}
html[data-theme="onosendai"] .amb i:nth-child(3){background:radial-gradient(ellipse,hsla(var(--hue),50%,30%,.12),transparent 60%)}
/* theme-aware chrome: frosted header / footer / status bars flip to carbon */
html[data-theme="onosendai"] .bar,
html[data-theme="onosendai"] .ft,
html[data-theme="onosendai"] .app-status,
html[data-theme="onosendai"] .controls{background:hsla(var(--hue),16%,7%,.82)!important;border-color:hsla(var(--hue),20%,60%,.12)!important}
html[data-theme="onosendai"] .shell-topbar{background:hsla(var(--hue),16%,7.5%,.92)!important;border-bottom-color:hsla(var(--hue),20%,60%,.12)!important}
/* deck nav (orbital-deck.css) — force carbon regardless of per-panel .dk toggle */
html[data-theme="onosendai"] .nav,
html[data-theme="onosendai"] .nav.dk{background:hsla(var(--hue),16%,7%,.55)!important;border-bottom-color:hsla(var(--hue),20%,60%,.12)!important}
html[data-theme="onosendai"] .ft,
html[data-theme="onosendai"] .ft.dk{background:hsla(var(--hue),16%,7%,.55)!important;border-top-color:hsla(var(--hue),20%,60%,.12)!important}
html[data-theme="onosendai"] .megamenu .mm-inner{background:hsla(var(--hue),16%,8%,.97)!important}
/* nav mark reads crisper on carbon; toggle icon bolder so it never renders as a sliver */
html[data-theme="onosendai"] .brand .mk{opacity:.82}
.theme-tog svg{width:15px;height:15px;stroke-width:1.5;shape-rendering:geometricPrecision}
.theme-tog{flex-shrink:0}
/* independent glass-card grid (replaces the shared-slab .grid g3 demo) */
.grid-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.card3{border-radius:var(--radius-lg)}
@media(max-width:760px){.grid-cards3{grid-template-columns:1fr}}
/* theme toggle control */
.theme-tog{background:none;border:1px solid var(--ge);border-radius:var(--radius);cursor:pointer;color:var(--ink-f);width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;transition:color .4s,border-color .4s}
.theme-tog:hover{color:var(--accent);border-color:var(--accent-d)}
.theme-tog svg{width:14px;height:14px}

/* ---------- RESET + BASE ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
::selection{background:var(--accent);color:var(--white)}
a{color:inherit;text-decoration:none}

/* the grain: a near-invisible film over everything, like a scanned ledger */
.grain::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.016;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}

/* ambient orbital blooms */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb i{position:absolute;border-radius:50%;filter:blur(60px);display:block}
.amb i:nth-child(1){width:46vw;height:46vw;top:-12vh;right:8vw;background:radial-gradient(ellipse,hsla(var(--hue),35%,85%,.16),transparent 70%);animation:a1 40s var(--ease) infinite alternate}
.amb i:nth-child(2){width:38vw;height:38vw;bottom:-10vh;left:14vw;background:radial-gradient(ellipse,hsla(var(--hue),30%,88%,.11),transparent 65%);animation:a2 50s var(--ease) infinite alternate}
@keyframes a1{to{transform:translate(-4vw,3vh) scale(1.04)}}
@keyframes a2{to{transform:translate(5vw,-4vh) scale(.96)}}

/* =====================================================================
   DOC CHROME
   ===================================================================== */
.bar{position:sticky;top:0;z-index:100;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:hsla(var(--hue),22%,98.5%,.92);backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);border-bottom:1px solid hsla(var(--hue),20%,80%,.16)}
.bar .brand{display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase}
.bar .brand .mk{width:13px;height:9px;opacity:.6}
.bar .brand .ns{color:var(--ink-g);font-weight:500}
.bar .brand .sep{color:var(--accent);margin:0 .25rem}
.topnav{display:flex;gap:1.5rem;align-items:center}
.topnav a{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-f);transition:color .4s;position:relative}
.topnav a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);pointer-events:none}
.topnav a:hover::after,.topnav a.here::after{transform:scaleX(1);transform-origin:left}
@media(prefers-reduced-motion:reduce){.topnav a::after{transition:none}}
.topnav a:hover,.topnav a.here{color:var(--accent)}
@media(max-width:600px){.bar{padding:0 1rem}.bar .brand{font-size:0;gap:0}.topnav{gap:.85rem;min-width:0;overflow-x:auto;scrollbar-width:none}.topnav::-webkit-scrollbar{display:none}.topnav a{letter-spacing:.1em;white-space:nowrap}}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad) 7rem;position:relative;z-index:1}

/* cover */
.cover{padding:clamp(3rem,11vh,8rem) 0 clamp(2.5rem,6vh,5rem);border-bottom:1px solid var(--border-f);position:relative}
.cover .eyebrow{font-size:.66rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:1.6rem}
.cover h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,8vw,6.4rem);line-height:.98;letter-spacing:-.025em;max-width:15ch}
.cover h1 em{font-style:italic;color:var(--ink-m)}
.cover .lede{font-size:clamp(.95rem,1.3vw,1.15rem);color:var(--ink-m);max-width:62ch;margin-top:2rem;line-height:1.85}
.cover .specs{display:flex;gap:2.6rem;margin-top:2.6rem;flex-wrap:wrap}
.cover .specs .s{display:flex;flex-direction:column;gap:.25rem}
.cover .specs .s .v{font-family:var(--serif);font-weight:300;font-size:1.5rem;color:var(--accent);line-height:1}
.cover .specs .s .k{font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-f)}
.cover .coverhex{position:absolute;top:50%;right:1%;transform:translateY(-50%);width:clamp(80px,16vw,230px);opacity:.05;color:var(--ink)}

/* section header */
.section{padding-top:clamp(3rem,8vh,6rem)}
.shead{display:flex;align-items:baseline;gap:1.2rem;border-bottom:1px solid var(--border);padding-bottom:1rem;margin-bottom:2.4rem}
.shead .n{font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--accent);font-variant-numeric:tabular-nums}
.shead h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,4vw,3rem);line-height:1;letter-spacing:-.01em}
.shead .desc{margin-left:auto;font-size:.8rem;color:var(--ink-f);max-width:40ch;line-height:1.65;text-align:right}
@media(max-width:680px){.shead{flex-wrap:wrap}.shead .desc{margin-left:0;text-align:left;width:100%}}

.subhead{font-size:.6rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-f);margin:2.6rem 0 1.3rem;display:flex;align-items:center;gap:.7rem}
.subhead::before{content:'';width:18px;height:1px;background:var(--accent-d)}

/* generic grids */
.grid{display:grid;gap:1px;background:var(--ge);border:1px solid var(--ge);border-radius:var(--radius);overflow:hidden}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g4,.g3,.g2{grid-template-columns:1fr}}

/* token label */
.tok{font-family:var(--sans);font-size:.6rem;letter-spacing:.02em;color:var(--ink-f)}
.tok b{color:var(--ink);font-weight:600}
.mono-chip{font-family:var(--sans);font-size:.62rem;background:hsla(var(--hue),30%,80%,.22);border:1px solid var(--border-f);border-radius:1px;padding:.08em .4em;color:var(--ink-m)}

/* demo plate — neutral stage to show a component on */
.plate{background:var(--paper);border:1px solid var(--border-f);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2.4rem);display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.plate.col{flex-direction:column;align-items:flex-start}
.plate.dark{background:var(--ink);border-color:hsla(var(--hue),20%,40%,.2)}
.demo{display:grid;grid-template-columns:1fr;gap:.7rem;margin-bottom:1.6rem}
.demo .cap{font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-f)}

/* =====================================================================
   FOUNDATION — COLOR
   ===================================================================== */
.swatch{display:flex;flex-direction:column;background:var(--white)}
.swatch .chip{height:96px}
.swatch .meta{padding:.7rem .85rem;display:flex;flex-direction:column;gap:.2rem}
.swatch .nm{font-size:.66rem;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.swatch .vl{font-size:.56rem;color:var(--ink-f)}

/* =====================================================================
   FOUNDATION — TYPE
   ===================================================================== */
.specimen{border-bottom:1px solid var(--border-f);padding:1.4rem 0;display:grid;grid-template-columns:7rem 1fr;gap:1.5rem;align-items:baseline}
.specimen .lab{font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-f);line-height:1.5}
.specimen .lab span{display:block;color:var(--ink-g);font-weight:500;margin-top:.2rem}
.sp-serif{font-family:var(--serif)}
.sp-mono{font-family:var(--sans)}
@media(max-width:680px){.specimen{grid-template-columns:1fr;gap:.5rem}}

/* =====================================================================
   COMPONENT LIBRARY
   ===================================================================== */

/* buttons */
/* Durable icon sizing — any inline SVG inside a library control is bounded
   to ~1.15× the text size by default, so embedding raw icon markup can never
   blow up to its intrinsic size. Opt out with an explicit svg[width] in CSS,
   or wrap in .orbital-icon-lg. This is the system-level guarantee. */
.btn svg,.seg button svg,.seg-item svg,.tabs-trigger svg,.toggle svg,
.link-cta svg,.copybtn svg,.page-btn svg,.crumbs2 svg,.crumb-link svg,
.menu-item svg,.field-box svg,[data-orbital] button svg,[data-orbital] a svg{
  width:1.15em;height:1.15em;flex-shrink:0;vertical-align:middle}
.orbital-icon-lg svg,svg.orbital-icon-lg{width:auto;height:auto}
.btn{font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.7rem 1.2rem;border-radius:var(--radius);cursor:pointer;transition:all .35s var(--ease);border:1px solid var(--ge);background:none;color:var(--ink);display:inline-flex;align-items:center;gap:.5rem}
.btn:hover{border-color:var(--accent-d);color:var(--accent);transform:translateY(-1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--white)}
.btn.primary:hover{background:hsl(var(--hue),58%,32%);color:var(--white)}
.btn.ghost{border-color:transparent;color:var(--ink-f)}
.btn.ghost:hover{color:var(--accent);background:var(--gf)}
.link-cta{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid hsla(var(--hue),58%,38%,.4);border-radius:var(--radius);padding:.7rem 1.1rem;transition:all .4s var(--ease)}
.link-cta:hover{background:var(--accent);color:var(--white);transform:translateY(-1px)}

/* segmented toggle */
.seg{display:inline-flex;border:1px solid var(--ge);border-radius:var(--radius-lg);overflow:hidden;background:var(--gf)}
.seg button{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-f);background:none;border:none;cursor:pointer;padding:.7rem 1.35rem;transition:color .3s,background .3s}
.seg button+button{border-left:1px solid var(--ge)}
.seg button:hover{color:var(--ink)}
.seg button,.clone-tabs button{white-space:nowrap}
.seg button.on,.seg button[data-state="on"],.seg-item[data-state="on"]{background:var(--accent);color:var(--white)}
.seg button:focus-visible{outline:2px solid var(--accent-d);outline-offset:-2px}
.seg button:disabled,.seg button[data-disabled]{opacity:.4;cursor:not-allowed}

/* badges + tags */
.badge{font-size:.5rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:.18rem .45rem;border-radius:1px;display:inline-block}
.badge.essay{color:var(--accent-d);border:1px solid hsla(var(--hue),40%,58%,.4)}
.badge.paper{color:var(--ink);background:hsla(var(--hue),30%,80%,.3)}
.tag{font-size:.55rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-f);padding:.22rem .55rem;border:1px solid var(--border-f);border-radius:1px;display:inline-block;white-space:nowrap}
.fchip{font-family:var(--sans);font-size:.55rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:hsla(var(--hue),30%,80%,.28);border:1px solid var(--ge);border-radius:1px;padding:.22rem .5rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.fchip .fx{font-size:.8em;color:var(--ink-f)}

/* search field */
.field{position:relative;display:block;max-width:320px;width:100%}
.field input{width:100%;font-family:var(--sans);font-size:.78rem;color:var(--ink);background:none;border:none;border-bottom:1px solid var(--border);padding:.35rem .2rem .35rem 1.6rem;outline:none;transition:border-color .4s}
.field input::placeholder{color:var(--ink-g)}
.field input:focus{border-bottom-color:var(--accent-d)}
.field .si{position:absolute;left:.1rem;top:50%;transform:translateY(-55%);width:11px;height:11px;border:1.5px solid var(--ink-g);border-radius:50%;pointer-events:none}
.field .si::after{content:'';position:absolute;right:-4px;bottom:-3px;width:5px;height:1.5px;background:var(--ink-g);transform:rotate(45deg)}

/* glass card */
.glass{background:var(--gf);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid var(--ge);border-radius:var(--radius);position:relative;overflow:hidden;box-shadow:0 4px 20px hsla(var(--hue),20%,50%,.03),inset 0 1px 0 hsla(var(--hue),40%,100%,.2);transition:all .7s var(--ease);padding:1.4rem 1.5rem}
.glass::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,hsla(var(--hue),40%,100%,.3) 50%,transparent 90%);opacity:0;transition:opacity .7s}
.glass:hover{background:var(--gfh);border-color:hsla(var(--hue),30%,75%,.35);box-shadow:0 10px 36px hsla(var(--hue),25%,50%,.06);transform:translateY(-2px)}
.glass:hover::before{opacity:1}
.glass h4{font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--ink);margin-bottom:.4rem}
.glass p{font-size:.82rem;color:var(--ink-m);line-height:1.7}
.glass .num{font-family:var(--serif);font-size:1.7rem;font-weight:300;color:hsla(var(--hue),15%,75%,.55);line-height:1;margin-bottom:.9rem}

/* stat grid */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ge);border:1px solid var(--ge);border-radius:var(--radius);overflow:hidden}
.statgrid .st{background:var(--white);padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.25rem}
.statgrid .st .v{font-family:var(--serif);font-weight:300;font-size:1.7rem;color:var(--accent);line-height:1}
.statgrid .st .k{font-size:.54rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-f)}

/* language bar */
.langbar{display:flex;height:6px;width:100%;border-radius:3px;overflow:hidden;background:var(--border-f)}
.langbar i{height:100%;display:block}
.langlist{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:.9rem}
.langrow{display:flex;align-items:center;gap:.55rem;font-size:.7rem;color:var(--ink-m)}
.langrow .dot{width:8px;height:8px;border-radius:50%}

/* clone panel */
.clone{border:1px solid var(--ge);border-radius:var(--radius-lg);overflow:hidden;background:var(--gf);max-width:380px}
.clone-h{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;border-bottom:1px solid var(--ge)}
.clone-h .lbl{font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-f)}
.clone-tabs{display:flex;gap:.2rem}
.clone-tabs button{font-family:var(--sans);font-size:.54rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-f);background:none;border:1px solid transparent;border-radius:2px;padding:.2rem .5rem;cursor:pointer;transition:all .3s}
.clone-tabs button.on,.clone-tabs button[data-state="on"]{color:var(--white);background:var(--accent)}
.clone-body{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem}
.clone-body code{font-size:.72rem;color:var(--ink);overflow-x:auto;white-space:nowrap;flex:1}
.copybtn{flex-shrink:0;font-family:var(--sans);font-size:.52rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-f);background:var(--white);border:1px solid var(--ge);border-radius:2px;padding:.3rem .55rem;cursor:pointer;transition:all .3s}
.copybtn:hover{border-color:var(--accent-d);color:var(--accent)}
.copybtn[data-state="copied"]{border-color:var(--accent);color:var(--white);background:var(--accent)}
.copybtn[data-state="error"]{border-color:var(--accent-d);color:var(--accent)}

/* =====================================================================
   COMPONENT LIBRARY — tabs / toggle / switch / disclosure
   (rendered by orbital-ui.js; styled here, state via [data-state])
   ===================================================================== */

/* Tabs */
.tabset{display:flex;flex-direction:column}
.tabs-list{display:flex;gap:.3rem;border-bottom:1px solid var(--border-f)}
.tabs-trigger{font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-f);background:none;border:none;border-bottom:2px solid transparent;position:relative;cursor:pointer;padding:.7rem 1rem;margin-bottom:-1px;transition:color .3s,border-color .3s}
.tabs-trigger:hover{color:var(--ink)}
.tabs-trigger[data-state="active"]{color:var(--accent)}
.tabs-trigger::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .4s var(--ease);pointer-events:none}
.tabs-trigger:hover::after{transform:scaleX(1);background:var(--accent-d)}
.tabs-trigger[data-state="active"]::after{transform:scaleX(1);background:var(--accent)}
@media(prefers-reduced-motion:reduce){.tabs-trigger::after{transition:none}}
.tabs-trigger:focus-visible{outline:2px solid var(--accent-d);outline-offset:-3px;border-radius:1px}
.tabs-trigger:disabled{opacity:.4;cursor:not-allowed}
.tabs-content{padding-top:1.4rem}
.tabs-content[data-state="active"]{animation:rvin .5s var(--ease)}

/* Toggle — a single two-state button */
.toggle{font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-f);background:var(--gf);border:1px solid var(--ge);border-radius:var(--radius);cursor:pointer;padding:.6rem 1.05rem;transition:all .3s var(--ease);display:inline-flex;align-items:center;gap:.5rem}
.toggle:hover{color:var(--ink);border-color:var(--accent-d)}
.toggle[data-state="on"]{background:var(--accent);border-color:var(--accent);color:var(--white)}
.toggle:focus-visible{outline:2px solid var(--accent-d);outline-offset:2px}
.toggle:disabled{opacity:.4;cursor:not-allowed}

/* Switch — track + thumb */
.switch-row{display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;font-size:.78rem;color:var(--ink-m)}
.switch{position:relative;flex-shrink:0;width:38px;height:22px;border-radius:11px;background:hsla(var(--hue),15%,60%,.28);border:1px solid var(--ge);cursor:pointer;padding:0;transition:background .35s var(--ease),border-color .35s}
.switch-thumb{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background:var(--white);box-shadow:0 1px 3px hsla(var(--hue),20%,30%,.25);transition:transform .35s var(--ease)}
.switch[data-state="checked"]{background:var(--accent);border-color:var(--accent)}
.switch[data-state="checked"] .switch-thumb{transform:translateX(16px)}
.switch:focus-visible{outline:2px solid var(--accent-d);outline-offset:2px}
.switch:disabled{opacity:.4;cursor:not-allowed}

/* Disclosure — collapsible */
.disclosure{border:1px solid var(--ge);border-radius:var(--radius);overflow:hidden;background:var(--gf)}
.disclosure-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:none;border:none;cursor:pointer;padding:.85rem 1.1rem;transition:color .3s}
.disclosure-trigger:hover{color:var(--accent)}
.disclosure-trigger:focus-visible{outline:2px solid var(--accent-d);outline-offset:-2px}
.disclosure-caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .35s var(--ease);flex-shrink:0}
.disclosure[data-state="open"] .disclosure-caret{transform:rotate(225deg)}
.disclosure-content{padding:0 1.1rem 1.1rem;font-size:.86rem;color:var(--ink-m);line-height:1.75;border-top:1px solid var(--border-f);animation:rvin .4s var(--ease)}

/* PageIndicator — slim track + glowing thumb (the site footer scrubber) */
.pageind{position:relative;width:clamp(120px,16vw,200px);height:3px;background:hsla(var(--hue),15%,60%,.16);border-radius:2px;cursor:pointer;outline:none}
.pageind:focus-visible{outline:2px solid var(--accent-d);outline-offset:5px;border-radius:3px}
.pageind-thumb{position:absolute;top:-1px;height:5px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px hsla(var(--hue),58%,38%,.5),0 0 4px hsla(var(--hue),58%,38%,.3);transition:left .6s var(--ease),width .4s var(--ease)}
.pageind-row{display:inline-flex;align-items:center;gap:1rem}
.pageind-label{font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-f);font-variant-numeric:tabular-nums}

/* ScrollProgress — reading-progress fill (positioning is left to the caller) */
.scrollprog{position:relative;height:2px;width:100%;background:transparent;pointer-events:none;overflow:hidden}
.scrollprog-fill{height:100%;width:0;background:var(--accent);box-shadow:0 0 8px hsla(var(--hue),58%,38%,.5);transition:width .1s linear}

/* CodeSnippet — lightweight soft box with optional copy overlay */
.codeblk-wrap{position:relative}
.codeblk-copy{position:absolute;top:.5rem;right:.5rem}

/* CodeViewer — serious, GitHub-style: sticky gutter, scroll, header, line bands */
.codeview{border:1px solid var(--ge);border-radius:var(--radius-lg);overflow:hidden;background:var(--code-bg)}
.cv-head{display:flex;align-items:center;gap:1rem;padding:.55rem .8rem;border-bottom:1px solid var(--border-f);background:var(--gf)}
.cv-path{font-size:.72rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-meta{font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-f);white-space:nowrap}
.cv-actions{margin-left:auto;display:flex;gap:.4rem;flex-shrink:0}
.cv-btn{font-family:var(--sans);font-size:.52rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-f);background:var(--white);border:1px solid var(--ge);border-radius:2px;padding:.3rem .55rem;cursor:pointer;transition:all .3s}
.cv-btn:hover{border-color:var(--accent-d);color:var(--accent)}
.cv-scroll{overflow:auto;max-height:460px}
.cv-grid{position:relative;display:flex;min-width:max-content;font-size:.78rem;line-height:1.7;--cv-pad:.9rem}
.cv-bands{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0}
.cv-band{position:absolute;left:0;right:0;height:1lh;background:hsla(var(--hue),58%,38%,.09);border-left:2px solid var(--accent)}
.cv-gutter{position:sticky;left:0;z-index:2;display:flex;flex-direction:column;text-align:right;padding:var(--cv-pad) .7rem var(--cv-pad) .9rem;background:var(--code-bg);border-right:1px solid var(--border-f);user-select:none}
.cv-ln{color:var(--code-gutter);cursor:pointer;transition:color .2s;font-variant-numeric:tabular-nums}
.cv-ln:hover{color:var(--ink-m)}
.cv-ln.on{color:var(--accent);font-weight:600}
.cv-pre{position:relative;z-index:1;padding:var(--cv-pad) 1.1rem;white-space:pre}
.cv-pre code{font-family:var(--sans)}

/* Watermark field — the mark, tiled like guilloché on bank paper */
.wm-field{position:relative;overflow:hidden;border:1px solid var(--border-f);border-radius:var(--radius-lg);background:var(--paper);min-height:170px;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem}
.wm-tile{position:absolute;inset:0;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 66'%3E%3Cpath fill='%231b2733' d='m 18,18 v 20 l -17.32,10 10,17.32 h 40 l 10,-17.32 17.32,10 17.32,-10 -10,-17.32 h -20 v -20 L 48,.68 l -10,17.32 z'/%3E%3C/svg%3E");background-size:52px;background-repeat:repeat}
.wm-field .wm-cap{position:relative;z-index:1;font-size:.72rem;color:var(--ink-f);letter-spacing:.04em;max-width:34ch;line-height:1.6}
.wm-single{display:flex;align-items:center;gap:2rem}
.wm-single svg{display:block}

/* Metadata list — discrete labeled rows (record / disclosures) */
.metalist{display:grid;grid-template-columns:1fr;gap:0;width:100%}
.metarow{display:flex;gap:1rem;align-items:baseline;padding:.7rem 0;border-top:1px solid var(--border-f)}
.metarow:last-child{border-bottom:1px solid var(--border-f)}
.metarow .my{font-size:.56rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-d);white-space:nowrap;width:4rem;flex-shrink:0}
.metarow .mt{font-size:.82rem;color:var(--ink-m);line-height:1.6}
.metarow .mt b{color:var(--ink);font-weight:600}

/* code block + syntax tokens */
.codeblk{background:var(--code-bg);color:var(--code-fg);border:1px solid var(--code-border);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;overflow-x:auto;font-size:.76rem;line-height:1.7;position:relative}
.codeblk code{font-family:var(--sans);white-space:pre}
.codeblk[data-lang]::before{content:attr(data-lang);position:absolute;top:.5rem;right:.8rem;font-size:.48rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--code-lbl)}
.t-key{color:var(--c-key)}.t-str{color:var(--c-str)}.t-num{color:var(--c-num)}.t-title{color:var(--c-title)}.t-attr{color:var(--c-attr)}.t-com{color:var(--c-com);font-style:italic}

/* highlight.js token palette — canonical (used by CodeViewer/CodeSnippet on any orbital.css page) */
.hljs{background:none;color:var(--code-fg);padding:0}
.hljs-comment,.hljs-quote{color:var(--c-com);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-section{color:var(--c-key)}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-meta-string{color:var(--c-str)}
.hljs-number,.hljs-meta,.hljs-link{color:var(--c-num)}
.hljs-title,.hljs-name,.hljs-built_in,.hljs-type,.hljs-class .hljs-title,.hljs-title.class_,.hljs-title.function_{color:var(--c-title)}
.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.hljs-symbol,.hljs-bullet{color:var(--c-attr)}
.hljs-params,.hljs-operator,.hljs-punctuation{color:var(--c-punc)}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:600}

/* theorem box */
.thm{border:1px solid var(--ge);border-left:3px solid var(--accent);border-radius:var(--radius);background:var(--gf);padding:1.1rem 1.3rem}
.torbital-h{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.5rem;flex-wrap:wrap}
.torbital-k{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.torbital-t{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--ink)}
.torbital-b{font-size:.9rem;color:var(--ink-m);line-height:1.8}

/* list row (archive / forge entry) */
.row{display:grid;grid-template-columns:7rem 1fr auto;gap:1.5rem;align-items:baseline;padding:1.2rem .4rem;border-bottom:1px solid var(--border-f);cursor:pointer;transition:background .35s,padding-left .4s var(--ease)}
.row:hover{background:var(--gf);padding-left:1rem}
.row .date{font-size:.56rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-f)}
.row h3{font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--ink);transition:color .3s}
.row:hover h3{color:var(--accent)}
.row p{font-size:.8rem;color:var(--ink-m);line-height:1.6;margin-top:.3rem}
.row .arr{color:var(--accent);opacity:0;transition:opacity .3s}
.row:hover .arr{opacity:1}
@media(max-width:560px){.row{grid-template-columns:1fr;gap:.5rem}}

/* pull quote */
.pull{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.45;color:var(--ink);border-left:2px solid var(--accent);padding-left:1.4rem}
.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-f);margin-top:.9rem}

/* section label + axiom (from the site) */
.slabel{font-size:.65rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-f);padding-bottom:.7rem;border-bottom:1px solid var(--border);display:inline-flex;gap:.8rem}
.slabel .n{color:var(--accent)}
.axiom{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.1rem;color:var(--ink-f);line-height:1.6;padding-left:1.2rem;border-left:2px solid hsla(var(--hue),30%,80%,.3)}

/* swatch on dark (for components shown on ink) */
.dark{color:hsla(var(--hue),20%,99%,.9)}
.dark .tok{color:hsla(var(--hue),20%,99%,.5)}
.dark .tok b{color:hsla(var(--hue),20%,99%,.85)}

/* motion demo */
.ease-line{height:2px;background:var(--border-f);border-radius:2px;position:relative;margin:.7rem 0}
.ease-dot{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px hsla(var(--hue),58%,38%,.4);animation:slide 2.6s var(--ease) infinite alternate}
@keyframes slide{to{left:calc(100% - 10px)}}

/* footer */
.foot{border-top:1px solid var(--border-f);margin-top:5rem;padding:2rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-f)}
.foot a:hover{color:var(--accent)}
.foot-l,.foot-r{display:flex;align-items:center;gap:.4rem 1rem;flex-wrap:wrap}
.foot-r{justify-content:flex-end;text-align:right}
.foot-c{flex:1;text-align:center}

/* reveal (slide only — never gates opacity) */
.rv{animation:rvin .6s var(--ease)}
@keyframes rvin{from{transform:translateY(12px);opacity:.4}to{transform:translateY(0);opacity:1}}

/* =====================================================================
   APP SHELL  (orbital-ui.js) — viewport-locked chrome for app pages.
   header / main(1fr, scroll-owning) / thin status bar. The min-height:0
   chain lets inner panes own the scroll; the window never scrolls.
   ===================================================================== */
.app-shell{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.app-header{min-height:0}
.app-main{min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column}
.app-status{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:30px;padding:0 var(--pad);background:hsla(var(--hue),22%,98.5%,.92);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border-top:1px solid var(--border-f);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-f);white-space:nowrap;overflow:hidden}
.app-status-l,.app-status-r{display:flex;align-items:center;gap:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
.app-status-r{justify-content:flex-end}
.app-status b{color:var(--ink-m);font-weight:600}
.app-status .dot{color:var(--accent-d)}
.app-status a{transition:color .3s}
.app-status a:hover{color:var(--accent)}
@media(max-width:560px){.app-status .opt-hide{display:none}}

/* =====================================================================
   OVERLAYS  (orbital-overlays.js) — portal, dialog, toast, menu, popover,
   tooltip, command palette. Composed from orbital-behaviors.js.
   ===================================================================== */
.orbital-portal{position:fixed;inset:0;z-index:1000;pointer-events:none}
.orbital-portal > *{pointer-events:auto}

/* Dialog */
.dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:hsla(var(--hue),32%,9%,.5);backdrop-filter:blur(3px) saturate(1.1);-webkit-backdrop-filter:blur(3px) saturate(1.1);opacity:0;transition:opacity .22s var(--ease)}
.dialog-overlay[data-state="open"]{opacity:1}
.dialog-content{position:relative;width:100%;max-width:460px;background:var(--white);border:1px solid var(--ge);border-radius:var(--radius-lg);box-shadow:0 24px 70px hsla(var(--hue),30%,20%,.22),inset 0 1px 0 hsla(var(--hue),40%,100%,.4);padding:clamp(1.4rem,3vw,2.2rem);transform:translateY(8px) scale(.985);opacity:0;transition:transform .22s var(--ease),opacity .22s var(--ease);max-height:calc(100vh - 3rem);overflow:auto}
.dialog-content[data-state="open"]{transform:none;opacity:1}
.dialog-content.is-sm{max-width:360px}.dialog-content.is-lg{max-width:640px}
.dialog-title{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.4vw,1.8rem);color:var(--ink);line-height:1.15;margin-bottom:.5rem;padding-right:2rem}
.dialog-description{font-size:.86rem;color:var(--ink-m);line-height:1.7;margin-bottom:1.2rem}
.dialog-footer{display:flex;gap:.7rem;justify-content:flex-end;margin-top:1.6rem}
.dialog-close{position:absolute;top:.9rem;right:.9rem;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;color:var(--ink-f);background:none;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;transition:all .3s}
.dialog-close:hover{color:var(--accent);border-color:var(--ge);background:var(--gf)}

/* Toaster + toast */
.toaster{position:fixed;z-index:1;display:flex;flex-direction:column;gap:.6rem;padding:1.2rem;max-width:min(92vw,360px)}
.toaster[data-placement="bottom-right"]{bottom:0;right:0}
.toaster[data-placement="top-right"]{top:0;right:0}
.toaster[data-placement="bottom-left"]{bottom:0;left:0}
.toast{position:relative;background:var(--ink);color:hsla(var(--hue),20%,99%,.92);border:1px solid hsla(var(--hue),20%,40%,.3);border-radius:var(--radius-lg);box-shadow:0 12px 36px hsla(var(--hue),30%,12%,.3);padding:.9rem 2.2rem .9rem 1rem;transform:translateX(8px);opacity:0;transition:transform .24s var(--ease),opacity .24s var(--ease)}
.toast[data-state="open"]{transform:none;opacity:1}
.toast.is-success{border-left:2px solid hsl(150,46%,45%)}
.toast.is-error{border-left:2px solid hsl(2,55%,55%)}
.toast.is-info{border-left:2px solid var(--accent-d)}
.toast-title{font-size:.74rem;font-weight:600;letter-spacing:.04em;margin-bottom:.15rem}
.toast-message{font-size:.74rem;color:hsla(var(--hue),20%,99%,.6);line-height:1.55}
.toast-action{margin-top:.5rem;font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--hue),58%,68%);background:none;border:none;cursor:pointer;padding:0}
.toast-close{position:absolute;top:.5rem;right:.5rem;width:20px;height:20px;font-size:.9rem;color:hsla(var(--hue),20%,99%,.4);background:none;border:none;cursor:pointer;border-radius:2px}
.toast-close:hover{color:hsla(var(--hue),20%,99%,.85)}

/* DropdownMenu */
.menu-content{min-width:180px;background:var(--white);border:1px solid var(--ge);border-radius:var(--radius-lg);box-shadow:0 14px 40px hsla(var(--hue),30%,30%,.16),inset 0 1px 0 hsla(var(--hue),40%,100%,.4);padding:.35rem;opacity:0;transform:translateY(-4px);transition:opacity .15s var(--ease),transform .15s var(--ease)}
.menu-content[data-state="open"]{opacity:1;transform:none}
/* items settle in sequence as the menu opens — house stagger */
.menu-content[data-state="open"] .menu-item{animation:menuitem-in .32s var(--ease) both}
.menu-content[data-state="open"] .menu-item:nth-child(1){animation-delay:.02s}
.menu-content[data-state="open"] .menu-item:nth-child(2){animation-delay:.05s}
.menu-content[data-state="open"] .menu-item:nth-child(3){animation-delay:.08s}
.menu-content[data-state="open"] .menu-item:nth-child(4){animation-delay:.11s}
.menu-content[data-state="open"] .menu-item:nth-child(5){animation-delay:.14s}
.menu-content[data-state="open"] .menu-item:nth-child(n+6){animation-delay:.16s}
@keyframes menuitem-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.menu-content[data-state="open"] .menu-item{animation:none}}
.menu-item{width:100%;display:flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.74rem;color:var(--ink-m);background:none;border:none;border-radius:var(--radius);cursor:pointer;padding:.5rem .7rem;text-align:left;transition:background .15s,color .15s}
.menu-item:hover,.menu-item:focus-visible{background:var(--gf);color:var(--ink);outline:none}
.menu-item:disabled{opacity:.4;cursor:not-allowed}
.menu-separator{height:1px;background:var(--border-f);margin:.35rem .2rem}

/* Popover */
.popover-content{max-width:300px;background:var(--white);border:1px solid var(--ge);border-radius:var(--radius-lg);box-shadow:0 14px 40px hsla(var(--hue),30%,30%,.16),inset 0 1px 0 hsla(var(--hue),40%,100%,.4);padding:1rem 1.1rem;font-size:.82rem;color:var(--ink-m);line-height:1.7;opacity:0;transform:translateY(-4px);transition:opacity .16s var(--ease),transform .16s var(--ease)}
.popover-content[data-state="open"]{opacity:1;transform:none}

/* Tooltip */
.tooltip-content{background:var(--ink);color:hsla(var(--hue),20%,99%,.92);font-size:.64rem;letter-spacing:.04em;padding:.35rem .55rem;border-radius:var(--radius);box-shadow:0 6px 18px hsla(var(--hue),30%,20%,.25);opacity:0;transition:opacity .14s var(--ease);max-width:240px}
.tooltip-content[data-state="open"]{opacity:1}

/* CommandPalette */
.cmdk-overlay{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:14vh 1.5rem 1.5rem;background:hsla(var(--hue),32%,9%,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .2s var(--ease)}
.cmdk-overlay[data-state="open"]{opacity:1}
.cmdk-content{width:100%;max-width:540px;background:var(--white);border:1px solid var(--ge);border-radius:var(--radius-lg);box-shadow:0 28px 80px hsla(var(--hue),30%,18%,.28),inset 0 1px 0 hsla(var(--hue),40%,100%,.4);overflow:hidden;transform:translateY(-8px) scale(.99);opacity:0;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.cmdk-content[data-state="open"]{transform:none;opacity:1}
.cmdk-field{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;border-bottom:1px solid var(--border-f)}
.cmdk-search{width:13px;height:13px;border:1.6px solid var(--ink-g);border-radius:50%;position:relative;flex-shrink:0}
.cmdk-search::after{content:'';position:absolute;right:-4px;bottom:-3px;width:6px;height:1.6px;background:var(--ink-g);transform:rotate(45deg)}
.cmdk-input{flex:1;font-family:var(--sans);font-size:.92rem;color:var(--ink);background:none;border:none;outline:none}
.cmdk-input::placeholder{color:var(--ink-g)}
.cmdk-kbd{font-family:var(--sans);font-size:.54rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-f);border:1px solid var(--border);border-radius:2px;padding:.15rem .35rem}
.cmdk-list{max-height:340px;overflow:auto;padding:.4rem}
.cmdk-group{font-size:.54rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-f);padding:.7rem .6rem .35rem}
.cmdk-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .6rem;border-radius:var(--radius);cursor:pointer}
.cmdk-item[data-state="active"]{background:var(--accent);color:var(--white)}
.cmdk-label{font-size:.8rem}
.cmdk-hint{font-size:.62rem;color:var(--ink-f)}
.cmdk-item[data-state="active"] .cmdk-hint{color:hsla(var(--hue),20%,99%,.7)}
.cmdk-empty{padding:2rem;text-align:center;font-size:.8rem;color:var(--ink-f);display:none}
@media(max-width:560px){.cmdk-overlay{padding:8vh 1rem 1rem}}

/* =====================================================================
   SIDEBAR SHELL  (orbital-ui.js) — collapsible side tray + topbar + content
   + status. The Console chrome as a primitive. Viewport-locked.
   ===================================================================== */
.shell{height:100dvh;display:grid;grid-template-columns:240px minmax(0,1fr);overflow:hidden;position:relative}
.shell-sidebar{display:flex;flex-direction:column;border-right:1px solid var(--border-f);background:var(--paper);min-height:0;overflow-y:auto}
.shell-brand{display:flex;align-items:center;gap:.6rem;height:54px;padding:0 1.1rem;flex-shrink:0;border-bottom:1px solid var(--border-f)}
.shell-brand .mk,.shell-brand svg{width:18px;height:13px;color:var(--ink)}
.shell-brandnm{font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.shell-nav{flex:1;min-height:0;overflow-y:auto;padding:1rem .7rem}
.shell-navgroup{font-size:.52rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-g);padding:.5rem .6rem;margin-top:.8rem}
.shell-navgroup:first-child{margin-top:0}
.shell-navitem{width:100%;display:flex;align-items:center;gap:.7rem;font-family:var(--sans);font-size:.74rem;color:var(--ink-m);background:none;border:none;border-radius:var(--radius);cursor:pointer;padding:.55rem .6rem;text-align:left;transition:background .25s,color .25s;position:relative}
.shell-navitem:hover{background:var(--gf);color:var(--ink)}
.shell-navitem[data-state="active"]{background:hsla(var(--hue),58%,38%,.08);color:var(--accent)}
.shell-navitem[data-state="active"]::before{content:'';position:absolute;left:0;top:.35rem;bottom:.35rem;width:2px;border-radius:2px;background:var(--accent)}
.shell-navicon{width:15px;height:15px;flex-shrink:0;display:inline-flex;color:currentColor}
.shell-navicon svg{width:100%;height:100%}
.shell-navlabel{flex:1}
.shell-navcount{font-size:.6rem;color:var(--ink-f);font-variant-numeric:tabular-nums}
.shell-user{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-top:1px solid var(--border-f);flex-shrink:0}
.shell-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:hsla(var(--hue),30%,80%,.3);border:1px solid var(--ge);font-size:.56rem;font-weight:600;color:var(--ink-m);flex-shrink:0}
.shell-who .a{font-size:.7rem;font-weight:600;color:var(--ink)}
.shell-who .b{font-size:.56rem;color:var(--ink-f);letter-spacing:.04em}
.shell-maincol{display:grid;grid-template-rows:54px minmax(0,1fr) auto;min-width:0;overflow:hidden}
.shell-topbar{display:flex;align-items:center;gap:1rem;padding:0 var(--pad);border-bottom:1px solid var(--border-f);background:hsla(var(--hue),22%,98.5%,.92);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2)}
.shell-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--ink-f);background:none;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;flex-shrink:0;transition:all .25s}
.shell-icon:hover{color:var(--accent);border-color:var(--ge);background:var(--gf)}
.shell-crumbs{display:flex;align-items:center;gap:.6rem;font-size:.74rem;color:var(--ink-f);flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.shell-crumbsep{color:var(--ink-g)}
.shell-crumbcur{color:var(--ink);font-weight:600}
.shell-search{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.7rem;color:var(--ink-f);background:var(--gf);border:1px solid var(--ge);border-radius:var(--radius);padding:.45rem .7rem;cursor:pointer;transition:border-color .3s}
.shell-search:hover{border-color:var(--accent-d)}
.shell-kbd{font-size:.54rem;font-weight:600;letter-spacing:.06em;color:var(--ink-f);border:1px solid var(--border);border-radius:2px;padding:.1rem .3rem;margin-left:.2rem}
.shell-content{min-height:0;min-width:0;overflow-y:auto}
.shell-scrim{position:absolute;inset:0;background:hsla(var(--hue),32%,9%,.4);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:5}
/* collapse: desktop rail */
.shell[data-rail="closed"]{grid-template-columns:0 minmax(0,1fr)}
.shell[data-rail="closed"] .shell-sidebar{border-right:none;overflow:hidden}
.shell-sidebar{transition:width .3s var(--ease)}
@media(max-width:860px){
  .shell{grid-template-columns:0 minmax(0,1fr)}
  .shell-sidebar{position:absolute;top:0;bottom:0;left:0;width:240px;z-index:6;transform:translateX(-100%);transition:transform .3s var(--ease)}
  .shell[data-rail="open"] .shell-sidebar{transform:none;box-shadow:0 12px 40px hsla(var(--hue),30%,20%,.2)}
  .shell[data-rail="open"] .shell-scrim{opacity:1;pointer-events:auto}
}

/* =====================================================================
   DISPLAY & FEEDBACK  (orbital-ui.js) — badge, status dot, avatar, progress,
   spinner, skeleton, empty state, breadcrumbs, pagination
   ===================================================================== */
.badge2{display:inline-flex;align-items:center;gap:.4rem;font-size:.54rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.22rem .5rem;border-radius:2px;border:1px solid var(--border-f);color:var(--ink-m);white-space:nowrap}
.badge2-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge2.is-accent{color:var(--accent);border-color:hsla(var(--hue),58%,38%,.35);background:hsla(var(--hue),58%,38%,.07)}
.badge2.is-success{color:hsl(150,42%,32%);border-color:hsla(150,42%,40%,.35);background:hsla(150,42%,45%,.08)}
.badge2.is-warn{color:hsl(38,52%,38%);border-color:hsla(38,52%,45%,.35);background:hsla(38,60%,50%,.08)}
.badge2.is-error{color:hsl(2,52%,46%);border-color:hsla(2,52%,52%,.35);background:hsla(2,55%,55%,.08)}

.statusdot{display:inline-flex;align-items:center;gap:.45rem;font-size:.62rem;letter-spacing:.06em;color:var(--ink-m)}
.statusdot-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-g);flex-shrink:0;position:relative}
.statusdot.is-accent .statusdot-dot{background:var(--accent);box-shadow:0 0 6px hsla(var(--hue),58%,38%,.5)}
.statusdot.is-success .statusdot-dot{background:hsl(150,46%,42%);box-shadow:0 0 6px hsla(150,46%,42%,.5)}
.statusdot.is-warn .statusdot-dot{background:hsl(38,70%,48%);box-shadow:0 0 6px hsla(38,70%,48%,.5)}
.statusdot.is-error .statusdot-dot{background:hsl(2,60%,52%);box-shadow:0 0 6px hsla(2,60%,52%,.5)}
.statusdot-dot.is-pulse::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:sd-pulse 1.8s var(--ease) infinite}
@keyframes sd-pulse{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.6);opacity:0}}

.avatar2{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:hsla(var(--hue),30%,80%,.3);border:1px solid var(--ge);overflow:hidden;flex-shrink:0}
.avatar2.is-sm{width:24px;height:24px}.avatar2.is-lg{width:44px;height:44px}
.avatar2 img{width:100%;height:100%;object-fit:cover}
.avatar2-i{font-size:.6rem;font-weight:600;letter-spacing:.04em;color:var(--ink-m)}
.avatar2.is-lg .avatar2-i{font-size:.84rem}

.progress{display:flex;flex-direction:column;gap:.5rem;width:100%}
.progress-head{display:flex;justify-content:space-between;font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-f)}
.progress-val{color:var(--accent)}
.progress-track{height:5px;background:hsla(var(--hue),15%,60%,.2);border-radius:3px;overflow:hidden}
.progress-bar{height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .5s var(--ease)}
.progress-track.is-indeterminate .progress-bar{width:40%;animation:prog-indet 1.3s var(--ease) infinite}
@keyframes prog-indet{0%{margin-left:-40%}100%{margin-left:100%}}

.spinner{display:inline-block;width:18px;height:18px;border:2px solid hsla(var(--hue),15%,60%,.25);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
.spinner.is-sm{width:13px;height:13px;border-width:1.5px}.spinner.is-lg{width:28px;height:28px;border-width:2.5px}
@keyframes spin{to{transform:rotate(360deg)}}

.skeleton{display:block;background:linear-gradient(90deg,hsla(var(--hue),18%,90%,.6) 25%,hsla(var(--hue),18%,94%,.9) 50%,hsla(var(--hue),18%,90%,.6) 75%);background-size:200% 100%;border-radius:var(--radius);animation:skel 1.5s var(--ease) infinite}
.skeleton.is-text{height:.8em;margin:.25em 0;border-radius:3px}
.skeleton.is-block{width:100%;height:80px}
.skeleton.is-circle{width:40px;height:40px;border-radius:50%}
.skeleton-stack{display:flex;flex-direction:column;gap:.3rem;width:100%}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:clamp(2rem,5vw,3.5rem);color:var(--ink-f);animation:rvin .6s var(--ease)}
.empty-state-icon{width:40px;height:40px;opacity:.4;color:var(--ink-g)}
.empty-state-icon svg{width:100%;height:100%}
.empty-state-title{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:var(--ink-m)}
.empty-state-msg{font-size:.8rem;line-height:1.6;max-width:42ch}
.empty-state .btn{margin-top:.6rem}

.crumbs2{display:flex;align-items:center;gap:.5rem;font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-f);flex-wrap:wrap}
.crumb-link{transition:color .3s}
a.crumb-link:hover{color:var(--accent)}
.crumb-sep{color:var(--ink-g)}
.crumb-cur{color:var(--ink)}

.pagination{display:inline-flex;align-items:center;gap:.25rem}
.page-btn{font-family:var(--sans);font-size:.68rem;font-weight:600;min-width:28px;height:28px;padding:0 .5rem;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-m);background:none;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;transition:all .25s;font-variant-numeric:tabular-nums}
.page-btn:hover:not(:disabled){border-color:var(--ge);color:var(--ink)}
.page-btn[data-state="active"]{background:var(--accent);border-color:var(--accent);color:var(--white)}
.page-btn.is-edge{font-size:1rem;color:var(--ink-f)}
.page-btn:disabled{opacity:.3;cursor:not-allowed}
.page-gap{padding:0 .2rem;color:var(--ink-g);font-size:.68rem}

/* =====================================================================
   MOTION LAYER  (orbital-motion.js) — the house's sub-perceptual quality cues
   ===================================================================== */
/* reveal-on-scroll */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal="x"]{transform:translateX(20px)}
[data-reveal="left"]{transform:translateX(-16px)}
[data-reveal="scale"]{transform:scale(.97);transform-origin:center}
[data-reveal-state="in"]{opacity:1 !important;transform:none !important}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* word/char text reveal */
.orbital-split-u{display:inline-block;opacity:0;transform:translateY(10px);animation:orbital-splitin .9s var(--ease) forwards}
@keyframes orbital-splitin{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.orbital-split-u{opacity:1;transform:none;animation:none}}

/* ambient orbital blooms */
.orbital-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orbital-ambient i{position:absolute;border-radius:50%;filter:blur(60px);display:block}
.orbital-ambient i:nth-child(1){width:46vw;height:46vw;top:-12vh;right:8vw;background:radial-gradient(ellipse,hsla(var(--hue),35%,85%,.16),transparent 70%);animation:orbital-amb1 40s var(--ease) infinite alternate}
.orbital-ambient i:nth-child(2){width:38vw;height:38vw;bottom:-10vh;left:14vw;background:radial-gradient(ellipse,hsla(var(--hue),30%,88%,.11),transparent 65%);animation:orbital-amb2 50s var(--ease) infinite alternate}
.orbital-ambient i:nth-child(3){width:32vw;height:32vw;top:28vh;left:58vw;background:radial-gradient(ellipse,hsla(var(--hue),45%,78%,.09),transparent 60%);animation:orbital-amb3 58s var(--ease) infinite alternate}
@keyframes orbital-amb1{to{transform:translate(-4vw,3vh) scale(1.04)}}
@keyframes orbital-amb2{to{transform:translate(5vw,-4vh) scale(.96)}}
@keyframes orbital-amb3{to{transform:translate(-3vw,-6vh) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.orbital-ambient i{animation:none}}

/* hover utilities */
.orbital-lift{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.orbital-lift:hover{transform:translateY(-2px)}
.orbital-sweep{position:relative}
.orbital-sweep::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,hsla(var(--hue),40%,100%,.4) 50%,transparent 90%);opacity:0;transition:opacity .6s var(--ease)}
.orbital-sweep:hover::before{opacity:1}
/* underline sweep (origin-flip) for inline links */
.orbital-underline{position:relative;text-decoration:none}
.orbital-underline::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.orbital-underline:hover::after{transform:scaleX(1);transform-origin:left}
/* glow pulse */
.orbital-pulse{animation:orbital-pulse 2.6s var(--ease) infinite}
@keyframes orbital-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.orbital-pulse{animation:none}}

/* =====================================================================
   FORM CONTROLS  (orbital-ui.js) — text field, select, checkbox, radio, slider
   ===================================================================== */
.field-root{display:flex;flex-direction:column;gap:.4rem}
.field-label{font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-f)}
.field-box{display:flex;align-items:center;gap:.5rem;background:var(--gf);border:1px solid var(--ge);border-radius:var(--radius);padding:0 .8rem;transition:border-color .3s,background .3s}
.field-box:focus-within{border-color:var(--accent-d);background:var(--white)}
.field-input{flex:1;font-family:var(--sans);font-size:.84rem;color:var(--ink);background:none;border:none;outline:none;padding:.6rem 0;resize:vertical}
.field-input::placeholder{color:var(--ink-g)}
.field-root[data-state="error"] .field-box{border-color:hsl(2,55%,55%)}
.field-hint{font-size:.62rem;color:var(--ink-f)}
.field-error{font-size:.62rem;color:hsl(2,55%,48%);min-height:0}
.field-root[data-state="error"] .field-error{min-height:1em}

.select-root{position:relative;display:inline-flex;align-items:center}
.select-native{appearance:none;-webkit-appearance:none;font-family:var(--sans);font-size:.8rem;color:var(--ink);background:var(--gf);border:1px solid var(--ge);border-radius:var(--radius);padding:.6rem 2rem .6rem .8rem;cursor:pointer;outline:none;transition:border-color .3s}
.select-native:focus-visible{border-color:var(--accent-d)}
.select-caret{position:absolute;right:.75rem;width:7px;height:7px;border-right:1.5px solid var(--ink-f);border-bottom:1.5px solid var(--ink-f);transform:translateY(-2px) rotate(45deg);pointer-events:none}

.checkbox-row{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.82rem;color:var(--ink-m)}
.checkbox{flex-shrink:0;width:18px;height:18px;padding:0;background:var(--gf);border:1px solid var(--ge);border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .2s var(--ease)}
.checkbox-check{width:9px;height:5px;border-left:1.7px solid var(--white);border-bottom:1.7px solid var(--white);transform:rotate(-45deg) translateY(-1px) scale(0);transition:transform .2s var(--ease)}
.checkbox[data-state="checked"]{background:var(--accent);border-color:var(--accent)}
.checkbox[data-state="checked"] .checkbox-check{transform:rotate(-45deg) translateY(-1px) scale(1)}
.checkbox:focus-visible{outline:2px solid var(--accent-d);outline-offset:2px}
.checkbox:disabled{opacity:.4;cursor:not-allowed}

.radio-group{display:flex;flex-direction:column;gap:.6rem}
.radio-row{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.82rem;color:var(--ink-m)}
.radio{flex-shrink:0;width:18px;height:18px;padding:0;background:var(--gf);border:1px solid var(--ge);border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .2s var(--ease)}
.radio-dot{width:8px;height:8px;border-radius:50%;background:var(--white);transform:scale(0);transition:transform .2s var(--ease)}
.radio[data-state="checked"]{background:var(--accent);border-color:var(--accent)}
.radio[data-state="checked"] .radio-dot{transform:scale(1)}
.radio:focus-visible{outline:2px solid var(--accent-d);outline-offset:2px}

.slider{padding:.6rem 0;width:100%;max-width:280px}
.slider-track{position:relative;height:4px;background:hsla(var(--hue),15%,60%,.22);border-radius:3px;cursor:pointer}
.slider-range{position:absolute;left:0;top:0;height:100%;background:var(--accent);border-radius:3px}
.slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--white);border:1px solid var(--accent);box-shadow:0 1px 4px hsla(var(--hue),30%,30%,.25);transform:translate(-50%,-50%);cursor:grab;transition:box-shadow .2s}
.slider-thumb:focus-visible{outline:2px solid var(--accent-d);outline-offset:2px}
.slider-thumb:active{cursor:grabbing}
.slider[data-disabled] .slider-track{opacity:.4;pointer-events:none}

/* =====================================================================
   DATA TABLE  (orbital-ui.js)
   ===================================================================== */
.dt{width:100%;border-collapse:collapse;font-size:.78rem}
.dt-head{background:var(--gf)}
.dt-th{text-align:left;font-size:.54rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-f);padding:.7rem .9rem;border-bottom:1px solid var(--ge);white-space:nowrap;user-select:none}
.dt-th.is-right{text-align:right}
.dt-th.is-sortable{cursor:pointer;transition:color .2s}
.dt-th.is-sortable:hover{color:var(--ink)}
.dt-th .dt-sort{display:inline-block;width:0;height:0;margin-left:.4rem;border-left:3px solid transparent;border-right:3px solid transparent;opacity:0;transition:opacity .2s}
.dt-th[data-sort="asc"] .dt-sort{opacity:1;border-bottom:4px solid var(--accent)}
.dt-th[data-sort="desc"] .dt-sort{opacity:1;border-top:4px solid var(--accent)}
.dt-check{width:1%;white-space:nowrap}
.dt-td{padding:.7rem .9rem;border-bottom:1px solid var(--border-f);color:var(--ink-m);vertical-align:middle}
.dt-td.is-right{text-align:right;font-variant-numeric:tabular-nums}
.dt-row{transition:background .2s}
.dt-row:hover{background:var(--gf)}
.dt-row[data-state="selected"]{background:hsla(var(--hue),58%,38%,.06)}
.dt-row[data-state="selected"]:hover{background:hsla(var(--hue),58%,38%,.09)}

.nav-div{width:1px;height:13px;background:var(--border);align-self:center;margin:0 .25rem;flex-shrink:0}


/* =====================================================================
   PRODUCT / MARKETING PAGE LAYER
   Reusable scaffolding for product landings (Orbital, Orbital//Code, …):
   page hero, terminal block, section header, feature/stat/cta bands.
   ===================================================================== */
.wrap.narrow{max-width:1100px}

/* page hero (split: copy + visual) */
.phero{padding:clamp(3rem,9vh,6.5rem) 0 clamp(2rem,5vh,3.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.phero .eyebrow{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.3rem;display:flex;align-items:baseline}
.phero .eyebrow .ns{color:var(--ink-g)}.phero .eyebrow .sep{color:var(--accent);margin:0 .22rem}.phero .eyebrow .nm{color:var(--ink)}
.phero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,5.2vw,4.2rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink)}
.phero .sub{font-size:clamp(.92rem,1.2vw,1.05rem);color:var(--ink-m);line-height:1.8;margin-top:1.4rem;max-width:46ch}
.phero .cta{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap}
.phero .meta{margin-top:1.6rem;font-size:.62rem;letter-spacing:.06em;color:var(--ink-f);display:flex;gap:1.2rem;flex-wrap:wrap}
.phero .meta b{color:var(--ink-m);font-weight:600}
@media(max-width:820px){.phero{grid-template-columns:1fr}}

/* terminal block (always carbon, theme-independent) */
.term{background:hsl(var(--hue),18%,8%);border:1px solid hsla(var(--hue),20%,50%,.22);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 60px hsla(var(--hue),40%,4%,.4)}
.term-bar{display:flex;align-items:center;gap:.45rem;padding:.6rem .8rem;border-bottom:1px solid hsla(var(--hue),20%,99%,.08)}
.term-bar i{width:9px;height:9px;border-radius:50%;background:hsla(var(--hue),20%,99%,.18);display:block}
.term-bar .tt{margin-left:.6rem;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:hsla(var(--hue),20%,99%,.32)}
.term pre{padding:1.1rem 1.2rem;font-size:.76rem;line-height:1.85;color:hsla(var(--hue),20%,99%,.9);white-space:pre-wrap;margin:0;overflow-x:auto}
.term .pr{color:hsl(var(--hue),58%,68%)}
.term .cm{color:hsla(var(--hue),18%,92%,.4)}
.term .ok{color:hsl(150,40%,62%)}
.term .ac{color:hsl(var(--hue),58%,72%)}
.term .cur{display:inline-block;width:.55em;height:1.05em;background:hsl(var(--hue),58%,68%);vertical-align:text-bottom;animation:tcur 1.1s step-end infinite}
@keyframes tcur{0%,49%{opacity:1}50%,100%{opacity:0}}

/* numbered section header */
.sh{display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid var(--border);padding-bottom:.9rem;margin:clamp(2.6rem,6vh,4.5rem) 0 2rem}
.sh .n{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.sh h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.01em}

/* feature card */
.feat{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem;border-radius:var(--radius-lg)}
.feat .fk{font-family:var(--serif);font-size:1.7rem;font-weight:300;color:hsla(var(--hue),15%,72%,.6);line-height:1}
.feat h3{font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--ink)}
.feat p{font-size:.82rem;color:var(--ink-m);line-height:1.7}

/* stat band */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ge);border:1px solid var(--ge);border-radius:var(--radius-lg);overflow:hidden}
.statband .st{background:var(--white);padding:1.4rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.statband .v{font-family:var(--serif);font-weight:300;font-size:2rem;color:var(--accent);line-height:1}
.statband .k{font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-f)}
@media(max-width:680px){.statband{grid-template-columns:repeat(2,1fr)}}

/* cta band (always carbon) */
.ctaband{margin-top:clamp(3rem,7vh,5rem);padding:clamp(2rem,5vw,3.5rem);background:hsl(var(--hue),18%,8%);border:1px solid hsla(var(--hue),20%,50%,.15);border-radius:var(--radius-lg);text-align:center;position:relative;overflow:hidden}
.ctaband h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,4vw,2.8rem);color:hsla(var(--hue),20%,99%,.95);line-height:1.1}
.ctaband p{font-size:.86rem;color:hsla(var(--hue),20%,99%,.5);margin-top:.8rem;letter-spacing:.04em}
.ctaband .cta{display:flex;gap:.8rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap}
.ctaband .btn{border-color:hsla(var(--hue),20%,99%,.2);color:hsla(var(--hue),20%,99%,.85)}
.ctaband .btn:hover{border-color:hsla(var(--hue),58%,60%,.6);color:hsl(var(--hue),58%,72%)}
.ctaband .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--white)}

/* =====================================================================
   MOBILE APP LAYER  (orbital app primitives)
   Phone frame, app bar (masthead/back), bottom tab bar, and the screen
   patterns: moment quote, tip card, list row, metrics, section rule.
   All on theme tokens — works in light and onosendai carbon.
   ===================================================================== */
.app-stage{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--white)}
@media(min-width:480px){.app-stage{padding:2.5rem 1rem}}
.app-phone{position:relative;width:100%;max-width:390px;height:100dvh;background:var(--white);display:flex;flex-direction:column;overflow:hidden}
@media(min-width:480px){.app-phone{height:844px;border-radius:42px;border:1px solid var(--border);box-shadow:0 50px 130px -25px rgba(0,0,0,.55)}}
.app-phone .grain::after,.app-phone.grain::after{content:'';position:absolute;inset:0;z-index:60;pointer-events:none;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}

/* status bar */
.app-status-row{display:flex;align-items:center;justify-content:space-between;padding:14px 26px 4px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-m);flex-shrink:0;position:relative;z-index:30}
.app-status-row .sig{color:var(--ink-f);font-size:10px;letter-spacing:.1em;font-weight:500}

/* app bar (mobile masthead) */
.app-bar{padding:10px 20px 14px;border-bottom:1px solid var(--rule,var(--border));flex-shrink:0;position:relative;z-index:30}
.app-bar.with-back{display:flex;align-items:flex-start;gap:14px}
.app-bar .eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.3em;color:var(--ink-f);margin-bottom:9px}
.app-bar .h{font-family:var(--serif);font-weight:500;font-size:27px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;color:var(--ink)}
.app-bar .h em{font-style:italic;font-weight:400}
.app-bar .h .meta{font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);font-weight:600}
.app-bar .sub{font-size:13px;color:var(--ink-m);margin-top:8px;font-style:italic;font-family:var(--serif);font-size:14px}
.app-back{width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid var(--border);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;flex-shrink:0;margin-top:2px;transition:border-color .3s,color .3s}
.app-back:hover{border-color:var(--accent);color:var(--accent)}

/* scroll body */
.app-scroll{flex:1;overflow-y:auto;scrollbar-width:none;position:relative;z-index:20}
.app-scroll::-webkit-scrollbar{display:none}

/* bottom tab bar */
.app-tabbar{flex-shrink:0;display:flex;border-top:1px solid var(--border);background:var(--paper);position:relative;z-index:30;padding-bottom:max(0px,env(safe-area-inset-bottom))}
.app-tab{flex:1;padding:11px 0 13px;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink-f);text-decoration:none;transition:color .3s}
.app-tab[data-state="active"],.app-tab.on{color:var(--accent)}
.app-tab .ic{width:20px;height:20px}
.app-tab .lab{font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:600}

/* section rule (— label —) */
.app-rule{display:flex;align-items:center;gap:12px;padding:0 20px 14px;font-size:10px;text-transform:uppercase;letter-spacing:.24em;color:var(--ink-f)}
.app-rule .ln{flex:1;height:1px;background:var(--border)}

/* "a local moment" pull-quote */
.moment{margin:26px 20px;padding:22px 20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.moment .lbl{display:flex;align-items:center;gap:10px;font-size:10px;text-transform:uppercase;letter-spacing:.28em;color:var(--accent);font-weight:600;margin-bottom:12px}
.moment .lbl span{height:1px;width:14px;background:var(--accent-ring,hsla(var(--hue),58%,52%,.4))}
.moment blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.moment blockquote .q{color:var(--accent)}
.moment .by{margin-top:16px;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-f);font-weight:600}
.moment .by .meta{color:var(--ink-f);text-transform:none;letter-spacing:0;font-style:italic;font-weight:400}

/* filter chip row */
.app-chips{display:flex;gap:8px;padding:4px 20px 18px;overflow-x:auto;scrollbar-width:none}
.app-chips::-webkit-scrollbar{display:none}
.app-chip{flex-shrink:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-f);background:none;border:1px solid var(--border);border-radius:2px;padding:8px 13px;cursor:pointer;transition:all .3s var(--ease)}
.app-chip:hover{color:var(--ink)}
.app-chip[data-state="active"],.app-chip.on{background:var(--accent);border-color:var(--accent);color:var(--white)}

/* tip card */
.tip{margin:0 20px 22px;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:var(--paper);transition:border-color .5s,transform .5s var(--ease)}
.tip:hover{border-color:var(--accent);transform:translateY(-2px)}
.tip .imgwrap{position:relative;height:248px;overflow:hidden}
.tip .imgwrap img{width:100%;height:100%;object-fit:cover}
html[data-theme="onosendai"] .tip .imgwrap img,html[data-theme="onosendai"] .app-photo img{filter:contrast(1.04) saturate(.92) brightness(.92)}
.tip .imgwrap::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,var(--white) 150%)}
.tip .kicker{position:absolute;left:14px;bottom:12px;z-index:2;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:#fff;font-weight:600;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.tip .badge2{position:absolute;top:12px;right:12px;z-index:2;font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;padding:4px 7px;border-radius:2px;backdrop-filter:blur(8px)}
.tip .badge2.budget{background:var(--accent-soft,hsla(var(--hue),58%,52%,.13));border:1px solid var(--accent-ring,hsla(var(--hue),58%,52%,.4));color:var(--accent)}
.tip .badge2.sponsored{background:hsla(var(--hue),20%,60%,.12);border:1px solid var(--border);color:var(--ink-m)}
.tip .body{padding:16px 16px 17px}
.tip h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.22;margin-bottom:9px;white-space:pre-line;color:var(--ink)}
.tip p{font-size:12.5px;line-height:1.7;color:var(--ink-m)}
.tip .credit{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--border-f)}
.app-av{width:26px;height:26px;border-radius:50%;background:var(--accent-soft,hsla(var(--hue),58%,52%,.13));border:1px solid var(--accent-ring,hsla(var(--hue),58%,52%,.4));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--accent);flex-shrink:0}
.tip .credit .who{font-size:11px;color:var(--ink-m)}
.tip .credit .who b{color:var(--ink);font-weight:600}
.tip .credit .tag{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-f);font-style:italic}

/* generic list row (neighborhoods, saved notes) */
.app-row{display:flex;gap:13px;padding:14px 20px;border-top:1px solid var(--border);cursor:pointer;align-items:center;text-decoration:none;color:inherit;transition:padding-left .4s var(--ease),background .3s}
.app-row:hover{padding-left:26px;background:var(--gf)}
.app-row .th{border-radius:3px;overflow:hidden;flex-shrink:0;position:relative}
.app-row .th img{width:100%;height:100%;object-fit:cover}
html[data-theme="onosendai"] .app-row .th img{filter:contrast(1.04) saturate(.92) brightness(.9)}
.app-row .b{flex:1;min-width:0}
.app-row .b .nm{font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.15;margin-bottom:5px;color:var(--ink)}
.app-row .b .vibe{font-size:11.5px;color:var(--ink-f);line-height:1.5}
.app-row .arr{color:var(--border);flex-shrink:0}
.app-row:hover .arr{color:var(--accent)}
.app-row .arr svg{width:16px;height:16px}

/* metric bars (field detail) */
.app-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.app-metric{background:var(--white);padding:15px 14px}
.app-metric .k{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-f);margin-bottom:8px}
.app-metric .bars{display:flex;gap:3px;margin-bottom:8px}
.app-metric .bars i{height:4px;flex:1;border-radius:2px;background:var(--border)}
.app-metric .bars i.on{background:var(--accent)}
.app-metric .lab{font-size:10px;color:var(--ink-m);line-height:1.4}

/* full-bleed photo (hero / gallery) */
.app-photo{position:relative;overflow:hidden}
.app-photo img{width:100%;height:100%;object-fit:cover}

/* feature card — full-bleed photo with overlaid editorial title (lookbook) */
.app-feature{position:relative;display:block;height:188px;margin:0 20px 12px;border-radius:4px;overflow:hidden;border:1px solid var(--border);text-decoration:none;color:inherit;transition:transform .5s var(--ease),border-color .5s}
.app-feature:hover{transform:translateY(-2px);border-color:var(--accent)}
.app-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html[data-theme="onosendai"] .app-feature img{filter:contrast(1.04) saturate(.92) brightness(.86)}
.app-feature::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,hsla(var(--hue),18%,5%,.15) 0,transparent 38%,hsla(var(--hue),18%,5%,.82) 100%)}
.app-feature .meta{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.app-feature .kick{font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);font-weight:600;margin-bottom:6px}
.app-feature .nm{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.02;letter-spacing:-.01em;color:#fff}
.app-feature .vibe{font-family:var(--serif);font-style:italic;font-weight:300;font-size:14px;color:hsla(0,0%,100%,.72);margin-top:4px;line-height:1.3}
.app-feature .stat{position:absolute;top:12px;right:14px;z-index:2;font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#fff;font-weight:600;background:hsla(var(--hue),18%,5%,.5);backdrop-filter:blur(8px);border:1px solid hsla(0,0%,100%,.18);border-radius:2px;padding:4px 8px}
.app-feature.tall{height:236px}

/* generic full-bleed top hero (screen masthead over a photo, clipped by frame) */
.app-phone[data-hero] .app-status-row{position:absolute;top:0;left:0;right:0;z-index:50;color:#fff}
.app-phone[data-hero] .app-status-row .sig{color:hsla(0,0%,100%,.6)}
.app-hero{position:relative;min-height:296px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 20px 18px;isolation:isolate}
.app-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
html[data-theme="onosendai"] .app-hero img{filter:contrast(1.04) saturate(.9) brightness(.76)}
.app-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,hsla(var(--hue),18%,5%,.45) 0,transparent 40%,hsla(var(--hue),18%,6%,.92) 100%)}
.app-hero .app-back{position:absolute;top:48px;left:16px;margin-top:0}
.app-hero .eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.26em;color:var(--accent);font-weight:600;margin-bottom:8px}
.app-hero .h{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1;letter-spacing:-.01em;color:#fff;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.app-hero .h em{font-style:italic;font-weight:400}
.app-hero .h .meta{font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);font-weight:600}
.app-hero .sub{font-family:var(--serif);font-style:italic;font-size:14px;color:hsla(0,0%,100%,.75);margin-top:8px;line-height:1.35;max-width:30ch}

/* full-black surface variant — push carbon to true black (toggle) */
html[data-theme="onosendai"][data-surface="black"]{
  --white:#000;
  --paper:hsl(var(--hue),20%,3.5%);
  --border:hsl(var(--hue),14%,13%);
  --border-f:hsl(var(--hue),13%,9%);
  --gf:hsla(var(--hue),20%,40%,.05);
}
html[data-theme="onosendai"][data-surface="black"] .app-phone{box-shadow:0 50px 130px -25px rgba(0,0,0,.85),0 0 0 1px hsla(var(--hue),20%,60%,.08) inset}


/* === FRAME BREAKOUT — fill a real phone edge-to-edge (no bezel/letterbox) ===
   Triggers for every phone/devtools preset (covers 480-wide Android too). */
@media(max-width:560px){
  .app-stage{display:block;padding:0;min-height:0;background:#000}
  .app-phone{max-width:none;width:100vw;height:100dvh;min-height:100dvh;border:none;border-radius:0;box-shadow:none}
}


/* =====================================================================
   RADIX-INSPIRED BATCH — accordion, hovercard, combobox, numberfield,
   rating, meter, separator, toolbar. All on theme tokens (light + carbon).
   ===================================================================== */
/* Accordion */
.accordion{border:1px solid var(--ge);border-radius:var(--radius);overflow:hidden;background:var(--gf)}
.accordion-item + .accordion-item{border-top:1px solid var(--border-f)}
.accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--ink);background:none;border:none;cursor:pointer;padding:.95rem 1.1rem;text-align:left;transition:color .3s}
.accordion-trigger:hover{color:var(--accent)}
.accordion-trigger:focus-visible{outline:2px solid var(--accent-d);outline-offset:-2px}
.accordion-caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--ease);flex-shrink:0;opacity:.7}
.accordion-item[data-state="open"] .accordion-caret{transform:rotate(225deg);color:var(--accent)}
.accordion-content{font-size:.84rem;color:var(--ink-m);line-height:1.7;animation:rvin .3s var(--ease)}
.accordion-inner,.accordion-content > *{padding:0 1.1rem 1rem}

/* HoverCard */
.hovercard-trigger{color:var(--accent);cursor:default;border-bottom:1px dashed hsla(var(--hue),58%,52%,.5)}
.hovercard-content{position:fixed;z-index:1200;max-width:280px;background:var(--white);border:1px solid var(--ge);border-radius:var(--radius-lg);box-shadow:0 18px 50px hsla(var(--hue),30%,20%,.22),inset 0 1px 0 hsla(var(--hue),40%,100%,.3);padding:1rem 1.1rem;font-size:.82rem;color:var(--ink-m);line-height:1.65;opacity:0;transform:translateY(-4px);transition:opacity .16s var(--ease),transform .16s var(--ease)}
.hovercard-content[data-state="open"]{opacity:1;transform:none}

/* Combobox */
.combobox{position:relative;display:flex;align-items:center;gap:.5rem;background:var(--gf);border:1px solid var(--ge);border-radius:var(--radius);padding:0 .85rem;max-width:340px}
.combobox:focus-within{border-color:var(--accent-d);background:var(--white)}
.combobox-i{width:12px;height:12px;border:1.6px solid var(--ink-g);border-radius:50%;position:relative;flex:none}
.combobox-i::after{content:'';position:absolute;right:-4px;bottom:-3px;width:5px;height:1.6px;background:var(--ink-g);transform:rotate(45deg)}
.combobox-input{flex:1;font-family:var(--sans);font-size:.84rem;color:var(--ink);background:none;border:none;outline:none;padding:.65rem 0}
.combobox-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200;background:var(--white);border:1px solid var(--ge);border-radius:var(--radius-lg);box-shadow:0 16px 44px hsla(var(--hue),30%,30%,.16);padding:.35rem;max-height:240px;overflow-y:auto;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .15s var(--ease),transform .15s var(--ease)}
.combobox-panel[data-state="open"]{opacity:1;transform:none;pointer-events:auto}
.combobox-opt{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .6rem;border-radius:var(--radius);cursor:pointer;font-size:.8rem;color:var(--ink-m)}
.combobox-opt[data-state="active"]{background:var(--accent);color:var(--white)}
.combobox-hint{font-size:.62rem;color:var(--ink-f)}
.combobox-opt[data-state="active"] .combobox-hint{color:hsla(var(--hue),20%,99%,.7)}
.combobox-empty{padding:1.2rem;text-align:center;font-size:.78rem;color:var(--ink-f);display:none}

/* NumberField */
.numfield{display:inline-flex;align-items:center;background:var(--gf);border:1px solid var(--ge);border-radius:var(--radius);overflow:hidden}
.numfield-btn{width:34px;height:36px;font-size:1rem;font-weight:600;color:var(--ink-m);background:none;border:none;cursor:pointer;transition:background .2s,color .2s}
.numfield-btn:hover:not(:disabled){background:var(--accent);color:var(--white)}
.numfield-btn:disabled{opacity:.3;cursor:not-allowed}
.numfield-input{width:48px;text-align:center;font-family:var(--sans);font-size:.84rem;color:var(--ink);background:none;border:none;border-left:1px solid var(--ge);border-right:1px solid var(--ge);outline:none;padding:.5rem 0;font-variant-numeric:tabular-nums}
.numfield-suffix{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-f);padding:0 .6rem;border-right:1px solid var(--ge)}

/* Rating */
.rating{display:inline-flex;gap:3px}
.rating-star{background:none;border:none;cursor:pointer;padding:2px;line-height:0;color:hsla(var(--hue),15%,60%,.35);transition:color .2s,transform .2s var(--ease)}
.rating-star svg{width:20px;height:20px;fill:currentColor}
.rating-star[data-state="on"]{color:var(--accent)}
.rating-star:not(:disabled):hover{transform:scale(1.15)}
.rating-star:disabled{cursor:default}

/* Meter */
.meter{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:320px}
.meter-head{display:flex;justify-content:space-between;font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-f)}
.meter-cap{color:var(--accent)}
.meter-track{height:6px;background:hsla(var(--hue),15%,60%,.2);border-radius:3px;overflow:hidden}
.meter-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .5s var(--ease)}
.meter.is-warn .meter-fill{background:hsl(38,70%,50%)}.meter.is-warn .meter-cap{color:hsl(38,60%,42%)}
.meter.is-error .meter-fill{background:hsl(2,60%,55%)}.meter.is-error .meter-cap{color:hsl(2,55%,50%)}
.meter.is-success .meter-fill{background:hsl(150,46%,45%)}.meter.is-success .meter-cap{color:hsl(150,42%,38%)}

/* Separator */
.separator{display:flex;align-items:center;gap:.8rem;color:var(--ink-f);font-size:.58rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin:1rem 0}
.separator::before,.separator::after{content:'';flex:1;height:1px;background:var(--border)}
.separator:not(:has(.separator-label))::after{display:none}
.separator.is-vertical{flex-direction:column;width:1px;height:100%;margin:0 1rem}
.separator.is-vertical::before{width:1px;height:100%;flex:1}

/* Toolbar */
.toolbar{display:inline-flex;align-items:center;gap:.2rem;background:var(--gf);border:1px solid var(--ge);border-radius:var(--radius-lg);padding:.3rem}
.toolbar-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--sans);font-size:.7rem;font-weight:600;color:var(--ink-m);background:none;border:none;border-radius:var(--radius);cursor:pointer;padding:.45rem .6rem;transition:background .2s,color .2s}
.toolbar-btn:hover{background:var(--white);color:var(--ink)}
.toolbar-btn.on{background:var(--accent);color:var(--white)}
.toolbar-ic{display:inline-flex;width:15px;height:15px}
.toolbar-ic svg{width:100%;height:100%}
.toolbar-sep{width:1px;align-self:stretch;background:var(--ge);margin:.2rem .3rem}

/* =====================================================================
   BATCH II — sheet, context menu, navigation menu, calendar, stepper
   ===================================================================== */
.orbital-portal{position:fixed;inset:0;z-index:1300;pointer-events:none}
.orbital-portal > *{pointer-events:auto}

/* Sheet / Drawer */
.sheet-overlay{position:fixed;inset:0;display:flex;background:hsla(var(--hue),32%,9%,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease)}
.sheet-overlay[data-state="open"]{opacity:1}
.sheet-overlay:has(.is-bottom){align-items:flex-end}
.sheet-overlay:has(.is-right){justify-content:flex-end}
.sheet-panel{position:relative;background:var(--white);border:1px solid var(--ge);box-shadow:0 -10px 60px hsla(var(--hue),30%,12%,.3);display:flex;flex-direction:column;transition:transform .32s var(--ease)}
.sheet-panel.is-bottom{width:100%;max-height:86vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:.6rem clamp(1.1rem,4vw,1.8rem) clamp(1.1rem,4vw,1.8rem);transform:translateY(100%)}
.sheet-panel.is-right,.sheet-panel.is-left{width:min(420px,90vw);height:100%;padding:1.4rem;transform:translateX(100%)}
.sheet-panel.is-left{transform:translateX(-100%)}
.sheet-overlay[data-state="open"] .sheet-panel{transform:none}
.sheet-handle{width:36px;height:4px;border-radius:3px;background:var(--border);margin:.2rem auto .9rem}
.sheet-close{position:absolute;top:.7rem;right:.9rem;width:28px;height:28px;font-size:1.1rem;color:var(--ink-f);background:none;border:1px solid transparent;border-radius:var(--radius);cursor:pointer}
.sheet-close:hover{color:var(--accent);border-color:var(--ge);background:var(--gf)}
.sheet-title{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--ink);margin-bottom:.8rem;padding-right:2rem}
.sheet-body{font-size:.86rem;color:var(--ink-m);line-height:1.7;overflow-y:auto}
.sheet-footer{display:flex;gap:.7rem;justify-content:flex-end;margin-top:1.2rem}

/* ContextMenu reuses .menu-content/.menu-item/.menu-separator from overlays */
.menu-content[data-orbital="context-menu"]{min-width:180px}

/* NavigationMenu */
.navmenu{position:relative}
.navmenu-bar{display:inline-flex;gap:.3rem}
.navmenu-trigger{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-f);background:none;border:none;cursor:pointer;padding:.6rem .9rem;border-radius:var(--radius);text-decoration:none;transition:color .3s,background .3s}
.navmenu-trigger:hover,.navmenu-trigger[data-state="active"]{color:var(--accent);background:var(--gf)}
.navmenu-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:280px;background:var(--white);border:1px solid var(--ge);border-radius:var(--radius-lg);box-shadow:0 18px 50px hsla(var(--hue),30%,30%,.16);padding:1.1rem;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:50}
.navmenu-drop[data-state="open"]{opacity:1;transform:none;pointer-events:auto}

/* Calendar */
.calendar{width:min(300px,100%);background:var(--gf);border:1px solid var(--ge);border-radius:var(--radius-lg);padding:1rem}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.cal-title{font-family:var(--serif);font-weight:500;font-size:1.1rem;color:var(--ink)}
.cal-nav{width:30px;height:30px;border:1px solid var(--ge);background:var(--white);border-radius:var(--radius);color:var(--ink-m);cursor:pointer;font-size:1rem;transition:all .2s}
.cal-nav:hover{border-color:var(--accent);color:var(--accent)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.3rem}
.cal-dow span{text-align:center;font-size:.56rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-f);padding:.3rem 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--ink-m);background:none;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.cal-cell.is-empty{pointer-events:none}
.cal-cell:hover:not(.is-empty){background:var(--white);color:var(--ink)}
.cal-cell[data-today]{border-color:var(--accent-d);color:var(--accent)}
.cal-cell[data-state="selected"]{background:var(--accent);color:var(--white);border-color:var(--accent)}

/* Stepper */
.stepper{display:flex;align-items:center}
.stepper-step{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:none;border:none;cursor:pointer;padding:0;flex:none}
.stepper-dot{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;background:var(--white);transition:all .3s var(--ease)}
.stepper-n{font-size:.72rem;font-weight:600;color:var(--ink-f)}
.stepper-label{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-f);font-weight:600;max-width:8ch;text-align:center;line-height:1.3}
.stepper-step[data-state="active"] .stepper-dot{border-color:var(--accent);box-shadow:0 0 0 4px hsla(var(--hue),58%,52%,.14)}
.stepper-step[data-state="active"] .stepper-n{color:var(--accent)}
.stepper-step[data-state="active"] .stepper-label{color:var(--ink)}
.stepper-step[data-state="done"] .stepper-dot{background:var(--accent);border-color:var(--accent)}
.stepper-step[data-state="done"] .stepper-n{color:var(--white)}
.stepper-line{flex:1;height:1.5px;background:var(--border);margin:0 .5rem;margin-bottom:1.4rem;min-width:24px;transition:background .3s}
.stepper-line[data-state="done"]{background:var(--accent)}