*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0c1020;color:#f2f4ff;font:16px system-ui,sans-serif}main{max-width:1200px;margin:0 auto;padding:16px}header{display:flex;align-items:baseline;gap:14px}h1{margin:0;font-size:clamp(28px,4vw,48px);letter-spacing:.02em}header p{color:#aeb9e4;text-transform:uppercase;letter-spacing:.2em}#status{min-height:1.6em;color:#d0d8f8}.canvas-wrap{border:2px solid #5a6caa;border-radius:12px;overflow:hidden;box-shadow:0 12px 32px #0008;background:#000}canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none}footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;color:#aeb9e4}button{border:1px solid #a6b8ff;border-radius:8px;background:#26365f;color:#fff;padding:10px 16px;font:inherit;cursor:pointer}button:hover{background:#354b83}@media(max-width:600px){main{padding:8px}header p{font-size:12px}footer{align-items:flex-start;flex-direction:column}}