:root{--bg: #0b0a14;--fg: #f4e9d8;--accent: #ff5dc8;--accent2: #5df0ff;--muted: #6a6480;font-family:ui-monospace,JetBrains Mono,Menlo,Consolas,monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden}#app{position:fixed;inset:0;display:grid;place-items:center}canvas{display:block;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:2rem;pointer-events:none;z-index:10}.panel{pointer-events:auto;background:#0b0a14d9;border:1px solid var(--accent);border-radius:8px;padding:1.5rem 2rem;max-width:460px;width:100%;max-height:calc(100vh - 4rem);max-height:calc(100dvh - 4rem);overflow-y:auto;box-shadow:0 0 24px #ff5dc840}.panel h1{margin:0 0 .25rem;letter-spacing:.12em;color:var(--accent);text-shadow:0 0 12px rgba(255,93,200,.6)}.panel p{margin:.25rem 0 1rem;color:var(--muted);font-size:.85rem}.row{display:flex;gap:.5rem;margin-bottom:.5rem}button,input[type=text],input[type=file]::file-selector-button{font-family:inherit;font-size:.85rem;background:transparent;color:var(--fg);border:1px solid var(--muted);border-radius:4px;padding:.5rem .75rem;cursor:pointer}button:hover,input[type=file]::file-selector-button:hover{border-color:var(--accent2);color:var(--accent2)}input[type=text]{flex:1;cursor:text}.status{font-size:.8rem;color:var(--accent2);min-height:1.2em;margin-top:.5rem}.hidden{display:none!important}@media(max-height:500px){.overlay{padding:.5rem}.panel{padding:.75rem 1rem;max-height:calc(100vh - 1rem);max-height:calc(100dvh - 1rem);font-size:.8rem;border-radius:6px}.panel h1{font-size:1.2rem;margin-bottom:.15rem}.panel p{font-size:.75rem;margin:.15rem 0 .5rem}.row{margin-bottom:.35rem}button,input[type=text],input[type=file]::file-selector-button{font-size:.75rem;padding:.35rem .5rem}}@media(max-width:400px){.overlay{padding:.75rem}.panel{padding:1rem}.panel h1{font-size:1.3rem}}