:root{--ink:#05070b;--ivory:#e9e4dc;--muted:#a5a5b1;--line:rgba(216,205,177,.58);--gold:#c7ad7b}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--ink);color:var(--ivory);font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif}body{overflow:hidden}#app{position:relative;width:100%;height:100%;min-height:540px;isolation:isolate;background:radial-gradient(ellipse at 50% 45%,#101927 0%,#070a11 52%,#020307 100%)}#scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1}#camera{position:absolute;right:18px;bottom:90px;width:150px;opacity:.08;transform:scaleX(-1);border-radius:12px;pointer-events:none}.topbar{position:absolute;left:clamp(20px,4vw,64px);right:clamp(20px,4vw,64px);top:26px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px}.brand-mark{color:#c9b78d;font-size:28px}.brand strong{display:block;font-family:serif;letter-spacing:.16em;font-size:16px;font-weight:500}.brand small{display:block;margin-top:5px;font-size:8px;letter-spacing:.2em;color:#8f8c89}.status{display:flex;gap:9px;align-items:center;font-size:11px;color:#b5b4bc}.status i{width:6px;height:6px;background:#a9cbb8;border-radius:50%;box-shadow:0 0 12px #a9cbb8}.intro{position:absolute;top:12%;left:0;right:0;text-align:center;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:.38em;color:#b5a27c;margin:0 0 10px}.intro h1{font-family:"Songti SC","STSong",serif;font-size:clamp(30px,4vw,52px);font-weight:400;letter-spacing:.34em;margin:0 0 12px;padding-left:.34em;text-shadow:0 0 32px #b6c7d622}.intro h1 span{color:#b9a57c}.intro>p:last-child{font-family:serif;letter-spacing:.15em;color:#b3b3bd;font-size:12px}.hud{position:absolute;left:50%;top:27%;transform:translateX(-50%);width:min(560px,72vw);display:flex;justify-content:space-between;color:#c6bdab;font-size:11px;letter-spacing:.12em}.bottom-controls{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:90%}button{background:rgba(15,20,29,.72);color:#e8e2d8;border:1px solid rgba(211,195,160,.36);padding:11px 17px;border-radius:3px;font-size:11px;letter-spacing:.08em;cursor:pointer;backdrop-filter:blur(10px);transition:.2s}button:hover{border-color:#d6c49d;background:rgba(45,46,52,.8)}button.primary{background:#c6b28c;color:#16151a;border-color:#c6b28c}.volume{font-size:10px;color:#c4bfba;display:flex;align-items:center;gap:8px;margin-left:12px}.volume input{width:80px;accent-color:#c6b28c}.hint{position:absolute;bottom:23px;left:0;right:0;text-align:center;color:#777984;font-size:10px;letter-spacing:.05em}.corner-note{position:absolute;right:clamp(20px,4vw,64px);bottom:23px;font-size:8px;letter-spacing:.16em;color:#555b66}@media(max-width:650px){.topbar{top:18px}.status{max-width:140px;font-size:9px}.intro{top:13%}.hud{top:28%;width:82vw}.bottom-controls{bottom:65px;gap:7px}button{padding:10px 12px}.volume{width:100%;justify-content:center;margin:5px 0 0}.hint{bottom:18px;padding:0 16px;font-size:9px}.corner-note{display:none}}