/* BetaCreator precision studio. Semantic color and density layer for existing
   workflow components. Kept separate from legacy component/layout definitions. */
@font-face{font-family:Manrope;src:url('/static/fonts/Manrope-Variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{
  color-scheme:only light;--bg:#f7f7f8;--surface:#fff;--label:#222225;--label2:#56565f;--label3:#62626b;
  --sep:#dddee3;--hair:#e3e3e8;--fill:#e8e8ed;--fill2:#f0f0f3;--accent:#be4637;--accent-soft:#fff0ec;
  --success:#6151a3;--success-soft:#f0edf9;--blue:var(--accent);--indigo:var(--accent);--green:var(--success);--orange:#8b5b00;--red:#b42338;--rail:#222225;
  --t-xs:12px;--t-sm:13px;--t-md:14px;--t-lg:16px;--t-xl:19px;--t-2xl:23px;--t-3xl:28px;
  --sans:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html{scrollbar-color:var(--sep) var(--bg);scroll-padding-top:85px}
body{background:var(--bg);min-height:100dvh;line-height:1.5}
body::before,body::after{display:none}
::selection{background:var(--accent);color:var(--bg)}
*::-webkit-scrollbar-thumb{background:var(--sep);border:3px solid transparent;background-clip:padding-box}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip-link{background:var(--surface);color:var(--label)}
input,textarea{caret-color:var(--accent)}
a{color:var(--accent);text-underline-offset:3px}
h1{font-size:var(--t-3xl);line-height:1.15;letter-spacing:-.03em;margin:0 0 6px}
h2{line-height:1.25;letter-spacing:-.02em}
p{line-height:1.55}
.lede{margin:0 0 18px;color:var(--label2)}
.hint,.meta{color:var(--label3)}
.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}
[hidden]{display:none!important}
.brand,.brand strong{font-family:Manrope,sans-serif;font-weight:750;letter-spacing:-.03em;color:var(--label)}
.brand{gap:8px;font-size:19px}
.brand-mark{display:block;width:32px;height:32px;object-fit:contain;flex-shrink:0}
body.public-landing .brand-mark,body.public-auth .brand-mark{width:36px;height:36px}
.brand-copy small{font-family:var(--sans);font-size:11px;color:var(--label3);letter-spacing:0}
.btn,.btn.lg{background:var(--accent);color:#fff;border:1px solid transparent;border-radius:9px;min-height:40px;padding:9px 15px;box-shadow:none;font-size:var(--t-md);font-weight:650;transition:background .16s,color .16s,transform .16s}
.btn:hover{background:color-mix(in srgb,var(--accent),#000 12%);box-shadow:none;transform:none}
.btn:active{transform:scale(.98);transition-duration:70ms}
.btn.g,.btn.g.lg{background:var(--surface);color:var(--label);border:1px solid var(--sep);box-shadow:none}
.btn.g:hover{background:var(--fill2)}
.btn.sm{min-height:34px;padding:6px 10px;font-size:var(--t-sm)}
.btn.danger{background:var(--red);color:var(--surface)}
button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],textarea,select{background:var(--surface);color:var(--label);border:1px solid var(--sep);border-radius:8px;font-size:var(--t-md);padding:9px 11px;min-height:40px;box-shadow:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--label3)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--accent)}
/* Native microphone meters otherwise retain the browser's default green. */
meter{accent-color:var(--accent)}
meter::-webkit-meter-bar{background:var(--fill);border:0;border-radius:6px}
meter::-webkit-meter-optimum-value{background:var(--accent)}
meter::-webkit-meter-suboptimum-value{background:var(--orange)}
meter::-webkit-meter-even-less-good-value{background:var(--red)}
meter::-moz-meter-bar{background:var(--accent)}
input[type=file]{max-width:100%;font:inherit;color:var(--label2)}
input[type=file]::file-selector-button{border:1px solid var(--sep);border-radius:8px;padding:9px 12px;background:var(--surface);color:var(--label);font:inherit;margin-right:10px;cursor:pointer}
.card,.notice,.voice-take{border:1px solid var(--hair);border-radius:12px;box-shadow:none;background:var(--surface);padding:18px;margin-bottom:12px}
.card.flush{padding:0 18px}
.field{margin-bottom:14px}.field label{margin-bottom:5px}
.notice{background:var(--fill2)}
.notice.bad{background:color-mix(in srgb,var(--red) 10%,var(--surface));color:var(--label)}
.notice.ok,.pill.ready,.pill.done{background:var(--success-soft);color:var(--success)}
.pill.queued,.pill.draft{background:var(--fill);color:var(--label2)}
.pill.running,.pill.studying{background:color-mix(in srgb,var(--orange) 12%,var(--surface));color:var(--orange)}
.pill.failed{background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--red)}
.pill .dot{background:currentColor;box-shadow:none}
.choice,.vcard,.fontcard{border-color:var(--sep);background:var(--surface);border-radius:10px;box-shadow:none}
.choice:has(input:checked),.vcard:has(input:checked),.fontcard:has(input:checked){background:var(--accent-soft);border-color:var(--accent);box-shadow:none}
.choice:has(input:focus-visible),.vcard:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.choice:hover,.vcard:hover{border-color:var(--accent)}
.seg{background:var(--fill2);border-color:var(--sep)}
.seg label:has(input:checked),.seg a.on{background:var(--surface);color:var(--label);box-shadow:0 1px 3px #0001}
.drop{background:var(--fill2);border-color:var(--sep);padding:32px 20px;margin:0}
.drop:hover,.drop.dragging{background:var(--accent-soft);border-color:var(--accent)}
.drop svg{stroke:var(--accent)}
.track i,.working-bar{background:var(--accent)}
.steps{margin-bottom:16px}.steps s.on::before,.steps s.done::before{background:var(--accent);color:var(--surface)}
.steps s::before{width:24px;height:24px;font-size:12px}
.steps i.done{background:var(--accent)}
.reveal,.anim .reveal{opacity:1!important;transform:none!important;animation:none!important}
.workspace-signal,.empty-wave,.workspace-banner::after{display:none}
.workspace-banner{background:none;color:var(--label);min-height:0;padding:0;margin:0 0 22px;border-radius:0;box-shadow:none;overflow:visible}
.workspace-banner h1{color:var(--label);font-size:var(--t-3xl)}
.workspace-banner .lede{color:var(--label2);font-size:var(--t-md)}
.workspace-banner .btn{background:var(--accent);color:var(--surface)}
.first-video{min-height:230px;background:var(--surface);border-color:var(--sep)}
.first-video h2{margin-top:0}
.account-context{padding:9px 12px;border-radius:8px;background:var(--fill2);color:var(--label2);margin-bottom:18px;font-size:13px}
.account-context strong{color:var(--label)}
.recording-owner{padding:9px 12px;margin:0 0 12px;border:1px solid var(--sep);border-radius:8px;background:var(--fill2);color:var(--label2);font-size:13px}
.recording-owner p{display:inline;margin:0 0 0 7px}.recording-owner strong{color:var(--label)}
.identity-lock{background:var(--accent-soft);color:var(--accent);border-color:var(--sep)}
.delivery-preview,.language-help,.voice-language-control{background:var(--fill2);border-color:var(--sep)}
.voice-language-control{background:transparent}
.delivery-disclosure{border:1px solid var(--sep);border-radius:10px;background:var(--surface);margin-bottom:12px;min-width:0}
.delivery-disclosure>summary{padding:13px 16px;font-weight:650;cursor:pointer}
.delivery-disclosure>summary .hint{display:block;margin:3px 0 0 16px;font-weight:400}
.delivery-disclosure .delivery-panel{border:0;margin:0;padding:14px}
.delivery-disclosure .delivery-grid{grid-template-columns:1fr}
.delivery-disclosure .delivery-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.voice-setup>.actions{position:sticky;bottom:10px;background:var(--surface);border:1px solid var(--sep);padding:10px 12px;border-radius:10px;z-index:4}
.library-voices{margin-top:16px;padding-top:12px;border-top:1px solid var(--sep)}.library-voices>summary{font-weight:650;cursor:pointer;min-height:30px}
.voice-preview{background:var(--accent-soft);color:var(--accent);border:1px solid var(--sep);border-radius:8px;box-shadow:none}
.voice-preview:hover,.voice-preview.playing{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.language-help{background:transparent}
@media(min-width:980px){form.twocol.voice-setup{display:grid;columns:auto;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}.voice-setup>#voicecard{grid-column:1;grid-row:1}.voice-preferences{grid-column:2;grid-row:1;min-width:0}.voice-setup>.actions{grid-column:1/-1}.voice-setup .card{padding:14px}.voice-setup .choices{gap:7px}.voice-setup .choice{padding:10px 12px}.voice-setup>.actions{margin-top:0}}
.delivery-options label>span{background:var(--surface);border-color:var(--sep);box-shadow:none}
.delivery-options label:has(input:checked)>span{background:var(--accent-soft);border-color:var(--accent);box-shadow:none;color:var(--label)}
.delivery-options small{color:var(--label2)}
.language-experimental,.provider-state{background:var(--fill2);color:var(--orange)}
.provider-state.ready{background:var(--success-soft);color:var(--success)}
.preview-spinner{border-top-color:var(--accent)}
.pop,.account-create-form{background:var(--surface);border-color:var(--sep);color:var(--label)}
.account-list,.account-person,.account-detail,.control-panel,.workspace-tip{background:var(--surface);color:var(--label);border-color:var(--sep)}
.account-person.on,.account-person:hover{background:var(--accent-soft)}
.account-avatar,.person-avatar{background:var(--fill);color:var(--label)}
.account-shell{min-height:430px;background:var(--surface);box-shadow:none;border-radius:12px}
.account-empty{min-height:380px}
.account-row{color:var(--label);border-color:var(--sep)}
.account-row:hover,.account-row.selected{background:var(--accent-soft)}
.account-tags i,.account-detail-head>.pill{background:var(--fill2);color:var(--label2)}
.account-tags i.active{background:var(--success-soft);color:var(--success)}
.account-tags i.paused{background:var(--fill);color:var(--orange)}
.editing-account{background:var(--fill2);color:var(--label2);border-color:var(--sep)}
.makebar{background:var(--surface);border:1px solid var(--sep);box-shadow:0 6px 24px #0001}
.admin-grid .choice{min-height:100px}
.appearance-control{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:500;margin:0}
.appearance-control select{width:auto;min-height:32px;padding:5px 7px;font-size:12px;max-width:105px}
header.rail{background:var(--surface);color:var(--label);border-color:var(--sep);box-shadow:none;backdrop-filter:none}
header.rail .brand{color:var(--label)}
header.rail .brand{font-size:18px}
header.rail .session-identity>span{color:var(--label2)}
header.rail .btn.new{background:var(--accent);color:var(--surface);box-shadow:none}
header.rail .btn.new:hover{background:var(--accent);filter:brightness(.95)}
.skip-link{box-shadow:none}
header.rail .session-identity{background:var(--fill2);border:1px solid var(--sep);color:var(--label);padding:10px;margin:17px 0}
.session-identity strong{font-size:15px;color:var(--label)}
.session-identity small{color:var(--label2);font-size:12px}
header.rail .app-nav a{color:var(--label2);font-size:13px;min-height:40px;padding:9px 10px;border-radius:8px}
header.rail .app-nav a:hover{background:var(--fill2);color:var(--label)}
header.rail .app-nav a.on{background:var(--accent-soft);color:var(--accent);box-shadow:none}
header.rail .app-nav a.on::after{display:none}
header.rail .nav-label{color:var(--label3);font-size:10px;letter-spacing:.06em;padding:12px 10px 5px}
header.rail .app-nav a.pill{background:var(--fill2);color:var(--label);border-radius:8px;margin-top:12px}
header.rail .app-nav a.signout{color:var(--label2)}
header.rail .new{background:var(--accent);color:var(--surface)}
.nav-footer{gap:4px}
.nav-toggle{background:var(--fill2);border-color:var(--sep);color:var(--label)}
@media(min-width:980px){
  body:not(.public-landing):not(.public-auth){grid-template-columns:208px minmax(0,1fr)}
  body:not(.public-landing):not(.public-auth) header.rail{width:208px;padding:20px 12px;border-right:1px solid var(--sep)}
  body:not(.public-landing):not(.public-auth) main,body:not(.public-landing):not(.public-auth) main.narrow,body:not(.public-landing):not(.public-auth) main.home,body:not(.public-landing):not(.public-auth) main.review,body:not(.public-landing):not(.public-auth) main.job{max-width:1440px;padding:24px 28px 44px}
  header.rail .app-nav{margin-top:10px}
  .librow{padding:10px 0}.librow .thumb{width:36px;height:48px}
}
/* Public front door: the media is the focal point, not dashboard decoration. */
body.public-landing,body.public-auth{display:block;background:var(--bg)}
body.public-landing header.rail,body.public-auth header.rail{position:sticky;top:0;display:flex;flex-direction:row;justify-content:space-between;height:64px;min-height:64px;width:100%;padding:10px max(24px,calc((100vw - 1240px)/2));background:var(--bg);border-bottom:1px solid var(--sep)}
.public-nav{gap:12px;flex-wrap:nowrap}
header.rail .public-nav a{color:var(--label);font-size:13px;white-space:nowrap}
header.rail .public-nav a:hover{color:var(--accent);background:var(--fill2)}
header.rail .public-nav .public-create{background:var(--accent);color:var(--surface);border-radius:8px}
header.rail .public-nav .public-create:hover{background:var(--accent);color:var(--surface)}
body.public-landing main.landing{max-width:none;padding:0;margin:0}
.studio-hero{position:relative;isolation:isolate;text-align:center;max-width:1100px;margin:auto;padding:28px 24px 26px}
.hero-motion{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-motion i{position:absolute;width:78px;aspect-ratio:9/16;top:32px;left:7%;border:2px solid var(--accent);border-radius:12px;opacity:.24;transform:rotate(-12deg)}
.hero-motion i::after{content:"";position:absolute;inset:10px;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);opacity:.7}
.hero-motion i:nth-child(2){left:auto;right:7%;top:64px;width:62px;transform:rotate(12deg)}
.studio-hero h1{font-size:clamp(36px,4.2vw,58px);font-weight:750;line-height:1.09;letter-spacing:-.04em;margin:0 0 16px;text-wrap:balance}
.studio-hero>p{max-width:740px;margin:0 auto 21px;font-size:16px;color:var(--label2)}
.hero-action{min-height:44px;padding:11px 20px;gap:14px}
.demo-caption{display:flex;align-items:center;gap:16px;max-width:1240px;margin:0 auto;padding:0 0 10px}
.demo-caption h2{font-size:16px;margin:0;margin-right:auto}.demo-caption>span{font-size:12px;color:var(--label3)}
.workflow-demo{max-width:1240px;margin:0 auto;scroll-margin-top:78px}
.coastal-strip{overflow:hidden;background:var(--fill2);height:250px;border-radius:12px 12px 0 0}
.coastal-strip img{display:block;width:100%;height:100%;object-fit:cover;animation:coastal-drift 26s ease-in-out infinite alternate;transform-origin:center}
.coastal-strip.paused img{animation-play-state:paused}
.creator-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.creator-frame{overflow:hidden;min-width:0;min-height:0}
.creator-strip .creator-frame img{width:100%;max-width:100%;object-position:center 20%;transform-origin:center}
.reel-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:900px;margin:0 auto 20px;padding:0 6px}
.reel-frame{position:relative;isolation:isolate;aspect-ratio:9/16;min-width:0;margin:0;overflow:hidden;border-radius:16px;background:var(--label);box-shadow:0 5px 15px #22222516}
.reel-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.reel-bandar img{object-position:65% center}.reel-food img{object-position:43% center}
.reel-frame figcaption{position:absolute;inset:0;color:#fff;background:linear-gradient(180deg,#0005,transparent 24%,transparent 40%,#0009 100%);display:flex;flex-direction:column;align-items:center;padding:15px 10px 19px}
.reel-topic{align-self:flex-start;font-size:11px;font-weight:650;padding:5px 8px;border-radius:6px;background:#222225cc;color:#fff;line-height:1.3}
.reel-subtitle{margin-top:auto;margin-bottom:19px;text-align:center;color:#fff;font-size:clamp(18px,1.8vw,25px);font-weight:800;line-height:1.16;letter-spacing:-.035em;text-shadow:0 2px 3px #000,1px 0 #000,-1px 0 #000}
.reel-kind{font-size:11px;font-weight:600;color:#fff;line-height:1.3}
.reel-subtitle:lang(zh){font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;letter-spacing:0;line-height:1.35}
.reel-gallery:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:16px}
.reel-disclosure{margin:0 14px 24px;text-align:center;color:var(--label3);font-size:12px}
.workflow-demo:has(.reel-gallery) .workflow-switcher{border-radius:12px 12px 0 0}
.workflow-demo:has(.reel-gallery) .demo-caption{max-width:900px;padding:0 6px 12px}
.studio-hero:has(+.workflow-demo .reel-gallery){padding-top:24px;padding-bottom:23px}
@keyframes reel-pan{from{transform:scale(1.12) translate(-3%,1.5%)}to{transform:scale(1.28) translate(3%,-2%)}}
@keyframes crop-float{from{transform:translateY(-12px) rotate(-14deg)}to{transform:translateY(18px) rotate(2deg)}}
@media(prefers-reduced-motion:no-preference){
  .reel-frame img{animation:reel-pan 7s ease-in-out infinite alternate;animation-delay:-2s;will-change:transform}
  .reel-food img{animation-duration:8s;animation-delay:-6s;animation-direction:alternate-reverse}
  .reel-lifestyle img{animation-duration:9s;animation-delay:-4s}
  .reel-bandar img{animation-duration:8s;animation-delay:-1s;animation-direction:alternate-reverse}
  .hero-motion i{animation:crop-float 5s ease-in-out infinite alternate;animation-delay:-2s}
  .hero-motion i:nth-child(2){animation-duration:6s;animation-delay:-4s;animation-direction:alternate-reverse}
}
.reel-frame:hover img,.reel-gallery:focus-within img,.motion-suspended .reel-frame img,.motion-suspended .hero-motion i,body:has(.reel-gallery:focus-within) .hero-motion i{animation-play-state:paused}
.how-flow{max-width:1184px;margin:32px auto 0;padding:24px 28px 18px;background:var(--surface);border:1px solid var(--sep);border-radius:16px;scroll-margin-top:82px}
.flow-heading{display:flex;align-items:baseline;gap:24px;margin-bottom:22px}
.flow-heading h2{font-size:24px;letter-spacing:-.03em;margin:0}.flow-heading p{margin:0;color:var(--label2);font-size:14px}
.creation-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:0}
.creation-flow li{position:relative;min-width:0}
.flow-number{display:grid;place-items:center;width:32px;height:32px;background:var(--accent-soft);color:var(--accent);border-radius:50%;font-weight:750;font-size:14px;margin-bottom:12px}
.creation-flow li:not(:last-child)::after{content:"→";position:absolute;top:0;left:44px;right:-20px;height:32px;display:flex;align-items:center;justify-content:flex-end;color:var(--accent);font-size:22px;background:linear-gradient(var(--sep),var(--sep)) left center/calc(100% - 18px) 1px no-repeat}
.creation-flow h3{margin:0 0 7px;font-size:16px;line-height:1.3}.creation-flow p{margin:0;max-width:28ch;font-size:13px;color:var(--label2);line-height:1.6}
.flow-next{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--sep);margin-top:22px;padding-top:12px;font-size:13px}
.flow-next p{margin:0;color:var(--label2)}.flow-next a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;white-space:nowrap}
@media(max-width:1240px){.how-flow{margin-left:28px;margin-right:28px}}
@media(max-width:760px){.hero-motion i{left:0;opacity:.14;width:50px}.hero-motion i:nth-child(2){right:0;width:40px}.how-flow{padding:22px}.creation-flow{grid-template-columns:1fr;gap:24px}.creation-flow li{padding-left:48px}.flow-number{position:absolute;left:0;top:0}.creation-flow p{max-width:none}.creation-flow li:not(:last-child)::after{content:"↓";left:0;right:auto;top:40px;bottom:-16px;width:32px;height:auto;align-items:flex-end;justify-content:center;font-size:18px;background:linear-gradient(var(--sep),var(--sep)) center top/1px calc(100% - 14px) no-repeat}.flow-heading{display:block}.flow-heading p{margin-top:5px}.flow-next{align-items:flex-start;flex-direction:column;gap:4px}}
@media(max-width:650px){.how-flow{margin:24px 14px 0;padding:20px 18px}.reel-disclosure{font-size:11px;margin-bottom:18px}.flow-heading h2{font-size:22px}.flow-heading p{font-size:13px}}
@media(min-width:980px) and (max-height:800px){.reel-gallery{max-width:710px;gap:14px;margin-bottom:14px}.workflow-demo:has(.reel-gallery) .demo-caption{max-width:710px}.reel-subtitle{font-size:19px}.reel-frame figcaption{padding:11px 8px 15px}.reel-topic{font-size:10px}.studio-hero:has(+.workflow-demo .reel-gallery){padding-top:18px;padding-bottom:18px}}
@media(max-width:650px){.reel-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:440px;padding:0;margin-bottom:18px}.reel-frame{border-radius:12px}.reel-subtitle{font-size:20px}.reel-frame figcaption{padding:11px 8px 15px}.reel-topic{font-size:10px}.workflow-demo:has(.reel-gallery) .demo-caption{padding-left:0;padding-right:0}.workflow-demo:has(.reel-gallery) .demo-caption>span{font-size:11px}}
.workflow-switcher{background:var(--label);padding:14px 18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.workflow-switcher button{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:12px;color:#dddde3;background:transparent;border:1px solid transparent;border-radius:8px;font:inherit;text-align:left;cursor:pointer;min-height:48px}
.workflow-switcher button>span{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border:1px solid #92929c;border-radius:50%;font-size:12px;font-variant-numeric:tabular-nums}
.workflow-switcher button[aria-selected=true]{color:#fff;background:var(--accent);border-color:var(--accent)}
.workflow-switcher button[aria-selected=true]>span{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.workflow-switcher button:hover{background:var(--accent)}
.workflow-switcher button:focus-visible{outline-color:var(--accent-soft)}
#demo-panel{display:flex;gap:25px;align-items:center;padding:18px 30px;background:var(--surface);border:1px solid var(--sep);border-top:0;border-radius:0 0 12px 12px;min-height:100px}
#demo-panel h3{font-size:18px;line-height:1.35;flex:0 0 32%;margin:0}
#demo-panel p{color:var(--label2);margin:0;max-width:65ch}
.studio-explainer{max-width:1240px;display:grid;grid-template-columns:1fr 1.2fr;gap:80px;margin:54px auto;padding:0}
.studio-explainer h2{font-size:38px;line-height:1.12;margin:0 0 17px}
.studio-explainer>div>p{max-width:36ch;color:var(--label2);font-size:16px}
.studio-faq details{border-bottom:1px solid var(--sep);padding:14px 0}
.studio-faq summary{font-size:15px;font-weight:650;cursor:pointer;min-height:24px}
.studio-faq p{color:var(--label2);margin:10px 0 0;max-width:65ch}
.studio-footer{max-width:1240px;padding:24px 0 34px;border-top:1px solid var(--sep);margin:auto;display:flex;align-items:center;gap:24px}
.studio-footer p{color:var(--label2);margin-right:auto}
body.public-auth main.auth{max-width:1080px;padding:55px 28px 60px}
.auth-layout{gap:65px}.auth-intro{padding:20px 0;color:var(--label)}
.auth-intro h1{font-size:42px;line-height:1.13;color:var(--label)}
.auth-intro>p{color:var(--label2)}
.auth-intro::before,.auth-intro::after{display:none}
.auth-flow i{background:var(--sep)}
.auth-private{font-size:13px!important;line-height:1.5}
.auth-card{background:var(--surface);box-shadow:none;padding:26px;border:1px solid var(--sep)}
.auth-card h2{color:var(--label);font-size:24px}
.auth-flow{background:var(--fill2);border-color:var(--sep);color:var(--label)}
.auth-flow span,.auth-flow b{color:var(--label)}
.auth-flow .ready,.auth-benefits li::before,.auth-private span{background:var(--accent-soft);color:var(--accent)}
@keyframes coastal-drift{from{transform:scale(1)}to{transform:scale(1.055)}}
@keyframes headline-in{from{transform:translateY(9px);opacity:.65}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:no-preference){.studio-hero h1{animation:headline-in .65s cubic-bezier(.16,1,.3,1) both}}
@media(max-width:1300px){.workflow-demo,.studio-explainer,.studio-footer{margin-left:28px;margin-right:28px}}
@media(min-width:980px) and (max-height:800px){.studio-hero h1{font-size:50px}.studio-hero{padding-top:24px;padding-bottom:20px}.coastal-strip{height:220px}#demo-panel{min-height:86px;padding-top:14px;padding-bottom:14px}}
@media(max-width:979px){
  main{padding:22px 20px 44px}
  header.rail .app-nav{background:var(--surface)}
  header.rail .session-identity{margin:0}
  .studio-hero{padding-top:32px}.coastal-strip{height:240px}
  .workflow-switcher{padding:10px;gap:4px}.workflow-switcher button{gap:8px;padding:8px;font-size:12px}
  .studio-explainer{gap:30px}
}
@media(max-width:650px){
  :root{--t-md:15px;--t-sm:13px;--t-lg:16px;--t-3xl:26px}
  input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],textarea,select{font-size:16px;min-height:44px}
  header.rail:has(.app-nav){background:var(--surface);padding:8px 13px;gap:5px}
  header.rail:has(.app-nav) .session-identity{padding:5px 8px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}
  .session-identity strong{font-size:13px}.session-identity small{font-size:11px;line-height:1.3;text-align:right}
  header.rail:has(.app-nav) .app-nav{background:var(--surface);border-color:var(--sep);max-height:calc(100dvh - 110px);box-shadow:0 12px 36px #0003}
  .nav-toggle{color:var(--label);background:var(--fill2);border-color:var(--sep)}
  header.rail .app-nav a.signout{border-color:var(--sep)}
  .brand{font-size:17px}.brand-mark{width:28px;height:28px}.brand-copy small{display:none}
  main{padding:19px 14px 36px}.card{padding:15px}.lede{margin-bottom:14px}
  .recording-owner p{display:block;margin:4px 0 0}.workspace-banner{padding:0;margin-bottom:18px}
  body.public-landing header.rail,body.public-auth header.rail{height:auto;min-height:62px;padding:10px 15px;gap:8px}
  .public-nav{gap:3px}.public-nav a{padding:7px;font-size:12px}.public-nav .how-link,.public-nav .public-create{display:none}
  .appearance-control select{font-size:12px;min-height:36px;width:80px;padding:5px}
  .studio-hero{padding:30px 16px 26px}.studio-hero h1{font-size:34px;letter-spacing:-.035em;line-height:1.13}
  .studio-hero>p{font-size:15px;max-width:34ch;margin-bottom:18px}
  .workflow-demo,.studio-explainer,.studio-footer{margin-left:14px;margin-right:14px}
  .demo-caption{flex-wrap:wrap;gap:6px 10px}.demo-caption h2{flex-basis:100%;font-size:15px}.demo-caption>span{margin-right:auto;font-size:11px}
  .coastal-strip{height:170px}.coastal-strip img{width:200%;max-width:none;object-fit:cover;transform-origin:25% center}
  .creator-strip{height:250px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  .workflow-switcher{grid-template-columns:1fr 1fr;padding:10px;gap:4px}.workflow-switcher button{font-size:12px;min-height:48px}
  .workflow-switcher button>span{width:24px;height:24px}
  #demo-panel{display:block;padding:17px;min-height:165px}#demo-panel h3{font-size:17px;margin-bottom:8px}#demo-panel p{font-size:14px}
  .studio-explainer{grid-template-columns:1fr;gap:10px;margin-top:35px;margin-bottom:30px}.studio-explainer h2{font-size:30px}
  .studio-explainer>div>p{font-size:15px;max-width:40ch}.studio-faq summary{min-height:32px}
  .studio-footer{flex-wrap:wrap;gap:12px;padding:22px 0}.studio-footer p{margin:0}.studio-footer>a:last-child{flex-basis:100%;min-height:35px}
  body.public-auth main.auth{padding:26px 16px}.auth-layout{gap:20px}.auth-intro{padding:0}.auth-intro h1{font-size:30px}.auth-flow,.auth-private,.auth-benefits{display:none}.auth-card{padding:21px}
}
.seg label:has(input:focus-visible),.caption-preset:has(input:focus-visible),.fontcard:has(input:focus-visible),.delivery-options label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.story-side .story-name{background:var(--surface)}
.music-preview.playing{background:var(--accent);color:var(--on-accent,#fff)}
.caption-safe-note{background:var(--accent-soft);color:var(--accent);border-color:var(--sep)}
@media(max-width:650px),(pointer:coarse){.btn,.btn.sm,.btn.small,header.rail .app-nav a,.appearance-control select,#motion-toggle,.studio-tabs button,.public-nav a,.studio-footer>a{min-height:44px}.studio-faq summary{min-height:44px;display:flex;align-items:center}.studio-footer>a{display:inline-flex;align-items:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.coastal-strip img{transform:none}}
@media(prefers-reduced-transparency:reduce){header.rail,.makebar{backdrop-filter:none;background:var(--surface)}}
@media(prefers-contrast:more){:root{--sep:#797980;--hair:#797980}.card{border-color:var(--label2)}}