:root{--ink:#0b0d12;--paper:#f5f2eb;--orange:#ff4d32;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--paper);background:var(--ink)}
@font-face{font-family:Inter;src:url("./fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("./fonts/InterVariable-Italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
*{box-sizing:border-box}
/* The document owns setup scrolling. Hiding horizontal overflow on body as
   well would also turn it into an independent vertical scroll container. */
html{max-width:100%;overflow-x:hidden;overflow-y:auto}
body{max-width:100%;min-width:0;margin:0;overflow:visible;background:var(--ink)}
button,input{font:inherit}
button:focus{outline:none}
.hidden{display:none!important}
[hidden]{display:none!important}
/* Avoid flashing the setup screen while a locally saved editor session is read. */
body.session-pending #welcomeView{display:none!important}
body.session-pending #editorView.hidden{display:flex!important}
body.session-pending .editor-layout{visibility:hidden;pointer-events:none}
body.session-pending::after{content:"Loading your editor…";position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;color:var(--paper)}
.view{min-height:100vh}
.brand{color:var(--paper);font-size:1.55rem;font-weight:840;letter-spacing:-.065em;text-decoration:none}
.brand span{color:var(--orange)}

.welcome-view{display:flex;flex-direction:column;padding:28px clamp(22px,6vw,92px) 26px;gap:36px;background:var(--ink)}
.welcome-header,.editor-header{display:flex;align-items:center;justify-content:space-between}
.setup-card{display:grid;grid-template-columns:238px 1fr auto;align-items:stretch;max-width:1050px;padding:16px;gap:14px;border:1px solid #292e39;border-radius:22px;background:#161922;box-shadow:0 24px 70px #0005}
.dropzone{display:flex;flex-direction:column;justify-content:center;min-height:164px;padding:21px;gap:5px;border:1px dashed #4c5362;border-radius:14px;background:#0d0f15;cursor:pointer}
.dropzone strong{font-size:.95rem}
.dropzone small{color:#888c97;font-size:.73rem;line-height:1.35}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:9px}
.field-grid label{display:block}
.field-grid label:last-child{grid-column:span 2}
.field-grid span{display:block;margin:0 0 5px;color:#a9acb5;font-size:.61rem;font-weight:800;letter-spacing:.12em}
.field-grid input{width:100%;padding:11px 12px;border:1px solid #363b47;border-radius:8px;outline:0;background:#20242e;color:var(--paper);font-size:.83rem}
.primary{padding:13px 17px;border:0;border-radius:10px;background:var(--orange);color:#17100f;font-weight:850;cursor:pointer}
.create-button{align-self:end;white-space:nowrap}
.app-legal{display:flex;align-self:center;margin-top:auto;gap:18px;color:#8d94a1;font-size:.875rem}.app-legal a{color:inherit;text-decoration:none}


.editor-view{display:flex;flex-direction:column;width:100%;min-width:0;padding:20px clamp(18px,4vw,62px) 28px;overflow-x:hidden;background:var(--ink)}
.editor-header{padding-bottom:17px;border-bottom:1px solid #252932}
.editor-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.6fr);align-items:center;max-width:1320px;margin:26px auto 18px;gap:28px}
.editor-legal{width:min(1320px,100%);justify-content:center;padding-top:18px}
.preview-stage{min-width:0}
.video-frame{position:relative;display:grid;margin:auto;overflow:hidden;background:#151820;aspect-ratio:16/9;place-items:center;isolation:isolate}
.video-frame.portrait{width:min(100%,420px);aspect-ratio:9/16}
#videoPreview{display:block;width:100%;height:100%;background:#000;object-fit:contain}
.ticker-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.ticker-group{position:absolute;pointer-events:auto;touch-action:none;cursor:grab;user-select:none}
.ticker-group.dragging{cursor:grabbing}
.ticker-group:focus-visible{outline:none}
.dropzone:focus-visible,.logo-picker:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
dialog{max-width:340px;padding:28px;border:1px solid #3a404d;border-radius:16px;background:#1b1f29;color:var(--paper);text-align:center;box-shadow:0 28px 80px #0009}
dialog::backdrop{background:#000a}
dialog h2{margin:16px 0 8px;letter-spacing:-.05em}
dialog p{margin:0 0 20px;color:#a9adb5;font-size:.84rem;line-height:1.5}

@media(max-width:850px){.editor-view{padding:17px 18px}.editor-layout{grid-template-columns:1fr;gap:16px}}
@media(max-width:500px){.welcome-view{padding:22px 17px;gap:28px}.field-grid{grid-template-columns:1fr}.field-grid label:last-child{grid-column:auto}.editor-header .brand{font-size:1.3rem}.video-frame{border-radius:9px}}
@media(min-width:851px) and (min-height:800px){.editor-view{min-height:100dvh;padding-top:22px;padding-bottom:18px}.editor-header{margin-top:auto}.editor-legal{margin-top:0;margin-bottom:auto}}
@media(min-width:1201px){#editorView{min-height:100dvh;padding-top:22px;padding-bottom:18px}#editorView .editor-header{margin-top:auto;transform:none}#editorView .editor-layout{margin:32px auto auto;transform:none}#editorView .editor-legal{margin:0;transform:none}}