/* ===========================================================================
   The notch and the panel. Crest 5 (September 2026).

   /notch.js mounts a notch at the top centre of EVERY page and a Crest 5 body
   that grows out of it: hover the notch and it widens into the peek line (the
   mode's first four readings), click and it opens into the stage (a header
   flanking the housing, a grid of live tiles, the dock). A tile zooms into its
   module in place; the dock reaches every module in one click. On the hub the
   panel opens on arrival and retracts into the notch as you scroll.

   Everything inside the body is drawn from the shipped SwiftUI, point for
   pixel: DS.Layout (760 wide, 44 header, rows of 84 on an 8 gap, a 36 dock),
   the NotchShape silhouette (its top fillets pull the straight sides 11pt
   inside the frame when open and 6pt while peeking, and the hairline follows
   them), DS.TypeScale (labels 10/500 in sentence case, tile values 22/300, the
   hero numeral 42/200), the ink ladder on pure black (92 / 60 / 42 %) and ONE
   accent, amber #F5B041, for what needs you. The tokens are scoped to .c5 so
   the page's light palette never leaks in and the app stays itself.
   =========================================================================== */
:root{--ps:1;--panel-h:274px;--notch-w:calc(220px * var(--ps));--notch-h:calc(38px * var(--ps))}

/* ------------------------------------------------------------ the notch */
.notch{position:fixed;top:0;left:50%;transform:translateX(-50%);width:var(--notch-w);height:var(--notch-h);background:#000;border-radius:0 0 calc(10px * var(--ps)) calc(10px * var(--ps));z-index:70;cursor:pointer}
.notch::before{content:"";position:absolute;left:-14px;right:-14px;top:0;bottom:-14px}
.notch::after{content:"";position:absolute;top:calc(50% - 4px * var(--ps));left:50%;margin-left:calc(-4px * var(--ps));width:calc(8px * var(--ps));height:calc(8px * var(--ps));border-radius:50%;background:#1b1b1d;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.notch .hint{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t3);white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none}
.notch.showhint .hint{opacity:1}
html.peeking .notch .hint{top:calc(38px * var(--ps) + 12px)}

/* ------------------------------------------------------------ the tokens */
.c5{--k1:rgba(255,255,255,.92);--k2:rgba(255,255,255,.60);--k3:rgba(255,255,255,.42);--kh:rgba(255,255,255,.085);--khq:rgba(255,255,255,.05);
  --kf:rgba(255,255,255,.055);--kf2:rgba(255,255,255,.10);--ktrack:rgba(255,255,255,.12);--kinset:rgba(255,255,255,.04);--kch:rgba(255,255,255,.05);
  --kam:#F5B041;--kamh:#FFC05A;--kon:#1A1200;--kgr:#3DC46E;--kor:#FF9F3F;--krd:#E8534A;--kpop:#242322;--kknob:#F5F5F5;
  --kmono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;--kfont:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",sans-serif;
  --kin:cubic-bezier(.2,.9,.2,1);
  color-scheme:dark;font-family:var(--kfont);color:var(--k1);-webkit-font-smoothing:auto;text-align:left;letter-spacing:0;line-height:1.2}
/* smoothing auto, not antialiased: measured against design/snapshots, it is the one that draws SwiftUI's text weight on black */
:where(.c5) *{box-sizing:border-box}
:where(.c5) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:where(.c5) svg{display:block;flex:none}

/* ------------------------------------------------------------ the body
   One black object in three depths. Width leads on the open (300ms, the one
   overshoot in the app) and height follows 50ms behind; closing retracts the
   height first and narrows last. JS writes width and height; CSS owns clocks.
   The .panel box is the FRAME (760 open); the black .c-body is the NotchShape
   inside it: straight sides inset by the top fillet (DS.openTopFillet 11,
   closedTopFillet 6), and the two fillets flare the top edge back out to the
   frame, so the body meets the bezel along the full frame width. */
.panel{position:absolute;top:0;left:50%;transform:translateX(-50%) scale(var(--ps));transform-origin:top center;width:220px;height:38px;z-index:65;
  transition:width .3s cubic-bezier(.2,1.18,.36,1),height .36s cubic-bezier(.2,.9,.25,1) .05s}
.panel.docked{position:fixed}
.panel.is-closing{transition:height .2s cubic-bezier(.4,0,.6,1),width .22s cubic-bezier(.4,0,.6,1) .04s}
.panel.is-peek,.panel.is-closing.from-peek{transition:width .24s cubic-bezier(.2,1.1,.3,1),height .24s var(--kin)}
.panel.is-live,.panel.is-live .c-body{transition:none}
.panel .c-body{position:absolute;top:0;bottom:-.5px;left:5.5px;right:5.5px;background:#000;border-radius:0 0 10px 10px;overflow:hidden;transition:border-radius .24s,box-shadow .3s,left .3s cubic-bezier(.2,1.18,.36,1),right .3s cubic-bezier(.2,1.18,.36,1)}
/* the stroke is centred on the shape's edge, as SwiftUI strokes a path: half a point either side */
.panel.is-open .c-body{left:10.5px;right:10.5px}
/* the hairline (T1, white 8.5%): down the straight sides and along the bottom, never across the top */
.panel .c-body::after{content:"";position:absolute;left:0;right:0;bottom:0;top:6px;border:1px solid var(--kh);border-top:0;border-radius:inherit;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
.panel.is-open .c-body::after{top:11px}
.panel.is-peek .c-body{border-radius:0 0 12px 12px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.panel.is-open .c-body{border-radius:0 0 20px 20px;box-shadow:0 14px 44px rgba(0,0,0,.5)}
.panel.is-peek .c-body::after,.panel.is-open .c-body::after{opacity:1}
.panel.is-closed{pointer-events:none}
.panel:not(.is-open) .c-open{pointer-events:none}
/* the top fillets, INSIDE the frame: black flowing into the bezel, the hairline tracing the curve */
.panel::before,.panel::after{content:"";position:absolute;top:0;width:6px;height:6px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1}
.panel::before{left:0;background:radial-gradient(circle at 0 100%,transparent 5.5px,#161616 5.5px,#161616 6.5px,#000 6.5px)}
.panel::after{right:0;background:radial-gradient(circle at 100% 100%,transparent 5.5px,#161616 5.5px,#161616 6.5px,#000 6.5px)}
.panel.is-open::before,.panel.is-open::after{width:11px;height:11px}
.panel.is-open::before{background:radial-gradient(circle at 0 100%,transparent 10.5px,#161616 10.5px,#161616 11.5px,#000 11.5px)}
.panel.is-open::after{background:radial-gradient(circle at 100% 100%,transparent 10.5px,#161616 10.5px,#161616 11.5px,#000 11.5px)}
.panel.is-open::before,.panel.is-open::after,.panel.is-peek::before,.panel.is-peek::after{opacity:1}

/* the two faces inside the body, both centred on the housing */
.c-open{position:absolute;top:0;left:50%;width:760px;height:100%;margin-left:-380px;padding:0 18px 10px;display:flex;flex-direction:column;opacity:0;transition:opacity .09s}
.panel.is-open .c-open{opacity:1;transition:opacity .2s .15s}
.panel.is-live .c-open{transition:none}
.c-peek{position:absolute;top:0;left:50%;width:640px;height:38px;margin-left:-320px;display:flex;opacity:0;transition:opacity .09s;pointer-events:none}
.panel.is-peek .c-peek{opacity:1;pointer-events:auto;transition:opacity .12s .04s}
.c-wing{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0}
/* each wing: 14 against the housing, 10 at its outer edge (DS.Layout.peekBaseWidth = 220 + 2 x 24) */
.c-wing.l{justify-content:flex-end;padding:0 14px 0 10px}
.c-wing.r{justify-content:flex-start;padding:0 10px 0 14px}
.c-wing.l.tight{justify-content:flex-start}
.c-house{width:220px;flex:none}
.c-wc{display:flex;align-items:center;gap:16px;white-space:nowrap;height:38px;min-width:0;max-width:100%;transition:transform .24s var(--kin) .06s}
.c-wing.l .c-wc{transform:translateX(40px)}.c-wing.r .c-wc{transform:translateX(-40px)}
.panel.is-peek .c-wc{transform:none}
.c-rd{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--k1);letter-spacing:-.005em;font-variant-numeric:tabular-nums;min-width:0}
.c-rd .k{color:var(--k3);font-weight:400}
.c-rd > svg{color:var(--k2)}
.c-rd.amb,.c-rd.amb > svg{color:var(--kam)}
.c-rd .c-mono{font-size:11px;flex:0 1 auto;min-width:0}

/* the site's narration pill: what a control does in the app, told UNDER the body, never inside it */
.c-toast{position:absolute;left:50%;top:calc(100% + 12px);transform:translate(-50%,-6px);background:var(--kpop);border:1px solid var(--kh);color:var(--k1);font-size:11px;padding:6px 11px;border-radius:999px;opacity:0;transition:opacity .2s,transform .3s var(--kin);pointer-events:none;white-space:nowrap;z-index:8;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.c-toast.on{opacity:1;transform:translate(-50%,0)}
.hero-stage .panel .c-toast{top:calc(100% + 46px)}

/* ------------------------------------------------------------ the header */
.c-hdr{height:44px;display:flex;align-items:center;flex:none}
.c-hl,.c-hr{flex:1;display:flex;align-items:center;min-width:0}
.c-hr{justify-content:flex-end;gap:2px}
.c-modes{position:relative;display:flex;align-items:center;gap:2px;height:28px;flex:0 1 auto;min-width:0;overflow:hidden}
.c-mb,.c-plus,.c-auto{flex:none}
.c-mb{height:28px;padding:0 10px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--k3);display:flex;align-items:center;gap:5px;white-space:nowrap;transition:color .14s,background .14s}
.c-mb:hover{color:var(--k2);background:var(--kf)}
.c-mb.on{color:var(--k1)}
.c-mb .pen{opacity:.75}
.c-mark{position:absolute;bottom:0;left:0;height:2px;border-radius:1px;background:var(--kam);transition:left .28s var(--kin),width .28s var(--kin);pointer-events:none}
.c-plus{width:26px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--k3);transition:color .14s,background .14s}
.c-plus:hover,.c-plus.on{color:var(--k1);background:var(--kf)}
.c-auto{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--k3);margin-left:4px;transition:color .14s,background .14s}
.c-auto:hover{color:var(--k2);background:var(--kf)}
.c-auto.on{color:var(--kon);background:var(--kam)}
.c-cb{width:28px;height:28px;border-radius:14px;display:grid;place-items:center;color:var(--k3);transition:background .14s,color .14s,transform .1s}
.c-cb:hover{background:var(--kf);color:var(--k2)}
.c-cb:active{transform:scale(.96)}
.c-cb.on{background:rgba(255,255,255,.14);color:var(--k1)}
.c-cb.amb{color:var(--kam)}
.c-batt{font-size:11.5px;font-weight:500;color:var(--k2);font-variant-numeric:tabular-nums;padding:0 6px;white-space:nowrap}
.c-arrt{font-size:10.5px;color:var(--k3);margin-right:8px;white-space:nowrap}

/* ------------------------------------------------------------ the stage */
.c-stage{position:relative;flex:1;min-height:0}
.c-grid{position:absolute;inset:0;transition:opacity .12s}
.c-grid.gone{opacity:0;pointer-events:none}
.c-tile{position:absolute;top:0;left:0;background:var(--kf);border:1px solid var(--kh);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden;cursor:pointer;
  transition:transform .3s var(--kin),opacity .24s var(--kin),background .14s,border-color .14s;will-change:transform}
.c-tile:hover{background:var(--kf2)}
.c-tile.tall{justify-content:flex-start;gap:6px}
.c-tile.enter{opacity:0}
.c-tile.leave{opacity:0;pointer-events:none;transition:transform .2s var(--kin),opacity .2s var(--kin)}
.c-tile.under{opacity:0;transition:opacity .12s}
.c-grid.arranging .c-tile{border-color:rgba(255,255,255,.2);cursor:default}
.c-grid.arranging .c-tile > *:not(.c-x):not(.c-grip){pointer-events:none}
/* GhostSeat: a solid 1px edge at 14% (DS.Arrange.ghostBorder), 24% under the pointer */
.c-ghost{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:12px;display:grid;place-items:center;font-size:10.5px;color:var(--k3);transition:transform .3s var(--kin),opacity .2s,border-color .14s}
.c-ghost:hover{border-color:rgba(255,255,255,.24)}
.c-ghost span{display:flex;align-items:center;gap:5px}
.c-x{position:absolute;top:0;right:0;width:24px;height:24px;border-radius:0 11px 0 7px;background:var(--kpop);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);display:grid;place-items:center;color:var(--k1);z-index:2;transition:background .14s,color .14s}
.c-x:hover,.c-x.armed{background:var(--krd);color:#fff}
.c-grip{position:absolute;right:5px;bottom:5px;color:var(--k3);pointer-events:none}

/* the tile's words: label 10/500 in ink 3, value 22/300, title 12/600 */
.c-lb{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:500;color:var(--k3);white-space:nowrap;min-width:0;line-height:1.2}
.c-lb svg{color:var(--k3)}
.c-lb span{overflow:hidden;text-overflow:ellipsis}
.c-big{font-size:22px;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--k1);line-height:1;white-space:nowrap}
.c-big.amb,.c-amb{color:var(--kam)}
.c-grn{color:var(--kgr)}
.c-t1{font-size:12px;font-weight:600;color:var(--k1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em;line-height:1.3}
.c-t2{font-size:10.5px;color:var(--k2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.c-t3{font-size:10.5px;color:var(--k3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
/* amber wins over the ladder's inks when a reading needs you */
.c-t1.c-amb,.c-t2.c-amb,.c-t3.c-amb{color:var(--kam)}
.c-v{font-size:11.5px;font-weight:500;color:var(--k1);font-variant-numeric:tabular-nums;white-space:nowrap}
.c-k{font-size:11.5px;color:var(--k3);white-space:nowrap}
.c-row{display:flex;align-items:center;gap:8px;min-width:0}
.c-col{display:flex;flex-direction:column;min-width:0}
.c-grow{flex:1;min-width:0}
.c-mono{font-family:var(--kmono);font-size:11px;color:var(--k1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-mr{display:flex;align-items:center;gap:6px;height:16px;min-width:0;font-size:10.5px}
.c-mr .k{color:var(--k3);min-width:34px;font-variant-numeric:tabular-nums;flex:none}
.c-mr .t{color:var(--k1);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-mr .r{color:var(--k3);font-size:10px;font-variant-numeric:tabular-nums;flex:none}
.c-mr .r.c-amb{color:var(--kam)}.c-mr .r.c-grn{color:var(--kgr)}
.c-evd{width:5px;height:5px;border-radius:2px;flex:none}
.c-dot{width:6px;height:6px;border-radius:50%;background:var(--k3);flex:none}
.c-dot.amb{background:var(--kam)}.c-dot.green{background:var(--kgr)}.c-dot.red{background:var(--krd)}
/* StatusDot's breath: 40% to full and back, 1.15s */
.c-dot.pulse,.m-sd.wait{animation:c5pulse 1.15s ease-in-out infinite}
@keyframes c5pulse{50%{opacity:.4}}
.c-pill{height:24px;padding:0 10px;border-radius:12px;font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap;transition:background .14s,transform .14s,color .14s}
.c-pill.amb{background:var(--kam);color:var(--kon)}
.c-pill.amb:hover{background:var(--kamh)}
.c-pill.q{background:transparent;color:var(--k2)}
.c-pill.q:hover{background:var(--kf)}
.c-pill:active,.c-pill.pressed{transform:scale(.97)}
.c-pill.dim{opacity:.45;pointer-events:none}
.c-ib{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;color:var(--k1);flex:none;transition:background .14s,transform .14s}
.c-ib:hover{background:var(--kf2)}
.c-ib.big{width:32px;height:32px;border-radius:16px;background:var(--k1);color:#000}
.c-ib.big:hover{background:#fff}
.c-ib:active,.c-ib.pressed{transform:scale(.94)}
.c-trans{display:flex;align-items:center;gap:2px;flex:none}
.c-art{border-radius:6px;background:linear-gradient(135deg,#c26a3a,#3b2a4a 55%,#0d1a2b);position:relative;overflow:hidden;flex:none}
.c-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 30%,rgba(255,220,170,.45),transparent 45%)}
.c-art.b{background:linear-gradient(135deg,#2f6f86,#1c2b4d 55%,#120d20)}
.c-art.b::after{background:radial-gradient(circle at 65% 35%,rgba(190,235,255,.4),transparent 45%)}
.c-eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;color:#E7A56F;flex:none}
.c-eq i{width:2.5px;height:100%;background:currentColor;border-radius:1px;transform-origin:bottom;animation:c5eq 1s ease-in-out infinite}
.c-eq i:nth-child(1){animation-duration:.9s}.c-eq i:nth-child(2){animation-duration:.7s;animation-delay:.1s}.c-eq i:nth-child(3){animation-duration:1.1s;animation-delay:.2s}.c-eq i:nth-child(4){animation-duration:.8s;animation-delay:.05s}
.c-eq.paused i{animation-play-state:paused;transform:scaleY(.3)}
@keyframes c5eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.c-ring{position:relative;display:inline-grid;place-items:center;flex:none}
.c-ring svg{transform:rotate(-90deg)}
.c-ring .rt{stroke:var(--ktrack)}
.c-ring .rv{stroke:var(--k1);transition:stroke-dashoffset .42s cubic-bezier(.2,.8,.2,1) .14s,stroke .3s}
.c-ring.amb .rv{stroke:var(--kam)}.c-ring.red .rv{stroke:var(--krd)}.c-ring.green .rv{stroke:var(--kgr)}
.c-ring .n{position:absolute;font-size:9.5px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--k1)}
.c-line{height:2px;border-radius:1px;background:var(--ktrack);position:relative;overflow:hidden}
.c-line i{position:absolute;left:0;top:0;bottom:0;background:var(--k2);border-radius:1px;transition:width 1s linear}
.c-line.tint i{background:#E7A56F}
.c-times{display:flex;justify-content:space-between;font-size:10.5px;color:var(--k3);font-variant-numeric:tabular-nums}
.c-chk{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--k3);display:grid;place-items:center;flex:none;color:#000;transition:background .14s,border-color .14s}
.c-chk:hover{border-color:var(--k1)}
.c-chk.on{background:var(--k1);border-color:var(--k1)}
.c-trow{display:flex;align-items:center;gap:8px;height:16px;font-size:10.5px;color:var(--k1);min-width:0}
.c-trow span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-trow.done span{color:var(--k3);text-decoration:line-through}
.c-sw{display:flex;gap:6px}
.c-swb{width:32px;height:30px;border-radius:7px;background:var(--kf);border:1px solid var(--kh);display:grid;place-items:center;color:var(--k1);transition:background .14s,color .14s}
.c-swb.on{background:var(--k1);color:#000;border-color:transparent}
.c-thumb{width:34px;height:34px;border-radius:6px;background:var(--kf);box-shadow:inset 0 0 0 1px var(--kh);display:grid;place-items:center;color:var(--k3);flex:none}
.c-thumb.video,.m-fthumb.video{background:linear-gradient(135deg,#2a3346,#11151f)}
.c-thumb.image,.m-fthumb.image{background:linear-gradient(160deg,#4a5d78,#1d2533 60%,#0f1218)}
.c-chip{height:22px;padding:0 8px;border-radius:6px;background:var(--kf);border:1px solid var(--kh);font-size:10.5px;display:inline-flex;align-items:center;gap:5px;color:var(--k2);white-space:nowrap;min-width:0;overflow:hidden}
.c-chip svg{color:var(--k3)}
.c-chip.on{background:var(--kf2);color:var(--k1);border-color:rgba(255,255,255,.2)}
/* the ask field (QuickAITile.askField): the words take the room, the 24pt send circle keeps its own */
.c-field{height:28px;border-radius:7px;background:var(--kf);display:flex;align-items:center;gap:6px;padding:0 2px 0 8px;min-width:0}
.c-field > span:first-child{flex:1;min-width:0;font-size:11.5px;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-send{width:24px;height:24px;flex:0 0 24px;border-radius:12px;background:var(--kf);display:grid;place-items:center;color:var(--k3)}

/* ------------------------------------------------------------ a module, zoomed in place */
.c-mod{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;will-change:clip-path}
.c-mod.dock-in{opacity:0;transform:translateY(6px)}
.c-mod.dock-go{transition:opacity .22s var(--kin) .06s,transform .22s var(--kin) .06s}
.c-mod.fade-out{opacity:0;transition:opacity .12s}
.c-modh{display:flex;align-items:center;gap:8px;height:28px;margin-bottom:8px;flex:none}
.c-modh > svg{color:var(--k2)}
.c-modh .ti{font-size:13px;font-weight:600;color:var(--k1);letter-spacing:-.005em;white-space:nowrap}
.c-modh .pin{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--k3);margin-left:-2px;transition:background .14s}
.c-modh .pin:hover{background:var(--kf)}
.c-modh .pin.on{color:var(--kam)}
.c-modh .in{margin-left:auto;font-size:10.5px;color:var(--k3);white-space:nowrap}
.c-modb{flex:none;min-height:0;position:relative;overflow:hidden}
.c-cols{display:flex;gap:12px;height:100%}
.c-cols > .c-col{flex:1;gap:6px}
.c-hero{font-size:42px;font-weight:200;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:var(--k1)}
.c-small{font-size:10.5px;color:var(--k3);line-height:1.4}
.c-seg{position:relative;z-index:0;display:inline-flex;background:var(--kf);border-radius:7px;padding:1px 2px;gap:2px;flex:none}
.c-seg span{position:relative;min-width:24px;height:24px;padding:0 10px;font-size:11px;font-weight:500;color:var(--k2);display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap}
.c-seg span.on{color:var(--k1)}
.c-seg span.on::before{content:"";position:absolute;left:0;right:0;top:1px;bottom:1px;border-radius:6px;background:var(--kf2);z-index:-1}
.c-lab{font-size:10px;font-weight:500;color:var(--k3);margin:2px 0 6px}
.c-tfield{height:28px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid var(--kh);display:flex;align-items:center;padding:0 9px;font-size:11.5px;color:var(--k1);width:100%;outline:none;font-family:var(--kfont)}
.c-tfield::placeholder{color:var(--k3)}
.c-tfield:focus{border-color:rgba(255,255,255,.28)}
.c-chips{display:flex;flex-wrap:wrap;gap:6px}
.c-chips .c-chip{cursor:pointer}

/* ------------------------------------------------------------ the module bodies' parts
   The shared controls of CrestControls / CrestMaterial / DestructiveControls,
   at their shipped numbers, so every module draws one kit. */
.m{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0}
.m.c-row{flex-direction:row}
.m-list{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.m-lab{font-size:10px;font-weight:500;color:var(--k3);white-space:nowrap}
.m-cnt{font-size:10px;font-weight:600;color:var(--k3);font-variant-numeric:tabular-nums}
.m-sec{display:flex;align-items:center;gap:6px;height:16px;flex:none}
.m-hair{height:1px;background:var(--kh);flex:none}
.m-hair.q{background:var(--khq)}
.m-vhair{width:1px;align-self:stretch;margin:2px 0;background:var(--khq);flex:none}
.m-body2{font-size:11.5px;color:var(--k2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.m-hl{font-size:10px;color:var(--k3);font-variant-numeric:tabular-nums;white-space:pre}
/* a TextField's placeholder wears its field's ink a step down: primary fields read .8, secondary .52; an explicit hint Text stays ink 3 */
.m-ph{color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-ph.k2{color:rgba(255,255,255,.52)}.m-ph.k3{color:var(--k3)}
/* CapButtonStyle: tile fill at rest, the hover wash under the pointer, a point down when pressed */
.m-cap{height:26px;padding:0 10px;border-radius:7px;background:var(--kf);color:var(--k2);font-size:11px;font-weight:500;display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap;transition:background .14s,transform .14s}
.m-cap:hover{background:var(--kf2)}
.m-cap:active{transform:translateY(1px)}
.m-cap.rec{gap:6px}
.m-cap.sm{height:20px;padding:0 9px;font-size:10px;font-weight:600;gap:3px}
.m-cap.pane{height:24px;padding:0 12px;font-size:10.5px}
.m-cap.round{width:26px;height:26px;padding:0;border-radius:13px;justify-content:center;color:var(--k1)}
.m-cap.sq{width:24px;height:24px;padding:0;justify-content:center;color:var(--k3)}
.m-cap.covert{width:26px;height:24px;padding:0;justify-content:center;color:var(--k3)}
.m-cap.model{height:24px;padding:0 8px;font-size:9.5px;font-weight:600}
.m-rec{width:7px;height:7px;border-radius:50%;background:var(--krd);flex:none}
/* QuietTextButton */
.m-qt{height:24px;padding:0 8px;font-size:10.5px;font-weight:500;color:var(--k2);display:inline-flex;align-items:center;gap:4px;flex:none;white-space:nowrap;transition:color .14s}
.m-qt:hover{color:var(--k1)}
/* ConfirmPill at rest */
.m-confirm{height:24px;padding:0 10px;border-radius:12px;background:var(--kf);color:var(--krd);font-size:10.5px;font-weight:600;flex:none;white-space:nowrap}
/* QuietIconButton / DestructiveIconButton: boxed, 35% while the row is cold, never removed */
.m-ib{border-radius:7px;background:var(--kf);color:var(--k2);display:grid;place-items:center;flex:none;transition:background .14s,color .14s,opacity .14s}
.m-ib.rest{opacity:.35}
.m-ib:hover{background:var(--kf2);color:var(--k1);opacity:1}
.m-ib.del:hover{color:var(--krd)}
/* CrestToggle */
.m-sw{position:relative;width:32px;height:19px;border-radius:10px;background:var(--kf2);flex:none;cursor:pointer;transition:background .14s}
.m-sw i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--kknob);box-shadow:0 1px 1px rgba(0,0,0,.45);transition:transform .14s var(--kin)}
.m-sw.on{background:var(--kam)}
.m-sw.on i{transform:translateX(13px)}
/* StatusDot */
.m-sd{border-radius:50%;background:var(--k3);flex:none}
.m-sd.run{background:var(--kgr)}.m-sd.wait{background:var(--kam)}.m-sd.alert{background:var(--krd)}
/* inputChannel: the typed-input floor with its hairline */
.m-channel{background:var(--kch);box-shadow:inset 0 0 0 1px var(--kh);border-radius:15px;display:flex;align-items:center;gap:7px;padding:0 10px;font-size:11.5px;color:var(--k3);min-width:0;flex:none}
.m-channel.cap30{height:30px}
.m-channel.r9{border-radius:9px}
/* chipCap: quiet, or lit with the amber index under it */
.m-chip{position:relative;height:22px;padding:0 10px;border-radius:11px;background:var(--kf);font-size:10px;font-weight:600;color:var(--k2);flex:none;white-space:nowrap}
.m-chip.on{background:var(--kf2);color:var(--k1)}
.m-chip.on::after{content:"";position:absolute;left:50%;bottom:1.5px;width:12px;height:2px;margin-left:-6px;border-radius:1px;background:var(--kam)}
.m-chip2{height:22px;padding:0 8px;border-radius:11px;background:var(--kf2);font-size:9.5px;font-weight:600;color:var(--k2);display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap}
.m-chip2 i{width:6px;height:6px;border-radius:50%;flex:none}
.m-chip2 svg{color:var(--k3)}
.m-gdot{width:6px;height:6px;border-radius:50%;flex:none;display:block}
/* SlotGauge and CrestScrubber */
.m-gauge{position:relative;display:block;height:6px}
.m-gauge::before{content:"";position:absolute;left:0;right:0;top:1.25px;height:3.5px;border-radius:2px;background:rgba(255,255,255,.09)}
.m-gauge i{position:absolute;left:0;top:1.25px;height:3.5px;border-radius:2px;background:var(--k2);transition:width .5s ease-out}
.m-gauge.red i{background:var(--krd)}.m-gauge.amb i{background:var(--kam)}
.m-scrub{position:relative;display:block;height:14px;flex:none}
.m-scrub::before{content:"";position:absolute;left:0;right:0;top:5.25px;height:3.5px;border-radius:2px;background:var(--kf2)}
.m-scrub i{position:absolute;left:0;top:5.25px;height:3.5px;border-radius:2px;background:var(--k2);transition:width 1s linear}
.m-scrub b{position:absolute;top:2.5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--kknob);box-shadow:0 1px 1.5px rgba(0,0,0,.45);transition:left 1s linear}
.m-scrub.tint i{background:#E7A56F}
.m-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:10.5px;color:var(--k3);text-align:center}
.m-empty svg{color:var(--k3)}

/* Now Playing */
.m-np{flex-direction:row;align-items:center;gap:16px}
.m-src{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:500;color:var(--k3)}
.m-src i{width:9px;height:9px;border-radius:2px;background:linear-gradient(160deg,#fb5c74,#fa233b)}
.m-out{width:24px;height:19px;border-radius:10px;background:var(--kf);display:grid;place-items:center;color:var(--k2);flex:none}
.m-dis{width:24px;height:24px;display:grid;place-items:center;color:var(--k2);flex:none}
.m-dis svg{width:18px;height:18px;padding:4.5px;border-radius:9px;background:var(--kf);box-sizing:border-box}
.m-song{font-size:15px;font-weight:600;color:var(--k1);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Calendar */
.m-event{position:relative;display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:9px;background:var(--kinset);flex:none}
.m-event.deep{background:rgba(255,255,255,.06)}
.m-event > i{position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:1px}
.m-pocket{width:34px;height:34px;border-radius:7px;background:var(--kinset);display:grid;place-items:center;color:var(--k2);flex:none}
.m-evt{font-size:12.5px;font-weight:600;color:var(--k1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-evw{font-size:10px;color:var(--k2);font-variant-numeric:tabular-nums}
.m-evw.now{color:var(--kam);font-weight:600}
.m-door{height:32px;padding:0 10px;border-radius:7px;background:var(--kf);display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;color:var(--k1);flex:none;transition:background .14s}
.m-door:hover{background:var(--kf2)}
.m-today{height:20px;padding:0 8px;border-radius:10px;background:var(--kf2);font-size:10px;font-weight:600;color:var(--k2);margin-right:4px}
.m-chev{width:22px;height:22px;border-radius:11px;background:var(--kf2);display:grid;place-items:center;color:var(--k2)}
.m-wk{display:grid;grid-template-columns:repeat(7,1fr)}
.m-wk span{text-align:center;font-size:10px;font-weight:500;color:var(--k3)}
.m-month{display:grid;grid-template-columns:repeat(7,1fr);column-gap:2px;row-gap:3px}
.m-day{height:26px;display:grid;place-items:center;position:relative}
.m-day b{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:400;color:var(--k2);font-variant-numeric:tabular-nums}
.m-day.today b{background:var(--kam);color:var(--kon);font-weight:600}
.m-day.ev::after{content:"";position:absolute;bottom:-1px;left:50%;width:3.5px;height:3.5px;margin-left:-1.75px;border-radius:50%;background:var(--k3)}
.m-agenda{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:7px}
.m-agenda:hover{background:var(--kf)}
.m-agenda i{width:6px;height:6px;border-radius:50%;flex:none}
.m-agenda .k{width:52px;font-size:10px;color:var(--k3);font-variant-numeric:tabular-nums;flex:none}
.m-agt{font-size:11.5px;font-weight:500;color:var(--k1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Todo */
.m-task{display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:7px;background:var(--kinset);flex:none;min-width:0}
.m-tchk{width:28px;height:28px;display:grid;place-items:center;flex:none;color:var(--kgr);position:relative}
.m-tchk::before{content:"";position:absolute;left:5px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--kch);box-shadow:inset 0 0 0 1px var(--kh)}
.m-tchk svg{position:relative}
.m-tt{font-size:11.5px;color:var(--k1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-task.done .m-tt{color:var(--k3);text-decoration:line-through}
.m-due{font-size:9.5px;color:var(--k3);font-variant-numeric:tabular-nums}
/* Notes */
.m-jot{height:24px;padding:0 8px;border-radius:12px;font-size:10px;font-weight:600;color:var(--k3);box-shadow:inset 0 0 0 1px var(--kh);flex:none;white-space:nowrap}
.m-jot.on{background:var(--kf2);color:var(--k1);box-shadow:none}
.m-div{width:1px;height:14px;background:rgba(255,255,255,.12);flex:none}
.m-note{position:relative;display:flex;align-items:flex-start;gap:8px;padding:7px 9px 7px 11px;border-radius:9px;background:var(--kinset);flex:none}
.m-note > i{position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:1px;background:var(--k3)}
.m-nt{font-size:11.5px;line-height:1.3;color:var(--k1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-nt b{font-weight:600}
.m-cat{height:18px;padding:0 7px;font-size:9px;font-weight:500;color:var(--k3);display:flex;align-items:center;flex:none;margin-top:4px}
/* Pomodoro */
.m-pring{position:relative;display:grid;place-items:center;flex:none}
.m-side{height:30px;border-radius:7px;background:var(--kf);font-size:12px;font-weight:600;color:var(--k1);text-align:center}
.m-side.commit{background:var(--kam);color:var(--kon)}
.m-side.quiet{background:transparent;color:var(--k2)}
.m-step{height:30px;border-radius:15px;background:var(--kch);box-shadow:inset 0 0 0 1px var(--kh);display:flex;align-items:center;gap:3px;padding:0 4px 0 9px}
.m-step b{width:24px;text-align:right;font-size:15px;font-weight:500;color:var(--k1);font-variant-numeric:tabular-nums}
.m-step > span:not(.c-col){font-size:9px;font-weight:600;color:var(--k3)}
.m-step i{display:grid;place-items:center;width:24px;height:15px}
/* Weather and System */
.m-sky{color:var(--k2)}
.m-sky.sun{color:#FFC759}.m-sky.rain{color:#6BA3F2}
.m-spark{width:100%;height:12px;color:var(--k2);flex:none}
.m-grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:2px;flex:none}
.m-tgrow{height:26px;padding:0 6px;border-radius:7px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--k1);transition:background .14s}
.m-tgrow:hover{background:var(--kf)}
.m-tgrow .m-sw{pointer-events:none}
.m-stat{height:26px;display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--k2)}
.m-stat b{font-weight:500;color:var(--k1);font-variant-numeric:tabular-nums}
/* Bluetooth and Audio */
.m-dev{width:100%;height:36px;padding:0 8px;border-radius:7px;display:flex;align-items:center;gap:10px;flex:none;transition:background .14s}
.m-dev:hover{background:var(--kf)}
.m-dev.off{opacity:.6}
.m-aud{width:100%;height:28px;padding:0 8px;border-radius:7px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--k2);flex:none;transition:background .14s}
.m-aud:hover{background:var(--kf)}
.m-aud.on{color:var(--k1);font-weight:500}
.m-chk14{width:14px;height:14px;display:grid;place-items:center;color:var(--k1);flex:none}
.m-editor{flex:1;min-width:0}
/* Notifications */
.m-appic{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex:none}
.m-nti{font-size:11.5px;font-weight:600;color:var(--k1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-nb{font-size:10px;color:var(--k2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Code Hosting */
.m-ctl{width:24px;height:24px;border-radius:12px;display:grid;place-items:center;color:var(--k3);transition:background .14s,color .14s}
.m-ctl:hover{background:var(--kf);color:var(--k2)}
.m-pr{height:34px;padding:0 8px;border-radius:7px;display:flex;align-items:center;gap:9px;width:100%;transition:background .14s}
.m-pr:hover{background:var(--kf)}
.m-prt{font-size:11.5px;font-weight:500;color:var(--k1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-prs{font-size:9.5px;color:var(--k3);font-variant-numeric:tabular-nums;white-space:nowrap}
.m-lnk{color:var(--k3)}
.m-pr:hover .m-lnk{color:var(--k2)}
/* Hosts */
.m-host{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;flex:none;transition:background .14s}
.m-host:hover{background:var(--kf2)}
.m-host:hover .m-ib.rest{opacity:1}
.m-hn{font-size:12.5px;font-weight:600;color:var(--k1)}
.m-ha{font-family:var(--kmono);font-size:10px;color:var(--k3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-connect{height:24px;padding:0 10px;border-radius:7px;background:var(--kf2);display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--k1);flex:none}
.m-term{height:24px;padding:0 8px;border-radius:6px;font-size:10px;font-weight:500;color:var(--k2);flex:none}
.m-term.on{background:var(--kf2);color:var(--k1);font-weight:600}
.m-term.off{color:var(--k3)}
/* AI Coding */
.m-agent{display:flex;align-items:center;gap:9px;padding:5px 0;flex:none;min-width:0}
.m-an{font-size:11.5px;font-weight:600;color:var(--k1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-an span{font-weight:400;color:var(--k3)}
.m-aa{font-size:10px;color:var(--k2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-aa.wait{color:var(--kam);font-weight:600}
.m-tok{font-family:var(--kmono);font-size:10px;color:var(--k3);font-variant-numeric:tabular-nums;flex:none}
.m-lim{display:flex;align-items:baseline;gap:5px;font-size:10px;color:var(--k3);white-space:nowrap}
.m-lim b{font-size:13px;font-weight:300;color:var(--k2);font-variant-numeric:tabular-nums}
/* Claude */
.m-route{height:24px;padding:0 9px;border-radius:12px;background:var(--kf);font-size:10.5px;font-weight:500;color:var(--k2);flex:none}
.m-route.on{background:var(--kf2);color:var(--k1);font-weight:600}
.m-files{height:24px;padding:0 8px;border-radius:7px;background:var(--kf);display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;color:var(--k2);flex:none}
.m-editor{height:58px;align-items:flex-start;padding:11px 12px;font-size:12px}
.m-circ{width:28px;height:28px;border-radius:14px;background:var(--kf2);display:grid;place-items:center;color:var(--k2);flex:none;margin-bottom:15px}
.m-circ.send{background:var(--kf);color:var(--k3)}
.m-circ.send.ready{background:var(--kam);color:var(--kon)}
.m-region{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.m-card{flex:1;min-height:0;border-radius:7px;background:var(--kf);display:flex;flex-direction:column;overflow:hidden}
.m-plan{width:100%;display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.035)}
.m-plan.on{background:var(--kf2)}
.m-box{width:16px;height:16px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--k3);display:grid;place-items:center;color:#000;flex:none}
.m-plan.on .m-box{background:var(--k1);box-shadow:inset 0 0 0 1.5px var(--k1)}
.m-ex{height:24px;padding:0 9px;border-radius:7px;background:var(--kf);font-size:10px;color:var(--k3);white-space:nowrap;flex:none;transition:background .14s}
.m-ex:hover{background:var(--kf2)}
.m-quota{display:flex;align-items:baseline;gap:3px;font-size:8px;color:var(--k3);margin-left:7px}
.m-quota b{font-size:9.5px;font-weight:300;color:var(--k2);font-variant-numeric:tabular-nums}
/* Shelf */
.m-drop{height:68px;border-radius:9px;border:1px dashed var(--kh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--k3);flex:none}
.m-drop b{font-size:11.5px;font-weight:600;color:var(--k2)}
.m-drop small{font-size:9.5px;color:var(--k3)}
.m-drop.slim{height:30px;flex-direction:row;font-size:10px}
.m-file{height:32px;padding:0 8px;border-radius:7px;display:flex;align-items:center;gap:9px;flex:none;transition:background .14s}
.m-file:hover{background:var(--kf)}
.m-fthumb{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--k3);flex:none;box-shadow:inset 0 0 0 1px var(--kh)}
.m-fthumb.text{box-shadow:none}
.m-fn{font-size:11.5px;font-weight:500;color:var(--k1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-fs{font-size:9.5px;color:var(--k3);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.m-search{width:160px;height:26px;border-radius:13px;background:var(--kch);box-shadow:inset 0 0 0 1px var(--kh);display:flex;align-items:center;gap:6px;padding:0 9px;font-size:11px;color:var(--k3);flex:none}
.m-search span{color:rgba(255,255,255,.8)}
.m-clip{height:30px;padding:0 6px;border-radius:7px;display:flex;align-items:center;gap:8px;flex:none;cursor:pointer;transition:background .14s}
.m-clip:hover{background:var(--kf)}
.m-clip:hover .m-ib.rest{opacity:1}
.m-clip .m-ib{margin-left:2px}
.m-swatch{width:12px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--kh);flex:none}
.m-copied{display:flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;color:var(--kam);height:24px;flex:none}
.m-foot{font-size:9px;font-weight:500;color:var(--k2);height:24px}
/* Take and Minutes */
.m-rec-surface{padding:16px 22px}
.m-tcap{flex:1;height:44px;border-radius:9px;background:var(--kf);font-size:12.5px;font-weight:600;color:var(--k1);text-align:center;transition:background .14s}
.m-tcap:hover{background:var(--kf2)}
.m-tcap.amb{color:var(--kam)}
.m-ringdot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(232,83,74,.85);flex:none}
.m-armed{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;background:var(--kinset)}
/* Settings */
.m-update{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--kh);flex:none}
.m-catrow{width:100%;height:40px;padding:0 8px;border-radius:7px;display:flex;align-items:center;gap:10px;flex:none;transition:background .14s}
.m-catrow:hover{background:var(--kf)}
.m-chevr{color:var(--k3)}
.m-catrow:hover .m-chevr{color:var(--k2)}

/* ------------------------------------------------------------ the dock */
.c-dock{height:36px;flex:none;display:flex;align-items:center;gap:2px;padding-top:6px;margin-top:8px;border-top:1px solid var(--kh);position:relative}
.c-di{width:30px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--k3);position:relative;flex:none;transition:color .14s,transform .16s var(--kin),opacity .14s}
.c-di:hover{color:var(--k1);transform:translateY(-1px)}
.c-di.on{color:var(--k1)}
.c-di.amb{color:var(--kam)}
.c-di.seated{opacity:.45}
.c-di.seated:hover{opacity:.8}
.c-dl{position:absolute;bottom:31px;left:50%;transform:translate(-50%,4px);opacity:0;font-size:10.5px;font-weight:500;color:var(--k1);background:var(--kpop);border:1px solid var(--kh);padding:3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;transition:opacity .12s,transform .16s var(--kin);z-index:3}
.c-di:hover .c-dl,.c-di.say .c-dl{opacity:1;transform:translate(-50%,0)}
.c-dsep{width:1px;height:16px;background:var(--kh);margin:0 5px;flex:none}
.c-dsp{flex:1}
.c-dind{position:absolute;bottom:1px;left:0;width:4px;height:4px;border-radius:50%;background:var(--kam);transition:left .26s var(--kin),opacity .16s;pointer-events:none}
.c-badge{position:absolute;top:1px;right:1px;width:12px;height:12px;border-radius:6px;background:var(--kam);color:var(--kon);display:grid;place-items:center}

/* ------------------------------------------------------------ the hub's hero stage */
.hero-stage{position:absolute;top:0;left:0;right:0;height:calc(var(--panel-h) * var(--ps))}
.hero-stage .cap{position:absolute;left:0;right:0;top:calc(var(--panel-h) * var(--ps) + 16px);font-size:13px;color:var(--t3);text-align:center;transition:top .36s var(--ease);pointer-events:none;max-width:none}

/* ------------------------------------------------------------ a Mac screen a second body lives in
   The hub's day sequence (#screen, sticky) and the stills on /crest and
   /products (.screen.still, mounted by data-crest-screen). */
.screen{position:sticky;top:76px;background:#0B0C10;border-radius:18px;overflow:hidden;height:calc(var(--screen-h,274px) * var(--ss) + 58px);transition:height .36s var(--ease);box-shadow:0 0 0 6px #D6D8DD,0 0 0 7px rgba(11,12,16,.14),0 50px 90px -40px rgba(0,0,0,.55)}
.screen.still{position:relative;top:auto}
.screen::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 115%,rgba(255,176,0,.11),transparent 60%),radial-gradient(120% 90% at 50% 0%,#191B22 0%,#0B0C10 70%)}
.screen .mbar{position:absolute;top:0;left:0;right:0;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font:600 12.5px/1 var(--text);color:rgba(255,255,255,.85)}
.screen .mbar span{font-weight:400;color:rgba(255,255,255,.6);font-family:var(--mono);font-size:11.5px}
.screen .snotch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(220px * var(--ss));height:calc(38px * var(--ss));background:#000;border-radius:0 0 calc(10px * var(--ss)) calc(10px * var(--ss));z-index:1;pointer-events:none}
.screen .panel{--ps:var(--ss);z-index:2}
.screen .panel.is-open .c-body{box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.cur{position:absolute;left:0;top:0;width:19px;height:23px;z-index:4;pointer-events:none;opacity:0;transition:transform .8s cubic-bezier(.3,.7,.15,1),opacity .4s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));transform:translate(60%,60%)}
.cur.on{opacity:1}
.cur.press{animation:press .28s var(--ease)}
@keyframes press{50%{scale:.82}}
@media(max-width:1000px){.screen{top:60px;z-index:5}.screen.still{top:auto;z-index:auto}}
@media(max-width:720px){.hero-stage .cap{display:none}}
@media(prefers-reduced-motion:reduce){
  .panel,.panel *,.hero-stage .cap,.screen{transition-duration:.12s!important;transition-timing-function:linear!important;transition-delay:0s!important;animation:none!important}
  .c-eq i{transform:scaleY(.5)}
}