/* Zone 05 looks site. Page chrome follows the phone's light/dark setting; the stage is always the white-mode render,
   and its type is painted on a canvas so no browser's auto dark mode can recolour it. */
:root{--bg:#f4f6fa;--paper:#fff;--ink:#0f1730;--muted:#55607a;--line:#dde2ec;--blue:#1f5fe0;--soft:#eaf0fd;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0b1020;--paper:#121a2e;--ink:#e8ecf6;--muted:#9aa5c0;--line:#25304a;--blue:#7ea4ff;--soft:#18233f}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--sans)}
a{color:inherit}
.w{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:max(16px,env(safe-area-inset-top,0px)) 48px;display:grid;gap:18px}
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.crumb a{text-decoration:none;color:var(--muted)}.crumb a:hover{color:var(--ink)}
h1{margin:0;font-size:clamp(22px,4vw,32px);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
h2{margin:0;font-size:17px;font-weight:600}
.sub{margin:4px 0 0;color:var(--muted);max-width:70ch}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ready{color:#16834a;border-color:color-mix(in srgb,#16834a 35%,transparent)}
.chip.partial{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.chip.preview{color:#7a5cd6;border-color:color-mix(in srgb,#7a5cd6 35%,transparent)}
.chip.rendering{color:#a86a00;border-color:color-mix(in srgb,#a86a00 35%,transparent)}
@media (prefers-color-scheme:dark){.chip.ready{color:#5fd394}.chip.preview{color:#7a5cd6;border-color:color-mix(in srgb,#7a5cd6 35%,transparent)}
.chip.rendering{color:#f0b54a}}

/* home */
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:16px}
.look{display:grid;gap:10px;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 10px 14px;min-width:0}
.look:hover{border-color:var(--blue)}
.look .pic{aspect-ratio:16/9;border-radius:8px;background:#f3f4f7 center/cover no-repeat;position:relative;overflow:hidden}
.look .pic.empty{background:linear-gradient(135deg,#f3f4f7,#e4e8f0)}
.look .pic.empty::after{content:"Rendering";position:absolute;inset:0;display:grid;place-items:center;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7a849b}
.look .row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 4px}
.look .name{font-size:18px;font-weight:600}
.look .note{font-size:13px;color:var(--muted);padding:0 4px}

/* look page: the stage */
.stage{position:relative;aspect-ratio:16/9;width:100%;background:#f3f4f7 center/cover no-repeat;border-radius:12px;overflow:hidden;border:1px solid var(--line);container-type:inline-size;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;background:transparent}
.stage video.on{opacity:1}
.stage:fullscreen{border-radius:0;border:0;width:100vw;height:100vh;aspect-ratio:auto;background-color:#f3f4f7}
.stage:fullscreen video{object-fit:contain}
.txt{position:absolute;inset:0;z-index:5;pointer-events:none;font-family:"IBM Plex Sans",system-ui,sans-serif}
.layer{position:absolute;inset:0;opacity:0}
.col{position:absolute;left:7.81cqw;top:7.81cqw;width:44cqw}
.kick{font:500 1.3cqw/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:.6cqw}
.kick::before{content:"";width:.55cqw;height:.55cqw;border-radius:50%}
.q{margin-top:1.6cqw;padding-left:.9cqw;border-left:.18cqw solid;font-size:1.72cqw;line-height:1.35;max-width:36cqw}
.fig{margin-top:2.2cqw;font-weight:600;font-size:6.75cqw;line-height:1;letter-spacing:-.02em}
.unit{font-size:1.8cqw;margin-top:.4cqw}
.ans{white-space:nowrap;margin-top:2.6cqw;font-weight:500;line-height:1.16;letter-spacing:-.005em}
.src{margin-top:1.8cqw;font-size:1.7cqw}
/* DOM type is layout only, invisible; the canvas paints it */
.txt *{color:transparent!important;border-color:transparent!important;background:transparent!important}
#ink{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.big{position:absolute;inset:0;z-index:7;display:grid;place-items:center;background:transparent;border:0;padding:0;cursor:pointer;width:100%}
.big span{width:72px;height:72px;border-radius:50%;background:#1f5fe0;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(31,95,224,.14)}
.big span::after{content:"";margin-left:6px;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.big small{position:absolute;bottom:7%;left:0;right:0;text-align:center;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#55607a}
.wait{position:absolute;inset:0;z-index:6;display:grid;place-items:center;text-align:center;padding:24px;color:#55607a;font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(135deg,#f3f4f7,#e7ebf2)}
.wait b{display:block;font:600 clamp(18px,3cqw,28px) var(--sans);letter-spacing:0;text-transform:none;color:#0f1730;margin-bottom:6px}

/* transport */
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bar button{font:500 14px var(--sans);padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;min-height:40px}
.bar button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.bar .where{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:1 1 160px}
.prog{position:relative;height:28px;flex:1 1 100%;cursor:pointer;touch-action:none}
.prog::before{content:"";position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:var(--line)}
.prog i{position:absolute;left:0;top:12px;height:4px;border-radius:2px;background:var(--blue);width:0}
.prog b{position:absolute;top:8px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--blue);left:0}
.prog .tick{position:absolute;top:9px;width:2px;height:10px;background:var(--muted);opacity:.5;margin-left:-1px}

/* stops */
.stops{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,220px),1fr));gap:10px}
.stop{display:grid;gap:6px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 6px 10px;font:inherit;color:inherit;cursor:pointer;min-width:0}
.stop:hover,.stop.cur{border-color:var(--blue)}
.stop .pic{aspect-ratio:16/9;border-radius:6px;background:#f3f4f7 center/cover no-repeat}
.stop b{font-size:14px;font-weight:600;padding:0 4px;line-height:1.25}
.stop span{font:500 11px var(--mono);color:var(--muted);letter-spacing:.04em;padding:0 4px}
.stop.todo{cursor:default;border-style:dashed;background:transparent}
.stop.todo .pic{background:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in srgb,var(--line) 60%,transparent) 8px 9px)}
.foot{font-size:13px;color:var(--muted);max-width:80ch}
[hidden]{display:none!important}

.speed{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--paper)}
.bar .speed button{border:0;border-radius:0;min-height:38px;padding:8px 11px;background:transparent;font:500 13px var(--mono);color:var(--muted)}
.bar .speed button.on{background:var(--soft);color:var(--ink)}
/* how a question works */
.how{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(16px,3vw,28px);display:grid;gap:18px}
.how h2{font-size:clamp(19px,3vw,24px)}
.lanes{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px;color:var(--muted)}
.lanes span{display:inline-flex;align-items:center;gap:6px}.lanes i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:760px}
.flow li{position:relative;display:grid;grid-template-columns:40px 1fr;gap:12px;padding-bottom:18px}
.flow li::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--line)}
.flow li:last-child::before{display:none}
.flow .no{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:600 15px var(--sans);color:#fff;background:var(--c);position:relative;z-index:1}
.flow .tag{font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--c)}
.flow b{display:block;font-size:17px;font-weight:600;margin-top:2px}
.flow p{margin:4px 0 0;color:var(--muted);font-size:15px;max-width:62ch}
.flow .eg{margin-top:8px;display:inline-block;font-size:14px;padding:6px 10px;border-radius:8px;background:var(--soft);color:var(--ink)}
.flow .src{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.flow .src span{font-size:12.5px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.flow .side{margin-top:10px;border-left:3px solid #d08a00;padding:6px 10px;font-size:14px;color:var(--ink);background:color-mix(in srgb,#d08a00 8%,transparent);border-radius:0 8px 8px 0}
.flow li.back .no{background:transparent;color:var(--c);border:2px dashed var(--c)}
:root{--room:#1f5fe0;--cow:#7a5cd6;--data:#16834a;--scene:#0f7c96}
@media (prefers-color-scheme:dark){:root{--room:#7ea4ff;--cow:#a990ff;--data:#5fd394;--scene:#4fc3dc}.flow .no{color:#0b1020}}