@font-face{font-family:'MVSansA';src:url(studio-assets/typefaces-rendered/MVSansA-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:'MVSansA';src:url(studio-assets/typefaces-rendered/MVSansA-650.ttf);font-weight:650;font-display:swap}
@font-face{font-family:'MVSansA';src:url(studio-assets/typefaces-rendered/MVSansA-750.ttf);font-weight:750;font-display:swap}
@font-face{font-family:'MVSansB';src:url(studio-assets/typefaces-rendered/MVSansB-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:'MVSansB';src:url(studio-assets/typefaces-rendered/MVSansB-650.ttf);font-weight:650;font-display:swap}
@font-face{font-family:'MVSansB';src:url(studio-assets/typefaces-rendered/MVSansB-750.ttf);font-weight:750;font-display:swap}
@font-face{font-family:'MVSansC';src:url(studio-assets/typefaces-rendered/MVSansC-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:'MVSansC';src:url(studio-assets/typefaces-rendered/MVSansC-600.ttf);font-weight:600;font-display:swap}
@font-face{font-family:'MVSansC';src:url(studio-assets/typefaces-rendered/MVSansC-750.ttf);font-weight:750;font-display:swap}
@font-face{font-family:'MVSansD';src:url(studio-assets/typefaces-rendered/MVSansD-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:'MVSansD';src:url(studio-assets/typefaces-rendered/MVSansD-600.ttf);font-weight:600;font-display:swap}
@font-face{font-family:'MVSansD';src:url(studio-assets/typefaces-rendered/MVSansD-700.ttf);font-weight:700;font-display:swap}
@font-face{font-family:'MVSerifE';src:url(studio-assets/typefaces-rendered/MVSerifE-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:'MVSerifE';src:url(studio-assets/typefaces-rendered/MVSerifE-500.ttf);font-weight:500;font-display:swap}
@font-face{font-family:'MVSerifE';src:url(studio-assets/typefaces-rendered/MVSerifE-700.ttf);font-weight:700;font-display:swap}

@font-face{font-family:Inter;src:url(studio-assets/fonts/Inter.ttf);font-weight:100 900;font-display:swap}@font-face{font-family:Manrope;src:url(studio-assets/fonts/Manrope.ttf);font-weight:200 800;font-display:swap}@font-face{font-family:'DM Sans';src:url(studio-assets/fonts/DMSans.ttf);font-weight:100 1000;font-display:swap}@font-face{font-family:'Space Grotesk';src:url(studio-assets/fonts/space-grotesk.ttf);font-weight:300 700;font-display:swap}
:root{color-scheme:light;--paper:#f5f5f7;--ink:#1d1d1f;--muted:#666870;--blue:#086acf;--line:#dce0e6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 Inter,sans-serif}button,input,select{font:inherit}button,a,summary,input,select{touch-action:manipulation}a{color:#0066cc;text-underline-offset:4px}button,summary{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}::selection{background:#c9e3ff}header{max-width:1440px;margin:auto;padding:26px 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}.wordmark{font-size:20px;font-weight:650;color:var(--ink);text-decoration:none;letter-spacing:-.03em}.wordmark span{color:var(--muted);font-weight:400}header p{margin:0;color:var(--muted);font-size:13px}main{max-width:1440px;margin:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:64px;padding:40px}.canvas-section{min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.formats{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:9px;background:#e8e9ed}.formats button{min-height:38px;border:0;border-radius:6px;background:transparent;padding:8px 16px;color:#4c4e55}.formats button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 2px 5px #20304712}.preview-label{font-size:12px;color:var(--muted)}.canvas-wrap{min-height:520px;display:flex;justify-content:center;align-items:center;background:#e9ebef;border-radius:16px;padding:22px}#stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:12px;box-shadow:0 14px 35px #26344715}#stage.portrait{width:338px;max-width:100%;aspect-ratio:9/16}#stage .stage-graphics,#stage .stage-graphics>svg{display:block;width:100%;height:100%}.media-inset{position:absolute;object-fit:contain;background:#111;pointer-events:none}.transport{display:flex;align-items:center;gap:16px;margin-top:16px}.transport button{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center}.transport svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;stroke-width:1.5}.transport input{width:100%;accent-color:var(--blue)}.transport output{font-size:12px;min-width:40px;text-align:right;font-variant-numeric:tabular-nums}.preview-description{text-align:center;font-size:12px;color:var(--muted);margin-top:18px}aside{padding-top:2px;min-width:0}h1{font-size:32px;letter-spacing:-.035em;line-height:1.1;font-weight:650;margin:0}.intro{margin:12px 0 28px;color:var(--muted);max-width:42ch}.option-section{margin-top:24px}h2,.option-section>label{display:block;font-size:14px;font-weight:600;margin:0 0 12px}.characters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.character{min-width:0;border:1px solid var(--line);border-radius:12px;background:#fff;padding:6px 4px 9px;min-height:111px;position:relative;color:var(--ink)}.character svg{display:block;width:100%;height:76px}.character span{display:block;font-size:11px;line-height:1.2;white-space:nowrap}.character[aria-pressed=true]{border:2px solid var(--blue);padding:5px 3px 8px;background:#f0f7ff}.backgrounds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.background{border:1px solid var(--line);padding:8px;border-radius:10px;background:#fff;color:var(--ink);min-height:66px;text-align:left;font-size:12px}.background i{display:block;height:22px;border-radius:5px;margin-bottom:6px;border:1px solid #1d1d1f0d}.background[aria-pressed=true]{border:2px solid var(--blue);padding:7px;background:#f0f7ff}select{width:100%;min-height:44px;border:1px solid #bfc5cd;border-radius:8px;background:#fff;color:var(--ink);padding:10px 12px}.export-section{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}#render{width:100%;min-height:48px;border:0;border-radius:9px;background:var(--blue);color:white;font-weight:600;padding:12px 18px}#render:hover{background:#006edb}#render:disabled{background:#d9e2ed;color:#5e6d80;cursor:wait}#render-note,#render-status{font-size:12px;color:var(--muted);margin:10px 0}#result{display:inline-flex;align-items:center;min-height:44px;font-weight:600}#result[hidden]{display:none}#save{border:0;background:none;padding:8px 0;min-height:40px;font-size:12px;color:#0066cc;text-decoration:underline;text-underline-offset:4px}.help{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}.help summary{min-height:40px;padding-block:10px;font-size:13px}.help p{font-size:12px;color:var(--muted);max-width:55ch}footer{max-width:1440px;margin:auto;padding:24px 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}button:hover{filter:brightness(.99)}
@media(max-width:1100px){main{gap:32px;padding:28px}.canvas-wrap{padding:16px}.characters{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}h1{font-size:29px}}
@media(max-width:760px){header{padding:18px 20px}header p{display:none}.wordmark{font-size:18px}main{display:flex;flex-direction:column;padding:24px 20px;gap:32px}.canvas-wrap{padding:16px;min-height:0}#stage.portrait{width:260px}.preview-toolbar{margin-bottom:12px}.formats button{padding:7px 14px}.preview-description{font-size:12px}h1{font-size:29px}.intro{margin-bottom:24px}.characters{gap:7px}.character svg{height:70px}.character{min-height:103px}.character span{font-size:10px}.backgrounds{grid-template-columns:repeat(3,1fr)}footer{padding:20px;display:block}footer span{display:block;margin-top:4px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.caption-links{display:flex;gap:18px;font-size:12px;margin:12px 0}.caption-links[hidden]{display:none}