@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;700;900&display=swap";:root{--bg-primary: #0a0a0c;--bg-secondary: rgba(20, 20, 25, .6);--glass-border: rgba(255, 255, 255, .08);--glass-bg: rgba(255, 255, 255, .03);--accent-color: #ff9d00;--accent-glow: rgba(255, 157, 0, .3);--text-primary: #ffffff;--text-secondary: #a0a0ab;--text-muted: #6b6b76;--success-color: #4ade80}*{box-sizing:border-box}body{margin:0;background-color:var(--bg-primary);background-image:radial-gradient(circle at 15% 50%,rgba(255,157,0,.08),transparent 25%),radial-gradient(circle at 85% 30%,rgba(255,157,0,.05),transparent 25%);color:var(--text-primary);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px 20px;min-height:100vh;overflow-x:hidden}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 8px 32px #0000004d}h1{font-family:Outfit,sans-serif;font-size:28px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary);margin:0 0 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}h1 small{font-family:Inter,sans-serif;color:var(--accent-color);letter-spacing:.05em;text-transform:none;font-weight:500;font-size:14px}.hint{color:var(--text-secondary);font-size:14px;text-align:center;max-width:640px}a{color:var(--accent-color);text-decoration:none;transition:text-shadow .2s ease,color .2s ease}a:hover{text-shadow:0 0 8px var(--accent-glow);color:#ffb84d}button,.btn{font-family:Inter,sans-serif;color:#000;background:var(--accent-color);border:none;border-radius:12px;padding:14px 36px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px var(--accent-glow);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff9d0066;background:#fa2}button:active,.btn:active{transform:translateY(1px);box-shadow:0 2px 8px var(--accent-glow)}.stage{background:#fff;padding:24px;border-radius:16px;box-shadow:0 0 40px #ffffff1a;display:flex;justify-content:center;align-items:center;transition:transform .3s ease}.stage canvas{display:block;image-rendering:pixelated;border-radius:4px}.preview{position:relative;width:min(92vw,480px);border-radius:16px;overflow:hidden;border:1px solid var(--glass-border);box-shadow:0 12px 40px #00000080}.preview video{width:100%;background:#000;display:block;object-fit:cover}.progress{width:min(92vw,480px);height:8px;background:#0006;border:1px solid var(--glass-border);border-radius:4px;overflow:hidden}.progress>div{height:100%;background:var(--accent-color);transition:width .25s ease-out;box-shadow:0 0 10px var(--accent-glow)}.done{color:var(--success-color);font-size:24px;font-weight:700;font-family:Outfit,sans-serif;text-shadow:0 0 16px rgba(74,222,128,.3)}img.received{max-width:min(92vw,640px);border-radius:12px;border:1px solid var(--glass-border);box-shadow:0 12px 40px #0006;margin-top:20px}details.settings{width:min(92vw,640px);padding:16px;margin-bottom:16px}details.settings summary{cursor:pointer;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;list-style:none;display:flex;align-items:center;justify-content:space-between}details.settings summary::-webkit-details-marker{display:none}details.settings summary:after{content:"▼";font-size:10px;color:var(--text-secondary);transition:transform .3s ease}details[open].settings summary:after{transform:rotate(180deg)}details.settings .row{display:flex;flex-wrap:wrap;gap:16px;padding-top:20px;margin-top:16px;border-top:1px solid var(--glass-border)}details.settings label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.05em;flex:1 1 120px}details.settings select,details.settings input[type=range]{font-family:Inter,sans-serif;font-size:14px;color:var(--text-primary);background:#0000004d;border:1px solid var(--glass-border);border-radius:8px;padding:10px 12px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}details.settings select:focus,details.settings input[type=range]:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-glow)}.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;width:min(92vw,640px)}.metric{background:var(--glass-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--glass-border);border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:transform .2s ease,background .2s ease}.metric:hover{transform:translateY(-2px);background:#ffffff0d}.metric .k{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.metric .v{font-size:20px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-primary)}.metric .v.amber{color:var(--accent-color)}.metric .v.ok{color:var(--success-color)}
