:root{color-scheme:light;--ink:#332923;--rust:#a53d29;--paper:#eae3d7;--line:#48352828}*{box-sizing:border-box}body{margin:0;background:var(--paper);font-family:"PingFang TC","Noto Sans TC",sans-serif;color:var(--ink);overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}header{position:absolute;left:5vw;right:5vw;top:30px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{font-size:19px;letter-spacing:.17em;font-weight:800;color:inherit;text-decoration:none}.brand span{display:block;font-size:9px;letter-spacing:.23em;margin-top:7px;font-weight:500;opacity:.5}.build{font-size:10px;letter-spacing:.1em;opacity:.5}main{position:absolute;left:8vw;top:29%;pointer-events:none}.kicker{font-size:11px;letter-spacing:.15em;color:var(--rust);margin-bottom:24px}h1{font-size:clamp(32px,4.5vw,66px);line-height:1.15;letter-spacing:.07em;margin:0;font-weight:800}h1 span{display:block;font-size:14px;letter-spacing:.19em;font-weight:400;margin-top:19px}.intro{font-size:12px;line-height:2.1;opacity:.6;margin-top:29px}.number{font-family:Georgia,serif;font-size:38px;margin-top:27px}.number>span{font-size:13px}.number i{font-family:sans-serif;font-size:10px;letter-spacing:.1em;font-style:normal;border:1px solid #8c6c5540;padding:5px 8px;margin-left:10px;vertical-align:middle;color:#887361}.pose-note{position:absolute;right:12vw;top:22%;font-size:11px;display:flex;align-items:center;gap:8px;color:#78614e;pointer-events:none}.dot{width:6px;height:6px;border-radius:50%;background:#ba5733;box-shadow:0 0 10px #ba573340}.controls{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;border:1px solid #fff9;border-radius:15px;background:#eee9e0e8;backdrop-filter:blur(15px);box-shadow:0 12px 35px #5c473015;padding:13px 17px 11px}.control-label{font-size:9px;letter-spacing:.12em;color:#927f6b;margin-bottom:9px}.actions{display:flex;gap:7px}button{font-family:inherit;cursor:pointer}.actions button{font-size:12px;border:1px solid var(--line);background:#faf6eea8;color:#594a3b;border-radius:7px;min-width:74px;padding:11px 18px;transition:background .15s,transform .15s}.actions button:hover{background:#fffaf2;transform:translateY(-1px)}.actions button:active{transform:translateY(1px)}.actions .hit{background:var(--rust);color:#fff7e9;border-color:transparent}.utilities{display:flex;align-items:center;gap:15px;margin-top:11px}.utilities button,footer button{background:none;border:0;font-size:10px;color:#746351;padding:2px 0}.utilities button[aria-pressed=true]{color:var(--rust)}.utilities span{font-size:9px;color:#9b8d7b;margin-left:auto}footer{position:absolute;bottom:22px;left:5vw;right:5vw;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.04em;color:#8b7f6f}#metrics{position:absolute;right:5vw;bottom:47px;background:#fbf7eddb;padding:12px;border-radius:8px;font:10px/1.7 monospace;white-space:pre-line}#error{position:absolute;top:40%;left:45%;padding:20px;background:#fff0e8;color:#9f3428;border-radius:10px;max-width:40vw}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:2px solid var(--rust);outline-offset:4px}
@media(max-width:760px){header{top:20px}.brand{font-size:15px}.build{font-size:8px}main{left:6vw;top:19%}.kicker{display:none}h1{font-size:28px}h1 span{font-size:10px;margin-top:10px}.intro{display:none}.number{font-size:22px;margin-top:14px}.pose-note{right:8vw;top:39%;font-size:10px}.controls{bottom:52px;padding:10px}.actions{gap:4px}.actions button{min-width:0;padding:10px 11px;font-size:11px}.utilities{gap:10px}.utilities span{display:none}footer{bottom:16px;font-size:8px}#error{left:10%;max-width:80vw}}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}
#scrub{position:absolute;bottom:220px;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;font-size:10px;color:#8a6b53;background:#f8f1e5dd;padding:9px 15px;border-radius:20px}#scrub input{accent-color:#a53d29;width:150px} @media(max-width:760px){#scrub{bottom:205px}}
footer div{display:flex;gap:24px}
/* The same fixed framing is used for the image, floor projection and actor. */
body{display:grid;place-items:center;min-height:100vh;background:#19130f}
#arenaFrame{position:relative;width:min(100vw,177.6833156vh);aspect-ratio:1672/941;overflow:hidden}
canvas{position:absolute;width:100%;height:100%}
#alleyBackdrop{position:absolute;inset:0;background:url('assets/taiwan-alley.webp') center/100% 100% no-repeat}
#vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #24100035}
body[data-view=studio] #arenaFrame{width:100vw;height:100vh;aspect-ratio:auto}
body[data-view=studio] #alleyBackdrop,body[data-view=studio] #vignette{display:none}
body[data-view=alley] canvas{cursor:default}
body[data-view=alley] main,body[data-view=alley] .brand strong,body[data-view=alley] #sideView{display:none}
body[data-view=alley] header{top:18px;left:24px;right:24px;color:#fff0d6}
body[data-view=alley] .brand span{opacity:.9;font-size:10px;letter-spacing:.12em;text-shadow:0 1px 5px #000}
body[data-view=alley] .build{opacity:1;background:#22170bc4;border:1px solid #ffcb8e35;padding:6px 10px;border-radius:6px;font-size:9px}
body[data-view=alley] .pose-note{top:26%;right:18%;color:#ffe2b4;background:#291b10a3;border:1px solid #edc08e30;border-radius:20px;padding:6px 10px;font-size:10px}
body[data-view=alley] .dot{background:#ffb258;box-shadow:0 0 10px #ffa42b60}
body[data-view=alley] .controls{bottom:32px;padding:10px 13px 9px;background:#21180fe8;border-color:#e9bd893d;box-shadow:0 8px 24px #0005;border-radius:10px}
body[data-view=alley] .control-label{display:none}
body[data-view=alley] .actions button{background:#65463340;color:#ffe6c6;border-color:#c5a17b46;padding:9px 17px;min-width:70px;font-size:11px}
body[data-view=alley] .actions button:hover{background:#b97c354f}
body[data-view=alley] .actions .hit{background:#b3482d;border-color:#dd9b6a66}
body[data-view=alley] .utilities{margin-top:8px}
body[data-view=alley] .utilities button{color:#e2bc8e;font-size:9px}
body[data-view=alley] .utilities button[aria-pressed=true]{color:#ffe8bd}
body[data-view=alley] .utilities span{color:#ac8d6c;font-size:9px}
body[data-view=alley] footer{bottom:10px;left:22px;right:22px;color:#ffe3b9a1;font-size:8px}
body[data-view=alley] footer button{color:#ffe3b9;font-size:9px;text-shadow:0 1px 4px #000}
body[data-view=alley] #metrics{background:#22170ee8;color:#ffd5a0;border:1px solid #a5764f6b;right:20px;bottom:42px}
body[data-view=alley] #scrub{bottom:130px;background:#22170ee0;color:#f4d3a6;font-size:9px}
@media(max-width:760px){body[data-view=alley] header{top:9px;left:12px;right:12px}body[data-view=alley] .brand span{font-size:8px}body[data-view=alley] .build{font-size:7px;padding:4px 7px}body[data-view=alley] .controls{bottom:26px;padding:7px 9px}body[data-view=alley] .actions button{padding:7px 10px;min-width:0;font-size:10px}body[data-view=alley] .utilities{margin-top:5px}body[data-view=alley] footer{bottom:8px;left:12px;right:12px}body[data-view=alley] footer>span{display:none}body[data-view=alley] footer{justify-content:flex-end}body[data-view=alley] .pose-note{display:none}body[data-view=alley] #scrub{bottom:107px;padding:6px 10px}body[data-view=alley] #scrub input{width:110px}}
@media(max-width:1100px){body[data-view=alley] .controls{bottom:25px;padding:7px 10px}body[data-view=alley] .actions button{font-size:10px;padding:7px 14px;min-width:60px}body[data-view=alley] .utilities{margin-top:6px}body[data-view=alley] .utilities button,body[data-view=alley] .utilities span{font-size:8px}}
@media(max-width:760px){body[data-view=alley] .actions button{min-width:0;padding:7px 10px}}