:root{--bg:#07080d;--ink:#eceef6;--mut:#8a92a8;--gl:rgba(255,255,255,.055);--gl2:rgba(255,255,255,.09);--ln:rgba(255,255,255,.1);--acc:#8f9cff;--dlg:#141825;--grad:linear-gradient(110deg,#6fd8ff,#8f7bff 55%,#ff8fd0);--ease:cubic-bezier(.22,1,.36,1);--sin:'Sinhala Sangam MN','Noto Sans Sinhala',sans-serif;color-scheme:dark}
body.light{--bg:#eef0f6;--ink:#151824;--mut:#5d667b;--gl:rgba(255,255,255,.74);--gl2:rgba(20,30,60,.07);--ln:rgba(20,30,60,.11);--acc:#4457e6;--dlg:#fff;color-scheme:light}
*{box-sizing:border-box;margin:0}
body{font:14px/1.5 'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);height:100vh;overflow:hidden;transition:background .4s}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mut{color:var(--mut)}.sm{font-size:12px;padding:0 4px}.grow{flex:1}
svg{width:16px;height:16px;flex:none}
.aurora{position:fixed;inset:0;overflow:hidden;z-index:0}
.aurora i{position:absolute;border-radius:50%;filter:blur(100px);opacity:.42;animation:drift 24s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:520px;height:520px;left:-8%;top:-12%;background:#3b4fd8}
.aurora i:nth-child(2){width:460px;height:460px;right:-6%;top:30%;background:#8a3ad0;animation-delay:-8s}
.aurora i:nth-child(3){width:380px;height:380px;left:35%;bottom:-18%;background:#0e9fb8;animation-delay:-15s}
body.light .aurora i{opacity:.28}
@keyframes drift{to{transform:translate(70px,50px) scale(1.15)}}
#glow{position:fixed;left:0;top:0;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,rgba(143,156,255,.15),transparent);transition:left .5s ease-out,top .5s ease-out}
#home,#editor{position:relative;z-index:1;height:100vh;display:none}
body[data-view=home] #home{display:block;overflow:auto;animation:in .6s var(--ease)}
body[data-view=editor] #editor{display:flex;flex-direction:column;animation:in .5s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}}
@keyframes fade{from{opacity:0}}
.glass{background:var(--gl);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--ln);box-shadow:0 14px 44px rgba(0,0,0,.25)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:11px;font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,transform .18s var(--ease),box-shadow .25s}
.btn:hover{background:var(--gl2)}.btn:active{transform:scale(.93)}
.btn.on{background:var(--acc);color:#0a0c14}
.btn.pri{background:var(--grad);color:#0a0c14;box-shadow:0 6px 22px rgba(143,123,255,.35)}.btn.pri:hover{box-shadow:0 8px 30px rgba(143,123,255,.55);transform:translateY(-1px)}
.btn.big{padding:13px 22px;font-size:15px;border-radius:14px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px 60px}
.hbar{display:flex;align-items:center;gap:6px;padding:22px 0}
.logo{display:flex;align-items:center;gap:9px;font:700 18px Sora,sans-serif;letter-spacing:.02em}.logo svg{width:30px;height:30px}.logo .thin{font-weight:500;color:var(--mut)}
.hero{padding:54px 0 46px;max-width:720px}
.hero h1{font:700 clamp(34px,6vw,62px)/1.08 Sora,sans-serif;letter-spacing:-.02em;margin-bottom:18px}
.hero p{color:var(--mut);font-size:16px;margin-bottom:26px;max-width:560px}
.rowh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.rowh h2{font:600 18px Sora,sans-serif}.rowh small{color:var(--mut);font-weight:400;font-size:13px}
.search{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;background:var(--gl);border:1px solid var(--ln);transition:border-color .25s,width .3s var(--ease);width:210px}
.search:focus-within{border-color:var(--acc);width:260px}.search input{background:none;border:0;outline:0;color:var(--ink);font:inherit;width:100%}
#grid{display:grid;grid-template-columns:repeat(auto-fill,232px);gap:20px;justify-content:start}
.card{width:232px;padding:6px;border-radius:18px;background:var(--gl);border:1px solid var(--ln);position:relative;text-align:left;cursor:pointer;overflow:hidden;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s;animation:pop .6s var(--ease) both;animation-delay:calc(var(--i)*55ms)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(143,156,255,.25),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.card:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 22px 50px rgba(0,0,0,.35)}.card:hover::before{opacity:1}
.card:active{transform:translateY(-3px) scale(.985)}
.thumb{height:250px;overflow:hidden;border-radius:12px;background:#fff;position:relative}
.thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,#fff)}
.mini{width:816px;padding:1in 1in 1in 1.5in;background:#fff;color:#111;transform:scale(.27);transform-origin:0 0;pointer-events:none}
.meta{padding:10px 8px 6px}.meta b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta small{color:var(--mut);font-size:12px}
.acts{position:absolute;top:14px;right:14px;display:flex;gap:6px;opacity:0;transform:translateY(-4px);transition:.25s;z-index:3}
.card:hover .acts{opacity:1;transform:none}
.acts button{padding:4px 10px;border-radius:99px;background:rgba(10,12,20,.82);color:#fff;font-size:11px;font-weight:600;backdrop-filter:blur(8px);transition:transform .15s}.acts button:active{transform:scale(.9)}
.card.new{display:grid;place-content:center;justify-items:center;gap:8px;min-height:330px;border-style:dashed;background:transparent}
.card.new .plus{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#0a0c14;font-size:28px;font-weight:300;transition:transform .5s var(--ease)}
.card.new:hover .plus{transform:rotate(90deg) scale(1.1)}
.bar{display:flex;align-items:center;gap:4px;margin:12px 12px 0;padding:6px 10px;border-radius:18px;flex:none}
.ttl{font-weight:600;padding:5px 10px;border-radius:10px;max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .2s}.ttl:hover{background:var(--gl2)}
.sv{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);margin-left:6px}
.sv i{width:7px;height:7px;border-radius:50%;background:#4ade80;transition:background .3s}.sv.busy i{background:#fbbf24;animation:pulse .8s infinite}
@keyframes pulse{50%{transform:scale(1.7);opacity:.5}}
.zoom{display:flex;align-items:center;font-size:12px;color:var(--mut)}.zoom .btn{padding:4px 9px;font-size:16px}
.dd{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;padding:6px;border-radius:14px;display:none;transform-origin:top right;z-index:40;background:var(--dlg)}
.menu.show{display:block;animation:pop .25s var(--ease)}
.menu button{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:9px;font-size:13px;transition:background .15s,padding .2s}.menu button:hover{background:var(--gl2);padding-left:15px}
.work{display:flex;flex:1;min-height:0;gap:12px;padding:12px}
.side{width:260px;flex:none;border-radius:18px;overflow:auto;padding:12px;animation:in .45s var(--ease)}.side.hide{display:none}
.h{font-size:12px;font-weight:700;color:var(--mut);margin:14px 4px 6px}.side>.h:first-child{margin-top:2px}
.row{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;font-size:12.5px;cursor:pointer;transition:background .2s,transform .2s var(--ease)}.row:hover{background:var(--gl2);transform:translateX(3px)}
.row .n{color:var(--mut);width:18px;flex:none}.row .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-transform:uppercase}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:center}
.stats div{background:var(--gl2);border-radius:12px;padding:9px 4px}.stats b{display:block;font:700 18px Sora,sans-serif}.stats small{color:var(--mut);font-size:11px}
.tb{display:flex;flex-direction:column;gap:2px}.tb .btn{justify-content:space-between;font-weight:500}.tb small{color:var(--mut);font-size:11px}.tb .btn.on small{color:#0a0c14}
.chip{display:inline-block;padding:2px 9px;margin:3px 2px;border-radius:99px;font-size:11px;border:1px solid var(--ln);animation:pop .3s var(--ease)}
.keys{font-size:11px;color:var(--mut);margin:18px 4px 4px;line-height:1.6}
#M{flex:1;min-width:0;overflow:auto;border-radius:18px}
.sp{font:12pt/1.4 'Courier Prime',var(--sin),monospace}
.sp .blk{white-space:pre-wrap;word-break:break-word;margin:0 0 1em;outline:none;min-height:1.4em}
.sp .blk[data-t=scene]{font-weight:700;text-transform:uppercase;margin-top:1.6em}
.sp .blk[data-t=char]{margin:0 0 0 2.2in;width:3.3in;text-transform:uppercase}
.sp .blk[data-t=paren]{margin:0 0 0 1.6in;width:2.4in}
.sp .blk[data-t=dialogue]{margin-left:1in;width:3.5in}
.sp .blk[data-t=trans]{text-align:right;text-transform:uppercase}
#page{width:8.5in;min-height:11in;margin:24px auto;padding:1in 1in 1in 1.5in;background:#fff;color:#111;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
#page .blk{transition:opacity .3s,background .3s;border-radius:3px}
#page .blk.cur{background:linear-gradient(90deg,rgba(80,110,255,.09),transparent)}
#page .blk.new{animation:pop .35s var(--ease)}
.blk.e::before{color:#b3b7c6;pointer-events:none}
.blk.e[data-t=scene]::before{content:'INT. LOCATION - DAY'}.blk.e[data-t=action]::before{content:'Describe what we see…'}
.blk.e[data-t=char]::before{content:'CHARACTER'}.blk.e[data-t=paren]::before{content:'(parenthetical)'}
.blk.e[data-t=dialogue]::before{content:'Dialogue…'}.blk.e[data-t=trans]::before{content:'CUT TO:'}
.fm #page .blk{opacity:.22}.fm #page .blk.cur{opacity:1}.fm #page{padding-bottom:5in}.fm #L,.fm #R{display:none}
#badge{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);opacity:0;transition:.3s var(--ease);pointer-events:none;padding:8px 18px;border-radius:99px;font-size:12px;font-weight:600;z-index:30}
#badge.show{opacity:1;transform:translate(-50%,0)}
#toast{position:fixed;top:78px;right:20px;z-index:60;padding:10px 16px;border-radius:14px;font-size:13px;opacity:0;transform:translateX(24px);transition:.4s var(--ease);pointer-events:none;background:var(--dlg)}
#toast.show{opacity:1;transform:none}
#modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:rgba(3,4,8,.6);backdrop-filter:blur(8px)}
#modal.show{display:grid;animation:fade .25s}
.dlg{width:430px;max-width:92vw;padding:24px;border-radius:22px;background:var(--dlg);border:1px solid var(--ln);box-shadow:0 40px 100px rgba(0,0,0,.5);animation:pop .4s var(--ease)}
.dlg h3{font:700 20px Sora,sans-serif;margin-bottom:14px}.dlg label{display:block;font-size:12px;color:var(--mut);margin:12px 0 5px}
.fld{width:100%;background:var(--gl2);border:1px solid var(--ln);border-radius:11px;padding:9px 11px;color:var(--ink);font:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.fld:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(143,156,255,.2)}
.frow{display:flex;gap:8px}.hint{margin-top:10px;padding:10px 12px;border-radius:11px;background:var(--gl2);font-size:15px}
.mact{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.drop{position:fixed;width:0;height:0;pointer-events:none;z-index:999}
.drop::before,.drop::after{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(143,190,255,.85);box-shadow:0 0 12px rgba(143,190,255,.45),inset 0 0 8px rgba(143,190,255,.3);animation:ring .85s cubic-bezier(.2,.7,.3,1) forwards}
.drop::after{animation-delay:.12s;opacity:0}
.drop i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#bcd4ff;animation:ring2 .5s ease-out forwards}
@keyframes ring{from{transform:scale(.1);opacity:1}to{transform:scale(5);opacity:0}}
@keyframes ring2{to{transform:scale(3.5);opacity:0}}
#printRoot{display:none}
@media (max-width:900px){.lbl{display:none}.side{position:fixed;z-index:20;top:70px;bottom:12px;left:12px;background:var(--dlg)}#R{left:auto;right:12px}.hero{padding-top:30px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.aurora i{animation:none}.drop{display:none}}
@media print{
 @page{size:letter;margin:1in 1in 1in 1.5in}
 @page script{@top-right{content:counter(page) ".";font:12pt 'Courier Prime',monospace}}
 @page script:first{@top-right{content:none}}
 @page cover{@top-right{content:none}}
 html,body{height:auto!important;overflow:visible!important;background:#fff!important}
 body>*:not(#printRoot){display:none!important}
 #printRoot{display:block;color:#000;background:#fff}
 .tp{page:cover;break-after:page;height:8.8in;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
 .tp h1{font-size:24pt;text-transform:uppercase;line-height:1.3;margin-bottom:.6in}.tp .ct{margin-top:1.2in;font-size:11pt}
 .pb{page:script;counter-reset:page 1}
 .sp .blk{orphans:2;widows:2}
 .blk[data-t=scene],.blk[data-t=char],.blk[data-t=paren]{break-after:avoid}
}