@font-face{font-family:Manrope;src:url('fonts/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap;}
@font-face{font-family:'DM Mono';src:url('fonts/dm-mono.ttf') format('truetype');font-weight:400 500;font-display:swap;}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", sans-serif; font-size: 16px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .48; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.04em; }
h2 { margin-bottom: 8px; font-size: 20px; letter-spacing: -.025em; }
h3 { margin-bottom: 6px; font-size: 14px; }
p { color: var(--muted); line-height: 1.6; }
.icon { flex: none; display: inline-block; vertical-align: middle; }
.app-shell { min-height: 100vh; }
.topbar { height: 68px; padding: 0 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.brand { border: 0; background: none; padding: 0; display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 800; justify-self: start; }
.brand-mark { width: 29px; height: 29px; border-radius: 9px; background: var(--ink); display: flex; align-items: center; justify-content: center; gap: 2px; transform: rotate(-2deg); }
.brand-mark span { width: 3px; border-radius: 2px; background: var(--lime); }
.brand-mark span:nth-child(1) { height: 8px; }.brand-mark span:nth-child(2) { height: 15px; }.brand-mark span:nth-child(3) { height: 11px; }
.top-actions { display: flex; gap: 8px; align-items: center; justify-self: end; }
.button { height: 38px; border-radius: 9px; border: 1px solid transparent; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 13px; background: var(--ink); color: var(--white); transition: transform .15s, box-shadow .15s, background .15s; }
.button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 16px var(--shadow-medium); }
.button.secondary { background: var(--white); color: var(--ink); border-color: var(--line-dark); }
.button.ghost { background: transparent; color: var(--ink); }
.button.danger { background: var(--red); }
.button.icon { width: 38px; padding: 0; background: transparent; color: var(--ink); border-color: var(--line); }
.button.full { width: 100%; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--violet-soft); color: var(--violet); font-weight: 800; font-size:12px; margin-left: 4px; }
.mobile-menu { display: none; }
.project-crumb { display: flex; align-items: center; gap: 12px; }
.project-name { font-weight: 700; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-state { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font-size:12px; font-weight: 700; }
.save-state.saving { color: var(--muted); }
.mobile-back { display: none; }
.stepnav { height: 54px; display: flex; align-items: stretch; justify-content: center; gap: 2px; border-bottom: 1px solid var(--line); background: var(--white); overflow-x: auto; }
.step { min-width: 128px; padding: 0 15px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.step.active { color: var(--ink); border-color: var(--violet); }
.step.done { color: var(--green); }
.step-index { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); font-family: "DM Mono"; font-size:12px; }
.step.active .step-index { background: var(--violet); color: var(--surface); }
.step.done .step-index { background: var(--green-soft); }
.eyebrow { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .14em; font-family: "DM Mono"; font-weight: 500; font-size:12px; color: var(--violet); }
.badge { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 4px 7px; border-radius: 6px; background: var(--soft); color: var(--text-muted); font-size:12px; line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.badge.green { color: var(--green); background: var(--green-soft); }.badge.amber { color: var(--amber); background: var(--amber-soft); }.badge.blue { color: var(--blue); background: var(--blue-soft); }.badge.violet { color: var(--violet-ink); background: var(--violet-soft); }.badge.red { color: var(--red); background: var(--red-soft); }
.prototype-switch { position: fixed; z-index: 50; left: 18px; bottom: 16px; display: flex; align-items: center; gap: 7px; padding: 7px 8px 7px 10px; border: 1px solid var(--line-dark); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); font-size:12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.prototype-switch select { border: 0; background: var(--soft); border-radius: 5px; padding: 5px; font-size:12px; max-width: 190px; }
.home, .setup-page, .inventory-page { max-width: 1180px; margin: 0 auto; padding: 64px 36px 100px; }
.home-heading { display: flex; justify-content: space-between; align-items: flex-end; }
.home-heading p:last-child { margin-bottom: 0; }
.home-toolbar { margin-top: 42px; display: flex; justify-content: space-between; }
.search { width: 310px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); background: var(--white); border-radius: 9px; }
.search input { border: 0; outline: 0; width: 100%; background: transparent; }
.filter-button, .validation-link, .text-button { border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; }
.project-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.new-card, .project-card { min-width: 0; border: 1px solid var(--line); background: var(--white); border-radius: 14px; padding: 0; text-align: left; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.new-card:hover, .project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.new-card { min-height: 315px; border-style: dashed; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; text-align: center; color: var(--muted); }
.new-card strong { color: var(--ink); font-size: 15px; }.new-card small { font-size:12px; }
.plus-tile { width: 48px; height: 48px; border-radius: 14px; background: var(--lime); color: var(--ink); display: grid; place-items: center; margin-bottom: 9px; }
.thumbnail { height: 235px; position: relative; overflow: hidden; padding: 23px; color: var(--surface); background: var(--text); }
.thumb-kicker { font-family: "DM Mono"; font-size:12px; letter-spacing: .14em; color: var(--lime); }
.thumbnail strong { position: absolute; left: 23px; bottom: 36px; font-size: 27px; line-height: 1.05; letter-spacing: -.05em; z-index: 2; }
.duration { position: absolute; right: 12px; bottom: 12px; font-family: "DM Mono"; font-size:12px; padding: 4px 6px; background: var(--scrim); border-radius: 4px; }
.node { position: absolute; border-radius: 50%; border: 1px solid var(--lime); }.node:after { content:""; position:absolute; width: 130px; height: 1px; background: linear-gradient(90deg,var(--lime),transparent); transform-origin:left; }
.node-a { width: 16px; height: 16px; right: 65px; top: 48px; }.node-a:after { transform: rotate(145deg); }.node-b { width: 40px; height: 40px; right: 25px; top: 88px; }.node-b:after { transform: rotate(195deg); }.node-c { width: 9px; height: 9px; right: 120px; top: 110px; }.node-c:after { transform: rotate(40deg); }
.api-thumb { background: var(--selection); color: var(--ink); }.api-thumb .thumb-kicker { color: var(--ink); }.code-lines { position: absolute; top: 80px; right: -15px; transform: rotate(-5deg); background: var(--ink); color: var(--lime); padding: 12px 20px; font-family: "DM Mono"; font-size:12px; }
.card-meta { min-height: 80px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.card-meta span { display: flex; flex-direction: column; gap: 5px; }.card-meta strong { font-size: 13px; }.card-meta small { color: var(--muted); font-size:12px; }
.empty-state { margin: 60px auto 0; max-width: 510px; padding: 55px; border: 1px dashed var(--line-dark); background: var(--white); border-radius: 18px; text-align: center; }
.empty-state p { max-width: 380px; margin: 0 auto 22px; }.empty-state small { display:block; margin-top: 14px; color: var(--muted); }
.empty-visual { height: 120px; width: 160px; position: relative; margin: 0 auto 20px; }
.sheet { position: absolute; width: 75px; height: 95px; border: 1px solid var(--line-dark); border-radius: 9px; background: var(--soft); left: 40px; top: 8px; transform: rotate(-8deg); }.sheet.two { background: var(--violet-soft); transform: rotate(8deg); left: 55px; }.play-disc { position:absolute; z-index:2; left:55px; top:35px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--lime); }
.back-link { padding: 0; border: 0; background: none; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.setup-title { max-width: 620px; margin-top: 38px; }
.setup-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .85fr); gap: 24px; margin-top: 36px; align-items: start; }
.form-card, .settings-card, .inventory-section { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.form-card { display: flex; flex-direction: column; gap: 29px; }
.settings-card { box-shadow: var(--shadow); }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-label { font-size: 12px; font-weight: 800; }
.field-hint { color: var(--muted); font-size:12px; }
.field > input, .field > select, .field > textarea, .provider-row select { width: 100%; border: 1px solid var(--line-dark); background: var(--white); border-radius: 8px; min-height: 41px; padding: 10px 11px; }
.field > textarea { resize: vertical; min-height: 85px; }
.choice-grid { display: grid; gap: 10px; }.format-grid { grid-template-columns: repeat(3, 1fr); }
.choice { border: 1px solid var(--line); border-radius: 10px; min-height: 135px; background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; position: relative; }
.choice.selected, .palette-choice.selected { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); background: var(--selection-surface); }
.ratio { display: block; border: 2px solid var(--ink); height: 45px; margin-bottom: 6px; }.ratio.vertical { width: 25px; }.ratio.square { width: 39px; height: 39px; }.ratio.wide { width: 53px; height: 32px; }
.choice strong { font-size:12px; }.choice small { color: var(--muted); font-size:12px; font-family: "DM Mono"; }
.palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.palette-choice { padding: 10px; min-height: 80px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align:left; }
.palette-choice > span:nth-child(2) { display:flex; flex-direction:column; gap:3px; flex:1; }.palette-choice strong { font-size:12px; }.palette-choice small { font-size:12px; color:var(--muted); }
.swatches { display:flex; width:50px; height:50px; overflow:hidden; border-radius:8px; }.swatches i { flex:1; }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 0; border-top:1px solid var(--line); }.setting-row > span:first-child { display:flex; flex-direction:column; gap:4px; }.setting-row strong { font-size:12px; }.setting-row small { color:var(--muted); font-size:12px; }.setting-row select { border:1px solid var(--line); border-radius:7px; background:var(--surface); padding:7px; font-size:12px; }
.toggle-row { width:100%; background:none; border-left:0; border-right:0; border-bottom:0; text-align:left; }
.toggle { width:38px; height:22px; border-radius:12px; padding:3px; background:var(--border-control); transition:.2s; }.toggle i { display:block; width:16px; height:16px; border-radius:50%; background:var(--surface); transition:.2s; box-shadow:0 1px 3px var(--shadow-medium); }.toggle.on { background:var(--violet); }.toggle.on i { transform:translateX(16px); }
.setup-summary { display:flex; gap:9px; padding:12px; margin:8px 0 16px; background:var(--soft); border-radius:9px; }.setup-summary p { margin:0; font-size:12px; line-height:1.6; }
.workspace { min-height: calc(100vh - 122px); display:grid; grid-template-columns:minmax(0, 1fr) 340px; }
.workspace-main { padding:46px max(5vw, 40px) 100px; max-width:980px; width:100%; justify-self:center; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; }.page-heading p:last-child { margin-bottom:0; }
.segmented { display:flex; width:fit-content; padding:3px; background:var(--soft); border-radius:9px; margin-bottom:16px; }.segmented button { min-width:130px; height:34px; padding:0 14px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:12px; font-weight:800; }.segmented button.active { background:var(--surface); color:var(--ink); box-shadow:0 1px 5px var(--shadow-soft); }
.editor-field { background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }.editor-field.invalid { border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft); }.editor-label { height:46px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:12px; font-weight:800; }
.editor-field textarea { width:100%; min-height:350px; resize:vertical; border:0; padding:22px; outline:0; font-size:14px; line-height:1.8; background:var(--surface); }
.editor-field.invalid textarea { min-height:260px; }
.text-stats { min-height:40px; padding:10px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.invalid .text-stats span:first-child { color:var(--red); font-weight:700; }
.inline-notice { margin-top:14px; padding:13px; display:flex; align-items:flex-start; gap:9px; background:var(--violet-soft); color:var(--violet); border-radius:9px; font-size:12px; }.inline-notice strong { color:var(--ink); }
.next-panel { background:var(--surface); border-left:1px solid var(--line); padding:45px 30px; }.next-panel > p { font-size:12px; }.readiness-list { display:flex; flex-direction:column; gap:12px; margin:24px 0; }.readiness-list span { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; }.readiness-list span:not(.muted) { color:var(--green); }.readiness-list .muted { color:var(--muted); }.next-panel hr { border:0; border-top:1px solid var(--line); margin:24px 0; }.next-panel .button { margin-top:10px; }.validation-link { width:100%; margin-top:12px; }
.notes-panel { display:grid; grid-template-columns:1fr; gap:14px; }.conversion-card { padding:18px; border:1px solid var(--line); border-radius:11px; background:var(--surface); display:flex; align-items:center; gap:13px; }.conversion-card div { flex:1; }.conversion-card p { margin:3px 0 0; font-size:12px; }.spark-box { width:38px; height:38px; border-radius:9px; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet); }
.narration-card { gap:22px; }.provider-row { display:flex; align-items:flex-end; gap:14px; }.provider-row .field { flex:1; }.provider-status { margin-bottom:12px; display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--green); }.provider-status i { width:6px; height:6px; border-radius:50%; background:currentColor; }.provider-status.off { color:var(--red); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.range-row { min-height:41px; display:flex; align-items:center; gap:10px; }.range-row input { flex:1; accent-color:var(--violet); }.range-row span { font-family:"DM Mono"; font-size:12px; }
.voice-preview { min-height:70px; border:1px solid var(--line); border-radius:9px; padding:10px; display:flex; align-items:center; gap:11px; }.waveform { flex:1; height:34px; display:flex; align-items:center; gap:2px; overflow:hidden; }.waveform i { width:2px; flex:none; border-radius:2px; background:var(--violet); opacity:.65; }.voice-preview > span:last-child { font-family:"DM Mono"; font-size:12px; color:var(--muted); }
.success-line { padding:11px; display:flex; align-items:center; gap:8px; background:var(--green-soft); color:var(--green); font-size:12px; font-weight:700; border-radius:8px; }
.service-error { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:start; padding:16px; background:var(--red-soft); border-radius:9px; color:var(--red); }.service-error p { margin:4px 0 0; font-size:12px; color:var(--red); }.service-error .button { align-self:center; }
.dropzone { width:100%; min-height:280px; border:1px dashed var(--line-dark); border-radius:12px; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; }.dropzone > span { width:48px; height:48px; display:grid; place-items:center; background:var(--soft); border-radius:12px; margin-bottom:12px; }.dropzone p { font-size:12px; }
.record-panel { min-height:280px; border:1px solid var(--line); border-radius:12px; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; }.record-ring { width:70px; height:70px; border:7px solid var(--red-soft); background:var(--red); color:var(--surface); border-radius:50%; display:grid; place-items:center; margin-bottom:15px; }
.timing-card { display:flex; gap:10px; align-items:center; padding:13px; background:var(--soft); border-radius:9px; margin:20px 0; }.timing-card > span { display:flex; flex-direction:column; }.timing-card strong { font-size:12px; }.timing-card small { color:var(--muted); font-size:12px; margin-top:3px; }
.planning-page { min-height:calc(100vh - 122px); display:flex; flex-direction:column; align-items:center; text-align:center; padding:10vh 20px 100px; }.planning-page h1 { margin-top:16px; }.planning-page > p { max-width:580px; }.planning-art { width:180px; height:150px; position:relative; margin-bottom:20px; }.orbit { position:absolute; left:25px; top:20px; width:130px; height:100px; border:1px solid var(--line-dark); border-radius:50%; transform:rotate(22deg); }.orbit-two { transform:rotate(-30deg); }.plan-center { position:absolute; left:65px; top:48px; width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:var(--ink); color:var(--lime); box-shadow:0 0 0 8px var(--surface); }.plan-node { position:absolute; width:13px; height:13px; border-radius:50%; background:var(--violet); border:3px solid var(--paper); }.plan-node.n1 { top:15px; left:120px; }.plan-node.n2 { top:105px; left:35px; background:var(--lime); }.plan-node.n3 { top:84px; right:7px; background:var(--identity); }
.progress-track { width:min(460px, 80vw); height:7px; border-radius:5px; background:var(--soft); overflow:hidden; margin:25px 0 9px; }.progress-track i { display:block; width:72%; height:100%; background:var(--violet); border-radius:inherit; animation:progress 2s ease-in-out infinite alternate; }.progress-label { font-size:12px; color:var(--violet); }.planning-steps { display:flex; gap:20px; margin:38px 0 26px; font-size:12px; color:var(--muted); }.planning-steps span { display:flex; gap:5px; align-items:center; }.planning-steps .complete { color:var(--green); }.planning-steps .active { color:var(--violet); font-weight:800; }.planning-steps .active i { width:8px;height:8px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite; }
.fallback-note { max-width:570px; display:flex; gap:9px; text-align:left; padding:13px; background:var(--surface); border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:12px; margin-bottom:15px; }
@keyframes progress { to { width:86%; } } @keyframes spin { to { transform:rotate(360deg); } }
.editor-layout { height:calc(100vh - 122px); min-height:650px; display:grid; grid-template-columns:minmax(440px, .95fr) minmax(480px, 1.05fr); background:var(--surface); }
.storyboard-panel { padding:30px 26px 70px; border-right:1px solid var(--line); overflow-y:auto; background:var(--paper); }.storyboard-head { display:flex; justify-content:space-between; align-items:flex-end; }.storyboard-head h1 { font-size:30px; }.summary-strip { height:42px; margin:17px 0 12px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); display:flex; align-items:center; gap:17px; font-size:12px; color:var(--muted); }.summary-strip span { display:flex;align-items:center;gap:4px; }.summary-strip strong { color:var(--ink); }
.scene-list { display:flex; flex-direction:column; gap:7px; }.scene-row { width:100%; min-height:93px; display:grid; grid-template-columns:14px 25px 76px 1fr 18px; align-items:center; gap:10px; padding:9px; border:1px solid var(--line); border-radius:10px; background:var(--surface); text-align:left; }.scene-row:hover { border-color:var(--line-dark); }.scene-row.selected { border-color:var(--violet); box-shadow:0 0 0 1px var(--violet); }.drag { color:var(--text-muted); font-size:16px; }.scene-num { font-family:"DM Mono"; font-size:12px; color:var(--muted); }
.mini-visual { width:76px; height:72px; flex:none; border-radius:7px; background:var(--ink); display:block; position:relative; overflow:hidden; }.mini-visual i { position:absolute; border-radius:50%; border:1px solid var(--lime); }.mini-visual i:nth-child(1){width:10px;height:10px;left:15px;top:18px}.mini-visual i:nth-child(2){width:20px;height:20px;right:12px;top:12px}.mini-visual i:nth-child(3){width:7px;height:7px;right:20px;bottom:12px}.mini-visual b{position:absolute;left:10px;bottom:10px;width:34px;height:3px;background:var(--surface);box-shadow:0 -7px 0 var(--stage-text-muted)}
.mini-visual.split { background:linear-gradient(90deg,var(--selection) 50%,var(--identity) 50%); }.mini-visual.split i { border-color:var(--surface); }.mini-visual.orbit-card { background:var(--selection); }.mini-visual.orbit-card:after{content:"";position:absolute;width:45px;height:25px;border:1px solid var(--lime);border-radius:50%;left:14px;top:22px;transform:rotate(-20deg)}.mini-visual.chart { background:var(--surface-subtle); }.mini-visual.chart:after{content:"";position:absolute;left:10px;right:10px;bottom:14px;height:35px;border-left:2px solid var(--text);border-bottom:2px solid var(--text);clip-path:polygon(0 80%,25% 60%,45% 70%,70% 20%,100% 0,100% 15%,72% 36%,46% 85%,26% 76%,0 100%);background:var(--selection)}.mini-visual.finale { background:var(--lime); }.mini-visual.finale b { background:var(--ink);box-shadow:0 -7px 0 var(--shadow-strong)}
.scene-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }.scene-copy strong { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.scene-copy small { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.scene-copy > span { display:flex; align-items:center; gap:7px; }.scene-copy em { display:flex;align-items:center;gap:3px;font-style:normal;font-size:12px;color:var(--muted); }
.scene-inspector { overflow-y:auto; display:flex; flex-direction:column; }.inspector-head { min-height:60px; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.inspector-head > span { display:flex; gap:7px; align-items:center; }
.scene-preview { min-height:250px; background:var(--ink); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }.scene-preview > .mini-visual { position:absolute; inset:0; width:100%; height:100%; border-radius:0; transform:scale(1.1); opacity:.8; }.scene-preview > .mini-visual i { transform:scale(4); }.preview-caption { position:relative; z-index:2; display:flex; flex-direction:column; text-align:center; color:var(--surface); text-shadow:0 2px 15px var(--text); }.preview-caption small { color:var(--lime); font-family:"DM Mono"; font-size:12px; letter-spacing:.16em; margin-bottom:7px; }.preview-caption strong { font-size:28px; letter-spacing:-.04em; }.preview-duration { position:absolute;z-index:2;bottom:12px;right:12px;background:var(--scrim);color:var(--surface);padding:4px 6px;border-radius:4px;font:12px "DM Mono"; }
.inspector-form { padding:22px 24px; display:flex;flex-direction:column;gap:16px; }.two-col.compact { grid-template-columns:120px 1fr; }.input-suffix { display:flex;border:1px solid var(--line-dark);border-radius:8px;overflow:hidden; }.input-suffix input { width:100%;min-width:0;border:0;padding:9px; }.input-suffix span { display:grid;place-items:center;padding:0 8px;background:var(--soft);font-size:12px;color:var(--muted); }.plan-text { min-height:74px!important; }
.generated-note { display:flex;gap:9px;align-items:center;padding:11px;background:var(--violet-soft);color:var(--violet);border-radius:8px; }.generated-note span { display:flex;flex-direction:column;gap:3px; }.generated-note strong { font-size:12px; }.generated-note small { font-size:12px;color:var(--muted); }
.inspector-footer { position:sticky;bottom:0;margin-top:auto;min-height:64px;padding:12px 24px;border-top:1px solid var(--line);background:var(--surface);display:flex;justify-content:space-between;align-items:center;box-shadow:0 -6px 20px var(--shadow-soft); }.inspector-footer > span { display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px; }
.preview-page { max-width:1320px;margin:0 auto;padding:35px 30px 90px; }.preview-top { display:flex;justify-content:space-between;align-items:end;margin-bottom:25px; }.preview-top h1{font-size:32px}.preview-top p:last-child{margin:0}.preview-status{display:flex;align-items:center;gap:10px}.preview-status>span{font-size:12px;color:var(--green);font-weight:700;display:flex;align-items:center;gap:5px}.preview-status>span i{width:6px;height:6px;border-radius:50%;background:currentColor}
.preview-studio { display:grid;grid-template-columns:150px minmax(390px,1fr) 240px;background:var(--stage-surface);border-radius:14px;overflow:hidden;min-height:650px;box-shadow:var(--shadow); }.scene-rail { padding:18px 13px;background:var(--stage-surface);color:var(--surface);overflow-y:auto; }.scene-rail>strong{display:block;font-size:12px;margin-bottom:12px;color:var(--text-muted)}.scene-rail button{width:100%;display:grid;grid-template-columns:17px 1fr;gap:7px;align-items:center;background:transparent;border:1px solid transparent;border-radius:7px;padding:6px;color:var(--text-muted);text-align:left;margin-bottom:6px}.scene-rail button.active{background:var(--stage-raised);border-color:var(--text-muted);color:var(--surface)}.scene-rail .mini-visual{width:76px;height:70px}.scene-rail button>span,.scene-rail button>small{font:12px "DM Mono"}.scene-rail button>small{grid-column:2}
.player-area{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--stage);min-width:0}.video-canvas{height:min(65vh,580px);aspect-ratio:9/16;background:var(--text);color:var(--surface);position:relative;overflow:hidden;box-shadow:0 18px 45px var(--shadow-strong)}.video-canvas:before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:var(--selection);filter:blur(3px);right:-30%;top:17%;opacity:.8}.video-kicker{position:absolute;z-index:2;left:8%;top:8%;font:12px "DM Mono";letter-spacing:.15em;color:var(--lime)}.network-graphic{position:absolute;left:18%;right:18%;top:18%;height:34%}.network-graphic .ring{position:absolute;border:1px solid var(--lime);border-radius:50%;inset:10%;transform:rotate(22deg)}.network-graphic .r2{transform:rotate(-42deg)}.network-graphic .core{position:absolute;width:40px;height:40px;left:calc(50% - 20px);top:calc(50% - 20px);border-radius:50%;background:var(--lime);box-shadow:0 0 28px var(--identity)}.satellite{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--surface)}.s1{left:10%;top:25%}.s2{right:5%;top:55%}.s3{left:37%;bottom:0}.video-title{position:absolute;z-index:2;left:8%;right:8%;top:58%;display:flex;flex-direction:column;font-size:clamp(20px,3vw,38px);line-height:1;letter-spacing:-.04em}.video-title strong:last-child{color:var(--lime)}.caption-line{position:absolute;z-index:2;left:8%;right:8%;bottom:6%;padding:7px;background:var(--scrim);text-align:center;font-size:12px}.video-canvas.playing .network-graphic{animation:pulse 1.4s ease-in-out infinite alternate}@keyframes pulse{to{transform:scale(1.06) rotate(2deg)}}
.player-controls{width:min(100%,560px);margin-top:15px;display:flex;align-items:center;gap:9px;color:var(--surface)}.player-controls .button.icon{color:var(--surface);border-color:var(--stage-border)}.timecode{font:12px "DM Mono";white-space:nowrap}.scrubber{flex:1;min-width:50px;accent-color:var(--lime)}.player-controls select{background:var(--stage-raised);color:var(--surface);border:1px solid var(--stage-border);border-radius:6px;padding:7px;font-size:12px}
.preview-notes{padding:22px 18px;background:var(--stage-surface);color:var(--surface)}.preview-notes h2{font-size:16px}.quality-check{display:flex;flex-direction:column;gap:12px;margin:22px 0}.quality-check span{display:flex;align-items:center;gap:7px;color:var(--lime)}.quality-check strong{font-size:12px;color:var(--surface)}.draft-warning{display:flex;gap:7px;padding:10px;background:var(--stage-raised);border-radius:8px;margin:20px 0}.draft-warning p{margin:0;font-size:12px;color:var(--stage-text-muted)}.preview-notes .button{margin-top:7px}.preview-notes .button.ghost{color:var(--surface)}
.export-page{min-height:calc(100vh - 122px);display:flex;justify-content:center;align-items:center;gap:70px;padding:50px 30px 100px;background:var(--paper)}.export-preview{height:480px;filter:drop-shadow(0 20px 35px var(--shadow-medium))}.export-preview .video-canvas{height:100%}.export-card{width:440px;display:flex;flex-direction:column;align-items:flex-start;padding:38px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.status-illustration{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;margin-bottom:22px}.status-illustration.rendering{background:var(--blue-soft);color:var(--blue);animation:pulseSoft 1.3s ease-in-out infinite alternate}.status-illustration.success{background:var(--green-soft);color:var(--green)}.status-illustration.failed{background:var(--red-soft);color:var(--red)}@keyframes pulseSoft{to{box-shadow:0 0 0 9px var(--selection-surface)}}.export-card .badge{margin-bottom:12px}.export-card h1{font-size:31px}.export-card>p{font-size:12px;margin-bottom:22px}.export-card>.button{min-width:160px;margin-top:8px}.export-card>small{color:var(--muted);font-size:12px;margin-top:13px}.export-progress{width:100%;display:flex;align-items:center;gap:12px;margin:10px 0}.export-progress>span{height:8px;background:var(--soft);border-radius:4px;flex:1;overflow:hidden}.export-progress i{display:block;height:100%;width:68%;background:var(--blue);border-radius:inherit}.export-progress strong{font:12px "DM Mono";color:var(--blue)}.render-details{width:100%;display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:20px}.error-code{width:100%;padding:12px;background:var(--red-soft);border-radius:8px;margin-bottom:14px;color:var(--red);font-size:12px}.error-code span{display:flex;gap:5px;align-items:center;font-weight:700}.error-code code{display:block;margin-top:7px;color:var(--muted);font-family:"DM Mono"}.text-button{margin:12px 0 0;padding:0}.state-links{position:fixed;bottom:20px;display:flex;gap:5px;background:var(--surface);padding:5px;border:1px solid var(--line);border-radius:8px}.state-links button{border:0;background:var(--soft);border-radius:5px;padding:6px 9px;font-size:12px}
.inventory-hero{max-width:700px;margin:38px 0}.inventory-section{margin-bottom:20px}.section-heading{display:flex;justify-content:space-between;align-items:center}.inventory-table{margin-top:18px;border:1px solid var(--line);border-radius:9px;overflow:hidden}.inventory-row{display:grid;grid-template-columns:150px 1.4fr 1fr;border-top:1px solid var(--line)}.inventory-row:first-child{border:0}.inventory-row span{padding:13px;font-size:12px;line-height:1.5}.inventory-row span:first-child{font-weight:800}.inventory-row.header{background:var(--soft);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800}.handoff-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.inventory-section ul,.inventory-section ol{padding-left:20px;margin-bottom:0;color:var(--muted);font-size:12px;line-height:1.9}.focus-demo{margin-top:18px;font-size:12px}.focus-demo button{border:1px solid var(--violet);border-radius:7px;background:var(--surface);padding:7px;outline:3px solid var(--selection-surface)}.capability-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.capability-grid button{display:grid;grid-template-columns:28px 1fr auto;gap:5px 10px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--surface);text-align:left}.capability-grid button>span{grid-row:1/3;font:12px "DM Mono";color:var(--violet)}.capability-grid button>strong{font-size:12px}.capability-grid button>small{font-size:12px;color:var(--muted)}.capability-grid button>.icon{grid-column:3;grid-row:1/3}

@media (max-width: 1000px) {
  .topbar { grid-template-columns:1fr auto; }.project-crumb { position:absolute;left:50%;transform:translateX(-50%); }.top-actions .button.ghost{display:none}
  .workspace { grid-template-columns:1fr 290px; }.workspace-main{padding-left:30px;padding-right:30px}.next-panel{padding:35px 22px}
  .editor-layout{grid-template-columns:390px 1fr}.scene-row{grid-template-columns:14px 23px 65px 1fr}.mini-visual{width:65px}.scene-copy small{display:none}
  .preview-studio{grid-template-columns:100px 1fr}.preview-notes{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-notes h2,.preview-notes .quality-check{grid-column:1}.draft-warning,.preview-notes .button{grid-column:2}.preview-notes .quality-check{margin:8px 0}
  .export-page{gap:35px}.export-preview{height:390px}
}

@media (max-width: 760px) {
  .topbar{height:58px;padding:0 15px}.brand>span:last-child{display:none}.top-actions>.button{display:none}.top-actions .mobile-menu{display:inline-flex}.avatar{display:none}.project-crumb{max-width:58vw;gap:6px}.mobile-back{display:inline-flex;border:0;background:none;padding:0}.project-name{font-size:12px}.save-state{font-size:0}.save-state .icon{display:block}.stepnav{height:48px;justify-content:flex-start}.step{min-width:auto;padding:0 13px}.step>span:last-child{display:none}
  .home,.setup-page,.inventory-page{padding:35px 17px 90px}.home-heading{align-items:flex-start}.home-heading>.button{font-size:0;width:40px;padding:0}.home-heading>.button .icon{margin:0}.home-toolbar{margin-top:25px}.search{width:100%}.filter-button{display:none}.project-grid{grid-template-columns:1fr}.new-card{min-height:150px}.thumbnail{height:220px}
  .setup-title{margin-top:25px}.setup-layout{grid-template-columns:1fr}.format-grid,.palette-grid{grid-template-columns:repeat(3,1fr)}.form-card,.settings-card{padding:18px}.palette-choice{flex-direction:column;align-items:flex-start}.palette-choice>.icon{display:none}.swatches{width:100%;height:30px}
  .workspace{display:block}.workspace-main{padding:30px 16px}.page-heading{align-items:flex-start}.page-heading>.button{font-size:0;width:40px;padding:0}.next-panel{border-left:0;border-top:1px solid var(--line);padding:28px 17px 90px}.editor-field textarea{min-height:300px}.segmented{width:100%}.segmented button{min-width:0;flex:1}.two-col{grid-template-columns:1fr}.service-error{grid-template-columns:auto 1fr}.service-error .button{grid-column:1/3}.provider-row{align-items:flex-start;flex-direction:column}.provider-status{margin:0}
  .planning-page{padding-top:8vh}.planning-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fallback-note{max-width:90vw}
  .editor-layout{height:auto;min-height:0;display:block}.storyboard-panel{border-right:0;padding:25px 14px}.scene-row{grid-template-columns:12px 22px 66px 1fr}.scene-row>.icon{display:none}.scene-inspector{border-top:6px solid var(--soft)}.scene-preview{min-height:220px}.inspector-form{padding:18px 16px}.inspector-footer{padding:10px 16px}.inspector-footer>span{display:none}
  .preview-page{padding:25px 12px 90px}.preview-top{display:block}.preview-status{margin-top:15px}.preview-studio{display:block;min-height:0}.scene-rail{display:flex;gap:5px;overflow-x:auto;padding:10px}.scene-rail>strong{display:none}.scene-rail button{width:83px;flex:none;display:block}.scene-rail button>span,.scene-rail button>small{display:none}.scene-rail .mini-visual{width:68px;height:60px}.player-area{padding:16px 8px}.video-canvas{height:min(58vh,500px)}.player-controls{gap:4px}.player-controls .button.icon{width:34px}.preview-notes{display:block}.preview-notes .button{width:100%}
  .export-page{display:block;padding:30px 15px 100px}.export-preview{height:240px;margin:0 auto 20px;width:max-content}.export-card{width:100%;padding:26px 22px}.state-links{display:none}
  .inventory-row{grid-template-columns:90px 1fr}.inventory-row span:nth-child(3){grid-column:2;color:var(--muted);padding-top:0}.inventory-row.header span:nth-child(3){display:none}.handoff-grid,.capability-grid{grid-template-columns:1fr}.prototype-switch{left:10px;bottom:9px}.prototype-switch>span{display:none}
}

/* Tailwind preflight heading behavior used by the original Figma mockup. */
h1,h2,h3{font-weight:600}
@media(max-width:760px){.scene-rail button>.mini-visual{display:block}}
/* Live product controls within the Figma layout. */
[hidden]{display:none!important}.top-actions .connection{font-size:12px;color:var(--green)}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;background:var(--ink);color:var(--surface);padding:14px 20px;border-radius:9px;max-width:calc(100vw - 30px);box-shadow:var(--shadow)}.global-error{color:var(--red);background:var(--red-soft);padding:12px;border-radius:8px;font-size:12px;overflow-wrap:anywhere}.live-canvas{position:relative;background:var(--text);overflow:hidden;flex:none;box-shadow:0 18px 45px var(--overlay);max-width:100%}.scene-preview .live-canvas{box-shadow:none}.scene-preview{padding:12px}.form-card details{border-top:1px solid var(--line);padding-top:14px}.form-card summary{font-weight:700;cursor:pointer;margin-bottom:12px}.form-card details .field{margin:12px 0}.field input[type=checkbox]{width:auto;min-height:0}.voice-audio{width:100%;margin:12px 0}.file-drop{position:relative;cursor:pointer}.file-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.field textarea{font:inherit}.visual-json{font-family:monospace!important;font-size:12px!important}.mobile-actions{position:absolute;top:60px;right:12px;background:var(--surface);border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);z-index:100}.dialog-backdrop{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;z-index:110;padding:20px}.connection-dialog{width:min(480px,100%);background:var(--surface);padding:26px;border-radius:14px}.connection-dialog .field{margin:16px 0}.connection-dialog h2{display:flex;justify-content:space-between}.project-card .card-meta{width:100%}.project-card .thumbnail{width:100%}.palette-choice{min-width:0}.top-actions .avatar{border:0}.scene-reorder{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}.scene-reorder button{padding:5px 9px;border:1px solid var(--line);background:var(--surface);border-radius:6px;font-size:12px}.setup-custom{display:flex;gap:15px;flex-wrap:wrap}.setup-custom input[type=color]{padding:0;width:44px;height:32px;min-height:32px}.empty-state{padding:40px}.empty-state small{font-size:12px}.export-page .live-canvas{height:480px}.export-preview{height:auto}.progress-track progress{width:100%;height:100%;display:block;accent-color:var(--violet)}.project-name-input{border:0;background:none;font-weight:700;max-width:280px;width:230px;text-overflow:ellipsis}.service-error p{margin:0}.editor-label .badge{font-size:12px}.skip-link{position:fixed;top:-100px;left:10px;z-index:200;padding:10px;background:var(--surface)}.skip-link:focus{top:10px}@media(max-width:760px){.project-name-input{width:155px;max-width:45vw;font-size:12px}.top-actions .connection{display:none}.export-page .live-canvas{height:240px}.inspector-footer .button{min-height:44px}.step{min-height:48px}.step>span:last-child{display:inline;font-size:12px}.step{padding:0 9px;gap:5px}.step-index{width:18px;height:18px}.topbar{position:relative}.project-crumb{max-width:60vw}.form-card .two-col{grid-template-columns:minmax(0,1fr)}.project-grid{grid-template-columns:1fr}.setup-custom .field{min-width:100px}.preview-status{flex-wrap:wrap}.button{min-height:40px}.field>input,.field>select,.field>textarea{font-size:16px}.scene-row{min-height:88px}.scene-copy strong{font-size:12px}.scene-copy .badge{font-size:12px}.scene-copy em{font-size:12px}.save-state{font-size:0}.project-name{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}