*{box-sizing:border-box}body{margin:0;background:#170f0a;color:#fff0d5;font:15px system-ui,sans-serif}header{max-width:1080px;margin:auto;display:flex;justify-content:space-between;padding:16px 20px;gap:12px}header a{color:inherit;text-decoration:none}header span,.label small{color:#efbb75;font-size:11px;letter-spacing:.15em}main{max-width:1080px;margin:auto;padding:0 14px 22px}.stage{height:clamp(310px,58vh,540px);position:relative;isolation:isolate;border:1px solid #80593a;border-radius:20px;overflow:hidden;background:linear-gradient(#1b110c28,#1b110c88),url('/bar.jpg') center/cover}#ze{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);width:min(95%,475px,55vh);aspect-ratio:1;background:url('/ze-signals.webp') right bottom/300% 200%;filter:drop-shadow(0 10px 24px #0009)}#ze:not([data-active]){background:url('/ze-expressions.webp') left top/300% 200%}.felt{position:absolute;bottom:-10%;left:5%;width:90%;height:31%;border:8px solid #764322;border-radius:45% 45% 0 0 / 24% 24% 0 0;background:radial-gradient(ellipse at top,#365b3c,#122a20);box-shadow:0 -7px 24px #0007,inset 0 0 0 2px #aa8858}.label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);text-align:center;width:max-content;max-width:95%;border-radius:10px;background:#21160fee;border:1px solid #946d47;padding:9px 18px}.label strong{display:block;font-size:clamp(16px,3vw,22px);margin-top:3px}.controls{padding:12px 4px}.intro{display:flex;align-items:center;justify-content:space-between;gap:8px}h1{font-size:clamp(20px,4vw,30px);margin:0}p{margin:8px 0 12px;color:#cfb69d;font-size:13px}button{font:inherit;color:inherit;cursor:pointer;background:#3a2519;border:1px solid #755234;border-radius:9px;padding:10px}button:focus-visible{outline:2px solid #ffd289;outline-offset:3px}#start{background:#ad3527;font-weight:bold}#signals{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}#signals button{text-align:left}#signals button[aria-pressed=true]{background:#764322;border-color:#ffd289}button small{display:block;color:#f0c6a0;font-size:11px;margin-top:3px}@media(max-width:760px){#signals{grid-template-columns:repeat(3,1fr)}}
.felt{height:23%}
body{background:#170f0a;color:#f2e6d2}.stage{border-color:#775536;border-radius:15px}.label{background:#251b13f5;border-color:#876546}.label small{letter-spacing:.1em}#start{background:#a53529;border-color:#c65e49}#signals button{background:#302218;border-color:#73543b}#signals button[aria-pressed=true]{background:#49301f;border-color:#d8a46a}#signals button:hover{background:#443023}@media(max-width:360px){#signals{grid-template-columns:repeat(2,1fr)}}
:root[data-theme=day]{color-scheme:light}:root[data-theme=day] body{background:#eee3d1;color:#33261c}:root[data-theme=day] :is(header span,.label small,p,button small){color:#714e33}:root[data-theme=day] .label{background:#f7ead9ed;color:#442c1d;border-color:#a7825a}:root[data-theme=day] #signals button{background:#f7ead9;border-color:#ad8b67}:root[data-theme=day] #signals button[aria-pressed=true]{background:#ead2ad;border-color:#925830}:root[data-theme=day] #start{color:#fff0db}
