*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-deep:#06060e;--bg-surface:#0e0e1cd9;--bg-card:#16162ca6;--bg-card-hover:#1e1e3cbf;--bg-input:#0c0c1eb3;--border-subtle:#7864ff1f;--border-glow:#7864ff59;--accent-primary:#a78bfa;--accent-secondary:#c084fc;--accent-success:#34d399;--accent-warning:#fbbf24;--accent-danger:#f87171;--text-primary:#f0eef6;--text-secondary:#9892b3;--text-tertiary:#5d577a;--text-accent:var(--accent-primary);--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "SF Mono", monospace;--fs-xs:.75rem;--fs-sm:.8125rem;--fs-base:.9375rem;--fs-lg:1.125rem;--fs-xl:1.5rem;--fs-2xl:2rem;--fs-3xl:2.75rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:.375rem;--radius-md:.625rem;--radius-lg:1rem;--radius-xl:1.25rem;--radius-full:9999px;--shadow-glow:0 0 20px #a78bfa26, 0 0 60px #a78bfa0d;--shadow-card:0 4px 24px #0006, 0 1px 4px #0000004d;--ease-out:cubic-bezier(.16, 1, .3, 1);--duration-fast:.15s;--duration-base:.25s;--duration-slow:.4s}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-sans);font-size:var(--fs-base);color:var(--text-primary);background:var(--bg-deep);min-height:100dvh;line-height:1.6;overflow-x:hidden}body:before{content:"";z-index:-1;background:radial-gradient(80% 60% at 20% 30%,#7850ff14 0%,#0000 60%),radial-gradient(60% 80% at 80% 70%,#c850ff0f 0%,#0000 60%),radial-gradient(70% 50% at 50% 90%,#50c8ff0a 0%,#0000 60%);animation:20s ease-in-out infinite alternate meshDrift;position:fixed;inset:0}@keyframes meshDrift{0%{transform:scale(1)translate(0)}to{transform:scale(1.05)translate(-2%,3%)}}#app{max-width:720px;padding:var(--space-8) var(--space-6);flex-direction:column;min-height:100dvh;margin:0 auto;display:flex}h1{font-size:var(--fs-3xl);letter-spacing:-.03em;background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:700;line-height:1.15}h2{font-size:var(--fs-xl);color:var(--text-primary);letter-spacing:-.02em;font-weight:600}h3{font-size:var(--fs-lg);color:var(--text-secondary);font-weight:500}.subtitle{color:var(--text-secondary);font-size:var(--fs-sm);font-weight:400}.mono{font-family:var(--font-mono);font-size:var(--fs-sm)}.card{background:var(--bg-card);-webkit-backdrop-filter:blur(24px)saturate(1.4);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-card);transition:border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--fs-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);border:none;outline:none;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";pointer-events:none;background:linear-gradient(#ffffff0f 0%,#0000 50%);position:absolute;inset:0}.btn-primary{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));color:#0e0e1c}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px #a78bfa59}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}.btn-secondary{background:var(--bg-input);border:1px solid var(--border-subtle);color:var(--text-primary)}.btn-secondary:hover{border-color:var(--border-glow);background:var(--bg-card-hover)}.btn-success{background:linear-gradient(135deg, var(--accent-success), #2dd4bf);color:#0e1c18}.btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 20px #34d3994d}.form-group{gap:var(--space-2);flex-direction:column;display:flex}.form-label{font-size:var(--fs-sm);color:var(--text-secondary);align-items:center;gap:var(--space-2);font-weight:500;display:flex}.form-label .badge{font-size:var(--fs-xs);border-radius:var(--radius-full);color:var(--accent-primary);background:#a78bfa26;padding:2px 8px;font-weight:500}input[type=text],input[type=password],input[type=datetime-local]{padding:var(--space-3) var(--space-4);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--fs-base);transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);outline:none}input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #a78bfa26}input::placeholder{color:var(--text-tertiary)}.drop-zone{border:2px dashed var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-12) var(--space-8);align-items:center;gap:var(--space-3);cursor:pointer;transition:all var(--duration-base) var(--ease-out);text-align:center;flex-direction:column;display:flex;position:relative}.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent-primary);background:#a78bfa0a}.drop-zone.dragover{box-shadow:var(--shadow-glow);transform:scale(1.01)}.drop-zone.has-file{border-color:var(--accent-success);background:#34d3990a;border-style:solid}.drop-zone-icon{filter:grayscale(.3);font-size:2.5rem;line-height:1}.drop-zone-label{color:var(--text-primary);font-weight:500}.drop-zone-hint{font-size:var(--fs-xs);color:var(--text-tertiary)}.drop-zone input[type=file]{opacity:0;cursor:pointer;position:absolute;inset:0}.toggle-group{align-items:center;gap:var(--space-3);padding:var(--space-3) 0;display:flex}.toggle{flex-shrink:0;width:44px;height:24px;position:relative}.toggle input{opacity:0;width:0;height:0}.toggle-track{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-full);cursor:pointer;transition:background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);position:absolute;inset:0}.toggle-track:after{content:"";background:var(--text-secondary);width:16px;height:16px;transition:transform var(--duration-base) var(--ease-out), background var(--duration-fast) var(--ease-out);border-radius:50%;position:absolute;top:3px;left:3px}.toggle input:checked+.toggle-track{border-color:var(--accent-primary);background:#a78bfa33}.toggle input:checked+.toggle-track:after{background:var(--accent-primary);transform:translate(20px)}.toggle-label{font-size:var(--fs-sm);color:var(--text-secondary);cursor:pointer}.progress-bar{background:var(--bg-input);border-radius:var(--radius-full);width:100%;height:4px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));border-radius:var(--radius-full);height:100%;transition:width var(--duration-base) var(--ease-out);position:relative}.progress-fill:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff4d 50%,#0000 100%);animation:2s ease-in-out infinite progressShimmer;position:absolute;inset:0}@keyframes progressShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.status{align-items:center;gap:var(--space-2);font-size:var(--fs-sm);font-weight:500;display:inline-flex}.status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-dot.pulse{animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.status-success .status-dot{background:var(--accent-success)}.status-success{color:var(--accent-success)}.status-warning .status-dot{background:var(--accent-warning)}.status-warning{color:var(--accent-warning)}.status-danger .status-dot{background:var(--accent-danger)}.status-danger{color:var(--accent-danger)}.status-info .status-dot{background:var(--accent-primary)}.status-info{color:var(--accent-primary)}.stepper{gap:var(--space-2);padding:var(--space-4) 0;display:flex}.step-indicator{border-radius:var(--radius-full);background:var(--bg-input);height:3px;transition:background var(--duration-base) var(--ease-out);flex:1}.step-indicator.active{background:var(--accent-primary)}.step-indicator.complete{background:var(--accent-success)}.stack{flex-direction:column;display:flex}.stack-2{gap:var(--space-2)}.stack-3{gap:var(--space-3)}.stack-4{gap:var(--space-4)}.stack-6{gap:var(--space-6)}.stack-8{gap:var(--space-8)}.row{align-items:center;display:flex}.row-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.flex-1{flex:1}.text-center{text-align:center}.text-right{text-align:right}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-4{margin-bottom:var(--space-4)}.opacity-50{opacity:.5}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.divider{background:var(--border-subtle);height:1px;margin:var(--space-6) 0}.file-info{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:#34d3990f;border:1px solid #34d39926;display:flex}.file-info-icon{font-size:1.25rem}.file-info-name{font-weight:500;font-size:var(--fs-sm);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.file-info-size{font-size:var(--fs-xs);color:var(--text-tertiary);font-family:var(--font-mono)}.output-block{padding:var(--space-4);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-secondary);word-break:break-all;-webkit-user-select:all;user-select:all;line-height:1.8}.fade-in{animation:fadeIn var(--duration-slow) var(--ease-out) both}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in-delay-1{animation-delay:.1s}.fade-in-delay-2{animation-delay:.2s}.fade-in-delay-3{animation-delay:.3s}.spinner{border:2px solid #a78bfa33;border-top-color:var(--accent-primary);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=640px){#app{padding:var(--space-6) var(--space-4)}h1{font-size:var(--fs-2xl)}.card{padding:var(--space-6)}.drop-zone{padding:var(--space-8) var(--space-4)}}.stepper-wrap{gap:var(--space-2);flex-direction:column;display:flex}.stepper-labels{justify-content:space-between;padding:0 2px;display:flex}.step-label{font-size:var(--fs-xs);color:var(--text-tertiary);text-align:center;transition:color var(--duration-base) var(--ease-out);flex:1;font-weight:400}.step-label-active{color:var(--accent-primary);font-weight:600}.error-banner{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--accent-danger);font-size:var(--fs-sm);background:#f8717114;border:1px solid #f8717140;line-height:1.5;display:flex}.constraint-field{transition:opacity var(--duration-fast) var(--ease-out);padding-left:56px}.constraint-hint{font-size:var(--fs-xs);color:var(--text-tertiary);margin-top:var(--space-1)}.worker-anim{justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto;display:flex;position:relative}.worker-ring{border:2px solid #a78bfa26;border-top-color:var(--accent-primary);border-right-color:var(--accent-secondary);border-radius:50%;animation:1.2s linear infinite spin;position:absolute;inset:0}.worker-icon{font-size:1.75rem;line-height:1;animation:1.2s ease-in-out infinite workerPulse}@keyframes workerPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.9)}}.instruction-list{padding-left:var(--space-6)}.instruction-list li{color:var(--text-secondary);font-size:var(--fs-sm)}.hash-details{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}.hash-summary{cursor:pointer;font-size:var(--fs-sm);color:var(--text-secondary);-webkit-user-select:none;user-select:none;font-weight:500;list-style:none}.hash-summary:before{content:"▶ ";font-size:var(--fs-xs)}.hash-details[open] .hash-summary:before{content:"▼ "}.cors-providers{gap:var(--space-2);flex-wrap:wrap;display:flex}.provider-pill{font-size:var(--fs-xs);border-radius:var(--radius-full);border:1px solid var(--border-subtle);color:var(--text-tertiary);background:#a78bfa14;padding:3px 10px}.url-input-wrap{gap:var(--space-2);display:flex}.url-input-wrap input{flex:1;min-width:0}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--fs-xs);white-space:nowrap;flex-shrink:0}.cors-status{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-sm);animation:fadeIn var(--duration-base) var(--ease-out);border:1px solid;display:flex}.cors-checking{border-color:var(--border-glow);color:var(--text-secondary);background:#a78bfa0f}.cors-ok{color:var(--accent-success);background:#34d3990f;border-color:#34d39940}.cors-fail{color:var(--text-primary);background:#f871710f;border-color:#f8717140}.cors-hint{margin-top:var(--space-2);padding:var(--space-3);border-radius:var(--radius-sm);font-size:var(--fs-xs);color:var(--text-secondary);border-left:2px solid var(--accent-warning);background:#0003;line-height:1.7}.cors-checklist{gap:var(--space-4);margin-top:var(--space-3);display:flex}.cors-check{font-size:var(--fs-xs);font-family:var(--font-mono)}.cors-check-ok{color:var(--accent-success)}.cors-check-fail{color:var(--accent-danger)}.share-notice{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-sm);background:#fbbf240f;border:1px solid #fbbf2433;display:flex}.url-copy-wrap{gap:var(--space-2);align-items:flex-start;display:flex}.url-output{cursor:pointer;min-width:0;transition:border-color var(--duration-fast) var(--ease-out);word-break:break-all;flex:1}.url-output:hover{border-color:var(--accent-primary)}.qr-wrap{padding:var(--space-6);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:#0e0e1c;justify-content:center;align-items:center;display:flex}.qr-wrap canvas{border-radius:var(--radius-sm);filter:drop-shadow(0 0 12px #a78bfa4d);display:block}@media (width<=640px){.url-input-wrap{flex-direction:column}.btn-sm{justify-content:center;width:100%}.url-copy-wrap{flex-direction:column}.stepper-labels{display:none}}.participant-shell{gap:var(--space-6);flex-direction:column;width:100%;max-width:540px;margin:0 auto;display:flex}.participant-header{border-bottom:1px solid var(--border-subtle);padding-bottom:var(--space-4);justify-content:space-between;align-items:center;margin:auto}.participant-logo{filter:drop-shadow(0 0 8px #a78bfa66);font-size:2rem;animation:3s ease-in-out infinite alternate logoFloat}@keyframes logoFloat{0%{transform:translateY(0)}to{transform:translateY(-4px)}}.participant-title{font-size:var(--fs-lg);letter-spacing:-.02em;background:linear-gradient(135deg, var(--text-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:700}.participant-state-label{font-size:var(--fs-xs);color:var(--accent-primary);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;font-weight:500}.state-pip-row{gap:6px;display:none}.state-pip{background:var(--bg-input);width:6px;height:6px;transition:all var(--duration-base) var(--ease-out);border-radius:50%}.state-pip-active{background:var(--accent-primary);box-shadow:0 0 8px var(--accent-primary);transform:scale(1.3)}.state-pip-done{background:var(--accent-success)}.state-pip-error{background:var(--accent-danger)}.p-state-view{background:var(--bg-card);-webkit-backdrop-filter:blur(24px)saturate(1.4);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-card);animation:fadeIn var(--duration-slow) var(--ease-out) both}.cache-progress-wrap{width:100%}.cache-info-box{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#a78bfa0a;display:flex}.passphrase-input-wrap{width:100%;display:flex;position:relative}.passphrase-input-wrap input{width:100%;padding-right:48px}.btn-icon{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-full);width:40px;height:40px;transition:background var(--duration-fast) var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;font-size:1.2rem;display:flex;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.btn-icon:hover{color:var(--text-primary);background:#ffffff0d}.unlock-time-notice{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-sm);color:var(--accent-warning);background:#fbbf240d;border:1px solid #fbbf2426;display:flex}.countdown-display{font-family:var(--font-mono);color:var(--text-primary);margin:var(--space-6) 0;text-shadow:0 0 30px #a78bfa33;justify-content:center;align-items:baseline;font-weight:500;display:flex}.countdown-main{letter-spacing:-.02em;font-size:3rem}.countdown-ms{color:var(--accent-secondary);opacity:.8;font-size:1.5rem}.clock-sync-info{margin-bottom:var(--space-2);justify-content:center;display:flex}.holding-pen-hint{justify-content:center;align-items:center;gap:var(--space-2);opacity:.7;display:flex}.playback-visual{width:140px;height:140px;margin:var(--space-4) auto var(--space-8);justify-content:center;align-items:center;display:flex;position:relative}.playback-icon{z-index:2;filter:drop-shadow(0 0 15px #a78bfa66);transition:transform var(--duration-base) var(--ease-out);font-size:3.5rem}.playback-visual:active .playback-icon{transform:scale(.9)}.playback-rings{z-index:1;position:absolute;inset:0}.playback-ring{opacity:0;border:1px solid #a78bfa4d;border-radius:50%;position:absolute;inset:0;transform:scale(.8)}.ring-animate{animation:3s cubic-bezier(.215,.61,.355,1) infinite ringPulse}.playback-ring.ring-2{animation-delay:1s}.playback-ring.ring-3{animation-delay:2s}@keyframes ringPulse{0%{opacity:.8;border-color:var(--accent-primary);transform:scale(.6);box-shadow:0 0 10px #a78bfa33}50%{border-color:var(--accent-secondary)}to{opacity:0;border-color:#c084fc00;transform:scale(1.6)}}.playback-controls{justify-content:center;display:flex}.playback-security-note{justify-content:center;align-items:center;gap:var(--space-2);opacity:.6;display:flex}@media (width<=480px){.countdown-main{font-size:2.25rem}.countdown-ms{font-size:1.125rem}.p-state-view{padding:var(--space-6) var(--space-4)}}