*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#0b0e14;color:#f4f7ff;font-family:system-ui}body{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh}header,footer{padding:12px 16px;background:#151a24;z-index:2}h1{font-size:1.1rem;margin:0 0 4px}.badge{color:#67e8f9}p{color:#abb6cb;font-size:.88rem;margin:0}#pad{position:relative;overflow:hidden;touch-action:none;user-select:none;overscroll-behavior:none;background:radial-gradient(circle,#172033,#0b0e14 70%);outline:none}#pad:focus-visible{box-shadow:inset 0 0 0 3px #67e8f9}#empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;color:#abb6cb;pointer-events:none}#empty strong{display:block;color:white;font-size:clamp(1.3rem,5vw,2rem);margin-bottom:8px}#grid{position:absolute;display:none;grid-template-columns:repeat(9,var(--cell));grid-template-rows:repeat(9,var(--cell));transform:translate(-50%,-50%);pointer-events:none}.cell{border:1px solid #45506a;display:grid;place-items:center;color:#78849c;font:600 11px monospace}.origin{border-color:#67e8f9;color:#67e8f9}.active{background:#785d20;border:3px solid #fbbf24;color:white}#thumb{position:absolute;width:34px;height:34px;margin:-17px;border:3px solid white;border-radius:50%;background:#286c78;display:none;pointer-events:none;box-shadow:0 0 0 8px #163b43}footer{padding-bottom:max(12px,env(safe-area-inset-bottom));display:grid;gap:6px}#out{font:700 clamp(.95rem,4vw,1.2rem) monospace;min-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row{display:flex;gap:12px;align-items:center;color:#abb6cb;font-size:.82rem}.row button{margin-left:auto;background:#222a39;color:white;border:1px solid #45506a;border-radius:8px;padding:7px 10px}