:root{--bg-deep: #f5f7fa;--bg-panel: #ffffff;--bg-elevated: #eef2f7;--bg-hover: #e3e9f1;--border: #d6dde6;--border-strong: #b8c4d2;--text: #0f172a;--text-muted: #475569;--text-dim: #94a3b8;--on-accent: #ffffff;--pilot: #16a34a;--pilot-bg: rgba(22, 163, 74, .1);--pilot-border: rgba(22, 163, 74, .35);--atc: #d97706;--atc-bg: rgba(217, 119, 6, .1);--atc-border: rgba(217, 119, 6, .35);--notodden: #0284c7;--notodden-bg: rgba(2, 132, 199, .1);--notodden-border: rgba(2, 132, 199, .35);--narrator: #7c3aed;--shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Consolas", "Monaco", monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg-deep);color:var(--text);font-family:var(--font-ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at top,rgba(2,132,199,.05),transparent 60%),radial-gradient(ellipse at bottom,rgba(217,119,6,.04),transparent 60%);pointer-events:none;z-index:0}.app{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:24px 20px 80px}.header{display:flex;align-items:center;gap:14px;padding:16px 0 20px;border-bottom:1px solid var(--border);margin-bottom:28px}.header .logo{font-family:var(--font-mono);font-weight:600;font-size:13px;letter-spacing:.18em;color:var(--atc);text-transform:uppercase;display:flex;align-items:center;gap:8px}.header .logo:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--atc);box-shadow:0 0 12px var(--atc);animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.header h1{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;flex:1}.example-controls{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}.example-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-elevated);color:var(--text);border:1px solid var(--border-strong);border-radius:6px;padding:10px 36px 10px 14px;font-family:var(--font-ui);font-size:14px;font-weight:500;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23475569' d='M2 4l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 12px center;transition:border-color .15s;min-width:280px}.select:hover{border-color:var(--atc)}.select:focus{outline:none;border-color:var(--atc);box-shadow:0 0 0 3px #d977062e}.line-counts{display:flex;gap:4px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}.count-chip{padding:5px 9px;border-radius:4px;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-muted)}.count-chip strong{color:var(--text);margin-left:4px;font-weight:600}.count-chip.pilot strong{color:var(--pilot)}.count-chip.atc strong{color:var(--atc)}.scenario-card{background:var(--bg-panel);border:1px solid var(--border);border-left:3px solid var(--narrator);border-radius:8px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow-card)}.scenario-card .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--narrator);margin-bottom:6px}.scenario-card .text{font-size:14px;color:var(--text-muted);line-height:1.6}.scenario-card .text-wrap{flex:1;min-width:0}.audio-bar{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:14px 16px;display:flex;align-items:center;gap:14px;margin-top:14px;margin-bottom:28px;box-shadow:var(--shadow-card)}.audio-bar .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}.audio-play-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--atc);color:var(--on-accent);border:none;border-radius:50%;width:40px;height:40px;flex-shrink:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:filter .15s,box-shadow .15s;padding:0}.audio-play-btn:hover{filter:brightness(1.08);box-shadow:0 0 16px #d9770659}.audio-play-btn:active{transform:scale(.96)}.audio-play-btn.playing{box-shadow:0 0 18px #d9770673}.audio-play-btn svg{width:16px;height:16px;fill:currentColor}.audio-progress{flex:1;height:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;cursor:pointer;position:relative;overflow:hidden}.audio-progress:hover{border-color:var(--border-strong)}.audio-progress-fill{position:absolute;top:0;bottom:0;left:0;background:linear-gradient(90deg,var(--atc),#fb923c);border-radius:3px;pointer-events:none;transition:width .08s linear}.audio-time{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);white-space:nowrap;min-width:86px;text-align:right}.dialogue{display:flex;flex-direction:column;gap:10px}.bubble{display:flex;gap:10px;align-items:flex-start;max-width:86%}.bubble.pilot{align-self:flex-start}.bubble.atc,.bubble.notodden{align-self:flex-end;flex-direction:row-reverse}.bubble-body{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:10px 14px;flex:1;min-width:0;box-shadow:var(--shadow-card)}.bubble.pilot .bubble-body{background:var(--pilot-bg);border-color:var(--pilot-border)}.bubble.atc .bubble-body{background:var(--atc-bg);border-color:var(--atc-border)}.bubble.notodden .bubble-body{background:var(--notodden-bg);border-color:var(--notodden-border)}.bubble-label{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:8px}.bubble.pilot .bubble-label{color:var(--pilot)}.bubble.atc .bubble-label{color:var(--atc)}.bubble.notodden .bubble-label{color:var(--notodden)}.bubble-station{background:rgba(0,0,0,.04);border:1px solid currentColor;border-radius:3px;padding:1px 6px;font-size:9px;opacity:.85}.bubble-text{font-family:var(--font-mono);font-size:13px;line-height:1.55;color:var(--text);word-break:break-word}.context-line{align-self:center;text-align:center;max-width:80%;padding:8px 14px;margin:4px 0;font-size:12px;color:var(--text-dim);font-style:italic;letter-spacing:.01em;display:flex;align-items:center;gap:10px}.context-line:before,.context-line:after{content:"";flex:1;height:1px;background:var(--border)}.context-line .text{flex:0 1 auto}.play-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border-strong);border-radius:50%;width:32px;height:32px;flex-shrink:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;padding:0}.play-btn:hover{border-color:var(--text);color:var(--text);background:var(--bg-hover)}.bubble.pilot .play-btn:hover{border-color:var(--pilot);color:var(--pilot)}.bubble.atc .play-btn:hover{border-color:var(--atc);color:var(--atc)}.bubble.notodden .play-btn:hover{border-color:var(--notodden);color:var(--notodden)}.play-btn svg{width:12px;height:12px;fill:currentColor}.play-btn.active{background:var(--atc);border-color:var(--atc);color:var(--on-accent);box-shadow:0 0 12px #d9770659}.bubble.pilot .play-btn.active{background:var(--pilot);border-color:var(--pilot);color:var(--on-accent);box-shadow:0 0 12px #16a34a59}.bubble.notodden .play-btn.active{background:var(--notodden);border-color:var(--notodden);color:var(--on-accent);box-shadow:0 0 12px #0284c759}.bubble.is-active .bubble-body{box-shadow:0 0 0 1px currentColor}.bubble.pilot.is-active .bubble-body{box-shadow:0 1px 3px #0f172a0f,0 0 0 1px var(--pilot)}.bubble.atc.is-active .bubble-body{box-shadow:0 1px 3px #0f172a0f,0 0 0 1px var(--atc)}.bubble.notodden.is-active .bubble-body{box-shadow:0 1px 3px #0f172a0f,0 0 0 1px var(--notodden)}.context-line.is-active{color:var(--text)}.scenario-card.is-active{box-shadow:0 1px 3px #0f172a0f,0 0 0 1px var(--narrator)}.context-line .play-btn{width:24px;height:24px}.context-line .play-btn svg{width:10px;height:10px}.voice-panel{margin-top:40px;padding-top:20px;border-top:1px solid var(--border)}.voice-panel summary{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;padding:4px 0}.voice-panel summary:hover{color:var(--text)}.voice-panel ul{list-style:none;padding:12px 0 0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.voice-panel li{font-family:var(--font-mono);font-size:12px;padding:8px 12px;background:var(--bg-panel);border:1px solid var(--border);border-radius:6px}.voice-panel .role{color:var(--text-muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:4px}.empty{padding:60px 20px;text-align:center;color:var(--text-muted)}@media (max-width: 640px){.app{padding:16px 14px 60px}.header h1{font-size:16px}.select{min-width:0;width:100%}.bubble{max-width:95%}.bubble-text{font-size:12px}}