@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#1c211f; --muted:#737875; --paper:#f4f3ee; --white:#fff; --line:#d8d9d2; --orange:#ec6b3f; --blue:#a9c9c3; --green:#57766d; --dark:#25312d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; font-size:14px; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.site-shell { max-width:1440px; min-height:100vh; margin:0 auto; padding:0 5.4vw; }
.topbar { min-height:84px; display:flex; align-items:center; gap:48px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.5px; }
.brand-mark { display:inline-grid; place-items:center; width:28px; height:28px; background:var(--orange); color:white; font-weight:800; transform:rotate(-8deg); }
.brand-mark.large { width:44px; height:44px; font-size:24px; margin-bottom:30px; }
.nav-links,.account-nav { display:flex; gap:28px; align-items:center; color:#686e6b; font-size:12px; font-weight:700; }
.nav-links { flex:1; }
.nav-links a:first-child { color:var(--ink); }
.account-nav { gap:20px; }
.user-chip { display:flex; align-items:center; gap:8px; color:var(--ink); }
.user-chip img,.avatar-fallback,.mini-avatar { width:27px; height:27px; border-radius:50%; object-fit:cover; display:inline-grid; place-items:center; background:var(--blue); font-size:10px; font-weight:800; }
.link-button { border:0; padding:0; background:none; color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:14px 20px; border:0; background:var(--orange); color:white; font-weight:800; font-size:12px; box-shadow:3px 3px 0 #bb5432; transition:transform .15s,box-shadow .15s; }
.button:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 #bb5432; }
.button-small { padding:10px 14px; }
.button-full { width:100%; }
.flash-stack { position:fixed; top:94px; right:5vw; z-index:10; }.flash { padding:13px 18px; color:white; background:var(--green); box-shadow:3px 3px 0 var(--dark); }.flash.error { background:#bd4d3e; }
.catalog-hero { min-height:430px; display:flex; align-items:center; justify-content:space-between; padding:72px 7.5vw 74px; margin:0 -5.4vw; background:#dfe5df; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 18px; font-family:'DM Mono',monospace; color:var(--orange); font-size:10px; font-weight:500; letter-spacing:1.3px; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-1.7px; } h1 { font-size:clamp(42px,5.2vw,76px); line-height:.98; margin-bottom:22px; } h1 em { color:var(--orange); font-style:normal; }.hero-copy { max-width:420px; margin-bottom:30px; color:#59605c; line-height:1.7; }
.hero-note { width:210px; align-self:flex-end; display:grid; grid-template-columns:40px 1fr; gap:12px; color:var(--dark); }.note-number { grid-row:span 2; font:12px 'DM Mono',monospace; color:var(--orange); }.hero-note strong { font-size:12px; line-height:1.45; }.note-line { height:1px; background:var(--dark); width:100%; margin-top:4px; }.hero-note small { grid-column:2; color:var(--muted); line-height:1.6; }
.catalog-toolbar { padding:25px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); }.search-form { display:flex; align-items:center; gap:10px; width:min(440px,100%); border-bottom:1px solid #aeb3ac; }.search-form span { font-size:24px; color:var(--orange); }.search-form input { flex:1; min-width:0; border:0; outline:0; background:none; padding:12px 0; color:var(--ink); }.search-form button { border:0; background:none; color:var(--orange); font-size:11px; font-weight:800; }.tags-filter,.tag-row { display:flex; gap:7px; flex-wrap:wrap; }.tag { border:1px solid var(--line); padding:7px 11px; color:var(--muted); font:10px 'DM Mono',monospace; }.tag.active { border-color:var(--orange); color:var(--orange); background:#fae5dc; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:44px 0 22px; }.section-heading h2 { margin:0; font-size:28px; }.text-link { color:var(--orange); font-size:11px; font-weight:800; }.text-link span { font-size:18px; margin-left:10px; }.muted { color:var(--muted); font-size:11px; }.fragment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px 22px; padding-bottom:74px; }.fragment-card { background:var(--white); border:1px solid var(--line); }.fragment-cover { position:relative; display:block; aspect-ratio:1.55; overflow:hidden; background:#c7d6d1; }.fragment-cover img { width:100%; height:100%; object-fit:cover; }.cover-placeholder { width:100%; height:100%; display:grid; place-items:center; background:#b8cfca; color:#40635d; font-size:72px; font-weight:800; }.cover-True { background:#d7c5ad; color:#895e3d; }.duration { position:absolute; top:12px; left:12px; padding:5px 8px; background:rgba(255,255,255,.88); font:10px 'DM Mono',monospace; }.play-badge { position:absolute; right:13px; bottom:13px; width:38px; height:38px; display:grid; place-items:center; background:var(--orange); color:white; font-size:13px; }.fragment-info { padding:17px 18px 18px; }.card-kicker { display:flex; gap:14px; color:var(--orange); font:10px 'DM Mono',monospace; }.fragment-info h3 { margin:11px 0 7px; font-size:19px; }.fragment-info p { min-height:40px; margin-bottom:18px; color:var(--muted); line-height:1.55; font-size:12px; }.card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #ecece7; padding-top:13px; font-size:10px; }.creator { display:flex; align-items:center; gap:6px; white-space:nowrap; }.card-tags { display:flex; gap:5px; color:var(--green); font:9px 'DM Mono',monospace; }.empty-state { grid-column:1/-1; text-align:center; padding:70px; border:1px dashed var(--line); }.empty-icon { color:var(--orange); font-size:30px; }.empty-state h3 { margin:15px 0 6px; }.empty-state p { color:var(--muted); }
footer { display:flex; justify-content:space-between; padding:24px 0; border-top:1px solid var(--line); color:var(--muted); font:10px 'DM Mono',monospace; }
.page-wrap { padding:38px 0 75px; }.back-link { color:var(--muted); font-size:11px; font-weight:700; }.detail-header { display:flex; justify-content:space-between; align-items:end; gap:35px; padding:55px 0 40px; }.detail-header h1 { font-size:clamp(38px,5vw,66px); }.detail-description { max-width:620px; color:var(--muted); line-height:1.65; }.creator-block { display:flex; align-items:center; gap:12px; min-width:190px; }.creator-block img,.profile-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:var(--blue); color:var(--dark); font-size:20px; font-weight:800; }.creator-block span:last-child { display:grid; gap:4px; }.creator-block small { color:var(--muted); font-size:10px; }.creator-block strong { font-size:12px; }.detail-layout { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); gap:22px; }.media-panel,.action-panel,.form-section { background:white; border:1px solid var(--line); }.media-panel video { display:block; width:100%; max-height:490px; background:#17211f; }.media-meta { display:flex; gap:30px; padding:15px 18px; color:var(--muted); font:10px 'DM Mono',monospace; }.media-meta b { color:var(--ink); }.action-panel { padding:27px; }.action-panel h2 { font-size:24px; margin-bottom:20px; }.mode-option { display:flex; align-items:center; gap:13px; padding:16px 0; border-top:1px solid var(--line); }.mode-option > span:nth-child(2) { display:grid; flex:1; gap:5px; }.mode-option strong { font-size:13px; }.mode-option small { color:var(--muted); font-size:10px; }.mode-option b { color:var(--orange); font-size:18px; }.mode-icon { color:var(--orange); font-size:22px; }.mode-option.accent { color:var(--orange); }.join-inline { display:block; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); color:var(--green); font-size:11px; font-weight:800; }.join-inline span { float:right; font-size:16px; }.lines-section { padding-top:30px; }.lines-table { border-top:2px solid var(--dark); }.line-row { display:grid; grid-template-columns:120px 12px 130px 1fr; gap:14px; align-items:center; padding:16px 7px; border-bottom:1px solid var(--line); font-size:12px; }.line-time { color:var(--muted); font:10px 'DM Mono',monospace; }.role-dot { display:inline-block; width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--role-color,var(--orange)); }.line-text { color:#545b57; }
.editor-intro { display:flex; justify-content:space-between; align-items:end; gap:40px; padding:55px 0 42px; }.editor-intro p:last-child { max-width:400px; color:var(--muted); line-height:1.7; }.form-grid { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.8fr); gap:20px; }.form-section { padding:25px; }.section-heading.compact { margin:0 0 25px; align-items:start; }.section-heading.compact h2 { font-size:20px; }.section-heading.compact span { color:var(--orange); font:10px 'DM Mono',monospace; }.section-heading.compact p { margin:6px 0 0; color:var(--muted); font-size:11px; }.field { margin:0 0 17px; }.field label,.join-box label { display:block; margin-bottom:7px; font-size:11px; font-weight:800; }.field input,.field textarea,.field select,.join-box input,.auth-box input { width:100%; border:1px solid var(--line); outline:0; padding:12px; background:#fbfbf8; color:var(--ink); }.field input:focus,.field textarea:focus,.join-box input:focus,.auth-box input:focus { border-color:var(--orange); }.field small,.helptext { display:block; margin-top:6px; color:var(--muted); font-size:10px; }.errorlist { list-style:none; padding:0; margin:5px 0; color:#b74e3e; font-size:10px; }.script-head { display:grid; grid-template-columns:180px 170px 1fr; padding:0 10px 8px; color:var(--muted); font:9px 'DM Mono',monospace; }.line-editor-row { display:grid; grid-template-columns:180px 170px 1fr 24px; gap:10px; margin-bottom:8px; }.line-editor-row input { width:100%; min-width:0; border:1px solid var(--line); padding:11px 9px; background:#fbfbf8; outline:0; }.time-inputs { display:flex; align-items:center; gap:5px; }.time-inputs span { color:var(--muted); }.remove-line { border:0; color:var(--muted); background:none; font-size:20px; }.add-line { width:100%; border:1px dashed #aeb3ac; padding:12px; background:none; color:var(--orange); font-weight:800; font-size:11px; }.tags-field { margin-top:24px; }.publish-button { margin-top:8px; }.form-errors { color:#b74e3e; margin-top:12px; font-size:11px; }
.center-page { min-height:calc(100vh - 170px); display:grid; place-items:center; padding:50px 0; }.auth-box,.join-box { width:min(430px,100%); padding:38px; background:white; border:1px solid var(--line); }.auth-box h1,.join-box h1 { font-size:40px; }.auth-box > p:not(.auth-switch),.join-box > p { color:var(--muted); line-height:1.6; }.auth-switch { text-align:center; margin:24px 0 0; color:var(--muted); font-size:11px; }.auth-switch a { color:var(--orange); font-weight:800; }.signup-box .field:nth-of-type(4) { margin-bottom:0; }.lobby-code { padding:13px 18px; border:1px solid var(--orange); background:#fae5dc; text-align:right; }.lobby-code small,.lobby-code strong { display:block; }.lobby-code small { color:var(--orange); font:9px 'DM Mono',monospace; }.lobby-code strong { margin:4px 0 8px; color:var(--orange); font:24px 'DM Mono',monospace; letter-spacing:3px; }.lobby-code button { border:0; background:none; color:var(--green); font-size:10px; font-weight:800; }.studio-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(275px,.7fr); gap:22px; }.session-top { display:flex; justify-content:space-between; align-items:end; margin-bottom:28px; }.session-top h1 { margin:0; font-size:42px; }.studio-video { background:var(--dark); }.studio-video video { display:block; width:100%; max-height:480px; }.recording-status { display:flex; gap:9px; align-items:center; padding:11px 15px; color:#e6ece8; font:10px 'DM Mono',monospace; }.status-dot { width:8px; height:8px; border-radius:50%; background:#8db3a4; }.recording-status.recording .status-dot { background:#e0523d; }.record-timer { margin-left:auto; }.script-list { margin-top:18px; border-top:2px solid var(--dark); }.studio-line { display:grid; grid-template-columns:30px 145px 1fr 30px 30px; gap:12px; align-items:center; min-height:76px; padding:11px 8px; border-bottom:1px solid var(--line); }.studio-line.mine { background:#e7efea; }.line-index { color:var(--muted); font:10px 'DM Mono',monospace; }.studio-role { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; }.studio-role small { width:100%; color:var(--orange); font:9px 'DM Mono',monospace; }.studio-line p { margin:0; line-height:1.5; font-size:12px; }.listen-line,.record-line { width:28px; height:28px; border:1px solid var(--line); border-radius:50%; background:white; color:var(--green); font-size:10px; }.record-line { color:var(--orange); }.record-line.active { background:var(--orange); color:white; }.studio-side { display:grid; align-content:start; gap:20px; }.side-section { padding:23px; background:white; border:1px solid var(--line); }.side-help { color:var(--muted); line-height:1.55; font-size:11px; }.role-picker { display:flex; align-items:center; gap:8px; padding:13px 0; border-top:1px solid var(--line); font-size:12px; }.role-picker input { accent-color:var(--orange); }.role-picker small { margin-left:auto; color:var(--muted); font:9px 'DM Mono',monospace; }.role-picker.static { border-top:1px solid var(--line); }.take-message { color:var(--green); font-size:11px; }.profile-header { display:flex; align-items:center; gap:18px; padding:35px 0 45px; }.profile-header h1 { margin:0 0 8px; font-size:46px; }.profile-header p:last-child { margin:0; color:var(--muted); }.large-avatar { width:74px; height:74px; font-size:30px; }.large-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }.profile-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.take-history { display:flex; align-items:center; gap:10px; padding:13px 0; border-top:1px solid var(--line); }.take-history span:nth-child(2) { display:grid; gap:3px; flex:1; }.take-history strong { font-size:11px; }.take-history small,.take-history time { color:var(--muted); font-size:10px; }.take-history time { font-family:'DM Mono',monospace; }
@media (max-width:800px) { .site-shell { padding:0 20px; }.topbar { gap:20px; flex-wrap:wrap; padding:15px 0; }.nav-links { order:3; width:100%; }.account-nav { margin-left:auto; }.catalog-hero { margin:0 -20px; padding:50px 20px; min-height:500px; align-items:start; flex-direction:column; justify-content:center; gap:45px; }.hero-note { align-self:auto; }.catalog-toolbar,.section-heading,.detail-header,.editor-intro,.session-top { align-items:start; flex-direction:column; }.catalog-toolbar { padding-bottom:20px; }.tags-filter { width:100%; }.fragment-grid { grid-template-columns:1fr; }.detail-layout,.form-grid,.studio-layout,.profile-layout { grid-template-columns:1fr; }.detail-header { padding-top:45px; }.creator-block { align-self:start; }.line-row { grid-template-columns:80px 10px 90px 1fr; gap:8px; }.editor-intro p:last-child { margin-top:0; }.script-head { grid-template-columns:1fr 1fr; }.script-head span:last-child { grid-column:1/-1; }.line-editor-row { grid-template-columns:1fr 1fr 24px; }.time-inputs { grid-column:1/-1; }.line-character { grid-column:1/3; }.line-speech { grid-column:1/3; }.studio-line { grid-template-columns:25px 1fr 30px 30px; }.studio-role { grid-column:2; }.studio-line p { grid-column:2/-1; grid-row:2; }.studio-line .listen-line,.studio-line .record-line { grid-row:1; }.studio-line .listen-line { grid-column:3; }.studio-line .record-line { grid-column:4; }.studio-side { order:-1; }.auth-box,.join-box { padding:25px; } }

/* Scene builder */
.builder-intro { padding-bottom:34px; }
.scene-builder { max-width:1320px; margin:0 auto; }
.builder-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(315px,.75fr); gap:20px; align-items:start; }
.editor-canvas,.builder-card { border:1px solid var(--line); background:#fff; }
.editor-canvas { min-width:0; padding:22px; }
.canvas-toolbar { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.canvas-toolbar h2 { margin:0; font-size:21px; }
.editor-status { padding:7px 10px; background:#edf1eb; color:var(--green); font:9px 'DM Mono',monospace; }
.video-stage { position:relative; display:grid; min-height:350px; place-items:center; overflow:hidden; background:#1e2925; }
.video-stage video { display:block; width:100%; max-height:520px; background:#1e2925; }
.video-empty { position:absolute; display:grid; place-items:center; gap:8px; color:#e8ede8; text-align:center; pointer-events:none; }
.video-empty span { display:grid; place-items:center; width:43px; height:43px; border:1px solid #8b9990; color:var(--orange); font-size:25px; }
.video-empty strong { font-size:12px; }
.video-empty small { color:#9ba9a1; font:10px 'DM Mono',monospace; }
.audio-preview { display:flex; align-items:center; gap:12px; margin-top:12px; padding:11px 14px; border:1px solid var(--line); background:#f7f8f3; }
.audio-preview.ready { border-color:#9abbb2; background:#eef5ef; }
.audio-icon { display:grid; place-items:center; width:29px; height:29px; background:var(--dark); color:#fff; font-size:18px; }
.audio-preview div { display:grid; gap:3px; min-width:130px; }.audio-preview strong { font-size:11px; }.audio-preview small { color:var(--muted); font:9px 'DM Mono',monospace; }.audio-preview audio { height:29px; flex:1; min-width:120px; }
.timeline-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:25px; padding-bottom:12px; border-bottom:2px solid var(--dark); }.timeline-head > div:first-child { display:flex; align-items:center; gap:12px; }.timeline-head strong { font:10px 'DM Mono',monospace; }.timeline-head span { color:var(--muted); font:10px 'DM Mono',monospace; }.timeline-actions { display:flex; align-items:center; gap:6px; }.timeline-actions button { border:0; background:none; color:var(--green); font-size:10px; font-weight:800; }.timeline-actions .add-segment-button { padding:8px 10px; background:var(--orange); color:white; }
.timeline-wrap { position:relative; overflow-x:auto; padding-top:27px; }.time-ruler { position:relative; height:20px; min-width:520px; border-bottom:1px solid var(--line); }.time-ruler span { position:absolute; transform:translateX(-50%); color:var(--muted); font:9px 'DM Mono',monospace; white-space:nowrap; }.timeline-track { position:relative; min-width:520px; min-height:145px; background:repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), #e6e8e1 calc(10% - 1px), #e6e8e1 10%); cursor:crosshair; }.role-lane { position:relative; display:flex; height:48px; border-bottom:1px solid #e8e9e3; }.lane-label { z-index:1; display:flex; align-items:center; gap:6px; width:105px; padding-left:6px; background:rgba(255,255,255,.9); font-size:10px; font-weight:800; }.lane-track { position:relative; flex:1; }.timeline-segment { position:absolute; top:9px; min-width:18px; height:29px; overflow:hidden; border:2px solid rgba(255,255,255,.7); padding:0 8px; color:white; text-align:left; white-space:nowrap; text-overflow:ellipsis; font-size:9px; font-weight:800; cursor:pointer; }.timeline-segment.selected { outline:2px solid var(--dark); outline-offset:2px; }.timeline-playhead { position:absolute; z-index:4; top:0; bottom:0; left:0; width:2px; background:var(--orange); pointer-events:none; }.timeline-playhead:before { position:absolute; top:-5px; left:-4px; width:10px; height:10px; background:var(--orange); content:''; transform:rotate(45deg); }.lane-placeholder,.timeline-hint { color:var(--muted); font:10px 'DM Mono',monospace; }.lane-placeholder { padding:56px 0 0 120px; }.timeline-hint { margin:8px 0 0 105px; }.segments-heading { display:flex; align-items:baseline; justify-content:space-between; margin-top:26px; }.segments-heading h3 { margin:0; font-size:16px; }.segments-heading span { color:var(--orange); font:10px 'DM Mono',monospace; }.segment-list { margin-top:10px; border-top:1px solid var(--line); }.segment-empty { padding:22px 8px; color:var(--muted); font-size:11px; }.segment-row { display:grid; grid-template-columns:28px 10px 105px minmax(80px,1fr) 96px; gap:9px; align-items:center; min-height:48px; padding:7px 8px; border-bottom:1px solid var(--line); cursor:pointer; font-size:10px; }.segment-row.selected { background:#eef5ef; }.segment-index,.segment-time { color:var(--muted); font:9px 'DM Mono',monospace; }.segment-copy { overflow:hidden; color:#5b625d; white-space:nowrap; text-overflow:ellipsis; }.builder-sidebar { display:grid; gap:14px; }.builder-card { padding:20px; }.scene-info-card .field:last-child { margin-bottom:0; }.file-field input[type=file] { display:none; }.file-drop { display:flex!important; align-items:center; gap:10px; margin:0!important; padding:12px; border:1px dashed #adb5ad; background:#fafbf7; cursor:pointer; }.file-drop > span:first-child { color:var(--orange); font-size:18px; }.file-drop > span:last-child { display:grid; gap:3px; }.file-drop strong { font-size:10px; }.file-drop small { color:var(--muted); font:9px 'DM Mono',monospace; }.roles-list { min-height:35px; }.roles-empty { padding:7px 0 13px; color:var(--muted); font-size:10px; }.role-item { display:flex; align-items:center; gap:8px; padding:10px 0; border-top:1px solid var(--line); font-size:11px; }.role-item button { margin-left:auto; border:0; background:none; color:var(--muted); font-size:17px; }.add-role { display:flex; gap:6px; margin-top:12px; }.add-role input { flex:1; min-width:0; border:1px solid var(--line); padding:10px; outline:0; font-size:11px; }.add-role button { border:1px solid var(--orange); padding:0 11px; background:none; color:var(--orange); font-size:10px; font-weight:800; }.segment-inspector { opacity:.6; }.segment-inspector.has-selection { opacity:1; }.inspector-fields { display:grid; gap:13px; }.inspector-fields label { display:grid; gap:6px; color:var(--muted); font:9px 'DM Mono',monospace; }.inspector-fields input,.inspector-fields select,.inspector-fields textarea { width:100%; border:1px solid var(--line); padding:10px; outline:0; background:#fbfbf8; color:var(--ink); font:11px Manrope,Arial,sans-serif; }.inspector-time { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.delete-segment { margin-top:15px; border:0; padding:0; background:none; color:#bd5442; font-size:10px; font-weight:800; }.top-error { margin:12px 0; }
@media (max-width:800px) { .builder-grid { grid-template-columns:1fr; }.builder-sidebar { order:-1; }.builder-intro { padding-top:40px; }.video-stage { min-height:230px; }.canvas-toolbar { align-items:start; flex-direction:column; }.timeline-head { align-items:start; flex-direction:column; }.timeline-actions { flex-wrap:wrap; }.audio-preview { flex-wrap:wrap; }.audio-preview audio { width:100%; }.segment-row { grid-template-columns:25px 9px 80px 1fr; }.segment-time { grid-column:3/-1; }.editor-canvas { padding:14px; } }

/* Timeline alignment and interaction states */
.timeline-wrap { padding:24px 0 0; }
.time-ruler-row { display:grid; grid-template-columns:105px minmax(520px,1fr); min-width:625px; }
.timeline-label-spacer { padding:0 8px 8px 0; color:var(--muted); font:9px 'DM Mono',monospace; }
.time-ruler { min-width:0; }
.timeline-track { margin-left:105px; min-width:520px; min-height:0; background:repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), #e6e8e1 calc(10% - 1px), #e6e8e1 10%); }
.role-lane { display:block; height:48px; position:relative; }
.lane-label { position:absolute; right:100%; top:0; width:105px; height:48px; padding-left:8px; border-bottom:1px solid #e8e9e3; }
.lane-track { position:relative; width:100%; height:48px; }
.timeline-hint { margin:10px 0 0 105px; }
.timeline-segment { top:8px; height:32px; border-radius:3px; box-shadow:0 2px 5px rgba(28,33,31,.14); }
.timeline-segment:after { position:absolute; top:0; right:0; bottom:0; width:4px; background:rgba(255,255,255,.45); content:''; }
.timeline-segment.selected { box-shadow:0 0 0 2px var(--dark), 0 3px 7px rgba(28,33,31,.2); outline:0; }
.role-item { gap:0; padding:0; }
.role-item.active { margin:0 -8px; padding:0 8px; background:#eef5ef; }
.role-select { display:flex; align-items:center; gap:8px; flex:1; min-width:0; border:0; padding:10px 0; background:none; text-align:left; color:var(--ink); }
.role-select small { margin-left:auto; color:var(--orange); font:9px 'DM Mono',monospace; }
.remove-role { flex:0 0 24px; }
.step-label { display:block; margin-bottom:6px; color:var(--orange); font:9px 'DM Mono',monospace; }
.active-role-label { margin-right:4px; color:var(--muted)!important; }
.active-role-label b { color:var(--orange); font-weight:500; }
.timing-summary { display:grid; grid-template-columns:1fr 1.4fr 34px; align-items:center; gap:10px; padding:11px 12px; background:#eef5ef; border:1px solid #d3e1d6; }
.timing-summary div { display:grid; gap:4px; }.timing-summary small { color:var(--muted); font:8px 'DM Mono',monospace; }.timing-summary strong { color:var(--dark); font:12px 'DM Mono',monospace; }.timing-summary button { width:30px; height:30px; border:1px solid var(--green); border-radius:50%; background:white; color:var(--green); font-size:10px; }
.segment-inspector.has-selection { border-color:#9abbb2; box-shadow:inset 3px 0 0 var(--orange); }
.segment-row { transition:background .12s; }.segment-row:hover { background:#f5f8f3; }
@media (max-width:800px) { .time-ruler-row { grid-template-columns:76px minmax(520px,1fr); }.timeline-track { margin-left:76px; }.lane-label { width:76px; }.timeline-hint { margin-left:76px; }.lane-label { font-size:9px; }.active-role-label { width:100%; margin-bottom:3px; } }

/* Reliable single-action scene builder */
.simple-builder .builder-grid { grid-template-columns:minmax(0,1.65fr) minmax(330px,.75fr); }
.simple-builder .timeline-actions { justify-content:flex-end; }.simple-builder .timeline-actions button { padding:7px 9px; border:1px solid var(--line); background:#fff; }
.simple-timeline { overflow-x:auto; padding-top:24px; }.simple-timeline .time-ruler { min-width:560px; }.simple-timeline .timeline-track { min-width:560px; min-height:62px; margin-left:0; overflow:hidden; background:repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), #e1e4dd calc(10% - 1px), #e1e4dd 10%); border-bottom:1px solid var(--line); cursor:pointer; }.simple-timeline .timeline-track:before { position:absolute; inset:0; background:linear-gradient(90deg, rgba(87,118,109,.06), transparent); content:''; pointer-events:none; }.simple-timeline p { margin:9px 0 0; color:var(--muted); font-size:10px; }.simple-timeline .timeline-playhead { z-index:5; }.simple-segment { top:15px; z-index:2; height:32px; border:0; border-radius:3px; background:var(--green); color:#fff; box-shadow:0 2px 4px rgba(28,33,31,.18); }.simple-segment:nth-child(2n) { background:#b46b4b; }.simple-segment:nth-child(3n) { background:#7a78a1; }.simple-segment:hover { filter:brightness(.93); }.add-line-card { border-color:#b8cec2; }.add-line-card .section-heading { margin-bottom:18px; }.draft-fields { display:grid; gap:14px; }.draft-fields > label { display:grid; gap:6px; color:var(--muted); font:9px 'DM Mono',monospace; }.draft-fields input,.draft-fields select,.draft-fields textarea { width:100%; border:1px solid var(--line); padding:11px; outline:0; background:#fbfbf8; color:var(--ink); font:11px Manrope,Arial,sans-serif; }.draft-fields input:focus,.draft-fields select:focus,.draft-fields textarea:focus { border-color:var(--orange); box-shadow:0 0 0 2px #fae5dc; }.draft-time { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.draft-time label { display:grid; gap:6px; color:var(--muted); font:9px 'DM Mono',monospace; }.new-role-row { display:flex; gap:6px; }.new-role-row input { min-width:0; }.new-role-row button { flex:0 0 auto; border:1px solid var(--green); padding:0 11px; background:#fff; color:var(--green); font-size:10px; font-weight:800; }.draft-error { min-height:16px; margin:11px 0 8px; color:#bc4d3f; font-size:10px; }.simple-builder .segment-row { grid-template-columns:28px 105px minmax(80px,1fr) 135px 26px; }.simple-builder .segment-row strong { font-size:10px; }.remove-segment { border:0; background:none; color:#bf5545; font-size:19px; }.editor-status.error { background:#fae4de; color:#bd4d3e; }.simple-builder .step-label { margin-bottom:7px; }
@media (max-width:800px) { .simple-builder .builder-grid { grid-template-columns:1fr; }.simple-builder .timeline-actions { justify-content:start; }.simple-builder .segment-row { grid-template-columns:25px 75px 1fr 25px; }.simple-builder .segment-time { grid-column:2/4; }.simple-builder .simple-timeline .time-ruler,.simple-builder .simple-timeline .timeline-track { min-width:500px; } }

/* Direct timeline editor */
.timeline-builder { max-width:1280px; margin:0 auto; }.compact-intro { align-items:center; padding:30px 0 25px; }.compact-intro h1 { margin:0; font-size:44px; }.compact-intro p:last-child { margin:0; }.timeline-builder .builder-grid { grid-template-columns:minmax(0,1.8fr) 300px; }.timeline-builder .editor-canvas { padding:20px; }.timeline-builder .video-stage { min-height:310px; }.timeline-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; }.timeline-toolbar > div { display:flex; align-items:center; gap:7px; }.timeline-toolbar strong { font:13px 'DM Mono',monospace; color:var(--orange); }.timeline-toolbar span { color:var(--muted); font:10px 'DM Mono',monospace; }.timeline-toolbar button { border:1px solid var(--line); padding:8px 10px; background:white; color:var(--green); font-size:10px; font-weight:800; }.timeline-toolbar #add-at-playhead { border-color:var(--orange); background:var(--orange); color:white; }.timeline-toolbar b { display:inline-grid; place-items:center; min-width:16px; height:16px; margin-left:4px; background:#edf1eb; color:var(--green); font-size:9px; }.timeline-guide { display:flex; justify-content:space-between; gap:12px; margin-top:16px; color:var(--muted); font:9px 'DM Mono',monospace; }.timeline-scroll { overflow-x:auto; padding-top:22px; }.timeline-builder .time-ruler { min-width:620px; }.timeline-builder .timeline-track { min-width:620px; min-height:70px; margin-left:0; overflow:hidden; background:repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), #e3e5df calc(10% - 1px), #e3e5df 10%); border:1px solid var(--line); cursor:crosshair; }.timeline-builder .timeline-track:after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(87,118,109,.05),transparent); content:''; pointer-events:none; }.timeline-builder .timeline-segment { z-index:2; top:18px; height:33px; border:0; border-radius:3px; background:var(--green); color:white; box-shadow:0 2px 5px rgba(28,33,31,.2); }.timeline-builder .timeline-segment:nth-child(2n) { background:#a9684b; }.timeline-builder .timeline-segment:nth-child(3n) { background:#7677a0; }.timeline-selection { position:absolute; z-index:1; top:15px; display:none; height:40px; border:1px dashed var(--orange); background:#fae0d5; pointer-events:none; }.timeline-builder .timeline-playhead { z-index:5; }.timeline-builder .segment-row { grid-template-columns:30px 100px minmax(80px,1fr) 130px 24px; cursor:pointer; }.timeline-builder .segment-row:hover { background:#f5f8f3; }.timeline-builder .segment-row strong { font-size:10px; }.remove-segment { border:0; background:none; color:#bd4d3e; font-size:18px; }.builder-summary { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:2px 9px; padding:16px 20px; }.summary-number { grid-row:span 2; color:var(--orange); font:28px 'DM Mono',monospace; }.builder-summary > span:nth-child(2) { color:var(--muted); font-size:10px; }.builder-summary button { grid-column:2; justify-self:start; border:0; padding:0; background:none; color:var(--green); font-size:10px; font-weight:800; }
.editor-dialog { width:min(470px,calc(100vw - 30px)); border:0; padding:0; color:var(--ink); background:white; box-shadow:0 20px 60px rgba(28,33,31,.3); }.editor-dialog::backdrop { background:rgba(28,33,31,.48); }.dialog-head { display:flex; align-items:start; justify-content:space-between; gap:20px; padding:24px 25px 18px; border-bottom:1px solid var(--line); }.dialog-head .eyebrow { margin-bottom:8px; }.dialog-head h2 { margin:0; font-size:24px; }.close-dialog { width:28px; height:28px; border:0; background:#f1f2ed; color:var(--muted); font-size:21px; line-height:1; }.dialog-role-list { max-height:230px; overflow:auto; padding:0 25px; }.dialog-empty { margin:0; padding:20px 0; color:var(--muted); font-size:11px; }.dialog-role { display:flex; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); }.dialog-role .role-dot { background:var(--orange); }.dialog-role:nth-child(3n) .role-dot { background:#7677a0; }.dialog-role:nth-child(2n) .role-dot { background:var(--green); }.dialog-role strong { flex:1; font-size:12px; }.dialog-role button { border:0; background:none; color:#bd4d3e; font-size:18px; }.dialog-add-role { display:flex; gap:7px; padding:18px 25px 0; }.dialog-add-role input { flex:1; min-width:0; border:1px solid var(--line); padding:11px; outline:0; }.dialog-add-role button { border:1px solid var(--orange); padding:0 13px; background:white; color:var(--orange); font-size:10px; font-weight:800; }.dialog-error { min-height:16px; margin:8px 25px 0; color:#bd4d3e; font-size:10px; }.close-primary { display:flex; margin:16px 25px 24px; width:calc(100% - 50px); }.modal-form { display:grid; gap:15px; padding:21px 25px 0; }.modal-form > label,.modal-times label { display:grid; gap:6px; color:var(--muted); font:9px 'DM Mono',monospace; }.modal-form input,.modal-form select,.modal-form textarea { width:100%; border:1px solid var(--line); padding:11px; outline:0; background:#fbfbf8; color:var(--ink); font:12px Manrope,Arial,sans-serif; }.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus { border-color:var(--orange); box-shadow:0 0 0 2px #fae5dc; }.modal-times { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:8px; }.modal-times > span { min-width:69px; padding:12px 0; color:var(--orange); text-align:right; font:10px 'DM Mono',monospace; }.new-role-link { justify-self:start; border:0; padding:0; background:none; color:var(--green); font-size:10px; font-weight:800; }.dialog-actions { display:flex; justify-content:space-between; align-items:center; padding:18px 25px 25px; }.dialog-actions .delete-segment { margin:0; }.dialog-actions .button { padding:12px 15px; }
@media (max-width:800px) { .timeline-builder .builder-grid { grid-template-columns:1fr; }.timeline-builder .builder-sidebar { order:-1; }.timeline-builder .video-stage { min-height:210px; }.timeline-toolbar,.timeline-guide { align-items:start; flex-direction:column; }.timeline-builder .segment-row { grid-template-columns:28px 80px 1fr 24px; }.timeline-builder .segment-time { grid-column:2/4; }.compact-intro h1 { font-size:38px; }.modal-times { grid-template-columns:1fr 1fr; }.modal-times > span { grid-column:1/-1; padding:0; text-align:left; }.editor-dialog { width:calc(100vw - 20px); } }

/* Sequential dubbing room */
.dubbing-room { max-width:1180px; margin:0 auto; }.room-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }.room-head h1 { margin:0; font-size:42px; }.room-head .eyebrow { margin:17px 0 8px; }.role-drawer { margin-bottom:18px; border:1px solid var(--line); background:#fff; }.role-drawer summary { display:flex; justify-content:space-between; padding:12px 16px; cursor:pointer; font-size:11px; font-weight:800; }.role-drawer summary span { color:var(--orange); font:10px 'DM Mono',monospace; }.role-drawer form { padding:0 16px 16px; }.drawer-roles { display:flex; flex-wrap:wrap; gap:8px 20px; padding:12px 0; border-top:1px solid var(--line); }.drawer-roles label { display:flex; align-items:center; gap:6px; font-size:11px; }.drawer-roles small { color:var(--muted); font-size:9px; }.dub-layout { display:grid; grid-template-columns:minmax(0,1.9fr) 285px; gap:20px; align-items:start; }.dub-stage { overflow:hidden; border:1px solid #353f3b; background:#141a18; }.clip-counter { display:flex; gap:5px; padding:11px 15px; color:#aeb9b2; font:10px 'DM Mono',monospace; }.clip-counter strong { color:#f0f2ec; font-weight:500; }.dub-video-wrap { position:relative; display:grid; min-height:410px; place-items:center; background:#050706; }.dub-video-wrap video { display:block; width:100%; max-height:540px; }.empty-clip { color:#b8c3bc; text-align:center; font-size:12px; }.clip-script { position:relative; padding:19px 22px 20px 40px; color:white; background:#202926; }.clip-script > .role-dot { position:absolute; top:23px; left:21px; width:9px; height:9px; }.clip-script strong { color:#c3d9d1; font-size:11px; }.clip-script p { min-height:38px; margin:8px 0; font-size:16px; font-weight:600; line-height:1.45; }.clip-script small { color:#95a19a; font:10px 'DM Mono',monospace; }.dub-console { padding:12px; border:1px solid #3b4541; border-radius:20px; background:#202827; box-shadow:inset 0 0 0 3px #18201e; }.console-title { display:flex; justify-content:space-between; padding:8px 8px 13px; color:#a6b5ad; font:9px 'DM Mono',monospace; }.console-title strong { color:#f0f3ee; font-weight:500; }.console-button { display:flex; align-items:center; justify-content:space-between; width:100%; margin:6px 0; border:1px solid #66746e; border-radius:7px; padding:13px 15px; background:#37433e; color:#f3f4ef; font-size:12px; font-weight:800; }.console-button:hover { background:#45544e; }.console-button.record { border-color:#c6664a; background:#8d4839; }.console-button.record.active { background:#c3513c; }.console-button.primary { border-color:#e67a51; background:var(--orange); }.console-button.share { border-color:#70978a; color:#cee1da; }.console-button:disabled { opacity:.45; cursor:not-allowed; }.console-separator { height:1px; margin:13px 0; background:#4c5953; }.record-state { display:flex; align-items:center; gap:7px; padding:7px 5px 2px; color:#aebbb4; font-size:10px; }.record-state #record-dot { width:7px; height:7px; border-radius:50%; background:#708078; }.record-state #record-dot.active { background:#ed6048; box-shadow:0 0 0 3px rgba(237,96,72,.18); }.record-state time { margin-left:auto; color:#f1f3ef; font:10px 'DM Mono',monospace; }.console-message { min-height:26px; margin:11px 5px 3px; color:#a9cfc1; font-size:10px; line-height:1.45; }.console-message.error { color:#ef987c; }.clip-strip { display:flex; gap:8px; overflow-x:auto; padding:17px 0 3px; }.clip-item { display:grid; grid-template-columns:20px auto; min-width:130px; gap:2px 5px; border:1px solid var(--line); padding:10px; background:#fff; color:var(--ink); text-align:left; }.clip-item.active { border-color:var(--orange); background:#fae5dc; box-shadow:inset 3px 0 0 var(--orange); }.clip-item span,.clip-item small { color:var(--muted); font:9px 'DM Mono',monospace; }.clip-item b { font-size:10px; }.clip-item small { grid-column:2; }.shared-dub { width:min(760px,100%); padding:30px; border:1px solid var(--line); background:#fff; }.shared-dub h1 { font-size:38px; }.shared-dub video { display:block; width:100%; margin-bottom:22px; background:#17211f; }
@media (max-width:800px) { .room-head { align-items:start; flex-direction:column; }.dub-layout { grid-template-columns:1fr; }.dub-video-wrap { min-height:240px; }.dub-console { border-radius:12px; }.clip-script p { font-size:14px; }.room-head h1 { font-size:35px; } }

.missing-media { display:grid; min-height:280px; place-items:center; background:#17211f; color:#dce4de; font-size:12px; }