* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #efeae0; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#scene { position: absolute; inset: 0; overflow: hidden; }

#ot-ground { position: absolute; inset: 0; background: #efeae0; }
#ot-grain { position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: multiply; pointer-events: none; }
#ot-grain svg { width: 100%; height: 100%; display: block; }
/* dark grounds: Chrome draws the vignette without dithering, so near black it steps in 1-level rings ~200 px wide.
   A faint static white noise under the world (±1.5 levels) breaks them up; it survives crf 15. */
#ot-dither { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
#ot-dither svg { width: 100%; height: 100%; display: block; }
#ot-roll { position: absolute; inset: 0; transform-origin: 960px 640px; }
#ot-stage { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 960px 640px; }
#ot-world { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-style: preserve-3d; }
.ot-seq { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-style: preserve-3d; }
.ot-plane { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.ot-free { position: absolute; left: 0; top: 0; }
.ot-3d { transform-style: preserve-3d; }
#ot-screen { position: absolute; inset: 0; pointer-events: none; }
.ot-seq-screen { position: absolute; inset: 0; }
#ot-hero { position: absolute; left: 0; top: 0; font-family: "JetBrains Mono", monospace; font-weight: 700; white-space: pre; color: #ffc54d; visibility: hidden; }
#ot-vignette { position: absolute; inset: 0; background: radial-gradient(1300px 820px at 50% 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%); opacity: 0.25; pointer-events: none; }
#ot-flash { position: absolute; inset: 0; background: #fff8ee; opacity: 0; }
#ot-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; pointer-events: none; }
#ot-cap { position: absolute; left: 160px; right: 160px; bottom: 64px; text-align: center; font-family: "Fraunces", serif; font-size: 40px; line-height: 1.25; font-weight: 420; letter-spacing: -0.005em; font-variation-settings: "opsz" 36; color: #1e1d1a; }
#ot-fade { position: absolute; inset: 0; background: #000; opacity: 0; }
.ot-mote { position: absolute; left: 0; top: 0; font-family: "JetBrains Mono", monospace; line-height: 1; border-radius: 50%; }

/* ---------- code: one syntax palette for paper, one for night ---------- */
.ot-code { position: absolute; left: 0; top: 0; font-family: "JetBrains Mono", monospace; white-space: pre; }
.ot-code .row { position: absolute; left: 0; white-space: pre; }
.ot-code.paper { color: #2a2925; }
.ot-code.paper .k { color: #a2462b; }
.ot-code.paper .pp { color: #4f6688; }
.ot-code.paper .fn { color: #1e1d1a; font-weight: 700; }
.ot-code.paper .s { color: #a26a05; }
.ot-code.paper .esc { color: #8a5300; }
.ot-code.paper .num { color: #6d5ba8; }
.ot-code.paper .pu { color: #7a756b; }
.ot-code.paper .ty { color: #2f6e6a; }
.ot-code.paper .cm { color: #9a9384; }
.ot-code.night { color: #e6eef8; }
.ot-code.night .k { color: #ffb59a; }
.ot-code.night .pp { color: #b9ccff; }
.ot-code.night .fn { color: #ffffff; font-weight: 700; }
.ot-code.night .s { color: #ffc54d; text-shadow: 0 0 16px rgba(255, 190, 70, 0.55); }
.ot-code.night .esc { color: #ffe08f; }
.ot-code.night .num { color: #c9b8ff; }
.ot-code.night .pu { color: #9fb3c8; }
.ot-code.night .ty { color: #8fe0d6; }
.ot-code.night .cm { color: #6f7f94; }
.ot-code.night .reg { color: #8fe0ff; }
.ot-code.night .lbl { color: #b9ccff; }
.ot-code.night .hex { color: #82dcff; text-shadow: 0 0 12px rgba(90, 200, 255, 0.45); }

/* ---------- the surface page (editor + terminal) ---------- */
.ot-page { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; }
.ot-page .tab { position: absolute; left: 520px; top: 262px; font-size: 22px; color: #9a9384; letter-spacing: 0.02em; }
.ot-page .tab b { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c9c1b2; margin-right: 10px; vertical-align: 3px; }
.ot-page .ln { position: absolute; left: 430px; width: 50px; text-align: right; font-size: 22px; line-height: 72px; color: #c2bbad; }
.ot-page .rule { position: absolute; left: 520px; top: 712px; width: 880px; height: 2px; background: #d8d1c3; }
.ot-page .term { position: absolute; left: 520px; top: 732px; width: 880px; }
.ot-page .tl { position: absolute; left: 0; height: 50px; line-height: 50px; font-size: 32px; white-space: pre; color: #3b3a35; }
.ot-page .tl .pr { color: #a59e8f; }
.ot-page .tl .out { color: #a26a05; font-weight: 700; }
.ot-page .tl .dim { color: #a59e8f; }
.ot-page .tcaret { position: absolute; width: 3px; height: 38px; background: #1e1d1a; }
.ot-page .pill { position: absolute; left: 1250px; top: 250px; width: 150px; height: 52px; border: 2.5px solid #1e1d1a; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 25px; font-weight: 700; color: #1e1d1a; transform-origin: 100% 50%; }
.ot-page .pill svg { display: block; width: 18px; height: 20px; }

/* ---------- the executable on disk ---------- */
.ot-slab { position: absolute; left: 0; top: 0; width: 760px; height: 470px; border-radius: 6px; background: linear-gradient(180deg, #121826 0%, #0b0f19 100%); box-shadow: 0 0 0 1.5px rgba(140, 200, 255, 0.35), 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 80px rgba(80, 160, 255, 0.12); overflow: hidden; font-family: "JetBrains Mono", monospace; }
.ot-slab .hdr { position: absolute; left: 0; right: 0; top: 0; height: 64px; display: flex; align-items: center; gap: 18px; padding: 0 26px; border-bottom: 1.5px solid rgba(140, 200, 255, 0.25); }
.ot-slab .name { font-size: 30px; font-weight: 700; color: #eef4ff; }
.ot-slab .magic { font-size: 22px; color: #ffc54d; text-shadow: 0 0 12px rgba(255, 190, 70, 0.6); }
.ot-slab .kind { margin-left: auto; font-size: 18px; color: rgba(160, 200, 255, 0.7); letter-spacing: 0.04em; }
.ot-slab .bytes { position: absolute; left: 26px; top: 84px; right: 26px; font-size: 19px; line-height: 30px; color: rgba(130, 220, 255, 0.55); white-space: pre; }
.ot-slab .bytes b { color: #ffc54d; font-weight: 400; }
.ot-slab .size { position: absolute; right: 26px; bottom: 16px; font-size: 18px; color: rgba(160, 200, 255, 0.7); }

/* ---------- a process: a cell of light ---------- */
.ot-cell { position: absolute; left: 0; top: 0; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, rgba(255, 236, 200, 0.42), rgba(255, 196, 120, 0.16) 52%, rgba(255, 170, 90, 0.04) 72%, rgba(255, 170, 90, 0) 74%); box-shadow: inset 0 0 0 2px rgba(255, 214, 160, 0.55), 0 0 60px rgba(255, 190, 110, 0.22); font-family: "JetBrains Mono", monospace; }
.ot-cell .lab { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 30px; color: #fff3df; font-weight: 700; }
.ot-cell .pid { position: absolute; left: 0; right: 0; top: calc(50% + 30px); text-align: center; font-size: 20px; color: rgba(255, 230, 200, 0.7); }

/* ---------- the address space ---------- */
.ot-mem { position: absolute; left: 0; top: 0; width: 640px; font-family: "JetBrains Mono", monospace; }
.ot-mem .band { position: absolute; left: 0; width: 640px; border-radius: 4px; border: 1.5px solid rgba(255, 220, 170, 0.7); background: rgba(255, 210, 150, 0.08); }
.ot-mem .band.promised { border-style: dashed; border-color: rgba(255, 220, 170, 0.45); background: transparent; }
.ot-mem .band.code { border-color: rgba(140, 220, 255, 0.85); background: rgba(120, 200, 255, 0.1); }
.ot-mem .band.code.promised { border-color: rgba(140, 220, 255, 0.5); background: transparent; }
.ot-mem .band .nm { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: #fff1dc; }
.ot-mem .band .pm { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; color: rgba(255, 230, 200, 0.6); }
.ot-mem .band .gold { color: #ffc54d; text-shadow: 0 0 12px rgba(255, 190, 70, 0.6); }
.ot-mem .addr { position: absolute; left: -210px; width: 190px; text-align: right; font-size: 17px; color: rgba(220, 210, 255, 0.55); }

/* ---------- layer split + bilingual captions (engine/layers.js) ---------- */
html[data-ot-layer="captions"], html[data-ot-layer="captions"] body { background: transparent !important; }
html[data-ot-layer="captions"] #scene > :not(#ot-cap):not(#ot-cap2) { display: none !important; }
/* bilingual block: English line(s), the Chinese line(s) under them, bottom-anchored in the caption band */
#ot-cap2 { position: absolute; left: 140px; right: 140px; bottom: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
#ot-cap2 .en { font-family: "Fraunces", serif; font-size: 36px; line-height: 1.22; font-weight: 420; letter-spacing: -0.005em; font-variation-settings: "opsz" 36; }
/* Chinese: "OT Serif SC" = Noto Serif SC Medium (500), the family's only face (@font-face in index.html), so weight 420
   draws Han in Medium while Latin words inside the line, outside the face's unicode-range, use Fraunces 420 */
#ot-cap2 .zh { font-family: "OT Serif SC", "Fraunces", serif; font-size: 35px; line-height: 1.36; font-weight: 420; letter-spacing: 0.03em; white-space: pre-line; line-break: strict; }