@font-face{font-family:"Noto Sans Devanagari";src:url(/motion-editor/NotoSansDevanagari_800ExtraBold.ttf) format("truetype");font-weight:600 900;font-display:swap}
:root{color:#171717;background:#f2f3f6;font-family:"Noto Sans Devanagari","Nirmala UI",sans-serif}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}
header{color:#fff;background:linear-gradient(120deg,#6f0610,#c20d19);align-items:flex-start;gap:20px;padding:22px max(20px,4vw);display:flex}
header span{letter-spacing:1.4px;color:#ffd75a;font-size:12px;font-weight:900}header h1{margin:4px 0;font-size:30px}header p{opacity:.88;margin:0}
.back{color:#fff;white-space:nowrap;border:1px solid #fff5;border-radius:9px;padding:9px 12px;font-weight:800;text-decoration:none}
nav{color:#fff;z-index:20;background:#151515;padding:12px max(20px,4vw);position:sticky;top:0}nav label{align-items:center;gap:12px;font-weight:800;display:flex}nav select{border-radius:8px;flex:1;max-width:900px;padding:9px}
main{grid-template-columns:minmax(360px,1.05fr) minmax(360px,.95fr);gap:22px;max-width:1500px;margin:auto;padding:22px;display:grid}
.preview-panel,.editor-panel{background:#fff;border:1px solid #ddd;border-radius:16px;padding:16px;box-shadow:0 7px 24px #00000010}.preview-panel{align-self:start;position:sticky;top:72px}
.motion-frame{background:#080808;border:6px solid #b10815;margin:auto;position:relative;overflow:hidden;box-shadow:0 12px 30px #0005}.motion-frame.horizontal{aspect-ratio:16/9;width:100%}.motion-frame.vertical{aspect-ratio:9/16;width:auto;max-width:100%;max-height:76vh}.motion-frame video{object-fit:contain;background:#000;width:100%;height:100%}
.frame-edge{pointer-events:none;border:3px solid #fff9;position:absolute;inset:0}.frame-logo{filter:drop-shadow(0 2px 3px #0008);width:16%;animation:.55s ease-out logo-in;position:absolute;top:2.3%;right:2.3%}
.headline-strap{text-align:center;background:#ffe600;border-block:3px solid #bd0612;padding:.55% 3%;position:absolute;left:0;right:0;overflow:hidden;transition:top .25s ease,bottom .25s ease}.headline-strap strong{font-size:clamp(11px,1.55vw,25px);font-weight:900;line-height:1.08;animation:.6s ease-out strap-in;display:block}.headline-strap i{background:#fff8;width:8%;animation:2.8s infinite shine;position:absolute;top:0;bottom:0;transform:skew(-20deg)}
.position-upper .headline-strap{top:17%;bottom:auto}.position-middle .headline-strap{top:45%;bottom:auto}.position-above-ticker .headline-strap{top:auto;bottom:14.5%}
.lower-third{color:#fff;background:#111e;border-left:7px solid #ffd33d;min-width:46%;max-width:75%;animation:.42s ease-out lower-in;position:absolute;bottom:27%;left:5%}.lower-third strong,.lower-third span{padding:.45% 2.4%;font-weight:900;display:block}.lower-third strong{background:#b60712;font-size:clamp(10px,1.5vw,23px)}.lower-third span{color:#ffd75a;font-size:clamp(9px,1.12vw,17px)}
.ticker{background:#ffd33d;border-top:4px solid #a80812;align-items:center;height:9%;display:flex;position:absolute;bottom:7%;left:0;right:0;overflow:hidden}.ticker b{color:#fff;z-index:2;background:#b10815;align-items:center;height:100%;padding:0 3%;display:flex}.ticker span{white-space:nowrap;padding-left:100%;font-weight:900;animation:15s linear infinite ticker}.social-strip{color:#fff;background:#090909;align-items:center;height:7%;padding:0 3%;font-weight:800;display:flex;position:absolute;bottom:0;left:0;right:0}
.preset-breaking-red .headline-strap{background:#fff}.preset-exclusive-gold{border-color:#730b15}.preset-exclusive-gold .headline-strap{background:#f5c84b;border-color:#730b15}.preset-exclusive-gold .lower-third strong{background:#730b15}
.preview-note{color:#666;font-size:13px}.editor-panel{gap:13px;display:grid}.editor-panel label{gap:6px;font-weight:800;display:grid}.editor-panel input,.editor-panel select,.editor-panel textarea{background:#fff;border:1px solid #c9cbd0;border-radius:9px;width:100%;padding:10px}.grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.story{border-left:5px solid #b10815;padding-left:12px}.story span{color:#a10812;font-size:12px;font-weight:900}.story h2{margin:5px 0}.story p{color:#666;margin:0}fieldset{border:1px solid #ddd;border-radius:12px;gap:12px;display:grid}legend{font-weight:900}.render{color:#fff;cursor:pointer;background:#b10815;border:0;border-radius:10px;padding:14px;font-weight:900}.render:disabled{opacity:.55}#message{max-width:1450px;margin:14px auto 0;padding:0 22px;font-weight:800}#message:not(:empty){padding-block:12px}.success{color:#087638}.error{color:#a10812}.working{color:#8a5a00}.login,.loading{text-align:center;background:#fff;border-radius:16px;max-width:620px;margin:12vh auto;padding:30px}.login a{color:#fff;background:#a10812;border-radius:8px;padding:10px 15px;text-decoration:none;display:inline-block}
@keyframes logo-in{0%{opacity:0;transform:translate(140%)}}@keyframes strap-in{0%{opacity:0;transform:translate(100%)}}@keyframes lower-in{0%{opacity:0;transform:translate(-120%)}}@keyframes shine{0%{left:-15%}to{left:115%}}@keyframes ticker{to{transform:translate(-100%)}}
@media (width<=900px){main{grid-template-columns:1fr;padding:10px}.preview-panel{position:static}.grid{grid-template-columns:1fr}header{flex-direction:column;padding:14px}.back{order:2}nav label{flex-direction:column;align-items:stretch}.motion-frame.vertical{max-height:65vh}.headline-strap strong{font-size:clamp(10px,3vw,20px)}}