:root {
  --bg: #0b1226; --bg2: #121c38; --ink: #eef2fb; --muted: #9aa7c4; --line: #2a3760;
  --working: #2fbf71; --waiting: #3b8bff; --quiet: #8a93a6; --attn: #ff4d4f; --stale: #59617a;
  --accent: #39c2c9; --sheet: #f7f8fc; --sheet-ink: #18213a; --sheet-muted: #5b6684;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #070b1c;
  color: var(--ink); font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
button { font: inherit; }
.top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 4px; padding-top: max(12px, env(safe-area-inset-top)); }
.title { display: flex; align-items: center; gap: 8px; }
h1 { font-size: 20px; margin: 0; letter-spacing: .3px; }
.demo-pill.real.live { background: #6ee7a8; color: #00240f; }
.demo-pill { background: #ffcc33; color: #2b2100; font-weight: 800; font-size: 11px; letter-spacing: .8px; padding: 3px 7px; border-radius: 6px; }
.controls { display: flex; gap: 6px; }
.chip { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; min-height: 36px; cursor: pointer; }
.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); background: rgba(57,194,201,.14); }
.summary { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 0; font-size: 13px; color: var(--muted); }
.summary .s { background: rgba(255,255,255,.06); border-radius: 8px; padding: 4px 8px; }
.summary b { color: var(--ink); }
.stage { margin: 0 auto; padding: 0; }
.galaxy svg { overflow: visible; }
.galaxy { width: 100%; margin: 0 auto; touch-action: manipulation; }
.galaxy svg { display: block; width: 100%; height: auto; }
.sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.top, .summary, .stage { position: relative; z-index: 1; }
.orbit { fill: none; stroke: #7f97d6; stroke-opacity: .72; stroke-width: 1.5; stroke-dasharray: 7 4; }
.orbit-glow { fill: none; stroke: #6f8de0; stroke-opacity: .13; stroke-width: 7; }
svg:not(.phone) .orbit { stroke-width: 1.7; }
.sun-glow { fill: #f5b942; opacity: .18; }
.sun-core { fill: #0c1533; fill-opacity: .55; stroke: #f5b942; stroke-opacity: .35; stroke-width: 1.5; }
.planet { cursor: pointer; outline: none; }
.planet .hit { fill: transparent; }
.planet .body { stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.planet .body.working { fill: var(--working); } .planet .body.waiting { fill: var(--waiting); }
.planet .body.quiet { fill: var(--quiet); } .planet .body.needs-attention { fill: var(--attn); }
.planet .ring { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; }
.planet.stale .ring { stroke: var(--stale); stroke-dasharray: 3 3; opacity: .9; }
.planet.stale .body { opacity: .5; }
.planet .initial { fill: #0b1226; font-weight: 800; font-size: 11px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.planet .name { fill: var(--ink); font-size: 12px; font-weight: 650; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.planet .role { fill: var(--muted); font-size: 10.5px; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.planet .badge circle { fill: #ffcc33; stroke: var(--bg); stroke-width: 1.5; }
.planet .badge text { fill: #2b2100; font-size: 9.5px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.planet .age rect { fill: #3a2a10; stroke: #f5b942; stroke-width: .8; }
.planet .age text { fill: #ffd78a; font-size: 7.5px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.planet.selected .ring { stroke: #fff; stroke-width: 2.4; stroke-dasharray: none; opacity: 1; }
.planet:focus-visible .ring { stroke: var(--accent); stroke-width: 2.4; }
.planet.pulse .ring { animation: pulse 0.9s ease-out 2; }
@keyframes pulse { 0% { stroke-width: 2.4; } 50% { stroke-width: 6; } 100% { stroke-width: 2.4; } }
.link { stroke: #6f86c9; stroke-width: 1; opacity: .35; fill: none; }
.link.review { stroke: #c49cff; stroke-dasharray: 4 3; }
.link.handoff { stroke: var(--accent); }
.link.hot { opacity: .95; stroke-width: 1.8; }
.link.dim { opacity: .08; }
.legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 2px 0 0; padding: 0 8px; font-size: 12.5px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 5px; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot.working { background: var(--working); } .dot.waiting { background: var(--waiting); }
.dot.quiet { background: var(--quiet); } .dot.needs-attention { background: var(--attn); }
.dot.stale { background: transparent; border: 1.5px dashed var(--stale); }
.badge-mini { background: #ffcc33; color: #2b2100; font-size: 10px; font-weight: 800; border-radius: 999px; min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.foot { text-align: center; color: var(--muted); font-size: 12px; margin: 10px 0 24px; }
.noscript { padding: 20px; }
.scrim { position: fixed; inset: 0; background: rgba(4,8,20,.45); z-index: 9; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; max-height: 78vh; max-height: 78dvh;
  background: var(--sheet); color: var(--sheet-ink); border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.45); transform: translateY(105%); transition: transform .25s ease;
  display: flex; flex-direction: column; padding-bottom: var(--safe-b);
}
.sheet.open { transform: translateY(0); }
.grab { position: absolute; top: 8px; left: 50%; margin-left: -21px; width: 42px; height: 5px; border-radius: 3px; background: #c9cfdf; }
.sheet { padding-top: 46px; }
.close { position: absolute; top: 8px; right: 10px; border: 0; background: #e8ebf4; color: var(--sheet-ink); border-radius: 999px; padding: 6px 12px; min-height: 34px; cursor: pointer; font-size: 13px; }
.sheet-body { overflow-y: auto; padding: 0 16px 20px; border-top: 1px solid #e3e6ef; padding-top: 10px; -webkit-overflow-scrolling: touch; }
.sheet h2 { margin: 0; font-size: 21px; display: flex; align-items: center; gap: 8px; }
.sheet .sub { color: var(--sheet-muted); font-size: 13.5px; margin: 2px 0 10px; }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #fff; }
.st.working { background: var(--working); } .st.waiting { background: var(--waiting); }
.st.quiet { background: var(--quiet); } .st.needs-attention { background: var(--attn); }
.st.stale { background: #e3e6ef; color: #4a5370; border: 1px dashed #8890a8; }
.row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.note { background: #fff; border: 1px solid #e3e6ef; border-radius: 10px; padding: 9px 11px; margin: 4px 0 10px; font-size: 14.5px; }
.withheld { color: #8a5a00; background: #fff6e0; border-color: #f0d38a; font-style: italic; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cell { background: #fff; border: 1px solid #e3e6ef; border-radius: 10px; padding: 8px 10px; }
.cell .k { font-size: 11.5px; color: var(--sheet-muted); text-transform: uppercase; letter-spacing: .4px; }
.cell .v { font-size: 15px; font-weight: 650; margin-top: 2px; word-break: break-word; }
.cell .v.big { font-size: 20px; }
h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--sheet-muted); margin: 14px 0 6px; }
.work { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.work li { background: #fff; border: 1px solid #e3e6ef; border-radius: 10px; padding: 8px 10px; }
.work .it { font-weight: 650; font-size: 14.5px; }
.work .meta { font-size: 12.5px; color: var(--sheet-muted); margin-top: 2px; }
.work .chk { font-size: 13px; margin-top: 3px; }
.work .overdue { color: #b42318; font-weight: 700; }
.more { font-size: 13px; color: var(--sheet-muted); padding: 6px 2px; font-weight: 650; }
.empty { color: var(--sheet-muted); font-size: 14px; }
.links { display: flex; flex-wrap: wrap; gap: 6px; }
.links button, .linkbtn { border: 1px solid #cdd3e3; background: #fff; color: var(--sheet-ink); border-radius: 999px; padding: 6px 11px; min-height: 36px; cursor: pointer; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.links .kind { font-size: 11px; color: var(--sheet-muted); }
.linkbtn { padding: 2px 9px; min-height: 28px; font-weight: 650; }
.setup p { margin: 0 0 6px; font-size: 14.5px; }
.setup .lab { font-weight: 700; }
.ro { margin-top: 14px; font-size: 12.5px; color: var(--sheet-muted); background: #eef1f8; border-radius: 10px; padding: 8px 10px; }
@media (min-width: 900px) {
  .panel-open .stage { max-width: none; margin-right: 400px; }
  .sheet { left: auto; top: 0; right: 0; width: 390px; max-height: none; height: 100vh; border-radius: 0; transform: translateX(105%); box-shadow: -10px 0 40px rgba(0,0,0,.4); }
  .sheet.open { transform: translateX(0); }
  .grab { display: none; }
  .scrim { display: none; }
  .sheet-body { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } .planet.pulse .ring { animation: none; } }
.planet.lead .ring { stroke: #f5b942; stroke-width: 2; }
.planet.lead .name { font-size: 12.5px; font-weight: 750; }
.orbit.inner { stroke: #e2b24a; stroke-opacity: .6; }
.orbit-glow.inner { stroke: #f5b942; stroke-opacity: .12; }
.age-mini { background: #3a2a10; color: #ffd78a; border: 1px solid #f5b942; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 5px; height: 16px; display: inline-flex; align-items: center; }
svg:not(.phone) .planet .name { font-size: 13.5px; }
svg:not(.phone) .planet .role { font-size: 11.5px; }
svg:not(.phone) .planet.lead .name { font-size: 14.5px; }
.galaxy, .galaxy svg, .planet { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.planet { touch-action: none; }
.planet { transition: opacity .18s ease; }
.planet.dim { opacity: .18; }
.planet.lit .ring { stroke: #fff; stroke-width: 2.4; stroke-dasharray: none; opacity: 1; }
.planet.focus .ring { stroke: #ffcc33; stroke-width: 3; stroke-dasharray: none; opacity: 1; }
svg.focusing .sun { opacity: .45; }
.needs-hit { fill: transparent; cursor: pointer; }
.needs-ring { fill: none; stroke: #ffcc33; stroke-opacity: .25; stroke-width: 2; }
.needs.on .needs-ring { stroke-opacity: .85; stroke-dasharray: 5 4; }
.needs-badge { fill: #ffcc33; stroke: #0b1226; stroke-width: 1.5; }
.needs-num { fill: #2b2100; font-size: 11px; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.needs { cursor: pointer; outline: none; }
.shield { transform: translate(-14px,-14px); } .shield path { fill: #c49cff; stroke: #0b1226; stroke-width: 1; }
.shield.red path { fill: #ff4d4f; }
.moon { fill: #cfd6ea; }
.hand-dot { fill: #fff; }
.timeline { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px auto 0; max-width: 340px; padding: 0 14px; font-size: 12.5px; color: var(--muted); }
.timeline input { width: 100%; min-height: 32px; }
.signals { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 8px 0 0; padding: 0 10px; font-size: 12px; }
.signals li { border-radius: 999px; padding: 3px 9px; background: rgba(255,255,255,.07); color: var(--ink); }
.signals li.nodata { color: var(--muted); border: 1px dashed var(--line); background: transparent; }
.work li.task { cursor: pointer; }
.plain { margin: 4px 0 0; font-size: 13.5px; }
.plain dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--sheet-muted); margin-top: 4px; }
.plain dd { margin: 0; }
.plain.full { font-size: 15px; } .plain.full dt { margin-top: 10px; }
.plain .needs-wording { color: #8a5a00; font-style: italic; }
.more-link { font-size: 12px; color: #2f6fd6; margin-top: 4px; }
.back { border: 0; background: #e8ebf4; color: var(--sheet-ink); border-radius: 999px; padding: 6px 12px; min-height: 34px; margin-bottom: 8px; cursor: pointer; font-size: 13px; }
:root { --sun-glow: #f5b942; }
.top { flex-wrap: wrap; gap: 6px 12px; padding-right: 56px; }
.when { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.today { color: var(--ink); font-weight: 650; }
.clocks { display: flex; gap: 12px; }
.clock { display: inline-flex; gap: 5px; align-items: baseline; }
.clk-t { color: var(--ink); font-variant-numeric: tabular-nums; }
.theme-btn { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 8; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.06); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.theme-btn .sun-ic { width: 16px; height: 16px; border-radius: 50%; background: #f5b942; box-shadow: 0 0 0 3px rgba(245,185,66,.3); display: none; }
.theme-btn .moon-ic { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset -5px -2px 0 0 #dfe6f7; transform: rotate(-20deg); }
body:not(.day) .theme-btn .sun-ic { display: block; } body:not(.day) .theme-btn .moon-ic { display: none; }
.panel-h { font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 4px; display: inline-block; margin-right: 8px; }
.muted { color: var(--muted); margin: 2px 0; }
.sun-glow { fill: var(--sun-glow); }
.disclaimer { text-align: center; color: var(--muted); font-size: 11.5px; margin: -14px 14px 24px; }
body.day { background: #eaf1fb; --ink: #14203d; --muted: #4f5d7c; --line: #b9c5de; }
body.day .sky { opacity: .08; }
body.day .planet .name, body.day .planet .role { stroke: #eaf1fb; }
body.day .orbit { stroke: #5b74b8; }
body.day .sun-core { fill: #0b1226; fill-opacity: .9; }
body.day .theme-btn { background: #fff; }
body.day .signals li { background: rgba(20,32,61,.07); }
body.day
@media print {
  .theme-btn, .controls, .sheet, .scrim, .sky, .timeline input { display: none !important; }
  body, body.day { background: #fff !important; color: #000; --ink: #000; --muted: #333; }
  .planet .name, .planet .role { stroke: #fff; }
  }
.clockrow { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.fuel { cursor: pointer; border: 1px solid var(--line); background: rgba(255,255,255,.06); border-radius: 10px; padding: 2px 4px 0; width: 58px; height: 36px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.fuel-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fuel-arc { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.4; } .fuel-red { fill: none; stroke: #ff4d4f; stroke-width: 2.4; }
.fuel-tick { stroke: rgba(255,255,255,.9); stroke-width: 1; stroke-linecap: round; } .fuel-tick.big { stroke-width: 1.6; }
.fuel-ef { fill: #fff; font-weight: 800; font-size: 11px; text-anchor: middle; font-family: system-ui, sans-serif; }
.fuel-needle { stroke: #ff7a1a; stroke-width: 2; stroke-linecap: round; }
.fuel.low .fuel-needle { stroke: #ff4d4f; }
.fuel-hub { fill: #fff; stroke: #ff7a1a; stroke-width: 1; }
.fuel.none .fuel-arc, .fuel.none .fuel-red, .fuel.none .fuel-tick { stroke: rgba(255,255,255,.3); } .fuel.none .fuel-ef { fill: rgba(255,255,255,.3); }
.fuel:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
body.day .fuel { background: #0b1226; }
@media (max-width: 480px) { .clockrow { gap: 8px; } .clocks { gap: 8px; } .fuel { width: 50px; height: 31px; } }
.fuel-tip { position: relative; z-index: 2; text-align: center; margin: 4px auto; font-size: 13px; color: var(--muted); }
.icon-chip { display: inline-flex; align-items: center; justify-content: center; }
@media print { #email-btn { display: none; } }
.when { display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.when .clockrow { display: contents; }
.when #today { grid-column: 1; grid-row: 1; align-self: end; }
.when #clocks { grid-column: 1; grid-row: 2; align-self: start; }
.when #fuel { grid-column: 2; grid-row: 1 / 3; height: 56px; width: 94px; padding: 3px 6px 1px; }
@media (max-width: 480px) { .when { column-gap: 8px; } .when #fuel { height: 52px; width: 84px; } }
.sheet:not(.open) { visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.sheet.open { visibility: visible; transition: transform .25s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .sheet:not(.open), .sheet.open { transition: none; } }
.ph-only { display: none; }
.disclaimer { margin: 6px 14px 8px; }
@media (max-width: 480px) {
  .ph-only { display: inline-flex; }
  #print-btn .lbl { display: none; }
  .top { padding: 8px 10px 2px; padding-top: max(8px, env(safe-area-inset-top)); padding-right: 46px; gap: 4px 6px; }
  .theme-btn { width: 34px; height: 34px; top: max(8px, env(safe-area-inset-top)); right: 8px; }
  .title { order: 1; gap: 6px; } #bg-title { font-size: 18px; } .demo-pill { font-size: 10px; }
  .controls { order: 2; margin-left: auto; gap: 4px; }
  .controls .chip { min-height: 32px; width: 32px; padding: 0; }
  .when { order: 3; flex-basis: 100%; }
  .summary { padding: 2px 10px 0; gap: 4px; font-size: 12.5px; } .summary .s { padding: 3px 7px; }
  .legend { display: none; }
  .legend.open { display: flex; position: fixed; z-index: 9; top: 50px; right: 8px; left: 8px; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; margin: 0; background: #0b1226; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); color: var(--ink); }
  body.day .legend.open { background: #fff; color: #14203d; }
  .timeline { margin-top: 4px; }
  .disclaimer { margin: 4px 12px 6px; font-size: 11px; }
}
@media (min-width: 481px) {
  .stage { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 28px; }
  .stage > .galaxy, .stage > .disclaimer, .stage > .fuel-tip { flex: 0 0 100%; }
  .stage > .legend { margin: 0; } .stage > .timeline { margin: 0; width: 300px; flex: 0 0 auto; }
}
.hist-pop { position: fixed; z-index: 9; top: 56px; right: 10px; width: 260px; padding: 10px 12px 12px; background: #0b1226; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 13px; }
.hist-pop[hidden] { display: none; }
.hist-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 650; }
.hist-nav { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 8px; width: 30px; height: 28px; cursor: pointer; }
.hist-nav:disabled { opacity: .3; cursor: default; }
.hist-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.hist-w { color: var(--muted); font-size: 11px; padding: 2px 0; }
.hist-d { border: 0; background: transparent; color: rgba(255,255,255,.28); border-radius: 8px; height: 30px; font-size: 13px; }
.hist-d.has { background: rgba(57,194,201,.18); color: var(--ink); font-weight: 700; cursor: pointer; border: 1px solid var(--accent); }
.hist-d.cur { background: var(--accent); color: #04121a; }
.hist-none { margin: 0; color: var(--muted); }
.hist-now { margin-top: 8px; width: 100%; }
.viewing { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 14px 0; padding: 4px 10px; border-radius: 10px; background: rgba(245,185,66,.16); border: 1px solid #f5b942; color: var(--ink); font-weight: 650; font-size: 13px; }
.viewing[hidden] { display: none; }
.viewing .chip { min-height: 28px; padding: 3px 10px; color: var(--ink); }
body.day .hist-pop { background: #fff; color: #14203d; } body.day .hist-d { color: rgba(20,32,61,.3); } body.day .hist-d.has { color: #14203d; }
@media (max-width: 480px) { .hist-pop { top: 48px; right: 8px; left: 8px; width: auto; } }
@media print { #hist-btn, .hist-pop, #back-now { display: none !important; } }
@media (max-width: 480px) { .controls { gap: 3px; } .controls .chip { width: 30px; min-height: 30px; height: 30px; } }
.top { padding-right: 14px; }
.controls .theme-btn { position: static; width: auto; height: auto; border-radius: 999px; background: transparent; z-index: auto; box-shadow: none; }
body.day .controls .theme-btn { background: transparent; }
@media (max-width: 480px) { .top { padding-right: 10px; } .controls .theme-btn { width: 30px; height: 30px; } }
.controls .theme-btn { width: 42px; height: 37px; padding: 0; border: 1px solid var(--line); }
@media (max-width: 480px) { .controls .theme-btn { width: 30px; height: 30px; } }
.controls .theme-btn .sun-ic { width: 12px; height: 12px; box-shadow: 0 0 0 2px rgba(245,185,66,.3); } .controls .theme-btn .moon-ic { width: 14px; height: 14px; }
#demo-btn[aria-pressed="true"] { color: #1a1200; background: #f5c542; border-color: #f5c542; }
.demo-banner { position: relative; z-index: 1; margin: 4px 14px 0; padding: 4px 10px; border-radius: 10px; background: #f5c542; color: #1a1200; font-weight: 800; font-size: 13px; text-align: center; }
.demo-banner[hidden] { display: none; }
@media (max-width: 480px) { .controls { gap: 2px; } .controls .chip, .controls .theme-btn { width: 28px; height: 28px; min-height: 28px; } .title { gap: 4px; } #bg-title { font-size: 17px; } .demo-banner { margin: 3px 10px 0; font-size: 12px; padding: 3px 8px; } }
.disclaimer.demo-strip { color: #1a1200; background: #f5c542; font-weight: 800; border-radius: 8px; padding: 1px 8px; width: max-content; max-width: calc(100% - 24px); margin-left: auto; margin-right: auto; }
@media (max-width: 480px) { .controls { gap: 3px; } .controls .icon-chip, .controls .theme-btn { width: 26px; height: 26px; min-width: 26px; padding: 0; } .controls .icon-chip svg { width: 14px; height: 14px; } }
.sheet-demo { display: none; }
html.demo-view .sheet-demo { display: inline-block; position: absolute; top: 14px; left: 16px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; color: #1a1200; background: #f5c542; }
.demo-logo circle { fill: none; stroke: #f5b942; stroke-width: 2; stroke-dasharray: 6 5; stroke-opacity: .9; }
.demo-logo text { fill: #f5d48a; font-weight: 700; letter-spacing: .06em; text-anchor: middle; dominant-baseline: middle; font-family: inherit; }
body.day .demo-logo circle { stroke: #f5b942; }
body.day .demo-logo text { fill: #f8e2a8; }
html.has-viewing .viewing { position: absolute; right: 14px; margin: 0; padding: 2px 4px 2px 10px; font-size: 12.5px; gap: 6px; z-index: 3; }
html.has-viewing .viewing .chip { min-height: 22px; padding: 1px 8px; font-size: 12px; }
@media (max-width: 480px) { html.has-viewing .viewing { right: 10px; font-size: 12px; } }
@media (max-width: 480px) { html.has-viewing .viewing { padding: 1px 3px 1px 8px; line-height: 1.2; } html.has-viewing .viewing .chip { min-height: 18px; height: 20px; padding: 0 7px; font-size: 11.5px; } }
.disclaimer.demo-strip { margin-top: 2px; margin-bottom: 0; line-height: 1.35; }
html.demo-view #disclaimer { margin-top: 1px; margin-bottom: 4px; }
.demo-strip .ds-short { display: none; }
@media (max-width: 480px) { .demo-strip .ds-full { display: none; } .demo-strip .ds-short { display: inline; } .disclaimer.demo-strip { margin: 2px auto 2px; } }
.demo-pill[hidden] { display: none; }
@media (max-width: 480px) {
  .title:has(.demo-pill.real) { display: contents; }
  .title:has(.demo-pill.real) #bg-title { order: 1; }
  .demo-pill.real { order: 4; flex-basis: 100%; max-width: none; width: max-content; font-size: 9.5px; padding: 1px 6px; line-height: 1.3; white-space: nowrap; letter-spacing: 0; margin-top: -2px; }
}
@media (max-width: 480px) { #bg-title { font-size: 16.5px; } .demo-pill:not(.real) { font-size: 9.5px; padding: 2px 5px; letter-spacing: .4px; } .title { gap: 5px; } }
#cmd-btn { text-decoration: none; }
#cmd-btn[hidden] { display: none; }
.tech-pop[hidden] { display: none; }
.tech-pop { position: fixed; z-index: 50; top: 70px; right: 12px; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 130px); display: flex; flex-direction: column; background: #0f1830; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.tech-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tech-head h2 { margin: 0; font-size: 16px; }
.tech-when { flex: 1; font-size: 11px; color: var(--muted); }
.tech-head .chip { min-height: 28px; padding: 3px 10px; }
.tech-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 12px 12px; }
.tech-row { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.tech-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tech-item { font-weight: 600; font-size: 13px; }
.tech-st, .tech-idea { font-size: 10px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tech-st.st-approved { color: #5fd38d; border-color: #5fd38d; }
.tech-st.st-usable-now { color: var(--accent); border-color: var(--accent); }
.tech-what { font-size: 12px; margin-top: 3px; }
.tech-bots { font-size: 11px; color: var(--muted); margin-top: 2px; }
@media (max-width: 480px) { .tech-pop { top: 58px; right: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 110px); } }
.banner{position:sticky;top:0;z-index:8;background:#f5b942;color:#0b1226;text-align:center;font-size:.85rem;padding:.45rem 1rem;letter-spacing:.03em;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.intro{position:relative;z-index:1;text-align:center;margin:6px 14px 0}
.intro h2{margin:0 0 4px;font-size:20px}
.intro p{margin:2px 0;color:var(--muted);font-size:14px}
.intro strong{color:var(--ink)}
.sample-tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:1px 8px;border-radius:999px;background:#f5c542;color:#1a1200}
.next{position:relative;z-index:1;text-align:center;margin:28px 14px 8px;padding:22px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04)}
.next h2{margin:0 0 14px;font-size:20px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{display:inline-block;padding:.72rem 1.15rem;border-radius:8px;text-decoration:none;font-weight:700;border:1px solid transparent}
.btn.primary{background:#f5b942;color:#0b1226}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.foot{position:relative;z-index:1;font-size:.85rem;opacity:.8;padding-top:1.5rem;padding-bottom:2rem;margin-top:1.5rem;border-top:1px solid var(--line);color:var(--muted)}
.foot p{margin:.3rem 0}
.foot a{color:var(--ink)}
.sep{opacity:.5;padding:0 .3rem}
body.day .next{background:rgba(20,32,61,.04)}
@media (max-width:480px){.intro h2{font-size:18px}.intro p{font-size:13px}}
.fuel-cap{font-size:11px;letter-spacing:.02em;color:var(--muted);text-align:center;white-space:nowrap}
.when #fuel-cap{grid-column:2;grid-row:3;align-self:start;margin-top:1px}
@media print{.banner{position:static}.next{display:none}}