:root { color-scheme:dark; --bg:#0b0b0d; --panel:#121216; --raised:#1a1a20; --line:#2d2d35; --text:#f7f5ef; --muted:#96949f; --accent:#ff5c35; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 85% 0,rgba(255,92,53,.14),transparent 34rem),var(--bg); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
button,input { font:inherit; } button { color:inherit; }
.shell { width:min(1440px,100%); margin:auto; padding:24px; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.04em; }
.mark { width:13px; height:13px; background:var(--accent); transform:rotate(45deg); box-shadow:0 0 22px var(--accent); }
.status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.75rem; }
.status i { width:7px; height:7px; border-radius:50%; background:#4ade80; }
.app { display:grid; grid-template-columns:330px minmax(0,1fr); min-height:calc(100vh - 98px); border:1px solid var(--line); background:rgba(18,18,22,.84); box-shadow:0 30px 90px rgba(0,0,0,.35); }
aside { min-width:0; padding:20px; border-right:1px solid var(--line); }
.eyebrow { margin:0 0 10px; color:var(--accent); font-size:.7rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font:750 clamp(1.6rem,3vw,2.5rem)/1.03 system-ui,sans-serif; letter-spacing:-.06em; }
.intro { margin:12px 0 20px; color:var(--muted); font:400 .86rem/1.55 system-ui,sans-serif; }
.search { position:relative; margin-bottom:18px; }
.search input { width:100%; min-height:46px; padding:0 42px 0 14px; border:1px solid var(--line); border-radius:0; outline:0; color:var(--text); background:#0e0e11; }
.search input:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.search span { position:absolute; top:50%; right:14px; color:var(--muted); transform:translateY(-50%); }
.label { display:flex; justify-content:space-between; margin-bottom:10px; color:var(--muted); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.results { display:grid; gap:8px; }
.card { width:100%; padding:13px; border:1px solid transparent; background:transparent; text-align:left; cursor:pointer; }
.card:hover,.card.active { border-color:var(--line); background:var(--raised); }
.card strong { display:block; margin-bottom:6px; font-size:.9rem; } .card small { color:var(--muted); font-size:.68rem; }
.card em { display:block; width:24px; height:2px; margin-top:11px; background:var(--card-accent); }
main { min-width:0; display:grid; grid-template-rows:auto 1fr; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:64px; padding:12px 20px; border-bottom:1px solid var(--line); }
.crumb { min-width:0; overflow:hidden; color:var(--muted); font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; } .crumb b { color:var(--text); }
.architecture { flex:none; padding:9px 12px; border:1px solid var(--line); background:transparent; cursor:pointer; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 260px; min-height:0; }
.stage { min-width:0; padding:20px; }
.video { position:relative; overflow:hidden; aspect-ratio:16/9; border:1px solid var(--line); background:#050506; }
video { display:block; width:100%; height:100%; object-fit:contain; }
.badge { position:absolute; top:12px; left:12px; padding:7px 9px; background:rgba(8,8,10,.78); font-size:.67rem; pointer-events:none; }
.playing { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding-top:18px; }
.playing h2 { margin:0 0 8px; font:750 clamp(1.2rem,2vw,1.65rem)/1.15 system-ui,sans-serif; letter-spacing:-.04em; }
.playing p { margin:0; color:var(--muted); font:400 .82rem/1.5 system-ui,sans-serif; }
.next { flex:none; padding:11px 15px; border:0; color:#180803; background:var(--accent); font-weight:900; cursor:pointer; } .next:disabled { opacity:.35; }
.episode-panel { min-width:0; border-left:1px solid var(--line); }
.episode-head { padding:20px; border-bottom:1px solid var(--line); } .episode-head span { color:var(--muted); font-size:.7rem; } .episode-head strong { display:block; margin-top:4px; font:700 1rem system-ui,sans-serif; }
.episodes { max-height:calc(100vh - 190px); overflow:auto; padding:10px; }
.episode { display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px; width:100%; padding:10px; border:0; background:transparent; text-align:left; cursor:pointer; }
.episode:hover,.episode.active { background:var(--raised); }
.num { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); color:var(--muted); font-size:.68rem; } .episode.active .num { border-color:var(--accent); color:var(--accent); }
.episode strong { display:block; overflow:hidden; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; } .episode small { display:block; margin-top:5px; color:var(--muted); font-size:.64rem; }
.empty { padding:16px 12px; color:var(--muted); font-size:.78rem; }
dialog { width:min(760px,calc(100% - 30px)); padding:0; border:1px solid var(--line); color:var(--text); background:#111115; box-shadow:0 25px 90px #000; } dialog::backdrop { background:rgba(0,0,0,.75); backdrop-filter:blur(5px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); } .dialog-head h2 { margin:0; font:700 1rem system-ui,sans-serif; } .close { border:0; background:transparent; font-size:1.35rem; cursor:pointer; }
.pipeline { display:grid; grid-template-columns:repeat(4,1fr); padding:26px 20px; } .pipe { position:relative; padding:14px; border:1px solid var(--line); } .pipe:not(:last-child)::after { content:'→'; position:absolute; top:50%; right:-17px; z-index:2; color:var(--accent); transform:translateY(-50%); } .pipe b { display:block; margin-bottom:7px; color:var(--accent); font-size:.68rem; } .pipe span { font:600 .78rem/1.4 system-ui,sans-serif; }
.note { margin:0; padding:0 20px 22px; color:var(--muted); font:400 .8rem/1.55 system-ui,sans-serif; }
@media(max-width:900px){.app{grid-template-columns:1fr}.results{grid-template-columns:repeat(3,minmax(0,1fr))}aside{border-right:0;border-bottom:1px solid var(--line)}.workspace{grid-template-columns:1fr}.episode-panel{border-top:1px solid var(--line);border-left:0}.episodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-height:none}}
@media(max-width:620px){.shell{padding:0}header{margin:0;padding:15px 16px}.app{min-height:calc(100vh - 54px);border-right:0;border-left:0}aside,.toolbar,.stage,.episode-head{padding:14px}.intro{display:none}.results{display:flex;overflow-x:auto}.card{min-width:180px}.playing{flex-direction:column;gap:14px}.next{width:100%}.episodes{grid-template-columns:repeat(2,minmax(0,1fr))}.pipeline{grid-template-columns:1fr;gap:12px}.pipe:not(:last-child)::after{content:'↓';top:auto;right:50%;bottom:-18px;transform:translateX(50%)}}