*{box-sizing:border-box}
body{margin:0;background:#15181d;color:#e8e6df;font:16px/1.4 system-ui,sans-serif}
main{max-width:760px;margin:0 auto;padding:20px 14px}
h1{margin:0;font-size:1.6rem}
.sub{color:#9aa0a8;margin:.3rem 0 1rem}
a{color:#7cc4d4}
.stage{position:relative;max-width:480px;margin:0 auto}
#stage{width:100%;height:auto;display:block;border-radius:10px;background:#2b2f36}
.cap{padding:10px 2px;min-height:4.6em}
.num{display:inline-block;background:#e8e6df;color:#15181d;border-radius:4px;padding:0 7px;margin-right:8px;font-weight:700;font-size:.85rem}
.screen{position:absolute;right:10px;top:10px;background:#0b0d10;border:2px solid #3a8d9c;border-radius:6px;padding:6px 10px;font-size:.8rem;max-width:45%}
.screen[hidden]{display:none}
.ctl{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:6px 0 18px}
button{background:#2b2f36;color:inherit;border:1px solid #444b55;border-radius:6px;padding:7px 14px;font:inherit;cursor:pointer}
button:hover{background:#383e48}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px}
.strip canvas{width:100%;height:auto;border-radius:6px;cursor:pointer;border:2px solid transparent;display:block}
.strip canvas.on{border-color:#7cc4d4}
footer{text-align:center;padding:18px;font-size:.8rem;color:#9aa0a8}