/* Rounded workspace, based on the user's September 27 visual reference. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body { font-size:15px; }
.site-header { background:var(--white); border-bottom:1px solid var(--line); }
.header-inner { max-width:1440px; min-height:94px; padding:20px 48px; margin:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; }
.brand { margin:0; gap:12px; width:max-content; }
.brand-mark { width:44px; height:44px; background:var(--forest); color:var(--white); border-radius:15px; }
.brand-mark svg { width:27px; height:27px; }
.brand strong { font-size:21px; letter-spacing:0; }
.brand small { font-size:10px; color:var(--muted); letter-spacing:.3px; margin-top:6px; }
.top-nav { display:flex; align-items:center; padding:5px; gap:5px; border:1px solid var(--line); background:var(--paper); border-radius:99px; }
.top-nav a { display:flex; align-items:center; justify-content:center; gap:8px; min-width:100px; min-height:41px; padding:9px 20px; border-radius:99px; font-size:14px; font-weight:500; color:var(--secondary); white-space:nowrap; }
.top-nav a:hover { color:var(--ink); background:var(--white); }
.top-nav a.active { background:var(--forest); color:var(--white); box-shadow:0 3px 9px var(--shadow); }
.top-nav svg { width:17px; height:17px; }
.nav-count { display:inline-block; margin-left:0; border-radius:99px; background:var(--line); color:var(--secondary); font-size:10px; min-width:18px; text-align:center; padding:0 5px; }
.active .nav-count { background:var(--glass); color:var(--white); }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:23px; }
.header-help { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--secondary); white-space:nowrap; }
.header-help svg { width:17px; height:17px; }
.account-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; border:1px solid var(--line); border-radius:99px; padding:9px 14px; font-size:12px; white-space:nowrap; background:var(--white); }
.account-button:hover,.account-button.active { background:var(--sage); border-color:var(--mint); color:var(--forest); }
.account-button svg { width:16px; height:16px; }
.connection-dot { margin-left:0; }
.app-shell { margin-left:0; min-height:calc(100vh - 95px); }
main { max-width:1344px; padding:38px 48px 56px; }
.app-footer { width:calc(100% - 96px); max-width:1248px; margin:0 auto; padding:21px 0 24px; font-size:11px; letter-spacing:0; }
.app-footer .footer-dot { color:var(--muted); }
.page-heading { align-items:center; margin-bottom:28px; }
.page-heading .eyebrow { display:none; }
.page-heading h1 { font-size:30px; line-height:1.4; letter-spacing:-.7px; }
.page-heading p { font-size:14px; margin-top:8px; }
.button { border-radius:99px; min-height:44px; padding:11px 21px; font-size:13px; }
.button.small { min-height:36px; padding:8px 13px; font-size:12px; }
.button.primary { box-shadow:0 4px 12px var(--peach); }
.text-button { font-size:13px; }
.icon-button { border-radius:50%; }
.welcome { text-align:center; padding:19px 0 32px; }
.welcome-tag { display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:99px; background:var(--peach); color:var(--terra-dark); font-size:12px; }
.welcome-tag svg { width:14px; height:14px; }
.welcome h1 { font-size:40px; font-weight:700; letter-spacing:-1.4px; margin:15px 0 12px; line-height:1.4; }
.welcome h1 span { color:var(--forest); }
.welcome>p { font-size:14px; color:var(--secondary); line-height:1.9; }
.welcome-actions { display:flex; justify-content:center; gap:12px; margin-top:24px; }
.welcome-actions .button { min-width:163px; font-size:14px; min-height:47px; }
.welcome-note { display:block; color:var(--muted); font-size:11px; margin-top:12px; }
.flow-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.flow-card { padding:23px 26px 24px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
.flow-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.flow-icon { display:grid; place-items:center; width:39px; height:39px; color:var(--forest); background:var(--peach); border-radius:13px; }
.flow-icon svg { width:20px; height:20px; }
.flow-step { color:var(--muted); font-size:11px; padding:4px 9px; background:var(--paper); border-radius:99px; }
.flow-card h2 { font-size:19px; margin-bottom:9px; letter-spacing:0; }
.flow-card p { font-size:13px; line-height:1.8; color:var(--muted); max-width:300px; }
.recent-section { margin-top:34px; }
.section-heading { margin-bottom:19px; }
.section-heading h2 { font-size:21px; font-weight:650; }
.section-heading p { font-size:12px; margin-top:6px; }
.section-heading .subtle { font-size:12px; }
.project-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; align-items:start; }
.project-card { aspect-ratio:1; display:grid; grid-template-rows:minmax(0,1fr) 117px; padding:9px; border-radius:var(--radius-card); box-shadow:var(--shadow-card); transition:box-shadow .18s,border-color .18s; }
.project-card:hover { box-shadow:var(--shadow-hover); border-color:var(--stone); }
.project-cover { height:auto; min-height:0; border-radius:17px; }
.project-cover img { height:100%; width:100%; object-fit:cover; object-position:center 50%; }
.project-cover .badge { top:10px; left:10px; }
.badge { border-radius:99px; padding:4px 9px; font-size:10px; color:var(--secondary); }
.badge.warm { color:var(--terra-dark); }
.cover-duration { bottom:10px; right:10px; border-radius:99px; padding:3px 8px; font-size:10px; }
.project-info { padding:12px 8px 7px; display:flex; flex-direction:column; min-width:0; min-height:0; }
.project-info h3 { font-size:14px; font-weight:600; line-height:1.5; letter-spacing:0; }
.project-info p { font-size:11px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-bottom { margin-top:auto; padding-top:9px; border:0; font-size:10px; min-width:0; gap:5px; }
.project-bottom>span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-bottom .text-button { font-size:11px; color:var(--forest); }
.new-card { aspect-ratio:1; min-height:0; grid-column:auto; border:1px dashed var(--stone); border-radius:var(--radius-card); background:var(--white); padding:24px 15px; flex-direction:column; gap:0; }
.new-card:hover { border-color:var(--forest); background:var(--sage); }
.new-card .plus-circle { width:49px; height:49px; background:var(--peach); color:var(--forest); border-radius:17px; margin:0 0 15px; }
.new-card strong { font-size:16px; font-weight:600; }
.new-card p { font-size:12px; margin-top:6px; }
.new-card-action { display:flex; align-items:center; gap:7px; margin-top:26px; font-size:12px; color:var(--forest); }
.new-card-action svg { width:14px; height:14px; }
.toolbar { gap:10px; margin-bottom:25px; }
.toolbar .search { max-width:320px; border-radius:99px; min-height:43px; padding:10px 18px; background:var(--white); }
.filter-button { padding:10px 19px; border-radius:99px; font-size:13px; }
.filter-button.active { background:var(--forest); }
.panel { border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:27px; }
.panel-heading { margin-bottom:23px; }
.panel-heading h2 { font-size:20px; letter-spacing:-.3px; }
.panel-heading p { font-size:12px; }
.field { gap:9px; margin-bottom:21px; }
.field label,.field-label { font-size:13px; }
.field small { font-size:11px; line-height:1.8; }
input,textarea,select { background:var(--paper); border-radius:var(--radius-field); padding:12px 15px; font-size:13px; }
input,select { min-height:44px; }
input[type=radio] { min-height:0; }
textarea { line-height:1.85; }
.upload-zone { border-radius:20px; min-height:180px; justify-content:center; border-color:var(--stone); padding:26px 18px; }
.upload-zone svg { width:27px; height:27px; }
.upload-zone strong { font-size:14px; }
.upload-zone p { font-size:11px; }
.uploaded-thumb img { border-radius:13px; }
.uploaded-thumb span { font-size:10px; }
.choice-card { border-radius:18px; padding:19px 16px; }
.choice-card:has(input:checked) { box-shadow:0 0 0 1px var(--forest); background:var(--white); }
.choice-card strong { font-size:13px; }
.choice-card small { font-size:10px; }
.choice-card input { top:17px; right:14px; }
.segment { border-radius:99px; font-size:12px; padding:9px 16px; }
.summary-panel { position:sticky; top:25px; }
.summary-panel .preview-small { border-radius:17px; }
.summary-panel h2 { font-size:21px; }
.summary-rows>div { font-size:13px; }
.note { font-size:11px; }
.inline-note { border-radius:15px; font-size:12px; }
.steps { gap:14px; margin:0 0 28px; font-size:12px; }
.steps span:not(.connector) { background:var(--white); border:1px solid var(--line); padding:7px 13px; border-radius:99px; }
.steps .current { background:var(--sage)!important; border-color:var(--mint)!important; }
.steps i { border:0; background:var(--soft); }
.steps .connector { width:25px; }
.story-layout { grid-template-columns:minmax(0,1fr) 330px; gap:26px; }
.scene-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.scene-card { border-radius:20px; box-shadow:var(--shadow-card); padding:9px; }
.scene-card.selected { border-color:var(--forest); padding:8px; }
.scene-image { height:auto; aspect-ratio:4/5; border-radius:13px; }
.scene-card h3 { font-size:12px; margin:12px 4px 5px; }
.scene-card p { font-size:10px; margin:0 4px 7px; }
.scene-image .scene-no,.scene-image .scene-time { border-radius:99px; padding:3px 7px; }
.scene-card .selected-dot { background:var(--forest); width:21px; height:21px; }
.editor-panel { top:25px; padding:23px; }
.editor-panel h2 { font-size:20px; }
.editor-panel textarea { font-size:12px; }
.editor-panel .mini-actions .button { font-size:11px; }
.editor-panel .form-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.scene-utility { gap:9px; margin-top:18px; }
.scene-utility .button { font-size:11px; }
.story-bottom { margin-top:27px; padding:22px 0; }
.story-bottom p { font-size:13px; }
.story-bottom small { font-size:11px; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.product-table-item { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:10px; border-radius:var(--radius-card); box-shadow:var(--shadow-card); margin:0; min-width:0; }
.product-table-item>img { width:100%; height:auto; aspect-ratio:1; border-radius:17px; }
.product-table-item>div:not(.actions) { padding:15px 8px 12px; }
.product-table-item h2 { font-size:15px; line-height:1.6; }
.product-table-item p { font-size:11px; line-height:1.8; margin:5px 0 8px; overflow-wrap:anywhere; }
.product-table-item .actions { display:grid; grid-template-columns:1fr; gap:7px; padding:0 7px 8px; margin-top:auto; }
.product-table-item .actions .button { width:100%; }
.product-grid>.empty-state { grid-column:1/-1; }
.settings-layout { max-width:900px; }
.settings-status p { font-size:12px; }
.status-icon { width:44px; height:44px; border-radius:15px; }
.settings-link-row .text-button { font-size:12px; }
.help-list { max-width:1000px; }
.help-item,.progress-task,.empty-state { border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
.help-item { padding:26px; }
.help-item p { font-size:13px; }
.help-item h2 { font-size:19px; }
.step-number { font-family:var(--font-body); color:var(--forest); font-size:23px; }
.help-item .step-number { font-size:23px; }
.result-layout { grid-template-columns:minmax(0,1fr) 350px; }
.video-stage { border-radius:var(--radius-card); }
.video-stage video { border-radius:16px; }
dialog { border-radius:26px; padding:28px; box-shadow:var(--shadow-hover); }
dialog video { border-radius:16px; }
dialog .muted { font-size:12px!important; }
.toast { left:50%; border-radius:16px; font-size:13px; }
.file-chip { border-radius:99px; }
@media(min-width:1100px) {
  .home-projects { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-projects .project-card { grid-template-rows:minmax(0,1fr) 125px; }
  .home-projects .project-info { padding:16px 13px 11px; }
  .home-projects .project-info h3 { font-size:16px; }
  .home-projects .project-info p { font-size:12px; }
  .home-projects .project-bottom { font-size:11px; }
  .home-projects .project-bottom .text-button { font-size:12px; }
}
@media(max-width:1190px) {
  .header-inner { padding:18px 32px; gap:20px; }
  .header-actions { gap:14px; }
  .header-help span:last-child { display:none; }
  .top-nav a { padding:9px 15px; min-width:90px; }
  main { padding:32px 32px 48px; }
  .app-footer { width:calc(100% - 64px); }
  .project-grid,.product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .story-layout { grid-template-columns:minmax(0,1fr) 300px; }
  .scene-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:950px) {
  .header-inner { padding:17px 25px; gap:15px; }
  .brand strong { font-size:19px; }
  .brand small { font-size:8px; }
  .brand-mark { width:39px; height:39px; border-radius:13px; }
  .top-nav a { min-width:76px; padding:9px 12px; font-size:13px; }
  .top-nav svg { display:none; }
  .header-help { display:none; }
  .account-button { padding:8px 12px; font-size:11px; }
  .account-button .connection-dot { display:none; }
  main { padding:30px 25px 42px; }
  .app-footer { width:calc(100% - 50px); }
  .flow-cards { gap:15px; }
  .flow-card { padding:21px; }
  .flow-card h2 { font-size:17px; }
  .flow-card p { font-size:12px; }
  .flow-step { font-size:10px; }
  .project-grid,.product-grid { gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-card { grid-template-rows:minmax(0,1fr) 122px; }
  .project-info { padding:13px 10px 9px; }
  .project-info h3 { font-size:15px; }
  .story-layout { grid-template-columns:minmax(0,1fr); }
  .scene-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .editor-panel,.summary-panel { position:static; }
  .result-layout { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:680px) {
  .header-inner { grid-template-columns:1fr auto; padding:17px 20px 16px; gap:18px; }
  .brand small { font-size:9px; }
  .header-actions { grid-column:2; grid-row:1; }
  .header-help { display:flex; }
  .top-nav { grid-column:1/-1; grid-row:2; width:100%; gap:5px; }
  .top-nav a { flex:1; min-width:0; padding:9px 10px; font-size:14px; }
  .top-nav svg { display:block; width:16px; height:16px; }
  main { padding:27px 20px 36px; }
  .app-footer { width:calc(100% - 40px); font-size:10px; }
  .welcome { padding:10px 0 28px; }
  .welcome h1 { font-size:32px; line-height:1.5; letter-spacing:-.7px; }
  .welcome>p { font-size:13px; max-width:400px; margin:auto; }
  .welcome-actions .button { min-width:0; padding:10px 20px; font-size:13px; }
  .welcome-tag { font-size:11px; }
  .flow-cards { grid-template-columns:minmax(0,1fr); gap:12px; }
  .flow-card { padding:18px 21px; display:grid; grid-template-columns:45px 1fr; column-gap:14px; }
  .flow-card-top { display:contents; }
  .flow-icon { grid-column:1; grid-row:1/4; align-self:center; width:43px; height:43px; }
  .flow-step { grid-column:2; grid-row:1; padding:0; background:transparent; justify-self:start; }
  .flow-card h2 { grid-column:2; margin:4px 0 5px; font-size:17px; }
  .flow-card p { grid-column:2; font-size:12px; max-width:none; }
  .recent-section { margin-top:27px; }
  .section-heading h2 { font-size:20px; }
  .section-heading p { font-size:11px; }
  .page-heading h1 { font-size:26px; }
  .page-heading p { font-size:13px; }
  .page-heading { gap:15px; align-items:flex-start; }
  .project-grid,.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .project-card { padding:7px; border-radius:20px; grid-template-rows:minmax(0,1fr) 110px; }
  .project-info { padding:9px 4px 5px; }
  .project-info h3 { font-size:13px; }
  .project-info p { font-size:10px; }
  .project-bottom>span { display:none; }
  .project-bottom { padding-top:6px; }
  .project-cover { border-radius:14px; }
  .project-cover .badge { top:7px; left:7px; font-size:9px; padding:3px 7px; }
  .cover-duration { right:7px; bottom:7px; padding:2px 6px; font-size:9px; }
  .new-card { border-radius:20px; padding:15px 10px; }
  .new-card strong { font-size:14px; }
  .new-card p { font-size:11px; }
  .new-card-action { font-size:11px; margin-top:16px; }
  .new-card .plus-circle { width:39px; height:39px; margin-bottom:12px; border-radius:13px; }
  .panel { padding:23px 20px; }
  .panel-heading h2 { font-size:18px; }
  .style-options { gap:9px; }
  .choice-card { padding:17px 10px; }
  .choice-card input { right:9px; }
  .choice-card strong { font-size:11px; }
  .choice-card small { font-size:9px; }
  .steps { gap:6px; font-size:10px; }
  .steps span:not(.connector) { padding:6px 8px; gap:4px; }
  .steps .connector { width:8px; }
  .steps i { width:19px; height:19px; }
  .scene-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .scene-image { height:auto; }
  .scene-card h3 { font-size:12px; }
  .scene-card p { font-size:10px; }
  .scene-utility .button { font-size:10px; padding:8px 11px; }
  .product-table-item { border-radius:20px; padding:8px; }
  .product-table-item>div:not(.actions) { padding:11px 5px; }
  .product-table-item h2 { font-size:13px; }
  .product-table-item p { font-size:10px; }
  .product-table-item .actions { padding:0 3px 5px; }
  .product-table-item .actions .button { font-size:11px; padding:8px; }
  .settings-status p { font-size:10px; }
  .settings-status h2 { font-size:16px; }
  .key-row { flex-direction:column; }
}
@media(max-width:540px) {
  .project-grid { grid-template-columns:minmax(0,1fr); }
  .project-card { grid-template-rows:minmax(0,1fr) 120px; }
  .project-info { padding:13px 10px 8px; }
  .project-info h3 { font-size:15px; }
  .project-info p { font-size:12px; }
  .project-bottom>span { display:inline; }
}
@media(max-width:420px) {
  .header-inner { padding:15px 16px; gap:15px; }
  .brand { gap:9px; }
  .brand strong { font-size:18px; }
  .brand small { font-size:8px; }
  .header-actions { gap:12px; }
  .header-help { display:none; }
  .account-button { font-size:11px; padding:8px 11px; }
  main { padding:24px 16px 34px; }
  .app-footer { width:calc(100% - 32px); }
  .welcome h1 { font-size:29px; }
  .welcome h1 span { display:block; }
  .welcome>p { max-width:300px; font-size:12px; }
  .welcome-actions { gap:9px; }
  .welcome-actions .button { padding:10px 16px; font-size:12px; min-height:43px; }
  .welcome-actions .button svg { width:15px; }
  .project-grid { grid-template-columns:minmax(0,1fr); }
  .project-card { grid-template-rows:minmax(0,1fr) 120px; }
  .project-info { padding:13px 10px 8px; }
  .project-info h3 { font-size:15px; }
  .project-info p { font-size:12px; }
  .project-bottom>span { display:inline; }
  .project-bottom,.project-bottom .text-button { font-size:11px; }
  .new-card strong { font-size:17px; }
  .new-card p { font-size:12px; }
  .new-card .plus-circle { width:49px; height:49px; }
  .new-card-action { font-size:12px; }
  .steps { gap:5px; }
  .steps span:not(.connector) { padding:6px; font-size:9px; }
  .steps .connector { display:none; }
  .steps i { width:16px; height:16px; font-size:9px; }
  .panel { padding:21px 16px; }
  .panel-heading h2 { font-size:17px; }
  .filter-button { padding:8px 13px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .project-card { transition:none; } }

/* A continuous film reel: one row at every viewport width. */
.welcome { position:relative; isolation:isolate; padding-top:30px; padding-bottom:40px; --hero-light:50%; }
.welcome::before { content:''; position:absolute; z-index:-1; pointer-events:none; inset:0 5% 22%; border-radius:50%; background:radial-gradient(ellipse at var(--hero-light) 40%,#f6c6d14d 0%,#e7ddf02e 35%,transparent 68%); }
.welcome .glass-title { font-size:clamp(36px,4.5vw,58px); font-weight:800; letter-spacing:-2px; line-height:1.5; margin:19px 0 17px; transform-origin:center; transform-style:preserve-3d; }
.welcome .glass-line { display:inline-block; white-space:nowrap; color:var(--ink); }
.welcome .glass-letter { display:inline-block; color:#444954; transform:translateY(var(--letter-lift,0px)); transition:transform .22s ease-out; }
.welcome .glass-rose .glass-letter { color:#c41b43; }
@supports (background-clip:text) or (-webkit-background-clip:text) {
  .welcome .glass-letter { background:radial-gradient(ellipse at var(--hero-light) 12%,#ffffffd9 0%,transparent 46%),linear-gradient(165deg,#777e8e 0%,#343a47 32%,#a2a9b5 47%,#444b59 52%,#697080 72%,#303641 100%); background-size:180% 100%,100% 100%; background-position:var(--hero-light) center,center; background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-stroke:.5px #42495c55; filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 3px 1px #27273517); }
  .welcome .glass-rose .glass-letter { color:transparent; background-image:radial-gradient(ellipse at var(--hero-light) 12%,#fff0f4ef 0%,transparent 46%),linear-gradient(165deg,#f28da5 0%,#b51642 32%,#ed96b0 47%,#c31b49 53%,#e55d85 72%,#a9143b 100%); -webkit-text-stroke:.5px #a3153b55; filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 3px 1px #a8214720); }
}
@media(max-width:680px) {
  .welcome { padding-top:15px; padding-bottom:30px; }
  .welcome .glass-title { font-size:clamp(30px,6.5vw,42px); letter-spacing:-1px; line-height:1.5; margin:17px 0 15px; }
  .welcome .glass-line { display:block; }
  .welcome .glass-line .glass-letter { display:inline-block; }
}
@media(prefers-reduced-motion:reduce) {
  .welcome .glass-title,.welcome .glass-letter { transform:none!important; transition:none; }
}
@media(forced-colors:active) {
  .welcome .glass-title .glass-letter { color:CanvasText; background:none; -webkit-text-stroke:0; filter:none; }
}

.story-layout { display:block; }
.story-film { min-width:0; }
.film-heading h2 svg { width:23px; height:23px; color:var(--forest); }
.film-heading p { margin-top:8px; font-size:12px; }
.film-navigation { display:flex; justify-content:center; gap:16px; margin:18px 0 4px; }
.film-navigation .button { width:54px; height:54px; padding:0; border-radius:50%; border-color:var(--stone); box-shadow:0 3px 10px #20202408; }
.film-navigation .button svg { width:22px; height:22px; }
.film-navigation .button:not(:disabled):hover { border-color:var(--forest); color:var(--forest); background:var(--sage); }
.film-shell { border-radius:22px; overflow:hidden; background:#252527; box-shadow:0 8px 24px #20202412; }
.film-window { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#77777e #252527; scroll-padding-inline:20px; }
.film-window:focus-visible { outline:3px solid var(--forest); outline-offset:-3px; }
.film-track.scene-grid { display:flex; flex-flow:row nowrap; gap:18px; width:max-content; min-width:100%; padding:40px 22px; position:relative; }
.film-track::before,.film-track::after { content:''; position:absolute; left:0; right:0; height:12px; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect x='6' width='16' height='12' rx='3' fill='%23f7f7f8'/%3E%3C/svg%3E"); background-repeat:repeat-x; }
.film-track::before { top:12px; }
.film-track::after { bottom:12px; }
.film-track .scene-card { flex:0 0 200px; width:200px; min-width:0; padding:0; border:2px solid transparent; border-radius:12px; background:#343437; box-shadow:none; overflow:hidden; color:#fff; transition:border-color .15s; }
.film-track .scene-card:hover { transform:none; border-color:#b6b6bc; }
.film-track .scene-card.selected { padding:0; border:2px solid var(--forest); box-shadow:0 0 0 3px #e91d4026; }
.film-track .scene-image { width:100%; height:auto; aspect-ratio:9/16; border-radius:9px 9px 0 0; }
.film-track .scene-no { top:10px; left:10px; padding:4px 9px; font-size:12px; font-weight:600; background:#171719b8; }
.film-track .scene-time { bottom:10px; right:10px; padding:3px 8px; font-size:11px; background:#171719b8; }
.film-track .selected-dot { top:10px; right:10px; width:24px; height:24px; font-size:12px; }
.film-caption { padding:13px 12px 11px; }
.film-track .scene-card h3 { color:#fff; font-size:13px; line-height:1.5; margin:0 0 5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.film-track .scene-card p { color:#c1c1c7; font-size:11px; margin:0; }
.film-edit-label { display:flex; align-items:center; justify-content:space-between; color:#bcbcc3; font-size:10px; margin-top:12px; }
.film-edit-label svg { width:13px; height:13px; }
.selected .film-edit-label { color:#ff9daf; }
.film-status { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:var(--muted); font-size:11px; }
.film-status>span:last-child { display:flex; align-items:center; gap:7px; }
.film-status svg { width:14px; height:14px; }
.story-film .scene-utility { display:flex; flex-wrap:wrap; }
.story-layout .editor-panel { margin-top:25px; position:static; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 24px; padding:25px; }
.editor-panel .panel-heading,.editor-panel .mini-actions { margin:0; }
.editor-panel .editor-fields { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr); gap:0 24px; }
.editor-fields>.field:first-child { grid-column:1; grid-row:1; }
.editor-fields>.field:nth-child(2) { grid-column:2; grid-row:1/3; }
.editor-fields>.field:nth-child(3) { grid-column:3; grid-row:1/3; }
.editor-fields>.form-row { grid-column:1; grid-row:2; }
.editor-fields textarea { flex:1; min-height:140px!important; }
.editor-panel .edit-footer { grid-column:1/-1; margin:0; padding-top:16px; border-top:1px solid var(--line); }
.editor-panel>details { grid-column:1/-1; margin:0; }
@media(max-width:950px) {
  .editor-panel .editor-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .editor-fields>.field:first-child { grid-column:1; grid-row:1; }
  .editor-fields>.form-row { grid-column:2; grid-row:1; }
  .editor-fields>.field:nth-child(2) { grid-column:1; grid-row:2; }
  .editor-fields>.field:nth-child(3) { grid-column:2; grid-row:2; }
}
@media(max-width:540px) {
  .film-heading { align-items:flex-start; gap:12px; }
  .film-heading h2 { font-size:19px; flex-wrap:wrap; gap:6px; }
  .film-heading h2 svg { display:none; }
  .film-heading p { font-size:11px; line-height:1.8; }
  .film-navigation { gap:16px; margin-top:16px; }
  .film-navigation .button { width:50px; height:50px; min-height:50px; }
  .film-track.scene-grid { gap:14px; padding:36px 18px; }
  .film-track .scene-card { flex-basis:170px; width:170px; }
  .film-status { font-size:10px; }
  .story-layout .editor-panel { padding:21px 16px; grid-template-columns:minmax(0,1fr); }
  .editor-panel .mini-actions { grid-column:1; }
  .editor-panel .editor-fields { display:flex; flex-direction:column; }
  .editor-fields textarea { min-height:95px!important; }
}