:root{--bg:#faf9fd;--card:#fff;--fg:#1d1630;--dim:#6b6580;--line:#e6e2f0;--accent:#6d3ee8;--accent-dark:#5426c9;--accent-soft:#f1ecfd;--error:#c62a3a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--fg);-webkit-font-smoothing:antialiased;margin:0;font:16px/1.55 Segoe UI Variable,Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif}.page{background:radial-gradient(60rem 30rem at 50% -8rem, var(--accent-soft), transparent 70%);flex-direction:column;align-items:center;gap:2.25rem;min-height:100dvh;padding:3rem 1rem 1.5rem;display:flex}header{text-align:center;max-width:34rem}.brand{letter-spacing:-.01em;align-items:center;gap:.6rem;margin-bottom:1.25rem;font-size:1.05rem;font-weight:650;display:inline-flex}.mark{background:conic-gradient(from 90deg, var(--accent) 25%, #a78bfa 0 50%, var(--accent) 0 75%, #c4b5fd 0);border-radius:.45rem;width:1.6rem;height:1.6rem}h1{letter-spacing:-.035em;text-wrap:balance;margin:0;font-size:clamp(2rem,6vw,3.1rem);font-weight:700;line-height:1.08}h1 em{color:var(--accent);font-style:normal}.tag{max-width:28rem;color:var(--dim);margin:.9rem auto 0}.stage{flex-direction:column;align-items:center;gap:1.25rem;width:min(100%,25rem);display:flex}.frame{background:var(--card);border:1px solid var(--line);border-radius:1.1rem;width:100%;padding:.75rem;box-shadow:0 1px 2px #1d16300a,0 12px 32px -12px #4c2da038}.frame.hidden{display:none}canvas{aspect-ratio:4/5;width:100%;image-rendering:pixelated;border-radius:.6rem;display:block}.drop{aspect-ratio:4/5;background:var(--card);width:100%;color:var(--dim);font:inherit;cursor:pointer;border:1.5px dashed #cfc6e8;border-radius:1.1rem;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;padding:1.5rem;transition:border-color .2s,background .2s;display:flex}.drop:hover,.page.dragging .drop{border-color:var(--accent);background:var(--accent-soft)}.drop .icon{background:var(--accent-soft);width:3rem;height:3rem;color:var(--accent);border-radius:999px;place-items:center;font-size:1.5rem;line-height:1;display:grid}.drop .big{color:var(--fg);font-size:1.15rem;font-weight:650}.drop .small{text-align:center;max-width:16rem;font-size:.9rem}.actions{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}button{border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;border-radius:.7rem;padding:.8rem 1.25rem;font:600 .95rem/1 inherit;transition:background .15s,border-color .15s,box-shadow .15s}button:hover:not(:disabled){background:#fcfbff;border-color:#cfc6e8}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;min-width:9rem;box-shadow:0 6px 16px -6px #6d3ee899}button.primary:hover:not(:disabled){background:var(--accent-dark);border-color:var(--accent-dark)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.error{color:var(--error);text-align:center;margin:0}footer{color:var(--dim);text-align:center;flex-wrap:wrap;justify-content:center;gap:.25rem .75rem;margin-top:auto;font-size:.82rem;display:flex}button.link{font:inherit;color:var(--dim);text-underline-offset:2px;background:0 0;border:0;padding:0;text-decoration:underline}button.link:hover:not(:disabled){color:var(--fg);background:0 0}.credits{flex-basis:100%}.credits a{color:var(--dim)}