
*{box-sizing:border-box}body{margin:0;background:#101728;color:#e7ecf6;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow:hidden}canvas{display:block;width:100vw;height:100dvh}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #69efef;outline-offset:4px}header{position:absolute;left:36px;top:30px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:3px;color:#839aba}h1{font-size:34px;letter-spacing:3px;font-weight:550;margin:12px 0 9px}header p{font-size:12px;letter-spacing:.6px;margin:0;color:#8e9cb7}.badge{display:inline-flex;align-items:center;gap:8px;font-size:10px;margin-top:18px;padding:7px 11px;border:1px solid #7997c02b;border-radius:20px;background:#1a294380;color:#afc1d7}.badge i{width:5px;height:5px;background:#58e7e4;border-radius:50%;box-shadow:0 0 9px #38eae990}.tools{position:absolute;right:30px;top:30px;display:flex;gap:8px}.tools button,.tools a{border:1px solid #94a6cd2b;background:#1d2b4280;color:#c3d0e5;text-decoration:none;font-size:11px;border-radius:25px;padding:11px 15px;backdrop-filter:blur(10px)}.tools button:hover,.tools a:hover{background:#2b3d5ac9}.credit{position:absolute;right:32px;top:83px;display:flex;gap:15px}.credit a{font-size:10px;color:#748cae;text-decoration:none}.credit a:hover{color:#b9d9f0}.bottom{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 40px))}.introline{display:flex;justify-content:space-between;padding:0 8px 12px;font-size:10px;color:#8597b2;letter-spacing:1px}.dock{padding:7px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#152238e8;border:1px solid #6783ac33;box-shadow:0 12px 40px #0004;border-radius:16px;backdrop-filter:blur(16px)}.slot{text-align:left;border:1px solid transparent;background:transparent;border-radius:10px;padding:12px;color:#cdd9e9;min-width:0}.slot:hover,.slot[aria-pressed=true]{background:#244052b3;border-color:#53c3c459}.slot span{font-size:9px;letter-spacing:1px;color:#6e91a8;display:block}.slot strong{font-size:12px;font-weight:550;display:block;margin:7px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot small{font-size:9px;color:#718ba5}.hint{position:absolute;left:30px;bottom:35px;font-size:10px;writing-mode:vertical-rl;letter-spacing:2px;color:#71839f}#status{position:absolute;right:30px;bottom:170px;font-size:10px;color:#8095b3;max-width:150px;text-align:right;line-height:1.6;pointer-events:none}@media(max-width:760px){header{left:20px;top:22px}h1{font-size:27px}.tools{right:16px;top:23px;flex-direction:column}.tools button,.tools a{padding:9px 12px;font-size:10px}.credit{right:18px;top:195px;flex-direction:column;gap:10px}.hint{display:none}.bottom{bottom:18px;width:calc(100% - 24px)}.slot{padding:9px 5px}.slot strong{font-size:10px}.slot small{font-size:8px}.introline{font-size:9px}#status{bottom:170px;right:20px}.badge{margin-top:12px}header p{font-size:10px}}

/* Warm paper UI complements the autumn diorama, keeping the same four-slot layout. */
body{background:#cbd6d6;color:#35443d}.eyebrow{color:#6c7565}header p{color:#627365}.badge{background:#f4efdf85;border-color:#f9f5eb77;color:#65705c}.badge i{background:#bc703a;box-shadow:none}.tools button,.tools a{background:#f6f2e49c;border-color:#ffffff70;color:#49594e}.tools button:hover,.tools a:hover{background:#fff8e9dd}.credit a{color:#687970}.dock{background:#f0ecdfdf;border-color:#fff9e8aa;box-shadow:0 12px 40px #45564818}.slot{color:#3f5147}.slot span,.slot small{color:#7b806b}.slot:hover,.slot[aria-pressed=true]{background:#dfccb18c;border-color:#ad844452}.introline,.hint,#status{color:#677669}button:focus-visible,a:focus-visible{outline-color:#a76a35}
.credit button{font:inherit;font-size:10px;border:0;background:#eadab3;color:#554626;border-radius:12px;padding:4px 9px;cursor:pointer}.credit{align-items:center;gap:10px;flex-wrap:wrap;max-width:calc(100% - 64px);justify-content:flex-end}.credit button:disabled{opacity:.5;cursor:wait}.credit button[aria-pressed=false]{background:#e5e4df;color:#687970}@media(max-width:760px){.credit{top:240px;align-items:flex-end}}
.scene-nav{position:absolute;right:30px;top:117px;display:flex;gap:5px;flex-wrap:wrap;max-width:420px;justify-content:flex-end}.scene-nav a{font-size:10px;color:#53645a;text-decoration:none;background:#faf7e8b8;border:1px solid #ffffff70;border-radius:12px;padding:6px 9px}.scene-nav a[aria-current=page]{background:#d2b778;color:#343e35}.scene-desert{background:#e5d4ba}.scene-snow{background:#cbdce4}.scene-bsc{background:#e1e2d8}.scene-bsc .badge{background:#e7cf91a0}.scene-snow .badge{background:#e8f4f6b0}.scene-nav a:focus-visible{outline:2px solid #9d7433}@media(max-width:760px){.scene-nav{top:205px;right:16px;max-width:135px}.decoration-tools{top:180px;max-width:210px}}
/* BNB financial district: a night palette independent of the daylight scenes. */
.scene-bsc{background:#101827;color:#e7dabb}.scene-bsc .eyebrow{color:#b1a589}.scene-bsc header p{color:#9dacc1}.scene-bsc .badge{background:#332e2380;border-color:#be9e4c44;color:#d4bd82}.scene-bsc .badge i{background:#f2c465}.scene-bsc .tools button,.scene-bsc .tools a,.scene-bsc .scene-nav a{background:#1c2b41bd;border-color:#a1b5cc25;color:#bfcede}.scene-bsc .tools button:hover,.scene-bsc .scene-nav a:hover{background:#33475fcf}.scene-bsc .scene-nav a[aria-current=page]{background:#796137;color:#fff0c9}.scene-bsc .credit a,.scene-bsc .hint,.scene-bsc .introline,.scene-bsc #status{color:#a1b0c4}.scene-bsc .dock{background:#17263ae8;border-color:#b69a5140;box-shadow:0 12px 40px #0004}.scene-bsc .slot{color:#d4dde8}.scene-bsc .slot span,.scene-bsc .slot small{color:#879cb1}.scene-bsc .slot:hover,.scene-bsc .slot[aria-pressed=true]{background:#524b3580;border-color:#b6994d77}.scene-bsc .decoration-tools{color:#d6dde4}.scene-bsc .decoration-tools button,.scene-bsc .decoration-tools summary,.scene-bsc .decoration-tools details[open]{background:#1b2a3fea;border-color:#8a9db144}.scene-bsc .decoration-row select{background:#273b50;color:#d6dde4}
.scene-bsc .scene-nav{left:30px;right:auto;top:283px;max-width:220px;justify-content:flex-start}.scene-bsc:has(.decoration-tools details[open]) .scene-nav{display:none}@media(max-width:760px){.scene-bsc .scene-nav{left:16px;top:265px;max-width:205px}}

/* Orbital deck shares the demand-rendered night palette. */
/* BNB financial district: a night palette independent of the daylight scenes. */
.scene-station{background:#101827;color:#d8eaf3}.scene-station .eyebrow{color:#b1a589}.scene-station header p{color:#9dacc1}.scene-station .badge{background:#332e2380;border-color:#be9e4c44;color:#91d8ed}.scene-station .badge i{background:#f2c465}.scene-station .tools button,.scene-station .tools a,.scene-station .scene-nav a{background:#1c2b41bd;border-color:#a1b5cc25;color:#bfcede}.scene-station .tools button:hover,.scene-station .scene-nav a:hover{background:#33475fcf}.scene-station .scene-nav a[aria-current=page]{background:#305c76;color:#c4f3ff}.scene-station .credit a,.scene-station .hint,.scene-station .introline,.scene-station #status{color:#a1b0c4}.scene-station .dock{background:#17263ae8;border-color:#b69a5140;box-shadow:0 12px 40px #0004}.scene-station .slot{color:#d4dde8}.scene-station .slot span,.scene-station .slot small{color:#879cb1}.scene-station .slot:hover,.scene-station .slot[aria-pressed=true]{background:#524b3580;border-color:#b6994d77}.scene-station .decoration-tools{color:#d6dde4}.scene-station .decoration-tools button,.scene-station .decoration-tools summary,.scene-station .decoration-tools details[open]{background:#1b2a3fea;border-color:#8a9db144}.scene-station .decoration-row select{background:#273b50;color:#d6dde4}
.scene-station .scene-nav{left:30px;right:auto;top:283px;max-width:220px;justify-content:flex-start}.scene-station:has(.decoration-tools details[open]) .scene-nav{display:none}@media(max-width:760px){.scene-station .scene-nav{left:16px;top:265px;max-width:205px}}

.scene-basic .badge{background:#e3ecdba8}.scene-basic .scene-nav{left:30px;right:auto;top:283px;max-width:230px;justify-content:flex-start}.scene-basic:has(.decoration-tools details[open]) .scene-nav{display:none}@media(max-width:760px){.scene-basic .scene-nav{left:16px;top:265px;max-width:205px}}
