:root { color-scheme: dark; --ink:#f1e8d6; --muted:#a99f8d; --line:#3b382f; --turnip:#b9d45d; --paper:#181915; --panel:#21231e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.45 "DM Mono", monospace; }
header { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--line); }
header a, #download { color:var(--turnip); } header strong { font-family:Fraunces,serif; font-size:20px; } header span { color:var(--turnip); margin-right:9px; }
main { display:grid; grid-template-columns:minmax(300px,440px) minmax(0,1fr); min-height:calc(100vh - 58px); }
.catalogue { position:sticky; top:0; height:calc(100vh - 58px); overflow-y:auto; padding:16px 18px 22px; border-right:1px solid var(--line); background:#141510; }
.progress { display:flex; align-items:baseline; gap:18px; margin-bottom:12px; } .progress small { color:var(--muted); }
input { width:min(480px,100%); padding:11px; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:5px; font:inherit; }
nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:13px 0 4px; }
nav button { position:relative; display:block; padding:0; overflow:hidden; aspect-ratio:1; text-align:left; border:2px solid transparent; border-radius:6px; background:var(--panel); color:var(--ink); font:inherit; cursor:pointer; }
nav button > img { width:100%; height:100%; object-fit:cover; display:block; }
nav button > span { position:absolute; inset:auto 0 0; padding:24px 7px 7px; background:linear-gradient(transparent,rgba(0,0,0,.92)); }
nav button:hover, nav button.active { border-color:var(--turnip); } nav small { display:none; } nav strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11px; line-height:1.25; }
.stage { padding:clamp(14px,3vw,42px); max-width:1500px; width:100%; min-width:0; }
.badge { position:absolute; top:5px; right:5px; padding:2px 5px; border-radius:4px; background:rgba(0,0,0,.8); font-size:11px; font-weight:500; }
.badge.b0, .badge.b1 { color:#ff8f7a; } .badge.b2 { color:#e8b460; } .badge.b3, .badge.b4, .badge.b5 { color:var(--turnip); }
.rate-legend { color:var(--muted); font-size:12px; border-left:3px solid var(--turnip); padding-left:10px; margin-top:22px; }
.ratings { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }
.rate { border:1px solid var(--line); border-radius:8px; padding:12px; background:var(--panel); min-width:0; }
.rate-label { margin:0 0 8px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.rate-stars { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
.rate button { padding:8px 0; border:1px solid var(--line); border-radius:5px; background:#2a2d26; color:var(--ink); font:inherit; cursor:pointer; }
.rate button:hover { border-color:var(--turnip); }
.rate-stars button.active { background:var(--turnip); color:#141510; border-color:var(--turnip); }
.rate-stars button.active[data-stars="0"], .rate-stars button.active[data-stars="1"] { background:#d9654f; border-color:#d9654f; }
.rate-stars button.active[data-stars="2"] { background:#e8b460; border-color:#e8b460; }
.rate-meaning { min-height:1.2em; margin:8px 0; color:var(--muted); font-size:12px; }
.rate textarea { width:100%; padding:8px; border:1px solid var(--line); border-radius:5px; background:#141510; color:var(--ink); font:13px "DM Mono",monospace; resize:vertical; }
.rate-foot { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:8px; }
.rate-foot button { padding:6px 10px; }
.rate-tag.active { background:#d9654f; border-color:#d9654f; color:#141510; }
.rate-status { color:var(--muted); font-size:12px; }
figure { margin:0; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
figcaption { padding:10px 13px; color:var(--muted); border-bottom:1px solid var(--line); }
.hero-model model-viewer { display:block; width:100%; height:min(68vh,850px); min-height:500px; background:#292d28; }
.details { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:30px; padding:24px 2px; align-items:start; } h1 { font:900 clamp(30px,4vw,52px)/1 Fraunces,serif; margin:5px 0 12px; } .eyebrow { color:var(--turnip); text-transform:uppercase; letter-spacing:.08em; } #meta,#hint { color:var(--muted); }
.reference img { display:block; width:100%; aspect-ratio:1; object-fit:cover; } .reference figcaption { font-size:12px; padding:7px 9px; }
@media (max-width:760px) { main { grid-template-columns:1fr; } header { padding:0 14px; } .catalogue { position:static; height:auto; max-height:46vh; padding:14px; border-right:0; border-bottom:1px solid var(--line); } .progress { display:block; } .progress small { display:block; margin-top:5px; } .ratings { grid-template-columns:1fr; } .stage { padding:14px; } .hero-model model-viewer { min-height:0; height:58vh; } .details { grid-template-columns:minmax(0,1fr) 110px; gap:13px; } }