:root{--bg:#080a1d;--bg2:#14112e;--card:#1e1640;--violet:#502e6f;--violet2:#624275;--gold:#f7d573;--gold2:#c1a264;--neon:#83d3e0;--cyan:#4eb9dc;--txt:#efeaff;--mute:#b3abd6}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:radial-gradient(circle at 20% 0,#2b1b4a,var(--bg) 60%);color:var(--txt);padding-bottom:80px;min-height:100vh}
a{color:var(--neon)}h1,h2,h3{font-family:Georgia,serif;color:var(--gold);text-shadow:0 0 12px #f7d57366}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#080a1dcc;position:sticky;top:0;backdrop-filter:blur(8px);z-index:5;border-bottom:1px solid #f7d57333}
.logo{font-weight:900;font-size:1.4rem;color:var(--gold);text-decoration:none;letter-spacing:3px;text-shadow:0 0 10px var(--cyan)}
.topnav{display:none;gap:18px}.topnav a{color:var(--txt);text-decoration:none}.topnav a.on,.tabbar a.on{color:var(--neon)}
.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:#0e0c24f0;border-top:1px solid #4eb9dc55;padding:8px 0;z-index:5}
.tabbar a{color:var(--mute);text-decoration:none;font-size:.7rem;text-align:center}.tabbar span{display:block;font-size:1.3rem}
main{max-width:1100px;margin:auto;padding:18px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:linear-gradient(160deg,#241a4c,var(--card) 60%,#1a1436);background:var(--card);border:1px solid #f7d57333;border-radius:16px;padding:16px;box-shadow:0 0 20px #4eb9dc1a}
.ph{display:inline-block;background:transparent;border:1px dashed var(--gold);color:var(--gold);font-size:.65rem;padding:2px 6px;border-radius:6px;font-weight:700;letter-spacing:1px;vertical-align:middle}
.img{aspect-ratio:1;border-radius:12px;background:linear-gradient(135deg,#502e6f,#14112e);display:grid;place-items:center;color:var(--mute);font-size:.8rem;margin-bottom:10px}
.btn{display:inline-block;background:linear-gradient(90deg,var(--gold),var(--gold2));color:#14112e;border:0;border-radius:999px;padding:10px 18px;font-weight:700;text-decoration:none;cursor:pointer;margin:4px 4px 4px 0}
.btn.ghost{background:none;border:1px solid var(--neon);color:var(--neon)}
.tag{font-size:.7rem;border:1px solid var(--neon);color:var(--neon);border-radius:6px;padding:1px 6px;margin-left:4px}
.hero{text-align:center;padding:30px 10px}.hero p{color:var(--mute)}
input,select{background:var(--bg2);color:var(--txt);border:1px solid #4eb9dc77;border-radius:10px;padding:10px;font-size:1rem;width:100%;margin:6px 0}
.moods{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.moods button{background:var(--bg2);border:1px solid #f7d57355;color:var(--txt);border-radius:999px;padding:8px 12px;cursor:pointer}.moods button.sel{background:var(--gold);color:#14112e}
table{width:100%;border-collapse:collapse}td,th{padding:8px;border-bottom:1px solid #ffffff1a;text-align:left;vertical-align:top}th{color:var(--gold)}
.strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}.strip .card{min-width:160px}
footer{padding:24px 18px;text-align:center;color:var(--mute);border-top:1px solid #f7d57322;margin-top:30px}
li{margin:4px 0}
@media(min-width:800px){.topnav{display:flex}.tabbar{display:none}body{padding-bottom:0}}
.codex p{line-height:1.6;margin:.4em 0}.codex h3{margin:1.2em 0 .3em;font-size:1.05rem;color:var(--neon);text-shadow:none}.toc{columns:2 260px}
.logo{display:flex;align-items:center;gap:4px}.logo img{height:40px;width:40px;border-radius:8px;display:block}.hero-logo{width:min(70vw,320px);border-radius:20px;box-shadow:0 0 40px #f7d57355;display:block;margin:0 auto 14px}
a{color:var(--neon)}a:hover{color:var(--gold)}.topnav a.on,.tabbar a.on{color:var(--neon);text-shadow:0 0 8px var(--cyan)}.card{border-color:#f7d57333}
.acc summary{cursor:pointer;list-style:none}.acc summary::before{content:"⚡ ";color:var(--neon)}.acc[open] summary::before{color:var(--gold)}

.img.has-img{position:relative;overflow:hidden;padding:0}.img.has-img img{width:100%;height:100%;object-fit:cover;display:block}.img.has-img .ph{position:absolute;bottom:6px;right:6px}
.hero-img{display:block;width:100%;max-width:720px;height:auto;margin:0 auto 16px;border-radius:14px}

.scene-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.scene-grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.scene .vibe{color:var(--mute,#c9c3e6);font-size:.95rem}.tagline{color:#f7d573;font-size:1.15rem}
.scene-play{position:relative;display:block;width:100%;padding:0;border:0;background:#080a1d;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:16/9;margin-bottom:10px}
.scene-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}.scene-play:hover img{transform:scale(1.04)}
.play-ov{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#080a1dcc;color:#f7d573;font-size:1.4rem;box-shadow:0 0 0 2px #f7d573,0 0 22px #4eb9dc;padding-left:4px}
#scene-modal{border:1px solid #4eb9dc;border-radius:14px;background:#080a1d;color:#efeaff;padding:12px;width:min(960px,94vw);max-height:92vh}
#scene-modal::backdrop{background:#080a1de6}#scene-modal video{width:100%;max-height:75vh;border-radius:10px;display:block;background:#000}
#scene-modal .close{float:right;background:none;border:1px solid #f7d573;color:#f7d573;border-radius:50%;width:34px;height:34px;cursor:pointer}#scene-modal h3{margin:4px 0 10px}
.scene .btn{white-space:normal}