:root{color-scheme:dark;font-family:Consolas,monospace;color:#e9ddc4;background:#11191d}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 45%,#354046 0,#17232a 50%,#0b1217 100%);min-height:100vh}header{height:68px;display:flex;align-items:center;gap:24px;padding:0 4vw;border-bottom:1px solid #394347;font-size:12px;letter-spacing:.1em}header a{font-weight:900;color:#f28b35;text-decoration:none;font-size:17px}header small{margin-left:auto;color:#929b98}main{max-width:1800px;margin:auto}#stage{position:relative;height:min(73vw,76vh);min-height:360px}canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}#loading{position:absolute;inset:45% 0;text-align:center;pointer-events:none}.controls{padding:0 5vw 24px}.transport,.options{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.options{margin-top:18px;font-size:12px;color:#b8bbae;gap:22px}button{font:inherit;cursor:pointer;background:#242f35;color:#f1e0bf;border:1px solid #6d7168;border-radius:4px;padding:9px 18px;box-shadow:0 3px #070e13}button:hover{border-color:#ffb54f;color:white}button:focus-visible,input:focus-visible{outline:2px solid #ffb54f;outline-offset:4px}button:active{transform:translateY(2px);box-shadow:0 1px #070e13}#play{background:#d98325;color:#171a1b;font-weight:bold}#status{margin-left:auto;color:#e8b86a;font-size:13px}label{display:flex;align-items:center;gap:7px}input{accent-color:#ec9e38}p{color:#929e9c;font-size:12px;line-height:1.6}dialog{max-width:460px;background:#17242b;color:#f8e6bb;border:1px solid #d59a50;padding:28px}dialog::backdrop{background:#0009}#close-info{float:right}@media(max-width:600px){header{height:56px;gap:12px}header a{font-size:12px}header small{display:none}#stage{height:55vh;min-height:300px}.transport{gap:8px}button{padding:9px 13px}#status{width:100%;margin:8px 0}.options{gap:13px}.controls{padding:0 16px 20px}}

/* Public selector; inspection tools are available at ?workshop=1. */
.options{display:none}.workshop .options{display:flex}
#cartridges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
#cartridges button{font-size:12px;padding:10px 8px;border-color:#4c5a60;box-shadow:none}
#cartridges button[aria-pressed="true"]{border-color:#f4b45f;background:#493626;color:#fff0d8}
#play{background:#328852;color:#fff}button:disabled{opacity:.5;cursor:default}
a{color:#ecc58c}.embedded header{display:none}.embedded{min-height:0;background:transparent}
.embedded #stage{height:clamp(330px,48vw,650px);min-height:0}
.embedded .controls{padding:0 4% 16px}.embedded p{margin-bottom:0}
@media(max-width:600px){#cartridges{gap:5px}#cartridges button{font-size:10px;padding:9px 4px;min-height:44px}.embedded #stage{height:320px}.transport button{min-height:44px}}
.cabinet-mode,.cabinet-mode body{background:transparent}
.cabinet-mode .controls{opacity:.75}
.cabinet-mode .controls:focus-within,.cabinet-mode .controls:hover{opacity:1}

/* Cabinet Night uses the physical controls. Keyboard controls appear only while focused. */
.cabinet-mode main{max-width:none}
.cabinet-mode .embedded #stage{width:100%;height:100vh;min-height:0}
.cabinet-mode .controls{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);opacity:1}
.cabinet-mode .controls:focus-within{width:calc(100% - 32px);height:auto;left:16px;bottom:12px;clip-path:none;overflow:visible;background:#101a20f5;border:1px solid #dcb77a;padding:12px;border-radius:8px;z-index:5}