:root {
  color-scheme: dark;
  --ink: #f6f4ed;
  --muted: #a5a6b3;
  --dim: #6e7080;
  --bg: #0b0c11;
  --panel: rgba(19, 20, 28, 0.9);
  --panel-2: #171821;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --lime: #c8ff4b;
  --violet: #a27dff;
  --orange: #ff6b3d;
  --blue: #55b8ff;
  --radius: 24px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 6%, rgba(162, 125, 255, 0.12), transparent 27rem),
    radial-gradient(circle at 88% 20%, rgba(200, 255, 75, 0.08), transparent 24rem),
    var(--bg);
  line-height: 1.55;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(200, 255, 75, 0.45);
  outline-offset: 3px;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
}
.glow { position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.glow-a { width: 20rem; height: 20rem; left: -10rem; top: 45%; background: rgba(106, 78, 255, 0.12); }
.glow-b { width: 18rem; height: 18rem; right: -8rem; bottom: 8%; background: rgba(255, 107, 61, 0.08); }

.topbar, main, footer { width: min(1480px, calc(100% - 48px)); margin-inline: auto; }
.topbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 255, 75, 0.35);
  border-radius: 12px;
  color: #11130b;
  background: var(--lime);
  font-weight: 900;
  box-shadow: 0 0 28px rgba(200, 255, 75, 0.18);
}
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { font-size: 15px; letter-spacing: 0.04em; }
.brand-copy small { margin-top: 5px; color: var(--dim); font-size: 9px; letter-spacing: 0.16em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.online-pill, .boundary-chip {
  border: 1px solid rgba(200, 255, 75, 0.3);
  border-radius: 999px;
  color: var(--lime);
  background: rgba(200, 255, 75, 0.07);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 9px 12px;
}
.online-pill i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.ghost-button, .primary-link, .hero-secondary, .hero-primary, .accent-button, .text-button, .square-button, .modal-close {
  border: 0;
  cursor: pointer;
}
.ghost-button { padding: 10px 14px; border-radius: 10px; background: transparent; color: #d3d2dc; }
.ghost-button:hover { background: rgba(255, 255, 255, 0.06); }
.primary-link, .hero-primary, .accent-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 12px;
  color: #11130c;
  background: var(--lime);
  font-weight: 850;
  box-shadow: 0 14px 34px rgba(200, 255, 75, 0.13);
}
.primary-link { padding: 11px 17px; font-size: 13px; }

.hero {
  min-height: 690px;
  padding: 76px 2vw 68px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: clamp(46px, 7vw, 110px);
}
.eyebrow { margin: 0 0 14px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: 0.18em; text-transform: uppercase; }
.eyebrow span { margin-right: 9px; color: var(--lime); }
.hero h1 { margin: 0; font-size: clamp(45px, 5vw, 78px); line-height: 1.05; letter-spacing: -0.055em; }
.hero h1 em { color: var(--violet); font-style: normal; }
.hero-intro { max-width: 620px; margin: 28px 0 0; color: #b9bac5; font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.hero-primary, .hero-secondary { min-height: 50px; padding: 0 22px; }
.hero-secondary { border: 1px solid var(--line-strong); border-radius: 12px; color: #dddde5; background: rgba(255,255,255,.03); }
.hero-secondary:hover { border-color: rgba(162, 125, 255, 0.6); }
.hero-metrics { display: flex; gap: 0; margin: 46px 0 0; }
.hero-metrics div { min-width: 125px; padding-right: 26px; margin-right: 26px; border-right: 1px solid var(--line); }
.hero-metrics div:last-child { border-right: 0; }
.hero-metrics dt { font-size: 27px; font-weight: 850; }
.hero-metrics dd { margin: 2px 0 0; color: var(--dim); font-size: 11px; }

.hero-visual { position: relative; min-height: 520px; padding: 17px; border: 1px solid var(--line-strong); border-radius: 30px; background: linear-gradient(145deg, rgba(34,34,45,.92), rgba(12,13,18,.97)); box-shadow: 0 36px 90px rgba(0,0,0,.34); transform: rotate(1.2deg); }
.visual-topline { height: 42px; padding: 0 8px; display: flex; align-items: flex-start; justify-content: space-between; color: var(--dim); font-size: 9px; letter-spacing: .14em; }
.signal { color: var(--lime); }
.signal i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--lime); }
.portrait-stage { position: relative; min-height: 364px; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg, #413260 0%, #1b1a2d 54%, #0f1018 100%); isolation: isolate; }
.portrait-stage::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 17%, rgba(255,255,255,.025) 17% 17.3%); }
.moon { position: absolute; width: 120px; height: 120px; right: 10%; top: 13%; border-radius: 50%; background: rgba(222,208,255,.8); filter: blur(.5px); box-shadow: 0 0 60px rgba(185,150,255,.38); }
.door { position: absolute; bottom: 0; width: 31%; height: 77%; border: 5px solid #090a0f; border-bottom: 0; background: linear-gradient(90deg, #0a0b10, #242037 50%, #090a0e); }
.door-one { left: 15%; transform: skewY(-3deg); }
.door-two { right: 12%; opacity: .72; transform: scale(.84) skewY(2deg); }
.figure { position: absolute; z-index: 3; left: 45%; bottom: 0; width: 53px; height: 180px; border-radius: 45% 45% 10% 10%; background: linear-gradient(#111217, #040508); box-shadow: 0 -14px 28px rgba(0,0,0,.5); }
.figure span { position: absolute; width: 42px; height: 42px; left: 5px; top: -27px; border-radius: 50%; background: #0a0a0d; }
.scanline { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px); mix-blend-mode: screen; }
.portrait-stage p { position: absolute; z-index: 4; left: 24px; bottom: 21px; margin: 0; font-family: Georgia, serif; font-size: 26px; letter-spacing: .08em; }
.portrait-stage p small { color: #bca9ee; font-family: ui-sans-serif, sans-serif; font-size: 8px; letter-spacing: .2em; }
.visual-timeline { padding: 14px 9px 1px; }
.timeline-label { display: flex; justify-content: space-between; color: var(--dim); font-size: 8px; letter-spacing: .12em; }
.timeline-track { height: 3px; margin-top: 12px; border-radius: 3px; background: rgba(255,255,255,.08); }
.timeline-track i { display: block; width: 62%; height: 100%; background: linear-gradient(90deg, var(--violet), var(--lime)); }
.timeline-cuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.timeline-cuts b { height: 18px; border-radius: 4px; background: rgba(255,255,255,.06); }
.timeline-cuts b:nth-child(2) { background: rgba(162,125,255,.2); }
.floating-card { position: absolute; z-index: 5; min-width: 145px; padding: 13px 15px; display: grid; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; background: rgba(16,17,23,.88); backdrop-filter: blur(14px); box-shadow: 0 18px 36px rgba(0,0,0,.3); }
.floating-card span { color: var(--dim); font-size: 8px; letter-spacing: .15em; }
.floating-card strong { margin-top: 3px; font-size: 24px; }
.floating-card small { color: var(--muted); font-size: 9px; }
.floating-card-a { left: -33px; top: 20%; transform: rotate(-2deg); }
.floating-card-b { right: -24px; bottom: 19%; transform: rotate(2deg); }
.floating-card-b strong { color: var(--lime); }

.public-boundary { padding: 18px 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; border: 1px solid rgba(200,255,75,.22); border-radius: 18px; background: rgba(200,255,75,.045); }
.public-boundary > div { display: flex; align-items: center; gap: 11px; }
.boundary-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #111; background: var(--lime); font-weight: 900; }
.public-boundary p { margin: 0; color: var(--muted); font-size: 13px; }

.studio-shell { margin-top: 54px; display: grid; grid-template-columns: 260px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 28px; background: rgba(14,15,21,.82); box-shadow: 0 45px 100px rgba(0,0,0,.3); }
.project-rail { padding: 26px 15px; border-right: 1px solid var(--line); background: rgba(10,11,16,.74); }
.rail-heading { padding: 0 9px 19px; display: flex; align-items: center; justify-content: space-between; }
.rail-heading h2, .workbench-head h2 { margin: 0; font-size: 18px; }
.rail-heading .eyebrow { margin-bottom: 4px; }
.square-button { width: 36px; height: 36px; border-radius: 10px; color: var(--lime); background: rgba(200,255,75,.08); font-size: 20px; }
.project-item { width: 100%; padding: 11px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 14px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.project-item:hover { background: rgba(255,255,255,.03); }
.project-item.is-active { border-color: rgba(162,125,255,.25); background: rgba(162,125,255,.09); }
.project-thumb { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 10px; color: white; font-family: Georgia, serif; font-size: 17px; font-weight: 800; }
.tone-violet { background: linear-gradient(145deg, #7653d8, #2e2547); }
.tone-blue { background: linear-gradient(145deg, #2c83aa, #1b354c); }
.tone-orange { background: linear-gradient(145deg, #d75e3e, #5a271e); }
.project-item > span:nth-child(2) { display: grid; }
.project-item strong { font-size: 12px; }
.project-item small { margin-top: 4px; color: var(--dim); font-size: 9px; }
.project-item i { color: transparent; font-size: 6px; }
.project-item.is-active i { color: var(--lime); }
.rail-note { margin: 30px 8px 0; padding: 17px; display: grid; border: 1px dashed rgba(255,255,255,.13); border-radius: 14px; }
.rail-note span { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.rail-note strong { margin-top: 7px; font-size: 11px; }
.rail-note small { margin-top: 4px; color: var(--dim); font-size: 9px; }

.workbench { min-width: 0; padding: 30px 34px 38px; }
.workbench-head { display: flex; align-items: center; justify-content: space-between; }
.workbench-head .eyebrow { margin-bottom: 5px; }
.stage-status { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; }
.stage-nav { margin: 30px 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; }
.stage-nav li { position: relative; padding: 0 7px 17px; display: grid; border-bottom: 2px solid rgba(255,255,255,.08); }
.stage-nav li::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--lime); transition: width .25s ease; }
.stage-nav li.is-current::after, .stage-nav li.is-done::after { width: 100%; }
.stage-nav li > span { color: var(--dim); font-size: 9px; }
.stage-nav li strong { margin-top: 4px; color: #8c8d99; font-size: 11px; }
.stage-nav li small { margin-top: 2px; color: #535561; font-size: 8px; }
.stage-nav li.is-current > span, .stage-nav li.is-current strong { color: var(--lime); }
.stage-nav li.is-done strong { color: #c8c8d0; }
.stage-panel { min-height: 530px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.018); }
.stage-panel.is-hidden { display: none; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 25px; }
.panel-heading > div { display: flex; align-items: center; gap: 12px; }
.panel-heading h3, .confirm-copy h3, .delivery-hero h3 { margin: 0; font-size: 25px; letter-spacing: -.025em; }
.panel-heading > p { max-width: 300px; margin: 4px 0 0; color: var(--dim); font-size: 11px; text-align: right; }
.step-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--lime); background: rgba(200,255,75,.08); font-size: 11px; font-weight: 850; }
.story-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.field { display: grid; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field > span { color: #c4c4ce; font-size: 11px; font-weight: 750; }
.field > span small { float: right; color: var(--dim); font-weight: 500; }
input, textarea, select { width: 100%; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--ink); background: rgba(8,9,13,.72); }
input, select { min-height: 45px; padding: 0 13px; }
textarea { padding: 12px 13px; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: rgba(162,125,255,.42); }
.rights-check, .approval-check { display: flex; gap: 12px; align-items: flex-start; padding: 15px; border: 1px solid rgba(162,125,255,.22); border-radius: 12px; background: rgba(162,125,255,.05); cursor: pointer; }
.rights-check input, .approval-check input { width: 18px; min-height: auto; height: 18px; margin: 2px 0 0; accent-color: var(--lime); }
.rights-check span, .approval-check span { display: grid; }
.rights-check strong, .approval-check strong { font-size: 11px; }
.rights-check small, .approval-check small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.form-footer, .panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.form-footer { padding-top: 3px; }
.form-footer p { margin: 0; color: var(--dim); font-size: 10px; }
.form-footer p strong { color: var(--muted); }
.accent-button { min-height: 44px; padding: 0 18px; }
.accent-button:hover, .hero-primary:hover, .primary-link:hover { background: #d6ff76; transform: translateY(-1px); }
.accent-button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.text-button { padding: 10px 0; color: var(--muted); background: transparent; }
.text-button:hover { color: var(--ink); }
.panel-actions { margin-top: 25px; }
.align-left { justify-content: flex-start; }

.beat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.beat-card { min-height: 190px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.beat-card header { display: flex; justify-content: space-between; }
.beat-number { color: var(--violet); font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.beat-duration { color: var(--dim); font-size: 9px; }
.beat-card h4 { margin: 20px 0 7px; font-size: 16px; }
.beat-card p { margin: 0; color: #aeb0bb; font-size: 11px; line-height: 1.75; }
.beat-card footer { margin-top: 15px; color: var(--lime); font-size: 9px; }
.confirm-layout { min-height: 465px; display: grid; grid-template-columns: 1fr .75fr; gap: 35px; align-items: center; }
.confirm-copy > .step-mark { margin-bottom: 24px; }
.confirm-copy h3 { max-width: 430px; font-size: 35px; }
.confirm-copy > p:not(.eyebrow) { max-width: 570px; margin: 18px 0 28px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.confirmation-summary { padding: 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: #11121a; }
.summary-label { color: var(--dim); font-size: 9px; letter-spacing: .15em; }
.confirmation-summary h4 { margin: 10px 0 5px; font-size: 22px; }
.confirmation-summary > p { margin: 0 0 20px; color: var(--muted); font-size: 11px; }
.summary-row { padding: 12px 0; display: grid; grid-template-columns: 90px 1fr; gap: 12px; border-top: 1px solid var(--line); font-size: 10px; }
.summary-row span { color: var(--dim); }

.generation-progress { margin-bottom: 24px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; }
.generation-progress > div:first-child { display: flex; justify-content: space-between; font-size: 10px; }
.generation-progress strong { color: var(--lime); }
.progress-track { height: 5px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--violet), var(--lime)); transition: width .38s ease; }
.progress-track i.progress-18 { width: 18%; }
.progress-track i.progress-42 { width: 42%; }
.progress-track i.progress-67 { width: 67%; }
.progress-track i.progress-88 { width: 88%; }
.progress-track i.progress-100 { width: 100%; }
.shot-grid { min-height: 300px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.shot-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #101119; opacity: 0; transform: translateY(8px); animation: shot-in .32s ease forwards; }
@keyframes shot-in { to { opacity: 1; transform: none; } }
.shot-art { position: relative; aspect-ratio: 9/14; overflow: hidden; }
.shot-art::before { content: ""; position: absolute; inset: 12% 21% 0; border: 4px solid rgba(5,6,9,.85); border-bottom: 0; background: linear-gradient(110deg, transparent, rgba(255,255,255,.14)); }
.shot-art::after { content: ""; position: absolute; left: 46%; bottom: 0; width: 18%; height: 47%; border-radius: 50% 50% 0 0; background: #08090d; }
.shot-badge { position: absolute; z-index: 2; top: 9px; left: 9px; padding: 5px 7px; border-radius: 6px; color: var(--lime); background: rgba(7,8,11,.78); font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.shot-copy { padding: 12px; display: grid; }
.shot-copy strong { font-size: 10px; }
.shot-copy small { margin-top: 4px; color: var(--dim); font-size: 8px; }
.shot-card:nth-child(2) { animation-delay: .06s; }
.shot-card:nth-child(3) { animation-delay: .12s; }
.shot-card:nth-child(4) { animation-delay: .18s; }

.real-generation-card { margin-top: 22px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid rgba(200,255,75,.28); border-radius: 15px; background: linear-gradient(110deg, rgba(200,255,75,.07), rgba(162,125,255,.07)); }
.real-generation-card > div { display: grid; }
.real-generation-card span { color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.real-generation-card strong { margin-top: 5px; font-size: 13px; }
.real-generation-card p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.real-button { min-height: 43px; padding: 0 17px; flex: 0 0 auto; border: 1px solid var(--lime); border-radius: 11px; color: var(--lime); background: rgba(200,255,75,.05); font-weight: 800; cursor: pointer; }
.real-button:hover { color: #111; background: var(--lime); }
.real-output { margin-top: 16px; padding: 20px; border: 1px solid rgba(162,125,255,.3); border-radius: 16px; background: #101119; }
.real-output.is-hidden { display: none; }
.real-output > header { display: flex; justify-content: space-between; gap: 18px; }
.real-output > header > div { display: grid; }
.real-output > header span { color: var(--violet); font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.real-output > header strong { margin-top: 5px; font-size: 13px; }
.real-output > header code { color: var(--dim); font-size: 8px; overflow-wrap: anywhere; text-align: right; }
.task-id-tools { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px; min-width: 0; }
.task-id-tools code { max-width: 260px; overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; }
.task-id-tools button { border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text-dim); padding: 7px 10px; font: inherit; font-size: 8px; cursor: pointer; white-space: nowrap; }
.recovery-note { margin: 9px 0 0; color: var(--dim); font-size: 8px; }
.real-steps { margin-top: 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.real-steps > div { padding: 12px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; }
.real-steps i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--dim); background: rgba(255,255,255,.05); font-size: 8px; font-style: normal; }
.real-steps span { display: grid; }
.real-steps strong { font-size: 9px; }
.real-steps small { margin-top: 2px; color: var(--dim); font-size: 7px; }
.real-steps b { color: var(--dim); font-size: 8px; }
.real-steps > div.is-active { border-color: rgba(162,125,255,.42); }
.real-steps > div.is-active i { color: white; background: var(--violet); }
.real-steps > div.is-active b { color: var(--violet); }
.real-steps > div.is-complete { border-color: rgba(200,255,75,.25); }
.real-steps > div.is-complete i { color: #111; background: var(--lime); }
.real-steps > div.is-complete b { color: var(--lime); }
.real-steps > div.is-failed { border-color: rgba(255,107,61,.4); }
.real-steps > div.is-failed b { color: var(--orange); }
.real-media { margin-top: 16px; display: grid; grid-template-columns: minmax(160px,.38fr) minmax(0,1fr); gap: 14px; }
.real-media:empty { display: none; }
.real-asset { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #090a0e; }
.real-asset img, .real-asset video { width: 100%; display: block; max-height: 520px; object-fit: contain; background: #050507; }
.real-asset footer { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.real-asset footer span { display: grid; }
.real-asset footer strong { font-size: 9px; }
.real-asset footer small { color: var(--dim); font-size: 7px; }
.download-link { padding: 7px 9px; border-radius: 7px; color: #111; background: var(--lime); font-size: 8px; font-weight: 900; }
.real-error { padding: 14px; grid-column: 1 / -1; border: 1px solid rgba(255,107,61,.32); border-radius: 10px; color: #ff9a7b; background: rgba(255,107,61,.06); font-size: 10px; }
.keyframe-gate { padding: 16px; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(200,255,75,.34); border-radius: 12px; background: rgba(200,255,75,.05); }
.keyframe-gate > div:first-child { display: grid; gap: 5px; }
.keyframe-gate span { color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.keyframe-gate strong { font-size: 12px; }
.keyframe-gate p { margin: 0; color: var(--dim); font-size: 9px; line-height: 1.65; }
.keyframe-gate > div:last-child { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

.delivery-hero { min-height: 150px; display: flex; align-items: center; gap: 23px; border-bottom: 1px solid var(--line); }
.delivery-seal { width: 66px; height: 66px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #111; background: var(--lime); box-shadow: 0 0 30px rgba(200,255,75,.22); font-size: 28px; font-weight: 900; }
.delivery-hero p:last-child { max-width: 720px; margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.check-grid { margin: 22px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check-grid article { padding: 14px; display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; }
.check-grid article > span { color: var(--dim); font-size: 9px; }
.check-grid article div { display: grid; }
.check-grid article strong { font-size: 10px; }
.check-grid article small { margin-top: 3px; color: var(--dim); font-size: 8px; }
.check-grid article i { color: var(--lime); font-size: 8px; font-style: normal; font-weight: 900; }
.next-version-card { padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid rgba(162,125,255,.25); border-radius: 15px; background: rgba(162,125,255,.06); }
.next-version-card div { display: grid; }
.next-version-card span { color: var(--violet); font-size: 9px; font-weight: 800; }
.next-version-card strong { margin-top: 5px; font-size: 12px; }
.next-version-card p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }

.architecture-strip { margin: 54px 0 80px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.architecture-strip article { padding: 29px 28px; display: grid; border-right: 1px solid var(--line); }
.architecture-strip article:last-child { border-right: 0; }
.architecture-strip span { color: var(--violet); font-size: 9px; font-weight: 850; }
.architecture-strip strong { margin-top: 12px; font-size: 14px; }
.architecture-strip p { margin: 5px 0 0; color: var(--dim); font-size: 10px; }
footer { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); color: var(--dim); font-size: 10px; }
.footer-brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; }

.modal { width: min(720px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 22px; color: var(--ink); background: #13141c; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.modal::backdrop { background: rgba(3,4,7,.8); backdrop-filter: blur(7px); }
.modal[open] { animation: modal-in .18s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-top { padding: 24px 27px 19px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.modal-top h2 { margin: 0; font-size: 23px; }
.modal-top .eyebrow { margin-bottom: 5px; }
.modal-close { width: 36px; height: 36px; border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.05); font-size: 22px; }
.modal-intro { margin: 20px 27px; color: var(--muted); font-size: 11px; }
.model-grid { padding: 0 27px 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.model-grid article { padding: 18px; display: grid; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.model-grid span { color: var(--violet); font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.model-grid h3 { margin: 8px 0; font-size: 16px; }
.model-grid code { overflow-wrap: anywhere; color: var(--lime); font-size: 10px; }
.model-grid p { margin: 9px 0 0; color: var(--dim); font-size: 9px; }
.locked-action { margin: 0 27px 27px; padding: 15px; display: flex; gap: 12px; align-items: center; border: 1px solid rgba(200,255,75,.2); border-radius: 12px; background: rgba(200,255,75,.05); }
.locked-action > span { font-size: 22px; color: var(--lime); }
.locked-action p { margin: 0; display: grid; }
.locked-action strong { font-size: 10px; }
.locked-action small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.compact-modal { width: min(630px, calc(100% - 32px)); }
.reason-list { padding: 22px 27px 27px; display: grid; gap: 12px; }
.reason-list article { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.reason-list article > span { color: var(--violet); font-size: 9px; font-weight: 850; }
.reason-list strong { font-size: 11px; }
.reason-list p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.real-modal { width: min(680px, calc(100% - 32px)); }
.real-form { padding: 23px 27px 27px; display: grid; gap: 15px; }
.price-summary { padding: 17px; display: grid; border: 1px solid rgba(200,255,75,.22); border-radius: 13px; background: rgba(200,255,75,.045); }
.price-summary > span { color: var(--lime); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.price-summary > strong { margin-top: 6px; font-size: 13px; }
.price-summary p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.price-summary b { color: var(--ink); }
.real-warning { margin: 0; color: var(--dim); font-size: 9px; }
.real-warning.is-error { color: var(--orange); font-weight: 800; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 28px; min-width: 240px; padding: 11px 16px; border: 1px solid rgba(200,255,75,.25); border-radius: 999px; color: #111; background: var(--lime); box-shadow: 0 18px 40px rgba(0,0,0,.35); font-size: 10px; font-weight: 800; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; padding-inline: 3vw; }
  .hero-copy { max-width: 780px; }
  .hero-visual { width: min(720px, 94%); margin-inline: auto; }
  .studio-shell { grid-template-columns: 1fr; }
  .project-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-heading { grid-column: 1 / -1; }
  .rail-note { display: none; }
  .shot-grid { grid-template-columns: repeat(2, 1fr); }
  .shot-art { aspect-ratio: 16/10; }
}

@media (max-width: 720px) {
  .topbar, main, footer { width: min(100% - 24px, 1480px); }
  .topbar { min-height: 70px; }
  .online-pill, .ghost-button { display: none; }
  .brand-copy small { display: none; }
  .hero { min-height: auto; padding: 55px 4px 50px; gap: 46px; }
  .hero h1 { font-size: clamp(40px, 12vw, 59px); }
  .hero-intro { font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-metrics { margin-top: 34px; }
  .hero-metrics div { min-width: 0; flex: 1; padding-right: 12px; margin-right: 12px; }
  .hero-visual { min-height: 410px; width: 100%; }
  .portrait-stage { min-height: 275px; }
  .floating-card { min-width: 115px; }
  .floating-card-a { left: -6px; }
  .floating-card-b { right: -7px; }
  .public-boundary { grid-template-columns: 1fr auto; gap: 13px; }
  .public-boundary p { grid-column: 1 / -1; }
  .project-rail { grid-template-columns: 1fr; }
  .project-item:not(.is-active) { display: none; }
  .workbench { padding: 22px 14px 26px; }
  .workbench-head { align-items: flex-start; }
  .workbench-head h2 { max-width: 240px; }
  .stage-status { display: none; }
  .stage-nav li { padding-inline: 3px; }
  .stage-nav li strong, .stage-nav li small { display: none; }
  .stage-panel { min-height: 0; padding: 20px 15px; }
  .panel-heading { display: block; }
  .panel-heading > p { margin-top: 10px; text-align: left; }
  .story-form, .beat-grid, .confirm-layout, .check-grid { grid-template-columns: 1fr; }
  .form-footer, .panel-actions, .next-version-card { align-items: stretch; flex-direction: column; }
  .form-footer .accent-button, .panel-actions .accent-button { width: 100%; }
  .shot-grid { grid-template-columns: repeat(2, 1fr); }
  .shot-art { aspect-ratio: 9/12; }
  .architecture-strip { grid-template-columns: 1fr; }
  .architecture-strip article { border-right: 0; border-bottom: 1px solid var(--line); }
  .architecture-strip article:last-child { border-bottom: 0; }
  footer { padding: 24px 0; align-items: flex-start; flex-direction: column; }
  .model-grid { grid-template-columns: 1fr; }
  .real-generation-card { align-items: stretch; flex-direction: column; }
  .real-steps { grid-template-columns: 1fr; }
  .real-media { grid-template-columns: 1fr; }
  .keyframe-gate { align-items: stretch; flex-direction: column; }
  .keyframe-gate > div:last-child { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}