:root{--bg: #14100d;--bg-card: #1f1915;--bg-card-hover: #292019;--border: #3a2f26;--amber: #e8a33d;--amber-bright: #ffc063;--cream: #f2e8d8;--muted: #9c8e7c;--red: #e05545;--green: #7fb069;--font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;--font-mono: "Space Mono", ui-monospace, monospace}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(232,163,61,.08),transparent),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.006) 3px 4px);color:var(--cream);font-family:var(--font-display);line-height:1.6;min-height:100vh}.app{max-width:960px;margin:0 auto;padding:48px 20px 40px}.hero{text-align:center;margin-bottom:56px}.hero-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;color:var(--amber);text-transform:uppercase;margin-bottom:16px}.hero-title{font-size:clamp(36px,7vw,60px);font-weight:700;letter-spacing:-.02em;line-height:1.1}.hero-title span{color:var(--amber-bright)}.hero-sub{max-width:560px;margin:18px auto 24px;color:var(--muted);font-size:15px}.engine-status{display:inline-block;font-family:var(--font-mono);font-size:12px;padding:6px 16px;border-radius:999px;border:1px solid var(--border);background:var(--bg-card)}.engine-status[data-state=ready]{color:var(--green);border-color:#7fb06966}.engine-status[data-state=loading]{color:var(--amber)}.engine-status[data-state=error]{color:var(--red);border-color:#e0554566}.step{margin-bottom:48px}.step-title{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600;margin-bottom:18px}.step-num{font-family:var(--font-mono);font-size:12px;color:var(--amber);border:1px solid var(--amber);border-radius:6px;padding:2px 8px}.upload-zone{border:2px dashed var(--border);border-radius:16px;background:var(--bg-card);padding:44px 24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}.upload-zone:hover:not(.disabled),.upload-zone.dragging{border-color:var(--amber);background:var(--bg-card-hover)}.upload-zone.dragging{transform:scale(1.01)}.upload-zone.has-file{border-style:solid;border-color:#e8a33d80;padding:24px}.upload-zone.disabled{opacity:.6;cursor:not-allowed}.upload-icon{font-size:40px;display:block;margin-bottom:10px}.upload-title{font-size:16px;font-weight:500}.upload-hint{font-size:13px;color:var(--muted);margin-top:6px}.upload-file-info{display:flex;align-items:center;justify-content:center;gap:16px;text-align:left}.upload-file-info .upload-icon{margin:0;font-size:32px}.upload-filename{font-weight:600;word-break:break-all}.upload-filesize{font-size:13px;color:var(--muted)}.tape-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.tape-card{display:flex;flex-direction:column;text-align:left;background:var(--bg-card);border:2px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;color:inherit;font-family:inherit;padding:0;transition:border-color .2s,transform .15s,box-shadow .2s}.tape-card:hover:not(:disabled){transform:translateY(-3px);border-color:#e8a33d80;box-shadow:0 12px 32px #0006}.tape-card.selected{border-color:var(--amber);box-shadow:0 0 0 3px #e8a33d33}.tape-card:disabled{cursor:not-allowed;opacity:.6}.tape-cover{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:#000}.tape-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.tape-card:hover:not(:disabled) .tape-cover img{transform:scale(1.04)}.tape-badge{position:absolute;top:10px;right:10px;background:var(--amber);color:#14100d;font-family:var(--font-mono);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}.tape-info{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}.tape-name{font-size:16px;font-weight:600;line-height:1.3}.tape-meta{font-family:var(--font-mono);font-size:11px;color:var(--amber);letter-spacing:.08em}.tape-desc{font-size:13px;color:var(--muted);flex:1}.tape-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.tape-specs span{font-family:var(--font-mono);font-size:10.5px;color:var(--cream);background:#ffffff0d;border:1px solid var(--border);border-radius:6px;padding:3px 8px}.convert-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px;text-align:center}.btn-convert{font-family:var(--font-display);font-size:16px;font-weight:700;color:#14100d;background:linear-gradient(135deg,var(--amber-bright),var(--amber));border:none;border-radius:12px;padding:14px 36px;cursor:pointer;transition:transform .15s,box-shadow .2s,opacity .2s;max-width:100%}.btn-convert:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #e8a33d59}.btn-convert:disabled{opacity:.45;cursor:not-allowed}.progress-track{margin-top:20px;height:10px;border-radius:999px;background:#ffffff0f;overflow:hidden}.progress-bar{height:100%;border-radius:999px;background:repeating-linear-gradient(45deg,var(--amber) 0 10px,var(--amber-bright) 10px 20px);background-size:28px 28px;animation:progress-stripes .8s linear infinite;transition:width .3s ease}@keyframes progress-stripes{0%{background-position:0 0}to{background-position:28px 0}}.convert-hint{margin-top:14px;font-size:13px;color:var(--muted)}.error-msg{margin-top:14px;font-size:14px;color:var(--red)}.player{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px}.player-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.player-reel{display:flex;gap:14px;background:#0d0a08;border:1px solid var(--border);border-radius:12px;padding:10px 16px}.reel{width:34px;height:34px;border-radius:50%;border:3px solid var(--amber);position:relative;background:radial-gradient(circle at center,#0d0a08 28%,transparent 28%),conic-gradient(var(--amber) 0 30deg,transparent 30deg 60deg,var(--amber) 60deg 90deg,transparent 90deg 120deg,var(--amber) 120deg 150deg,transparent 150deg 180deg,var(--amber) 180deg 210deg,transparent 210deg 240deg,var(--amber) 240deg 270deg,transparent 270deg 300deg,var(--amber) 300deg 330deg,transparent 330deg 360deg)}.player-reel[data-spinning=true] .reel{animation:spin 1.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.player-tape{font-weight:700;font-size:17px}.player-mode-label{font-family:var(--font-mono);font-size:12px;color:var(--amber)}.player-controls{display:flex;align-items:center;gap:14px;margin-bottom:20px}.btn-play{width:52px;height:52px;flex-shrink:0;border-radius:50%;border:none;background:var(--amber);color:#14100d;font-size:20px;cursor:pointer;transition:transform .15s,background .2s}.btn-play:hover{background:var(--amber-bright);transform:scale(1.06)}.player-time{font-family:var(--font-mono);font-size:12px;color:var(--muted);min-width:42px;text-align:center}.player-seek{flex:1;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:6px;border-radius:999px;background:#ffffff1a;cursor:pointer;accent-color:var(--amber)}.player-seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--amber-bright);cursor:grab}.player-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.ab-toggle{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}.ab-toggle button{font-family:var(--font-display);font-size:13px;font-weight:600;padding:9px 20px;background:transparent;border:none;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}.ab-toggle button.active{background:var(--amber);color:#14100d}.btn-download{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--cream);background:transparent;border:1px solid var(--amber);border-radius:10px;padding:9px 22px;cursor:pointer;transition:background .2s,color .2s}.btn-download:hover{background:var(--amber);color:#14100d}.footer{margin-top:64px;padding-top:24px;border-top:1px solid var(--border);text-align:center;font-size:13px;color:var(--muted)}.footer a{color:var(--amber);text-decoration:none}.footer a:hover{text-decoration:underline}@media (max-width: 640px){.app{padding:32px 14px}.hero{margin-bottom:40px}.tape-grid{grid-template-columns:1fr}.convert-panel{padding:20px 16px}.btn-convert{width:100%;padding:14px 16px}.player{padding:18px 14px}.player-actions{flex-direction:column;align-items:stretch}.ab-toggle{justify-content:stretch}.ab-toggle button{flex:1}.btn-download{text-align:center}}