:root { --ink:#efe6d2; --gold:#c9a86a; --bg:#07070a; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); overflow:hidden; font-family: Georgia, "Times New Roman", serif; }
#stage { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.brand { position:fixed; top:22px; left:28px; transform:translate(0,-100%); white-space:normal; display:block; text-align:left; line-height:1.5; letter-spacing:.32em; text-transform:uppercase; pointer-events:none; opacity:0; animation: fade 2.4s .6s forwards; }
.brand .name { font-size:40px; color:var(--gold); margin-right:.45em; line-height:1.1; }
.brand .proto { font-size:16px; opacity:.82; letter-spacing:.06em; color:#fff; text-transform:none; line-height:1.5; }
.hint { position:fixed; left:0; right:0; bottom:26px; text-align:center; font-size:13px; letter-spacing:.08em; color:rgba(239,230,210,.55); margin:0; pointer-events:none; opacity:0; animation: fade 2.4s 1.6s forwards; text-shadow:0 0 6px #000, 0 0 14px #000; }
.hint.reading { animation:none; opacity:1; color:rgba(250,244,230,.95); text-shadow:0 0 4px #000, 0 0 10px #000, 0 0 22px rgba(0,0,0,.9); transition:opacity .6s; }
.hint.reading.gone { opacity:0; transition:opacity 1.4s; }
.hint.hide { animation:none; opacity:0; transition:opacity .6s; }
.panel { position:fixed; right:5vw; top:50%; transform:translateY(-50%); width:min(380px, 88vw); padding:28px 30px 26px; background:rgba(10,8,6,.72); border:1px solid rgba(201,168,106,.35); backdrop-filter: blur(6px); }
.panel[hidden] { display:none; }
.panel .num { margin:0 0 6px; color:var(--gold); letter-spacing:.3em; font-size:12px; }
.panel h2 { margin:0 0 6px; font-weight:normal; font-size:26px; line-height:1.2; }
.panel .sub { margin:0 0 16px; font-style:italic; color:rgba(239,230,210,.7); }
.panel .teaser { margin:0 0 22px; line-height:1.55; font-size:15px; color:rgba(239,230,210,.88); }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
button { font:inherit; font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding:10px 16px; color:#140f08; background:var(--gold); border:1px solid var(--gold); cursor:pointer; }
button.ghost { background:transparent; color:var(--ink); border-color:rgba(239,230,210,.4); }
button:hover { filter:brightness(1.08); }
.player { position:fixed; left:28px; bottom:66px; display:flex; align-items:center; gap:8px; padding:8px 14px 8px 8px; background:rgba(10,8,6,.62); border:1px solid rgba(201,168,106,.3); backdrop-filter:blur(5px); max-width:min(520px, calc(100vw - 56px)); opacity:0; transition:opacity .8s; }
.player.on { opacity:1; }
.player[hidden] { display:none; }
.player button { padding:4px 10px; font-size:15px; letter-spacing:0; min-width:34px; }
.pl-text { margin:0 0 0 8px; display:flex; flex-direction:column; min-width:0; }
#pl-comp { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
#pl-title { font-size:14px; color:rgba(239,230,210,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nogl { position:fixed; inset:0; padding:12vh 8vw; overflow:auto; background:var(--bg); }
.nogl[hidden] { display:none; }
.nogl h1 { font-weight:normal; color:var(--gold); letter-spacing:.3em; text-transform:uppercase; font-size:20px; }
.nogl li { margin:0 0 14px; line-height:1.5; }
@keyframes fade { to { opacity:1; } }
@media (max-width: 700px) { .panel { right:50%; transform:translate(50%,0); top:auto; bottom:14px; } }