:root{--bg:#070b12;--ink:#e8f0f7;--muted:#748394;--line:#243241;--cyan:#64e6e0;--orange:#ffb45c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:12px ui-monospace,monospace;display:flex;justify-content:center}.page{width:min(660px,100%);padding:22px 16px}header{height:42px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:20px}header h1{font-size:22px;letter-spacing:.16em;margin:0}header a,header button{color:var(--muted);background:none;border:0;text-decoration:none;font:10px inherit;letter-spacing:.1em;padding:7px 0;cursor:pointer}header button{text-align:right}.layout{display:flex;justify-content:center;gap:18px;align-items:flex-start}.frame{position:relative;flex:0 0 320px;padding:5px;background:#243241;box-shadow:5px 5px #111820}.frame canvas{display:block;width:320px;height:auto;background:#0b111a;touch-action:none;user-select:none}.mobile-actions{display:none}.mobile-actions button{border:1px solid var(--line);background:#0b111a;color:var(--cyan);padding:11px 12px;font:700 9px inherit;letter-spacing:.08em;cursor:pointer}.overlay{position:absolute;inset:5px;background:#070b12e8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.overlay.hide{display:none}.overlay b{font-size:28px;letter-spacing:.12em}.overlay span{font-size:9px;color:var(--muted);letter-spacing:.1em}.overlay button,.new{border:0;background:var(--cyan);color:#071014;padding:12px 18px;font:700 10px inherit;letter-spacing:.12em;cursor:pointer;box-shadow:3px 3px #2a8d8a}.new{width:100%;background:#71685f;color:#fff;box-shadow:3px 3px #454039}aside{width:142px;display:flex;flex-direction:column;gap:9px}.stat{background:#0b111a;border:1px solid var(--line);padding:9px;display:flex;flex-direction:column;gap:5px}.stat span,aside p{color:var(--muted);font-size:9px;letter-spacing:.08em}.stat b{font-size:14px}aside p{line-height:1.9;margin:3px 0}footer{border-top:1px solid var(--line);margin-top:25px;padding-top:13px;color:#465565;text-align:center;font-size:9px;letter-spacing:.08em}@media(max-width:540px){.page{padding:12px}.layout{gap:10px}.frame{flex-basis:calc(70vw - 10px);padding:4px}.frame canvas{width:calc(70vw - 10px)}.overlay{inset:4px}.overlay b{font-size:clamp(19px,6vw,28px)}aside{width:calc(30vw - 2px);min-width:100px}.stat{padding:7px}.stat span{font-size:7px}.stat b{font-size:10px}aside p{font-size:7px}.mobile-actions{display:block;text-align:center;margin-top:14px}.mobile-actions button{width:min(240px,70vw)}}