@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap";*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#1a1b26,#0f1015);color:#e0e2ea;font:15px/1.6 Outfit,sans-serif;display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px 20px;min-height:100vh}h1{font-size:24px;letter-spacing:.15em;text-transform:uppercase;background:linear-gradient(90deg,#7aa2f7,#bb9af7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;text-align:center;font-weight:700;text-shadow:0 0 20px rgba(122,162,247,.3)}h1 small{color:#565f89;letter-spacing:.05em;text-transform:none;font-weight:300;-webkit-text-fill-color:#565f89;text-shadow:none}.hint{color:#a9b1d6;font-size:14px;text-align:center;max-width:640px;line-height:1.6}a{color:#7aa2f7;text-decoration:none;border-bottom:1px solid rgba(122,162,247,.3);transition:all .2s ease}a:hover{color:#bb9af7;border-color:#bb9af7;text-shadow:0 0 10px rgba(187,154,247,.5)}button{font-family:Outfit,sans-serif;color:#1a1b26;background:linear-gradient(135deg,#7aa2f7,#bb9af7);border:0;border-radius:12px;padding:14px 36px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 4px 15px #7aa2f74d;transition:transform .2s ease,box-shadow .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7aa2f780}button:active{transform:translateY(1px)}.stage,.preview,details.settings{background:#24283b66;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 8px 32px #0000004d}.stage{padding:24px;display:flex;justify-content:center;align-items:center}.stage canvas{display:block;image-rendering:pixelated;border-radius:8px;box-shadow:0 0 30px #ffffff1a}.preview{position:relative;width:min(92vw,480px);padding:10px}.preview video{width:100%;border-radius:12px;background:#000;display:block}.progress{width:min(92vw,480px);height:18px;background:#00000080;border:1px solid rgba(255,255,255,.1);border-radius:9px;overflow:hidden;box-shadow:inset 0 2px 5px #00000080}.progress>div{height:100%;background:linear-gradient(90deg,#7aa2f7,#bb9af7);box-shadow:0 0 10px #7aa2f780;transition:width .3s cubic-bezier(.4,0,.2,1)}.done{color:#9ece6a;font-size:24px;font-weight:700;text-shadow:0 0 15px rgba(158,206,106,.4);animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.8}50%{opacity:1}to{opacity:.8}}img.received{max-width:min(92vw,640px);border-radius:12px;box-shadow:0 10px 30px #00000080}details.settings{width:min(92vw,640px);padding:12px 16px;transition:all .3s ease}details.settings[open]{padding-bottom:20px}details.settings summary{cursor:pointer;color:#7aa2f7;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;outline:none;list-style:none;display:flex;align-items:center;gap:8px}details.settings summary::-webkit-details-marker{display:none}details.settings summary:before{content:"▸";transition:transform .2s ease}details.settings[open] summary:before{transform:rotate(90deg)}details.settings .row{display:flex;flex-wrap:wrap;gap:16px 24px;padding-top:16px}details.settings label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#a9b1d6;text-transform:uppercase;letter-spacing:.1em;font-family:JetBrains Mono,monospace}details.settings select,details.settings input[type=range],details.settings input[type=file]{font-family:JetBrains Mono,monospace;color:#e0e2ea;background:#0000004d;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;transition:border-color .2s ease}details.settings select:focus,details.settings input[type=range]:focus,details.settings input[type=file]:focus{outline:none;border-color:#7aa2f7}.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;width:min(92vw,640px)}.metric{background:#24283b66;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;box-shadow:0 4px 12px #0003}.metric .k{font-size:11px;color:#a9b1d6;text-transform:uppercase;letter-spacing:.1em;font-family:JetBrains Mono,monospace}.metric .v{font-size:18px;font-weight:600;font-family:JetBrains Mono,monospace;color:#c0caf5}.metric .v.amber{color:#ff9e64;text-shadow:0 0 10px rgba(255,158,100,.3)}.metric .v.ok{color:#9ece6a;text-shadow:0 0 10px rgba(158,206,106,.3)}.brand-header{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:4px}.brand-icon{width:64px;height:64px;border-radius:14px;filter:drop-shadow(0 0 24px rgba(122,162,247,.45));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.brand-icon:hover{transform:scale(1.08) rotate(5deg)}.top-nav{display:flex;align-items:center;gap:12px;font-size:13px;font-family:JetBrains Mono,monospace;margin-bottom:4px}.nav-sep{color:#565f89}.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;width:min(92vw,640px);margin-top:12px}.action-card{display:flex;align-items:center;gap:18px;padding:22px 20px;background:#24283b73;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:16px;box-shadow:0 8px 32px #00000040;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1)}.action-card:hover{transform:translateY(-3px);border-color:#7aa2f773;box-shadow:0 12px 36px #7aa2f733;text-shadow:none}.card-icon{font-size:32px;line-height:1;filter:drop-shadow(0 0 12px rgba(122,162,247,.35))}.card-content{display:flex;flex-direction:column;gap:4px}.card-content h3{margin:0;font-size:17px;font-weight:700;color:#c0caf5;letter-spacing:.05em;transition:color .2s ease}.action-card:hover .card-content h3{color:#7aa2f7}.card-content p{margin:0;font-size:13px;color:#a9b1d6;line-height:1.4}.meta-note{font-size:12px;opacity:.8;font-family:JetBrains Mono,monospace;margin-top:10px}.footer-links{margin-top:20px;font-size:13px;font-family:JetBrains Mono,monospace}