:root{--background:#0d0d0f;--foreground:#e8e8ea;--muted:#8a8a93;--accent:#2a2a31;--accent-hover:#3a3a44}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--background);min-height:100%;color:var(--foreground);overflow-wrap:anywhere;margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}main{flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;min-height:100dvh;padding:1rem;display:flex}h1{letter-spacing:.08em;margin:0;font-size:1.25rem;font-weight:600}canvas{width:min(92vw, 640px, calc(70vh * var(--aspect,1)));height:auto;image-rendering:pixelated;display:block}canvas.stirrable{touch-action:none}#status,#notice{min-height:1.5em;color:var(--muted);text-align:center;margin:0}.drop-area{border:2px dashed var(--muted);text-align:center;cursor:pointer;border-radius:1.25rem;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;width:min(100%,36rem);min-height:min(55dvh,24rem);padding:1.5rem;transition:background .15s,border-color .15s;display:flex}.drop-area:hover,#picker:focus-visible+.drop-area,.dragging .drop-area{border-color:var(--foreground);background:var(--accent)}.dragging main:has(.drop-area[hidden]){outline:2px dashed var(--foreground);outline-offset:-.75rem}.drop-title{font-size:1.5rem;font-weight:600}.drop-hint{color:var(--muted)}.pointer-coarse{display:none}@media (pointer:coarse){.pointer-fine{display:none}.pointer-coarse{display:inline}}.actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.privacy{color:var(--muted);margin:0;font-size:.875rem}.button{background:var(--accent);color:inherit;font:inherit;cursor:pointer;border:none;border-radius:999px;padding:.75rem 1.5rem;text-decoration:none}.button:hover,.button:focus-visible{background:var(--accent-hover)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}#notice:empty{display:none}