:root{color-scheme:dark;font:16px/1.4 system-ui,sans-serif;color:#e9dfd8;background:#0c090b}
*{box-sizing:border-box}main{max-width:1060px;margin:auto;padding:20px clamp(14px,4vw,48px) 32px}
nav,.controls,.classes,.controls>div{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
nav,.controls{justify-content:space-between}a{color:#e6c393;text-decoration:none}a:hover{text-decoration:underline}
.eyebrow{font-size:.7rem;letter-spacing:.2em;color:#cb9a70;margin:2rem 0 .3rem}
h1,h2{font:500 clamp(1.7rem,4vw,2.65rem)/1.15 Georgia,serif;margin:0 0 1rem}
button{background:#1b1316;color:#e4d5c8;border:1px solid #513537;border-radius:.4rem;padding:.55rem .95rem;cursor:pointer;font:inherit}
button[aria-pressed=true]{background:#482128;border-color:#c58c61;color:#ffe3bc}
button:focus-visible,a:focus-visible{outline:2px solid #f9cb89;outline-offset:3px}
#stage{height:clamp(320px,54vh,630px);position:relative;isolation:isolate;overflow:hidden;margin:1rem 0;border:1px solid #654144;border-radius:.65rem;background:radial-gradient(ellipse at 50% 53%,#3b3539,#191419 58%,#100c10 90%)}
#stage canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.plate{position:absolute;bottom:1rem;left:1.2rem;pointer-events:none;z-index:1;text-shadow:0 2px 4px #000}
.plate h2{font-size:1.6rem;margin:0}.plate span{font-size:.83rem;color:#e9c998}#error{position:absolute;top:35%;left:10%;right:10%;text-align:center}
@media(max-width:510px){button{font-size:.87rem;padding:.45rem .65rem}.controls{row-gap:.75rem}.eyebrow{margin-top:1.2rem}}

#warriorOptions select{background:#21181b;border:1px solid #654144;color:#f1dbbd;border-radius:.35rem;padding:.4rem;font:inherit}
#modelStatus{position:absolute;top:1rem;left:1.2rem;color:#ead2b8;font-size:.85rem}