:root{--omni: #2a9dad;--match: #7c3aed;--pop: #f0abfc;--surface-base: #1a8a99;--surface-raised: #157580;--surface-card: #116269;--border: rgba(255, 255, 255, .2);--border-strong: rgba(255, 255, 255, .35);--text: #ffffff;--text-muted: #c2f0f5;--success: #a7f3d0;--error: #fca5a5;--hover-accent: rgba(255, 255, 255, .7);--hover-accent-bg: rgba(255, 255, 255, .1);--font-ui: "DM Sans", system-ui, sans-serif;--font-display: "Syne", var(--font-ui);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{height:100%}body{margin:0;height:100%;overflow:hidden;font-family:var(--font-ui);line-height:1.5;color:var(--text);background:var(--surface-base);-webkit-font-smoothing:antialiased}#root{height:100%;min-height:100dvh;overflow:hidden}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--match);outline-offset:2px}@font-face{font-family:OverlayFont;src:url(/fonts/SourceSans3-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}.app-shell{height:100%;min-height:0;display:flex;flex-direction:column;padding:.75rem 1rem 1rem;gap:.5rem}.app-shell--landing{justify-content:center;align-items:center;gap:0}.app-header{flex-shrink:0;position:relative;z-index:1}.app-mascot{display:block;width:auto;height:clamp(4rem,22vw,7rem);margin:0 auto .65rem;object-fit:contain}.app-shell:not(.app-shell--landing) .app-header{align-self:stretch;width:100%;text-align:left}.app-shell--landing .app-header{align-self:stretch;width:100%;text-align:center;margin-bottom:1.5rem}.app-title{margin:0;line-height:1;font-family:Bangers,cursive;font-size:clamp(1.5rem,2.5vw,2rem);font-weight:400;letter-spacing:.04em;color:#fff;text-shadow:2px 2px 0 var(--match),-1px -1px 0 rgba(0,0,0,.2)}.app-shell--landing .app-title{font-family:Bangers,cursive;font-size:clamp(3rem,8vw,5.5rem);letter-spacing:.06em;color:#fff;line-height:1;text-shadow:4px 4px 0 var(--match),-1px -1px 0 rgba(0,0,0,.3)}.app-sub{margin:0;color:var(--text-muted);font-size:.8rem;max-width:none;width:100%;box-sizing:border-box}.app-shell--landing .app-sub{font-size:1rem;margin:0;max-width:none;width:100%;box-sizing:border-box;text-align:center;color:#fffc;font-weight:500}.app-main{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;z-index:1}.app-main--empty{align-items:stretch;justify-content:center}.app-shell--landing .app-main--empty{flex:0 0 auto;align-items:center}.app-drop{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:.25rem 0}.app-shell--landing .app-drop{flex:0 0 auto}.app-main--editor{display:grid;grid-template-columns:1fr minmax(260px,340px);grid-template-rows:1fr;gap:.75rem;align-items:stretch}.app-stage-col{min-width:0;min-height:0;align-self:stretch;display:flex;align-items:center;justify-content:center}.app-rail{min-height:0;display:flex;flex-direction:column;gap:.65rem;padding:.65rem .75rem;background:var(--surface-raised);border:1px solid var(--border);border-radius:8px;box-shadow:0 2px 16px #0003}.rail-hint{margin:0;font-size:.8rem;color:var(--text-muted);line-height:1.35}@media(max-width:900px){.app-main--editor{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,min(42vh,320px))}.app-rail{overflow-y:auto;-webkit-overflow-scrolling:touch}}.drop-zone{width:100%;max-width:520px;border-radius:14px;padding:2.5rem 1.5rem;text-align:center;background:#00000026;border:2px dashed rgba(255,255,255,.4);color:var(--text);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.drop-zone:hover{transform:translateY(-2px);border-color:#fffc;box-shadow:0 8px 28px #00000026}.drop-zone--disabled{opacity:.5;pointer-events:none}.drop-zone p{margin:0;font-size:.95rem;color:#ffffffbf}.file-label{display:inline-block;margin-top:.75rem;padding:.55rem 1.5rem;border-radius:10px;background:var(--match);color:#fff;font-weight:700;cursor:pointer;text-decoration:none;transition:filter .15s ease,transform .1s ease;box-shadow:0 3px 10px #0003}.file-label:hover{filter:brightness(1.15);transform:translateY(-1px);color:#fff}.file-label:active{transform:translateY(0)}.file-label input{display:none}.toolbar{display:flex;flex-wrap:wrap;gap:.5rem}.btn{padding:.45rem .85rem;border-radius:6px;border:1px solid var(--border-strong);background:var(--surface-card);color:var(--text);font-size:.85rem;font-family:inherit;font-weight:500;cursor:pointer}.btn:hover:not(:disabled){border-color:var(--hover-accent);background:var(--hover-accent-bg);color:#fff}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--ghost{background:transparent;border-color:var(--border)}.btn--ghost:hover:not(:disabled){border-color:var(--hover-accent);background:var(--hover-accent-bg)}.btn--secondary{border-color:var(--border-strong);color:#fff;background:#ffffff14}.btn--secondary:hover:not(:disabled){border-color:var(--hover-accent);background:var(--hover-accent-bg)}.btn--primary{background:var(--match);border-color:transparent;color:#fff;font-weight:700;text-decoration:none;display:inline-block;box-shadow:0 2px 10px #0003;transition:filter .15s ease,box-shadow .15s ease,transform .1s ease}.btn--primary:hover:not(:disabled){filter:brightness(1.15);box-shadow:0 4px 16px #7c3aed66;transform:translateY(-1px)}.video-stage-wrap{flex:1;align-self:stretch;width:100%;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}.video-stage{position:relative;width:100%;max-width:100%;max-height:100%;height:auto;margin:0;background:#000;border-radius:8px;overflow:hidden;border:1px solid var(--border);box-shadow:0 4px 24px #0000004d}.video-stage__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:#000}.video-stage__overlays{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.text-overlay{position:absolute;pointer-events:auto;cursor:grab;border:2px dashed transparent;border-radius:4px;display:flex;align-items:flex-start;justify-content:center;padding:2px;min-height:2rem;box-sizing:border-box}.text-overlay:active{cursor:grabbing}.text-overlay--selected{border-color:var(--match);box-shadow:0 0 0 1px #7c3aed80}.text-overlay__label{font-family:OverlayFont,Impact,sans-serif;font-weight:700;font-size:16px;color:#fff;line-height:1.1;text-align:center;white-space:pre-wrap;max-width:100%;width:100%;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 4px #000;overflow-wrap:anywhere}.text-overlay__resize{position:absolute;right:2px;bottom:2px;width:14px;height:14px;padding:0;border:none;background:linear-gradient(135deg,transparent 50%,var(--match) 50%,var(--match) 60%,transparent 60%);cursor:nwse-resize;pointer-events:auto}.editor-panel{flex-shrink:0}.editor-label{display:block;margin-bottom:.3rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}.editor-textarea{width:100%;padding:.45rem .55rem;border-radius:6px;border:1px solid var(--border);background:var(--surface-base);color:var(--text);font-size:.85rem;font-family:inherit;resize:none;min-height:3.25rem}.editor-textarea:focus{outline:none;border-color:var(--match);box-shadow:0 0 0 1px #7c3aed80}.editor-check{display:flex;align-items:center;gap:.45rem;margin-top:.45rem;font-size:.8rem;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none}.editor-check input{width:1rem;height:1rem;accent-color:var(--match);cursor:pointer}.editor-color-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}.editor-label--inline{margin-bottom:0;flex:1 1 auto;min-width:6rem}.editor-color-input{width:2.5rem;height:1.75rem;padding:0;border:1px solid var(--border);border-radius:6px;background:var(--surface-base);cursor:pointer}.editor-color-input:disabled{opacity:.45;cursor:not-allowed}.framing-picker{flex-shrink:0}.framing-picker h3,.render-section h3{margin:0 0 .4rem;font-family:var(--font-display);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.framing-grid{display:grid;gap:.45rem}.framing-grid--rail{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;gap:.35rem}.framing-card{flex:1 1 0;min-width:0;padding:.35rem .25rem;border-radius:6px;border:2px solid var(--border);background:var(--surface-card);cursor:pointer;text-align:center;color:inherit;font:inherit}.framing-card:hover{border-color:var(--hover-accent);background:var(--hover-accent-bg)}.framing-card--active{border-color:var(--match);background:#7c3aed26;box-shadow:0 0 0 1px #7c3aed59}.framing-silhouette{--silhouette-ar: 1;width:min(100%,calc(52px * var(--silhouette-ar)));aspect-ratio:var(--silhouette-ar);max-height:52px;margin:0 auto .25rem;border-radius:4px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}.framing-thumb{width:100%;height:100%;object-fit:contain}.framing-placeholder{width:100%;height:100%;min-height:36px;background:linear-gradient(145deg,var(--surface-card),var(--surface-base))}.framing-label{font-size:.62rem;line-height:1.2;color:var(--text-muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.render-section{flex-shrink:0;padding-top:.45rem;margin-top:auto;border-top:1px solid var(--border)}.render-hint{font-size:.72rem;color:var(--text-muted);margin:0 0 .5rem;line-height:1.35}.progress-wrap{margin-top:.5rem;height:6px;background:var(--surface-base);border-radius:3px;overflow:hidden;border:1px solid var(--border)}.progress-bar{height:100%;background:linear-gradient(90deg,var(--match),var(--pop));transition:width .2s ease}.ready-block{display:flex;flex-direction:column;align-items:center;gap:.45rem;margin-top:.5rem;width:100%}.ready-status{margin:0;font-size:.72rem;font-weight:700;line-height:1.3;color:var(--text);text-align:center}.error-text{color:var(--error);margin-top:.45rem;font-size:.8rem;line-height:1.35}#background-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.app-shell{position:relative;z-index:1}@keyframes animateCloud{0%{margin-left:-1000px}to{margin-left:100%}}.x1{animation:animateCloud 35s linear infinite;animation-delay:-10s;transform:scale(.65)}.x2{animation:animateCloud 20s linear infinite;animation-delay:-7s;transform:scale(.3)}.x3{animation:animateCloud 30s linear infinite;animation-delay:-18s;transform:scale(.5)}.x4{animation:animateCloud 18s linear infinite;animation-delay:-3s;transform:scale(.4)}.x5{animation:animateCloud 25s linear infinite;animation-delay:-14s;transform:scale(.55)}.cloud{background:linear-gradient(to bottom,#fff 5%,#f1f1f1);border-radius:100px;box-shadow:0 8px 5px #0000001a;height:120px;position:relative;width:350px;opacity:.25}.cloud:after,.cloud:before{background:#fff;content:"";position:absolute;z-index:-1;opacity:.25}.cloud:after{border-radius:100px;height:100px;left:50px;top:-50px;width:100px}.cloud:before{border-radius:200px;width:180px;height:180px;right:50px;top:-90px}