:root{--gold: #FFD700;--gold-glow: rgba(255, 215, 0, .4);--void: #050505;--void-light: #0a0a0f;--void-lighter: #12121a;--text-primary: #FFFFFF;--text-secondary: #A0A0A0;--text-dim: #606070;--panel-bg: rgba(10, 10, 15, .95);--panel-border: rgba(255, 215, 0, .15);--control-bg: rgba(20, 20, 30, .8);--control-border: rgba(255, 215, 0, .2);--meter-green: #10b981;--meter-yellow: #f59e0b;--meter-red: #ef4444;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;line-height:1.5;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--void);color:var(--text-primary);min-height:100vh;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,rgba(255,215,0,.03) 0%,transparent 50%),repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(255,215,0,.01) 2px,rgba(255,215,0,.01) 4px);background-size:100% 100%,3px 3px;animation:grain 8s steps(10) infinite,pulse 4s ease-in-out infinite;pointer-events:none;z-index:0;opacity:.6}@keyframes grain{0%,to{opacity:.6}50%{opacity:.65}}@keyframes pulse{0%,to{opacity:.6}50%{opacity:.7}}.mode-switcher{position:fixed;top:20px;right:20px;z-index:1000;display:flex;align-items:center;gap:10px;padding:12px 16px;background:#0a0a0ff2;border:1px solid var(--panel-border);border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.mode-switcher:hover{border-color:var(--gold);box-shadow:0 0 20px #ffd7001a}.mode-switcher label{color:var(--text-secondary);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.mode-select{padding:8px 12px;background:#14141ecc;border:1px solid var(--control-border);border-radius:6px;color:var(--gold);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .3s ease;outline:none}.mode-select:hover{background:#1e1e28e6;border-color:var(--gold)}.mode-select:focus{border-color:var(--gold);box-shadow:0 0 0 2px #ffd7001a}.mode-select option{background:var(--void-light);color:var(--text-primary)}.back-button{position:fixed;top:20px;left:20px;z-index:1000;padding:12px 20px;background:#0a0a0fe6;border:1px solid var(--panel-border);border-radius:8px;color:var(--gold);text-decoration:none;font-size:14px;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.back-button:hover{background:#ffd7001a;border-color:var(--gold);transform:translate(-2px);box-shadow:0 0 20px var(--gold-glow)}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url(https://www.transparenttextures.com/patterns/stardust.png);opacity:.08;pointer-events:none;z-index:0}.page{max-width:1200px;margin:0 auto;padding:80px 24px 64px;display:flex;flex-direction:column;gap:24px;position:relative;z-index:10}@media (max-width: 640px){.mode-switcher{top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;width:auto;justify-content:space-between;padding:10px 12px}.mode-switcher label{display:none}.mode-select{flex:1;width:100%}.back-button{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;padding:10px 14px;font-size:13px}.page{padding-top:calc(104px + env(safe-area-inset-top));padding-bottom:calc(132px + env(safe-area-inset-bottom))}}.hero{background:linear-gradient(135deg,#ffd7000d,#ffd70005);color:var(--text-primary);padding:40px;border-radius:12px;border:1px solid var(--panel-border);text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin:0 0 8px;opacity:.7;color:var(--gold);font-weight:600}h1{margin:0 0 10px;font-size:32px;font-weight:700;color:var(--gold);letter-spacing:.05em}.lede{font-size:16px;line-height:1.6;opacity:.9;max-width:600px;margin:0 auto;color:var(--text-secondary)}.panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--panel-border);border-radius:12px;padding:28px;position:relative;z-index:10}.panel h2{margin:0 0 8px;font-size:20px;font-weight:700;color:var(--gold);letter-spacing:.05em}.description{margin:8px 0 20px;color:var(--text-secondary);font-size:14px}.file-upload{margin-top:20px;position:relative}.upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 32px;border:2px dashed var(--panel-border);border-radius:12px;background:var(--control-bg);cursor:pointer;transition:all .3s ease;min-height:180px}.upload-label:hover{border-color:var(--gold);background:#ffd7000d;box-shadow:0 0 30px var(--gold-glow)}.upload-icon{font-size:48px;opacity:.8;transition:transform .3s ease}.upload-label:hover .upload-icon{transform:scale(1.1)}.upload-title{font-size:16px;font-weight:600;color:var(--gold);letter-spacing:.05em}.upload-label span:first-child{font-size:18px;font-weight:600}.hint{font-size:13px;color:var(--text-secondary)}input[type=file]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:10;top:0;left:0}.file-info{margin-top:16px;padding:16px;background:#ffd70014;border-radius:8px;border-left:4px solid var(--gold)}.file-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;font-size:14px}.presets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:20px}.preset-card{background:var(--control-bg);border:1px solid var(--panel-border);border-radius:12px;padding:20px;cursor:pointer;transition:all .2s ease;text-align:center;color:inherit;font:inherit}.preset-card:hover{background:#ffd7000d;border-color:var(--gold);transform:translateY(-2px);box-shadow:0 4px 12px var(--gold-glow)}.preset-icon{font-size:32px;margin-bottom:8px}.preset-name{font-size:16px;font-weight:700;margin-bottom:4px;color:var(--gold)}.preset-target{font-size:14px;color:var(--gold);font-weight:600;margin-bottom:8px}.preset-desc{font-size:12px;color:var(--text-secondary);line-height:1.4}.custom-target{background:var(--control-bg);border-radius:12px;padding:20px;border:1px solid var(--panel-border)}.custom-target h3{margin:0 0 16px;font-size:16px;color:var(--gold)}.slider-control{display:flex;align-items:center;gap:12px;margin-bottom:16px}.slider-control label{font-size:14px;font-weight:600;min-width:140px;color:var(--text-secondary)}.slider-control input[type=range]{flex:1;height:6px;background:var(--control-border);border-radius:3px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.slider-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--gold);border-radius:50%;cursor:pointer;border:2px solid var(--gold);box-shadow:0 0 10px var(--gold-glow)}.slider-control input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--gold);border-radius:50%;cursor:pointer;border:2px solid var(--gold);box-shadow:0 0 10px var(--gold-glow)}.slider-control span{font-size:14px;font-weight:700;color:var(--gold);min-width:80px;text-align:right;font-variant-numeric:tabular-nums}.btn{border:1px solid var(--panel-border);background:var(--control-bg);color:var(--text-primary);padding:12px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .15s ease;font-size:14px;font-family:inherit}.btn:hover{background:#ffd70014;border-color:var(--gold);color:var(--gold)}.btn.primary{background:linear-gradient(135deg,#ffd70033,#ffd7001a);color:var(--gold);border-color:var(--gold)}.btn.primary:hover{background:linear-gradient(135deg,#ffd7004d,#ffd70033);transform:translateY(-1px);box-shadow:0 4px 12px var(--gold-glow)}.btn.large{padding:16px 32px;font-size:16px;width:100%;max-width:400px;margin:20px auto 0;display:block}.status{padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;text-align:center;margin-bottom:20px}.status-processing{background:#ffd70014;border:1px solid rgba(255,215,0,.2);color:var(--gold)}.status-success{background:#10b98133;border:1px solid rgba(16,185,129,.4);color:#10b981}.status-error{background:#ef444433;border:1px solid rgba(239,68,68,.4);color:#ef4444}.playback-controls{margin-bottom:24px}.ab-toggle{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.btn.playback{font-size:14px;padding:10px 20px;background:var(--control-bg);border:1px solid var(--panel-border)}.btn.playback:hover:not(:disabled){background:#ffd70014;border-color:var(--gold);color:var(--gold)}.ab-switch{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:8px 16px;background:var(--control-bg);border:1px solid var(--panel-border);border-radius:8px;transition:all .2s ease}.ab-switch:hover{background:#ffd7000d;border-color:var(--gold)}.ab-switch input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--gold)}.ab-switch input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.ab-switch span{font-size:14px;font-weight:500}.playback-status{margin-top:12px;padding:12px;background:#ffd70014;border-radius:8px;color:var(--gold);font-size:14px;font-weight:500;min-height:20px}.playback-status:empty{display:none}.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px}.metric-card{background:var(--control-bg);border:1px solid var(--panel-border);border-radius:12px;padding:20px;text-align:center}.metric-card.primary{background:#ffd70014;border-color:var(--gold)}.metric-label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:8px;font-weight:600}.metric-value{font-size:32px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;margin-bottom:4px}.metric-card.primary .metric-value{color:var(--gold)}.metric-unit{font-size:13px;color:var(--text-secondary);font-weight:600}