:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#1b231c;color:#f3ead7}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:auto;padding:32px 24px}header p:first-child{font-size:11px;letter-spacing:.2em;color:#c9b77d}h1{font:clamp(32px,5vw,54px) Georgia,serif;margin:12px 0}header p{color:#c3c5b4}.stage{height:430px;position:relative;margin:28px 0 18px;border:1px solid #59614a;border-radius:16px;overflow:hidden;background:#ded4b9}canvas{width:100%;height:100%;display:block}#status{position:absolute;bottom:18px;left:22px;font-size:12px;letter-spacing:.06em;color:#393a2b}nav,.settings{display:flex;flex-wrap:wrap;gap:10px}button{padding:12px 20px;border:1px solid #636b50;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer}button:hover,button[aria-pressed=true]{background:#d9c797;color:#1d281d}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ead799;outline-offset:4px}.settings{margin:24px 0;align-items:center;gap:24px;font-size:13px}.settings button{font-size:13px}label{display:flex;gap:8px;align-items:center}input[type=range]{width:95px;accent-color:#c9b77d}footer{border-top:1px solid #46513b;padding:24px 0;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#a5ad99}a{color:#e0cb8f}@media(max-width:600px){main{padding:20px 16px}.stage{height:350px}nav{gap:7px}nav button{padding:10px 12px;font-size:13px}.settings{gap:16px}footer{flex-direction:column}}

#character{font:inherit;padding:.35rem .7rem;border:1px solid #a99976;border-radius:.4rem;background:#f8f1e3;color:#302819;margin:.5rem;} [hidden]{display:none!important;}
nav[aria-label="Direzioni"]{margin-top:12px}button:disabled{opacity:.4;cursor:default}footer{flex-wrap:wrap}footer span{max-width:400px;line-height:1.6}