:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #111; color: #eee; }
button { font: inherit; }
.shell { height: 100dvh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; max-width: 760px; margin: 0 auto; padding: 8px 12px; gap: 8px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.brand { font-weight: 700; letter-spacing: .04em; }
.actions { display: flex; gap: 6px; }
.actions button, dialog button { border: 1px solid #666; background: #222; color: #eee; border-radius: 7px; padding: 7px 10px; cursor: pointer; }
.stage { min-height: 0; display: grid; place-items: center; position: relative; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; background: #c5c5c5; border: 1px solid #444; box-shadow: 0 8px 24px #0008; touch-action: manipulation; max-width: 100%; max-height: 100%; }
.tap { position: absolute; right: 10px; bottom: 10px; min-width: 72px; min-height: 46px; border-radius: 999px; border: 2px solid #fff8; background: #111c; color: #fff; font-weight: 800; letter-spacing: .05em; touch-action: manipulation; }
.hint { min-height: 24px; text-align: center; font-size: .9rem; color: #bbb; }
dialog { max-width: min(520px, calc(100vw - 32px)); border: 1px solid #666; border-radius: 12px; background: #181818; color: #eee; }
dialog::backdrop { background: #000a; }
.dialog-inner { display: grid; gap: 8px; }
.dialog-inner h2, .dialog-inner p { margin: 0; }
.dialog-inner a { color: #9ecbff; }
@media (pointer:fine) { .tap { opacity: .82; } }