/* ============================================================
   zeng3ld · UNIFIED PLAYGROUND ENGINE — stylesheet
   ------------------------------------------------------------
   One engine, copied nowhere. A consumer page sets window.PG_CONFIG
   and includes playground.js + this file; the engine builds the
   whole shell (sidebar / stage / bottom-bar) from the config.

   Two FRAME KINDS (body[data-kind]):
     · mobile  → a phone/tablet bezel hosting an iframe
     · desktop → a simulated OS desktop (macOS / Windows / Ubuntu)
                 with an app window (OUR or SYSTEM chrome), corners,
                 and a draggable window.

   Two CONSUMER CHROMES, chosen by viewport aspect (body[data-mode]):
     · d (landscape)  → left SIDEBAR of controls
     · m (portrait)   → bottom CONTROL PANEL

   THEME: everything paints through CSS variables. The defaults below
   are the mirage dark-amber language; a consumer overrides them via
   PG_CONFIG.theme (engine writes them onto :root). --amber is the
   canonical ACCENT var (a navy hub sets it to gold, a cream hub to
   its signal colour, etc.). OS wallpaper/chrome gradients are
   platform-authentic and intentionally NOT themed.
   ============================================================ */
/* native per-OS system fonts for the SIMULATED chrome — OSS substitutes so they render on
   any host (Inter ≈ SF Pro for mac/iOS, Roboto for Android, Ubuntu for Ubuntu; Segoe is a
   Windows system font). The engine's own UI keeps --ui (Space Grotesk). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Ubuntu:wght@400;500;700&display=swap');
:root{
  --bg:#0B0B0E; --pane:#14151A; --line:rgba(255,255,255,0.08); --line2:rgba(255,255,255,0.14);
  --fg:#F4F4F5; --fg2:#878B91; --fg3:rgba(244,244,245,0.40);
  --amber:#FBB26A;
  /* control-plane surfaces — overridable so the engine supports light skins too */
  --btn:rgba(244,244,245,0.02); --btn-h:rgba(244,244,245,0.04);
  --accent-soft:rgba(251,178,106,0.08); --accent-ink:#1a1206;
  /* control-plane STYLE tokens — the hub styles its buttons, not just recolours.
     shape + typography + fill + shadow; defaults = the mirage look (no regression). */
  --ctrl-radius:8px; --ctrl-bw:1px; --ctrl-font:var(--ui); --ctrl-weight:600;
  --ctrl-tt:none; --ctrl-track:normal; --ctrl-shadow:none; --ctrl-lift:none;
  --on-bg:var(--accent-soft); --on-fg:var(--amber); --on-bd:var(--amber);
  --ui:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sys-font:var(--ui);   /* native per-OS system font (set by data-os/data-dos below) */
}
/* per-OS native font for the simulated chrome */
body[data-os="mac"]{--sys-font:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
body[data-os="win"]{--sys-font:'Segoe UI Variable','Segoe UI',system-ui,sans-serif}
body[data-os="ubuntu"]{--sys-font:'Ubuntu','Cantarell',system-ui,sans-serif}
body[data-dos="ios"],body[data-dos="ipados"]{--sys-font:'Inter','SF Pro Text',-apple-system,system-ui,sans-serif}
body[data-dos="pixel"]{--sys-font:'Roboto','Roboto Flex',system-ui,sans-serif}
body[data-dos="oneui"]{--sys-font:'Roboto','Inter',system-ui,sans-serif}
/* apply it to the simulated OS chrome only (NOT the engine's own control plane). `body `
   prefix lifts specificity above the per-element `font-family:var(--ui)` rules later in the
   file (a consumer can repoint --ui to its brand font — the OS chrome must NOT follow it). */
body .mac-menubar,body .mac-dock,body .win-taskbar,body .win-desk,body .ub-top,body .ub-dock,body .systl,body .dev-statusbar,body .shade,body .web-bar,body .pg-fly,body .os-clock,body .os-date,body .sb-time{font-family:var(--sys-font)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);
  font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden}
/* themed scrollbars at the FOUNDATION — every engine element (any nesting) overrides the raw
   browser scrollbar; colours follow the active skin's --line2 / --fg3 (with safe fallbacks). */
html::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:var(--line2,rgba(255,255,255,0.16));border:3px solid transparent;border-radius:9px;background-clip:padding-box}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line2,rgba(255,255,255,0.16));border:3px solid transparent;border-radius:9px;background-clip:padding-box}
::-webkit-scrollbar{width:9px;height:9px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2,rgba(255,255,255,0.16));border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--fg3,rgba(255,255,255,0.4));background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

.pg{display:grid;height:100dvh}
body[data-mode="d"] .pg{grid-template-columns:248px 1fr;grid-template-rows:1fr}
body[data-mode="d"] .bar{display:none}
body[data-mode="d"] .side{display:flex}
body[data-mode="m"] .pg{grid-template-columns:1fr;grid-template-rows:1fr auto}
body[data-mode="m"] .side{display:none}
body[data-mode="m"] .bar{display:flex}
/* a 2-axis version that carries a single screen (e.g. 'terminal') hides the variant picker */
body.pg-novariant .variant-grp,body.pg-novariant .pg-variant-ctl{display:none}

/* ============================================================
   STAGE — MOBILE kind (phone / tablet bezel)
   ============================================================ */
body[data-kind="mobile"] .stage{position:relative;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(251,178,106,0.06) 0%,transparent 60%)}
.stage-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(244,244,245,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(244,244,245,0.02) 1px,transparent 1px);
  background-size:48px 48px}
/* default = iPhone 15 Pro: thin uniform 10px bezel, concentric screen radius (device 50 − bezel 10 = screen 40) */
.device{position:relative;flex-shrink:0;background:#0a0a0c;border-radius:50px;padding:10px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.06);transform-origin:center center;
  width:393px;height:852px;transition:width .22s ease,height .22s ease,transform .22s ease,border-radius .22s ease}
/* per-device bezel + screen radius, driven by the device's cutout/os — kept concentric (screen = device − bezel) */
body[data-cutout="punch"] .device{border-radius:38px}                       /* Pixel / Galaxy: slightly chunkier corner */
body[data-cutout="none"][data-dos="ios"] .device{border-radius:42px}         /* iPhone SE: flatter corner */
body[data-cutout="none"][data-dos="ipados"] .device{border-radius:28px}
/* inner SCREEN = rounded glass holding the status bar + the app iframe (column) */
.screen{position:absolute;inset:10px;border-radius:40px;overflow:hidden;background:#000;display:flex;flex-direction:column}
/* brightness dim — black overlay over the screen (above the iframe, below the shade) */
.scr-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:6;transition:opacity .06s linear}
/* home-indicator gesture zone (swipe up → minimize app into the switcher) */
.home-ind{position:absolute;left:0;right:0;bottom:0;height:26px;z-index:8;display:flex;align-items:flex-end;justify-content:center;touch-action:none}
.home-ind::after{content:'';width:36%;max-width:148px;height:5px;border-radius:3px;background:rgba(255,255,255,0.55);margin-bottom:8px;pointer-events:none;opacity:0;transition:opacity .16s ease}
/* the home bar shows only while you drag it up to minimise — hidden otherwise */
.home-ind.drag::after,.screen[data-appmin] .home-ind::after{opacity:1}
body[data-devtheme="light"] .home-ind::after,body[data-devtheme="custom"] .home-ind::after{background:rgba(0,0,0,0.4)}
body[data-dos="pixel"] .home-ind::after,body[data-dos="oneui"] .home-ind::after{width:24%}
/* app switcher (minimized): the iframe shrinks into a card on a blurred backdrop */
.frame{transition:transform .34s cubic-bezier(.32,.9,.3,1),border-radius .34s}
.app-switch{position:absolute;inset:0;z-index:15;background:rgba(8,8,12,0.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:opacity .3s}
.app-restore{position:absolute;inset:0;z-index:17;display:none}
.screen[data-appmin] .app-switch{opacity:1}
.screen[data-appmin] .frame{position:relative;z-index:16;transform:scale(.66) translateY(-5%);border-radius:30px;box-shadow:0 22px 60px rgba(0,0,0,0.6)}
.screen[data-appmin] .app-restore{display:block;cursor:pointer}
body[data-cutout="punch"] .screen{border-radius:28px}
body[data-cutout="none"][data-dos="ios"] .screen{border-radius:32px}
body[data-cutout="none"][data-dos="ipados"] .screen{inset:13px;border-radius:15px}

/* OS-aware status bar (engine-owned; replaces each app drawing its own) */
.dev-statusbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  height:30px;padding:0 16px;background:var(--bg);color:var(--fg);font-family:var(--ui);position:relative;z-index:4}
.sb-time{font-weight:600;font-size:13px;letter-spacing:.01em;line-height:1}
.sb-ic{display:flex;align-items:center;gap:6px}
.sb-ic svg{display:block}
/* live battery: % label + dynamic-width fill; .low tints the fill amber (iOS low-power) */
.sb-batt{display:inline-flex;align-items:center;gap:3px}
.sb-pct{font-size:11px;font-weight:600;line-height:1;letter-spacing:.01em}
.sb-batt-fill{fill:currentColor;transition:width .25s ease,fill .2s ease}
.sb-batt.low .sb-batt-fill{fill:#FBB26A}
.oneui-batt.low i{background:#FBB26A}
body[data-dos="pixel"] .sb-pct,body[data-dos="android"] .sb-pct{font-weight:700}
body[data-dos="ios"] .dev-statusbar{height:46px;padding:0 24px 7px;align-items:flex-end}
body[data-dos="ios"] .sb-time{font-size:14px;font-weight:700}
body[data-dos="ipados"] .dev-statusbar{height:32px;padding:0 22px}
body[data-dos="pixel"] .dev-statusbar{height:28px;padding:0 14px}
body[data-dos="oneui"] .dev-statusbar{height:30px;padding:0 15px}

/* status-bar left cluster: clock (+ Android notification glyphs, the hallmark) */
.dev-statusbar{cursor:pointer;-webkit-user-select:none;user-select:none}
.sb-left{display:flex;align-items:center;gap:7px;min-width:0}
.sb-notif{display:flex;align-items:center;gap:4px;opacity:.92}
.sb-notif svg{display:block}
body[data-dos="pixel"] .sb-time{font-weight:800;letter-spacing:0}
body[data-dos="oneui"] .sb-time{font-weight:600}
.sb-ic .sb-time{margin-left:5px}

/* pill-notch / notch / punch-hole, floating over the screen top (stays above the shade like real hardware).
   The pill-notch (island) is interactive: tap → spring-expand into a live activity. ("Dynamic Island" is a
   trademarked NAME — we use the neutral "pill-notch"; the pill shape is fine.) */
.dev-cutout{position:absolute;left:50%;transform:translateX(-50%);background:#000;z-index:9;pointer-events:none;overflow:hidden}
body[data-cutout="island"] .dev-cutout{width:118px;height:32px;border-radius:18px;top:19px;pointer-events:auto;cursor:pointer;
  transition:width .42s cubic-bezier(.34,1.56,.64,1),height .42s cubic-bezier(.34,1.56,.64,1),border-radius .34s ease}
body[data-cutout="island"][data-island="live"] .dev-cutout{width:236px;height:46px;border-radius:23px}
body[data-cutout="notch"] .dev-cutout{width:150px;height:28px;border-radius:0 0 18px 18px;top:11px}
body[data-cutout="punch"] .dev-cutout{width:13px;height:13px;border-radius:50%;top:18px}
body[data-cutout="none"] .dev-cutout{display:none}
/* live-activity content — hidden (opacity 0, clipped) until the pill expands */
.dev-cutout .di{display:flex;align-items:center;gap:8px;width:236px;height:100%;padding:0 13px 0 10px;box-sizing:border-box;
  color:#fff;opacity:0;transform:scale(.5);transition:opacity .16s ease,transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
body[data-cutout="island"][data-island="live"] .dev-cutout .di{opacity:1;transform:scale(1)}
.di-lead{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#e9b44c;color:#1a1400;flex-shrink:0}
.di-lead svg{display:block}
.di-txt{display:flex;flex-direction:column;line-height:1.18;min-width:0;flex:1}
.di-txt b{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.di-txt i{font-size:9.5px;font-style:normal;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.di-eq{display:flex;align-items:flex-end;gap:2px;height:16px;flex-shrink:0}
.di-eq i{width:2.6px;height:4px;background:#e9b44c;border-radius:1px;animation:di-eq .9s ease-in-out infinite;animation-play-state:paused}
.di-eq i:nth-child(2){animation-delay:.18s}
.di-eq i:nth-child(3){animation-delay:.36s}
.di-eq i:nth-child(4){animation-delay:.1s}
body[data-cutout="island"][data-island="live"] .di-eq i{animation-play-state:running}
@keyframes di-eq{0%,100%{height:4px}50%{height:15px}}

/* ── pull-down shade (slides from the screen top on a status-bar tap) ── */
.shade{position:absolute;left:0;right:0;top:0;z-index:7;padding:0 12px 18px;color:#fff;font-family:var(--ui);box-sizing:border-box;
  transform:translateY(-102%);transition:transform .36s cubic-bezier(.32,.72,0,1);border-radius:0 0 32px 32px;cursor:pointer}
.shade.open{transform:translateY(0)}
.shade-grab{width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,0.45);margin:14px auto 0}
/* iOS Control Center — Liquid Glass */
body[data-dos="ios"] .shade,body[data-dos="ipados"] .shade{padding-top:48px;
  background:rgba(42,42,50,0.5);backdrop-filter:blur(34px) saturate(1.7);-webkit-backdrop-filter:blur(34px) saturate(1.7);
  border-bottom:1px solid rgba(255,255,255,0.12)}
.cc{display:flex;flex-direction:column;gap:10px}
.cc-top{display:flex;gap:10px}
.cc-conn{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:9px;background:rgba(255,255,255,0.11);border-radius:22px;padding:13px}
.cc-tg{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(130,130,140,0.5);color:#fff;justify-self:center}
.cc-tg.on{background:#34c759}.cc-conn .cc-tg:nth-child(3).on{background:#0a84ff}.cc-conn .cc-tg:nth-child(4).on{background:#0a84ff}
.cc-media{flex:1;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,0.11);border-radius:22px;padding:13px}
.cc-media .cc-note{font-size:19px;line-height:1}.cc-media b{font-size:12px;display:block;font-weight:600}.cc-media i{font-size:10px;opacity:.6;font-style:normal;text-transform:lowercase}
.cc-bot{display:flex;gap:10px}
.cc-vert{position:relative;width:50px;height:118px;border-radius:24px;background:rgba(255,255,255,0.11);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;flex-shrink:0}
.cc-vert i{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,0.85)}
.cc-vert span{position:relative;z-index:2;margin-bottom:12px;font-size:16px;color:#1a1a1a}
.cc-rounds{flex:1;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.cc-round{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,0.11);color:#fff;display:flex;align-items:center;justify-content:center}
/* Android Quick Settings — Material 3 Expressive */
body[data-dos="pixel"] .shade{padding-top:36px;background:rgba(18,18,24,0.66);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3)}
body[data-dos="oneui"] .shade{padding-top:38px;background:rgba(24,24,30,0.72);backdrop-filter:blur(30px) saturate(1.2);-webkit-backdrop-filter:blur(30px) saturate(1.2)}
.qs{display:flex;flex-direction:column;gap:13px}
.qs-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.qs-tile{display:flex;align-items:center;gap:9px;padding:12px 13px;border-radius:24px;background:rgba(255,255,255,0.1);color:#fff;text-align:left}
.qs-tile .qs-g{display:flex;width:20px;justify-content:center;flex-shrink:0}
.qs-tile .qs-l{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-tile.on{background:var(--amber);color:#1a1206}
.qs-bright{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,0.1);border-radius:26px;padding:13px 17px}
.qs-bright>span{font-size:16px}
.qs-bright .qs-track{flex:1;height:11px;border-radius:6px;background:rgba(255,255,255,0.2);overflow:hidden}
.qs-bright .qs-track i{display:block;height:100%;background:#fff}
/* One UI battery pill (% inside, no nub — the One UI hallmark) */
.oneui-batt{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:15px;border-radius:7px;background:rgba(255,255,255,0.22);overflow:hidden;vertical-align:middle}
.oneui-batt i{position:absolute;left:0;top:0;bottom:0;background:currentColor;opacity:.92}
.oneui-batt b{position:relative;z-index:2;font-size:9px;font-weight:700;color:#15110a;line-height:1}
/* Samsung One UI quick panel — big WiFi/BT pills, rounded-square grid, chunky brightness pill */
.ou{display:flex;flex-direction:column;gap:11px}
.ou-pills{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ou-pill{display:flex;align-items:center;gap:10px;padding:15px 16px;border-radius:26px;background:rgba(255,255,255,0.1);color:#fff;text-align:left}
.ou-pill .ou-g{display:flex;width:20px;justify-content:center;flex-shrink:0}
.ou-pill .ou-l{font-size:13px;font-weight:700}
.ou-pill.on{background:#fff;color:#1a1a1a}
.ou-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.ou-sq{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:18px;background:rgba(255,255,255,0.1);color:#fff}
.ou-sq.on{background:#fff;color:#1a1a1a}
.ou-bright{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,0.08);border-radius:28px;padding:6px 16px 6px 14px}
.ou-bright>span{font-size:16px}
.ou-bright .ou-track{flex:1;height:30px;border-radius:16px;background:rgba(255,255,255,0.16);overflow:hidden}
.ou-bright .ou-track i{display:block;height:100%;background:rgba(255,255,255,0.85)}
/* "our" theme segment in the shade — Light / Dark / brand, styled to fit each skin */
.cc-ours{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,0.1);border-radius:22px;padding:8px 8px 8px 16px}
.cc-ours-lbl{font-weight:700;font-size:13px;letter-spacing:.01em;text-transform:lowercase}
.cc-seg{display:flex;gap:3px;background:rgba(0,0,0,0.26);border-radius:14px;padding:3px}
.cc-sg{width:36px;height:28px;border-radius:11px;color:rgba(255,255,255,0.82);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,color .12s}
.cc-sg:hover{background:rgba(255,255,255,0.12)}
.cc-sg.on{background:rgba(255,255,255,0.92);color:#1a1a1a}
.cc-sg.brand.on{background:var(--accent,#e0b34a);color:#16140d}
body[data-dos="pixel"] .cc-ours,body[data-dos="oneui"] .cc-ours{border-radius:18px}

body[data-kind="mobile"] .frame{flex:1;min-height:0;width:100%;border:0;background:#000;display:block}
body[data-kind="mobile"] .loader{position:absolute;inset:11px;display:flex;align-items:center;justify-content:center;border-radius:35px;
  background:var(--pane);color:var(--fg3);font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:8}

/* neutral load spinner — masks the iframe's black default + the React/Babel compile gap.
   Animates on the parent/compositor thread, so it stays smooth while the iframe is busy.
   Themed off the consumer's tokens (accent arc on a faint track). */
.pg-spin{width:30px;height:30px;border-radius:50%;
  border:3px solid var(--line2,rgba(128,128,128,0.18));border-top-color:var(--amber,#888);
  animation:pg-spin .7s linear infinite}
@keyframes pg-spin{to{transform:rotate(360deg)}}

/* ============================================================
   STAGE — DESKTOP kind (simulated OS desktop)
   ============================================================ */
body[data-kind="desktop"] .stage{position:relative;overflow:hidden}
.os-wall{position:absolute;inset:0;z-index:0}
body[data-os="mac"] .os-wall{background:linear-gradient(155deg,#37306b 0%,#5a4c9e 32%,#b65f8e 70%,#f0a06a 105%)}
body[data-os="win"] .os-wall{background:radial-gradient(ellipse 80% 70% at 50% 38%,#1f74cf 0%,#0c356b 55%,#071d3f 100%)}
body[data-os="ubuntu"] .os-wall{background:linear-gradient(150deg,#2b0a1d 0%,#5c2750 48%,#b8401f 100%)}

/* ===== OS CHROME — quality replicas ===== */
.aic{display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,0.3)}
.aic svg{width:58%;height:58%}

/* --- macOS --- */
/* macOS Tahoe menubar: clearer liquid-glass tint + a faint specular bottom edge */
.mac-menubar{position:absolute;top:0;left:0;right:0;height:25px;z-index:4;display:none;align-items:center;gap:18px;padding:0 12px;
  background:rgba(34,32,44,0.36);backdrop-filter:blur(22px) saturate(185%);-webkit-backdrop-filter:blur(22px) saturate(185%);
  box-shadow:inset 0 -0.5px 0 rgba(255,255,255,0.06);font-size:13px;color:#fff}
body[data-os="mac"] .mac-menubar{display:flex}
.mac-menubar .logo svg{width:14px;height:14px;display:block}
.mac-menubar .app{font-weight:700}
.mac-menubar .mi{font-weight:400;opacity:.92}
.mac-menubar .sp{flex:1}
.mac-menubar .stat{display:flex;align-items:center;gap:13px}
.mac-menubar .stat svg{width:16px;height:15px;opacity:.95}
.mac-dock{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:4;display:none;align-items:center;gap:8px;
  padding:7px 9px;border-radius:20px;background:rgba(150,150,170,0.22);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.22);box-shadow:0 12px 34px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.25)}
body[data-os="mac"] .mac-dock{display:flex;align-items:flex-end}
.mac-dock .aic{width:46px;height:46px;border-radius:12px;transition:width .14s ease,height .14s ease}
.mac-dock .sep{width:1px;height:40px;background:rgba(255,255,255,0.28);margin:0 2px}
.mac-dock .run::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.85)}

/* --- Windows 11 --- */
.win-desk{position:absolute;top:16px;left:14px;z-index:1;display:none;flex-direction:column;gap:18px}
body[data-os="win"] .win-desk{display:flex}
.win-desk .di{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;text-align:center;font-size:11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.8)}
.win-desk .di .aic{width:34px;height:34px;border-radius:7px}
.win-taskbar{position:absolute;left:0;right:0;bottom:0;height:46px;z-index:4;display:none;align-items:center;padding:0 8px;
  background:rgba(36,38,48,0.72);backdrop-filter:blur(28px) saturate(150%);border-top:1px solid rgba(255,255,255,0.06)}
body[data-os="win"] .win-taskbar{display:flex}
.wt-side{flex:1}
.wt-apps{display:flex;align-items:center;gap:6px}
.wt-right{flex:1;display:flex;align-items:center;justify-content:flex-end}
.win-taskbar .ti{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative;cursor:default}
.win-taskbar .ti:hover{background:rgba(255,255,255,0.08)}
.win-taskbar .ti .aic{width:24px;height:24px;border-radius:6px;box-shadow:none}
.win-taskbar .ti.glyph svg{width:22px;height:22px;color:#dfe3ea}
.win-taskbar .ti.run::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:16px;height:3px;border-radius:2px;background:#5aa9ff}
.win-tray{position:relative;display:flex;align-items:center;gap:10px;padding-left:14px;color:#e6e9ef;font-size:12px}
.win-tray::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:1px;background:rgba(255,255,255,0.16)}
.win-tray svg{width:15px;height:15px}
.win-tray .tray-chev{width:13px;height:13px}
.win-tray .tray-lang{font-size:11px;font-weight:600;letter-spacing:.02em}
.win-tray .clk{text-align:right;line-height:1.3;font-size:11px}

/* --- Ubuntu (GNOME) --- */
.ub-top{position:absolute;top:0;left:0;right:0;height:26px;z-index:4;display:none;align-items:center;padding:0 12px;
  background:#1c1a1b;font-size:12.5px;color:#fff}
body[data-os="ubuntu"] .ub-top{display:flex}
.ub-top .act{font-weight:500}
.ub-top .clk{position:absolute;left:50%;transform:translateX(-50%);font-weight:600}
.ub-top .sp{flex:1}
.ub-top .tray{display:flex;align-items:center;gap:9px}
.ub-top .tray svg{width:15px;height:14px}
.ub-dock{position:absolute;left:0;top:26px;bottom:0;width:58px;z-index:4;display:none;flex-direction:column;align-items:center;gap:9px;padding:9px 0;
  background:rgba(28,16,22,0.82);backdrop-filter:blur(12px);border-right:1px solid rgba(255,255,255,0.06)}
body[data-os="ubuntu"] .ub-dock{display:flex}
.ub-dock .aic{width:40px;height:40px;border-radius:10px}
.ub-dock .run::before{content:'';position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:2px;background:#e95420}
.ub-dock .grid{margin-top:auto;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.13);display:grid;grid-template-columns:repeat(3,4px);grid-template-rows:repeat(3,4px);gap:3px;align-content:center;justify-content:center}
.ub-dock .grid i{width:4px;height:4px;border-radius:50%;background:#fff}

.os-canvas{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center}
body[data-os="mac"] .os-canvas{inset:29px 16px 68px}
body[data-os="win"] .os-canvas{inset:16px 16px 56px}
body[data-os="ubuntu"] .os-canvas{inset:30px 16px 16px 70px}
/* fullscreen (maximize) — fill everything EXCEPT the OS control plane (which stays):
   mac menubar (top) stays + dock (launcher) hidden; win taskbar (bottom) stays;
   ubuntu top bar stays + left dock hidden. No empty space anywhere else. */
body[data-winmax] .mac-dock,body[data-winmax] .ub-dock{display:none}
/* the canvas inset must EXACTLY equal the control-plane height so the fullscreen window
   touches it with zero gap: mac menubar 25px, ubuntu top bar 26px, win taskbar 46px */
body[data-winmax][data-os="mac"] .os-canvas{inset:25px 0 0 0}
body[data-winmax][data-os="win"] .os-canvas{inset:0 0 46px 0}
body[data-winmax][data-os="ubuntu"] .os-canvas{inset:26px 0 0 0}
/* fullscreen window: SQUARE corners + no shadow so it fills the screen with zero desktop
   leak at the corners (override the rounded web-chrome rules with !important) */
body[data-winmax] .winwrap,body[data-winmax] .systl,body[data-winmax] .window,body[data-winmax] .web-bar-d{border-radius:0 !important}
body[data-winmax] .winwrap{box-shadow:none}

.winwrap{position:relative;flex-shrink:0;transform-origin:center center;box-shadow:0 30px 90px rgba(0,0,0,0.55);transition:transform .12s ease,opacity .22s ease}
/* 8 resize handles — shown only on a resizable desktop window (web surfaces / resizable:true apps) */
.wre{position:absolute;z-index:6;display:none;touch-action:none}
body[data-kind="desktop"][data-resizable="1"] .wre{display:block}
.wre.n{top:-4px;left:12px;right:12px;height:9px;cursor:ns-resize}
.wre.s{bottom:-4px;left:12px;right:12px;height:9px;cursor:ns-resize}
.wre.e{top:12px;bottom:12px;right:-4px;width:9px;cursor:ew-resize}
.wre.w{top:12px;bottom:12px;left:-4px;width:9px;cursor:ew-resize}
.wre.nw{top:-5px;left:-5px;width:16px;height:16px;cursor:nwse-resize}
.wre.ne{top:-5px;right:-5px;width:16px;height:16px;cursor:nesw-resize}
.wre.se{bottom:-5px;right:-5px;width:16px;height:16px;cursor:nwse-resize}
.wre.sw{bottom:-5px;left:-5px;width:16px;height:16px;cursor:nesw-resize}
/* ── L1 menu / tray flyouts (glassmorphism, macos-web style) ── */
.os-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:30;transition:opacity .08s linear}
.pg-fly{position:fixed;z-index:60;min-width:200px;border-radius:12px;padding:6px;
  background:rgba(38,38,44,0.82);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 12px 40px rgba(0,0,0,0.5),inset 0 0 0 .5px rgba(255,255,255,0.14);color:#f2f2f5;font-size:13px;
  animation:flyin .12s ease}
@keyframes flyin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fly-menu{display:flex;flex-direction:column;gap:1px}
.fly-item{padding:5px 12px;border-radius:6px;cursor:default;white-space:nowrap}
.fly-item:hover{background:#3a6df0;color:#fff}
.fly-sep{height:1px;margin:5px 8px;background:rgba(255,255,255,0.14)}
.fly-cal{padding:6px 8px 10px;min-width:232px}
.cal-h{font-weight:600;padding:4px 4px 10px;font-size:14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-wd{font-size:10px;opacity:.5;padding-bottom:4px}
.cal-d{padding:5px 0;border-radius:50%;font-size:12px}
.cal-d:hover{background:rgba(255,255,255,0.12)}
.cal-d.today{background:#ff5f56;color:#fff;font-weight:700}
.fly-cc{display:flex;flex-direction:column;gap:8px;min-width:244px;padding:6px}
.fly-head{font-weight:600;padding:2px 4px 4px}
.fly-note{font-size:12px;opacity:.7;padding:4px 6px}
.fly-net{font-size:12px;border-radius:7px;cursor:default;opacity:.92;display:flex;justify-content:space-between;padding:5px 8px}
.fly-net:hover{background:rgba(255,255,255,0.1)}.fly-net.on{color:#fff}.fly-net b{color:#3a9bff}
.fly-tg{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;background:rgba(255,255,255,0.08);color:#f2f2f5;text-align:left;font-size:13px;cursor:pointer}
.fly-tg .ft-dot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,0.28);flex-shrink:0;transition:background .12s}
.fly-tg.on{background:rgba(58,109,240,0.32)}.fly-tg.on .ft-dot{background:#3a8bff;box-shadow:0 0 0 3px rgba(58,139,255,0.25)}
.fly-sl{display:flex;flex-direction:column;gap:5px;padding:4px 6px;font-size:12px}
.fly-sl input[type=range]{width:100%;accent-color:#3a8bff;cursor:pointer}
.mac-menubar .mi.fly-on,.mac-menubar .logo.fly-on{background:rgba(255,255,255,0.22);border-radius:5px}
.win-tray .fly-on,.ub-top .fly-on{background:rgba(255,255,255,0.14);border-radius:5px}
.win-taskbar .ti.fly-on,.win-tray svg.fly-on{background:rgba(255,255,255,0.14);border-radius:6px}
/* Windows Start menu / GNOME overview flyout */
.fly-start{min-width:300px;max-width:344px;padding:6px}
.fly-search{background:rgba(0,0,0,0.26);border:1px solid rgba(255,255,255,0.12);border-radius:18px;padding:7px 14px;font-size:12px;color:rgba(255,255,255,0.6);margin:4px 4px 12px}
.fly-start-lbl{font-size:12px;font-weight:600;padding:0 6px 8px;opacity:.85}
.fly-start-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.fly-app{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:8px;font-size:10.5px;text-align:center;cursor:default}
.fly-app:hover{background:rgba(255,255,255,0.1)}
.fa-ic{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#4aa3ff,#2b6fd6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;text-transform:uppercase;flex-shrink:0}
.fly-start-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:8px 6px 4px;border-top:1px solid rgba(255,255,255,0.12)}
.fly-user{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}
.fly-user .fa-ic{width:26px;height:26px;border-radius:50%;background:var(--accent,#e0b34a);color:#16140d;font-size:12px}
.fly-pwr{width:30px;height:30px;border-radius:8px;color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.fly-pwr:hover{background:rgba(255,255,255,0.12)}
.window{width:420px;height:820px;background:#0a0a0c;overflow:hidden;border-radius:14px}
body[data-edges="round"] .window{border-radius:14px}
body[data-edges="sharp"] .window{border-radius:0}
body[data-chrome="system"][data-edges="round"] .window{border-radius:0 0 12px 12px}
body[data-chrome="system"][data-edges="sharp"] .window{border-radius:0}
body[data-kind="desktop"] .frame{display:block;border:0;background:#000;width:100%;height:100%}
body[data-kind="desktop"] .loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--pane);color:var(--fg3);font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .15s}
/* MUST out-specify the kind-scoped `body[data-kind=…] .loader{opacity:0}` rule
   (0,0,2,1) — a bare `.loader.on` (0,0,2,0) loses to it and the overlay stays
   invisible. `body[data-kind] .loader.on` is (0,0,3,1) → wins on both kinds.
   Appears INSTANTLY (mask the switch); the fade-out lives on the base rule. */
body[data-kind] .loader.on{opacity:1;transition:none}
/* drag handle over our titlebar (centre, leaves M + window buttons clickable) */
.dragstrip{position:absolute;top:0;left:54px;right:66px;height:40px;z-index:5;cursor:grab;display:none}
/* dragstrip retired — the engine titlebar (.systl) is always shown and draggable in both chromes */
.dragstrip:active{cursor:grabbing}

/* ── SYSTEM TITLEBAR (native OS decoration) ── */
.systl{display:none;align-items:center;gap:8px;height:30px;padding:0 8px;position:relative;
  background:#2b2b30;border-radius:12px 12px 0 0;cursor:grab;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.systl:active{cursor:grabbing}
body[data-chrome="system"] .systl{display:flex}
.systl-t{position:absolute;left:0;right:0;text-align:center;font-size:12px;color:#d2d2d8;pointer-events:none}
.systl-m{position:relative;z-index:2;color:var(--amber);font-weight:700;font-size:15px;line-height:1;padding:2px 7px;border-radius:6px}
.systl-m:hover{background:rgba(255,255,255,0.12)}
.tl{display:none;align-items:center;gap:8px;z-index:2}
.mac-tl .d{width:12px;height:12px;border-radius:50%}
.mac-tl .r{background:#ff5f57}.mac-tl .y{background:#febc2e}.mac-tl .g{background:#28c840}
.wb{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#d2d2d8;font-size:13px;line-height:1}
.wb:hover{background:rgba(255,255,255,0.12)}
/* macOS Tahoe "liquid glass": translucent frosted titlebar + a thin specular top edge */
body[data-os="mac"] .systl{height:28px;background:rgba(48,48,54,0.52);
  backdrop-filter:blur(26px) saturate(185%);-webkit-backdrop-filter:blur(26px) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16)}
body[data-os="mac"] .mac-tl{display:flex}
body[data-os="mac"] .systl-m{margin-left:auto}
/* Windows 11 Mica: subtle desktop-tinted translucent material (more opaque than Acrylic) */
body[data-os="win"] .systl{background:rgba(32,32,38,0.80);
  backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%);
  border-radius:8px 8px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
body[data-os="win"] .systl-t{text-align:left;left:42px}
body[data-os="win"] .winub-tl{display:flex;margin-left:auto;gap:0}
body[data-os="win"] .wb.cl:hover{background:#e81123;color:#fff}
body[data-os="ubuntu"] .systl{height:34px;background:#3d3846;border-radius:11px 11px 0 0}
body[data-os="ubuntu"] .winub-tl{display:flex;margin-left:auto;gap:7px;padding-right:4px}
body[data-os="ubuntu"] .wb{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.13)}
body[data-os="ubuntu"] .wb.cl{background:#e95420;color:#fff}
body[data-edges="sharp"] .systl{border-radius:0}

/* ── interactivity: every chrome control reacts to hover/press (functional or not) ── */
.aic{cursor:pointer;transition:transform .12s ease}
.ub-dock .aic:hover{transform:translateY(-4px) scale(1.06)}
.mac-dock .aic:active,.ub-dock .aic:active{transform:scale(.9)}
.win-taskbar .ti{cursor:pointer;transition:transform .1s ease}
.win-taskbar .ti:active{transform:scale(.88)}
.win-desk .di{cursor:pointer}.win-desk .di:hover .aic{transform:scale(1.07)}.win-desk .di:active .aic{transform:scale(.92)}
.mac-menubar .mi,.mac-menubar .app{cursor:pointer;padding:1px 7px;border-radius:5px}
.mac-menubar .mi:hover,.mac-menubar .app:hover{background:rgba(255,255,255,0.18)}
.mac-menubar .logo,.mac-menubar .stat svg,.win-tray svg,.ub-top .tray svg{cursor:pointer}
.ub-top .act{cursor:pointer;padding:2px 8px;border-radius:5px}.ub-top .act:hover{background:rgba(255,255,255,0.14)}
.mac-tl .d{cursor:pointer;transition:filter .1s}.mac-tl:hover .d{filter:brightness(1.12)}.mac-tl .d:active{filter:brightness(.8)}
/* window minimized → its dock/taskbar icon is highlighted (the window lives there now) */
body[data-winstate="min"] .mac-dock .run{box-shadow:inset 0 0 0 2px rgba(255,255,255,0.55);background:rgba(255,255,255,0.14)}
body[data-winstate="min"] .mac-dock .run::after{width:5px;height:5px;background:#fff}
body[data-winstate="min"] .win-taskbar .ti.run{background:rgba(255,255,255,0.16)}
body[data-winstate="min"] .win-taskbar .ti.run::after{width:26px;background:#7cc0ff}
body[data-winstate="min"] .ub-dock .run::before{height:26px;background:#ff7a45}
/* window closed → no running indicator at all */
body[data-winstate="closed"] .mac-dock .run::after,body[data-winstate="closed"] .win-taskbar .ti.run::after,body[data-winstate="closed"] .ub-dock .run::before{opacity:0}

/* ============================================================
   SIDEBAR (desktop consumer chrome)
   ============================================================ */
.side{flex-direction:column;gap:15px;padding:18px 16px;background:var(--pane);border-right:1px solid var(--line);overflow-y:auto}
.side-brand{display:flex;align-items:baseline;gap:8px;min-width:0}
.side-brand .z3{font-weight:600;font-size:22px;line-height:1;color:var(--fg);text-transform:lowercase;transition:color .15s}
.side-brand .z3 b{color:var(--amber)} .side-brand .z3:hover{color:var(--amber)}
.side-brand .up{font-size:20px;color:var(--fg3);transition:color .15s,transform .15s}
.side-brand .up:hover{color:var(--amber);transform:translateX(-3px)}
.side-sub{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);margin-top:-9px}
.s-group{display:flex;flex-direction:column;gap:6px}
.s-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);margin-bottom:2px}
.s-row{display:flex;gap:6px}
.s-btn{flex:1;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;border-radius:var(--ctrl-radius);
  border:var(--ctrl-bw) solid var(--line2);background:var(--btn);color:var(--fg2);cursor:pointer;text-align:left;transition:.14s;white-space:nowrap}
.s-btn:hover{border-color:var(--fg3);color:var(--fg);transform:var(--ctrl-lift)}
.s-btn.on{border-color:var(--on-bd);color:var(--on-fg);background:var(--on-bg);box-shadow:var(--ctrl-shadow)}
.s-btn .nm{font-family:var(--ctrl-font);font-weight:var(--ctrl-weight);font-size:13px;text-transform:var(--ctrl-tt);letter-spacing:var(--ctrl-track)}
.s-btn .tg{font-family:var(--mono);font-size:9px;color:var(--fg3)}
.s-btn.on .tg{color:var(--on-fg);opacity:.85}
.s-btn.mini{justify-content:center;font-family:var(--ctrl-font);font-weight:var(--ctrl-weight);font-size:12px;padding:8px 6px;text-transform:var(--ctrl-tt);letter-spacing:var(--ctrl-track)}
.s-reload{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:auto;padding:11px;border-radius:var(--ctrl-radius);
  border:var(--ctrl-bw) solid var(--line2);color:var(--fg2);transition:.14s;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.s-reload:hover{border-color:var(--amber);color:var(--amber)} .s-reload svg{width:14px;height:14px}
/* ad-hoc URL field (mobile-preview style "open any URL") */
.s-url{display:flex;gap:6px}
.s-url input{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid var(--line2);background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:11px}
.s-url input:focus{outline:none;border-color:var(--amber)}
.s-url button{padding:0 12px;border-radius:8px;border:1px solid var(--line2);color:var(--fg2);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.s-url button:hover{border-color:var(--amber);color:var(--amber)}

/* ============================================================
   BOTTOM CONTROL PANEL (mobile consumer chrome)
   ============================================================ */
.bar{position:relative;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--pane);border-top:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 auto;overflow:hidden}
/* nav order: [project] ← [zeng3ld]. The engine (fitNav) collapses the project label to its
   short form first, then zeng3ld → its short, when the row overflows its box. */
.side-brand{overflow:hidden}
/* line-height >1 so the wordmark glyphs (descenders) fit the line box — the nav clips
   horizontally for fitNav, but must never clip vertically. */
.z3-main,.z3-local,.up{flex:0 0 auto;white-space:nowrap;line-height:1.3}
.side-brand,.nav{align-items:center}
.z3-main{color:var(--fg2)} .z3-main:hover{color:var(--amber)}
.nm-short{display:none}
.nc1 .z3-local .nm-full{display:none} .nc1 .z3-local .nm-short{display:inline}
.nc2 .z3-main .nm-full{display:none}  .nc2 .z3-main .nm-short{display:inline}
.z3{font-weight:600;font-size:20px;line-height:1;letter-spacing:-0.01em;color:var(--fg);text-transform:lowercase;transition:color .15s}
.z3 b{color:var(--amber);font-weight:600} .z3:hover{color:var(--amber)}
.up{font-weight:500;font-size:22px;line-height:1;color:var(--fg3);transition:color .15s,transform .15s}
.up:hover{color:var(--amber);transform:translateX(-3px)}
.ctrls{display:flex;align-items:center;gap:8px}
.ctl-wrap{position:relative;flex-shrink:0}
.ctl{height:46px;display:flex;flex-direction:column;justify-content:center;gap:1px;align-items:flex-start;
  padding:0 13px;min-width:88px;border-radius:var(--ctrl-radius);border:var(--ctrl-bw) solid var(--line2);background:var(--btn);
  color:var(--fg2);transition:.14s;white-space:nowrap;box-shadow:var(--ctrl-shadow)}
.ctl .lab{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.ctl .cur{font-family:var(--ctrl-font);font-weight:var(--ctrl-weight);font-size:13px;letter-spacing:var(--ctrl-track);text-transform:var(--ctrl-tt);color:var(--amber)}
.ctl:hover{border-color:var(--fg3)} .ctl.active{border-color:var(--amber)}
.reload{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;border-radius:var(--ctrl-radius);border:var(--ctrl-bw) solid var(--line2);color:var(--fg2);transition:.14s;box-shadow:var(--ctrl-shadow)}
.reload:hover{border-color:var(--amber);color:var(--amber)} .reload svg{width:16px;height:16px}

/* ── engine debug terminal ── */
.term-btn{font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:700;letter-spacing:-1px}
.term-btn.on{border-color:var(--amber);color:var(--amber);background:rgba(0,0,0,0.2)}
/* per-OS dock/taskbar terminal app icon — amber ring while the terminal is open */
.aic.term-app.on,.ti.term-app.on .aic{box-shadow:0 0 0 2px #f0b232,0 3px 12px rgba(240,178,50,0.5)}
.pg-term{position:absolute;left:0;right:0;bottom:0;height:42%;min-height:170px;z-index:45;
  display:flex;flex-direction:column;background:#0b0d12;border-top:1px solid #1d2330;
  box-shadow:0 -14px 44px rgba(0,0,0,0.55);transform:translateY(101%);
  transition:transform .22s cubic-bezier(.4,0,.2,1);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pg-term.open{transform:translateY(0)}
.pt-head{display:flex;align-items:center;gap:8px;padding:7px 11px;background:#11141b;border-bottom:1px solid #1d2330;
  font-size:11px;color:#8b93a7;flex-shrink:0;user-select:none}
.pt-dot{width:8px;height:8px;border-radius:50%;background:#2ec27e;box-shadow:0 0 8px #2ec27e}
.pt-title{color:#cdd3e0;font-weight:600;letter-spacing:0.04em}
.pt-meta{color:#5a6273;font-size:10px}
.pt-sp{flex:1}
.pt-b{font:inherit;font-size:10px;color:#8b93a7;background:#1a1f2b;border:1px solid #262d3c;border-radius:4px;padding:3px 9px;cursor:pointer;transition:.12s}
.pt-b:hover{color:#cdd3e0;border-color:#3a4456}
.pt-b.on{color:#0b0d12;background:#f0b232;border-color:#f0b232}
.pt-body{flex:1;overflow-y:auto;padding:6px 0;font-size:11px;line-height:1.55}
.pt-body::-webkit-scrollbar{width:12px;height:12px}
.pt-body::-webkit-scrollbar-track{background:transparent}
.pt-body::-webkit-scrollbar-thumb{background:#2a3142;border:3px solid transparent;border-radius:9px;background-clip:padding-box}
.pt-body::-webkit-scrollbar{width:9px}
.pt-body::-webkit-scrollbar-thumb{background:#2a3142;border-radius:5px;border:2px solid transparent;background-clip:padding-box}
.pt-line{display:flex;gap:9px;padding:1px 12px;white-space:pre-wrap;word-break:break-word}
.pt-line:hover{background:rgba(255,255,255,0.03)}
.pt-t{color:#4d5668;flex-shrink:0;font-variant-numeric:tabular-nums}
.pt-c{flex-shrink:0;width:48px;text-align:center;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:1px 0;color:#0b0d12;align-self:flex-start;margin-top:1px}
.pt-c-load{background:#f0b232}.pt-c-drag{background:#3bc9db}.pt-c-state{background:#b197fc}
.pt-c-win{background:#69db7c}.pt-c-resize{background:#4dabf7}.pt-c-boot{background:#5c6470}.pt-c-err{background:#ff6b6b}
.pt-c-console{background:#74c0fc}.pt-c-info{background:#74c0fc}.pt-c-warn{background:#ffd43b}.pt-c-net{background:#63e6be}.pt-c-input{background:#ffa94d}
.pt-m{color:#c7cdda;flex:1}
/* live observe strip (engine state) + api peek button */
.pt-strip{flex-shrink:0;padding:4px 12px;background:#0e1118;border-bottom:1px solid #1d2330;color:#8b93a7;font-size:10px;letter-spacing:0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace}
/* debug-mode toggle chips in the terminal header */
.pt-modes{display:flex;align-items:center;gap:5px;margin-left:6px}
.pt-mlab{color:#4d5668;font-size:9px;text-transform:uppercase;letter-spacing:0.1em;margin-right:1px}
.pt-mode{font:inherit;font-size:9.5px;color:#5a6273;background:#15181f;border:1px solid #262d3c;border-radius:10px;padding:2px 9px;cursor:pointer;transition:.12s}
.pt-mode:hover{color:#aeb6c6;border-color:#3a4456}
.pt-mode.on{color:#0b0d12;font-weight:700;border-color:transparent}
.pt-mode.on[data-mode="events"]{background:#b197fc}
.pt-mode.on[data-mode="console"]{background:#74c0fc}
.pt-mode.on[data-mode="net"]{background:#63e6be}
.pt-mode.on[data-mode="input"]{background:#ffa94d}
.popup{position:absolute;bottom:calc(100% + 17px);right:0;min-width:200px;background:var(--pane);border:var(--ctrl-bw) solid var(--line2);border-radius:var(--ctrl-radius);padding:6px;
  display:none;flex-direction:column;gap:2px;z-index:30;box-shadow:0 12px 36px rgba(0,0,0,0.55)}
.popup.open{display:flex}
.opt{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 12px;border-radius:var(--ctrl-radius);color:var(--fg2);transition:.12s;text-align:left;white-space:nowrap}
.opt .on-name{font-family:var(--ctrl-font);font-weight:var(--ctrl-weight);font-size:13px;text-transform:var(--ctrl-tt);letter-spacing:var(--ctrl-track)} .opt .on-sz{font-family:var(--mono);font-size:10px;color:var(--fg3)}
.opt:hover{background:var(--btn-h);color:var(--fg)}
.opt.on{color:var(--on-fg);background:var(--on-bg)} .opt.on .on-sz{color:var(--on-fg);opacity:.85}

/* ── configurator popup: one labelled grid of compact option chips per axis ── */
/* the config popup carries many chips → pin it to the viewport (not the leftmost cfg
   button, which would shove it off the left edge) and cap its width to the available
   space; the chip grid then auto-fills FEWER per row on a narrow layout. */
.cfg-pop{position:fixed;left:12px;right:auto;bottom:calc(var(--pg-bar-h,65px) + 9px);
  width:min(420px,calc(100vw - 24px));max-width:calc(100vw - 24px);
  flex-direction:column;gap:13px;max-height:calc(100vh - var(--pg-bar-h,65px) - 24px);overflow:auto;padding:13px}
/* grouped config tree: collapsible accordion sections */
.cfg-group{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);border-radius:calc(var(--ctrl-radius,8px) * .7);padding:10px}
.cfg-group-hd{all:unset;cursor:pointer;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2);display:flex;align-items:center;gap:6px}
.cfg-group-hd::before{content:'▾';font-size:9px;color:var(--fg3);transition:transform .14s}
.cfg-group.collapsed .cfg-group-hd::before{transform:rotate(-90deg)}
.cfg-group-body{display:flex;flex-direction:column;gap:11px}
.cfg-group.collapsed .cfg-group-body{display:none}
/* range widget: slider with a live value read-out in the axis label */
.cfg-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:var(--line2);outline:none;cursor:pointer;margin:4px 0}
.cfg-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--amber);border:2px solid var(--bg);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.4)}
.cfg-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--amber);border:2px solid var(--bg);cursor:pointer}
/* color widget: native picker + hex read-out */
.cfg-color{display:flex;align-items:center;gap:9px}
.cfg-color input[type=color]{-webkit-appearance:none;appearance:none;width:38px;height:30px;padding:0;border:1px solid var(--line2);border-radius:calc(var(--ctrl-radius,8px) * .55);background:transparent;cursor:pointer}
.cfg-color input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.cfg-color input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--ctrl-radius,8px) * .4)}
.cfg-color-hex{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--fg2);text-transform:uppercase}
/* toggle widget: horizontal chip segment (2–4 discrete options) */
.cfg-seg{display:flex;gap:4px;background:var(--btn,rgba(255,255,255,0.04));border-radius:calc(var(--ctrl-radius,8px) * .55);padding:3px}
.cfg-seg .cfg-opt{flex:1;min-height:26px;border-color:transparent;background:transparent}
.cfg-seg .cfg-opt.on{border-color:var(--on-bd,var(--amber))}
.cfg-axis{display:flex;flex-direction:column;gap:7px}
.cfg-axis-lab{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);display:flex;justify-content:space-between;align-items:center}
.cfg-axis-lab b{color:var(--amber);font-weight:600}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:5px}
.cfg-opt{display:flex;align-items:center;justify-content:center;min-height:30px;padding:5px 6px;border:var(--ctrl-bw,1px) solid var(--line2);border-radius:calc(var(--ctrl-radius,8px) * .55);background:var(--btn,transparent);color:var(--fg2);font-family:var(--ctrl-font);font-weight:var(--ctrl-weight);font-size:11px;letter-spacing:var(--ctrl-track);text-transform:var(--ctrl-tt);cursor:pointer;transition:.12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-opt:hover{border-color:var(--fg3);color:var(--fg)}
.cfg-opt.on{background:var(--on-bg);color:var(--on-fg);border-color:var(--on-bd,var(--amber))}
/* config header: live changed-count badge + randomize + reset */
.cfg-head{display:flex;align-items:center;gap:6px;padding-bottom:11px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.cfg-count{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);margin-right:auto}
.cfg-count.on{color:var(--amber)}
.cfg-h{font-family:var(--mono);font-size:10px;letter-spacing:.04em;padding:5px 10px;border:1px solid var(--line2);border-radius:calc(var(--ctrl-radius,8px) * .5);background:var(--btn,transparent);color:var(--fg2);cursor:pointer;transition:.12s}
.cfg-h:hover{border-color:var(--amber);color:var(--fg)}
/* mode segment (theme/appearance base axis): a touch taller + bolder than a plain toggle */
.cfg-modes{padding:4px}
.cfg-modes .cfg-opt{min-height:30px;font-weight:600;letter-spacing:.04em;text-transform:none}
/* export footer: copy the live token set as CSS / DTCG / link */
.cfg-foot{display:flex;align-items:center;gap:6px;padding-top:11px;margin-top:2px;border-top:1px solid var(--line)}
.cfg-foot-lbl{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);margin-right:auto}
.cfg-x{font-family:var(--mono);font-size:10px;letter-spacing:.04em;padding:5px 10px;border:1px solid var(--line2);border-radius:calc(var(--ctrl-radius,8px) * .5);background:var(--btn,transparent);color:var(--fg2);cursor:pointer;transition:.12s}
.cfg-x:hover{border-color:var(--amber);color:var(--fg)}
.cfg-x.ok{background:var(--on-bg,rgba(244,205,99,0.14));color:var(--on-fg,var(--amber));border-color:var(--on-bd,var(--amber))}
.pop-seg{display:flex;gap:8px;padding:8px 6px 4px}
.segwrap{flex:1}
.seg-lab{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);margin:0 0 4px 2px}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:var(--ctrl-radius);padding:2px;gap:2px}
.seg-b{flex:1;padding:7px 4px;border-radius:6px;font-size:12px;font-weight:600;color:var(--fg2);text-align:center;transition:.12s}
.seg-b.on{background:var(--amber);color:var(--accent-ink)}
.pop-url{display:flex;gap:6px;padding:6px}
.pop-url input{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid var(--line2);background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:11px}
.pop-url input:focus{outline:none;border-color:var(--amber)}
.pop-url button{padding:0 12px;border-radius:8px;border:1px solid var(--line2);color:var(--fg2);font-family:var(--mono);font-size:10px;text-transform:uppercase}

/* ============================================================
   WEB SURFACE — browser chrome overlay
   Hidden by default; shown only when body[data-surface="web"].
   Additive: does NOT affect app/desktop/mobile layout when hidden
   (display:none consumes zero space).
   ============================================================ */
.web-bar{display:none}

/* mobile browser bar: slim row under the status bar, above the iframe */
body[data-surface="web"] .web-bar-m{
  display:flex;align-items:center;gap:4px;flex-shrink:0;
  height:34px;padding:0 8px;
  background:var(--pane);border-bottom:1px solid var(--line);
  z-index:3}

/* desktop browser toolbar: full-width row inside .winwrap, above .window */
body[data-surface="web"] .web-bar-d{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  height:38px;padding:0 10px;
  background:var(--pane);border-bottom:1px solid var(--line);
  z-index:3}

/* nav buttons */
.wbb{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;border-radius:6px;
  font-size:18px;line-height:1;color:var(--fg2);
  background:none;border:none;cursor:pointer;transition:.12s}
.web-bar-m .wbb{width:24px;height:24px;font-size:16px}
.wbb:hover{background:var(--btn-h);color:var(--fg)}
.wbb:active{transform:scale(.88)}

/* address pill */
.wb-addr{flex:1;min-width:0;
  padding:4px 10px;border-radius:12px;
  background:var(--bg);border:1px solid var(--line2);
  font-family:var(--mono);font-size:10px;color:var(--fg3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  user-select:none;-webkit-user-select:none}
.web-bar-m .wb-addr{font-size:9px;padding:3px 8px;border-radius:10px;text-align:center}
/* mirror the ‹ › ⟳ cluster on the right so the address pill sits symmetric/centred,
   exactly like the desktop bar — the right empty rail == the left nav cluster width */
.web-bar-m .wb-rail{flex-shrink:0;width:calc(24px*3 + 8px)}

/* picker type badge — every surface marked app | web */
.opt-type{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  flex-shrink:0;margin-left:auto;padding:1px 5px;border-radius:4px;border:1px solid transparent;line-height:1.5}
.opt-type.tweb{color:var(--amber);border-color:var(--amber);opacity:.95}
.opt-type.tapp{color:var(--fg3);border-color:var(--line2);opacity:.85}

/* desktop web: always draw the window frame — a browser can't be frameless. The system
   titlebar (traffic lights) is the rounded top; the browser toolbar sits flush below it
   (square, no corner gap); the content squares its top + rounds its bottom. Hide the
   app-menu glyph + drag-strip (the titlebar itself drags). ‹ › ⟳ stay above any overlay. */
body[data-surface="web"][data-kind="desktop"] .systl{display:flex;border-radius:12px 12px 0 0;height:42px;padding:0 9px;gap:6px}
body[data-surface="web"][data-kind="desktop"] .systl-m{display:none}
body[data-surface="web"][data-kind="desktop"] .systl-t{display:none}
body[data-surface="web"][data-kind="desktop"] .dragstrip{display:none}
/* the browser chrome is ONE bar — window controls + nav + address together (Safari-style),
   no separate page-title row above the URL */
.systl-url{display:none;flex:1;min-width:0;align-items:center;gap:3px;height:100%}
body[data-surface="web"][data-kind="desktop"] .systl-url{display:flex}
body[data-surface="web"][data-kind="desktop"] .systl .mac-tl{margin-right:4px}
.systl-url .wb-addr{height:28px;line-height:28px;display:block;margin-left:4px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* OUR chrome single bar = Safari look: the URL pill is CENTERED in the window (not stretched
   edge-to-edge). Absolutely centred over the full titlebar, so the empty gap on the right
   mirrors the left cluster (traffic lights + ‹ › ⟳). The nav buttons stay in flow on the left. */
body[data-chrome="our"][data-surface="web"][data-kind="desktop"] .systl-url .wb-addr{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  flex:0 0 auto;width:clamp(160px,40%,420px);margin-left:0;text-align:center}

/* ── SYSTEM chrome on a web surface = realistic OS-decorated browser window: the OS titlebar
   (traffic lights + window title) is ROW 1; the browser toolbar (nav + URL) is a SEPARATE
   ROW 2 flush below — they must NOT be merged into one bar (that single Safari bar is the
   "our" branded look). The unified-bar rules above are gated to chrome="our" by specificity. */
body[data-chrome="system"][data-surface="web"][data-kind="desktop"] .systl{flex-wrap:wrap;height:auto;padding:0;align-content:flex-start}
/* row 1 — OS titlebar: window title shown + centered (overrides the web "hide title" rule) */
body[data-chrome="system"][data-surface="web"][data-kind="desktop"] .systl-t{display:block;position:static;order:2;flex:1;min-width:0;text-align:center;line-height:30px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body[data-chrome="system"][data-os="mac"][data-surface="web"][data-kind="desktop"] .systl-t{line-height:28px}
body[data-chrome="system"][data-os="ubuntu"][data-surface="web"][data-kind="desktop"] .systl-t{line-height:34px}
body[data-chrome="system"][data-surface="web"][data-kind="desktop"] .systl .mac-tl{order:1;height:30px;padding:0 10px;margin-right:0}
body[data-chrome="system"][data-os="mac"][data-surface="web"][data-kind="desktop"] .systl .mac-tl{height:28px}
body[data-chrome="system"][data-surface="web"][data-kind="desktop"] .systl .winub-tl{order:3}
/* row 2 — browser toolbar: full width below the titlebar, square top, own surface + divider */
body[data-chrome="system"][data-surface="web"][data-kind="desktop"] .systl-url{order:4;flex-basis:100%;height:40px;padding:0 9px;border-top:1px solid var(--dev-chrome-line);background:var(--dev-addr)}

/* ── DEVICE CHROME on a WEB surface = the device's OWN browser chrome ──
   The simulated phone status bar + browser address bar belong to the DEVICE, not to the
   hosted site — so they render as realistic neutral iOS-Safari chrome, NOT painted with
   the consumer's brand theme. The device SYSTEM THEME (light/dark) drives them via the
   --dev-* vars below; default = dark, toggled in the layout/device control. */
body{ --dev-chrome:#1c1c1e;--dev-chrome-fg:#f5f5f7;--dev-chrome-fg2:#8e8e93;
  --dev-chrome-line:rgba(255,255,255,0.14);--dev-addr:#2c2c2e;--dev-addr-fg:#b0b0b5;
  --dev-chrome-hover:rgba(255,255,255,0.10); }
body[data-devtheme="light"]{ --dev-chrome:#f6f6f8;--dev-chrome-fg:#1c1c1e;--dev-chrome-fg2:#86868b;
  --dev-chrome-line:rgba(0,0,0,0.10);--dev-addr:#e7e7ec;--dev-addr-fg:#54545a;
  --dev-chrome-hover:rgba(0,0,0,0.06); }
/* custom = the device chrome INTENTIONALLY adopts the brand theme (only offered when the
   window chrome is "our"); this is the branded look, not a leak. */
body[data-devtheme="custom"]{ --dev-chrome:var(--pane);--dev-chrome-fg:var(--fg);--dev-chrome-fg2:var(--fg2);
  --dev-chrome-line:var(--line);--dev-addr:var(--bg);--dev-addr-fg:var(--fg3);
  --dev-chrome-hover:var(--btn-h,rgba(127,127,127,0.12)); }
body[data-surface="web"] .dev-statusbar{
  background:var(--dev-chrome);color:var(--dev-chrome-fg)}
body[data-surface="web"] .web-bar-m,
body[data-surface="web"] .web-bar-d{
  background:var(--dev-chrome);border-bottom:1px solid var(--dev-chrome-line)}
body[data-surface="web"] .wbb{color:var(--dev-chrome-fg2)}
body[data-surface="web"] .wbb:hover{background:var(--dev-chrome-hover);color:var(--dev-chrome-fg)}
body[data-surface="web"] .wb-addr{
  background:var(--dev-addr);border:1px solid var(--dev-chrome-line);color:var(--dev-addr-fg)}
body[data-surface="web"][data-kind="desktop"] .window{border-radius:0 0 14px 14px}
body[data-surface="web"][data-edges="sharp"] .systl{border-radius:0}
body[data-surface="web"][data-edges="sharp"] .window{border-radius:0}

/* ── "OUR" chrome — engine-drawn themed titlebar (always present, even when the app has no
   titlebar of its own). Keeps the system's button placement (mac dots left / win·ubuntu
   controls right per data-os) but restyled to the consumer theme. The app always hides its
   own titlebar (systemchrome=1 sent in both chromes), so the engine owns the window frame. */
body[data-chrome="our"][data-kind="desktop"] .systl{display:flex;background:var(--pane);border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
body[data-chrome="our"][data-kind="desktop"] .systl-t{color:var(--fg2)}
/* our-chrome keeps the standard traffic-light colours so close/minimise/maximise stay
   recognisable + usable (the faded brand dots read as "only close exists") */
body[data-chrome="our"][data-kind="desktop"] .mac-tl .r{background:#ff5f57}
body[data-chrome="our"][data-kind="desktop"] .mac-tl .y{background:#febc2e}
body[data-chrome="our"][data-kind="desktop"] .mac-tl .g{background:#28c840}
body[data-chrome="our"][data-kind="desktop"] .wb{color:var(--fg2)}
body[data-chrome="our"][data-kind="desktop"] .wb:hover{background:var(--btn-h)}
body[data-chrome="our"][data-kind="desktop"] .wb.cl:hover{background:var(--amber);color:var(--accent-ink)}
body[data-chrome="our"][data-edges="round"] .window{border-radius:0 0 12px 12px}
body[data-chrome="our"][data-edges="sharp"] .systl{border-radius:0}
body[data-chrome="our"][data-edges="sharp"] .window{border-radius:0}

/* On a WEB surface the window titlebar + browser bar are the BROWSER's chrome → drive them
   from the device theme (--dev-*), overriding both the brand-tinted "our" titlebar and the
   OS-native "system" one, so nothing leaks the brand colour unless devtheme="custom". */
body[data-surface="web"][data-kind="desktop"] .systl{background:var(--dev-chrome);border-bottom:1px solid var(--dev-chrome-line)}
body[data-surface="web"][data-kind="desktop"] .systl-t{color:var(--dev-chrome-fg2)}
body[data-surface="web"][data-kind="desktop"] .wb{color:var(--dev-chrome-fg2)}
body[data-surface="web"][data-kind="desktop"] .wb:hover{background:var(--dev-chrome-hover)}
/* "custom" device theme only makes sense with our (branded) chrome — hide it for system
   chrome and on mobile (no chrome control). */
body:not([data-chrome="our"]) [data-devtheme="custom"]{display:none}

/* ── mobile device theme: the engine-drawn chrome (status bar, shade, app-switcher)
   obeys data-devtheme everywhere. Light AND zeng3ld(custom) are both "dark-on-light"
   chromes (custom = brand-tinted); Dark is the default. The shade segment flips it all. */
body:is([data-devtheme="light"],[data-devtheme="custom"]) .dev-statusbar{color:#16161a}
body[data-devtheme="custom"] .dev-statusbar{color:var(--fg)}
body[data-devtheme="light"] .shade{background:rgba(248,248,251,0.85)}
body[data-devtheme="custom"] .shade{background:color-mix(in srgb,var(--pane) 88%,transparent)}
body:is([data-devtheme="light"],[data-devtheme="custom"]) .shade{color:#16161a;backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5)}
body:is([data-devtheme="light"],[data-devtheme="custom"]) :is(.cc-media,.cc-vert,.cc-round,.qs-bright,.qs-track,.ou-bright,.ou-track,.cc-ours){background:rgba(0,0,0,0.07)}
body:is([data-devtheme="light"],[data-devtheme="custom"]) .cc-seg{background:rgba(0,0,0,0.12)}
body:is([data-devtheme="light"],[data-devtheme="custom"]) :is(.cc-vert i,.qs-track i,.ou-track i){background:rgba(0,0,0,0.62)}
body:is([data-devtheme="light"],[data-devtheme="custom"]) :is(.cc-vert span,.cc-round,.qs-bright>span,.ou-bright>span,.cc-sg,.cc-media b,.cc-media i){color:#16161a}
/* OFF toggles in a light shade: light glass + DARK text/icons (were white-on-white = invisible).
   ON toggles keep their accent. */
body:is([data-devtheme="light"],[data-devtheme="custom"]) :is(.qs-tile,.ou-pill,.ou-sq,.cc-tg):not(.on){background:rgba(0,0,0,0.06);color:#16161a}
body[data-devtheme="light"] .cc-sg.on{background:#16161a;color:#fff}
body[data-devtheme="custom"] .cc-sg.on{background:var(--accent,#16161a);color:#16140d}
body:is([data-devtheme="light"],[data-devtheme="custom"]) .shade-grab{background:rgba(0,0,0,0.28)}
body[data-devtheme="light"] .app-switch{background:rgba(226,226,232,0.55)}
body[data-devtheme="custom"] .app-switch{background:color-mix(in srgb,var(--pane) 55%,transparent)}