@font-face{font-family:"Unbounded";src:url(/assets/fonts/Unbounded.ttf);font-weight:200 900;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/Inter.ttf);font-weight:100 900;font-display:swap}
:root{--paper:#f4f0e8;--surface:#fbf9f4;--ink:#0d111c;--ink2:#2b3040;--mute:#6a6f7e;--line:rgba(13,17,28,.13);--line2:rgba(13,17,28,.26);--wax:#b3261e;--ok:#17603f;--pad:clamp(18px,4.6vw,64px);--r:14px;
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 44px -28px rgba(13,17,28,.38)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);scroll-behavior:smooth}
body{font-family:"Inter",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;font-size:16px;line-height:1.5;
  background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .05  0 0 0 0 .06  0 0 0 0 .1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:60;pointer-events:none}
body.noink #c{display:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.skip{position:absolute;left:-999px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--wax);outline-offset:3px}
.muted{color:var(--mute)}
/* header */
#top{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:14px var(--pad);transition:background .25s,border-color .25s,color .25s;border-bottom:1px solid transparent;color:var(--ink)}
body:not(.home) #top,body.home.scrolled #top{background:rgba(244,240,232,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:var(--line)}
body.home:not(.scrolled) #top{color:#f4f0e8}
.mark{font:700 1.15rem/1 "Unbounded";letter-spacing:-.02em;display:flex;align-items:center;gap:.6rem;text-decoration:none}
.mark i{display:block;width:.8rem;height:1.05rem;border-radius:50%/62% 62% 38% 38%;background:currentColor}
nav{display:flex;gap:clamp(12px,2vw,26px);align-items:center;font:500 .88rem/1 "Inter"}
nav a{text-decoration:none;opacity:.78;white-space:nowrap}
nav a:hover,nav a.on{opacity:1}
nav a.on{box-shadow:0 2px 0 currentColor}
nav a.cta-mini{border-radius:10px;padding:.65rem 1rem;opacity:1;box-shadow:none;background:var(--ink);color:var(--paper)}
body.home:not(.scrolled) nav a.cta-mini{background:#f4f0e8;color:var(--ink)}
nav select{background:transparent;border:0;font-weight:500;cursor:pointer;opacity:.8}
.pill{border:1.5px solid currentColor;border-radius:999px;padding:.5rem .8rem;opacity:1!important;display:inline-flex;gap:.5rem;align-items:center;font-size:.8rem}
.pill::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--wax);animation:blink 1.1s infinite}
.pill[hidden]{display:none!important}
@keyframes blink{50%{opacity:.25}}
/* frame */
main{position:relative;outline:none}
.page{padding:clamp(86px,12vh,118px) var(--pad) 90px;max-width:1240px;margin:0 auto}
.page-narrow{max-width:1100px}
.kicker{font:600 .72rem/1 "Inter";letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:1rem;display:flex;gap:.8rem;align-items:center}
.kicker::before{content:"";width:1.8rem;height:1.5px;background:currentColor}
h1,h2,h3{font-family:"Inter";font-weight:800;letter-spacing:-.035em}
h1.page-title{font-size:clamp(2rem,4vw,3.4rem);line-height:1.04;margin-bottom:.5em;overflow-wrap:anywhere}
h1.big{font-size:clamp(2.8rem,8vw,8rem);line-height:.94;letter-spacing:-.05em}
h2.sec{font-size:clamp(2rem,4.4vw,4rem);line-height:1;max-width:18ch;letter-spacing:-.045em}
/* buttons / fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:46px;padding:0 20px;border-radius:12px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 .92rem/1 "Inter";cursor:pointer;text-decoration:none;transition:transform .15s,background .2s,color .2s,box-shadow .2s}
.btn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.solid{background:var(--ink);color:var(--paper);box-shadow:0 14px 26px -16px rgba(13,17,28,.7)}
.btn.solid:hover:not(:disabled){background:var(--wax);border-color:var(--wax)}
.btn.small{height:38px;padding:0 14px;font-size:.84rem;border-radius:10px}
.btn.danger{color:var(--wax);border-color:var(--wax)}
.btn.danger:hover:not(:disabled){background:var(--wax);color:#fff}
.btn.light{border-color:#f4f0e8;color:#f4f0e8}
.btn.light:hover:not(:disabled){background:#f4f0e8;color:var(--ink)}
.btn.big{height:56px;padding:0 28px;font-size:1rem;border-radius:14px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.field{display:grid;gap:.45rem;margin-bottom:1rem}
.field>label,.label{font:600 .74rem/1.2 "Inter";letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
input[type=text],input[type=search],select.sel,textarea{width:100%;border:1.5px solid var(--line2);border-radius:12px;background:var(--surface);padding:.8rem .95rem;font:400 1rem/1.4 "Inter";transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none}
textarea{min-height:5.6rem;resize:vertical}
input[type=color]{width:3rem;height:2.5rem;border:1.5px solid var(--line2);border-radius:10px;background:var(--surface);padding:3px;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--ink)}
.seg{display:inline-flex;flex-wrap:wrap;gap:3px;background:rgba(13,17,28,.07);border-radius:12px;padding:3px}
.seg button{border:0;background:none;padding:.5rem .85rem;border-radius:9px;font:500 .84rem/1 "Inter";cursor:pointer;color:var(--ink2)}
.seg button.on{background:var(--ink);color:var(--paper);box-shadow:0 6px 14px -8px rgba(13,17,28,.8)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.6rem}
.chip{border:1px solid var(--line2);border-radius:999px;background:var(--surface);padding:.42rem .8rem;font:500 .8rem/1 "Inter";cursor:pointer;transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2.2vw,30px);box-shadow:var(--shadow)}
/* studio */
.studio{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,64px);align-items:start}
.steps-form{display:grid;gap:18px}
.step-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2vw,26px);box-shadow:var(--shadow)}
.step-card>h2{font:800 1.12rem/1.2 "Inter";letter-spacing:-.025em;margin-bottom:1rem;display:flex;gap:.7rem;align-items:center}
.step-card>h2 b{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ink);color:var(--paper);font:700 .72rem "Unbounded"}
.drop{display:grid;place-items:center;text-align:center;gap:.4rem;min-height:9rem;border:1.5px dashed var(--line2);border-radius:14px;background:rgba(13,17,28,.025);padding:1.2rem;cursor:pointer;transition:background .2s,border-color .2s}
.drop:hover,.drop.over{border-color:var(--ink);background:rgba(13,17,28,.06)}
.drop b{font:800 1.1rem "Inter";letter-spacing:-.02em}
.vsel{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:center}
.vsel video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--ink);border-radius:10px}
.vlist{display:grid;gap:.35rem;max-height:13rem;overflow:auto;margin-top:.8rem;padding-top:.6rem;border-top:1px solid var(--line)}
.vlist button{display:flex;justify-content:space-between;gap:1rem;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:.55rem .75rem;font:400 .85rem/1.3 "Inter";cursor:pointer}
.vlist button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.level{border:1.5px solid var(--line);border-radius:12px;background:var(--surface);padding:.85rem;text-align:left;cursor:pointer;display:grid;gap:.35rem}
.level b{font:700 .9rem "Inter";letter-spacing:-.01em}
.level span{font:400 .8rem/1.4 "Inter";color:var(--mute)}
.level.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}
.brand{display:flex;gap:.8rem;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);padding:.65rem;cursor:pointer;text-align:left;text-decoration:none}
.brand img{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;background:var(--paper)}
.brand.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.brand small{display:block;color:var(--mute);font-size:.76rem}
.dots{display:inline-flex;gap:.25rem;margin-left:.4rem}
.dots i{width:.7rem;height:.7rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
details.adv{border-top:1px solid var(--line);padding-top:.9rem;margin-top:.4rem}
details.adv summary{cursor:pointer;font:600 .9rem "Inter";list-style:none;display:flex;justify-content:space-between}
details.adv summary::after{content:"+";font-weight:400;font-size:1.2rem;line-height:1}
details.adv[open] summary::after{content:"–"}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.6rem;margin-top:1rem}
.bar{height:.5rem;border-radius:999px;background:rgba(13,17,28,.1);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);width:0;transition:width .5s;border-radius:999px}
.ctabar{position:sticky;bottom:14px;z-index:20;margin-top:6px}
.ctabar .btn{width:100%}
/* the live preview */
.pv{position:sticky;top:92px;display:grid;gap:.9rem}
.pv h3{font:700 .72rem "Inter";letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.phone{border-radius:34px;padding:7px;background:var(--ink);box-shadow:0 30px 60px -30px rgba(13,17,28,.7)}
.screen{position:relative;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#1b2030;container-type:inline-size}
.screen>#pvmedia,.screen>#pvover{position:absolute;inset:0}
.screen img,.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pv-cap{position:absolute;left:0;right:0;display:flex;justify-content:center;transition:top .25s}
.pv-cap span{display:inline-block;max-width:90%;text-align:center;line-height:1.18;white-space:normal;transition:all .25s}
.pv-cap .w{display:inline-block;transition:color .2s,background .2s,transform .2s,opacity .2s}
.pv-card{position:absolute;left:8%;right:8%;top:11%;padding:5cqw 6cqw;display:grid;gap:2.2cqw;transition:all .3s}
.pv-card strong{font-size:5.2cqw;line-height:1.1}
.pv-card p{font-size:4.2cqw;line-height:1.2;display:flex;gap:2cqw;align-items:center}
.pv-card p::before{content:"";width:3.6cqw;height:3.6cqw;border-radius:50%;background:currentColor;opacity:.9;flex:none}
.pv-meta{display:grid;gap:.25rem}
.pv-meta b{font:800 1.05rem "Inter";letter-spacing:-.02em}
.pv-meta span{font-size:.84rem;color:var(--mute)}
/* style gallery */
.styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.style{display:grid;gap:.4rem;text-align:left;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);padding:.5rem;cursor:pointer;align-content:start;transition:border-color .15s,transform .15s}
.style:hover{transform:translateY(-2px)}
.style.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.style b{font:700 .84rem "Inter";letter-spacing:-.01em;padding:0 .2rem}
.style.auto{background:var(--ink);color:var(--paper);align-content:end;min-height:7.4rem}
.style.auto span{font:400 .76rem/1.35 "Inter";opacity:.8;padding:0 .2rem}
.sp{border-radius:9px;padding:.6rem .7rem;display:grid;gap:.2rem;position:relative;min-height:4.8rem;border:1px solid rgba(0,0,0,.12)}
.sp strong{font-size:1.7rem;line-height:1}
.sp small{font-size:.74rem}
.sp mark{padding:0 .22rem;border-radius:3px}
.sp u{text-decoration-thickness:2.5px;text-underline-offset:3px}
.sp em{font-style:normal;font-weight:800}
.sp i{position:absolute;right:.5rem;top:.5rem;width:.75rem;height:.75rem;border-radius:50%}
.sp i+i{right:1.45rem}
.sp.k-paper,.sp.k-accent{box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.sp.k-outline{border-style:dashed}
.fontbox{margin-top:.8rem;display:grid;gap:.6rem}
.fprev{font-size:1.5rem;line-height:1.25;padding:.5rem .1rem;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.flist{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.35rem;max-height:15rem;overflow:auto}
.flist button{display:flex;justify-content:space-between;gap:.5rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:.45rem .6rem;font:400 .82rem/1.2 "Inter";cursor:pointer;text-align:left}
.flist button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.flist button i{font-style:normal;opacity:.6;font-size:.7rem}
.rowc{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:flex-end}
/* library */
.toolbar{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;margin:1.2rem 0 1.6rem}
.toolbar input[type=search]{max-width:20rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(12px,1.6vw,20px)}
.card{display:block;text-decoration:none;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-4px)}
.card .ph{aspect-ratio:9/16;background:var(--ink);position:relative;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.card .ph .st{position:absolute;left:.6rem;top:.6rem}
.card .bd{padding:.8rem .9rem 1rem;display:grid;gap:.3rem}
.card h3{font:700 .92rem/1.25 "Inter";letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card p{font:400 .78rem/1.4 "Inter";color:var(--mute)}
.st{display:inline-block;border-radius:999px;background:var(--paper);padding:.3rem .6rem;font:700 .64rem/1 "Inter";letter-spacing:.06em;text-transform:uppercase}
.st.ok{background:var(--ink);color:var(--paper)}
.st.err{background:var(--wax);color:#fff}
.empty{border:1.5px dashed var(--line2);border-radius:18px;padding:clamp(30px,6vw,70px);text-align:center;background:var(--surface);display:grid;gap:1rem;justify-items:center}
.empty h2{font:800 1.5rem "Inter";letter-spacing:-.03em}
/* video page */
.vgrid{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}
.player video{width:100%;aspect-ratio:9/16;background:var(--ink);border-radius:18px;display:block;object-fit:contain;box-shadow:0 30px 60px -34px rgba(13,17,28,.7)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0}
.tabs button{border:1px solid var(--line2);border-radius:999px;background:var(--surface);padding:.4rem .8rem;font:700 .74rem "Inter";cursor:pointer}
.tabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.hist{display:grid;gap:.7rem;margin-top:1rem}
.hist div{border-left:3px solid var(--ink);padding:.2rem 0 .2rem .8rem;font-size:.9rem;line-height:1.45}
.hist em{font-style:normal;color:var(--mute);font-size:.8rem;display:block}
.res{margin-top:.8rem;border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;background:var(--paper);font-size:.92rem;line-height:1.5}
.res .miss{color:var(--wax)}
.scene{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;padding:.7rem 0;border-top:1px solid var(--line);align-items:start}
.scene .tm{font:600 .72rem "Inter";color:var(--mute);grid-column:2}
.scene.off{opacity:.45}
.scene input[type=text]{margin-top:.4rem}
.cost{font:600 .84rem/1.4 "Inter"}
.err-box{border:1.5px solid var(--wax);color:var(--wax);border-radius:12px;padding:.8rem 1rem;margin:.8rem 0;font-size:.9rem;white-space:pre-wrap;word-break:break-word;background:rgba(179,38,30,.05)}
/* profiles */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.pcard{display:grid;gap:.5rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:1.1rem;box-shadow:var(--shadow);text-align:left}
.pcard img{width:3.4rem;height:3.4rem;border-radius:50%;object-fit:cover;background:var(--paper)}
.pcard h3{font:800 1.05rem "Inter";letter-spacing:-.03em}
/* home */
#hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(60px,10vh,110px);color:#f4f0e8;background:#0b0e16;overflow:hidden;isolation:isolate}
.wall{position:absolute;inset:-6% -2% -6% -2%;display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:14px;transform:rotate(-4deg) scale(1.08);z-index:-2}
.wall .col{display:grid;gap:14px;align-content:start;animation:drift 46s ease-in-out infinite alternate}
.wall .col:nth-child(even){animation-direction:alternate-reverse;animation-duration:58s}
.wall .col:nth-child(3n){animation-duration:70s}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-22%)}}
.wall video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;display:block;background:#161b28}
.scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,14,22,.94) 0%,rgba(11,14,22,.82) 38%,rgba(11,14,22,.38) 74%,rgba(11,14,22,.55) 100%),linear-gradient(0deg,rgba(11,14,22,.9),rgba(11,14,22,0) 40%)}
#hero .kicker{color:rgba(244,240,232,.7)}
.lede{max-width:34rem;font:400 clamp(1rem,1.2vw,1.15rem)/1.55 "Inter";color:rgba(244,240,232,.86)}
.row{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);align-items:center;margin-top:clamp(20px,3.6vh,38px)}
.hint{font:500 .84rem/1.4 "Inter";color:rgba(244,240,232,.6)}
.scroll{position:absolute;right:var(--pad);bottom:clamp(20px,4vh,40px);font:500 .7rem/1 "Inter";letter-spacing:.2em;text-transform:uppercase;display:flex;gap:.7rem;align-items:center;color:rgba(244,240,232,.6)}
.scroll::after{content:"";width:1px;height:2.4rem;background:currentColor}
.blk{position:relative;padding:clamp(70px,11vh,130px) var(--pad);max-width:1280px;margin:0 auto}
.band{background:var(--ink);color:#f4f0e8;max-width:none}
.band .kicker{color:rgba(244,240,232,.6)}
.ba{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,6vw,100px);align-items:center;max-width:1100px;margin:0 auto}
.ba-phone{position:relative;border-radius:36px;padding:8px;background:#1d2332;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.ba-screen{position:relative;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#000;touch-action:none;cursor:ew-resize}
.ba-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 0 0 50%)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#f4f0e8;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.ba-handle::after{content:"<>";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#f4f0e8;color:#0d111c;display:grid;place-items:center;font:700 .9rem "Inter"}
.ba-tag{position:absolute;top:14px;padding:.35rem .6rem;border-radius:999px;font:700 .66rem/1 "Inter";letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.6);color:#fff}
.ba-tag.l{left:14px}.ba-tag.r{right:14px}
.ba p{font:400 1.08rem/1.6 "Inter";color:rgba(244,240,232,.8);max-width:30rem;margin-top:1.2rem}
#ornek{padding:clamp(60px,10vh,120px) 0 clamp(40px,8vh,90px)}
#ornek .hd{padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin:0 auto clamp(24px,4vh,48px);max-width:1280px}
#ornek .sub{max-width:26rem;color:var(--ink2)}
.reel-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(180px,20vw,290px);gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x proximity;padding:0 var(--pad) 8px;scrollbar-width:none}
.reel-row::-webkit-scrollbar{display:none}
figure{scroll-snap-align:start}
figure video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--ink);border-radius:16px;box-shadow:var(--shadow)}
figcaption{margin-top:.7rem;font:600 .78rem/1.3 "Inter";display:flex;gap:.6rem;color:var(--ink2)}
figcaption b{font-family:"Unbounded";font-weight:600;color:var(--mute)}
.can{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:clamp(30px,5vh,56px)}
.can li{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.5rem;display:grid;grid-template-columns:2.6rem 1fr;gap:0 .8rem;box-shadow:var(--shadow)}
.can b{font:700 .8rem/1.6 "Unbounded";color:var(--mute)}
.can h3{font:800 1.18rem/1.2 "Inter";letter-spacing:-.03em;margin-bottom:.45rem}
.can p{font:400 .96rem/1.55 "Inter";color:var(--ink2)}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:clamp(30px,5vh,56px)}
.step{border-top:1.5px solid rgba(244,240,232,.4);padding-top:1.3rem}
.step b{display:block;font:700 clamp(3rem,6vw,5.5rem)/.9 "Unbounded";letter-spacing:-.06em;color:rgba(244,240,232,.9)}
.step h3{font:800 1.35rem/1.1 "Inter";letter-spacing:-.03em;margin:1rem 0 .5rem}
.step p{color:rgba(244,240,232,.75);max-width:22rem}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(30px,5vh,56px);align-items:stretch}
.pack{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow)}
.pack.hot{background:var(--ink);color:#f4f0e8;border-color:var(--ink);transform:translateY(-8px)}
.pack h3{font:700 .8rem/1 "Inter";letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pack.hot h3{color:rgba(244,240,232,.7)}
.price{font:800 clamp(3rem,4.6vw,4.8rem)/.9 "Inter";letter-spacing:-.06em}
.price small{font:600 1rem "Inter";letter-spacing:0;margin-left:.3rem;opacity:.7}
.per{font:500 .82rem/1.4 "Inter";color:var(--mute)}
.pack.hot .per{color:rgba(244,240,232,.65)}
.pack ul{list-style:none;display:grid;gap:.6rem;font:400 .95rem/1.4 "Inter";margin:.4rem 0 1.2rem}
.pack li::before{content:"+  ";font-weight:700}
.pack .btn{margin-top:auto}
.pack.hot .btn{background:#f4f0e8;color:var(--ink);border-color:#f4f0e8}
.pack.hot .btn:hover{background:var(--wax);border-color:var(--wax);color:#fff}
.tag{align-self:flex-start;font:700 .66rem/1 "Inter";letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:.45rem .7rem;background:var(--wax);color:#fff}
.note{margin-top:1.4rem;font:500 .8rem/1.5 "Inter";color:var(--mute);max-width:46rem}
details.q{border-top:1px solid var(--line2);padding:1.2rem 0}
details.q:last-of-type{border-bottom:1px solid var(--line2)}
details.q summary{list-style:none;cursor:pointer;font:700 clamp(1.05rem,1.5vw,1.3rem)/1.25 "Inter";letter-spacing:-.025em;display:flex;justify-content:space-between;gap:1rem}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1}
details.q[open] summary::after{content:"–"}
details.q p{margin-top:.8rem;max-width:40rem;color:var(--ink2)}
.faq{max-width:56rem;margin-top:clamp(26px,4vh,48px)}
#son{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
#son h2{max-width:none;font-size:clamp(2.4rem,7vw,6.4rem)}
footer.f{padding:0 var(--pad) 28px;display:flex;justify-content:space-between;gap:1rem;font:500 .78rem/1.4 "Inter";color:var(--mute);max-width:1280px;margin:0 auto}
#toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:70;display:grid;gap:.5rem}
.toast{background:var(--ink);color:var(--paper);padding:.8rem 1.1rem;border-radius:12px;font:500 .88rem "Inter";box-shadow:0 18px 30px -16px rgba(0,0,0,.6)}
#veil{position:fixed;inset:0;z-index:80;display:grid;place-items:center;text-align:center;opacity:0;pointer-events:none;transition:opacity .5s;color:var(--paper)}
#veil.on{opacity:1;pointer-events:auto}
#veil b{display:block;font:800 clamp(1.6rem,4vw,3.4rem)/1.05 "Inter";letter-spacing:-.04em}
#veil small{display:block;margin-top:.9rem;font:500 .9rem/1.4 "Inter";opacity:.8}
@media (max-width:1000px){.studio{grid-template-columns:1fr}.pv{position:static;order:-1;max-width:340px;margin:0 auto 6px}}
@media (max-width:900px){
  .can,.steps3,.packs,.grid2,.vgrid,.levels,.ba{grid-template-columns:1fr}
  .pack.hot{transform:none}
  nav a:not(.cta-mini):not(.pill){display:none}
  .scroll{display:none}#ornek .hd{flex-direction:column;align-items:flex-start}
  .ba-phone{max-width:320px;margin:0 auto}
}
@media (max-width:560px){nav #nav-profiles{display:none}.mark span{display:none}.wall{--cols:2}}
@media (prefers-reduced-motion:reduce){.wall .col{animation:none}html{scroll-behavior:auto}.pill::before{animation:none}}

/* ---------- studio: caption fonts, opener / closer gallery, brand locks ---------- */
.pv-cap{pointer-events:auto;cursor:grab;touch-action:none}
.pv-cap.drag{cursor:grabbing;transition:none}
.pv-cap.drag span{outline:2px dashed rgba(255,255,255,.75);outline-offset:6px}
.pvtabs{width:100%;margin-bottom:.8rem}.pvtabs button{flex:1}
.pv-strip{position:absolute;inset:0;overflow:hidden;background:#0d111c}
.pv-strip i{display:block;width:1200%;height:100%;background-size:100% 100%;background-repeat:no-repeat;animation:strip 2.8s steps(12) infinite}
@keyframes strip{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.pv-strip i{animation:none;transform:translateX(-50%)}}
.fontpick{margin-top:1.1rem;border:1px solid var(--line);border-radius:14px;padding:1rem}
.fonthead{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.fonthead h3{font:700 1.05rem Unbounded,sans-serif;letter-spacing:-.02em}
.fontcur{font-size:.86rem;color:var(--muted);margin-bottom:.6rem}
.fontpick .fontbox{margin-top:0}.fontpick .flist{max-height:230px}
.flist button span{font-size:1.05rem}
.bk-sec{padding:1rem 0;border-top:1px solid var(--line)}.bk-sec:first-of-type{border-top:0;padding-top:0}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.6rem;margin-top:.8rem}
.bk{display:grid;gap:.3rem;padding:.3rem;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:inherit}
.bk img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:8px;background:#e7e1d5;display:block}
.bk b{font-size:.72rem;font-weight:600;line-height:1.2;padding:0 .15rem .15rem}
.bk:hover{border-color:var(--ink)}.bk.on{border-color:var(--wax);box-shadow:0 0 0 2px var(--wax)}
.locked{position:relative;opacity:.45;pointer-events:none;filter:grayscale(.4)}
.locknote{margin-top:.8rem;font-size:.82rem;color:var(--wax);font-weight:600}
.stdbox{margin-top:1.4rem;padding:1.1rem;border:1.5px solid var(--ink);border-radius:16px;display:grid;gap:.8rem}
.stdbox h4{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.stdbox .grid2{margin-top:0}
#stdbody{display:grid;gap:.9rem}#stdbody[hidden]{display:none}
.check{display:flex;gap:.6rem;align-items:center;font-weight:600;cursor:pointer}.check input{width:18px;height:18px;accent-color:var(--wax)}
.sheet-h{font:700 1.15rem Unbounded,sans-serif;letter-spacing:-.03em;margin-bottom:1rem}
input[type=number]{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 .8rem;background:var(--surface);font:inherit;color:inherit}

/* ---------- studio wizard: one step at a time ---------- */
.wizard .page-title{margin-bottom:.9rem}
.wizard[data-cur]:not([data-cur="1"]) .page-title,.wizard[data-cur]:not([data-cur="1"]) .kicker{display:none}
.wsteps{display:flex;gap:.45rem;list-style:none;margin:0 0 1.3rem;padding:0;flex-wrap:wrap}
.wsteps button{display:flex;align-items:center;gap:.55rem;padding:.4rem .9rem .4rem .4rem;border:1px solid var(--line);border-radius:999px;background:transparent;font:inherit;font-size:.86rem;color:var(--muted);cursor:pointer;transition:border-color .2s,color .2s}
.wsteps b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--ink);font-size:.78rem;font-weight:700}
.wsteps li.on button{border-color:var(--ink);color:var(--ink);font-weight:700;background:var(--surface)}
.wsteps li.on b{background:var(--ink);color:var(--paper)}
.wsteps li.done b{background:var(--wax);color:#fff}
.wsteps button:hover{border-color:var(--ink)}
.step-card[hidden],.wnav [hidden]{display:none}
.studio[data-cur="1"]{grid-template-columns:minmax(0,760px);justify-content:center}
.studio[data-cur="1"] .pv{display:none}
.wnav{display:flex;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.6rem;box-shadow:var(--shadow)}
.wnav .btn{width:auto}.wnav .btn.big{flex:1;max-width:340px;margin-left:auto}
.wnav .wcount{color:var(--muted);font-size:.86rem;font-variant-numeric:tabular-nums}
.wizard .fontpick .flist{max-height:170px}
.wizard .step-card h2{margin-bottom:1rem}
@media (max-width:1000px){.wizard .pv{max-width:250px}.wsteps span{display:none}.wsteps li.on span{display:inline}.wsteps button{padding-right:.5rem}.wsteps li.on button{padding-right:.9rem}}

details.fontpick{border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;margin-top:1.1rem}
details.fontpick summary span{font-weight:400;color:var(--muted)}
details.fontpick[open] .fonthead{margin-top:.8rem}

/* ---------- caption designs ---------- */
.caphead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}.caphead h2{margin:0}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.65rem;margin-top:.9rem;max-height:min(50vh,470px);overflow:auto;padding:3px;scrollbar-width:thin}
.cp{display:grid;gap:.35rem;padding:.3rem;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;font:inherit;color:inherit;text-align:left;align-content:start}
.cp-tile{container-type:inline-size;aspect-ratio:16/9;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:#20262b url(/site/demo-before.jpg) center 80%/175% auto}
.cp-tile>span{white-space:nowrap;line-height:1.15}.cp-tile .w{display:inline-block}
.cp b{font-size:.76rem;font-weight:600;padding:0 .2rem .2rem;line-height:1.2}
.cp:hover{border-color:var(--ink)}.cp.on{border-color:var(--wax);box-shadow:0 0 0 2px var(--wax)}
.cp-auto{font:700 .85rem Unbounded,sans-serif;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.65)}

/* ---------- captions: colours and the caption sound, right under the designs ---------- */
.wizard .cp-grid{max-height:min(38vh,330px)}
.caprow{display:flex;align-items:center;gap:.8rem 1rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.caprow>.label{min-width:92px;margin:0}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:.45rem;padding:.3rem .6rem .3rem .3rem;border:1px solid var(--line);border-radius:999px;font-size:.82rem;cursor:pointer;position:relative;color:var(--muted)}
.sw input[type=color]{width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;opacity:.45}
.sw.set{border-color:var(--ink);color:var(--ink);font-weight:600}.sw.set input[type=color]{opacity:1}
.sw input[type=color]::-webkit-color-swatch-wrapper{padding:0}.sw input[type=color]::-webkit-color-swatch{border:1px solid var(--line);border-radius:50%}
.swx{border:0;background:var(--line);width:18px;height:18px;border-radius:50%;font-size:.8rem;line-height:1;cursor:pointer;color:var(--ink);padding:0}
.caprow .seg{margin-left:auto}

/* Studio — spacious black canvas, one glass inspector, typography-led controls. */
body[data-route=new]{--paper:#030405;--surface:#17191d;--ink:#f5f5f7;--ink2:#d4d5d9;--mute:#9b9da5;--muted:var(--mute);--line:#ffffff14;--line2:#ffffff26;--wax:#bdd5ff;--ok:#a8d6bd;--shadow:none;background:#030405;color:var(--ink);color-scheme:dark}
html:has(body[data-route=new]){background:#030405;scroll-behavior:auto}
body[data-route=new] #c{display:none}
body[data-route=new] #top{height:68px;padding:0 40px;background:#050608c9;border-bottom:1px solid #ffffff0c;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
body[data-route=new] .mark{font-size:17px;min-width:44px;min-height:44px;color:#f5f5f7}
body[data-route=new] .mark i{width:10px;height:14px}
body[data-route=new] nav{gap:28px}
body[data-route=new] nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:12px;font-weight:450;color:#a4a6ae;opacity:1;box-shadow:none}
body[data-route=new] nav a:hover,body[data-route=new] nav a.on{color:#fff;box-shadow:none}
body[data-route=new] nav .cta-mini{border:0;background:none;padding:0;color:#fff;border-radius:0}
body[data-route=new] nav select{min-height:44px;min-width:50px;font-size:12px;color:#b8bac0;opacity:1}
body[data-route=new] .skip:focus{left:16px;top:12px;z-index:90;background:#22242a;padding:12px;border-radius:8px}
body[data-route=new] .wizard{width:100%;max-width:1600px;height:100svh;min-height:650px;padding:88px 40px 24px;display:grid;grid-template-rows:44px minmax(0,1fr);gap:22px}
body[data-route=new] .editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}
body[data-route=new] .editor-heading{display:flex;align-items:center;gap:20px;min-width:0}
body[data-route=new] .wizard .page-title{display:block!important;margin:0;font-size:19px;font-weight:550;letter-spacing:-.045em;line-height:1.2;white-space:nowrap}
body[data-route=new] .editor-source{display:block;font-size:12px;color:#858891;max-width:220px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:20px;border-left:1px solid #ffffff20}
body[data-route=new] .wsteps{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0;border:0;background:none;margin:0;flex-wrap:nowrap}
body[data-route=new] .wsteps li{min-width:0}
body[data-route=new] .wsteps li:not(:last-child):after{content:'';width:18px;height:1px;display:block;background:#ffffff1c;margin-left:14px}
body[data-route=new] .wsteps li{display:flex;align-items:center}
body[data-route=new] .wsteps button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;border-radius:8px;font-size:12px;color:#898c94;font-weight:450;white-space:nowrap}
body[data-route=new] .wsteps b{display:grid;place-items:center;width:22px;height:22px;flex:none;border:1px solid #ffffff21;background:none;color:#92959c;font:500 10px Inter}
body[data-route=new] .wsteps span{display:inline}
body[data-route=new] .wsteps li.on button{background:none;color:#f5f5f7}
body[data-route=new] .wsteps li.on b{color:#14171c;background:#f0f2f6;border-color:#f0f2f6;box-shadow:0 0 18px #e5ecff16}
body[data-route=new] .wsteps li.done b{background:#ffffff0b;color:#c8cad1;border-color:#ffffff2b}
body[data-route=new] .studio{display:grid;grid-template-columns:minmax(0,1fr) 424px;gap:24px;align-items:stretch;min-height:0;height:100%;width:100%;max-width:none;margin:0}
body[data-route=new] .steps-form{order:2;display:flex;flex-direction:column;gap:0;min-width:0;min-height:0;overflow:hidden;border:1px solid #ffffff21;border-radius:28px;background:radial-gradient(ellipse at 0 0,#b9c8ec0e,transparent 60%),linear-gradient(145deg,#22252aa8,#131519b8 58%,#15181dc9);box-shadow:0 1px 0 #ffffff14 inset,0 20px 80px #0005;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
body[data-route=new] .editor-controls{min-width:0;min-height:0;flex:1 1 0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff25 transparent;padding:28px}
body[data-route=new] .step-card{border:0;background:none;box-shadow:none;padding:0;margin:0 0 24px;border-radius:0;min-width:0}
body[data-route=new] .step-card:last-of-type{margin-bottom:0}
body[data-route=new] .step-card h2{font:550 26px/1.2 Inter;letter-spacing:-.055em;margin:0 0 24px;outline:none}
body[data-route=new] .inspector-eyebrow{display:block;color:#9a9da6;font:500 10px/1.5 Inter;letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px}
body[data-route=new] .section-label{font-size:12px;color:#a3a6ae;margin:30px 0 12px}
body[data-route=new] .editor-description{font-size:13px;line-height:1.7;color:#a3a6ae;max-width:29ch;margin:0 0 28px}
body[data-route=new] .profile-step h2{font-size:32px;line-height:1.15;margin-bottom:14px}
body[data-route=new] .btn,body[data-route=new] .chip,body[data-route=new] .seg button{min-height:44px;min-width:44px;box-shadow:none;transition:background .16s,border-color .16s,color .16s}
body[data-route=new] .btn{height:44px;border:1px solid #ffffff1f;background:#ffffff04;color:#e0e2e6;font-size:12px;font-weight:500;padding:0 16px;border-radius:12px}
body[data-route=new] .btn:hover:not(:disabled){color:#fff;background:#ffffff0f;border-color:#ffffff3a}
body[data-route=new] .btn.solid{background:#f1f3f7;border-color:#f1f3f7;color:#13161b;font-weight:600;box-shadow:0 1px 0 #fff inset,0 4px 18px #e2e7f510}
body[data-route=new] .btn.solid:hover:not(:disabled){background:#fff;border-color:#fff;color:#000}
body[data-route=new] .btn.big{font-size:13px;height:48px;border-radius:13px}
body[data-route=new] .btn:disabled{opacity:.35}
body[data-route=new] .btn.icon-button{width:44px;padding:0;border:0;background:none;color:#b5b8c2}
body[data-route=new] .wnav{position:static;display:flex;align-items:center;gap:14px;padding:18px 24px;margin:0;border:0;border-top:1px solid #ffffff0c;border-radius:0;background:#080a0d20;flex:none}
body[data-route=new] #wback{padding:0 8px;border-color:transparent;background:none;color:#aaaeb8;font-size:12px}
body[data-route=new] .wnav .wcount{color:#797d88;font-size:11px;white-space:nowrap}
body[data-route=new] .wnav .btn.big{margin-left:auto;max-width:none;min-width:130px}
body[data-route=new] .seg{background:#0003;border:1px solid #ffffff07;padding:3px;border-radius:12px;gap:0}
body[data-route=new] .seg button{font-size:11px;padding:8px 11px;color:#9fa3ad;border-radius:9px;line-height:1.3}
body[data-route=new] .seg button.on{background:#ffffff14;color:#f5f5f7;box-shadow:0 1px 0 #ffffff12 inset}
body[data-route=new] input[type=text],body[data-route=new] input[type=search],body[data-route=new] textarea,body[data-route=new] select.sel{min-height:46px;background:#080a0d60;border:1px solid #ffffff17;padding:12px 14px;border-radius:12px;font:400 13px/1.6 Inter;color:#f5f5f7}
body[data-route=new] input::placeholder,body[data-route=new] textarea::placeholder{color:#969aa5;opacity:1}
body[data-route=new] textarea{min-height:130px}
body[data-route=new] input[type=range]{height:44px;accent-color:#e1e7f1;cursor:pointer}
body[data-route=new] :focus-visible{outline:2px solid #bdd5ff;outline-offset:3px}
body[data-route=new] .label,body[data-route=new] .field>label{font-size:11px;line-height:1.5;letter-spacing:0;text-transform:none;font-weight:450;color:#b2b5be}
body[data-route=new] .field{min-width:0;gap:10px;margin-bottom:0}
body[data-route=new] .grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:24px}
body[data-route=new] .chip{padding:8px 12px;border:1px solid #ffffff16;background:#ffffff03;border-radius:9px;font-size:11px;font-weight:450;line-height:1.3;color:#aaafba}
body[data-route=new] .chip.on{color:#f4f5f7;background:#ffffff13;border-color:#ffffff24}
body[data-route=new] .chip:hover{border-color:#ffffff40;color:#fff}
body[data-route=new] .caption-step:not([hidden]){height:100%;display:flex;flex-direction:column;min-height:0;margin:0}
body[data-route=new] .caphead{margin:0 0 24px;gap:16px;align-items:center;flex:none}
body[data-route=new] .caphead h2{margin:0}
body[data-route=new] .caphead .inspector-eyebrow{display:none}
body[data-route=new] .caphead .seg{flex-wrap:nowrap;flex:none}
body[data-route=new] .caphead .seg button{font-size:10px;padding:6px 9px;min-width:44px}
body[data-route=new] .caption-tabs{display:flex;gap:0;padding:3px;margin-bottom:22px;background:#0003;border:1px solid #ffffff08;border-radius:12px;flex:none}
body[data-route=new] .caption-tabs button{min-height:44px;flex:1;border:0;background:none;border-radius:9px;font-size:12px;font-weight:500;color:#999eaa;cursor:pointer}
body[data-route=new] .caption-tabs button.on{background:linear-gradient(180deg,#ffffff17,#ffffff0b);box-shadow:0 1px 0 #ffffff16 inset;color:#f1f3f7}
body[data-route=new] .caption-browser{display:flex;flex:1;flex-direction:column;min-height:0;gap:12px}
body[data-route=new] .caption-search{display:flex;align-items:center;gap:8px;position:relative;flex:none}
body[data-route=new] .caption-search>svg{position:absolute;left:13px;pointer-events:none;color:#969aa5}
body[data-route=new] .caption-search input{padding-left:39px;width:100%;font-size:12px}
body[data-route=new] #cpcount{position:absolute;right:12px;font-size:10px;color:#a7afbd;background:#ffffff08;padding:3px 6px;border-radius:5px;pointer-events:none}
body[data-route=new] #cpsearch{padding-right:52px;text-overflow:ellipsis;white-space:nowrap}
body[data-route=new] #cpgroups{flex:none;display:flex;flex-wrap:nowrap;gap:16px;margin:0;padding-right:20px;overflow-x:auto;scrollbar-width:none;min-height:44px;mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent)}
body[data-route=new] #cpgroups::-webkit-scrollbar{display:none}
body[data-route=new] #cpgroups .chip{flex:none;min-width:44px;padding:0;border-radius:0;border:0;border-bottom:1px solid transparent;color:#9096a2;font-size:11px;background:none;white-space:nowrap}
body[data-route=new] #cpgroups .chip.on{color:#f5f5f7;border-bottom-color:#e4e9f3}
body[data-route=new] .cp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:126px;align-content:start;gap:12px;flex:1;min-height:0;max-height:none;padding:2px;margin:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff20 transparent}
body[data-route=new] .cp{position:relative;display:grid;grid-template-rows:84px minmax(0,1fr);gap:0;min-width:0;padding:0;border:1px solid #ffffff12;border-radius:14px;background:#ffffff02;overflow:hidden;transition:border-color .16s,background .16s;box-shadow:none}
body[data-route=new] .cp-tile{aspect-ratio:auto;min-height:0;border-radius:0;background:radial-gradient(ellipse at 50% 110%,#ffffff08,transparent 80%);padding:8px}
body[data-route=new] .cp-tile>span{max-width:100%;white-space:normal;text-align:center}
body[data-route=new] .cp-tile .cp-auto{font:550 18px/1.2 Inter;letter-spacing:-.04em;text-shadow:none;color:#c4cad5}
body[data-route=new] .cp b{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;line-height:1.4;font-weight:450;padding:10px 12px 12px;color:#a8aebb;border-top:1px solid #ffffff07;overflow-wrap:anywhere}
body[data-route=new] .cp b svg{width:12px;height:12px;flex:none}
body[data-route=new] .cp>small{display:none}
body[data-route=new] .cp:hover{border-color:#ffffff46;background:#ffffff05}
body[data-route=new] .cp.on{border-color:#d2ddf19e;background:#b1c6ed08;box-shadow:0 0 0 1px #d2ddf126}
body[data-route=new] .cp.on b{color:#f1f3f8}
body[data-route=new] .cp-empty{grid-column:1/-1;font-size:13px;color:#a5aab5;line-height:1.6;padding:20px 0}
body[data-route=new] .caption-selection{order:5;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff0d;padding-top:16px;margin-top:20px;flex:none}
body[data-route=new] .caption-selection .label{display:block;font-size:10px;color:#8b919d;margin-bottom:4px}
body[data-route=new] .caption-selection strong{display:block;font-size:12px;font-weight:500;line-height:1.4}
body[data-route=new] .caption-custom{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffffff20 transparent;padding-right:3px}
body[data-route=new] .caption-quick{display:grid;gap:8px;padding:0}
body[data-route=new] .caption-quick>label{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#c9cdd6}
body[data-route=new] .caption-quick output{font-size:11px;color:#a2a9b7;min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
body[data-route=new] .quick-position{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
body[data-route=new] .quick-position .label{font-size:12px}
body[data-route=new] .quick-position .seg{flex-wrap:nowrap}
body[data-route=new] .quick-position .seg button{min-width:56px}
body[data-route=new] .caprow{margin:24px 0 0;padding-top:24px;border-top:1px solid #ffffff0d;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
body[data-route=new] .caprow>.label{width:100%;min-width:0;font-size:12px}
body[data-route=new] .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;flex:1}
body[data-route=new] .sw{min-height:48px;min-width:0;background:none;border:0;border-radius:0;padding:0;gap:10px;font-size:12px;font-weight:400;color:#a9afbc;flex-wrap:nowrap}
body[data-route=new] .sw input[type=color]{width:28px;height:28px;min-width:28px;padding:2px;border:1px solid #ffffff28;border-radius:50%;background:transparent;opacity:1;flex:none}
body[data-route=new] .swx{width:44px;height:44px;border-radius:8px;color:#a1a7b2;background:none;margin-left:auto;font-size:18px;flex:none}
body[data-route=new] details.adv{border:0;border-top:1px solid #ffffff10;border-radius:0;padding:16px 0 0;margin-top:24px;background:none}
body[data-route=new] details.adv summary{display:flex;align-items:center;min-height:44px;font-size:12px;font-weight:450;color:#c7ccd5;gap:10px}
body[data-route=new] details.adv summary:after{font-size:18px;font-weight:300;color:#9299a8}
body[data-route=new] .sound-settings .caprow{padding:0;margin:12px 0 0;border:0;gap:12px}
body[data-route=new] .caprow .chips{margin:0;flex-basis:100%}
body[data-route=new] .caprow .seg{margin:0}
body[data-route=new] .fonthead{flex-wrap:wrap;gap:10px}
body[data-route=new] .flist button{min-height:44px;min-width:44px;font-size:11px}
body[data-route=new] .flist button span{font-size:16px;overflow-wrap:anywhere}
body[data-route=new] .rowc{gap:8px;flex-wrap:wrap}
body[data-route=new] .pv{order:1;position:relative;top:auto;min-width:0;min-height:0;width:100%;max-width:none;height:100%;padding:22px 24px;border:1px solid #ffffff0f;border-radius:28px;overflow:hidden;margin:0;background:radial-gradient(ellipse at 48% 45%,#b8c6e311,transparent 65%),linear-gradient(140deg,#15181d65,#07090d20 60%);box-shadow:0 1px 0 #ffffff06 inset}
body[data-route=new] .preview-stage{display:grid;grid-template-rows:28px minmax(0,1fr) auto;gap:18px;height:100%;min-height:0;position:relative}
body[data-route=new] .preview-header{display:flex;align-items:center;justify-content:space-between;width:100%;grid-column:1;grid-row:1}
body[data-route=new] .pv h3{font-size:10px;letter-spacing:.12em;font-weight:450;color:#9198a6;line-height:1.4}
body[data-route=new] .preview-format{font:400 10px/1 Inter;color:#9aa2b2;border:1px solid #ffffff1a;border-radius:6px;padding:6px 8px}
body[data-route=new] .phone{grid-column:1;grid-row:2;justify-self:center;align-self:center;height:auto;width:min(100%,calc((100svh - 372px)*.5625),382.5px);aspect-ratio:9/16;min-width:0;max-width:100%;max-height:none;flex:none;padding:0;border:1px solid #ffffff24;border-radius:18px;background:#080a0c;box-shadow:0 28px 65px #0009,0 0 0 5px #ffffff02;overflow:hidden}
body[data-route=new] .screen{height:auto;width:100%;aspect-ratio:9/16;border-radius:17px;background:#080a0b}
body[data-route=new] .preview-bottom{grid-column:1;grid-row:3;display:flex;flex-direction:column;align-items:center;gap:12px}
body[data-route=new] .preview-transport{display:flex;align-items:center;gap:16px;min-height:54px;padding:5px 18px 5px 5px;border:1px solid #ffffff13;border-radius:17px;background:linear-gradient(150deg,#ffffff0b,#ffffff03);box-shadow:0 1px 0 #ffffff09 inset;max-width:100%}
body[data-route=new] #preview-play{width:44px;height:44px;flex:none;padding:0;border:0;background:#ffffff09;border-radius:12px;color:#f2f4f7}
body[data-route=new] #preview-play:hover{background:#ffffff18}
body[data-route=new] .pv-meta{text-align:left;display:flex;flex-direction:column;gap:3px;min-width:0}
body[data-route=new] .pv-meta b{font-size:11px;font-weight:500;line-height:1.4}
body[data-route=new] .pv-meta span{font-size:10px;color:#9099a9;line-height:1.4}
body[data-route=new] .drag-note{font-size:10px;line-height:1.5;color:#8d96a6;max-width:100px;border-left:1px solid #ffffff14;padding-left:16px;margin-left:2px}
body[data-route=new] .preview-note{color:#8e95a2;font-size:10px;line-height:1.5;text-align:center;max-width:100%}
body[data-route=new] #pvnext{display:none}
body[data-route=new] .pvtabs{display:none;grid-column:1;grid-row:1;justify-self:center;margin:0;z-index:1;align-self:center}
body[data-route=new] .pvtabs button{min-height:44px;min-width:56px;padding:8px 14px;font-size:10px}
body[data-route=new] .studio[data-cur="3"] .pvtabs{display:flex}
body[data-route=new] .studio[data-cur="3"] .pvtabs [data-pv=caps]{display:none}
body[data-route=new] .pv[data-playing=false] .pv-strip i{animation-play-state:paused}
body[data-route=new] .source-stage{display:none;flex-direction:column;justify-content:center;height:100%;min-height:0;max-width:500px;margin:auto}
body[data-route=new] .studio[data-cur="1"] .source-stage{display:flex}
body[data-route=new] .studio[data-cur="1"] .pv{display:block}
body[data-route=new] .studio[data-cur="1"] .preview-stage{display:none}
body[data-route=new] .import-header{margin:0 0 38px}
body[data-route=new] .import-header h2{font-size:clamp(42px,4.4vw,66px);font-weight:500;letter-spacing:-.065em;line-height:1.06;white-space:pre-line;color:#e8ebf2;margin:18px 0 20px;background:linear-gradient(135deg,#fff 20%,#b7bfce 85%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
body[data-route=new] .import-header p{font-size:14px;line-height:1.7;color:#9199a9;max-width:35ch}
body[data-route=new] .drop{min-height:166px;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;align-content:center;justify-content:start;justify-items:start;gap:6px 20px;text-align:left;padding:30px;background:linear-gradient(130deg,#ffffff0a,#ffffff02);border:1px solid #ffffff26;border-radius:22px;box-shadow:0 1px 0 #ffffff10 inset;transition:background .2s,border-color .2s}
body[data-route=new] .drop:before{content:'↑';grid-column:1;grid-row:1/3;display:grid;place-items:center;align-self:center;width:48px;height:48px;border:1px solid #ffffff20;border-radius:16px;background:#ffffff08;font-size:25px;font-weight:300;color:#d5ddea}
body[data-route=new] .drop b{font-size:15px;font-weight:500;letter-spacing:-.02em;grid-column:2;grid-row:1}
body[data-route=new] .drop span{font-size:11px;line-height:1.5;color:#959dac;grid-column:2;grid-row:2}
body[data-route=new] .drop:hover,body[data-route=new] .drop.over{border-color:#d4def17a;background:#ffffff0a}
body[data-route=new] #s1>details{position:relative;margin-top:16px;padding-top:0;border:0}
body[data-route=new] #s1>details>summary{font-size:11px;color:#a0a8b7;justify-content:center;gap:10px}
body[data-route=new] #s1>details>summary:after{margin-left:0}
body[data-route=new] .vlist{max-height:220px;gap:6px;margin-top:12px;padding:0;border:0}
body[data-route=new] .vlist button{min-height:44px;background:#14181ee8;border:1px solid #ffffff15;border-radius:10px;font-size:11px;padding:12px;color:#c2c8d3;overflow-wrap:anywhere;gap:8px}
body[data-route=new] .vlist button.on{background:#e8edf8;color:#171a21}
body[data-route=new] .studio[data-hasvideo=true] .import-header{display:none}
body[data-route=new] .studio[data-hasvideo=true] .source-stage{max-width:100%;width:100%}
body[data-route=new] .studio[data-hasvideo=true] #s1{min-height:0;display:flex;flex-direction:column;align-items:center;gap:12px;height:100%}
body[data-route=new] .vsel{display:flex;flex-direction:column;justify-content:center;min-height:0;gap:18px;flex:1;width:100%}
body[data-route=new] .vsel video{min-height:0;height:calc(100% - 90px);width:auto;max-width:100%;aspect-ratio:9/16;border-radius:17px;border:1px solid #ffffff20;box-shadow:0 20px 50px #0008;background:#080a0c;object-fit:contain}
body[data-route=new] .vsel>div{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;flex:none}
body[data-route=new] .vsel strong{font-size:12px;font-weight:500;overflow-wrap:anywhere;max-width:260px}
body[data-route=new] .vsel p{font-size:11px;margin:0!important}
body[data-route=new] .studio[data-hasvideo=true] #s1>details{width:100%;margin:0;flex:none}
body[data-route=new] .studio[data-hasvideo=true] #s1>details[open] .vlist{position:absolute;bottom:50px;left:0;right:0;z-index:3;background:#0c0f14;padding:12px;border:1px solid #ffffff26;border-radius:16px;box-shadow:0 15px 60px #0009}
body[data-route=new] .brands{grid-template-columns:minmax(0,1fr);gap:8px}
body[data-route=new] .brand{position:relative;min-width:0;min-height:76px;border:1px solid transparent;border-radius:15px;padding:14px;background:#ffffff03;gap:14px;color:#c2c7d0}
body[data-route=new] .brand img{width:36px;height:36px}
body[data-route=new] .brand strong{font-size:13px;font-weight:500}
body[data-route=new] .brand small{font-size:10px;line-height:1.6;margin-top:3px;color:#8b93a1}
body[data-route=new] .brand .dots{display:none}
body[data-route=new] .brand.on{border-color:#d5dff040;background:#cad6eb0a;box-shadow:none}
body[data-route=new] .brand.on:after{content:'✓';margin-left:auto;color:#dce6f7;font-size:13px}
body[data-route=new] a.brand{min-height:48px;background:none;color:#989fac;font-size:11px;justify-content:center}
body[data-route=new] a.brand strong{font-size:11px}
body[data-route=new] .levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body[data-route=new] .level{border:1px solid #ffffff12;background:#ffffff02;padding:16px;min-height:100px;gap:8px;border-radius:14px}
body[data-route=new] .level b{font-size:12px;font-weight:500}
body[data-route=new] .level span{font-size:10px;color:#929ba9;line-height:1.6}
body[data-route=new] .level.on{background:#c5d5f20a;border-color:#d4dff16b;box-shadow:none}
body[data-route=new] .bk-sec{border-color:#ffffff12;margin-top:24px;padding-top:24px}
body[data-route=new] .bk-sec:first-of-type{border:0;margin:0;padding:0}
body[data-route=new] .bk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body[data-route=new] .bk{min-width:0;border-width:1px;border-color:#ffffff1c;background:#ffffff03;border-radius:12px}
body[data-route=new] .bk b{font-size:10px}
body[data-route=new] .bk.on{border-color:#c8d8f3;box-shadow:none}
body[data-route=new] .locknote{font-size:11px;margin-top:18px;color:#b6c0d2}
body[data-route=new] .err-box{border:1px solid #efb6b330;border-radius:12px;background:#48252b50;color:#efbbb9;font-size:12px;line-height:1.5;margin-top:18px}
body[data-route=new] .toast{background:#23262e;color:#f4f5f7;border:1px solid #ffffff25;max-width:calc(100vw - 32px)}
body[data-route=new] [hidden]{display:none!important}
@media(min-width:761px) and (max-width:1150px){
  body[data-route=new] #top{padding:0 24px}
  body[data-route=new] .wizard{padding:84px 24px 20px;gap:16px}
  body[data-route=new] .studio{grid-template-columns:minmax(0,1fr) 370px;gap:16px}
  body[data-route=new] .editor-controls{padding:24px}
  body[data-route=new] .editor-source{display:none}
  body[data-route=new] .wsteps{gap:8px}
  body[data-route=new] .wsteps li:not(:last-child):after{margin-left:8px;width:10px}
  body[data-route=new] .wsteps button{font-size:10px;gap:6px}
  body[data-route=new] .pv{padding:20px 16px}
  body[data-route=new] .drag-note{display:none}
  body[data-route=new] .drop{padding:24px;grid-template-columns:1fr;text-align:center;justify-items:center;gap:12px}
  body[data-route=new] .drop:before,body[data-route=new] .drop b,body[data-route=new] .drop span{grid-column:1;grid-row:auto}
  body[data-route=new] .import-header h2{font-size:48px}
}
@media(min-width:761px) and (max-height:760px){
  body[data-route=new] .wizard{padding-top:76px;gap:12px;min-height:600px}
  body[data-route=new] #top{height:60px}
  body[data-route=new] .editor-controls{padding:22px}
  body[data-route=new] .caphead{margin-bottom:16px}
  body[data-route=new] .caption-tabs{margin-bottom:16px}
  body[data-route=new] .preview-stage{gap:12px}
  body[data-route=new] .preview-note{font-size:9px}
  body[data-route=new] .import-header{margin-bottom:24px}
  body[data-route=new] .import-header h2{font-size:48px}
  body[data-route=new] .drop{min-height:132px}
}
@media(max-width:760px){
  body[data-route=new] #top{height:58px;padding:0 20px}
  body[data-route=new] .mark{font-size:15px}
  body[data-route=new] .mark span{display:inline}
  body[data-route=new] nav{gap:16px}
  body[data-route=new] nav a{font-size:11px}
  body[data-route=new] #nav-profiles{display:none}
  body[data-route=new] .wizard{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:72px 16px 100px;gap:16px}
  body[data-route=new] .editor-toolbar{display:block}
  body[data-route=new] .editor-heading{display:none}
  body[data-route=new] .wsteps{justify-content:space-between;gap:0}
  body[data-route=new] .wsteps li:not(:last-child):after{display:none}
  body[data-route=new] .wsteps button{min-width:44px;min-height:48px;flex-direction:column;gap:6px;font-size:9px;line-height:1.35;padding:0 3px;max-width:95px;white-space:normal;text-align:center}
  body[data-route=new] .wsteps span{display:block}
  body[data-route=new] .wsteps b{width:20px;height:20px;font-size:9px}
  body[data-route=new] .studio{display:flex;flex-direction:column;height:auto;gap:16px}
  body[data-route=new] .pv{order:0;height:auto;border-radius:22px;padding:16px}
  body[data-route=new] .preview-stage{height:auto;display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto 1fr;gap:12px 18px}
  body[data-route=new] .preview-header{grid-column:2;grid-row:1;height:auto;align-self:start;gap:10px}
  body[data-route=new] .pv h3{font-size:8px}
  body[data-route=new] .preview-format{font-size:8px;padding:5px 6px}
  body[data-route=new] .phone{grid-column:1;grid-row:1/3;width:100px;height:auto;max-height:none;border-radius:12px;box-shadow:0 15px 28px #0007}
  body[data-route=new] .screen{border-radius:11px}
  body[data-route=new] .preview-bottom{grid-column:2;grid-row:2;justify-content:center;align-items:flex-start;gap:12px}
  body[data-route=new] .preview-transport{padding:0;border:0;border-radius:0;box-shadow:none;background:none;flex-wrap:wrap;gap:10px}
  body[data-route=new] .pv-meta{order:0;flex-basis:100%}
  body[data-route=new] .pv-meta b{font-size:12px}
  body[data-route=new] .pv-meta span{font-size:9px}
  body[data-route=new] #preview-play{order:1;width:44px;height:44px;border:1px solid #ffffff17;border-radius:12px}
  body[data-route=new] .drag-note{display:none}
  body[data-route=new] .preview-note{text-align:left;font-size:9px;line-height:1.5}
  body[data-route=new] .pvtabs{grid-column:2;grid-row:1;justify-self:start;position:relative;margin-top:22px}
  body[data-route=new] .pvtabs button{min-height:44px;min-width:56px;font-size:10px;padding:8px}
  body[data-route=new] .studio[data-cur="3"] .preview-header{align-self:start}
  body[data-route=new] .studio[data-cur="3"] .preview-stage{grid-template-rows:74px 1fr}
  body[data-route=new] .steps-form{overflow:visible;min-height:0;border-radius:22px;backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(145deg,#1a1d23,#11141a);order:1}
  body[data-route=new] .editor-controls{padding:24px 20px;flex:auto;overflow:visible}
  body[data-route=new] .caption-step:not([hidden]){height:auto}
  body[data-route=new] .caphead{margin-bottom:16px}
  body[data-route=new] .caphead .inspector-eyebrow{display:none}
  body[data-route=new] .step-card h2{font-size:25px}
  body[data-route=new] .caption-tabs{margin-bottom:18px}
  body[data-route=new] .caption-browser{min-height:0;flex:none}
  body[data-route=new] .cp-grid{min-height:0;max-height:380px;flex:none;gap:10px}
  body[data-route=new] .cp b{font-size:11px;padding:9px 10px 11px}
  body[data-route=new] #cpgroups{gap:15px}
  body[data-route=new] .caption-selection{margin-top:18px;padding-top:14px}
  body[data-route=new] .caption-custom{flex:none;overflow:visible;padding:0}
  body[data-route=new] .wnav{position:fixed;bottom:12px;left:16px;right:16px;z-index:30;padding:10px 12px;background:#20242bea;border:1px solid #ffffff26;border-radius:18px;box-shadow:0 8px 30px #0008,0 1px 0 #ffffff0d inset;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);gap:12px}
  body[data-route=new] .wnav .btn.big{height:46px;min-width:135px;font-size:12px;max-width:65%;padding:0 16px}
  body[data-route=new] #wback{padding:0 6px}
  body[data-route=new] .source-stage{padding:14px 8px;max-width:100%}
  body[data-route=new] .import-header{margin-bottom:26px}
  body[data-route=new] .import-header .inspector-eyebrow{font-size:9px}
  body[data-route=new] .import-header h2{font-size:42px;margin:16px 0;line-height:1.08}
  body[data-route=new] .import-header p{font-size:12px;max-width:30ch}
  body[data-route=new] .drop{min-height:140px;padding:22px 18px;gap:6px 14px;grid-template-columns:40px 1fr;border-radius:17px}
  body[data-route=new] .drop:before{width:40px;height:44px;border-radius:12px;font-size:23px}
  body[data-route=new] .drop b{font-size:13px}
  body[data-route=new] .drop span{font-size:10px}
  body[data-route=new] .studio[data-hasvideo=true] .source-stage{padding:0}
  body[data-route=new] .vsel{display:grid;grid-template-columns:100px minmax(0,1fr);gap:18px;align-items:center}
  body[data-route=new] .vsel video{width:100%;height:auto;aspect-ratio:9/16;max-height:none}
  body[data-route=new] .vsel>div{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
  body[data-route=new] .vsel strong{font-size:12px;max-width:100%}
  body[data-route=new] .vsel .btn{font-size:10px}
  body[data-route=new] .studio[data-hasvideo=true] #s1{gap:12px}
  body[data-route=new] .profile-step h2{font-size:28px}
  body[data-route=new] .profile-step .editor-description{margin-bottom:24px;max-width:none;font-size:12px}
  body[data-route=new] .section-label{margin-top:24px}
  body[data-route=new] .brand{min-height:70px;padding:12px}
  body[data-route=new] .brand strong{font-size:12px}
  body[data-route=new] .grid2{gap:20px}
}
@media(prefers-reduced-motion:reduce){body[data-route=new] *,body[data-route=new] *:before,body[data-route=new] *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(prefers-reduced-transparency:reduce){body[data-route=new] #top,body[data-route=new] .steps-form,body[data-route=new] .wnav{background:#171a20;backdrop-filter:none;-webkit-backdrop-filter:none}}
@supports not (backdrop-filter:blur(1px)){body[data-route=new] .steps-form,body[data-route=new] #top,body[data-route=new] .wnav{background:#171a20}}

/* ==================================================================================================================
   Studio — floating glass. A finish over the dark editor above: layout rules stay where they are, this layer gives the
   page depth (a slow aurora behind real glass), light (edge highlights, coloured shadows), an accent (Apple blue) and
   type large enough to read. Blur is used on four surfaces only; nothing with a backdrop blur is animated.
   ================================================================================================================== */
html:has(body[data-route=new]){background:#000}
body[data-route=new]{background:transparent;--acc:#0a84ff;--acc2:#5ac8fa;--t1:#f5f5f7;--t2:rgba(235,235,245,.66);--t3:rgba(235,235,245,.42);--gl:rgba(255,255,255,.07);--gs:rgba(255,255,255,.15);
  --wax:#0a84ff;font-feature-settings:"cv11","ss01","calt";-webkit-font-smoothing:antialiased}
body[data-route=new]::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;will-change:transform;animation:st-aurora 34s ease-in-out infinite alternate;background:
  radial-gradient(34% 30% at 26% 30%,rgba(255,255,255,0.102),transparent 72%),radial-gradient(28% 28% at 74% 24%,rgba(191,90,242,.26),transparent 72%),
  radial-gradient(32% 32% at 68% 80%,rgba(255,55,95,.15),transparent 72%),radial-gradient(26% 26% at 16% 84%,rgba(100,210,255,.13),transparent 72%)}
body[data-route=new]::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(125% 100% at 50% 40%,transparent 28%,rgba(0,0,0,.7) 74%,#000 100%)}
@keyframes st-aurora{0%{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1)}50%{transform:translate3d(3%,2%,0) rotate(8deg) scale(1.08)}100%{transform:translate3d(-2%,3%,0) rotate(-6deg) scale(1.04)}}
@keyframes st-float{from{translate:0 -5px}to{translate:0 6px}}
@keyframes st-rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

body[data-route=new] :focus-visible{outline:2px solid var(--acc2);outline-offset:3px}
body[data-route=new] #top{background:rgba(0,0,0,.36);border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%)}
body[data-route=new] .mark{font-family:"Inter";font-weight:700;letter-spacing:-.03em}

/* selection speaks one colour everywhere */
body[data-route=new] .cp-tile{background:#0b0c0f url(/site/demo-before.jpg) center 78%/190% auto;box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.2)}
body[data-route=new] .cp{border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.045);transition:translate .22s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s,background .2s}
body[data-route=new] .cp:hover{translate:0 -2px;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
body[data-route=new] .cp.on{border-color:var(--acc);background:rgba(255,255,255,0.03);box-shadow:0 0 0 2px var(--acc),0 18px 44px -14px rgba(255,255,255,0.195)}
body[data-route=new] .cp b{color:var(--t2);border-top-color:rgba(255,255,255,.07)}
body[data-route=new] .cp.on b{color:#fff}
body[data-route=new] .brand{border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.05);color:var(--t1);transition:border-color .2s,background .2s,box-shadow .2s}
body[data-route=new] .brand:hover{border-color:rgba(255,255,255,.28)}
body[data-route=new] .brand.on{border-color:var(--acc);background:rgba(255,255,255,0.036);box-shadow:0 0 0 1px var(--acc),0 16px 40px -18px rgba(255,255,255,0.18)}
body[data-route=new] .brand.on:after{color:var(--acc2);font-weight:700}
body[data-route=new] .level,body[data-route=new] .bk{border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.045);transition:border-color .2s,box-shadow .2s,background .2s}
body[data-route=new] .level:hover,body[data-route=new] .bk:hover{border-color:rgba(255,255,255,.32)}
body[data-route=new] .level.on,body[data-route=new] .bk.on{border-color:var(--acc);background:rgba(255,255,255,0.03);box-shadow:0 0 0 1px var(--acc),0 16px 40px -18px rgba(255,255,255,0.18)}
body[data-route=new] .vlist button.on{background:var(--acc);border-color:var(--acc);color:#fff}
body[data-route=new] input[type=range]{accent-color:var(--acc)}
body[data-route=new] input[type=text]:focus,body[data-route=new] input[type=search]:focus,body[data-route=new] textarea:focus,body[data-route=new] select.sel:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(255,255,255,0.072)}

/* buttons: glass by default, white for "next", blue for the one action that makes the video */
body[data-route=new] .btn{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:var(--t1);box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}
body[data-route=new] .btn:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
body[data-route=new] .btn.solid{background:linear-gradient(180deg,#fff,#e6e8ee);border-color:#fff;color:#000;box-shadow:inset 0 1px 0 #fff,0 14px 34px -12px rgba(255,255,255,.4)}
body[data-route=new] .btn.solid:hover:not(:disabled){background:#fff;translate:0 -1px}
body[data-route=new] #go.btn{background:linear-gradient(180deg,#fff,#dfe2e8);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 16px 44px -10px rgba(255,255,255,0.255)}
body[data-route=new] #go.btn:hover:not(:disabled){background:linear-gradient(180deg,#fff,#eef0f4);translate:0 -1px}
body[data-route=new] .btn.icon-button,body[data-route=new] #wback{box-shadow:none}
body[data-route=new] #preview-play{background:#fff;color:#000;border-radius:50%}
body[data-route=new] #preview-play:hover{background:#fff;scale:1.05}

/* iOS-style segmented controls and pills */
body[data-route=new] .seg,body[data-route=new] .caption-tabs{background:rgba(118,118,128,.24);border:0;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06)}
body[data-route=new] .seg button{color:var(--t1)}
body[data-route=new] .seg button.on,body[data-route=new] .caption-tabs button.on{background:rgba(255,255,255,.2);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.22)}
body[data-route=new] .chip{border-radius:999px;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:var(--t2)}
body[data-route=new] .chip:hover{background:rgba(255,255,255,.12);color:#fff}
body[data-route=new] .chip.on{background:#fff;border-color:#fff;color:#000}
body[data-route=new] #cpgroups .chip{border-radius:999px;border:1px solid transparent;padding:0 14px;min-height:34px;color:var(--t2)}
body[data-route=new] #cpgroups .chip.on{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.14);color:#fff}
body[data-route=new] input[type=text],body[data-route=new] input[type=search],body[data-route=new] textarea,body[data-route=new] select.sel{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.13);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
body[data-route=new] .label,body[data-route=new] .field>label,body[data-route=new] .section-label,body[data-route=new] .editor-description{color:var(--t2)}
body[data-route=new] .inspector-eyebrow{color:var(--acc2);letter-spacing:.14em}
body[data-route=new] .drop{border:1px dashed rgba(255,255,255,.3);background:linear-gradient(140deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 50px 100px -40px rgba(0,0,0,.95);transition:border-color .2s,box-shadow .25s,translate .25s}
body[data-route=new] .drop:hover,body[data-route=new] .drop.over{border-color:var(--acc2);translate:0 -2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 50px 100px -40px rgba(0,0,0,.95),0 0 80px -20px rgba(255,255,255,0.18)}
body[data-route=new] .drop:before{border:0;background:linear-gradient(180deg,#fff,#dfe2e8);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px -8px rgba(255,255,255,0.24)}
body[data-route=new] .toast{background:rgba(40,42,48,.86);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-color:rgba(255,255,255,.18)}

@media(min-width:761px){
  body[data-route=new] .wizard{grid-template-rows:50px minmax(0,1fr)}
  body[data-route=new] .wizard .page-title{font-size:23px;font-weight:650;letter-spacing:-.035em}
  body[data-route=new] .editor-source{font-size:13px;color:var(--t3)}
  /* steps: one glass capsule, the current step is the white pill inside it */
  body[data-route=new] .wsteps{gap:2px;padding:5px;border-radius:999px;background:var(--gl);border:1px solid var(--gs);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 44px -18px rgba(0,0,0,.85)}
  body[data-route=new] .wsteps li:not(:last-child):after{display:none}
  body[data-route=new] .wsteps button{min-height:38px;padding:0 16px 0 7px;border-radius:999px;font-size:13px;font-weight:500;color:var(--t2);transition:background .2s,color .2s}
  body[data-route=new] .wsteps button:hover{color:#fff;background:rgba(255,255,255,.08)}
  body[data-route=new] .wsteps b{width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:var(--t1);font:600 11px Inter}
  body[data-route=new] .wsteps li.on button{background:#fff;color:#000;font-weight:600;box-shadow:0 8px 24px -8px rgba(255,255,255,.5)}
  body[data-route=new] .wsteps li.on b{background:#000;color:#fff;box-shadow:none}
  body[data-route=new] .wsteps li.done b{background:var(--acc);color:#fff}
  /* the inspector: a pane of glass hanging in front of the aurora */
  body[data-route=new] .steps-form{border:1px solid var(--gs);border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.05) 38%,rgba(255,255,255,.032));
    backdrop-filter:blur(46px) saturate(190%);-webkit-backdrop-filter:blur(46px) saturate(190%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(255,255,255,.06),0 60px 130px -34px rgba(0,0,0,.95),0 22px 46px -22px rgba(0,0,0,.7),0 0 110px -34px rgba(255,255,255,0.126);animation:st-rise .55s cubic-bezier(.2,.8,.2,1) both}
  body[data-route=new] .editor-controls{padding:30px;scrollbar-color:rgba(255,255,255,.22) transparent}
  body[data-route=new] .step-card h2{font:650 29px/1.14 Inter;letter-spacing:-.042em;margin-bottom:22px}
  body[data-route=new] .profile-step h2{font-size:34px}
  body[data-route=new] .inspector-eyebrow{font-size:11px;font-weight:600}
  body[data-route=new] .editor-description{font-size:14.5px;line-height:1.6;max-width:34ch}
  body[data-route=new] .section-label{font-size:13px}
  body[data-route=new] .label,body[data-route=new] .field>label{font-size:12.5px;font-weight:500}
  body[data-route=new] .btn{font-size:13.5px;border-radius:14px}
  body[data-route=new] .btn.big{height:52px;border-radius:16px;font-size:15px;font-weight:600;letter-spacing:-.01em}
  body[data-route=new] .wnav{padding:16px 22px;background:rgba(0,0,0,.2);border-top:1px solid rgba(255,255,255,.08)}
  body[data-route=new] #wback{font-size:13.5px;color:var(--t2)}
  body[data-route=new] .wnav .wcount{font-size:12.5px;color:var(--t3);font-variant-numeric:tabular-nums}
  body[data-route=new] .seg button{font-size:13px;min-height:34px;padding:6px 13px}
  body[data-route=new] .caphead .seg button{font-size:12.5px;padding:6px 12px}
  body[data-route=new] .caption-tabs{border-radius:13px}
  body[data-route=new] .caption-tabs button{font-size:13.5px;min-height:38px;border-radius:10px}
  body[data-route=new] .chip{font-size:12.5px;padding:8px 14px}
  body[data-route=new] #cpgroups{gap:6px}
  body[data-route=new] #cpgroups .chip{font-size:13px}
  body[data-route=new] .caption-search input{font-size:14px}
  body[data-route=new] input[type=text],body[data-route=new] input[type=search],body[data-route=new] textarea,body[data-route=new] select.sel{font-size:14px;border-radius:14px}
  body[data-route=new] .cp-grid{grid-auto-rows:152px;gap:14px;scrollbar-color:rgba(255,255,255,.22) transparent}
  body[data-route=new] .cp{grid-template-rows:108px minmax(0,1fr);border-radius:18px}
  body[data-route=new] .cp b{font-size:12.5px;font-weight:500;padding:11px 13px 12px}
  body[data-route=new] .caption-selection .label{font-size:11.5px;color:var(--t3)}
  body[data-route=new] .caption-selection strong{font-size:14px;font-weight:600}
  body[data-route=new] .caption-quick>label,body[data-route=new] .quick-position .label,body[data-route=new] .caprow>.label,body[data-route=new] .sw{font-size:13.5px}
  body[data-route=new] details.adv summary{font-size:13.5px;font-weight:500;color:var(--t1)}
  body[data-route=new] .brand{border-radius:18px;min-height:80px}
  body[data-route=new] .brand strong{font-size:14.5px;font-weight:600}
  body[data-route=new] .brand small{font-size:12px;color:var(--t3)}
  body[data-route=new] a.brand strong{font-size:13px}
  body[data-route=new] .level{border-radius:18px}
  body[data-route=new] .level b{font-size:14px;font-weight:600}
  body[data-route=new] .level span{font-size:12px;color:var(--t2)}
  body[data-route=new] .bk{border-radius:16px}
  body[data-route=new] .bk b{font-size:12px}
  /* the stage: no box around it — the phone floats on its own */
  body[data-route=new] .pv{background:none;border:0;overflow:visible;animation:st-rise .7s .05s cubic-bezier(.2,.8,.2,1) both}
  body[data-route=new] .pv h3{font-size:11px;font-weight:600;color:var(--t3)}
  body[data-route=new] .preview-format{font-size:11px;color:var(--t2);border-color:rgba(255,255,255,.16);border-radius:999px;padding:6px 11px;background:var(--gl)}
  body[data-route=new] .phone{position:relative;border:0;border-radius:30px;background:#000;
    box-shadow:0 0 0 7px #16171b,0 0 0 8px rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.08),0 70px 130px -34px rgba(0,0,0,1),0 34px 60px -30px rgba(0,0,0,.85),0 0 140px -24px rgba(255,255,255,0.108);
    transform:perspective(1500px) rotateY(calc(var(--mx,0)*2.6deg)) rotateX(calc(var(--my,0)*-1.8deg));transition:transform .6s cubic-bezier(.2,.8,.2,1);animation:st-float 7.5s ease-in-out infinite alternate}
  body[data-route=new] .phone::after{content:"";position:absolute;left:8%;right:8%;bottom:-58px;height:44px;z-index:-1;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,0.126),transparent 72%);filter:blur(16px);pointer-events:none}
  body[data-route=new] .screen{border-radius:30px}
  body[data-route=new] .vsel video{border-radius:30px;border:0;box-shadow:0 0 0 7px #16171b,0 0 0 8px rgba(255,255,255,.24),0 70px 130px -34px #000,0 0 140px -24px rgba(255,255,255,0.108)}
  body[data-route=new] .preview-transport{border:1px solid var(--gs);border-radius:999px;padding:6px 22px 6px 6px;background:var(--gl);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 24px 54px -22px rgba(0,0,0,.9)}
  body[data-route=new] .pv-meta b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
  body[data-route=new] .pv-meta span{font-size:12px;color:var(--t2)}
  body[data-route=new] .drag-note{font-size:11.5px;color:var(--t3);border-left-color:rgba(255,255,255,.14);max-width:118px}
  body[data-route=new] .preview-note{font-size:11.5px;color:var(--t3)}
  body[data-route=new] .pvtabs{width:auto;margin:0}
  body[data-route=new] .pvtabs button{font-size:13px;flex:none}
  body[data-route=new] .studio[data-cur="3"] .preview-header h3{visibility:hidden}
  body[data-route=new] .import-header h2{letter-spacing:-.055em;font-weight:600}
  body[data-route=new] .import-header p{font-size:16px;line-height:1.6;color:var(--t2);max-width:38ch}
  body[data-route=new] .drop{border-radius:28px;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
  body[data-route=new] .drop b{font-size:18px;font-weight:600}
  body[data-route=new] .drop span{font-size:13.5px;color:var(--t2)}
  body[data-route=new] .drop:before{border-radius:50%;width:52px;height:52px}
  body[data-route=new] #s1>details>summary{font-size:13px;color:var(--t2)}
  body[data-route=new] .vlist button{font-size:13px;background:rgba(28,29,34,.9);border-color:rgba(255,255,255,.12);border-radius:12px}
  body[data-route=new] .vsel strong{font-size:14px}
  body[data-route=new] .vsel p{font-size:12.5px}
  body[data-route=new] .locknote,body[data-route=new] .err-box{font-size:13px}
}
@media(min-width:761px) and (max-width:1150px){
  body[data-route=new] .wsteps button{font-size:12px;padding:0 12px 0 6px}
  body[data-route=new] .wsteps li:not(.on) span{display:none}
  body[data-route=new] .wsteps li:not(.on) button{padding:0 7px}
  body[data-route=new] .step-card h2{font-size:25px}
  body[data-route=new] .editor-controls{padding:24px}
}
@media(min-width:761px) and (max-height:760px){
  body[data-route=new] .cp-grid{grid-auto-rows:136px}
  body[data-route=new] .cp{grid-template-rows:94px minmax(0,1fr)}
  body[data-route=new] .step-card h2{font-size:25px;margin-bottom:16px}
  body[data-route=new] .phone::after{display:none}
}
@media(max-width:760px){
  body[data-route=new] .wnav{background:rgba(30,32,38,.82);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%)}
  body[data-route=new] .steps-form{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid var(--gs);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 40px 80px -30px #000}
  body[data-route=new] .pv{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
  body[data-route=new] .wsteps li.on b{background:#fff;color:#000}
  body[data-route=new] .wsteps li.done b{background:var(--acc);border-color:var(--acc);color:#fff}
}
@media(prefers-reduced-motion:reduce){body[data-route=new]::before{animation:none}body[data-route=new] .phone{transform:none}}
@media(prefers-reduced-transparency:reduce){body[data-route=new]::before{display:none}body[data-route=new] #top,body[data-route=new] .steps-form,body[data-route=new] .wnav,body[data-route=new] .wsteps,body[data-route=new] .preview-transport,body[data-route=new] .drop{background:#17181d;backdrop-filter:none;-webkit-backdrop-filter:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body[data-route=new] #top,body[data-route=new] .steps-form,body[data-route=new] .wnav,body[data-route=new] .wsteps,body[data-route=new] .preview-transport,body[data-route=new] .drop{background:#17181d}}

/* ==================================================================================================================
   Site — titanium. One black, one light, no colour: the pictures and the user's own video are the only saturated
   things on screen. Applies to every page (the Studio keeps its glass layer above; this recolours it and gives its
   gallery and phone room to breathe).
   ================================================================================================================== */
html{background:#000}
body{--paper:#000;--surface:rgba(255,255,255,.055);--ink:#f5f5f7;--ink2:rgba(235,235,245,.8);--mute:rgba(235,235,245,.56);--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.26);--wax:#f5f5f7;--ok:#9ad8b6;--danger:#ff6b61;
  --shadow:inset 0 1px 0 rgba(255,255,255,.14),0 34px 70px -40px rgba(0,0,0,.95);background:transparent;color:var(--ink);color-scheme:dark;font-feature-settings:"cv11","ss01","calt"}
/* the light: a soft key from above and two faint fills, drifting very slowly; a vignette keeps the edges black */
body::before,body[data-route=new]::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;will-change:transform;animation:st-aurora 40s ease-in-out infinite alternate;background:
  radial-gradient(44% 38% at 50% 14%,rgba(255,255,255,.15),transparent 70%),radial-gradient(28% 36% at 16% 62%,rgba(198,208,226,.07),transparent 72%),radial-gradient(32% 40% at 86% 70%,rgba(255,240,224,.055),transparent 72%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(125% 100% at 50% 38%,transparent 26%,rgba(0,0,0,.72) 76%,#000 100%)}
h1,h2,h3{font-weight:700;letter-spacing:-.04em}
h2.sec{background:linear-gradient(180deg,#fff 30%,#9da2ad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.mark{font-family:"Inter";font-weight:700;letter-spacing:-.03em}
body:not(.home) #top,body.home.scrolled #top{background:rgba(0,0,0,.55);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-bottom-color:rgba(255,255,255,.08)}
nav a.cta-mini{border-radius:999px;background:#fff;color:#000}
body.home:not(.scrolled) nav a.cta-mini{background:#fff;color:#000}
.btn{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);border-radius:999px;font-weight:600}
.btn:hover:not(:disabled){background:rgba(255,255,255,.15);color:#fff}
.btn.solid{background:linear-gradient(180deg,#fff,#e4e6ec);border-color:#fff;color:#000;box-shadow:inset 0 1px 0 #fff,0 16px 40px -14px rgba(255,255,255,.4)}
.btn.solid:hover:not(:disabled){background:#fff;border-color:#fff;color:#000}
.btn.light{border-color:rgba(255,255,255,.7);color:#fff}
.btn.light:hover:not(:disabled){background:#fff;color:#000}
.btn.danger{color:var(--danger);border-color:rgba(255,107,97,.5)}
.btn.danger:hover:not(:disabled){background:var(--danger);border-color:var(--danger);color:#000}
.btn.small{border-radius:999px}
.seg{background:rgba(118,118,128,.24)}
.seg button.on{background:rgba(255,255,255,.2);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.22)}
.bar{background:rgba(255,255,255,.12)}
.st.err{background:var(--danger);color:#000}
.tag{background:#fff;color:#000}
.player video{background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 100px -40px #000}
.bk img{background:#111}
.can b,.step b,.sheet-h,.fonthead h3,.price,.step-card>h2 b,.cp-auto{font-family:"Inter"}
input[type=text],input[type=search],input[type=number],textarea,select.sel{color:var(--ink)}
/* home: the hero stays as it is; everything under it moves onto the same black */
#hero{background:#000}
#hero .row label.btn.light{background:linear-gradient(180deg,#fff,#e4e6ec);border-color:#fff;color:#000;box-shadow:inset 0 1px 0 #fff,0 18px 44px -14px rgba(255,255,255,.45)}
#hero .row label.btn.light:hover{background:#fff;color:#000}
.scrim{background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.8) 38%,rgba(0,0,0,.34) 74%,rgba(0,0,0,.55) 100%),linear-gradient(0deg,#000,rgba(0,0,0,0) 42%)}
.wall video{background:#111}
.band{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 60%);color:var(--ink);border-top:1px solid rgba(255,255,255,.08)}
.ba-phone{background:#16171b;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 70px 130px -40px #000,0 0 120px -40px rgba(255,255,255,.22)}
.ba-handle{background:#fff}.ba-handle::after{background:#fff;color:#000}
.can li,.pack{border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028));border-color:rgba(255,255,255,.12);transition:border-color .25s,translate .25s,box-shadow .25s}
.can li:hover,.pack:hover{border-color:rgba(255,255,255,.3);translate:0 -3px}
.can b{color:var(--mute);font-weight:600}
.can h3,.step h3{font-weight:650}
.step{border-top-color:rgba(255,255,255,.22)}
.step b{font-weight:700;background:linear-gradient(180deg,#fff,#7d828d);-webkit-background-clip:text;background-clip:text;color:transparent}
.pack.hot{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border-color:rgba(255,255,255,.55);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 50px 100px -44px rgba(255,255,255,.3)}
.pack.hot .btn{background:#fff;border-color:#fff;color:#000}
.pack.hot .btn:hover:not(:disabled){background:#fff;border-color:#fff;color:#000}
.pack li::before{content:"";display:inline-block;width:.42rem;height:.42rem;border-radius:50%;background:currentColor;opacity:.55;margin-right:.7rem;vertical-align:middle}

/* ---- Studio: neutral light instead of blue, and room for the gallery and the phone ---- */
body[data-route=new]{--acc:#f5f5f7;--acc2:#c9ccd3;--wax:#f5f5f7}
body[data-route=new] .wizard .page-title,body[data-route=new] .step-card h2{background:linear-gradient(180deg,#fff 35%,#a4a9b3);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-route=new] .inspector-eyebrow{color:var(--t3)}
body[data-route=new] #go.btn{background:linear-gradient(180deg,#fff,#dfe2e8);border-color:#fff;color:#000;box-shadow:inset 0 1px 0 #fff,0 18px 50px -12px rgba(255,255,255,.55)}
body[data-route=new] #go.btn:hover:not(:disabled){background:#fff}
body[data-route=new] .drop:before{background:linear-gradient(180deg,#fff,#dfe2e8);color:#000;box-shadow:inset 0 1px 0 #fff,0 12px 30px -10px rgba(255,255,255,.5)}
body[data-route=new] .vlist button.on{color:#000}
body[data-route=new] .cp.on{background:rgba(255,255,255,.1)}
body[data-route=new] .brand.on,body[data-route=new] .level.on,body[data-route=new] .bk.on{background:rgba(255,255,255,.1)}
body[data-route=new] .brand.on:after{color:#fff}
body[data-route=new] input[type=text]:focus,body[data-route=new] input[type=search]:focus,body[data-route=new] textarea:focus,body[data-route=new] select.sel:focus{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 4px rgba(255,255,255,.12)}
@media(min-width:761px){
  body[data-route=new] .wsteps li.done b{background:rgba(255,255,255,.3);color:#fff}
  body[data-route=new] .studio{grid-template-columns:minmax(0,1fr) clamp(460px,40vw,680px);gap:32px}
  body[data-route=new] .editor-controls{padding:26px 28px}
  body[data-route=new] .caphead{margin-bottom:14px}
  body[data-route=new] .caption-tabs{margin-bottom:12px}
  body[data-route=new] .caption-browser{gap:10px}
  /* the gallery is the point of this step: as many columns as fit, rows short enough that two or three are always on screen */
  body[data-route=new] .cp-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));grid-auto-rows:112px;gap:12px}
  body[data-route=new] .cp{grid-template-rows:76px minmax(0,1fr);border-radius:16px}
  body[data-route=new] .cp b{padding:8px 12px 9px;font-size:12px}
  body[data-route=new] .caption-selection{margin-top:10px;padding-top:10px}
  body[data-route=new] .caption-selection .label{display:inline;margin:0 10px 0 0}
  body[data-route=new] .caption-selection strong{display:inline}
  body[data-route=new] .bk-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  body[data-route=new] .levels{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  body[data-route=new] .phone{width:min(100%,calc((100svh - 330px)*.5625),440px)}
}
/* wide screens: title + tabs share a row, search + categories share a row, so the gallery gets the height */
@media(min-width:1400px){
  body[data-route=new] .caption-step:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;column-gap:14px;row-gap:14px}
  body[data-route=new] .caphead{grid-column:1;grid-row:1;margin:0}
  body[data-route=new] .caption-tabs{grid-column:2;grid-row:1;margin:0;align-self:center}
  body[data-route=new] .caption-tabs button{padding:0 18px;flex:none}
  body[data-route=new] .caption-browser,body[data-route=new] .caption-custom{grid-column:1/-1;grid-row:2;min-height:0}
  body[data-route=new] .caption-selection{grid-column:1/-1;grid-row:3;margin-top:0}
  body[data-route=new] .caption-browser{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:14px;row-gap:12px;align-items:center}
  body[data-route=new] .caption-search{grid-column:1;grid-row:1}
  body[data-route=new] #cpgroups{grid-column:2;grid-row:1}
  body[data-route=new] .cp-grid{grid-column:1/-1;grid-row:2;align-self:stretch}
}
@media(min-width:761px) and (max-width:1050px){body[data-route=new] .studio{grid-template-columns:minmax(0,1fr) 400px;gap:20px}}
@media(min-width:761px) and (max-height:760px){
  body[data-route=new] .cp-grid{grid-auto-rows:104px}
  body[data-route=new] .cp{grid-template-rows:68px minmax(0,1fr)}
  body[data-route=new] .phone{width:min(100%,calc((100svh - 300px)*.5625),440px)}
}
@media(max-width:760px){body[data-route=new] .wsteps li.done b{background:rgba(255,255,255,.3);border-color:transparent;color:#fff}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}.can li:hover,.pack:hover{translate:none}}
@media(prefers-reduced-transparency:reduce){body::before{display:none}}

/* ==================================================================================================================
   Brand — iris. Black stays; the cold Apple white becomes a warm cream and the product gets one colour of its own:
   a single iris violet, used only where the user acts or chooses (current step, selected card, the button that makes
   the video, focus). Change --acc to re-colour the whole product. Also: the Studio gives the video and the tools
   the room they need, and the home gallery becomes a moving strip.
   ================================================================================================================== */
body,body[data-route=new]{--acc:#7b2cff;--acc2:color-mix(in srgb,var(--acc) 52%,#fff);--accg:color-mix(in srgb,var(--acc) 55%,transparent);--ink:#f4efe6;--t1:#f4efe6;--wax:var(--acc)}
body::before,body[data-route=new]::before{background:radial-gradient(42% 36% at 50% 10%,color-mix(in srgb,var(--acc) 17%,transparent),transparent 70%),radial-gradient(28% 36% at 14% 64%,rgba(255,236,214,.05),transparent 72%),radial-gradient(32% 40% at 88% 72%,color-mix(in srgb,var(--acc) 7%,transparent),transparent 72%)}
:focus-visible,body[data-route=new] :focus-visible{outline-color:var(--acc2)}
h2.sec{background:linear-gradient(180deg,#fbf7ee 30%,#a39d93);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{color:var(--acc2)}
.kicker::before{background:var(--acc)}
#hero .kicker{color:rgba(244,239,230,.75)}
.btn.solid,nav a.cta-mini,body.home:not(.scrolled) nav a.cta-mini{background:linear-gradient(180deg,#fbf7ee,#e9e3d7);border-color:#fbf7ee;color:#0b0a0d}
.btn.solid:hover:not(:disabled){background:#fffdf7;border-color:#fffdf7;color:#000}
/* the one coloured action on a page */
#son .btn.solid,.pack.hot .btn,body[data-route=new] #go.btn{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 80%,#fff),var(--acc));border-color:rgba(255,255,255,.3);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 46px -12px var(--accg)}
#son .btn.solid:hover:not(:disabled),.pack.hot .btn:hover:not(:disabled),body[data-route=new] #go.btn:hover:not(:disabled){background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 68%,#fff),color-mix(in srgb,var(--acc) 90%,#fff));color:#fff;border-color:rgba(255,255,255,.4);translate:0 -1px}
.tag{background:var(--acc);color:#fff}
.can b{color:var(--acc2)}
.pack.hot{border-color:color-mix(in srgb,var(--acc) 75%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 20%,transparent),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 50px 110px -44px var(--accg)}
.step b{background:linear-gradient(180deg,#fbf7ee,var(--acc) 140%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pill::before{background:var(--acc)}

/* ---- home: "all of these were made with this tool" is a strip of videos that never stops ---- */
#ornek{position:relative;overflow:hidden}
.flow-word{position:absolute;left:0;right:0;top:46%;z-index:0;pointer-events:none;white-space:nowrap;overflow:hidden;opacity:.5}
.flow-word span{display:inline-block;font:800 clamp(7rem,17vw,17rem)/1 "Inter";letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(244,239,230,.1);animation:flow 44s linear infinite reverse;padding-right:.3em;will-change:transform}
.flow{position:relative;z-index:1;overflow:hidden;rotate:-2.5deg;margin:0 -4%;padding:46px 0 64px}
.flow::before,.flow::after{content:"";position:absolute;top:0;bottom:0;width:13%;z-index:3;pointer-events:none}      /* the ends dissolve into the black page (cheaper than a mask over moving video) */
.flow::before{left:0;background:linear-gradient(90deg,#000 20%,transparent)}
.flow::after{right:0;background:linear-gradient(270deg,#000 20%,transparent)}
.flow-track{display:flex;gap:18px;padding-right:18px;width:max-content;animation:flow 17s linear infinite;will-change:transform}
.flow:hover .flow-track{animation-play-state:paused}
.flow figure{position:relative;flex:none;width:clamp(170px,17vw,250px);margin:0;border-radius:22px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -40px #000;transition:scale .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,rotate .35s}
.flow figure:nth-child(odd){translate:0 30px;rotate:1.5deg}
.flow figure:nth-child(even){rotate:-1.5deg}
.flow figure:hover{scale:1.07;rotate:0deg;z-index:2;box-shadow:0 0 0 2px var(--acc),0 50px 100px -30px #000,0 0 80px -20px var(--accg)}
.flow video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}
.flow figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;display:flex;gap:.6rem;align-items:baseline;font:600 .8rem/1.3 "Inter";color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent)}
.flow figcaption b{color:var(--acc2);font-weight:700}
@keyframes flow{to{transform:translate3d(-50%,0,0)}}

/* ---- Studio: accent, room, and small motion ---- */
body[data-route=new] .wizard .page-title,body[data-route=new] .step-card h2{background:linear-gradient(180deg,#fbf7ee 35%,#aaa397);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-route=new] .btn.solid{background:linear-gradient(180deg,#fbf7ee,#e9e3d7);border-color:#fbf7ee;color:#0b0a0d;box-shadow:inset 0 1px 0 #fff,0 14px 34px -14px rgba(251,247,238,.4)}
body[data-route=new] .cp.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);box-shadow:0 0 0 2px var(--acc),0 18px 44px -14px var(--accg)}
body[data-route=new] .brand.on,body[data-route=new] .level.on,body[data-route=new] .bk.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);box-shadow:0 0 0 1px var(--acc),0 16px 40px -18px var(--accg)}
body[data-route=new] .brand.on:after{color:var(--acc2)}
body[data-route=new] .inspector-eyebrow{color:var(--acc2)}
body[data-route=new] .vlist button.on{background:var(--acc);border-color:var(--acc);color:#fff}
body[data-route=new] .drop:before{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 80%,#fff),var(--acc));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px -8px var(--accg)}
body[data-route=new] .drop:hover,body[data-route=new] .drop.over{border-color:var(--acc2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 50px 100px -40px #000,0 0 80px -24px var(--accg)}
body[data-route=new] input[type=text]:focus,body[data-route=new] input[type=search]:focus,body[data-route=new] textarea:focus,body[data-route=new] select.sel:focus{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
body[data-route=new] .chip.on{background:#fbf7ee;border-color:#fbf7ee;color:#0b0a0d}
body[data-route=new] .phone{box-shadow:0 0 0 7px #151418,0 0 0 8px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 70px 130px -34px #000,0 34px 60px -30px rgba(0,0,0,.85),0 0 150px -30px color-mix(in srgb,var(--acc) 42%,transparent)}
body[data-route=new] .phone::after{background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--acc) 40%,transparent),transparent 72%)}
body[data-route=new] .steps-form{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(255,255,255,.06),0 60px 130px -34px #000,0 22px 46px -22px rgba(0,0,0,.7),0 0 120px -40px color-mix(in srgb,var(--acc) 34%,transparent)}
/* sliders: a hair-line track and a round thumb, drawn the same in every browser */
body[data-route=new] input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;accent-color:var(--acc)}
body[data-route=new] input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(255,255,255,.2)}
body[data-route=new] input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:#fbf7ee;border:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 28%,transparent),0 4px 12px rgba(0,0,0,.5);cursor:grab;transition:box-shadow .2s,scale .2s}
body[data-route=new] input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 40%,transparent),0 4px 12px rgba(0,0,0,.5)}
body[data-route=new] input[type=range]:active::-webkit-slider-thumb{scale:1.12;cursor:grabbing}
body[data-route=new] input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.2)}
body[data-route=new] input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fbf7ee;border:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 28%,transparent)}
@keyframes st-pop{from{opacity:0;translate:0 14px;scale:.96}}
@keyframes st-in{from{opacity:0;translate:0 10px}}
@media(min-width:761px){
  body[data-route=new] .wsteps li.on button{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 80%,#fff),var(--acc));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -8px var(--accg)}
  body[data-route=new] .wsteps li.on b{background:#fff;color:var(--acc)}
  body[data-route=new] .wsteps li.done b{background:color-mix(in srgb,var(--acc) 35%,transparent);color:#fff}
  /* the stage: the phone takes whatever height its row has, so nothing can ever slide under it */
  body[data-route=new] .pv{padding:4px 24px 0}
  body[data-route=new] .preview-stage{grid-template-rows:auto minmax(0,1fr) auto;gap:14px}
  body[data-route=new] .preview-header{display:none}
  body[data-route=new] .phone{width:auto;height:calc(100% - 18px);max-width:100%;aspect-ratio:9/16;margin:0}
  body[data-route=new] .screen{width:100%;height:100%;aspect-ratio:auto}
  body[data-route=new] .preview-bottom{gap:8px}
  body[data-route=new] .preview-note{font-size:11px;opacity:.75}
  /* the inspector: wider, with air inside */
  body[data-route=new] .studio{grid-template-columns:minmax(0,1fr) clamp(520px,44vw,780px);gap:36px}
  body[data-route=new] .editor-controls{padding:34px 36px}
  body[data-route=new] .caption-quick{gap:14px}
  body[data-route=new] .caption-quick>label{font-size:14px}
  body[data-route=new] .quick-position{margin-top:20px}
  body[data-route=new] .caprow{margin-top:28px;padding-top:28px;gap:18px}
  body[data-route=new] .caprow>.label{font-size:14px;font-weight:600;color:var(--t1)}
  body[data-route=new] .swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  body[data-route=new] .sw input[type=color]{width:34px;height:34px;min-width:34px}
  body[data-route=new] .grid2{gap:26px 28px}
  body[data-route=new] .field{gap:12px}
  body[data-route=new] details.adv{margin-top:28px;padding-top:20px}
  /* the gallery: cut rows fade out instead of ending in a hard edge, and rows settle on a line */
  body[data-route=new] .cp-grid{scroll-snap-type:y proximity;padding:12px 4px 26px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16px,#000 calc(100% - 30px),transparent 100%)}
  body[data-route=new] .cp{scroll-snap-align:start;scroll-margin-top:12px;animation:st-pop .45s cubic-bezier(.2,.8,.2,1) backwards}
  body[data-route=new] .cp:nth-child(2){animation-delay:22ms}
  body[data-route=new] .cp:nth-child(3){animation-delay:44ms}
  body[data-route=new] .cp:nth-child(4){animation-delay:66ms}
  body[data-route=new] .cp:nth-child(5){animation-delay:88ms}
  body[data-route=new] .cp:nth-child(6){animation-delay:110ms}
  body[data-route=new] .cp:nth-child(7){animation-delay:132ms}
  body[data-route=new] .cp:nth-child(8){animation-delay:154ms}
  body[data-route=new] .cp:nth-child(9){animation-delay:176ms}
  body[data-route=new] .cp:nth-child(10){animation-delay:198ms}
  body[data-route=new] .cp:nth-child(11){animation-delay:220ms}
  body[data-route=new] .cp:nth-child(12){animation-delay:242ms}
  body[data-route=new] .cp:nth-child(13){animation-delay:264ms}
  body[data-route=new] .cp:nth-child(14){animation-delay:286ms}
  body[data-route=new] .cp:nth-child(15){animation-delay:308ms}
  body[data-route=new] .cp:nth-child(16){animation-delay:330ms}
  body[data-route=new] .step-card:not([hidden])>*{animation:st-in .45s cubic-bezier(.2,.8,.2,1) backwards}
  body[data-route=new] .step-card:not([hidden])>*:nth-child(2){animation-delay:.05s}
  body[data-route=new] .step-card:not([hidden])>*:nth-child(3){animation-delay:.1s}
  body[data-route=new] .step-card:not([hidden])>*:nth-child(n+4){animation-delay:.15s}
}
@media(min-width:1400px){
  /* enough width: the steps move up into the top bar and the whole height below belongs to the video */
  body[data-route=new] .wizard{grid-template-rows:minmax(0,1fr);padding-top:84px}
  body[data-route=new] .editor-toolbar{position:fixed;top:10px;left:50%;translate:-50% 0;z-index:45;display:block}
  body[data-route=new] .editor-heading{display:none}
  body[data-route=new] .caption-custom .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:761px) and (max-width:1100px){body[data-route=new] .studio{grid-template-columns:minmax(0,1fr) 420px;gap:20px}body[data-route=new] .editor-controls{padding:26px}body[data-route=new] .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){body[data-route=new] .wsteps li.on b{background:var(--acc);border-color:var(--acc);color:#fff}body[data-route=new] .wsteps li.done b{background:color-mix(in srgb,var(--acc) 35%,transparent);border-color:transparent;color:#fff}.flow{rotate:-2deg}.flow figure{width:150px}}
@media(prefers-reduced-motion:reduce){.flow-track,.flow-word span{animation:none}.flow{overflow-x:auto}}

/* ---- Space, flags, team ---- */
.flag{width:22px;height:16px;border-radius:4px;overflow:hidden;display:block;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.langpick{position:relative}
.lp-btn{display:flex;align-items:center;gap:.5rem;height:40px;padding:0 .8rem 0 .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);font:600 .82rem/1 "Inter";color:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.lp-btn:hover,.lp-btn[aria-expanded=true]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.lp-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:172px;padding:6px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(20,20,24,.82);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 60px -20px #000;z-index:70;display:grid;gap:2px}
.lp-menu[hidden]{display:none}
.lp-menu button{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border:0;border-radius:10px;background:none;font:500 .9rem/1 "Inter";color:var(--ink);cursor:pointer;text-align:left}
.lp-menu button:hover{background:rgba(255,255,255,.1)}
.lp-menu button[aria-selected=true]{background:color-mix(in srgb,var(--acc) 30%,transparent)}
#hero .row label.btn.light{background:linear-gradient(180deg,#fbf7ee,#e9e3d7);border-color:#fbf7ee;color:#0b0a0d;box-shadow:inset 0 1px 0 #fff,0 18px 44px -14px rgba(251,247,238,.45)}
#hero .row label.btn.light:hover{background:#fffdf7;color:#000}
.ba{grid-template-columns:minmax(0,1fr) clamp(300px,27vw,400px)}
.ba-src{margin-top:16px;text-align:center;font:500 .8rem/1.4 "Inter";color:var(--mute)}
.ba-tag{background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}
.ba-tag.r{background:var(--acc);border-color:transparent}
.team{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(28px,6vw,90px);align-items:start}
.team-lede{font:400 1.12rem/1.6 "Inter";color:var(--ink2);max-width:34rem;margin-top:1.3rem}
.team-list{list-style:none;display:grid;gap:.7rem;margin-top:1.8rem}
.team-list li{display:flex;gap:.8rem;align-items:baseline;font:500 1rem/1.45 "Inter"}
.team-list li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--acc);flex:none;translate:0 -.1em;box-shadow:0 0 14px var(--accg)}
.team-form{display:grid;gap:1.1rem;padding:clamp(22px,2.6vw,34px);border-radius:28px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 50px 110px -50px #000}
.team-form .grid2{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:1rem;margin:0}
.team-form input,.team-form textarea{width:100%;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.8rem .95rem;font:400 .98rem/1.5 "Inter";color:var(--ink)}
.team-form textarea{min-height:120px;resize:vertical}
.team-form input:focus,.team-form textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 24%,transparent)}
.langchip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--ink2);cursor:pointer;font:500 .88rem/1 "Inter";transition:background .2s,border-color .2s,color .2s}
.langchip.on{background:color-mix(in srgb,var(--acc) 26%,transparent);border-color:var(--acc);color:#fff}
.langchip.fixed{cursor:default}
@media(max-width:900px){.team{grid-template-columns:1fr}}
/* the studio as a room: both objects take a position, a size and a lean */
.space-reset{position:fixed;left:24px;bottom:22px;z-index:60;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(24,24,28,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#f4efe6;font:600 .82rem/1 "Inter";cursor:pointer}
.space-reset[hidden]{display:none}
.space-reset:hover{border-color:var(--acc)}
@media(min-width:1100px){
  html:has(body[data-route=new]){overflow:hidden}
  body[data-route=new] .steps-form{position:relative;transform:translate3d(var(--sx,0px),var(--sy,0px),0) perspective(1900px) rotateY(var(--sr,0deg)) scale(var(--ss,1));transform-origin:center;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  body[data-route=new] .phone{transform:translate3d(var(--sx,0px),var(--sy,0px),0) perspective(1500px) rotateY(calc(var(--mx,0)*2.6deg + var(--sr,0deg))) rotateX(calc(var(--my,0)*-1.8deg)) scale(var(--ss,1))}
  body.spacing{user-select:none;-webkit-user-select:none}
  body.spacing .steps-form,body.spacing .phone{transition:none;animation-play-state:paused}
  body[data-route=new] .steps-form::before{content:"";position:absolute;top:9px;left:50%;width:46px;height:5px;margin-left:-23px;border-radius:3px;background:rgba(255,255,255,.26);z-index:5;pointer-events:none;transition:background .2s,width .2s,margin .2s}
  body[data-route=new] .steps-form:hover::before{background:rgba(255,255,255,.5);width:64px;margin-left:-32px}
  body[data-route=new] .steps-form::after{content:"";position:absolute;left:10px;bottom:10px;width:14px;height:14px;border-left:2px solid rgba(255,255,255,.32);border-bottom:2px solid rgba(255,255,255,.32);border-bottom-left-radius:8px;pointer-events:none;z-index:5}
  body[data-route=new] .phone::before{content:"";position:absolute;top:12px;left:50%;width:54px;height:5px;margin-left:-27px;border-radius:3px;background:rgba(255,255,255,.55);box-shadow:0 1px 6px rgba(0,0,0,.5);z-index:6;pointer-events:none;opacity:0;transition:opacity .2s}
  body[data-route=new] .phone:hover::before{opacity:1}
}

/* ---- Home v3: transformation, footer, cursor, scrollbar ---- */
/* the pointer and the scrollbar belong to the site: a cream arrow, a ring over anything you can press, a thin glass thumb */
html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M5 3l17 9.6-7.4 1.9-3.7 6.9z' fill='%23f4efe6' stroke='%230b0a0d' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3,auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
a,button,summary,label,select,[role=button],[role=option],input[type=range],input[type=color],input[type=file],input[type=checkbox],.drop,.ba-screen{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='11' fill='none' stroke='%230b0a0d' stroke-opacity='.55' stroke-width='4'/%3E%3Ccircle cx='16' cy='16' r='11' fill='none' stroke='%23f4efe6' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='3.2' fill='%23f4efe6' stroke='%230b0a0d' stroke-width='1'/%3E%3C/svg%3E") 16 16,pointer!important}
input[type=text],input[type=search],input[type=number],textarea{cursor:text}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--acc) 80%,#fff);border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* the strip: one constant speed, nothing recomputed while it runs */
.flow{contain:layout paint}
.flow-track{animation-duration:22s}
.flow figure{transition:scale .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;backface-visibility:hidden}
#ornek{padding-top:clamp(70px,11vh,120px)}
/* raw take -> finished edit: two objects in one room, sized by the viewport so the whole thing is always on screen */
.tfsec{position:relative;min-height:100svh;display:grid;align-items:center;padding:clamp(84px,11vh,120px) var(--pad) clamp(36px,6vh,70px);border-top:1px solid rgba(255,255,255,.07);background:radial-gradient(60% 55% at 72% 50%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 70%)}
.tf{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(24px,5vw,80px);align-items:center;max-width:1400px;margin:0 auto;width:100%}
.tf-lede{font:400 1.1rem/1.6 "Inter";color:var(--ink2);max-width:32rem;margin-top:1.2rem}
.tf-list{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.8rem;max-width:34rem}
.tf-list li{padding:.55rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font:500 .9rem/1 "Inter";color:var(--ink2)}
.tf-stage{--ph:min(72svh,700px);position:relative;display:flex;align-items:center;justify-content:center;perspective:1700px;height:var(--ph)}
.tf-stage figure{position:relative;margin:0;border-radius:26px;overflow:hidden;background:#0c0c0f;flex:none}
.tf-stage video{display:block;width:100%;height:100%;object-fit:cover}
.tf-raw{width:min(34vw,calc(var(--ph)*.86));aspect-ratio:16/9;transform:rotateY(22deg) translateZ(-60px);margin-right:-7%!important;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 50px 110px -40px #000;opacity:.92;animation:tf-float 9s ease-in-out infinite alternate}
.tf-out{height:var(--ph);aspect-ratio:9/16;z-index:2;box-shadow:0 0 0 7px #151418,0 0 0 8px rgba(255,255,255,.22),0 70px 130px -40px #000,0 0 150px -30px var(--accg);animation:tf-float 8s ease-in-out infinite alternate-reverse}
.tf-stage figcaption{position:absolute;left:12px;top:12px;display:flex;gap:.5rem;align-items:center;padding:.4rem .7rem;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);font:500 .72rem/1 "Inter";color:#fff}
.tf-stage figcaption b{font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tf-stage figcaption span{opacity:.72}
.tf-out figcaption b{color:var(--acc2)}
.tf-link{position:absolute;left:50%;top:50%;z-index:3;display:flex;gap:7px;translate:-135% -50%;pointer-events:none}
.tf-link i{width:9px;height:9px;border-radius:50%;background:var(--acc2);opacity:.2;animation:tf-dot 1.5s ease-in-out infinite}
.tf-link i:nth-child(2){animation-delay:.2s}.tf-link i:nth-child(3){animation-delay:.4s}
@keyframes tf-dot{40%{opacity:1;scale:1.35}80%{opacity:.2;scale:1}}
@keyframes tf-float{from{translate:0 -7px}to{translate:0 7px}}
@media(max-width:980px){.tfsec{min-height:0}.tf{grid-template-columns:1fr}.tf-stage{--ph:min(64svh,560px)}.tf-raw{width:min(52vw,calc(var(--ph)*.8));margin-right:-12%!important}}
@media(max-width:560px){.tf-raw{display:none}.tf-link{display:none}}
/* footer */
.foot{position:relative;margin-top:clamp(40px,8vh,90px);border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 55%);overflow:hidden}
.foot-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr);gap:clamp(28px,6vw,90px);max-width:1280px;margin:0 auto;padding:clamp(48px,8vh,84px) var(--pad) clamp(20px,4vh,40px)}
.foot-brand{display:grid;gap:1.1rem;justify-items:start;align-content:start}
.foot-brand .mark{font-size:1.5rem}
.foot-brand p{font:400 1.02rem/1.6 "Inter";color:var(--ink2);max-width:26rem}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.foot-cols>div{display:grid;gap:.7rem;align-content:start;justify-items:start}
.foot-cols h4{font:600 .72rem/1 "Inter";letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:.4rem}
.foot-cols a,.foot-cols button{background:none;border:0;padding:0;font:500 .95rem/1.3 "Inter";color:var(--ink2);text-decoration:none;text-align:left;transition:color .2s,translate .2s}
.foot-cols a:hover,.foot-cols button:hover{color:#fff;translate:3px 0}
.foot-note{font:400 .82rem/1.5 "Inter";color:var(--mute);margin-top:.6rem;max-width:16rem}
.foot-word{font:800 clamp(7rem,24vw,24rem)/.78 "Inter";letter-spacing:-.07em;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(244,239,230,.09);background:linear-gradient(180deg,rgba(244,239,230,.1),transparent 85%);-webkit-background-clip:text;background-clip:text;user-select:none;pointer-events:none;margin-bottom:-.12em}
.foot-base{position:relative;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;max-width:1280px;margin:0 auto;padding:18px var(--pad) 26px;border-top:1px solid rgba(255,255,255,.07);font:500 .8rem/1.4 "Inter";color:var(--mute)}
@media(max-width:820px){.foot-in{grid-template-columns:1fr}.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.tf-raw,.tf-out,.tf-link i{animation:none}}
/* strip focus: the video under the pointer stays sharp, the rest step back */
.flow figure{transition:scale .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,filter .35s,opacity .35s}
@media(hover:hover){.flow:hover figure:not(:hover){filter:blur(5px) brightness(.45);opacity:.9}}
/* ---- Home v4: the fun half, slogans ---- */
.fun-h{max-width:20ch}
.strike{position:relative;display:inline-block;-webkit-text-fill-color:rgba(244,239,230,.42)}
.strike::after{content:"";position:absolute;left:-4%;right:-4%;top:54%;height:.09em;border-radius:.1em;background:var(--acc);rotate:-3deg;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.7,0,.2,1) .25s;box-shadow:0 0 22px var(--accg)}
.fun-h.in .strike::after{transform:scaleX(1)}
.fun-sub{margin-top:1.1rem;font:500 1.12rem/1.5 "Inter";color:var(--ink2)}
.chores{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(30px,5vh,56px)}
.chore{position:relative;display:grid;align-content:start;gap:.5rem;padding:18px 18px 22px;border-radius:26px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028));opacity:0;translate:0 26px;transition:opacity .6s,translate .6s cubic-bezier(.2,.8,.2,1),border-color .25s,rotate .35s,box-shadow .3s;transition-delay:calc(var(--i)*60ms),calc(var(--i)*60ms),0s,0s,0s}
.chore.in{opacity:1;translate:0 0}
.chore:hover{border-color:color-mix(in srgb,var(--acc) 70%,transparent);rotate:-1.2deg;box-shadow:0 30px 70px -34px var(--accg)}
.chore:nth-child(even):hover{rotate:1.2deg}
.chore h3{font:650 1.12rem/1.2 "Inter";letter-spacing:-.025em;margin-top:.1rem}
.chore>p:last-child{font:400 .93rem/1.5 "Inter";color:var(--ink2)}
.chore-old{font:500 .8rem/1.3 "Inter";color:var(--mute)}
.chore-old s{text-decoration:none;background:linear-gradient(var(--acc),var(--acc)) left 55%/0 2px no-repeat;transition:background-size .6s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i)*60ms + .35s)}
.chore.in .chore-old s{background-size:100% 2px}
.chore-art{height:92px;border-radius:16px;margin-bottom:.5rem;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden}
.chore-art .w{width:34px;height:14px;border-radius:999px;background:rgba(255,255,255,.2);animation:ca-w 2.4s infinite}
.chore-art .w:nth-child(2){width:46px;animation-delay:.8s}.chore-art .w:nth-child(3){width:28px;animation-delay:1.6s}
@keyframes ca-w{0%,28%{background:var(--acc);scale:1.12}34%,100%{background:rgba(255,255,255,.2);scale:1}}
.chore-art .cd{width:112px;padding:10px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;gap:7px}
.chore-art .cd i{height:7px;border-radius:4px;background:rgba(255,255,255,.55);transform-origin:left;animation:ca-ln 3s infinite}
.chore-art .cd i:nth-child(2){width:78%;animation-delay:.3s}.chore-art .cd i:nth-child(3){width:56%;animation-delay:.6s;background:var(--acc2)}
@keyframes ca-ln{0%{transform:scaleX(0)}30%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.chore-art .fr{width:96px;height:56px;border-radius:8px;border:2px solid var(--acc2);box-shadow:0 0 0 400px rgba(255,255,255,.05);animation:ca-fr 3.4s ease-in-out infinite}
@keyframes ca-fr{0%,100%{scale:1;translate:0 0}50%{scale:.58;translate:16px -6px}}
.chore-art .dt{width:26px;height:26px;border-radius:50%;background:var(--acc);animation:ca-dt 2.6s ease-in-out infinite}
.chore-art .dt:nth-child(2){background:#f4efe6;animation-delay:.2s}.chore-art .dt:nth-child(3){background:#e0932f;animation-delay:.4s}
@keyframes ca-dt{0%,100%{translate:0 0}50%{translate:0 -12px}}
.chore-art .bar{width:5px;height:16px;border-radius:3px;background:rgba(255,255,255,.6);animation:ca-bar 1.2s ease-in-out infinite}
.chore-art .bar:nth-child(odd){animation-delay:.2s}.chore-art .bar:nth-child(3n){animation-delay:.45s;background:var(--acc2)}
@keyframes ca-bar{0%,100%{height:12px}50%{height:46px}}
.chore-art .ty{width:0;height:16px;border-radius:4px;background:rgba(255,255,255,.7);border-right:3px solid var(--acc);animation:ca-ty 3s steps(12) infinite}
@keyframes ca-ty{0%{width:0}60%,90%{width:120px}100%{width:0}}
.chore-art .bx{width:38px;height:56px;border-radius:8px;background:linear-gradient(160deg,var(--acc),#e0932f)}.chore-art .bx.b2{background:rgba(255,255,255,.14);animation:ca-bx 3s infinite}
.chore-art .go{width:10px;height:10px;border-radius:50%;background:var(--acc2);animation:ca-go 3s ease-in-out infinite}
@keyframes ca-go{0%{translate:-22px 0;opacity:0}20%{opacity:1}70%{translate:22px 0;opacity:1}100%{translate:22px 0;opacity:0}}
@keyframes ca-bx{0%,60%{background:rgba(255,255,255,.14)}75%,100%{background:linear-gradient(160deg,var(--acc),#e0932f)}}
.chore-art .flag{width:34px;height:24px;border-radius:6px;animation:ca-fl 3.2s ease-in-out infinite}
.chore-art .flag:nth-child(2){animation-delay:.25s}.chore-art .flag:nth-child(3){animation-delay:.5s}.chore-art .flag:nth-child(4){animation-delay:.75s}
@keyframes ca-fl{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(max-width:1100px){.chores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.chores{grid-template-columns:1fr}}
/* how it works: three slogans, each with a small moving proof */
.slogs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(30px,5vh,56px)}
.slog{position:relative;display:grid;align-content:start;gap:.8rem;padding:22px 24px 30px;border-radius:30px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));overflow:hidden;opacity:0;translate:0 30px;transition:opacity .7s,translate .7s cubic-bezier(.2,.8,.2,1),border-color .3s}
.slog.in{opacity:1;translate:0 0}.slog.s1{transition-delay:.1s}.slog.s2{transition-delay:.2s}
.slog:hover{border-color:color-mix(in srgb,var(--acc) 70%,transparent)}
.slog-art{height:150px;border-radius:20px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:0 18px;margin-bottom:.6rem}
.slog-step{display:flex;gap:.7rem;align-items:center;font:600 .74rem/1 "Inter";letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.slog-step b{color:var(--acc2)}
.slog h3{font:700 clamp(1.5rem,2.3vw,2.25rem)/1.08 "Inter";letter-spacing:-.04em;background:linear-gradient(180deg,#fbf7ee 30%,#a39d93);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.slog>p:last-child{font:400 1rem/1.55 "Inter";color:var(--ink2);max-width:30rem}
.slog-art .flag{width:44px;height:31px;border-radius:7px;filter:saturate(.35) brightness(.6);animation:sl-fl 4.8s infinite}
.slog-art .flag:nth-child(2){animation-delay:.8s}.slog-art .flag:nth-child(3){animation-delay:1.6s}.slog-art .flag:nth-child(4){animation-delay:2.4s}.slog-art .flag:nth-child(5){animation-delay:3.2s}.slog-art .flag:nth-child(6){animation-delay:4s}
@keyframes sl-fl{0%,14%{filter:none;scale:1.22;box-shadow:0 0 0 3px var(--acc),0 0 30px var(--accg)}20%,100%{filter:saturate(.35) brightness(.6);scale:1;box-shadow:0 0 0 1px rgba(255,255,255,.2)}}
.slog-cap{display:inline-flex;gap:.45em;padding:.6em 1.2em;border-radius:999px;background:rgba(10,26,21,.6);border:1px solid rgba(255,255,255,.22);font:700 1.25rem/1 "Inter";color:rgba(255,255,255,.4)}
.slog-cap i{font-style:normal;animation:sl-cap 3.2s infinite}
.slog-cap i:nth-child(2){animation-delay:.8s}.slog-cap i:nth-child(3){animation-delay:1.6s}.slog-cap i:nth-child(4){animation-delay:2.4s}
@keyframes sl-cap{0%,22%{color:var(--acc2)}26%,100%{color:#fff}}
.slog-art .sl{position:relative;width:74%;height:5px;border-radius:3px;background:rgba(255,255,255,.18)}
.slog-art .sl i{position:absolute;top:-8px;left:20%;width:21px;height:21px;border-radius:50%;background:#fbf7ee;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 34%,transparent);animation:sl-th 4s ease-in-out infinite}
.slog-art .sl:nth-child(2) i{animation-delay:.6s;animation-duration:5s}.slog-art .sl:nth-child(3) i{animation-delay:1.2s;animation-duration:3.4s}
@keyframes sl-th{0%,100%{left:14%}50%{left:74%}}
.slog-art .tg{width:50px;height:28px;border-radius:999px;background:var(--acc);position:relative}
.slog-art .tg i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;animation:sl-tg 3s ease-in-out infinite}
@keyframes sl-tg{0%,40%{translate:0 0}55%,95%{translate:22px 0}100%{translate:0 0}}
.slog.s2 .slog-art{flex-direction:column;gap:17px}
.slog{grid-template-columns:minmax(0,1fr)}
.slog-cap{flex-wrap:wrap;justify-content:center;max-width:100%;font-size:clamp(.95rem,1.35vw,1.25rem);row-gap:.35em}
@media(max-width:980px){.slogs{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.chore-art *,.slog-art *{animation:none!important}.chore,.slog{opacity:1;translate:none}.strike::after,.chore-old s{transition:none}}
/* ---- Captions v3: arrival, sound, references ---- */
body[data-route=new] .capblock{display:grid;gap:12px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
body[data-route=new] .capblock>.label{font-size:14px;font-weight:600;color:var(--t1)}
body[data-route=new] .capblock .caprow{margin:0;padding:0;border:0}
body[data-route=new] .capblock .chips{display:flex;flex-wrap:wrap;gap:8px}
body[data-route=new] .capopts{display:flex;flex-wrap:wrap;gap:10px;width:100%}
body[data-route=new] .capopts .seg{margin:0}
.pv-cap.first span{animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:backwards}
.pv-cap.first.an-rise span{animation-name:pc-rise}.pv-cap.first.an-drop span{animation-name:pc-drop}.pv-cap.first.an-slide span{animation-name:pc-slide}.pv-cap.first.an-fade span{animation-name:pc-fade}
.pv-cap.first.an-pop span{animation-name:pc-pop;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}.pv-cap.first.an-zoom span{animation-name:pc-zoom}.pv-cap.first.an-words span{animation-name:pc-fade;animation-duration:.15s}
@keyframes pc-rise{from{opacity:0;translate:0 60%}}@keyframes pc-drop{from{opacity:0;translate:0 -110%}}@keyframes pc-slide{from{opacity:0;translate:-22% 0}}@keyframes pc-fade{from{opacity:0}}
@keyframes pc-pop{from{opacity:0;scale:.55}}@keyframes pc-zoom{from{opacity:0;scale:1.7}}
.refs{display:grid;gap:10px;margin-top:20px}
.refdrop{display:grid;gap:4px;padding:16px 18px;border-radius:16px;border:1px dashed rgba(255,255,255,.26);background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}
.refdrop:hover{border-color:var(--acc2);background:rgba(255,255,255,.07)}
.refdrop b{font:600 14px/1.3 "Inter"}.refdrop span{font:400 12.5px/1.4 "Inter";color:var(--t2,var(--mute))}
.reflist{display:flex;flex-wrap:wrap;gap:8px}
.ref{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 8px 5px 5px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font:500 12.5px/1 "Inter"}
.ref img,.ref .refv{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none;background:rgba(255,255,255,.1)}
.ref .refv{display:grid;place-items:center}.ref .refv::after{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.ref b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.ref button{width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:15px;line-height:1;padding:0}
.refnote{font-size:12px;line-height:1.5}
/* ---- Captions v4: four tabs ---- */
body[data-route=new] .caption-tabs button{flex:1;white-space:nowrap}
body[data-route=new] .caption-pane{padding-right:4px}
body[data-route=new] .pane-lede{font:400 14px/1.55 "Inter";color:var(--t2);margin:2px 0 16px;max-width:52ch}
body[data-route=new] .an-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body[data-route=new] #capanims .an-tile{display:grid;grid-template-rows:86px auto;gap:0;padding:0;min-height:0;border-radius:18px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);overflow:hidden;color:var(--t2);transition:translate .22s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s,background .2s}
body[data-route=new] #capanims .an-tile:hover{translate:0 -2px;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07)}
body[data-route=new] #capanims .an-tile.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);box-shadow:0 0 0 2px var(--acc),0 18px 44px -14px var(--accg);color:#fff}
body[data-route=new] .an-tile b{font:600 13px/1 "Inter";padding:12px 12px 13px;border-top:1px solid rgba(255,255,255,.07);text-align:left}
.an-stage{display:grid;place-items:center;background:#0b0c0f url(/site/demo-before.jpg) center 78%/190% auto;box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.34);overflow:hidden}
.an-demo{display:inline-block;font:800 15px/1 "Inter";color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.75);white-space:nowrap;animation:2.2s cubic-bezier(.2,.8,.2,1) infinite}
.an-demo i{font-style:normal;display:inline-block;animation:ad-word 2.2s infinite}
.an-demo i:nth-child(2){animation-delay:.28s}.an-demo i:nth-child(3){animation-delay:.56s}
.ad-rise{animation-name:ad-rise}.ad-pop{animation-name:ad-pop}.ad-zoom{animation-name:ad-zoom}.ad-drop{animation-name:ad-drop}.ad-slide{animation-name:ad-slide}.ad-fade{animation-name:ad-fade}
@keyframes ad-rise{0%{opacity:0;translate:0 22px}18%,82%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
@keyframes ad-drop{0%{opacity:0;translate:0 -26px}18%,82%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes ad-slide{0%{opacity:0;translate:-46px 0}18%,82%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes ad-fade{0%{opacity:0}22%,82%{opacity:1}100%{opacity:0}}
@keyframes ad-pop{0%{opacity:0;scale:.45}13%{opacity:1;scale:1.14}20%,82%{opacity:1;scale:1}100%{opacity:0}}
@keyframes ad-zoom{0%{opacity:0;scale:2}18%,82%{opacity:1;scale:1}100%{opacity:0}}
@keyframes ad-word{0%,6%{opacity:0;scale:.7}14%,82%{opacity:1;scale:1}100%{opacity:0}}
body[data-route=new] .sound-chips{display:flex;flex-wrap:wrap;gap:8px}
body[data-route=new] .sound-chips .chip{padding:9px 15px;font-size:13px}
body[data-route=new] .snd-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
body[data-route=new] .snd-opts .seg{flex-wrap:wrap}
@media(min-width:1400px){
  body[data-route=new] .caption-step:not([hidden]){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto}
  body[data-route=new] .caphead{grid-column:1;grid-row:1}
  body[data-route=new] .caption-tabs{grid-column:1;grid-row:2;align-self:stretch}
  body[data-route=new] .caption-tabs button{padding:0 10px;flex:1}
  body[data-route=new] .caption-browser,body[data-route=new] .caption-custom{grid-column:1;grid-row:3}
  body[data-route=new] .caption-selection{grid-column:1;grid-row:4;margin-top:0;padding-top:6px;min-height:0}
  body[data-route=new] .caption-selection .btn.icon-button{height:36px;min-height:36px}
  body[data-route=new] .caption-step:not([hidden]){row-gap:12px}
  body[data-route=new] .cp-grid{grid-auto-rows:104px;padding-bottom:14px}
  body[data-route=new] .cp{grid-template-rows:70px minmax(0,1fr)}
  body[data-route=new] .cp b{padding:7px 12px 8px}
}
@media(max-width:1250px){body[data-route=new] .an-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-route=new] .snd-opts{grid-template-columns:1fr}}
@media(max-width:760px){body[data-route=new] .caption-tabs{overflow-x:auto}body[data-route=new] .caption-tabs button{flex:none;padding:0 14px}}
@media(prefers-reduced-motion:reduce){.an-demo,.an-demo i{animation:none}}


/* ============================================================================
   Studio v5: three stages (cut, captions, brief), the cut bar, "being made"
   ============================================================================ */
.cut-step h2{margin-bottom:6px}
.cutbar{margin:20px 0 6px}
.cut-track{position:relative;height:56px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);touch-action:none;cursor:ew-resize}
#cutfill{position:absolute;top:-1px;bottom:-1px;border-radius:13px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 30%,transparent),color-mix(in srgb,var(--acc) 12%,transparent));box-shadow:inset 0 0 0 2px var(--acc);pointer-events:none}
.cut-h{position:absolute;top:-7px;bottom:-7px;width:16px;margin-left:-8px;border-radius:8px;background:#f4efe6;box-shadow:0 8px 22px rgba(0,0,0,.55);cursor:ew-resize;outline-offset:3px}
.cut-h::after{content:"";position:absolute;left:7px;top:32%;bottom:32%;width:2px;border-radius:2px;background:rgba(0,0,0,.42)}
.cut-h:focus-visible{outline:2px solid var(--acc)}
#cutpos{position:absolute;top:5px;bottom:5px;width:2px;margin-left:-1px;border-radius:2px;background:#fff;opacity:.9;pointer-events:none;text-decoration:none}
.cutbar[data-ready=false] .cut-track{opacity:.35;pointer-events:none}
.cutbar[data-ready=false] .cut-actions{opacity:.35;pointer-events:none}
.cut-read{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;font:500 13px/1 Inter,system-ui,sans-serif;color:rgba(244,239,230,.6);font-variant-numeric:tabular-nums}
.cut-read strong{font:600 15px/1 Inter,system-ui,sans-serif;color:#f4efe6;letter-spacing:-.01em}
.cut-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.cut-gain{margin-top:26px}
.cut-note{font-size:12.5px;line-height:1.45;margin-top:10px;max-width:56ch}
.profile-step h2{font-size:clamp(20px,1.5vw,24px)}

/* the work in progress, drawn over a phone screen or a player */
.mk{position:absolute;inset:0;z-index:6;display:grid;place-items:center;align-content:center;gap:24px;overflow:hidden;border-radius:inherit;color:#fff;text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.66))}
.mk[hidden]{display:none}
.mk-scan{position:absolute;left:0;right:0;top:-42%;height:40%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 34%,transparent) 72%,rgba(255,255,255,.6) 98%,transparent);animation:mkscan 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes mkscan{to{top:104%}}
.mk-core{position:relative;width:136px;height:136px;display:grid;place-items:center}
.mk-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mk-ring circle{fill:none;stroke:rgba(255,255,255,.16);stroke-width:5}
.mk-ring .p{stroke:#fff;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s ease,stroke .4s ease}
.mk-pct{position:relative;font:700 30px/1 Inter,system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mk-text{position:relative;display:grid;gap:9px;padding:0 20px}
.mk-text strong{font:700 clamp(17px,1.5vw,22px)/1.15 Unbounded,Inter,sans-serif;letter-spacing:-.025em}
.mk-text span{font:500 13.5px/1.35 Inter,system-ui,sans-serif;color:rgba(255,255,255,.74);min-height:1.35em}
.mk.ok .mk-scan{animation:none;opacity:0}
.mk.ok .mk-ring .p{stroke:var(--acc)}
@media (prefers-reduced-motion:reduce){.mk-scan{animation:none;opacity:0}}

/* Studio after "create": the tools are gone, the phone stands alone in the middle */
.wizard.making .steps-form,.wizard.making .editor-toolbar,.wizard.making .wsteps,.wizard.making .preview-header,.wizard.making .pvtabs,.wizard.making .preview-bottom,
.wizard.making .source-stage,.wizard.making #pvover{display:none!important}
.wizard.making .studio{display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center}
.wizard.making .pv{width:100%;display:grid;justify-items:center}
.wizard.making .preview-stage{display:grid!important;justify-items:center;align-content:center;gap:22px;width:100%;height:calc(100svh - 150px);min-height:420px;background:none;border:0;box-shadow:none;padding:0}
.wizard.making .phone{height:min(100%,calc(100svh - 230px));width:auto;aspect-ratio:9/16;transform:none!important;animation:none!important;--sx:0px;--sy:0px;--ss:1;--sr:0deg;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 70px 170px -40px color-mix(in srgb,var(--acc) 70%,transparent),0 30px 80px -30px rgba(0,0,0,.9)}
.wizard.making .screen{position:relative;overflow:hidden}
.mk-foot{margin:0;display:flex;justify-content:center}
body:has(.wizard.making) .space-reset{display:none!important}

/* Video page while a version is being made */
.player-wrap{position:relative}
.player-wrap .mk{border-radius:28px}
.mk-poster{aspect-ratio:9/16;width:100%;border-radius:28px;background:#0d0d0f center/cover no-repeat}
.page.busy .vgrid{grid-template-columns:minmax(0,1fr)!important;justify-items:center;text-align:center;gap:22px}
.page.busy .vgrid>div:first-child{width:min(400px,76vw)}
.page.busy .vgrid>div:last-child{width:min(560px,92vw)}
.page.busy #vrev,.page.busy #vsc,.page.busy #vh,.page.busy #vcost,.page.busy #vtabs,.page.busy #vs .bar{display:none!important}
.page.busy .actions{justify-content:center}
.page.busy .player video{filter:saturate(.7) brightness(.8)}
.vatt{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-top:14px;font-size:12.5px}
.vatt .reflist{flex-basis:100%;margin:0}
.vatt .reflist:empty{display:none}

/* stage one fits one screen: the profile list is a compact two-column grid under the cut tools */
.cut-step .editor-description{margin-bottom:0;max-width:60ch}
.cutbar{margin:16px 0 4px}
.cut-gain{margin-top:18px}
.cut-note{margin-top:8px}
.wizard .profile-step{margin-top:6px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.wizard .profile-step .editor-description,.wizard .profile-step .section-label{display:none}
.wizard .profile-step h2{font-size:18px;line-height:1.2;margin:0 0 12px;letter-spacing:-.02em}
.wizard .profile-step .brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wizard .profile-step .brand{min-height:0;padding:10px 12px;border-radius:14px}
.wizard .profile-step .brand img{width:34px;height:34px}
.wizard .profile-step .brand strong{font-size:14px}
@media (max-width:1100px){.wizard .profile-step .brands{grid-template-columns:minmax(0,1fr)}}

.wizard .cut-step{margin-bottom:14px!important}
.wizard .cut-step h2{margin-bottom:10px!important}
.wizard .cut-step .editor-description{margin:0 0 2px!important;max-width:none!important}
.wizard .cutbar{margin:12px 0 2px}
.wizard .cut-gain{margin-top:14px}

.wizard .cut-step>.inspector-eyebrow{display:none}
.wizard .cut-gain:has(.seg button[data-v=off].on) .cut-note{display:none}

/* stage three fits one screen too: one row of quality levels, a slim reference drop, one row of suggestion chips */
.wizard [data-step="3"]{margin-bottom:14px!important}
.wizard [data-step="3"] h2{margin-bottom:10px!important}
.wizard [data-step="3"]:has(.levels) h2{font-size:18px;letter-spacing:-.02em}
.wizard [data-step="3"] .levels{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px}
.wizard [data-step="3"] .level{min-height:0;padding:11px 12px}
.wizard [data-step="3"] .level span{font-size:11.5px;line-height:1.3}
.wizard [data-step="3"] .refs{margin-top:12px}
.wizard [data-step="3"] .refdrop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;min-height:0}
.wizard [data-step="3"] .refnote{display:none}
.wizard [data-step="3"] .refs:has(.ref) .refnote{display:block}
.wizard [data-step="3"] .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.wizard [data-step="3"] .chips::-webkit-scrollbar{display:none}
.wizard [data-step="3"] .chips .chip{flex:none}

.wizard.making .pv{align-content:start;gap:18px}
.wizard.making .preview-stage{height:calc(100svh - 215px);min-height:380px}
.wizard.making .phone{height:100%;max-height:calc(100svh - 215px)}
.wizard.making .mk-foot{order:9}


/* ============================================================================
   Studio v6: the cut timeline (sound wave, pieces taken out), the sound slider,
   a layout of its own for each stage, and the stage button
   ============================================================================ */
.wizard .cut-track{height:104px;overflow:hidden;border-radius:16px;background:rgba(255,255,255,.04)}
#cutwave{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.wizard #cutfill{background:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--acc) 85%,transparent);border-radius:15px}
#cutselbox{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--acc) 34%,transparent);box-shadow:inset 0 0 0 1.5px var(--acc);pointer-events:none}
#cutselbox[hidden]{display:none}
.wizard .cut-h{top:0;bottom:0;width:14px;margin-left:-7px;border-radius:6px}
.wizard .cut-track{cursor:crosshair}
.wizard .cut-actions{align-items:center}
.cut-gap{flex:1 1 12px}
.wizard .cut-actions .btn[disabled]{opacity:.38;pointer-events:none}
.wizard .cut-actions .btn.solid{background:var(--acc);border-color:transparent;color:#fff}

.sound-step h2,.wizard .profile-step h2{font-size:18px!important;line-height:1.2;margin:0 0 12px!important;letter-spacing:-.02em}
.gainrow{display:grid;grid-template-columns:auto minmax(0,1fr) 78px;align-items:center;gap:14px}
.gainrow output{font:600 15px/1 Inter,system-ui,sans-serif;color:#f4efe6;text-align:right;font-variant-numeric:tabular-nums}
#gainauto.on{background:var(--acc);border-color:transparent;color:#fff}
#gainnote{min-height:1.45em}

/* the stage button carries its own count */
.wizard .ctabar.wnav{gap:12px;justify-content:flex-end}
.wizard .wback{flex:none;width:52px;height:52px;padding:0;border-radius:50%;font-size:18px;line-height:1;display:grid;place-items:center}
.wizard .wnext{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;border-radius:18px;padding:0 22px;position:relative}
.wizard .wnext[hidden]{display:none}
.wizard .wnext .wc{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:600 12px/1 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.02em;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.14);font-variant-numeric:tabular-nums}
.wizard #go .wc{background:rgba(255,255,255,.18)}
.wizard .wnext span{font-weight:650}
.wizard .wnext b{font-weight:500;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.wizard .wnext:hover b{transform:translateX(4px)}

@media (min-width:1101px){
  /* stage one: a narrow column for the picture, a wide workbench for the timeline */
  body[data-route=new] .studio[data-cur="1"][data-hasvideo=true]{grid-template-columns:minmax(360px,.6fr) minmax(0,1.75fr)!important;gap:28px;justify-content:stretch}
  body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] #editor-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 38px;align-content:start}
  body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] .cut-step{grid-column:1 / -1}
  body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] .sound-step,body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] .profile-step{margin-top:6px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
  body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] .cut-track{height:132px}
  body[data-route=new] .studio[data-cur="1"] .steps-form{border-radius:28px}
  /* stage three: the brief comes forward on the left, the phone steps to the right */
  body[data-route=new] .studio[data-cur="4"]{grid-template-columns:clamp(560px,46vw,860px) minmax(0,1fr)!important}
  body[data-route=new] .studio[data-cur="4"] .pv{order:3}                 /* the tool panel already carries order 2 */
  body[data-route=new] .studio[data-cur="4"] .steps-form{border-radius:36px}
  body[data-route=new] .studio[data-cur="4"] #brief{font-size:16px;line-height:1.5}
}
@media (max-width:1100px){.wizard .cut-actions .cut-gap{display:none}}


/* ============================================================================
   Studio v7: a colour world of its own for each stage, and how stages change
   ============================================================================ */
body[data-route=new][data-stage="1"],body[data-route=new] .wizard[data-cur="1"]{--acc:#ff8a2a;--acc-ink:#1c0d02;--accg:color-mix(in srgb,var(--acc) 55%,transparent);--acc2:color-mix(in srgb,var(--acc) 52%,#fff);--wax:var(--acc)}
body[data-route=new][data-stage="2"],body[data-route=new] .wizard[data-cur="2"]{--acc:#8a4dff;--acc-ink:#ffffff;--accg:color-mix(in srgb,var(--acc) 55%,transparent);--acc2:color-mix(in srgb,var(--acc) 52%,#fff);--wax:var(--acc)}
body[data-route=new][data-stage="4"],body[data-route=new] .wizard[data-cur="4"]{--acc:#1fd6a6;--acc-ink:#02150f;--accg:color-mix(in srgb,var(--acc) 55%,transparent);--acc2:color-mix(in srgb,var(--acc) 52%,#fff);--wax:var(--acc)}
.stage-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#07060a}
.stage-bg i{position:absolute;inset:0;opacity:0;z-index:1}
.stage-bg i.on,.stage-bg i.was{opacity:1}
.stage-bg i.on{z-index:2}
.stage-bg i[data-s="1"]{background:radial-gradient(62% 58% at 84% 4%,#8a3206 0%,transparent 70%),radial-gradient(56% 62% at 4% 98%,#5a1f04 0%,transparent 72%),radial-gradient(46% 44% at 46% 58%,rgba(255,138,42,.10),transparent 70%),#150904}
.stage-bg i[data-s="2"]{background:radial-gradient(62% 58% at 16% 6%,#4318a6 0%,transparent 70%),radial-gradient(56% 62% at 96% 94%,#22106a 0%,transparent 72%),radial-gradient(46% 44% at 56% 56%,rgba(138,77,255,.10),transparent 70%),#0b0619}
.stage-bg i[data-s="4"]{background:radial-gradient(64% 58% at 50% 0%,#0b7a61 0%,transparent 70%),radial-gradient(56% 62% at 2% 92%,#07414b 0%,transparent 72%),radial-gradient(46% 44% at 62% 62%,rgba(31,214,166,.09),transparent 70%),#03130f}
body[data-route=new]::before{display:none}
body[data-route=new]::after{background:radial-gradient(130% 105% at 50% 42%,transparent 52%,rgba(0,0,0,.5) 100%)}
/* the JS stagger replaces the stylesheet's entry animation */
body[data-route=new] .step-card:not([hidden])>*{animation:none}
/* text that sits on the stage colour */
body[data-route=new] .wizard .wsteps li.on button{color:var(--acc-ink,#fff)}
body[data-route=new] .wizard .wsteps li.on b{color:var(--acc)}
body[data-route=new] .wizard #go,body[data-route=new] .wizard .cut-actions .btn.solid,body[data-route=new] .wizard #gainauto.on{color:var(--acc-ink,#fff)!important}
body[data-route=new] .wizard #go .wc{background:rgba(0,0,0,.16)}
body[data-route=new] .wizard .steps-form{transition:box-shadow .6s ease,border-color .6s ease}
/* stage one without the profile list: sound takes the full width under the timeline */
@media (min-width:1101px){
  body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] .sound-step{grid-column:1 / -1}
}
.wizard .wnext:active,.wizard .wback:active{scale:.97}
.wizard .wnext,.wizard .wback{transition:scale .18s cubic-bezier(.3,1.4,.5,1),background .3s ease,color .3s ease}


/* ============================================================================
   Studio v8: four stages (video, cut and sound, captions, brief), each with a
   deep scene lit from one place; the brief is the centrepiece
   ============================================================================ */
body[data-route=new][data-stage="v"],body[data-route=new] .wizard[data-cur="v"]{--acc:#f4efe6;--acc-ink:#14110d;--accg:rgba(244,239,230,.4);--acc2:#ffffff;--wax:var(--acc)}
body[data-route=new][data-stage="1"],body[data-route=new] .wizard[data-cur="1"]{--acc:#2fe0a0;--acc-ink:#03170f;--accg:color-mix(in srgb,var(--acc) 55%,transparent);--acc2:color-mix(in srgb,var(--acc) 52%,#fff);--wax:var(--acc)}
body[data-route=new][data-stage="2"],body[data-route=new] .wizard[data-cur="2"]{--acc:#9a63ff;--acc-ink:#ffffff;--accg:color-mix(in srgb,var(--acc) 55%,transparent);--acc2:color-mix(in srgb,var(--acc) 52%,#fff);--wax:var(--acc)}
body[data-route=new][data-stage="4"],body[data-route=new] .wizard[data-cur="4"]{--acc:#ff3b47;--acc-ink:#ffffff;--accg:color-mix(in srgb,var(--acc) 55%,transparent);--acc2:color-mix(in srgb,var(--acc) 52%,#fff);--wax:var(--acc)}

.stage-bg{background:#050506}
.stage-bg i[data-s="v"]{background:radial-gradient(70% 62% at 50% -8%,#3b3630 0%,rgba(40,36,31,.45) 42%,transparent 74%),radial-gradient(50% 44% at 50% 104%,rgba(244,239,230,.07),transparent 72%),#0a0908}
.stage-bg i[data-s="1"]{background:radial-gradient(74% 64% at 22% -10%,#0c6a4a 0%,rgba(8,66,48,.5) 40%,transparent 74%),radial-gradient(52% 50% at 100% 100%,rgba(20,150,110,.20),transparent 70%),#03100b}
.stage-bg i[data-s="2"]{background:radial-gradient(74% 64% at 78% -10%,#4a1fb8 0%,rgba(52,22,128,.5) 40%,transparent 74%),radial-gradient(52% 50% at 0% 100%,rgba(120,70,255,.18),transparent 70%),#08051a}
.stage-bg i[data-s="4"]{background:radial-gradient(78% 66% at 30% -12%,#9c0f1f 0%,rgba(110,10,24,.52) 40%,transparent 74%),radial-gradient(54% 52% at 96% 96%,rgba(255,59,71,.20),transparent 70%),radial-gradient(40% 40% at 60% 46%,rgba(255,120,90,.05),transparent 70%),#100306}
/* a fine grain over every scene keeps the deep gradients from banding */
.stage-bg b{position:absolute;inset:0;z-index:3;opacity:.055;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the wash: a soft-edged light, not a hard circle */
.stage-bg i.bloom{-webkit-mask-image:radial-gradient(circle at var(--mx,50%) var(--my,50%),#000 0,#000 calc(var(--mr) - 340px),transparent var(--mr));mask-image:radial-gradient(circle at var(--mx,50%) var(--my,50%),#000 0,#000 calc(var(--mr) - 340px),transparent var(--mr))}
.stage-bg i.sweep{-webkit-mask-image:linear-gradient(var(--ma,105deg),#000 0,#000 calc(var(--mp) - 30%),transparent var(--mp));mask-image:linear-gradient(var(--ma,105deg),#000 0,#000 calc(var(--mp) - 30%),transparent var(--mp))}

/* ---- stage: video. Nothing but the picture (or the place to drop it) and the way on ---- */
body[data-route=new] .studio[data-cur="v"]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:20px}
body[data-route=new] .studio[data-cur="v"] .pv{display:block;width:100%;min-height:0;background:none;border:0;box-shadow:none}
body[data-route=new] .studio[data-cur="v"] .source-stage{display:flex}
body[data-route=new] .studio[data-cur="v"] .preview-stage{display:none}
body[data-route=new] .studio[data-cur="v"] .steps-form{order:2;width:min(460px,92vw);height:auto;min-height:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
body[data-route=new] .studio[data-cur="v"] .steps-form::before,body[data-route=new] .studio[data-cur="v"] .steps-form::after{display:none}
body[data-route=new] .studio[data-cur="v"] #editor-controls{display:none}
body[data-route=new] .studio[data-cur="v"] .wnav{background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
body[data-route=new] .studio[data-cur="v"][data-hasvideo=false] .wnav{visibility:hidden}
body[data-route=new] .studio[data-cur="v"] .source-stage{max-width:min(980px,100%);width:100%;align-items:center;text-align:center;gap:22px}
body[data-route=new] .studio[data-cur="v"] .import-header{display:block}
body[data-route=new] .studio[data-cur="v"] .import-header h2{font:700 clamp(34px,4.2vw,64px)/1.02 Unbounded,Inter,sans-serif;letter-spacing:-.045em;white-space:pre-line;margin:8px 0 14px;background:linear-gradient(180deg,#fffaf0,#b9b1a4);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-route=new] .studio[data-cur="v"] .import-header p{white-space:pre-line;color:rgba(244,239,230,.62);font-size:16px;line-height:1.5;margin:0}
body[data-route=new] .studio[data-cur="v"][data-hasvideo=true] .import-header{display:none}
body[data-route=new] .studio[data-cur="v"] #s1{width:100%;display:grid;justify-items:center;gap:14px}
body[data-route=new] .studio[data-cur="v"] .drop{width:min(620px,100%);min-height:210px;border-radius:30px;display:grid;place-content:center;gap:8px;padding:34px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));border:1.5px dashed rgba(244,239,230,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 90px -40px #000;transition:border-color .3s ease,background .3s ease,scale .35s cubic-bezier(.16,1,.3,1)}
body[data-route=new] .studio[data-cur="v"] .drop:hover,body[data-route=new] .studio[data-cur="v"] .drop.over{border-color:#f4efe6;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));scale:1.015}
body[data-route=new] .studio[data-cur="v"] .drop b{font:650 20px/1.2 Inter,system-ui,sans-serif;color:#f4efe6;letter-spacing:-.01em}
body[data-route=new] .studio[data-cur="v"] .vsel{display:grid;justify-items:center;gap:14px}
body[data-route=new] .studio[data-cur="v"] .vsel video{height:min(58svh,560px);width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:34px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 60px 140px -40px #000}

/* ---- stage: brief. The centrepiece ---- */
body[data-route=new] .wizard[data-cur="4"] .steps-form{border-color:rgba(255,120,120,.22);background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.035) 46%,rgba(255,60,70,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(255,255,255,.06),0 70px 150px -40px #000,0 0 140px -30px rgba(255,59,71,.42)}
.brief-step{position:relative}
.brief-glow{position:absolute;left:-12%;right:-12%;top:-70px;height:300px;z-index:0;pointer-events:none;background:radial-gradient(50% 60% at 30% 40%,rgba(255,59,71,.34),transparent 72%);filter:blur(24px)}
.brief-step>*:not(.brief-glow){position:relative;z-index:1}
.brief-eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 Inter,system-ui,sans-serif;letter-spacing:.2em;color:#ff8f96}
.brief-eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;border-radius:2px}
.wizard .brief-step .brief-h{font:700 clamp(36px,3.5vw,56px)/1.02 Unbounded,Inter,sans-serif!important;letter-spacing:-.045em!important;margin:14px 0 12px!important;color:#fff7f2}
.brief-h .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.brief-h .w i{display:inline-block;font-style:normal}
.brief-sub{font:400 16px/1.5 Inter,system-ui,sans-serif;color:rgba(255,240,236,.66);margin:0 0 20px;max-width:52ch}
.composer{position:relative;border-radius:24px;padding:1.5px;background:linear-gradient(140deg,rgba(255,110,118,.85),rgba(255,255,255,.16) 32%,rgba(255,255,255,.07) 62%,rgba(255,59,71,.6));box-shadow:0 30px 70px -34px rgba(255,59,71,.6);transition:box-shadow .4s ease}
.composer:focus-within{box-shadow:0 34px 90px -30px rgba(255,59,71,.85),0 0 0 4px rgba(255,59,71,.16)}
.wizard .composer #brief{display:block;width:100%;min-height:148px;resize:none;border:0;outline:0;border-radius:22.5px;padding:20px 22px;background:rgba(14,5,7,.82);color:#fff7f2;font:400 17px/1.5 Inter,system-ui,sans-serif;letter-spacing:-.005em;caret-color:#ff3b47}
.wizard .composer #brief::placeholder{color:rgba(255,235,230,.4)}
.wizard[data-cur="4"] .chips .chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,244,240,.86);border-radius:999px;transition:background .25s ease,border-color .25s ease,translate .25s cubic-bezier(.16,1,.3,1)}
.wizard[data-cur="4"] .chips .chip:hover{background:rgba(255,59,71,.2);border-color:rgba(255,120,126,.6);translate:0 -2px}
.wizard[data-cur="4"] #go{background:linear-gradient(180deg,#ff5a63,#e8202e);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 44px -14px rgba(255,59,71,.8);position:relative;overflow:hidden}
.wizard[data-cur="4"] #go::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);animation:go-sheen 3.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes go-sheen{0%,55%{left:-40%}100%{left:115%}}
@media (prefers-reduced-motion:reduce){.wizard[data-cur="4"] #go::after{animation:none;display:none}}
.wizard[data-cur="4"] .level.on{border-color:#ff5a63;box-shadow:inset 0 0 0 1px #ff5a63,0 14px 34px -18px rgba(255,59,71,.8)}

/* ---- the cut stage in its green ---- */
.wizard[data-cur="1"] #gainnote.warn{color:#ffb86b}
#gainnote.warn{color:#ffb86b}
@media (min-width:1101px){
  body[data-route=new] .studio[data-cur="4"] #brief{font-size:17px}
}

/* the brief fits one screen: one row of quality levels, a slim reference drop, one row of suggestion chips */
.wizard [data-step="4"]{margin-bottom:14px!important}
.wizard [data-step="4"]:not(.brief-step) h2{margin-bottom:10px!important;font-size:18px;letter-spacing:-.02em}
.wizard [data-step="4"] .levels{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px}
.wizard [data-step="4"] .level{min-height:0;padding:11px 12px}
.wizard [data-step="4"] .level span{font-size:11.5px;line-height:1.3}
.wizard [data-step="4"] .levels+.muted{display:none}
.wizard [data-step="4"] .refs{margin-top:14px}
.wizard [data-step="4"] .refdrop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;min-height:0;border-radius:16px}
.wizard [data-step="4"] .refnote{display:none}
.wizard [data-step="4"] .refs:has(.ref) .refnote{display:block}
.wizard [data-step="4"] .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-top:12px}
.wizard [data-step="4"] .chips::-webkit-scrollbar{display:none}
.wizard [data-step="4"] .chips .chip{flex:none}
.wizard .composer #brief{min-height:128px}
.wizard .brief-step .brief-h{margin:12px 0 10px!important}
.brief-sub{margin-bottom:16px}

/* fixes after measuring at 1900x860 */
body[data-route=new] .studio[data-cur="v"] .vsel{grid-template-columns:minmax(0,1fr)!important;width:auto}
body[data-route=new] .studio[data-cur="v"] .vsel video{height:min(58svh,560px)!important;width:calc(min(58svh,560px) * 9 / 16)!important;max-width:none}
.wizard .caption-step{margin-bottom:0!important}
.wizard [data-step="4"]:last-of-type{margin-bottom:0!important}
.wizard .composer #brief{min-height:110px}
.wizard .brief-step .brief-h{margin:10px 0 8px!important}
.brief-sub{margin-bottom:12px}
.wizard [data-step="4"] .refs{margin-top:12px}
.wizard [data-step="4"] .chips{margin-top:10px}


/* ============================================================================
   Studio v9: "catching your words" - the caption stage opens when the speech has been turned into text
   ============================================================================ */
body[data-route=new] .wizard.extracting .studio[data-cur="2"]{grid-template-columns:minmax(0,1fr)!important;justify-items:center}
body[data-route=new] .wizard.extracting .steps-form{display:none!important}
body[data-route=new] .wizard.extracting .pv{width:100%;display:grid;justify-items:center}
body[data-route=new] .wizard.extracting .preview-bottom,body[data-route=new] .wizard.extracting #pvover{visibility:hidden}
.mk.ex{background:linear-gradient(180deg,rgba(10,5,26,.38),rgba(10,5,26,.74));gap:20px}
.mk.ex .mk-scan{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 40%,transparent) 70%,rgba(255,255,255,.7) 98%,transparent);animation-duration:2.1s}
.ex-line{position:absolute;left:8%;right:8%;bottom:11%;margin:0;min-height:2.6em;display:grid;place-items:center;text-align:center;font:650 clamp(13px,1.05vw,16px)/1.3 Inter,system-ui,sans-serif;color:#fff;text-wrap:balance}
.ex-line:not(:empty){padding:9px 14px;border-radius:14px;background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mk.ex.ok .mk-ring .p{stroke:var(--acc)}


/* ============================================================================
   Studio v10: the preview is heard and has its own timeline
   ============================================================================ */
.pvline{position:relative;height:38px;width:min(100%,420px);margin:0 auto 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);cursor:pointer;touch-action:none;overflow:hidden;outline-offset:3px}
.pvline:focus-visible{outline:2px solid var(--acc)}
.pvline canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.pvline u{position:absolute;top:3px;bottom:3px;width:2px;margin-left:-1px;border-radius:2px;background:#fff;pointer-events:none;text-decoration:none;box-shadow:0 0 10px rgba(255,255,255,.7)}
.wizard .pvsound{flex:none;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center}
.wizard .pvsound[aria-pressed=false]{opacity:.6}
.wizard.making .pvline,.wizard.extracting .pvline{display:none}


/* ============================================================================
   Studio v11: "catching your words" without anything written over the video
   ============================================================================ */
@property --exp{syntax:'<number>';inherits:true;initial-value:0}
body[data-route=new] .wizard.extracting .studio{position:relative;z-index:1}
body[data-route=new] .wizard.extracting .preview-stage{position:relative}
body[data-route=new] .wizard.extracting .phone{position:relative;overflow:visible}
.ex-ring{position:absolute;inset:-15px;border-radius:calc(var(--phone-r,40px) + 15px);padding:4px;pointer-events:none;z-index:3;--exp:0;transition:--exp 1s cubic-bezier(.4,0,.2,1);
  background:conic-gradient(from 0deg,var(--acc) calc(var(--exp) * 1%),rgba(255,255,255,.12) 0);filter:drop-shadow(0 0 16px color-mix(in srgb,var(--acc) 80%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ex-ring.full{animation:ex-full .9s cubic-bezier(.16,1,.3,1) both}
@keyframes ex-full{0%{filter:drop-shadow(0 0 16px var(--acc))}40%{filter:drop-shadow(0 0 46px #fff) brightness(1.5)}100%{filter:drop-shadow(0 0 22px var(--acc))}}
.ex-pulse{position:absolute;inset:-15px;border-radius:calc(var(--phone-r,40px) + 15px);border:1.5px solid color-mix(in srgb,var(--acc) 80%,#fff);pointer-events:none;z-index:2;opacity:0;animation:ex-pulse 2.7s cubic-bezier(.2,.6,.3,1) infinite}
.ex-pulse:nth-of-type(2){animation-delay:.9s}.ex-pulse:nth-of-type(3){animation-delay:1.8s}
@keyframes ex-pulse{0%{opacity:.6;scale:1}100%{opacity:0;scale:1.3 1.17}}
.ex-beam{position:absolute;left:0;right:0;top:-30%;height:26%;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:.55;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 30%,transparent) 76%,rgba(255,255,255,.55) 98%,transparent);animation:ex-beam 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes ex-beam{to{top:104%}}
.ex-label{position:absolute;left:0;right:0;bottom:2px;display:grid;justify-items:center;gap:7px;text-align:center;pointer-events:none}
.ex-label .ex-pct{font:700 clamp(30px,2.7vw,44px)/1 Unbounded,Inter,sans-serif;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.ex-label strong{font:650 15px/1.2 Inter,system-ui,sans-serif;color:#f4efe6;letter-spacing:-.005em}
.ex-label .ex-phase{font:500 13px/1.2 Inter,system-ui,sans-serif;color:rgba(244,239,230,.6)}
.ex-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ex-w{position:absolute;white-space:nowrap;font-family:Unbounded,Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1;color:#f4efe6;text-shadow:0 0 34px color-mix(in srgb,var(--acc) 55%,transparent);
  transition:opacity 1.1s ease,filter 1.1s ease;animation:ex-float 7s ease-in-out infinite alternate}
.ex-w.hot{color:var(--acc);text-shadow:0 0 40px color-mix(in srgb,var(--acc) 70%,transparent)}
.ex-w:nth-child(3n){animation-duration:8.5s;animation-direction:alternate-reverse}
.ex-w.old{opacity:.3;filter:blur(1.2px)}
.ex-w.gone{opacity:0!important;filter:blur(8px);transition-duration:.5s}
@keyframes ex-float{from{translate:0 -7px}to{translate:0 7px}}
@media (prefers-reduced-motion:reduce){.ex-pulse,.ex-beam{animation:none;display:none}.ex-w{animation:none}}
@media (max-width:900px){.ex-stage{display:none}}


/* ============================================================================
   Studio v12: the bars that listen, the "being made" scene, the first stage
   ============================================================================ */
.ex-eq{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- "your video is being made" (video page) ---- */
.page.busy .vgrid{display:none!important}
.page.busy .kicker{position:relative;z-index:1}
.page.busy #vt{position:relative;z-index:1;font-size:clamp(18px,1.6vw,24px)!important;letter-spacing:-.02em;color:rgba(244,239,230,.62);margin:0 0 4px}
.mks{position:relative;display:grid;grid-template-columns:auto minmax(280px,440px);gap:clamp(34px,6vw,110px);align-items:center;justify-content:center;min-height:calc(100svh - 250px);padding:18px 0 46px}
.mks[hidden]{display:none}
.mks-light{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 56% at 32% 44%,color-mix(in srgb,var(--acc) 42%,transparent),transparent 72%),radial-gradient(46% 50% at 84% 86%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 72%),radial-gradient(40% 36% at 78% 8%,rgba(255,236,214,.07),transparent 72%);animation:mks-breathe 9s ease-in-out infinite alternate}
@keyframes mks-breathe{from{opacity:.75;scale:1}to{opacity:1;scale:1.06}}
.mks-phone{position:relative;z-index:1;height:min(66svh,640px);aspect-ratio:9/16;border-radius:38px;animation:mks-in 1s cubic-bezier(.16,1,.3,1) both;
  box-shadow:0 0 0 7px #151418,0 0 0 8px rgba(255,255,255,.2),0 80px 150px -40px #000,0 0 170px -30px color-mix(in srgb,var(--acc) 70%,transparent)}
@keyframes mks-in{from{opacity:0;translate:0 60px;scale:.94}}
.mks-screen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#0c0c10}
.mks-screen img{width:100%;height:100%;object-fit:cover;display:block;animation:mks-kb 16s ease-in-out infinite alternate;filter:saturate(.92) brightness(.9)}
@keyframes mks-kb{from{scale:1.02;translate:0 0}to{scale:1.13;translate:0 -2.5%}}
.mks-grid{position:absolute;inset:0;pointer-events:none;opacity:.2;background:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px) 0 0/100% 12.5%,linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px) 0 0/25% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.mks-side{position:relative;z-index:1;display:grid;gap:0;justify-items:start;text-align:left}
.mks-side>*{animation:mks-up .9s cubic-bezier(.16,1,.3,1) both}
.mks-side>*:nth-child(1){animation-delay:.12s}.mks-side>*:nth-child(2){animation-delay:.2s}.mks-side>*:nth-child(3){animation-delay:.28s}.mks-side>*:nth-child(4){animation-delay:.36s}.mks-side>*:nth-child(5){animation-delay:.46s}.mks-side>*:nth-child(6){animation-delay:.58s}
@keyframes mks-up{from{opacity:0;translate:0 26px;filter:blur(8px)}}
.mks-eyebrow{display:inline-flex;align-items:center;gap:9px;font:600 11.5px/1 Inter,system-ui,sans-serif;letter-spacing:.22em;color:color-mix(in srgb,var(--acc) 60%,#fff)}
.mks-eyebrow::before{content:"";width:24px;height:1.5px;border-radius:2px;background:currentColor}
.mks-pct{display:flex;align-items:baseline;gap:6px;margin:16px 0 6px;font:700 clamp(84px,9.5vw,150px)/.86 Unbounded,Inter,sans-serif;letter-spacing:-.06em;color:#fff;font-variant-numeric:tabular-nums;overflow:hidden;padding-bottom:.06em}
.mks-pct i{font-style:normal;display:inline-block;background:linear-gradient(180deg,#fff,#cfc7ba);-webkit-background-clip:text;background-clip:text;color:transparent}
.mks-pct u{text-decoration:none;font-size:.36em;letter-spacing:-.02em;color:color-mix(in srgb,var(--acc) 70%,#fff)}
.mks-h{font:700 clamp(22px,2vw,30px)/1.12 Unbounded,Inter,sans-serif;letter-spacing:-.035em;color:#f4efe6}
.mks-now{margin:10px 0 26px;min-height:2.9em;max-width:34ch;font:400 15.5px/1.45 Inter,system-ui,sans-serif;color:rgba(244,239,230,.68)}
.mks-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;width:100%}
.mks-steps li{position:relative;display:flex;align-items:center;gap:14px;padding:9px 0;font:550 14.5px/1.2 Inter,system-ui,sans-serif;color:rgba(244,239,230,.34);transition:color .5s ease}
.mks-steps li i{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(244,239,230,.3);transition:background .5s ease,box-shadow .5s ease;position:relative;z-index:1}
.mks-steps li:not(:last-child)::after{content:"";position:absolute;left:6.25px;top:calc(50% + 9px);width:1.5px;height:calc(100% - 18px);background:rgba(244,239,230,.14)}
.mks-steps li.done{color:rgba(244,239,230,.74)}
.mks-steps li.done i{background:var(--acc);box-shadow:none}
.mks-steps li.done:not(:last-child)::after{background:color-mix(in srgb,var(--acc) 70%,transparent)}
.mks-steps li.on{color:#fff}
.mks-steps li.on i{background:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 34%,transparent),0 0 22px var(--acc);animation:mks-dot 1.6s ease-in-out infinite}
@keyframes mks-dot{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--acc) 10%,transparent),0 0 30px var(--acc)}}
.mks-foot{display:flex;align-items:center;gap:16px;margin-top:26px}
.mks-time{font:500 13px/1 Inter,system-ui,sans-serif;color:rgba(244,239,230,.5);font-variant-numeric:tabular-nums;min-width:4ch}
@media (max-width:860px){.mks{grid-template-columns:minmax(0,1fr);justify-items:center;gap:26px}.mks-phone{height:min(48svh,460px)}.mks-side{justify-items:center;text-align:center}.mks-steps{display:none}.mks-now{margin-bottom:10px}}
@media (prefers-reduced-motion:reduce){.mks-light,.mks-screen img,.mks-phone,.mks-side>*,.mks-steps li.on i{animation:none}}

/* ---- the first stage: where a video is dropped ---- */
@property --da{syntax:'<angle>';inherits:false;initial-value:0deg}
body[data-route=new] .studio[data-cur="v"] .import-header{width:100%;display:grid;justify-items:center;text-align:center!important}
body[data-route=new] .studio[data-cur="v"] .import-header h2{line-height:1.1;padding:0 .04em .16em;margin:10px 0 6px;text-align:center}
body[data-route=new] .studio[data-cur="v"] .import-header p{text-align:center!important;margin:0 auto!important;max-width:44ch;width:auto}
body[data-route=new] .studio[data-cur="v"] .drop{position:relative;width:min(700px,100%);min-height:250px;border-radius:34px;display:grid;justify-items:center;align-content:center;gap:10px;padding:38px 30px;text-align:center;
  border:1px solid rgba(244,239,230,.16);background:radial-gradient(90% 120% at 50% 0%,rgba(255,255,255,.1),rgba(255,255,255,.025) 60%),rgba(20,18,16,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 50px 110px -46px #000;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
body[data-route=new] .studio[data-cur="v"] .drop::before{display:none}
body[data-route=new] .studio[data-cur="v"] .drop::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--da),transparent 0 62%,rgba(244,239,230,.95) 80%,transparent 96%);animation:drop-run 5.5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@keyframes drop-run{to{--da:360deg}}
body[data-route=new] .studio[data-cur="v"] .drop:hover,body[data-route=new] .studio[data-cur="v"] .drop.over{scale:1.012;border-color:rgba(244,239,230,.4)}
body[data-route=new] .studio[data-cur="v"] .drop.over{background:radial-gradient(90% 120% at 50% 0%,rgba(255,255,255,.2),rgba(255,255,255,.06) 60%),rgba(30,27,23,.6)}
.drop-ic{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;color:#14110d;background:linear-gradient(180deg,#fffaf0,#d9d1c3);box-shadow:0 18px 40px -14px rgba(244,239,230,.5),inset 0 1px 0 #fff;animation:drop-float 3.2s ease-in-out infinite}
@keyframes drop-float{50%{translate:0 -7px}}
body[data-route=new] .studio[data-cur="v"] .drop b{font:700 clamp(21px,1.7vw,27px)/1.15 Unbounded,Inter,sans-serif;letter-spacing:-.03em;color:#fffaf0}
body[data-route=new] .studio[data-cur="v"] .drop .drop-or{font-size:14.5px;color:rgba(244,239,230,.6)}
.drop-fmts{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.drop-fmts em{font:600 11.5px/1 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.06em;padding:7px 10px;border-radius:999px;color:rgba(244,239,230,.78);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.drop-fmts em.lim{color:#14110d;background:#f4efe6;box-shadow:none}
.vthumb{display:none}
body[data-route=new] .studio[data-cur="v"] .adv{width:min(980px,100%);border:0;padding:0;margin:6px 0 0;background:none}
body[data-route=new] .studio[data-cur="v"] .adv>summary{list-style:none;justify-content:center;text-align:center;font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,230,.5);margin-bottom:14px;cursor:pointer}
body[data-route=new] .studio[data-cur="v"] .adv>summary::-webkit-details-marker{display:none}
body[data-route=new] .studio[data-cur="v"] .adv>summary::after{display:none}
body[data-route=new] .studio[data-cur="v"] .vlist{display:flex;gap:14px;justify-content:safe center;overflow-x:auto;padding:6px 4px 12px;max-height:none;scrollbar-width:none;border:0;background:none}
body[data-route=new] .studio[data-cur="v"] .vlist::-webkit-scrollbar{display:none}
body[data-route=new] .studio[data-cur="v"] .vlist button{flex:none;width:104px;display:grid;gap:7px;justify-items:start;padding:0;border:0;background:none;text-align:left;cursor:pointer;transition:translate .35s cubic-bezier(.16,1,.3,1)}
body[data-route=new] .studio[data-cur="v"] .vlist button:hover{translate:0 -6px}
body[data-route=new] .studio[data-cur="v"] .vlist button:nth-child(n+9){display:none}
body[data-route=new] .studio[data-cur="v"] .vlist .vthumb{display:block;width:104px;height:152px;object-fit:cover;border-radius:16px;background:#17151a;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 22px 40px -22px #000}
body[data-route=new] .studio[data-cur="v"] .vlist button span{font:500 11.5px/1.25 Inter,system-ui,sans-serif;color:rgba(244,239,230,.72);max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-route=new] .studio[data-cur="v"] .vlist button span+span{color:rgba(244,239,230,.4);margin-top:-4px}
body[data-route=new] .studio[data-cur="v"][data-hasvideo=true] .adv{display:none}
@media (prefers-reduced-motion:reduce){body[data-route=new] .studio[data-cur="v"] .drop::after,.drop-ic{animation:none}}

/* first stage, after looking at it: one column inside the drop card, everything sized by the height of the window, nothing spilling upwards */
body[data-route=new] .studio[data-cur="v"] .source-stage{justify-content:flex-start!important;gap:clamp(10px,2svh,22px);padding-top:clamp(0px,1.2svh,14px);overflow:visible}
body[data-route=new] .studio[data-cur="v"] .import-header h2{font-size:clamp(28px,min(4.2vw,7.4svh),64px)!important;margin:8px 0 4px}
body[data-route=new] .studio[data-cur="v"] .import-header p{font-size:clamp(13.5px,1.9svh,16px)}
body[data-route=new] .studio[data-cur="v"] .drop{grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row;min-height:min(250px,29svh);padding:clamp(18px,3.4svh,38px) 30px;gap:clamp(5px,1svh,10px)}
body[data-route=new] .studio[data-cur="v"] .drop>*{grid-column:1!important;grid-row:auto!important;position:static;justify-self:center;margin-left:0;margin-right:0}
body[data-route=new] .studio[data-cur="v"] .drop-ic{width:clamp(46px,7.4svh,68px);height:clamp(46px,7.4svh,68px);margin-bottom:clamp(0px,.8svh,8px)}
body[data-route=new] .studio[data-cur="v"] .drop-fmts{margin-top:clamp(4px,1.2svh,12px)}
body[data-route=new] .studio[data-cur="v"] .adv>summary{margin-bottom:clamp(8px,1.4svh,14px)}
body[data-route=new] .studio[data-cur="v"] .vlist button{width:clamp(70px,11.5svh,104px)}
body[data-route=new] .studio[data-cur="v"] .vlist .vthumb{width:100%;height:clamp(96px,16.5svh,152px)}
body[data-route=new] .studio[data-cur="v"] .vlist button span{max-width:100%}

body[data-route=new] .studio[data-cur="v"] .source-stage{gap:clamp(8px,1.5svh,16px)}
body[data-route=new] .studio[data-cur="v"] .import-header{margin-bottom:0!important;padding-bottom:0!important}
body[data-route=new] .studio[data-cur="v"] .import-header h2{font-size:clamp(26px,min(3.6vw,6.2svh),54px)!important;line-height:1.02;margin:6px 0 2px}
body[data-route=new] .studio[data-cur="v"] .import-header p{margin:0}
body[data-route=new] .studio[data-cur="v"] .drop{min-height:min(214px,24.5svh);margin-top:clamp(2px,1svh,12px)!important}
body[data-route=new] .studio[data-cur="v"] .vlist .vthumb{height:clamp(84px,13.6svh,128px)}
body[data-route=new] .studio[data-cur="v"] .vlist button{width:clamp(62px,9.6svh,90px)}

/* ===== Studio v13 — a fuller caption library: 18 entrances, sounds in families, a volume slider ===== */
body[data-route=new] .an-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
body[data-route=new] #capanims .an-tile{grid-template-rows:60px auto;border-radius:14px}
body[data-route=new] .an-tile b{font:600 11.5px/1.15 "Inter";padding:8px 9px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-route=new] .an-demo{font-size:12px}
@media(max-width:1500px){body[data-route=new] .an-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1250px){body[data-route=new] .an-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ad-slider{animation-name:ad-slider}.ad-float{animation-name:ad-float}.ad-jump{animation-name:ad-jump}.ad-bounce{animation-name:ad-bounce}.ad-blur{animation-name:ad-blur}.ad-elastic{animation-name:ad-elastic}
.ad-flip{animation-name:ad-flip}.ad-stretch{animation-name:ad-stretch}.ad-spin{animation-name:ad-spin}.ad-wipe{animation-name:ad-wipe}
@keyframes ad-slider{0%{opacity:0;translate:46px 0}18%,82%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes ad-float{0%{opacity:0;translate:0 26px}34%,82%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes ad-jump{0%{opacity:0;translate:0 28px}12%{opacity:1;translate:0 -6px}20%,82%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes ad-bounce{0%{opacity:0;translate:0 -28px}9%{opacity:1;translate:0 0}14%{translate:0 -9px}19%{translate:0 0}23%{translate:0 -3px}27%,82%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes ad-blur{0%{opacity:0;filter:blur(8px);scale:1.1}20%,82%{opacity:1;filter:blur(0);scale:1}100%{opacity:0}}
@keyframes ad-elastic{0%{opacity:0;scale:.4}9%{opacity:1;scale:1.25}15%{scale:.9}21%{scale:1.06}27%,82%{opacity:1;scale:1}100%{opacity:0}}
@keyframes ad-flip{0%{opacity:0;scale:1 .05}16%,82%{opacity:1;scale:1 1}100%{opacity:0}}
@keyframes ad-stretch{0%{opacity:0;scale:1.6 1}12%{opacity:1;scale:.94 1}20%,82%{opacity:1;scale:1 1}100%{opacity:0}}
@keyframes ad-spin{0%{opacity:0;rotate:-12deg;scale:.72}18%,82%{opacity:1;rotate:0deg;scale:1}100%{opacity:0}}
@keyframes ad-wipe{0%{clip-path:inset(0 100% 0 0);opacity:1}22%,82%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
.pv-cap.first:is(.an-slider,.an-float,.an-jump,.an-bounce,.an-blur,.an-elastic,.an-flip,.an-stretch,.an-spin,.an-wipe)>*{animation-duration:.44s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:backwards}
.pv-cap.first.an-slider>*{animation-name:pc-slider}.pv-cap.first.an-float>*{animation-name:pc-float;animation-duration:.62s}.pv-cap.first.an-jump>*{animation-name:pc-jump;animation-timing-function:ease-out}
.pv-cap.first.an-bounce>*{animation-name:pc-bounce;animation-duration:.62s;animation-timing-function:linear}.pv-cap.first.an-blur>*{animation-name:pc-blur}
.pv-cap.first.an-elastic>*{animation-name:pc-elastic;animation-duration:.56s;animation-timing-function:ease-out}.pv-cap.first.an-flip>*{animation-name:pc-flip;animation-duration:.34s}
.pv-cap.first.an-stretch>*{animation-name:pc-stretch;animation-timing-function:ease-out}.pv-cap.first.an-spin>*{animation-name:pc-spin}.pv-cap.first.an-wipe>*{animation-name:pc-wipe;animation-timing-function:cubic-bezier(.3,.7,.3,1)}
@keyframes pc-slider{from{opacity:0;translate:22% 0}}@keyframes pc-float{from{opacity:0;translate:0 90%}}
@keyframes pc-jump{0%{opacity:0;translate:0 110%}60%{opacity:1;translate:0 -14%}100%{translate:0 0}}
@keyframes pc-bounce{0%{opacity:0;translate:0 -120%}30%{opacity:1;translate:0 0}50%{translate:0 -32%}70%{translate:0 0}85%{translate:0 -9%}100%{translate:0 0}}
@keyframes pc-blur{from{opacity:0;filter:blur(10px);scale:1.08}}
@keyframes pc-elastic{0%{opacity:0;scale:.4}35%{opacity:1;scale:1.22}55%{scale:.92}75%{scale:1.05}100%{scale:1}}
@keyframes pc-flip{from{opacity:0;scale:1 .05}}@keyframes pc-stretch{0%{opacity:0;scale:1.55 1}60%{opacity:1;scale:.95 1}100%{scale:1 1}}
@keyframes pc-spin{from{opacity:0;rotate:-9deg;scale:.78}}@keyframes pc-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.pv-cap.first>*{animation:none!important}}

body[data-route=new] .snd-groups{display:grid;gap:9px}
body[data-route=new] .snd-row{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;align-items:center}
body[data-route=new] .snd-g{font:600 10.5px/1 "Inter";letter-spacing:.12em;text-transform:uppercase;color:var(--t3,rgba(255,255,255,.42))}
body[data-route=new] .snd-row .sound-chips{gap:7px}
body[data-route=new] .snd-row .sound-chips .chip{padding:8px 13px;font-size:12.5px}
body[data-route=new] .snd-vol{display:grid;grid-template-columns:auto minmax(0,1fr) 58px auto;gap:16px;align-items:center;margin-top:18px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);transition:opacity .25s}
body[data-route=new] .snd-vol.off{opacity:.45}
body[data-route=new] .snd-vol .label{margin:0;white-space:nowrap}
body[data-route=new] .snd-vol output{font:700 15px/1 "Inter";font-variant-numeric:tabular-nums;text-align:right;color:var(--acc)}
body[data-route=new] .snd-vol .snd-warn{grid-column:1/-1;margin:0;font:500 12px/1.4 "Inter";color:#ffb86b}
body[data-route=new] .snd-opts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px;padding-top:16px}
@media(max-width:1250px){body[data-route=new] .snd-row{grid-template-columns:1fr;gap:5px}body[data-route=new] .snd-vol{grid-template-columns:1fr auto}body[data-route=new] .snd-vol input{grid-column:1/-1;grid-row:2}body[data-route=new] .snd-opts{grid-template-columns:1fr}}

body[data-route=new] .snd-groups{gap:7px}
body[data-route=new] .snd-row .sound-chips{margin:0;padding:0}
body[data-route=new] .snd-row .sound-chips .chip{min-height:32px;padding:6px 12px;font-size:12.5px;line-height:1.2}
body[data-route=new] #cap-sound .pane-lede{margin-bottom:12px}
body[data-route=new] .snd-vol{margin-top:14px;padding:9px 14px}
body[data-route=new] .snd-vol .btn.small{min-height:34px;padding:6px 16px}
body[data-route=new] .snd-opts{margin-top:14px;padding-top:0;border-top:0}

body[data-route=new] .snd-groups{gap:6px}
body[data-route=new] #cap-sound .pane-lede{margin-bottom:10px}
body[data-route=new] .snd-vol{margin-top:12px;padding:5px 14px;border-radius:16px}
body[data-route=new] .snd-vol .snd-warn{margin:-2px 0 4px}
body[data-route=new] .snd-opts{margin-top:10px}

body[data-route=new] .snd-row .sound-chips{flex-wrap:wrap!important;overflow:visible!important}

/* ===== agent mode: "the editor makes it" is the main choice; the plan-based levels sit under it ===== */
.wizard [data-step="4"] .levels{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.wizard .levels .level-agent{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 18px;padding:14px 18px!important;text-align:left;border-color:color-mix(in srgb,var(--acc) 46%,transparent);background:linear-gradient(100deg,color-mix(in srgb,var(--acc) 18%,transparent),rgba(255,255,255,.03))}
.wizard .levels .level-agent b{font:700 16px/1.2 "Unbounded","Inter";white-space:nowrap}
.wizard .levels .level-agent span{font-size:13px;line-height:1.4;color:var(--t2,rgba(255,255,255,.72))}
.wizard .levels .level-agent.on{box-shadow:0 0 0 2px var(--acc),0 18px 44px -16px var(--accg,var(--acc))}
.agent-note{margin-top:14px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);max-width:68ch}
.agent-note b{font:700 12px/1 "Inter";letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.agent-note p{margin:.5rem 0 0;font-size:.93rem;line-height:1.5}
.agent-note .agent-stat{font:500 12px/1 "Inter";color:rgba(255,255,255,.46)}

body[data-route=new] #cutlen.over{color:#ff6b6b}
body[data-route=new] #cutfit{justify-self:center;margin:8px auto 0;display:block}
body[data-route=new] #cutfit[hidden]{display:none}

/* ===== words can be corrected; the editor's idea is shown while it works ===== */
.wf{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.62);backdrop-filter:blur(8px)}
.wf-box{width:min(860px,100%);max-height:min(78svh,720px);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;padding:26px 28px;border-radius:26px;border:1px solid rgba(255,255,255,.14);background:#111113;color:#f4efe6;box-shadow:0 40px 120px -30px #000}
.wf-box h3{margin:0;font:700 22px/1.2 "Unbounded","Inter"}.wf-box p{margin:0;font-size:14px}
.wf-words{overflow:auto;padding:14px 4px;font:500 19px/2.1 "Inter";word-spacing:.1em}
.wf-words span{padding:3px 6px;border-radius:8px;border:1px solid transparent;outline:0;cursor:text;transition:background .15s,border-color .15s}
.wf-words span:hover{background:rgba(255,255,255,.07)}.wf-words span:focus{background:rgba(255,255,255,.1);border-color:var(--acc,#9a63ff)}
.wf-foot{display:flex;justify-content:flex-end}
body[data-route=new] .caphead #wfix{margin-left:auto;margin-right:12px;white-space:nowrap}
.mks-idea{margin-top:18px;max-width:46ch;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.mks-idea[hidden]{display:none}
.mks-idea b{font:700 11px/1 "Inter";letter-spacing:.14em;text-transform:uppercase;color:var(--acc,#9a63ff)}
.mks-idea p{margin:.5rem 0 .7rem;font-size:.95rem;line-height:1.5}
.mks-idea form{display:flex;gap:8px}.mks-idea form[hidden]{display:none}
.mks-idea input{flex:1;min-width:0;padding:9px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.3);color:inherit;font:400 14px/1.2 "Inter"}

.ex-label .ex-skip{pointer-events:auto;margin-top:16px;opacity:.85}
.ex-label .ex-skip:hover{opacity:1}

.mks-brief{margin-top:18px;max-width:46ch;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.mks-brief[hidden]{display:none}
.mks-brief b,.agent-note b{display:block}
.mks-brief b{font:700 11px/1 "Inter";letter-spacing:.14em;text-transform:uppercase;color:var(--acc,#9a63ff)}
.mks-brief ul,.agent-note ul{margin:.55rem 0 0;padding-left:1.1rem;font-size:.92rem;line-height:1.5}
.mks-brief li+li,.agent-note li+li{margin-top:.25rem}
.agent-note ul{margin-bottom:.9rem}
.mks-brief+.mks-idea{margin-top:10px}

/* Studio v14 — smart cut */
.wizard .autocut{display:block;position:relative;overflow:hidden;margin-top:10px;padding:12px 14px 13px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.022));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 44px -30px rgba(0,0,0,.9);transition:border-color .35s}
.wizard .autocut::before{content:"";position:absolute;left:-12%;top:-70%;width:62%;height:240%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 30%,transparent),transparent);opacity:0;transition:opacity .6s;pointer-events:none}
.wizard .autocut[data-on=true]{border-color:color-mix(in srgb,var(--acc) 38%,rgba(255,255,255,.12))}
.wizard .autocut[data-on=true]::before{opacity:.6}
.ac-head{position:relative;display:flex;align-items:center;gap:12px}
.ac-ico{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:var(--acc-ink,#04140e);background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 82%,#fff),color-mix(in srgb,var(--acc) 72%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px -10px var(--acc)}
.ac-ico svg{width:21px;height:21px}
.ac-ttl{display:grid;gap:4px;min-width:0}
.ac-ttl b{font:650 16px/1.1 "Inter",sans-serif;letter-spacing:-.01em}
.ac-ttl small{font-size:12.5px;line-height:1.25;opacity:.68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-res{margin-left:auto;display:grid;gap:4px;justify-items:end;text-align:right;min-width:0}
.ac-res strong{font:700 26px/1 "Inter",sans-serif;letter-spacing:-.03em;color:var(--acc);font-variant-numeric:tabular-nums}
.ac-res small{font-size:12.5px;line-height:1.2;opacity:.74;font-variant-numeric:tabular-nums}
.ac-res.hint strong{display:none}
.ac-res.hint small{opacity:.55}
.ac-cards{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:11px}
.ac-card{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:10px 13px 11px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);transition:border-color .2s,background .2s,box-shadow .28s,translate .2s}
.ac-card:hover{background:rgba(255,255,255,.085);translate:0 -1px}
.ac-card:active{translate:0 0;scale:.99}
.ac-card:focus-visible,.ac-tog button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ac-card[disabled]{opacity:.4;pointer-events:none}
.ac-card b{font:650 14.5px/1.1 "Inter",sans-serif}
.ac-card em{justify-self:end;font:600 11.5px/1 "Inter",sans-serif;font-style:normal;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.09);font-variant-numeric:tabular-nums;white-space:nowrap;transition:background .2s,color .2s}
.ac-card em:empty{visibility:hidden}
.ac-card small{font-size:12.5px;line-height:1.2;opacity:.64;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-rh{justify-self:end;display:flex;align-items:center;gap:var(--g,5px)}
.ac-rh i{width:7px;height:13px;border-radius:2.5px;background:currentColor;opacity:.3;transition:opacity .2s,background .2s}
.ac-rh i:nth-child(3n+2){height:8px}
.ac-card[data-p=light] .ac-rh{--g:7px}
.ac-card[data-p=bal] .ac-rh{--g:4px}
.ac-card[data-p=tight] .ac-rh{--g:1.5px}
.ac-card[aria-pressed=true]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px var(--acc),0 16px 36px -20px var(--acc)}
.ac-card[aria-pressed=true] em{background:var(--acc);color:var(--acc-ink,#04140e)}
.ac-card[aria-pressed=true] .ac-rh i{opacity:.95;background:var(--acc)}
.ac-tools{display:flex;gap:8px;margin-left:6px}
.ac-link{appearance:none;height:32px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.03);color:inherit;font:600 12.5px/1 "Inter",sans-serif;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s}
.ac-link:hover{background:rgba(255,255,255,.1)}
.ac-link[aria-expanded=true]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent)}
.ac-link[hidden]{display:none}
.ac-link:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ac-set{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09)}
.ac-set[hidden]{display:none}
.ac-set label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;font-size:13px}
.ac-set output{font-variant-numeric:tabular-nums;min-width:5.5ch;text-align:right;opacity:.82}
.ac-tog{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ac-tog button{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:inherit;font:600 12.5px/1.2 "Inter",sans-serif;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.ac-tog button::after{content:"";flex:none;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.17) radial-gradient(circle at 10px 10px,#fff 0 7px,transparent 7.6px) no-repeat 0 0;transition:background-color .2s,background-position .22s cubic-bezier(.16,1,.3,1)}
.ac-tog button[aria-checked=true]{border-color:color-mix(in srgb,var(--acc) 45%,rgba(255,255,255,.1))}
.ac-tog button[aria-checked=true]::after{background-color:var(--acc);background-position:14px 0}
@media (max-width:1250px){.ac-tog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.ac-head{flex-wrap:wrap}.ac-res{margin-left:0;justify-items:start;text-align:left;flex:1 1 100%}}
body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] .cut-track{height:106px}
.wizard .cut-step .cut-actions{margin-top:12px}
@media (max-width:760px){.ac-cards{grid-template-columns:1fr}.ac-set{grid-template-columns:1fr}.ac-res strong{font-size:22px}}
@media (prefers-reduced-motion:reduce){.ac-card,.ac-card:hover{translate:none;transition:none}}

/* Studio v15 — sound and music side by side */
.sm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px 34px;align-items:start}
.sm-col{min-width:0}
.sm-col.music{position:relative;padding-left:34px;border-left:1px solid rgba(255,255,255,.09)}
.mu-add{appearance:none;width:100%;display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:18px;border:1.5px dashed rgba(255,255,255,.2);background:rgba(255,255,255,.03);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,translate .2s}
.mu-add:hover,.sm-col.music.over .mu-add{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,transparent);translate:0 -1px}
.mu-add[hidden]{display:none}
.mu-add.busy{opacity:.6;pointer-events:none}
.mu-ico{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--acc-ink,#04140e);background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 82%,#fff),color-mix(in srgb,var(--acc) 72%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px -10px var(--acc)}
.mu-ico svg{width:22px;height:22px}
.mu-add b{display:block;font:650 15.5px/1.15 "Inter",sans-serif}
.mu-add small{display:block;margin-top:4px;font-size:12.5px;opacity:.66}
.mu-body[hidden]{display:none}
.mu-track{display:grid;grid-template-columns:44px minmax(60px,150px) minmax(0,1fr) 36px;align-items:center;gap:12px;padding:8px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045)}
.mu-play{appearance:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:var(--acc);color:var(--acc-ink,#04140e);transition:scale .15s}
.mu-play:active{scale:.94}
.mu-play svg{width:20px;height:20px;fill:currentColor}
.mu-play .pa,.mu-play[aria-pressed=true] .pl{display:none}
.mu-play[aria-pressed=true] .pa{display:block}
#muwave{width:100%;height:36px;display:block}
.mu-name{min-width:0}
.mu-name b{display:block;font:600 13.5px/1.2 "Inter",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-name small{font-size:12px;opacity:.62;font-variant-numeric:tabular-nums}
.mu-del{appearance:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:none;color:inherit;font-size:19px;line-height:1;cursor:pointer;opacity:.7}
.mu-del:hover{opacity:1;border-color:#ff7a7a;color:#ff9a9a}
.mu-level{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:12px;font-size:13px}
.mu-db{display:inline-flex;align-items:baseline;gap:5px;padding:7px 10px 7px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22)}
.mu-db:focus-within,.mu-start:focus-within{border-color:var(--acc)}
.mu-db input,.mu-start input{appearance:textfield;-moz-appearance:textfield;width:5.2ch;border:0;outline:0;background:none;color:inherit;font:700 15px/1 "Inter",sans-serif;font-variant-numeric:tabular-nums;text-align:right}
.mu-db input::-webkit-outer-spin-button,.mu-db input::-webkit-inner-spin-button,.mu-start input::-webkit-outer-spin-button,.mu-start input::-webkit-inner-spin-button{appearance:none;margin:0}
.mu-db em,.mu-start em{font-style:normal;font-size:12px;opacity:.6}
.mu-rel{margin:8px 0 0;font-size:12.5px;line-height:1.35;opacity:.78}
.mu-rel.warn{color:#ffb38a;opacity:1}
.mu-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mu-opts button{appearance:none;display:inline-flex;align-items:center;gap:10px;padding:8px 10px 8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:inherit;font:600 12.5px/1.2 "Inter",sans-serif;cursor:pointer;transition:border-color .2s}
.mu-opts button::after{content:"";flex:none;width:32px;height:19px;border-radius:999px;background:rgba(255,255,255,.17) radial-gradient(circle at 9.5px 9.5px,#fff 0 6.6px,transparent 7.2px) no-repeat 0 0;transition:background-color .2s,background-position .22s cubic-bezier(.16,1,.3,1)}
.mu-opts button[aria-checked=true]{border-color:color-mix(in srgb,var(--acc) 45%,rgba(255,255,255,.1))}
.mu-opts button[aria-checked=true]::after{background-color:var(--acc);background-position:13px 0}
.mu-opts button:focus-visible,.mu-add:focus-visible,.mu-play:focus-visible,.mu-del:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mu-start{display:inline-flex;align-items:baseline;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:12.5px}
.mu-start span{opacity:.75;font-weight:600}
.mu-start input{width:4.2ch;font-size:13.5px}
.mu-rights{margin:9px 0 0;font-size:11.5px;line-height:1.3;opacity:.5}
.sm-col.music[data-on=true] .mu-rights{display:none}
@media (max-width:1100px){.sm-grid{grid-template-columns:1fr}.sm-col.music{padding-left:0;border-left:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}}

/* Studio v15b — the cut stage fits with the music card: one tool row, tighter blocks */
@media (min-width:1400px){
  body[data-route=new] .wizard .cut-step .editor-description{display:none}
  body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] .cut-track{height:88px}
  .wizard .cut-step .cutbar{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
  .wizard .cut-step .cut-track{grid-row:1}
  .wizard .cut-step .cut-read,.wizard .cut-step .cut-actions{grid-row:2;grid-column:1;margin-top:10px;align-self:center}
  .wizard .cut-step .cut-read{justify-content:center;pointer-events:none}
  .wizard .cut-step .cut-read span{position:absolute;top:7px;font:600 11.5px/1 "Inter",sans-serif;color:rgba(244,239,230,.82);text-shadow:0 1px 3px rgba(0,0,0,.8);z-index:2}
  .wizard .cut-step .cut-read span:first-child{left:12px}
  .wizard .cut-step .cut-read span:last-child{right:12px}
  .wizard .cut-step .cut-actions .btn{min-height:38px;padding-top:0;padding-bottom:0}
  .wizard .cut-step .autocut{grid-row:3;margin-top:10px;padding:10px 12px 11px}
  .wizard .cut-step #cutfit{grid-row:2;grid-column:1;justify-self:center;margin-top:52px}
  .wizard .cut-step .ac-cards{margin-top:9px}
  .wizard .cut-step .ac-card{padding:8px 13px 9px;gap:5px 10px}
  body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] .sound-step{margin-top:14px;padding-top:14px}
}
.sm-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.sound-step .sm-col h2{margin-bottom:9px!important}
.mu-track{grid-template-columns:40px minmax(50px,120px) minmax(0,1fr) auto 34px;gap:10px;padding:6px 8px}
.mu-play{width:40px;height:40px}
#muwave{height:30px}
.mu-del{width:34px;height:34px}
.mu-level{margin-top:8px}
.wizard .mu-db{padding:0 10px 0 6px;height:36px;align-items:center}
.wizard .mu-db input,.wizard .mu-start input{padding:0!important;margin:0;height:auto!important;min-height:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;outline:0}
.wizard .mu-db input{width:5.4ch;font:700 15px/1 "Inter",sans-serif;text-align:right}
.wizard .mu-start{height:34px;align-items:center;padding:0 11px;white-space:nowrap}
.wizard .mu-start input{width:3.6ch;font:700 13.5px/1 "Inter",sans-serif;text-align:right}
.mu-opts{align-items:center;margin-top:8px;flex-wrap:nowrap}
.mu-opts .mu-rel{flex:1 1 auto;min-width:0;margin:0;font-size:12.5px;line-height:1.25}
.mu-opts button{flex:none;padding:6px 8px 6px 12px;white-space:nowrap}
@media (max-width:1500px){.mu-opts{flex-wrap:wrap}.mu-opts .mu-rel{flex-basis:100%}}

.mu-name small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1400px){body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] .cut-track{height:102px}}

/* ==================================================================================================================
   Bayanosa — home v5. The product has a name: an edit house. The hero is the product itself (say what you want, pick
   a video); the wall of finished videos drifts behind it. Below: what the name means, four syllables for the four Studio stages, and the house rules.
   ================================================================================================================== */
.mark i,body[data-route=new] .mark i{position:relative;box-sizing:border-box;flex:none;width:.8em;height:1.14em;border-radius:.27em;background:none;border:.13em solid currentColor;overflow:hidden}
.mark i::after{content:"";position:absolute;left:50%;top:46%;width:.7em;height:.7em;margin-left:-.35em;border-radius:50%;background:var(--acc2)}

#bh{position:relative;min-height:100svh;display:grid;align-items:end;padding:clamp(86px,12vh,118px) var(--pad) clamp(44px,8vh,92px);background:#000;overflow:hidden;isolation:isolate;border-bottom:1px solid rgba(255,255,255,.07)}
#bh .scrim{background:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.87) 44%,rgba(0,0,0,.3) 76%,rgba(0,0,0,.5) 100%),linear-gradient(0deg,#000,rgba(0,0,0,0) 42%)}
.bh-in{width:100%;max-width:1780px;margin:0 auto}
.bh-copy{position:relative;z-index:2;min-width:0;max-width:62rem}
.bh-h{margin:0;font:700 clamp(2.6rem,6.4vw,7.4rem)/.98 "Inter";letter-spacing:-.055em}
.bh-h span{display:block;white-space:nowrap;padding-bottom:.1em;background:linear-gradient(180deg,#fdfaf3 30%,#b3ada2);-webkit-background-clip:text;background-clip:text;color:transparent}
.bh-h em{font-style:normal;background:linear-gradient(100deg,var(--acc2),var(--acc) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bh-lede{max-width:35rem;margin-top:clamp(12px,2vh,22px);font:400 clamp(1rem,1.15vw,1.16rem)/1.6 "Inter";color:var(--ink2)}
.bh-ask{max-width:610px;margin-top:clamp(18px,3vh,32px);padding:16px 16px 14px 20px;border-radius:26px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(34,33,38,.86),rgba(16,16,19,.86));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 90px -50px #000;transition:border-color .25s,box-shadow .25s}
.bh-ask:focus-within{border-color:color-mix(in srgb,var(--acc) 78%,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent),0 40px 90px -50px #000}
.bh-ask textarea{display:block;width:100%;height:3.3em;min-height:0;padding:2px 0 0;border:0;border-radius:0;background:none;resize:none;outline:none;box-shadow:none;font:400 1.06rem/1.5 "Inter";color:var(--ink)}
.bh-ask textarea::placeholder{color:var(--mute)}
.bh-ask-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px}
.bh-ask-row span{font:500 .78rem/1.4 "Inter";color:var(--mute)}
.bh-ask-row .btn{flex:none;height:50px;padding:0 22px}
.bh-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:clamp(16px,2.6vh,26px);font:500 .86rem/1.3 "Inter";color:var(--mute)}
.bh-facts b{margin-right:.42em;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:980px){.bh-h span{white-space:normal}#bh .scrim{background:linear-gradient(0deg,#000 8%,rgba(0,0,0,.82) 55%,rgba(0,0,0,.5))}}
@media(max-width:560px){.bh-ask-row span{display:none}.bh-ask-row .btn{width:100%}.bh-h{font-size:clamp(2.3rem,11.5vw,3.4rem)}}

/* what the name means */
.nm{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,84px);align-items:center}
.nm-card{position:relative;overflow:hidden;padding:clamp(24px,3vw,46px);border-radius:32px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 60px 120px -60px #000}
.nm-card::before{content:"";position:absolute;right:-20%;top:-36%;width:64%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 36%,transparent),transparent)}
.nm-card>*{position:relative}
.nm-word{font:700 clamp(2.6rem,5.2vw,5.4rem)/1 "Inter";letter-spacing:-.05em;color:var(--ink)}
.nm-word i{font-style:normal;margin:0 .03em;color:var(--acc2)}
.nm-say{margin-top:.75rem;font:500 .9rem/1.4 "Inter";color:var(--mute)}
.nm-defs{list-style:none;counter-reset:d;display:grid;gap:1.15rem;margin-top:1.7rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1)}
.nm-defs li{counter-increment:d;position:relative;display:grid;gap:.15rem;padding-left:2rem}
.nm-defs li::before{content:counter(d);position:absolute;left:0;top:.05rem;font:700 .95rem/1.5 "Inter";color:var(--acc2)}
.nm-defs em{font:italic 500 .82rem/1.5 "Inter";color:var(--mute)}
.nm-defs p{font:500 1.06rem/1.45 "Inter";color:var(--ink)}
.nm-defs .ex{font:400 .95rem/1.45 "Inter";color:var(--ink2)}
.nm-note{margin-top:1.6rem;font:500 .82rem/1.5 "Inter";color:var(--mute)}
.nm-steps ol{list-style:none;display:grid;margin-top:clamp(20px,3vh,36px);border-bottom:1px solid rgba(255,255,255,.1)}
.nm-steps li{border-top:1px solid rgba(255,255,255,.1)}
.nm-steps a{display:grid;grid-template-columns:clamp(84px,8vw,128px) minmax(0,1fr) auto;gap:clamp(12px,2vw,28px);align-items:center;padding:clamp(14px,2.2vh,22px) 8px;text-decoration:none;color:inherit;transition:padding .35s cubic-bezier(.2,.8,.2,1),background .35s}
.nm-steps b{font:800 clamp(2.4rem,4.4vw,4.4rem)/1 "Inter";letter-spacing:-.03em;color:#050506;-webkit-text-stroke:3px color-mix(in srgb,var(--c) 78%,#000);paint-order:stroke fill;transition:color .3s}
.nm-steps h3{display:flex;align-items:center;gap:.55rem;font:650 1.16rem/1.2 "Inter";letter-spacing:-.02em}
.nm-steps h3::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c)}
.nm-steps p{margin-top:.3rem;font:400 .95rem/1.5 "Inter";color:var(--ink2)}
.nm-steps span{font:600 .78rem/1 "Inter";color:var(--mute);font-variant-numeric:tabular-nums}
@media(hover:hover){.nm-steps a:hover{padding-left:18px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 11%,transparent),transparent 70%)}.nm-steps a:hover b{color:var(--c)}}
@media(max-width:900px){.nm{grid-template-columns:minmax(0,1fr)}}

/* the house rules */
#kurallar h2.sec{max-width:none}
.rules{list-style:none;margin-top:clamp(28px,5vh,56px);border-top:1px solid rgba(255,255,255,.12)}
.rules li{display:grid;grid-template-columns:3.2rem minmax(0,1.15fr) minmax(0,1fr);gap:clamp(12px,3vw,48px);align-items:baseline;padding:clamp(18px,3vh,30px) 8px;border-bottom:1px solid rgba(255,255,255,.12);opacity:0;translate:0 18px;transition:opacity .6s,translate .6s cubic-bezier(.2,.8,.2,1),padding .35s cubic-bezier(.2,.8,.2,1),background .35s;transition-delay:calc(var(--i)*70ms),calc(var(--i)*70ms),0s,0s}
.rules li.in{opacity:1;translate:0 0}
.rules b{font:600 .82rem/1 "Inter";letter-spacing:.08em;color:var(--acc2)}
.rules h3{font:700 clamp(1.5rem,2.9vw,2.7rem)/1.05 "Inter";letter-spacing:-.045em;color:var(--ink);transition:color .3s}
.rules p{font:400 1rem/1.55 "Inter";color:var(--ink2)}
@media(hover:hover){.rules li:hover{padding-left:20px;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 12%,transparent),transparent 60%)}.rules li:hover h3{color:var(--acc2)}}
@media(max-width:760px){.rules li{grid-template-columns:2.4rem minmax(0,1fr)}.rules p{grid-column:2}}
@media(prefers-reduced-motion:reduce){.rules li{opacity:1;translate:none;transition:none}}

/* library and profiles: a lead line, four numbers, what a profile holds */
.page-lede{max-width:42rem;margin:-.25rem 0 1.2rem;font:400 1.04rem/1.6 "Inter";color:var(--ink2)}
.statrow{display:flex;flex-wrap:wrap;gap:10px}
.statrow:empty{display:none}
.statrow div{display:flex;align-items:baseline;gap:.5rem;padding:.75rem 1.1rem;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045)}
.statrow b{font:700 1.5rem/1 "Inter";letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.statrow span{font:500 .82rem/1 "Inter";color:var(--mute)}
.ptips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.6rem}
.ptips div{padding:1.1rem 1.2rem;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.ptips h3{display:flex;align-items:center;gap:.55rem;font:650 1rem/1.2 "Inter"}
.ptips h3::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--acc2)}
.ptips p{margin-top:.45rem;font:400 .92rem/1.5 "Inter";color:var(--ink2)}
@media(max-width:760px){.ptips{grid-template-columns:minmax(0,1fr)}}
.foot-word{font-size:clamp(3.4rem,15.4vw,17rem)}

/* ==================================================================================================================
   Studio v16 — sound lanes. Under the video's own sound sits a second lane for the music, on the same time line. The
   band is the level (drag it up or down); the two dots on each lane are the fades (drag them along the lane).
   ================================================================================================================== */
.lane-tag{position:absolute;left:62px;top:5px;z-index:2;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.55);font:600 10px/1 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,239,230,.82);pointer-events:none}
.fd{position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.5)}
.fd.in{clip-path:polygon(0 0,100% 0,0 50%,100% 100%,0 100%)}
.fd.out{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,100% 50%)}
.fh{position:absolute;top:6px;z-index:4;width:14px;height:14px;border-radius:50%;background:#f4efe6;border:2px solid #0b0a0d;box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:ew-resize;touch-action:none;transition:scale .15s,background .15s}
.fh.in{margin-left:2px}
.fh.out{margin-left:-16px}
.fh:hover,.fh:focus-visible{scale:1.25;background:var(--acc);outline:0}
.mu-lane{position:relative;height:46px;margin-top:6px}
.mu-lane.busy{opacity:.6;pointer-events:none}
.ml-add{appearance:none;width:100%;height:100%;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:13px;border:1.5px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.025);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.ml-add[hidden]{display:none}
.ml-add:hover,.mu-lane.over .ml-add{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,transparent)}
.ml-add:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ml-add svg{flex:none;width:18px;height:18px;color:var(--acc)}
.ml-add b{font:650 13.5px/1 "Inter",sans-serif}
.ml-add small{font-size:12.5px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-body{position:absolute;inset:0;border-radius:13px;overflow:hidden;border:1px solid color-mix(in srgb,var(--acc) 40%,rgba(255,255,255,.1));background:color-mix(in srgb,var(--acc) 8%,rgba(255,255,255,.03));cursor:ns-resize;touch-action:none;transition:border-color .2s}
.ml-body[hidden]{display:none}
.ml-body.lv{border-color:var(--acc)}
.ml-body #muwave{position:absolute;inset:0;width:100%;height:100%;display:block}
.ml-line{position:absolute;left:0;right:0;z-index:0;height:100%;border-top:1.5px solid rgba(244,239,230,.55);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 22%,transparent),color-mix(in srgb,var(--acc) 6%,transparent));pointer-events:none}
.ml-body #muwave{z-index:1}
.ml-body.lv .ml-line{border-top-color:#fff}
.ml-body .fh{top:4px}
.cut-track .fh{top:auto;bottom:6px}
.ml-tag,.ml-tools{position:absolute;top:50%;translate:0 -50%;z-index:3;display:flex;align-items:center;gap:8px;border-radius:999px;background:rgba(0,0,0,.66);cursor:default}
.ml-tag{left:6px;max-width:46%;padding:3px 12px 3px 3px}
.ml-tools{right:6px;padding:3px 3px 3px 12px}
.ml-tag .mu-play{flex:none;width:28px;height:28px}
.ml-tag .mu-play svg{width:14px;height:14px}
.ml-tag b{min-width:0;font:600 12.5px/1.1 "Inter",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-tag small{flex:none;font-size:11.5px;opacity:.65;white-space:nowrap;font-variant-numeric:tabular-nums}
.ml-tools output{font:700 12.5px/1 "Inter",sans-serif;font-variant-numeric:tabular-nums}
.ml-btn{appearance:none;height:26px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:none;color:inherit;font:600 12px/1 "Inter",sans-serif;cursor:pointer}
.ml-btn:hover{border-color:var(--acc)}
.ml-tools .mu-del{width:26px;height:26px;font-size:16px}
/* the two columns under the lanes */
.fd-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 18px;margin-top:10px}
.fd-row label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12.5px}
.fd-row span{font-weight:600;opacity:.8}
.fd-row output{min-width:4.6ch;text-align:right;font:700 12.5px/1 "Inter",sans-serif;font-variant-numeric:tabular-nums}
.mu-empty{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mu-empty[hidden],.mu-set[hidden]{display:none}
.mu-empty .mu-rights{flex-basis:100%;margin-top:4px}
.sm-col.music[data-on=true] .mu-rights{display:block}
.mu-set .mu-level{margin-top:0}
.mu-set .mu-opts{flex-wrap:nowrap}
.mu-set .mu-opts .mu-rel{order:3}
@media (max-width:1500px){.mu-set .mu-opts{flex-wrap:wrap}}
@media (min-width:1400px){
  .wizard .cut-step .mu-lane{grid-row:2}
  .wizard .cut-step .cut-read,.wizard .cut-step .cut-actions{grid-row:3}
  .wizard .cut-step #cutfit{grid-row:3}
  .wizard .cut-step .autocut{grid-row:4}
  body[data-route=new] .studio[data-cur="1"][data-hasvideo=true] .cut-track{height:86px}
}
/* the music picker */
.mp-box{width:min(700px,100%);grid-template-rows:auto minmax(0,1fr) auto}
.mp-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center}
.mp-head input{height:40px;min-width:0;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);padding:0 16px;color:inherit;font:400 14px/1 "Inter",sans-serif;outline:0}
.mp-head input:focus{border-color:var(--acc)}
.mp-list{min-height:220px;overflow:auto;display:grid;gap:2px;align-content:start;margin:6px -8px 0;padding:0 8px}
.mp-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;padding:5px 6px;border-radius:14px}
.mp-row:hover,.mp-row.playing{background:rgba(255,255,255,.06)}
.mp-row .mu-play{width:36px;height:36px}
.mp-row .mu-play svg{width:16px;height:16px}
.mp-row.playing .mu-play .pl{display:none}
.mp-row.playing .mu-play .pa{display:block}
.mp-pick{appearance:none;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;min-height:40px;padding:0 4px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mp-pick b{font:600 14px/1.2 "Inter",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-pick small{font-size:12.5px;opacity:.6;font-variant-numeric:tabular-nums}
.mp-pick em{font:600 12px/1 "Inter",sans-serif;font-style:normal;padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.18);opacity:0;transition:opacity .15s,border-color .15s}
.mp-row:hover .mp-pick em,.mp-pick:focus-visible em{opacity:1;border-color:var(--acc)}
.mp-note{margin:0;font-size:12px!important;opacity:.55}

/* ==================================================================================================================
   Studio v17 — LUT and light. The third stage has its own colour world (amber: it is about light). Looks are tiles of
   the customer's own picture, each drawn through the same filter the phone uses; the light sliders sit under them.
   ================================================================================================================== */
body[data-route=new][data-stage="g"],body[data-route=new] .wizard[data-cur="g"]{--acc:#ffb224;--acc-ink:#1b1203;--accg:color-mix(in srgb,var(--acc) 55%,transparent);--acc2:color-mix(in srgb,var(--acc) 52%,#fff);--wax:var(--acc)}
.stage-bg i[data-s="g"]{background:radial-gradient(72% 62% at 20% -10%,#7c4a06 0%,rgba(96,56,6,.5) 40%,transparent 74%),radial-gradient(52% 50% at 100% 100%,rgba(255,178,36,.15),transparent 70%),#120b03}
.wizard[data-cur="g"] .pvtabs,.wizard[data-cur="g"] #pvnext,.wizard[data-cur="g"] .drag-note,.wizard[data-cur="g"] .preview-note{display:none!important}
#pvvig{position:absolute;inset:0;z-index:1;pointer-events:none}
#pvover{z-index:2}
.lk-defs{position:absolute;width:0;height:0;overflow:hidden}
.look-step{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;min-height:0;gap:0}
.lk-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lk-head h2{margin:0!important}
.lk-tools{display:flex;align-items:center;gap:8px}
.lk-str{display:grid;grid-template-columns:auto 130px auto;align-items:center;gap:10px;padding:0 14px 0 14px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font:600 12.5px/1 "Inter",sans-serif;transition:opacity .2s}
.lk-str.off{opacity:.45}
.lk-str output{min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.lk-tools .btn.small{min-height:38px}
#lkcmp.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.lk-groups{margin:12px 0 10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.lk-groups::-webkit-scrollbar{display:none}
.lk-groups .chip{flex:none}
.lk-groups .chip.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;align-content:start;min-height:0;max-height:clamp(150px,calc(100svh - 594px),360px);overflow:auto;padding:3px 3px 10px;scroll-snap-type:y proximity;-webkit-mask:linear-gradient(#000 calc(100% - 22px),transparent);mask:linear-gradient(#000 calc(100% - 22px),transparent)}
.lk{appearance:none;display:grid;gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start}
.lk[hidden]{display:none}
.lk i{display:block;aspect-ratio:3/4;border-radius:14px;background:#17130c var(--lf,none) center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.12);transition:box-shadow .18s,scale .18s}
.lk b{font:600 12px/1.2 "Inter",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.82}
.lk:hover i{scale:1.03;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.lk[aria-pressed=true] i{box-shadow:0 0 0 2.5px var(--acc),0 14px 30px -12px var(--accg)}
.lk[aria-pressed=true] b{opacity:1;color:var(--acc2)}
.lk:focus-visible{outline:0}
.lk:focus-visible i{box-shadow:0 0 0 2.5px var(--acc2)}
.lk-sub{margin:10px 0 8px;font:650 15px/1.2 "Inter",sans-serif;letter-spacing:-.02em}
.lk-adj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 22px}
.lk-adj label{display:grid;grid-template-columns:minmax(0,7.2em) minmax(0,1fr) 3.4ch;align-items:center;gap:10px;font-size:12.5px}
.lk-adj span{font-weight:600;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-adj output{text-align:right;font:700 12.5px/1 "Inter",sans-serif;font-variant-numeric:tabular-nums;opacity:.6}
.lk-adj label.set span,.lk-adj label.set output{opacity:1;color:var(--acc2)}
@media (max-width:1250px){.lk-adj{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.lk-adj{grid-template-columns:minmax(0,1fr)}.lk-grid{max-height:none}.lk-str{grid-template-columns:auto 90px auto}}

/* ==================================================================================================================
   Captions v2 — dressed letters and new arrivals. A word of an "art" design carries copies of itself behind it for
   its outlines; hard shadow and glow are filters on the word. Eleven more arrivals for the tiles and the live line.
   ================================================================================================================== */
.w.wa{position:relative;isolation:isolate;display:inline-block}
.w.wa .wf{position:relative;display:inline-block;padding:0;margin:0}
.w.wa.e1::before,.w.wa.e2::after{content:attr(data-t);position:absolute;left:0;top:0;white-space:nowrap;background:none;-webkit-background-clip:border-box;background-clip:border-box;padding:inherit;pointer-events:none}
.w.wa.e1::before{z-index:-1;color:var(--c1);-webkit-text-fill-color:var(--c1);-webkit-text-stroke:var(--s1) var(--c1);filter:var(--fx1,none)}
.w.wa.e2::after{z-index:-2;color:var(--c2);-webkit-text-fill-color:var(--c2);-webkit-text-stroke:var(--s2) var(--c2);filter:var(--fx2,none)}
.ad-slam{animation-name:ad-slam}.ad-swing{animation-name:ad-swing;transform-origin:50% 0}.ad-rubber{animation-name:ad-rubber}.ad-shake{animation-name:ad-shake}.ad-glitch{animation-name:ad-glitch}.ad-roll{animation-name:ad-roll}
@keyframes ad-slam{0%{opacity:0;scale:2.4}9%{opacity:1;scale:1}13%{scale:.92}18%,82%{opacity:1;scale:1}100%{opacity:0}}
@keyframes ad-swing{0%{opacity:0;rotate:16deg}8%{opacity:1;rotate:-10deg}15%{rotate:6deg}22%{rotate:-3deg}29%,82%{opacity:1;rotate:0deg}100%{opacity:0}}
@keyframes ad-rubber{0%{opacity:0;scale:1.4 .8}8%{opacity:1;scale:.82 1.14}15%{scale:1.1 .95}22%{scale:.97 1.02}28%,82%{opacity:1;scale:1 1}100%{opacity:0}}
@keyframes ad-shake{0%{opacity:0;translate:-7px 0;rotate:-3deg}5%{opacity:1;translate:7px 0;rotate:3deg}10%{translate:-5px 0;rotate:-2deg}15%{translate:4px 0;rotate:1deg}20%{translate:-2px 0}25%,82%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0}}
@keyframes ad-glitch{0%{opacity:1;clip-path:inset(0 0 62% 0);translate:-8px 0}5%{clip-path:inset(40% 0 20% 0);translate:8px 0}10%{clip-path:inset(10% 0 55% 0);translate:-5px 0}15%{clip-path:inset(60% 0 0 0);translate:3px 0}20%,82%{clip-path:inset(0 0 0 0);translate:0 0;opacity:1}100%{opacity:0}}
@keyframes ad-roll{0%{opacity:0;translate:-50px 0;rotate:-38deg;scale:.7}18%,82%{opacity:1;translate:0 0;rotate:0deg;scale:1}100%{opacity:0}}
.ad-wordpop{animation:none!important}.ad-worddrop{animation:none!important}.ad-wordrise{animation:none!important}.ad-wordspin{animation:none!important}.ad-wordslam{animation:none!important}
.ad-wordpop i,.ad-worddrop i,.ad-wordrise i,.ad-wordspin i,.ad-wordslam i{display:inline-block;font-style:normal;animation:2.6s cubic-bezier(.2,.8,.2,1) infinite both}
.ad-wordpop i{animation-name:ad-wpop}.ad-worddrop i{animation-name:ad-wdrop}.ad-wordrise i{animation-name:ad-wrise}.ad-wordspin i{animation-name:ad-wspin}.ad-wordslam i{animation-name:ad-wslam}
:is(.ad-wordpop,.ad-worddrop,.ad-wordrise,.ad-wordspin,.ad-wordslam) i:nth-child(2){animation-delay:.28s}
:is(.ad-wordpop,.ad-worddrop,.ad-wordrise,.ad-wordspin,.ad-wordslam) i:nth-child(3){animation-delay:.56s}
@keyframes ad-wpop{0%,4%{opacity:0;scale:.4}10%{opacity:1;scale:1.18}15%,74%{opacity:1;scale:1}86%,100%{opacity:0}}
@keyframes ad-wdrop{0%,4%{opacity:0;translate:0 -16px}13%,74%{opacity:1;translate:0 0}86%,100%{opacity:0}}
@keyframes ad-wrise{0%,4%{opacity:0;translate:0 14px}13%,74%{opacity:1;translate:0 0}86%,100%{opacity:0}}
@keyframes ad-wspin{0%,4%{opacity:0;rotate:28deg;scale:.6}13%,74%{opacity:1;rotate:0deg;scale:1}86%,100%{opacity:0}}
@keyframes ad-wslam{0%,4%{opacity:0;scale:2}11%,74%{opacity:1;scale:1}86%,100%{opacity:0}}
.pv-cap.first:is(.an-slam,.an-swing,.an-rubber,.an-shake,.an-glitch,.an-roll)>*{animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:backwards}
.pv-cap.first.an-slam>*{animation-name:pc-slam;animation-duration:.34s}.pv-cap.first.an-swing>*{animation-name:pc-swing;animation-duration:.62s;transform-origin:50% 0}.pv-cap.first.an-rubber>*{animation-name:pc-rubber;animation-duration:.56s}
.pv-cap.first.an-shake>*{animation-name:pc-shake;animation-duration:.44s}.pv-cap.first.an-glitch>*{animation-name:pc-glitch;animation-duration:.34s;animation-timing-function:steps(1)}.pv-cap.first.an-roll>*{animation-name:pc-roll;animation-duration:.38s}
@keyframes pc-slam{0%{opacity:0;scale:2.4}45%{opacity:1;scale:1}70%{scale:.93}100%{scale:1}}
@keyframes pc-swing{0%{opacity:0;rotate:15deg}30%{opacity:1;rotate:-9deg}55%{rotate:5deg}80%{rotate:-2deg}100%{rotate:0deg}}
@keyframes pc-rubber{0%{opacity:0;scale:1.4 .8}30%{opacity:1;scale:.82 1.14}55%{scale:1.1 .95}80%{scale:.97 1.02}100%{scale:1 1}}
@keyframes pc-shake{0%{opacity:0;translate:-4% 0;rotate:-3deg}20%{opacity:1;translate:4% 0;rotate:3deg}40%{translate:-3% 0;rotate:-2deg}60%{translate:2% 0;rotate:1deg}80%{translate:-1% 0}100%{translate:0 0;rotate:0deg}}
@keyframes pc-glitch{0%{clip-path:inset(0 0 62% 0);translate:-5% 0}25%{clip-path:inset(40% 0 20% 0);translate:5% 0}50%{clip-path:inset(10% 0 55% 0);translate:-3% 0}75%{clip-path:inset(60% 0 0 0);translate:2% 0}100%{clip-path:inset(0 0 0 0);translate:0 0}}
@keyframes pc-roll{from{opacity:0;translate:-22% 0;rotate:-38deg;scale:.7}}
.an-wordpop,.an-worddrop,.an-wordrise,.an-wordspin,.an-wordslam{}
@media (prefers-reduced-motion:reduce){.an-demo i{animation:none!important}}

/* ================= Plan approval: the editor's plan before the edit is built ================= */
.plan{margin:6px 0 28px;padding:28px 30px 26px;border-radius:24px;border:1px solid color-mix(in srgb,var(--acc) 40%,rgba(255,255,255,.12));
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,rgba(255,255,255,.03)),rgba(255,255,255,.02));max-width:980px}
.plan h2{font:700 clamp(1.4rem,2.4vw,2rem)/1.1 "Unbounded",system-ui,sans-serif;letter-spacing:-.03em;margin:.3rem 0 .6rem}
.plan h3{font:700 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:1.6rem 0 .7rem}
.plan-eyebrow{font:700 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin:0}
.plan-lead{opacity:.75;max-width:70ch;margin:0 0 1rem;font-size:.95rem}
.plan-sum{font-size:1.06rem;line-height:1.55;max-width:72ch}
.plan-idea{margin-top:1rem;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);max-width:76ch}
.plan-idea b{font:700 12px/1 "Inter";letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}.plan-idea p{margin:.45rem 0 0;line-height:1.5}
.plan-look{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 18px;margin:0}
.plan-look div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035)}.plan-look dt{font-size:.78rem;opacity:.6;margin-bottom:.25rem}.plan-look dd{margin:0;font-size:.92rem;line-height:1.45}
.plan-beats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plan-beats li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03)}
.plan-beats .pt{font:600 .85rem/1.3 "JetBrains Mono",ui-monospace,monospace;color:var(--acc);font-variant-numeric:tabular-nums}
.plan-beats q{display:block;font-style:italic;opacity:.65;font-size:.85rem;margin-bottom:.25rem}.plan-beats q::before,.plan-beats q::after{content:""}
.plan-beats p{margin:0;line-height:1.45}.plan-beats small{display:block;margin-top:.25rem;opacity:.55;font-size:.8rem}
.plan ul{margin:0;padding-left:1.1rem;line-height:1.5}
.plan-add{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1)}
.plan-add label{display:block;font:700 12px/1 "Inter";letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem}
.plan-add textarea{width:100%;min-height:92px;resize:vertical;border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:inherit;font:inherit}
.plan-add textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.plan-acts{display:flex;gap:.6rem;flex-wrap:wrap;margin:.9rem 0 0}
.planfirst{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;cursor:pointer}.planfirst input{margin-top:3px;accent-color:var(--acc)}
.planfirst b{display:block;font-size:.92rem}.planfirst small{display:block;opacity:.6;font-size:.8rem;margin-top:2px}
@media (max-width:640px){.plan{padding:20px 16px}.plan-beats li{grid-template-columns:1fr;gap:4px}}

/* ===========================================================================================================================
   Studio v18 — what the words say before cutting: a row of suggestions under the smart cut (open with the strongest line,
   the best moments of a long video) and the dialog that lists those moments.
   =========================================================================================================================== */
.hintrow{display:flex;gap:10px;margin-top:10px}
.hintrow[hidden]{display:none}
.hint-hook,.hint-clips{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;flex:1 1 0;min-width:0;display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);transition:border-color .2s,background .2s}
.hint-hook[hidden],.hint-clips[hidden]{display:none}
.hint-hook:hover,.hint-clips:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
.hint-hook.on,.hint-clips.on{border-color:color-mix(in srgb,var(--acc) 70%,transparent);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.hh-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.07);color:var(--acc)}
.hh-ico svg{width:17px;height:17px}
.hh-txt{min-width:0;display:grid;gap:2px}
.hh-txt b{font:600 13.5px/1.2 "Inter",sans-serif}
.hh-txt small{font:400 12px/1.3 "Inter",sans-serif;opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-sw{flex:none;position:relative;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.16);transition:background .2s}
.hh-sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#f4efe6;transition:translate .22s cubic-bezier(.16,1,.3,1)}
.hint-hook.on .hh-sw{background:var(--acc)}
.hint-hook.on .hh-sw::after{translate:14px 0}
.clp-box{width:min(760px,100%);grid-template-rows:auto minmax(0,1fr) auto}
.clp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.clp-head p{margin-top:6px;max-width:56ch}
.clp-list{gap:6px}
.clp-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03)}
.clp-row:has(input:checked){border-color:color-mix(in srgb,var(--acc) 60%,transparent);background:color-mix(in srgb,var(--acc) 9%,transparent)}
.clp-row .mu-play{width:36px;height:36px}
.clp-row .mu-play svg{width:16px;height:16px}
.clp-row.playing .mu-play .pl{display:none}
.clp-row:not(.playing) .mu-play .pa{display:none}
.clp-main{display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-width:0}
.clp-main input{margin-top:3px;width:17px;height:17px;accent-color:var(--acc);flex:none}
.clp-main span{display:grid;gap:4px;min-width:0}
.clp-main b{font:600 14px/1.3 "Inter",sans-serif}
.clp-main small{font:500 12px/1 "Inter",sans-serif;opacity:.6;font-variant-numeric:tabular-nums}
.clp-main em{display:flex;flex-wrap:wrap;gap:5px;font-style:normal}
.clp-main em i{font:500 11px/1 "Inter",sans-serif;font-style:normal;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.07);opacity:.85}
.clp-rank{font:700 13px/1 "Unbounded","Inter";opacity:.35}
.clp-foot{display:flex;justify-content:flex-end;gap:10px;padding-top:6px}
.tlrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 12px}
.tlrow b{display:block;font-size:.92rem}.tlrow small{display:block;opacity:.6;font-size:.8rem;margin-top:2px}
.tlrow .sel{width:auto;min-width:150px;flex:none}


/* ===========================================================================================================================
   Studio v19 — one place for "your speech is being heard": a ring with the percentage at the end of the step capsule, the
   same on every step; and the tool panel no longer slides its content under its own top edge and grip.
   =========================================================================================================================== */
body[data-route=new] .wsteps .lsli{display:flex;align-items:center;gap:8px;padding:0 12px 0 8px;margin-left:4px;border-left:1px solid rgba(255,255,255,.12);white-space:nowrap;font:600 12.5px/1 "Inter",sans-serif;color:rgba(244,239,230,.9);animation:ls-in .5s cubic-bezier(.16,1,.3,1)}
body[data-route=new] .wsteps .lsli[hidden]{display:none}
.ls-ring{position:relative;flex:none;width:26px;height:26px}
.ls-ring svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.ls-ring circle{fill:none;stroke-width:3.4}
.ls-ring .ls-t{stroke:rgba(255,255,255,.14)}
.ls-ring .ls-v{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:calc(var(--lp,0)*1) 100;transition:stroke-dasharray .6s cubic-bezier(.16,1,.3,1)}
.ls-ring .ls-ok{inset:6px;width:14px;height:14px;rotate:0deg;opacity:0;scale:.4;color:var(--acc);transition:opacity .3s,scale .4s cubic-bezier(.34,1.56,.64,1)}
.lsli:not(.done) .ls-ring::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);animation:ls-pulse 1.8s ease-out infinite}
.lsli.done .ls-ok{opacity:1;scale:1}
.lsli.done .ls-v{stroke-dasharray:100 100}
body[data-route=new] .wsteps .ls-txt{display:flex;align-items:center;gap:8px;font-style:normal}
body[data-route=new] .wsteps .ls-txt i{display:inline;font-style:normal;white-space:nowrap}
body[data-route=new] .wsteps #lspct{font:700 12.5px/1 "Inter",sans-serif;font-variant-numeric:tabular-nums;color:#f4efe6}
body[data-route=new] .wsteps #lsph{font:500 12px/1 "Inter",sans-serif;opacity:.7}
@media (max-width:1700px){body[data-route=new] .wsteps #lsph{display:none}}
@keyframes ls-pulse{from{opacity:.9;scale:1}to{opacity:0;scale:1.7}}
@keyframes ls-in{from{opacity:0;translate:-8px 0}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.lsli,.ls-ring::after{animation:none!important}}
/* the scrolling tool panel: content fades out under its top edge and the grip, never slides beneath them */
@media (min-width:1101px){
  body[data-route=new] .editor-controls{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 16px),transparent 100%)}
  body[data-route=new] .editor-controls.scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 14px,#000 58px,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,transparent 14px,#000 58px,#000 calc(100% - 16px),transparent 100%)}
}
/* "time left" sits in the middle of the waveform's top edge, beside the in and out times, not between the buttons */
@media (min-width:1400px){
  .wizard .cut-step .cut-read strong{position:absolute;top:7px;left:50%;translate:-50% 0;z-index:2;font:600 11.5px/1 "Inter",sans-serif;color:rgba(244,239,230,.9);text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap}
}

/* Studio v19b: the brief stage never scrolls sideways (its red glow reaches past the panel), and its idea chips fade out at the edge they continue past */
body[data-route=new] .editor-controls{overflow-x:hidden}
.wizard [data-step="4"] .chips{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);padding-right:40px}

/* Studio v20: while a video is being made the page holds only the making (no title, no way back link), with one live line
   (the words being heard) and the video's facts under the stations */
.page.mk-on > .kicker,.page.mk-on > #vt{display:none}
.mks-live{margin:14px 0 0;max-width:46ch;display:grid;gap:5px}
.mks-live[hidden]{display:none}
.mks-live span{font:600 10.5px/1 "Inter",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.mks-live q{quotes:"\201C" "\201D";font:500 15px/1.45 "Inter",sans-serif;color:rgba(244,239,230,.82);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;animation:mk-live .5s cubic-bezier(.16,1,.3,1)}
@keyframes mk-live{from{opacity:.25;translate:0 4px}to{opacity:1;translate:0 0}}
.mks-facts dl{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.mks-facts dl div{padding:8px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);min-width:0;max-width:100%}
.mks-facts dt{font:600 10px/1 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.mks-facts dd{margin:6px 0 0;font:600 13px/1.2 "Inter",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
@media (prefers-reduced-motion:reduce){.mks-live q{animation:none}}

/* Studio v20b: the making scene is alive. The phone plays the video itself (muted), its sound lies under it as bars that
   light up as the work goes on, and the stations run as one thin horizontal line */
.mks-left{position:relative;z-index:1;display:grid;justify-items:center;gap:18px}
.mks-left .mks-phone{height:min(60svh,600px)}
.mks-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.86)}
.mks-wave{width:min(100%,calc(min(60svh,600px) * 9 / 16 + 60px));height:46px;padding:0 4px}
.mks-wave canvas{display:block;width:100%;height:100%}
.mks-steps{display:flex;width:100%;max-width:520px;gap:0}
.mks-steps li{flex:1 1 0;display:grid;justify-items:start;gap:10px;padding:0;font:600 12.5px/1.2 Inter,system-ui,sans-serif}
.mks-steps li i{width:12px;height:12px}
.mks-steps li:not(:last-child)::after{left:18px;top:5.25px;width:calc(100% - 24px);height:1.5px}
.mks-steps li.on i{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 34%,transparent),0 0 18px var(--acc)}
.mks-now{margin-bottom:22px}
@media (max-width:860px){.mks-left .mks-phone{height:min(46svh,440px)}.mks-wave{display:none}.mks-steps{display:none}}

/* v20c: the wave sits clear of the phone's halo; the facts stay on one line */
.mks-left{gap:46px}
.mks-wave{height:40px}
.mks-facts dl{flex-wrap:nowrap}
.mks-facts dl div:first-child{min-width:0;flex:0 1 auto}
.mks-facts dl div:first-child dd{max-width:22ch}

/* Home v5: "four syllables, four jobs" shows the real Studio. A window plays the recording of each step; four tabs under it
   fill as their step plays and hand over to the next; the glow takes the colour of the step on screen */
.nm-live{position:relative;margin-top:clamp(18px,2.6vh,30px)}
.nm-win{position:relative;z-index:1;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0b0b0e;box-shadow:0 50px 120px -50px #000,0 0 0 1px rgba(0,0,0,.4)}
.nm-bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.nm-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.nm-bar i:nth-child(1){background:#ff5f57}.nm-bar i:nth-child(2){background:#febc2e}.nm-bar i:nth-child(3){background:#28c840}
.nm-bar span{margin-left:10px;font:500 11.5px/1 "Inter",sans-serif;color:rgba(244,239,230,.5);letter-spacing:.02em}
.nm-screen{position:relative;aspect-ratio:2/1;background:#000}
.nm-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.nm-screen video.on{opacity:1}
.nm-glow{position:absolute;inset:auto -10% -40% -10%;height:60%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 22%,transparent),transparent);transition:background .6s ease;mix-blend-mode:screen}
.nm-live::before{content:"";position:absolute;inset:6% 4% -6% 4%;z-index:0;border-radius:40px;background:radial-gradient(60% 60% at 50% 60%,color-mix(in srgb,var(--c) 26%,transparent),transparent 72%);filter:blur(30px);transition:background .6s ease;pointer-events:none}
.nm-steps .nm-tabs{position:relative;z-index:1;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px;border:0}
.nm-steps .nm-tabs li{border:0}
.nm-tabs button{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;width:100%;height:100%;padding:12px 12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);overflow:hidden;transition:background .3s,border-color .3s}
.nm-tabs button:hover{background:rgba(255,255,255,.06)}
.nm-tabs button.on{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 9%,rgba(255,255,255,.03))}
.nm-steps .nm-tabs b{font:800 clamp(1.4rem,1.9vw,1.9rem)/1 "Inter";letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.6px color-mix(in srgb,var(--c) 80%,#fff);transition:color .3s}
.nm-steps .nm-tabs button.on b{color:var(--c);-webkit-text-stroke:0}
.nm-steps .nm-tabs h3{font:650 .95rem/1.2 "Inter";letter-spacing:-.01em}
.nm-steps .nm-tabs h3::before{display:none}
.nm-tabs p{margin-top:.3rem;font:400 .78rem/1.4 "Inter";color:var(--mute);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nm-tabs u{position:absolute;left:12px;right:12px;bottom:7px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.nm-tabs u i{display:block;height:100%;background:var(--c);transform:scaleX(0);transform-origin:left;will-change:transform}
.nm-go{position:relative;z-index:1;display:inline-flex;gap:.4rem;margin-top:14px;font:600 .9rem/1 "Inter";color:var(--ink);text-decoration:none;opacity:.8}
.nm-go:hover{opacity:1}
@media (max-width:900px){.nm-steps .nm-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.nm-screen video{transition:none}}

/* Home v5b: a tab reads as syllable + title on one line, the line under it full width; the link sits as a link */
.nm-tabs button{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;row-gap:6px;padding:12px 14px 16px}
.nm-tabs button span{display:contents}
.nm-tabs button p{grid-column:1 / -1;margin:0;-webkit-line-clamp:2}
.nm-steps .nm-tabs h3{font-size:.92rem;line-height:1.15}
.nm-steps .nm-go{display:inline-flex;grid-template-columns:none;align-items:center;gap:.45rem;padding:0;width:auto}

/* Home v5c: the live window gets the larger share of the row */
@media (min-width:901px){.nm{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}

/* Home v6: the section is the Studio's four steps only. Left, the steps read in full, the one on screen opens to show its
   details and fills its line as it plays; right, a large window plays the real recording of that step */
.nm2{display:grid;gap:clamp(22px,3vh,36px)}
.nm2-head{display:grid;gap:.6rem;max-width:62ch}
.nm2-head .sec{margin:0}
.nm2-sub{font:400 1.02rem/1.55 "Inter";color:var(--mute)}
.nm2 .nm-live{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:clamp(20px,2.6vw,40px);align-items:start;margin:0}
.nm2 .nm-live::before{inset:4% 0 -8% 30%}
.nm2 .nm-tabs{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.nm2 .nm-tabs button{display:block;padding:16px 18px 18px;border-radius:18px}
.nm2 .nt-top{display:flex;align-items:center;gap:14px}
.nm2 .nm-tabs b{font:800 1.9rem/1 "Inter";letter-spacing:-.03em}
.nm2 .nm-tabs h3{flex:1;font:650 1.08rem/1.2 "Inter";letter-spacing:-.015em}
.nm2 .nt-top em{font:600 .72rem/1 "Inter";font-style:normal;letter-spacing:.08em;color:var(--mute)}
.nm2 .nm-tabs p{margin:.65rem 0 0;font:400 .9rem/1.5 "Inter";color:var(--ink2,rgba(244,239,230,.75));display:block;-webkit-line-clamp:unset;overflow:visible}
.nm2 .nt-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1)}
.nm2 .nt-more ul{min-height:0;overflow:hidden;list-style:none;margin:0;padding:0;display:grid;gap:7px}
.nm2 .nm-tabs button.on .nt-more{grid-template-rows:1fr}
.nm2 .nm-tabs button.on .nt-more ul{padding-top:12px}
.nm2 .nt-more li{position:relative;padding-left:18px;font:500 .86rem/1.45 "Inter";color:rgba(244,239,230,.86)}
.nm2 .nt-more li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--c);box-shadow:0 0 10px var(--c)}
.nm2 .nm-tabs u{left:18px;right:18px;bottom:8px}
.nm2 .nm-tabs button:not(.on) p{color:var(--mute)}
.nm2 .nm-stage{position:sticky;top:96px;display:grid;gap:14px}
.nm2 .nm-win{border-radius:20px}
.nm2 .nm-go{justify-self:start}
@media (max-width:980px){.nm2 .nm-live{grid-template-columns:minmax(0,1fr)}.nm2 .nm-stage{position:relative;top:0;order:-1}}

/* Home v6b: no list numbers; each syllable is drawn in its step's colour, filled when its step is on screen */
.nm2 .nm-tabs{list-style:none;padding:0}
.nm2 .nm-tabs li{list-style:none}
.nm2 .nm-tabs b{color:transparent;-webkit-text-stroke:1.6px color-mix(in srgb,var(--c) 80%,#fff);transition:color .3s}
.nm2 .nm-tabs button.on b{color:var(--c);-webkit-text-stroke:0}

/* Studio v20d: the making scene's phone shows the edit's own captions over the prepared (coloured) picture */
.mks-screen{container-type:inline-size}
.mks-cap{position:absolute;left:0;right:0;z-index:2;display:flex;justify-content:center;translate:0 -50%;pointer-events:none;text-align:center;line-height:1.15}

/* Studio v21: song lyrics as captions, with the creator's copyright statement */
.lyrow{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:14px;padding:10px 14px;margin:0 0 12px;transition:border-color .2s,background .2s}
.lyrow .lyhead{margin:0}
.lyrow.on{border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:color-mix(in srgb,var(--acc) 6%,transparent)}
.lyrow.need{border-color:var(--danger,#ff5d5d);animation:lyneed .4s 2}
.lyok{display:flex;gap:10px;align-items:flex-start;margin-top:10px;font-size:.82rem;line-height:1.4;opacity:.92;cursor:pointer}
.lyok input{margin-top:3px;width:16px;height:16px;accent-color:var(--acc);flex:none}
@keyframes lyneed{50%{translate:6px 0}}
.swi{appearance:none;-webkit-appearance:none;flex:none;width:42px;height:24px;border-radius:99px;background:color-mix(in srgb,var(--ink) 18%,transparent);position:relative;cursor:pointer;transition:background .2s;margin:0}
.swi::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:translate .2s}
.swi:checked{background:var(--acc)}.swi:checked::after{translate:18px 0;background:#fff}
.swi:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* Studio v22: the brief step proposes the edit (what the video is, three directions, intensity); the own note is optional */
.wizard .brief-step .brief-h{margin:6px 0 14px!important;font-size:clamp(30px,2.6vw,44px)!important}
.brief-step .brief-sub{display:none}
.ana{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);margin-bottom:12px}
.ana b{display:block;font:700 15px/1.25 Inter,sans-serif;color:#fff7f2}.ana small{display:block;font-size:13px;opacity:.7;margin-top:2px}
.ana-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 22%,transparent)}
.ana.busy .ana-dot{animation:anap 1.1s ease-in-out infinite}@keyframes anap{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--acc) 5%,transparent)}}
.dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.dir{display:flex;flex-direction:column;gap:5px;text-align:left;padding:13px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.dir:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22)}
.dir b{font:700 14.5px/1.2 Inter,sans-serif;color:#fff7f2}.dir span{font-size:12.5px;line-height:1.38;opacity:.72}
.dir em{font-style:normal;font-size:11px;letter-spacing:.04em;text-transform:uppercase;opacity:.6;margin-top:auto}
.dir.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent);box-shadow:0 14px 40px -24px var(--acc)}.dir.on em{opacity:.95;color:#fff}
.dir.sk{min-height:96px;cursor:default;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:sk 1.4s linear infinite}@keyframes sk{to{background-position:-200% 0}}
.intens{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:6px 14px;margin-bottom:12px}
.intens .label{font-size:13px;opacity:.75}
.intseg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.intseg button{border:0;background:none;color:inherit;font:600 13px/1 Inter,sans-serif;padding:9px 14px;border-radius:999px;cursor:pointer;opacity:.75}
.intseg button[aria-checked=true]{background:var(--acc);color:var(--acc-ink,#fff);opacity:1}
.intens small{font-size:12px;line-height:1.35}
.bopts{display:grid;gap:6px;margin-bottom:10px}
.bopts .lyrow{margin:0;padding:8px 12px}.bopts .tlrow{margin:0}.bopts .planfirst{margin:0}
.bopts .tlrow b,.bopts .planfirst b{font-size:13.5px}.bopts .tlrow small,.bopts .planfirst small{font-size:12px}
.lyrow.sugg .lyhead b::after{content:"  ·  öneri";font-weight:500;font-size:11px;color:var(--acc);letter-spacing:.03em}
html[lang=en] .lyrow.sugg .lyhead b::after{content:"  ·  suggested"}html[lang=ru] .lyrow.sugg .lyhead b::after{content:"  ·  рекомендуем"}
.bnote,.bengine{border-top:1px solid rgba(255,255,255,.08);padding-top:8px;margin-top:4px}
.bnote>summary,.bengine>summary{cursor:pointer;font:600 13.5px/1.4 Inter,sans-serif;opacity:.82;padding:4px 0;list-style-position:inside}
.bnote[open]>summary,.bengine[open]>summary{margin-bottom:8px}
.wizard .bnote .composer #brief{min-height:84px!important}
.bnote .chips{margin-top:8px}.bengine .levels{margin-top:4px}
@media (max-width:900px){.dirs{grid-template-columns:1fr}.intens{grid-template-columns:1fr}}
.bengine .bopts{margin:4px 0 10px}
@media (max-height:820px){.wizard .brief-step .brief-h{font-size:30px!important;margin:2px 0 10px!important}.brief-step .brief-eyebrow{display:none}.ana{padding:9px 14px;margin-bottom:10px}.dir{padding:11px 12px}.dir span{font-size:12px}.dirs,.intens{margin-bottom:10px}}


/* Home v7: the four steps as a lean list beside a bigger window: syllable, name, one short line */
#ad .nm-live{grid-template-columns:minmax(240px,300px) minmax(0,1fr)!important;align-items:center;gap:28px}
#ad .nm-lean{display:grid;gap:8px}
#ad .nm-lean button{display:grid!important;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:4px 14px;padding:14px 16px!important;min-height:0!important;text-align:left;border-radius:16px}
#ad .nm-lean button>b{font:800 30px/1 Unbounded,Inter,sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px var(--c);transition:color .25s}
#ad .nm-lean button.on>b{color:var(--c);-webkit-text-stroke:0}
#ad .nm-lean button h3{margin:0;font:700 15.5px/1.25 Inter,sans-serif}
#ad .nm-lean button small{display:block;font-size:13px;line-height:1.35;opacity:.62;margin-top:3px}
#ad .nm-lean button:not(.on){opacity:.62}#ad .nm-lean button:not(.on):hover{opacity:.9}
#ad .nm-lean button u{grid-column:1/-1;margin-top:8px}
#ad .nm-lean button:not(.on) u{display:none}
@media (max-width:900px){#ad .nm-live{grid-template-columns:1fr!important}#ad .nm-lean{grid-template-columns:repeat(2,minmax(0,1fr))}}
#ad .nm-lean button>span{display:block!important;min-width:0}
#ad .nm-lean button>b{grid-row:1}


/* Home v8: the Studio on a stage (the app's own menu bar cropped away), the four syllables as tabs under it */
#ad .nm3{max-width:1180px;margin:0 auto}
.nm3-head{text-align:center;max-width:760px;margin:0 auto clamp(26px,4vh,44px)}
.nm3-head .kicker{justify-content:center}.nm3-sub{opacity:.62;margin-top:10px}
#ad .nm3-live{display:block!important}
.nm3-stage{position:relative;perspective:1600px;margin:0 auto;max-width:1060px}
.nm3-halo{position:absolute;inset:8% 6% -6%;border-radius:40px;background:radial-gradient(60% 60% at 50% 55%,color-mix(in srgb,var(--c) 38%,transparent),transparent 70%);filter:blur(40px);opacity:.75;transition:background .6s}
.nm3-frame{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1280/586;transform:rotateX(9deg) scale(.985);transform-origin:50% 100%;box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.25) inset;background:#000;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.nm3-stage:hover .nm3-frame{transform:rotateX(3deg) scale(1)}
.nm3-frame .nm-screen{position:absolute;inset:0}
.nm3-frame .nm-screen video{position:absolute;left:0;top:0;width:100%;height:auto;transform:translateY(-8.4%)}
.nm3-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 18%,transparent 82%,rgba(0,0,0,.35))}
.nm3-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:980px;margin:clamp(26px,4vh,40px) auto 0;padding:0;list-style:none}
.nm3-tabs button{display:flex!important;flex-direction:column;align-items:center;gap:4px;width:100%;padding:12px 8px 10px!important;border:0!important;background:none!important;color:inherit;cursor:pointer;text-align:center;opacity:.5;transition:opacity .25s}
.nm3-tabs button.on,.nm3-tabs button:hover{opacity:1}
.nm3-tabs b{font:800 clamp(34px,4vw,54px)/1 Unbounded,Inter,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.3px var(--c);transition:color .3s}
.nm3-tabs button.on b{color:var(--c);-webkit-text-stroke:0;text-shadow:0 10px 40px color-mix(in srgb,var(--c) 45%,transparent)}
.nm3-name{font:700 14px/1.2 Inter,sans-serif;margin-top:6px}
.nm3-tabs small{font-size:12.5px;opacity:0;max-height:0;transition:opacity .3s;line-height:1.35}
.nm3-tabs button.on small{opacity:.7;max-height:3em}
.nm3-tabs u{display:block;width:70%;height:2px;margin-top:8px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;text-decoration:none}
.nm3-tabs u i{display:block;height:100%;background:var(--c);transform-origin:0 50%;transform:scaleX(0)}
.nm3-go{display:flex!important;justify-content:center;margin-top:22px}
@media (max-width:760px){.nm3-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.nm3-frame{transform:none}}

/* Home v8: packages: glass cards, one lit, the video count up front */
.pk2{max-width:1120px;margin-left:auto!important;margin-right:auto!important;align-items:end!important}
.pk2-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:26px!important;color:#f4efe6!important;box-shadow:0 30px 80px -50px rgba(0,0,0,.9)!important;padding:30px 28px!important;gap:.7rem!important;transform:none!important}
.pk2-card.hot{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 26%,rgba(255,255,255,.05)),rgba(255,255,255,.03) 60%)!important;border-color:color-mix(in srgb,var(--acc) 60%,transparent)!important;box-shadow:0 40px 100px -40px color-mix(in srgb,var(--acc) 70%,transparent)!important;padding-top:40px!important;padding-bottom:40px!important}
.pk2-card .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;font:700 11px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:999px;white-space:nowrap}
.pk2-card h3{color:rgba(244,239,230,.7)!important}
.pk2-count{margin:0;font-size:14px;opacity:.75}.pk2-count b{font:800 44px/1 Unbounded,Inter,sans-serif;letter-spacing:-.04em;color:#fff;opacity:1;margin-right:4px}
.pk2-card .price{font:700 28px/1.1 Inter,sans-serif!important;color:#fff!important;margin:6px 0 0!important}
.pk2-card .price small{font-size:13px;font-weight:500;opacity:.6;margin-left:6px}
.pk2-card .per{font-size:13px;opacity:.6;margin:0 0 .4rem}
.pk2-card ul{gap:.55rem!important;margin:.4rem 0 1rem!important}
.pk2-card li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.4}
.pk2-card li::before{content:none!important}
.pk2-card li svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--acc)}
.pk2-card .btn{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:999px!important;justify-content:center}
.pk2-card.hot .btn{background:#f4efe6!important;color:#0b0b0d!important;border-color:#f4efe6!important}
@media (max-width:900px){.pk2{grid-template-columns:1fr!important}}
.pk2{align-items:stretch!important}
.pk2-card.hot{transform:translateY(-10px)!important}

/* ===== Studio v23 — craft: quality, how the editor read the video, the creative director, the customer's verdict ===== */
.qrow{margin-top:-4px}
.plan-review,.agent-review{display:flex;align-items:center;gap:10px;margin:.7rem 0 0;font-size:.9rem;opacity:.9}
.plan-review .score,.agent-review .score{font:800 22px/1 "Inter";color:var(--acc);letter-spacing:-.02em}
.plan-review .score small,.agent-review .score small{font-size:11px;opacity:.6;margin-left:1px}
.plan-review i{opacity:.7}
.plan-read{margin-top:1rem;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);max-width:76ch}
.plan-read b{font:700 12px/1 "Inter";letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.plan-read dl{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:7px 14px;margin:.7rem 0 0}
.plan-read div{display:contents}.plan-read dt{font-size:.8rem;opacity:.6;padding-top:.1rem}.plan-read dd{margin:0;font-size:.93rem;line-height:1.45}
.plan-beats .job{display:block;margin-top:.3rem;font:700 10px/1 "Inter";letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-style:normal;opacity:.85}
.fb{margin-top:14px;padding:14px 16px;border-radius:16px;border:1px dashed rgba(255,255,255,.16);max-width:68ch}
.fb b{font:700 12px/1 "Inter";letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.fb p{margin:.45rem 0 0;font-size:.9rem}
.fb-k{display:flex;gap:8px;margin-top:.7rem}.fb-k .on{background:var(--acc);color:var(--acc-ink,#fff);border-color:transparent}
.fb-more{margin-top:.7rem}.fb-tags{display:flex;flex-wrap:wrap;gap:6px}
.fb-tags .chip{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:inherit;border-radius:999px;padding:7px 11px;font:600 12px/1 Inter,sans-serif;cursor:pointer}
.fb-tags .chip.on{background:var(--acc);color:var(--acc-ink,#fff);border-color:transparent}
.fb textarea{width:100%;min-height:64px;margin-top:.6rem;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:inherit;padding:10px 12px;font:14px/1.4 Inter,sans-serif;resize:vertical}
.fb.done{border-style:solid;border-color:rgba(255,255,255,.08)}
@media (max-width:700px){.plan-read dl{grid-template-columns:1fr}}

.mks-review{margin:.45rem 0 0;font:600 12px/1.3 Inter,sans-serif;color:var(--acc)}


/* ================= Visual plan (storyboard): the editor's scenes as ghosts on the customer's own video ================= */
.page.sb-on .vgrid,.page.sb-on .page-title{display:none}
.sb [hidden]{display:none!important}
.sb{margin:4px 0 44px}
.sb-head{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.sb-head>div:first-child{flex:1;min-width:min(100%,420px)}
.sb-eyebrow{font:700 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 .55rem}
.sb-head h2{font:800 clamp(1.5rem,2.6vw,2.2rem)/1.06 "Inter",system-ui,sans-serif;letter-spacing:-.03em;margin:0 0 .5rem}
.sb-idea{font-size:1.02rem;line-height:1.5;max-width:68ch;margin:0 0 .45rem}
.sb-lead{font-size:.86rem;opacity:.6;max-width:74ch;margin:0}
.sb-acts{display:flex;gap:.6rem;flex-wrap:wrap}
.sb-replan,.sb-add-f,.sb-edit{display:flex;gap:.5rem}
.sb-replan{margin:-4px 0 18px;max-width:760px}
.sb-replan input,.sb-add-f input,.sb-edit input{flex:1;min-width:0;border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:inherit;font:inherit;font-size:.92rem}
.sb-replan input:focus-visible,.sb-add-f input:focus-visible,.sb-edit input:focus-visible,.sb-note textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sb-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:start}
.sb-stage{position:sticky;top:84px}
.sb-phone{--k:.35;position:relative;width:min(390px,36vw,calc((100svh - 330px)*.5625));aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.13),0 34px 90px -34px rgba(0,0,0,.95),0 0 0 9px rgba(255,255,255,.03);touch-action:none}
.sb-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.sb-ghosts{position:absolute;inset:0}
.sb-g{position:absolute;display:grid;place-items:center;text-align:center;border-radius:calc(26px*var(--k) + 4px);border:2px dashed rgba(255,250,240,.95);
  background:rgba(14,14,16,.28);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 8px 26px -10px rgba(0,0,0,.7);cursor:grab;user-select:none;touch-action:none;
  backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);animation:sbIn .24s cubic-bezier(.16,1,.3,1) both}
.sb-g:active{cursor:grabbing}
.sb-g.bk{border-style:dotted;border-color:rgba(255,250,240,.55);background:rgba(255,255,255,.04);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;place-items:start center;padding-top:calc(60px*var(--k))}
.sb-g.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 22%,rgba(14,14,16,.35));z-index:3}
.sb-g.bk.on{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.sb-gt{padding:0 8px;max-width:100%}
.sb-gt strong{display:block;font:800 max(11px,calc(46px*var(--k)))/1.05 "Inter",system-ui,sans-serif;letter-spacing:-.01em;color:#fffaf0;text-shadow:0 1px 4px rgba(0,0,0,.7);overflow-wrap:anywhere}
.sb-gt small{display:block;margin-top:calc(10px*var(--k));font:600 max(9px,calc(28px*var(--k)))/1.2 "Inter",system-ui,sans-serif;color:#fffaf0;opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.sb-g .sb-n{position:absolute;left:-9px;top:-9px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.sb-n{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--acc-ink,#fff);font:800 11px/1 "Inter",system-ui,sans-serif}
.sb-g em{position:absolute;left:50%;top:-9px;transform:translateX(-50%);white-space:nowrap;font:700 9px/1 "Inter";letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:#fffaf0;background:rgba(0,0,0,.6);padding:3px 7px;border-radius:999px}
.sb-rs{position:absolute;right:-8px;bottom:-8px;width:18px;height:18px;border-radius:50%;background:var(--acc);border:2px solid #fff;cursor:nwse-resize;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.sb-face{position:absolute;border:2px dashed rgba(255,96,96,.95);border-radius:42% 42% 38% 38%;background:rgba(255,70,70,.10);pointer-events:none;z-index:4}
.sb-cam{position:absolute;inset:6%;pointer-events:none;z-index:2}
.sb-cam i{position:absolute;width:13%;height:7.5%;border:0 solid var(--acc);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.sb-cam i:nth-child(1){left:0;top:0;border-left-width:3px;border-top-width:3px}.sb-cam i:nth-child(2){right:0;top:0;border-right-width:3px;border-top-width:3px}
.sb-cam i:nth-child(3){left:0;bottom:0;border-left-width:3px;border-bottom-width:3px}.sb-cam i:nth-child(4){right:0;bottom:0;border-right-width:3px;border-bottom-width:3px}
.sb-cam[data-c=pull]{inset:2%}.sb-cam[data-c=crane] i{border-color:#fff}
.sb-cam span{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);white-space:nowrap;font:700 11px/1 "Inter";color:#fff;background:rgba(0,0,0,.6);padding:5px 9px;border-radius:999px}
.sb-bar{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.sb-play,.sb-snd{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:inherit;cursor:pointer}
.sb-play:hover,.sb-snd:hover{background:rgba(255,255,255,.14)}.sb-play svg,.sb-snd svg{width:19px;height:19px}
.sb-time{font:600 .9rem "JetBrains Mono",ui-monospace,monospace;opacity:.85;font-variant-numeric:tabular-nums;min-width:4.4em}
.sb-count{margin-left:auto;font-size:.8rem;opacity:.55}
.sb-side{min-width:0}
.sb-tl{position:relative;padding:10px 0 12px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08);touch-action:none;cursor:pointer}
.sb-lanes{position:relative;min-height:30px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 10%);border-radius:8px}
.sb-chip{position:absolute;height:24px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:inherit;
  font:700 11px/22px "Inter",system-ui,sans-serif;text-align:center;overflow:hidden;white-space:nowrap;cursor:grab;touch-action:none;min-width:22px}
.sb-chip:hover{background:rgba(255,255,255,.2)}
.sb-chip.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink,#fff)}
.sb-chip.bk{background:rgba(255,255,255,.05);border-style:dashed}
.sb-chip.bk.on{background:color-mix(in srgb,var(--acc) 40%,transparent)}
.sb-e{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize}.sb-e.l{left:0}.sb-e.r{right:0}
.sb-chip.on .sb-e{background:rgba(255,255,255,.25)}
.sb-headline{position:absolute;top:4px;bottom:6px;width:2px;margin-left:-1px;background:#fff;border-radius:2px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.sb-hint{font-size:.8rem;opacity:.55;margin:.2rem 0 .8rem;line-height:1.45}
.sb-undo{display:flex;align-items:center;gap:10px;margin:0 0 .6rem;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:.88rem}
.sb-list{list-style:none;margin:0;padding:0 4px 0 0;display:grid;gap:8px;max-height:calc(100svh - 380px);min-height:220px;overflow:auto;overscroll-behavior:contain}
.sb-list li{border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);padding:10px 12px;transition:border-color .2s,background .2s}
.sb-list li.on{border-color:color-mix(in srgb,var(--acc) 70%,transparent);background:color-mix(in srgb,var(--acc) 10%,rgba(255,255,255,.03))}
.sb-list li.bk .sb-n{background:transparent;border:1.5px dashed var(--acc);color:inherit}
.sb-list li.busy{opacity:.75}
.sb-list li:not(.on):not(.busy){padding:8px 12px}
.sb-list li:not(.on):not(.busy) q,.sb-list li:not(.on):not(.busy) .sb-why,.sb-list li:not(.on):not(.busy) .sb-cacts,.sb-list li:not(.on) .sb-moved,.sb-list li:not(.on) .sb-edit{display:none}
.sb-c{display:flex;gap:10px;align-items:center;width:100%;background:none;border:0;color:inherit;text-align:left;padding:0;cursor:pointer;font:inherit}
.sb-ct{flex:1;min-width:0}.sb-ct strong{display:block;font:700 .95rem/1.25 "Inter",system-ui,sans-serif}.sb-ct small{display:block;opacity:.72;font-size:.82rem;margin-top:2px}
.sb-tm{font:600 .78rem "JetBrains Mono",ui-monospace,monospace;opacity:.6;white-space:nowrap;font-variant-numeric:tabular-nums}
.sb-list q{display:block;margin:.45rem 0 0 32px;font-size:.82rem;opacity:.6;font-style:italic}.sb-list q::before,.sb-list q::after{content:""}
.sb-why{margin:.35rem 0 0 32px;font-size:.82rem;opacity:.8;line-height:1.45}
.sb-moved{margin:.35rem 0 0 32px;font-size:.78rem;color:color-mix(in srgb,var(--acc) 80%,#fff)}
.sb-cacts{display:flex;gap:6px;align-items:center;margin:.55rem 0 0 32px}
.sb-wait{font-size:.82rem;opacity:.8;display:inline-flex;align-items:center;gap:8px}
.sb-wait::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:sbSpin .8s linear infinite}
.sb-edit{margin:.55rem 0 0 32px}
.sb-add{margin-top:12px}.sb-add-f{margin-top:8px}
.sb-note{margin-top:18px}.sb-note label{display:block;font:700 11px/1 "Inter";letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:.55rem}
.sb-note textarea{width:100%;min-height:68px;resize:vertical;border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:inherit;font:inherit;font-size:.92rem}
.sb-free{font-size:.78rem;opacity:.5;margin:.8rem 0 0}
@keyframes sbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes sbSpin{to{transform:rotate(360deg)}}
@media (max-width:920px){.sb-main{grid-template-columns:1fr}.sb-stage{position:static;justify-self:center}.sb-phone{width:min(360px,86vw)}.sb-list{max-height:none}}
@media (prefers-reduced-motion:reduce){.sb-g{animation:none}.sb-wait::before{animation:none}}

/* Visual plan: rough sketches in the boxes; preparing screen: the editor's own test frames */
.sb-g.sk{place-items:end center;background:rgba(14,14,16,.12)}
.sb-g.bk.sk{padding-top:0}
.sb-g .sb-sk{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none}
.sb-g.bk .sb-sk{opacity:.82}
.sb-g.sk .sb-gt strong{display:none}
.sb-g.sk .sb-gt{position:relative;margin-bottom:calc(10px*var(--k) + 2px)}
.sb-g.sk .sb-gt small{display:inline-block;margin:0;padding:2px 7px;border-radius:7px;background:rgba(0,0,0,.62)}
.sb-th{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.05);display:grid;place-items:center;overflow:hidden}
.sb-th:empty{display:none}
.sb-th img{max-width:32px;max-height:32px}
.mks-frames{margin-top:18px;max-width:46ch;padding:14px 16px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.mks-frames[hidden]{display:none}
.mks-frames b{display:block;font:700 11px/1 "Inter";letter-spacing:.14em;text-transform:uppercase;color:var(--acc,#9a63ff)}
.mks-frames small{display:block;margin:.45rem 0 .6rem;font-size:.82rem;line-height:1.4;opacity:.72}
.mks-fr{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.mks-f{flex:none;position:relative;width:56px;aspect-ratio:9/16;border-radius:9px;overflow:hidden;border:1.5px solid rgba(255,255,255,.14);padding:0;background:#0c0c10;cursor:pointer}
.mks-f img{width:100%;height:100%;object-fit:cover;display:block}
.mks-f span{position:absolute;left:0;right:0;bottom:0;font:700 9px/1.7 "Inter";color:#fff;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.mks-f.on{border-color:var(--acc,#9a63ff);box-shadow:0 0 0 1px var(--acc,#9a63ff)}
.mks-f.new::after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--acc,#9a63ff);box-shadow:0 0 8px var(--acc,#9a63ff)}
.mks-screen img.mks-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;animation:none;filter:none}
.mks-screen img.mks-shot[hidden]{display:none}
.mks-screen.shots video,.mks-screen.shots .mks-cap,.mks-screen.shots .ex-beam,.mks-screen.shots .mks-grid{opacity:0}

/* the listening screen: skip the wait (captions stay on) or say no to captions, two separate choices */
.ex-acts{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px}
.ex-nocap{background:none;border:0;padding:4px 6px;color:inherit;opacity:.62;font:600 12px/1.2 "Inter",system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ex-nocap:hover,.ex-nocap:focus-visible{opacity:1}

/* the last step, simpler: one quality, no intensity; and the question when there are no captions */
.lyrow[hidden],.bopts:empty{display:none}
.bsimple{margin-top:14px}
.capask{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:sbIn .2s ease both}
.capask-box{max-width:420px;width:100%;padding:24px 24px 20px;border-radius:20px;background:#121216;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px -20px rgba(0,0,0,.8)}
.capask-box h3{margin:0 0 .5rem;font:800 1.25rem/1.25 "Inter",system-ui,sans-serif;color:#fffaf0}
.capask-box p{margin:0 0 1.1rem;font-size:.95rem;line-height:1.5;opacity:.82}
.capask-acts{display:flex;gap:10px;flex-wrap:wrap}

/* =================================================================================================================
   Perf (2026-10-18): every looping decoration moves only transform and opacity, so the compositor plays it and the
   page never re-lays out or repaints for it; the top bar is solid instead of blurring the moving videos under it;
   sections below the fold are not rendered until they come near the screen.
   ================================================================================================================= */
.chore-art .w{position:relative;animation-name:ca-w2}
.chore-art .w::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--acc);opacity:0;animation:ca-w2o 2.4s infinite;animation-delay:inherit}
@keyframes ca-w2{0%,28%{transform:scale(1.12)}34%,100%{transform:scale(1)}}
@keyframes ca-w2o{0%,28%{opacity:1}34%,100%{opacity:0}}
.chore-art .bar{height:46px;transform:scaleY(.26);animation-name:ca-bar2}
@keyframes ca-bar2{0%,100%{transform:scaleY(.26)}50%{transform:scaleY(1)}}
.chore-art .ty{position:relative;width:120px;background:none;border:0;animation:none}
.chore-art .ty::before{content:"";position:absolute;inset:0;border-radius:4px;background:rgba(255,255,255,.7);transform-origin:0 50%;transform:scaleX(0);animation:ca-ty2 3s steps(12) infinite}
.chore-art .ty::after{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--acc);animation:ca-ty3 3s steps(12) infinite}
@keyframes ca-ty2{0%{transform:scaleX(0)}60%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes ca-ty3{0%{transform:translateX(0)}60%,90%{transform:translateX(117px)}100%{transform:translateX(0)}}
.chore-art .bx.b2{position:relative;background:rgba(255,255,255,.14);animation:none}
.chore-art .bx.b2::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,var(--acc),#e0932f);opacity:0;animation:ca-bx2 3s infinite}
@keyframes ca-bx2{0%,60%{opacity:0}75%,100%{opacity:1}}
.slog-cap i{position:relative;color:#fff;animation:none}
.slog-cap i::after{content:attr(data-t);position:absolute;left:0;top:0;color:var(--acc2);opacity:0;animation:sl-cap2 3.2s infinite;animation-delay:inherit;white-space:nowrap}
@keyframes sl-cap2{0%,22%{opacity:1}26%,100%{opacity:0}}
.slog-art .fl{position:relative;display:block;width:44px;height:31px;border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.2);animation:sl-fl2 4.8s infinite}
.slog-art .fl .flag{display:block;width:44px;height:31px;border-radius:7px;filter:none;animation:none}
.slog-art .fl::before{content:"";position:absolute;inset:0;border-radius:7px;background:rgba(16,16,18,.58);animation:sl-fl3 4.8s infinite;animation-delay:inherit}
.slog-art .fl::after{content:"";position:absolute;inset:0;border-radius:7px;box-shadow:0 0 0 3px var(--acc),0 0 30px var(--accg);opacity:0;animation:sl-fl4 4.8s infinite;animation-delay:inherit}
.slog-art .fl:nth-child(2){animation-delay:.8s}.slog-art .fl:nth-child(3){animation-delay:1.6s}.slog-art .fl:nth-child(4){animation-delay:2.4s}.slog-art .fl:nth-child(5){animation-delay:3.2s}.slog-art .fl:nth-child(6){animation-delay:4s}
@keyframes sl-fl2{0%,14%{transform:scale(1.22)}20%,100%{transform:scale(1)}}
@keyframes sl-fl3{0%,14%{opacity:0}20%,100%{opacity:1}}
@keyframes sl-fl4{0%,14%{opacity:1}20%,100%{opacity:0}}
.slog-art .sl i{left:0;width:100%;height:21px;background:none;box-shadow:none;border-radius:0;transform:translateX(20%);animation-name:sl-th2}
.slog-art .sl i::before{content:"";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:#fbf7ee;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 34%,transparent)}
@keyframes sl-th2{0%,100%{transform:translateX(14%)}50%{transform:translateX(74%)}}
.wizard[data-cur="4"] #go::after{left:0;transform:translateX(-118%);animation-name:go-sheen2}
@keyframes go-sheen2{0%,55%{transform:translateX(-118%)}100%{transform:translateX(340%)}}
.dir.sk{position:relative;overflow:hidden;background:rgba(255,255,255,.05);animation:none}
.dir.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:translateX(-100%);animation:sk2 1.4s linear infinite;pointer-events:none}
@keyframes sk2{to{transform:translateX(100%)}}
.ana.busy .ana-dot{position:relative;animation:none}
.ana.busy .ana-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 6%,transparent);opacity:0;animation:anap2 1.1s ease-in-out infinite}
@keyframes anap2{50%{opacity:1}}
.mks-steps li.on i{position:relative;animation:none}
.mks-steps li.on i::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 12%,transparent),0 0 30px var(--acc);opacity:0;animation:anap2 1.6s ease-in-out infinite;pointer-events:none}
.ex-beam{top:0;transform:translateY(-115%);animation-name:ex-beam2}
@keyframes ex-beam2{to{transform:translateY(400%)}}
.mk-scan{top:0;transform:translateY(-105%);animation-name:mkscan2}
@keyframes mkscan2{to{transform:translateY(260%)}}
/* the top bar: solid, never a blur of the videos moving under it */
body:not(.home) #top,body.home.scrolled #top,body[data-route=new] #top{background:rgba(6,6,8,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
body.home #view>section#ornek{contain:layout paint}
@media(prefers-reduced-motion:reduce){.chore-art *::before,.chore-art *::after,.slog-art *::before,.slog-art *::after,.slog-cap i::after,.slog-art .fl{animation:none!important}}
.chore-art .flag{animation-name:ca-fl2}
@keyframes ca-fl2{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* a part of the page that is off the screen keeps its animations paused (they would still be serviced every frame) */
body.home #view>section:not([data-live]) *,body.home #view>section:not([data-live]) *::before,body.home #view>section:not([data-live]) *::after,
body.home #view>footer:not([data-live]) *,body.home #view>footer:not([data-live]) *::before,body.home #view>footer:not([data-live]) *::after{animation-play-state:paused!important}
.wall img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;display:block;background:#111}
/* the hero's wall is one baked video now */
#bh .wall{inset:0;display:block;transform:none}
#bh .wall .wallv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;border-radius:0}

/* =================================================================================================================
   Accounts (2026-10-18): the header's account menu, sign in / sign up / reset, the account page, memberships, the
   administrators' list, the draft legal pages. Black, warm cream, the site's one accent.
   ================================================================================================================= */
.navl{display:flex;gap:clamp(12px,2vw,26px);align-items:center}
.acct{position:relative;display:flex;align-items:center}
.acct:empty{display:none}
.acct-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));display:grid;place-items:center;cursor:pointer;color:var(--ink);padding:0}
.acct-btn:hover,.acct-btn[aria-expanded="true"]{border-color:rgba(255,255,255,.5)}
.acct-btn i{font:700 .78rem/1 "Inter";font-style:normal;letter-spacing:.02em}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:260px;padding:8px;border-radius:18px;background:#111114;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -20px #000;display:grid;gap:2px;z-index:50}
.acct-menu[hidden]{display:none}
.acct-who{padding:10px 12px 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px;display:grid;gap:3px}
.acct-who b{font:650 .95rem/1.2 "Inter"}
.acct-who span{color:var(--mute);font:500 .82rem/1.3 "Inter";overflow:hidden;text-overflow:ellipsis}
.plan-badge{font-style:normal;justify-self:start;margin-top:7px;font:600 .72rem/1 "Inter";padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ink)}
.plan-badge.p-starter,.plan-badge.p-pro,.plan-badge.p-agency,.plan-badge.p-staff{background:color-mix(in srgb,var(--acc) 30%,transparent)}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;text-decoration:none;font:500 .9rem/1.2 "Inter";background:none;border:0;cursor:pointer;color:var(--ink);opacity:1;box-shadow:none}
.acct-menu a:hover,.acct-menu button:hover,.acct-menu a:focus-visible,.acct-menu button:focus-visible{background:rgba(255,255,255,.07)}
.acct-menu .acct-out{color:#ffb3ad}
@media(max-width:860px){.navl a[data-nav="profiles"],.navl a[data-nav="trends"]{display:none}}
@media(max-width:640px){.navl a[data-nav="videos"],.navl a[data-nav="ig"],.navl a[data-nav="plans"]{display:none}}

/* sign in, sign up, forgotten password, reset */
body[data-route=login] #top,body[data-route=signup] #top,body[data-route=forgot] #top,body[data-route=reset] #top{background:transparent!important;border-bottom-color:transparent!important}
.auth{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);background:#000}
.auth-main{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:96px clamp(20px,6vw,88px) 40px;gap:26px}
.auth-mark{display:none}
.auth-card{width:100%;max-width:440px}
.auth-card h1{font:700 clamp(2rem,3.2vw,2.8rem)/1.05 "Inter";letter-spacing:-.045em}
.af-sub{color:var(--ink2);margin:.7rem 0 1.6rem;font-size:1rem;line-height:1.5}
.af-sub.bad{color:#ffb3ad}
.af{display:grid;gap:16px}
.af[hidden]{display:none}
.fld{display:grid;gap:7px}
.fld>label{font:600 .8rem/1.2 "Inter";color:var(--ink2)}
.fld-box{position:relative}
.fld input:not([type=checkbox]){width:100%;height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);padding:0 16px;font:500 1rem/1 "Inter";color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
.fld input:not([type=checkbox]):hover{border-color:rgba(255,255,255,.28)}
.fld input:not([type=checkbox]):focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 24%,transparent);background:rgba(255,255,255,.06)}
.fld-pw input{padding-right:54px!important}
.eye{position:absolute;right:6px;top:6px;width:40px;height:40px;border-radius:10px;border:0;background:none;color:var(--mute);display:grid;place-items:center;cursor:pointer}
.eye svg{width:20px;height:20px}
.eye:hover,.eye:focus-visible{color:var(--ink);background:rgba(255,255,255,.07)}
.fld.bad input:not([type=checkbox]){border-color:var(--danger);box-shadow:0 0 0 4px rgba(255,107,97,.14)}
.fe{color:#ff8f86;font:500 .82rem/1.35 "Inter"}
.fe:empty{display:none}
.caps{color:#ffcb6b;font:600 .78rem/1.2 "Inter"}
.caps[hidden]{display:none}
.af-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.chk{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font:500 .9rem/1.45 "Inter";color:var(--ink2)}
.chk input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;flex:none;margin-top:1px;cursor:pointer;background:transparent}
.chk input:checked{background:var(--acc);border-color:var(--acc)}
.chk input:checked::after{content:"";width:10px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.chk input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fld-chk.bad .chk input{border-color:var(--danger)}
.af-link,.af-alt a,.auth-legal a,.chk a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.af-link:hover,.af-alt a:hover,.chk a:hover{text-decoration-color:var(--acc)}
.af-go{width:100%}
.btn .spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.btn.busy .spin{display:inline-block}
.btn.busy span{opacity:.65}
.btn:disabled{cursor:default}
@keyframes spin{to{transform:rotate(360deg)}}
.af-msg{border-radius:12px;padding:12px 14px;font:500 .9rem/1.45 "Inter"}
.af-msg[hidden]{display:none}
.af-msg.bad{background:rgba(255,107,97,.1);border:1px solid rgba(255,107,97,.4);color:#ffc4bf}
.af-msg.ok{background:rgba(95,224,160,.1);border:1px solid rgba(95,224,160,.35);color:#c9f5dd}
.af-note{border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font:500 .86rem/1.5 "Inter";color:var(--ink2)}
.af-alt{margin-top:22px;color:var(--mute);font-size:.94rem}
.auth-legal{color:var(--mute);font-size:.8rem;text-align:center}
.pwm{display:flex;align-items:center;gap:12px;margin-top:-6px}
.pwm-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;flex:1}
.pwm-bars i{height:5px;border-radius:3px;background:rgba(255,255,255,.12);transition:background .2s}
.pwm[data-s="1"] .pwm-bars i:nth-child(-n+1){background:#ff6b61}
.pwm[data-s="2"] .pwm-bars i:nth-child(-n+2){background:#ffb224}
.pwm[data-s="3"] .pwm-bars i:nth-child(-n+3){background:#9ad8b6}
.pwm[data-s="4"] .pwm-bars i{background:#5fe0a0}
.pwm-l{font:600 .78rem/1 "Inter";color:var(--mute);min-width:60px;text-align:right}
.pwr{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;font:500 .8rem/1.3 "Inter";color:var(--mute);margin-top:-4px}
.pwr li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);margin-right:7px;vertical-align:1px;transition:background .2s}
.pwr li.ok{color:var(--ink2)}
.pwr li.ok::before{background:#5fe0a0}
.auth-side{position:relative;overflow:hidden;border-left:1px solid rgba(255,255,255,.08);background:#050506}
.auth-side video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.auth-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.22) 16%,rgba(0,0,0,.5) 52%,#000 100%)}
.auth-quote{position:absolute;left:clamp(24px,4vw,56px);right:clamp(24px,4vw,56px);bottom:clamp(28px,6vh,64px)}
.auth-quote h2{font:700 clamp(1.8rem,2.6vw,2.6rem)/1.08 "Inter";letter-spacing:-.04em;max-width:16ch}
.auth-quote ul{list-style:none;display:grid;gap:9px;margin-top:18px;color:var(--ink2);font-size:.98rem}
.auth-quote li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-right:10px;vertical-align:2px}
.af-done{display:grid;gap:12px}
.af-done[hidden]{display:none}
.af-ok{width:54px;height:54px;border-radius:50%;background:color-mix(in srgb,var(--acc) 26%,transparent);display:grid;place-items:center;color:var(--ink)}
.af-ok svg{width:26px;height:26px}
.af-done h2{font:700 1.5rem/1.15 "Inter";letter-spacing:-.03em}
.af-done p{color:var(--ink2)}
@media(max-width:900px){.auth{grid-template-columns:1fr}.auth-side{display:none}.auth-main{padding:92px 20px 40px;justify-content:flex-start}}

/* account, plans, administration, legal */
.pg-h{margin-bottom:28px}
.pg-h h1{font:700 clamp(2rem,4vw,3.2rem)/1.05 "Inter";letter-spacing:-.045em}
.pg-sub{color:var(--ink2);margin-top:.7rem;max-width:46rem;line-height:1.55}
.box{border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));padding:clamp(18px,2.4vw,28px);display:grid;gap:14px;align-content:start}
.box h2{font:650 1.15rem/1.25 "Inter";letter-spacing:-.02em}
.box.flush{padding:0;overflow:hidden}
.box-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.small{font-size:.84rem}
.acc-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.acc-tabs{display:grid;gap:4px;position:sticky;top:96px}
.acc-tabs a{padding:11px 14px;border-radius:12px;text-decoration:none;color:var(--ink2);font:550 .94rem/1.2 "Inter"}
.acc-tabs a:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.acc-tabs a.on{background:rgba(255,255,255,.09);color:var(--ink)}
.acc-tabs a.danger{color:#ffb3ad}
.acc-body{display:grid;gap:18px}
.acc-body .af{max-width:620px}
@media(max-width:820px){.acc-grid{grid-template-columns:1fr}.acc-tabs{position:static;display:flex;overflow-x:auto;gap:6px}.acc-tabs a{white-space:nowrap}}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.facts dt{font:600 .72rem/1.2 "Inter";letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin-top:5px;font:550 .98rem/1.35 "Inter"}
.sessions{list-style:none;display:grid;gap:8px}
.sessions li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.sessions li div{display:grid;gap:3px}
.sessions span{color:var(--mute);font-size:.82rem}
.badge-ok{font-style:normal;display:inline-block;margin-left:8px;font:600 .7rem/1 "Inter";padding:4px 8px;border-radius:999px;background:rgba(95,224,160,.16);color:#a5f2ca;vertical-align:1px}
.meter{height:10px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.meter i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.meter-row{display:flex;justify-content:space-between;font:500 .92rem/1 "Inter";color:var(--ink2)}
.tbl{width:100%;border-collapse:collapse;font:500 .9rem/1.35 "Inter"}
.tbl th{text-align:left;font:600 .72rem/1.2 "Inter";letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .sub{display:block;color:var(--mute);font-size:.8rem;margin-top:2px}
.tbl-wrap{overflow-x:auto}
.danger-card{border-color:rgba(255,107,97,.3)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:28px 26px 26px;display:grid;gap:14px;align-content:start;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.plan.hot{border-color:color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:0 30px 80px -40px var(--accg)}
.plan.on{outline:2px solid var(--acc);outline-offset:3px}
.plan-tag{position:absolute;top:-11px;left:24px;font:700 .68rem/1 "Inter";letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--acc);color:#fff}
.plan h3{font:650 1.25rem/1 "Inter"}
.plan-price{font:700 2.2rem/1 "Inter";letter-spacing:-.04em}
.plan-price small{font:500 .9rem/1 "Inter";color:var(--mute);margin-left:6px;letter-spacing:0}
.plan ul{list-style:none;display:grid;gap:9px;font:500 .93rem/1.35 "Inter";color:var(--ink2)}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--acc2)}
.plan .btn{margin-top:6px}
.plan-now{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:14px 18px;border-radius:16px;background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);margin-bottom:22px}
.plan-now span{color:var(--ink2)}
@media(max-width:980px){.plans{grid-template-columns:1fr;max-width:520px}}
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.72)}
.modal-box{position:relative;width:100%;max-width:470px;border-radius:24px;background:#111114;border:1px solid rgba(255,255,255,.12);padding:28px;display:grid;gap:14px;box-shadow:0 40px 100px -30px #000;max-height:calc(100svh - 32px);overflow:auto}
.modal-box h2{font:700 1.5rem/1.15 "Inter";letter-spacing:-.03em}
.modal-x{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.07);color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer}
.modal-x:hover{background:rgba(255,255,255,.14)}
.co-months{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:rgba(255,255,255,.05);padding:5px;border-radius:14px}
.co-months button{height:38px;border-radius:10px;border:0;background:none;color:var(--ink2);font:600 .86rem/1 "Inter";cursor:pointer}
.co-months button.on{background:rgba(255,255,255,.14);color:var(--ink)}
.co-sum{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.co-sum span{color:var(--ink2)}
.co-sum b{font:700 1.6rem/1 "Inter";letter-spacing:-.03em}
.co-what{list-style:none;display:grid;gap:6px;color:var(--ink2);font-size:.9rem}
.co-acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ig-spaces{display:grid;gap:8px;max-height:50vh;overflow:auto}
.ig-space{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:pointer}
.ig-space input{margin-top:3px;accent-color:var(--acc)}
.ig-space span{display:grid;gap:3px}
.ig-space small{color:var(--mute)}
.adm-bar{display:flex;gap:14px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.adm-q{height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);padding:0 14px;min-width:min(320px,100%);color:var(--ink)}
.adm-t td.acts{white-space:normal;min-width:230px}
.adm-t td.acts>*{margin:0 4px 4px 0}
.adm-t select.sel{width:auto;max-width:170px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:#16161a;color:var(--ink);padding:0 8px}
.adm-t tr.off td{opacity:.5}
.adm .box{margin-top:18px}
button.link{background:none;border:0;color:var(--acc2);font:600 .8rem/1 "Inter";cursor:pointer;margin-left:8px;padding:4px 0}
.lazy-wait{min-height:60vh;display:grid;place-items:center;align-content:center;gap:14px;color:var(--mute);padding-top:80px}
.lazy-wait i{width:28px;height:28px;border-radius:50%;border:2.5px solid rgba(255,255,255,.18);border-top-color:var(--acc);animation:spin .8s linear infinite}
.legal-body{max-width:820px;gap:10px}
.legal-body h2{margin-top:10px}
.legal-body p{color:var(--ink2);line-height:1.65}

/* =================================================================================================================
   Instagram tools (2026-10-18): #/ig/... — the side menu, cards, rule cards, inbox, simulator. Same black and warm
   cream as the rest of the site; this area's one accent is rose. No blur, no endless animation (only spinners).
   ================================================================================================================= */
body[data-route=ig]{--acc:#ff4f8b;--acc2:#ff9cbf;--accg:rgba(255,79,139,.42)}
.ig{max-width:1440px;display:grid;grid-template-columns:248px minmax(0,1fr);gap:clamp(20px,2.6vw,40px);align-items:start;padding-top:clamp(84px,11vh,104px)}
.ig .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ig-side{position:sticky;top:84px;display:grid;gap:14px;max-height:calc(100svh - 100px);overflow:auto;overscroll-behavior:contain;padding-bottom:12px;scrollbar-width:thin}
.ig-acc{position:relative}
.ig-acc-b{width:100%;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));color:var(--ink);cursor:pointer;text-align:left}
.ig-acc-b[data-one]{cursor:default}
.ig-acc-b:not([data-one]):hover,.ig-acc-b[aria-expanded=true]{border-color:rgba(255,255,255,.3)}
.ig-acc-b>span:not(.ig-av){display:grid;gap:2px;min-width:0;flex:1}
.ig-acc-b b{font:650 .92rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-acc-b small{font:500 .74rem/1.2 "Inter";color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-acc-b .cv{color:var(--mute);transition:transform .18s}
.ig-acc-b[aria-expanded=true] .cv{transform:rotate(180deg)}
.ig-acc-m{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;padding:6px;border-radius:16px;background:#111114;border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 60px -20px #000;display:grid;gap:2px}
.ig-acc-m[hidden]{display:none}
.ig-acc-m button,.ig-acc-m a{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:11px;border:0;background:none;color:var(--ink);text-decoration:none;cursor:pointer;text-align:left;font:500 .88rem/1.2 "Inter"}
.ig-acc-m button>span:not(.ig-av){display:grid;gap:1px;flex:1;min-width:0}
.ig-acc-m small{color:var(--mute);font-size:.74rem}
.ig-acc-m button:hover,.ig-acc-m a:hover,.ig-acc-m button:focus-visible,.ig-acc-m a:focus-visible{background:rgba(255,255,255,.07);outline:none}
.ig-acc-m button.on{color:var(--acc2)}
.ig-acc-m a{border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 11px 11px;margin-top:2px;color:var(--ink2)}
.ig-av{position:relative;width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:linear-gradient(140deg,color-mix(in srgb,var(--acc) 55%,#1a1a1f),#26262c);border:1px solid rgba(255,255,255,.12)}
.ig-av b{font:700 .82rem/1 "Inter";color:#fff}
.ig-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-av.lg{width:52px;height:52px}
.ig-av.lg b{font-size:1.1rem}
.ig img.gone{display:none}
.ig-nav{display:grid;gap:14px}
.ig-ng p{font:600 .66rem/1 "Inter";letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:0 12px 7px}
.ig-ng a{opacity:1;box-shadow:none;position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;color:var(--ink2);text-decoration:none;font:550 .9rem/1.2 "Inter";transition:background .15s,color .15s}
.ig-ng a:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.ig-ng a.on{background:rgba(255,255,255,.09);color:var(--ink);box-shadow:none}
.ig-ng a.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2.5px;border-radius:2px;background:var(--acc)}
.ig-ng a.on .ic{color:var(--acc2)}
.ig-ng a em{margin-left:auto;font:700 .68rem/1 "Inter";font-style:normal;padding:4px 7px;border-radius:999px;background:var(--acc);color:#fff}
.ig-main{min-width:0;display:grid;gap:20px;align-content:start}
.ig-alerts{display:grid;gap:10px}
.ig-alerts:empty{display:none}
.ig-alert{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.ig-alert>div{display:grid;gap:3px;flex:1;min-width:0}
.ig-alert b{font:600 .92rem/1.35 "Inter"}
.ig-alert span{color:var(--ink2);font-size:.86rem;line-height:1.45}
.ig-alert .ic{width:20px;height:20px;color:var(--acc2)}
.ig-alert.bad{background:rgba(255,107,97,.08);border-color:rgba(255,107,97,.32)}
.ig-alert.bad .ic{color:#ff8f86}
.ig-alert.warn{background:rgba(255,190,90,.07);border-color:rgba(255,190,90,.3)}
.ig-alert.warn .ic{color:#ffc56b}
.ig-alert.ok .ic{color:#7fe3b1}
.ig-h{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.ig-h h1{font:700 clamp(1.8rem,3vw,2.6rem)/1.06 "Inter";letter-spacing:-.04em}
.ig-h .kicker{margin-bottom:.8rem}
.ig-h .pg-sub{max-width:52rem;margin-top:.55rem;font-size:.97rem}
.ig-h-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ig-body{display:grid;gap:18px;min-width:0}
.ig-body.loading{opacity:.6;transition:opacity .2s .15s}
.ig-wait{min-height:40vh;display:grid;place-items:center}
.ig-wait i{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(255,255,255,.16);border-top-color:var(--acc);animation:spin .8s linear infinite}
.ig .btn{height:40px;padding:0 16px;font-size:.88rem;gap:.5rem}
.ig .btn .ic{width:16px;height:16px}
.btn.sm{height:34px!important;padding:0 12px!important;font-size:.82rem!important}
.btn.sm .ic{width:15px;height:15px}
.btn.ghost-bad{color:#ffb3ad;border-color:rgba(255,107,97,.35)}
.btn.ghost-bad:hover:not(:disabled){background:rgba(255,107,97,.14);color:#ffd2ce}
.btn.solid.danger{background:#ff6b61;border-color:#ff6b61;color:#170302;box-shadow:none}
.btn.solid.danger:hover:not(:disabled){background:#ff8279;border-color:#ff8279;color:#170302}
.ig-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.ig-stat{border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:18px 20px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));display:grid;gap:8px;align-content:start}
.ig-stat span{font:600 .72rem/1.3 "Inter";letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ig-stat b{font:700 clamp(1.7rem,2.6vw,2.2rem)/1 "Inter";letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ig-stat em{font-style:normal;font:500 .82rem/1.3 "Inter";color:var(--ink2)}
.ig-stat em.ok{color:#8ae6b8}
.ig-stat em.bad{color:#ff9d95}
.ig-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ig-grid2>.wide{grid-column:1/-1}
.ig-card{border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));padding:clamp(16px,2vw,24px);display:grid;gap:14px;align-content:start;min-width:0}
.ig-card.flush{padding:0;overflow:hidden}
.ig-card.flat{background:rgba(255,255,255,.03)}
.ig-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.ig-card-h:has(>div:empty:only-child){display:none}
.ig-card h2{font:650 1.08rem/1.3 "Inter";letter-spacing:-.015em}
.eyebrow{font:600 .66rem/1 "Inter";letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);margin-bottom:7px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font:500 .78rem/1 "Inter";color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.s-dm{background:var(--acc)}
.s-fail{background:#ff6b61}
.s-ign{background:rgba(255,255,255,.22)}
.ig-chart{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;align-items:end;height:210px;padding-top:6px}
.ig-chart .ig-col{display:grid;grid-template-rows:1fr auto;gap:8px;height:100%;min-width:0}
.ig-chart .ig-stk{display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:2px;height:100%;border-radius:8px;background:rgba(255,255,255,.035);overflow:hidden}
.ig-chart .ig-stk i{display:block;width:100%;min-height:0;border-radius:3px}
.ig-chart .ig-col span{font:500 .66rem/1 "Inter";color:var(--mute);text-align:center;white-space:nowrap;overflow:hidden}
.ig-chart .ig-col:hover .ig-stk{background:rgba(255,255,255,.07)}
.ig-steps{list-style:none;display:grid;gap:4px}
.ig-steps li{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.06);font:500 .9rem/1.35 "Inter"}
.ig-steps li:last-child{border-bottom:0}
.ig-steps .dot{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;flex:none}
.ig-steps li.done .dot{background:var(--acc);border-color:var(--acc);color:#fff}
.ig-steps li.done .dot .ic{width:13px;height:13px;stroke-width:2.6}
.ig-steps li.done>span:nth-child(2){color:var(--mute);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.ig-steps a{margin-left:auto;color:var(--acc2);font:600 .82rem/1 "Inter";text-decoration:none}
.ig-steps a:hover{text-decoration:underline}
.ig-kw{list-style:none;display:grid;gap:10px}
.ig-kw li{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) auto;align-items:center;gap:12px;font:550 .9rem/1.2 "Inter"}
.ig-kw li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-kw li i{height:8px;border-radius:5px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.ig-kw li b{font-variant-numeric:tabular-nums;color:var(--ink2)}
.ig-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ig-facts dt{font:600 .7rem/1.2 "Inter";letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.ig-facts dd{margin-top:6px;font:550 .94rem/1.35 "Inter"}
.ig-feed{list-style:none;display:grid}
.ig-feed li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.ig-feed li:last-child{border-bottom:0}
.ig-feed li>div{display:grid;gap:4px;min-width:0}
.ig-feed b{font:600 .88rem/1.3 "Inter"}
.ig-feed em{font-style:normal;justify-self:start;font:600 .72rem/1 "Inter";padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc2)}
.ig-feed p{color:var(--ink2);font-size:.88rem;line-height:1.45;overflow-wrap:anywhere}
.ig-feed small{color:var(--mute);font-size:.8rem;line-height:1.4}
.ig-feed time{color:var(--mute);font:500 .76rem/1.4 "Inter";white-space:nowrap}
.ig-feed a{color:var(--acc2);font:600 .82rem/1.3 "Inter";text-decoration:none;justify-self:start}
.ig-feed .err{color:#ffaaa3}
.ig-feed .tip{display:flex;gap:7px;align-items:flex-start;color:#ffd38a;font-size:.84rem}
.ig-feed .tip .ic{width:15px;height:15px;margin-top:2px}
.ig-feed.errs .ic.bad{color:#ff8f86;width:20px;height:20px}
.more{color:var(--acc2);font:600 .84rem/1 "Inter";text-decoration:none;justify-self:start}
.ig-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ig-q{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--mute);min-width:min(300px,100%);flex:0 1 340px}
.ig-q:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.ig-q input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font:500 .9rem/1 "Inter";height:100%}
.ig-q .ic{width:16px;height:16px}
.ig-count{margin-left:auto;color:var(--mute);font:500 .82rem/1 "Inter"}
.seg{display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;border-radius:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.seg button{height:32px;padding:0 12px;border-radius:9px;border:0;background:none;color:var(--ink2);font:600 .8rem/1 "Inter";cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:rgba(255,255,255,.15);color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.ig-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.ig-post{position:relative;display:grid;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0d0d10;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.ig-post:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.ig-post:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ig-post .pt{position:absolute;top:10px;left:10px;font:600 .68rem/1 "Inter";padding:5px 8px;border-radius:999px;background:rgba(0,0,0,.66);color:#fff}
.ig-post .pc{display:grid;gap:8px;padding:12px 13px 14px}
.ig-post .pc p{font:500 .84rem/1.4 "Inter";color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.ig-post .pc span{display:inline-flex;align-items:center;gap:6px;font:600 .78rem/1 "Inter";color:var(--mute)}
.ig-post .pc span.on{color:var(--acc2)}
.ig-post .pc .ic{width:14px;height:14px}
.ig-th{position:relative;display:block;overflow:hidden;background:#141418}
.ig-th.r45{aspect-ratio:4/5}
.ig-th.sq{width:44px;height:44px;border-radius:10px;flex:none}
.ig-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-th .ph{position:absolute;inset:0;margin:auto;width:26px!important;height:26px!important;color:rgba(255,255,255,.22)}
.ig-th.big{border-radius:16px}
.bdg{display:inline-flex;align-items:center;font:600 .7rem/1 "Inter";padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ink2);white-space:nowrap}
.bdg.ok{background:rgba(95,224,160,.14);color:#a5f2ca}
.bdg.bad{background:rgba(255,107,97,.15);color:#ffb3ad}
.bdg.warn{background:rgba(255,190,90,.14);color:#ffd08a}
.bdg.acc{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc2)}
.bdg.mute{background:rgba(255,255,255,.07);color:var(--mute)}
.sw{position:relative;width:44px;height:26px;border-radius:999px;border:0;background:rgba(255,255,255,.18);cursor:pointer;flex:none;transition:background .18s;padding:0}
.sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.sw.on{background:var(--acc)}
.sw.on i{transform:translateX(18px)}
.sw:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sw:disabled{opacity:.5}
.sw.busy{opacity:.6}
.ig-form{display:grid;gap:14px}
.fl{display:grid;gap:7px;min-width:0}
.fl[hidden]{display:none}
.fl>span{font:600 .78rem/1.2 "Inter";color:var(--ink2)}
.fl small{color:var(--mute);font:500 .76rem/1.4 "Inter"}
.fl small.bad{color:#ff9d95}
.ig-form input:not([type=checkbox]):not([type=radio]),.ig-form textarea,.ig-sel{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:var(--ink);font:500 .92rem/1.45 "Inter";padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.ig-form input:not([type=checkbox]):not([type=radio]){height:44px}
.ig-form textarea{resize:vertical;min-height:84px}
.ig-form input:not([type=checkbox])[hidden]{display:none}
.ig-form input:focus,.ig-form textarea:focus,.ig-sel:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.ig-form input:disabled,.ig-form textarea:disabled{opacity:.55}
.ig-sel{height:44px;padding:0 12px;appearance:auto;background-color:#141418}
.ig-sel.sm{height:40px;width:auto;max-width:260px;font-size:.86rem}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font:550 .74rem/1 "Inter";padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--ink2)}
.chips.sm span{font-size:.68rem;padding:4px 7px}
.chips.pick button{height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);color:var(--ink);font:550 .8rem/1 "Inter";cursor:pointer}
.chips.pick button:hover{border-color:var(--acc);color:var(--acc2)}
.ig-form .chk{align-items:flex-start}
.ig-form .chk small{display:block;color:var(--mute);margin-top:2px}
.chk.sm{font-size:.82rem}
.rf-adv{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:0 14px}
.rf-adv summary{cursor:pointer;padding:12px 0;font:600 .84rem/1 "Inter";color:var(--ink2)}
.rf-adv[open] summary{color:var(--ink)}
.rf-adv-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:14px}
.ig-rules{display:grid;gap:10px}
.ig-rules.cols{grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr))}
.ig-rule{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:14px 16px;display:grid;gap:10px;background:rgba(255,255,255,.025);transition:opacity .2s}
.ig-rule.off{opacity:.62}
.ig-rule-h{display:flex;align-items:flex-start;gap:12px}
.ig-rule-th{width:46px;height:46px;border-radius:11px;overflow:hidden;flex:none;display:block}
.ig-rule-th .ig-th{width:100%;height:100%}
.ig-rule-th.g{display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc2)}
.ig-rule-k{display:grid;gap:6px;flex:1;min-width:0}
.ig-rule-k b{font:650 1rem/1.25 "Inter";overflow-wrap:anywhere}
.ig-rule-k .tags{display:flex;gap:6px;flex-wrap:wrap}
.ig-rule-k .tags:empty{display:none}
.ig-dm{font:500 .88rem/1.5 "Inter";color:var(--ink2);background:rgba(255,255,255,.035);border-radius:12px;padding:10px 12px;white-space:pre-line;overflow-wrap:anywhere}
.ig-dm .url{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--acc2);font-size:.8rem;word-break:break-all}
.ig-dm .url .ic{width:14px;height:14px}
.ig-rule-m{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 .76rem/1.3 "Inter";color:var(--mute)}
.ig-rule-m .bad{color:#ff9d95}
.ig-rule-a{display:flex;gap:6px;flex-wrap:wrap}
.ig-post-d{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;align-items:start}
.ig-pd-l,.ig-pd-r{display:grid;gap:16px;min-width:0}
.ig-pd-l .cap{font:500 .9rem/1.55 "Inter";color:var(--ink2);white-space:pre-line;max-height:11.5em;overflow:auto;overflow-wrap:anywhere}
.ig-pd-m{display:flex;gap:12px;color:var(--mute);font:500 .8rem/1 "Inter"}
.ig-pd-a{display:flex;flex-wrap:wrap;gap:6px}
.ig-fallback{color:var(--mute);font-size:.84rem;line-height:1.5}
.ig-fallback a{color:var(--acc2)}
.ig-split{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:16px;align-items:start}
.ig-split>.nr{position:sticky;top:84px}
.sim-out{min-height:260px}
.sim-h{display:flex;align-items:center;gap:10px;font:650 1.02rem/1.3 "Inter"}
.sim-h .ic{width:22px;height:22px;color:var(--mute)}
.sim-h.ok .ic{color:#7fe3b1}
.sim-h.bad .ic{color:#ff8f86}
.sim-out p{color:var(--ink2);font-size:.9rem;line-height:1.5}
.sim-dm{border-radius:18px;padding:14px;background:#0c0c0f;border:1px solid rgba(255,255,255,.1);display:grid;gap:10px;max-width:380px}
.sim-dm-h{display:flex;align-items:center;gap:9px;font:600 .86rem/1 "Inter"}
.sim-dm-h .ig-av{width:28px;height:28px}
.sim-dm .bub{justify-self:start;max-width:92%;padding:10px 14px;border-radius:18px 18px 18px 6px;background:#26262c;color:#fff;font:500 .9rem/1.45 "Inter";overflow-wrap:anywhere}
.ig-cmts{list-style:none;display:grid;gap:8px}
.ig-cmt{display:flex;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.ig-cmt.hid{opacity:.7}
.ig-cmt .cb{display:grid;gap:6px;flex:1;min-width:0}
.ig-cmt .ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ig-cmt .ch b{font:600 .88rem/1.2 "Inter"}
.ig-cmt .ch time{margin-left:auto;color:var(--mute);font:500 .76rem/1 "Inter"}
.ig-cmt p{font:500 .92rem/1.5 "Inter";color:var(--ink);overflow-wrap:anywhere}
.ig-cmt .cm{display:flex;gap:12px;flex-wrap:wrap;font:500 .78rem/1.3 "Inter";color:var(--mute)}
.ig-cmt .cm span{display:inline-flex;align-items:center;gap:4px}
.ig-cmt .cm .ic{width:13px;height:13px}
.ig-cmt .cm a{color:var(--mute);text-decoration:underline;text-decoration-color:rgba(255,255,255,.2)}
.ig-cmt .ca{display:flex;gap:4px}
.ig-cmt .ca .link{margin:0 10px 0 0;color:var(--ink2)}
.ig-cmt .ca .link:hover{color:var(--acc2)}
.ig-cmt .ca .link.bad{color:#ff9d95}
.ig-cmt .cr{display:flex;gap:8px;align-items:center}
.ig-cmt .cr[hidden]{display:none}
.ig-cmt .cr input{flex:1;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:var(--ink);padding:0 12px;font:500 .88rem/1 "Inter";min-width:0}
.ig-cmt .cr input:focus{outline:none;border-color:var(--acc)}
.ig-empty-li{list-style:none}
.ib{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,270px);border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;height:min(760px,calc(100svh - 230px));min-height:480px;background:rgba(255,255,255,.02)}
.ib-l{display:grid;grid-template-rows:auto 1fr;border-right:1px solid rgba(255,255,255,.08);min-height:0}
.ib-lh{display:grid;gap:8px;padding:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.ib-lh .ig-q{min-width:0;flex:none;height:38px}
.ib-list{list-style:none;overflow:auto;overscroll-behavior:contain;min-height:0}
.ib-list li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);outline:none}
.ib-list li:hover,.ib-list li:focus-visible{background:rgba(255,255,255,.04)}
.ib-list li.on{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.ib-list li>div{flex:1;min-width:0;display:grid;gap:4px}
.ib-list .r1{display:flex;gap:8px;align-items:baseline}
.ib-list .r1 b{font:600 .86rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ib-list .r1 time{color:var(--mute);font:500 .7rem/1 "Inter";white-space:nowrap}
.ib-list p{color:var(--mute);font:500 .8rem/1.35 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-list li.un p{color:var(--ink);font-weight:600}
.ib-list li em{font-style:normal;font:700 .66rem/1 "Inter";padding:4px 7px;border-radius:999px;background:var(--acc);color:#fff;align-self:center}
.ib-list li.none{cursor:default;color:var(--mute);font-size:.86rem}
.ib-t{display:grid;grid-template-rows:auto 1fr auto auto;min-height:0;min-width:0}
.ib-t>.ig-empty{grid-row:1/-1;align-self:center}
.ib-th{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.ib-th>div{display:grid;gap:2px;flex:1;min-width:0}
.ib-th b{font:650 .92rem/1.2 "Inter"}
.ib-th small{color:var(--mute);font-size:.74rem}
.ib-back{display:none;width:34px;height:34px;border-radius:10px;border:0;background:rgba(255,255,255,.06);color:var(--ink);place-items:center;cursor:pointer}
.ib-win{font:600 .72rem/1.2 "Inter";padding:6px 10px;border-radius:999px;white-space:nowrap}
.ib-win.ok{background:rgba(95,224,160,.12);color:#a5f2ca}
.ib-win.bad{background:rgba(255,190,90,.12);color:#ffd08a}
.ib-msgs{overflow:auto;overscroll-behavior:contain;padding:18px 16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.msg{display:grid;gap:4px;max-width:74%}
.msg.in{align-self:flex-start}
.msg.out{align-self:flex-end;justify-items:end}
.msg .bub{padding:10px 14px;border-radius:18px;font:500 .9rem/1.45 "Inter";overflow-wrap:anywhere;background:#24242a;color:#fff}
.msg.in .bub{border-bottom-left-radius:6px}
.msg.out .bub{background:var(--acc);color:#fff;border-bottom-right-radius:6px}
.msg .bub i{opacity:.75}
.msg time{font:500 .68rem/1 "Inter";color:var(--mute)}
.ib-closed{margin:0 16px 10px;padding:10px 12px;border-radius:12px;background:rgba(255,190,90,.08);border:1px solid rgba(255,190,90,.25);color:#ffd9a0;font:500 .82rem/1.45 "Inter"}
.ib-comp{display:grid;gap:8px;padding:12px 16px 14px;border-top:1px solid rgba(255,255,255,.08)}
.ib-comp textarea{width:100%;resize:none;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:var(--ink);padding:10px 13px;font:500 .92rem/1.45 "Inter";min-height:46px;max-height:160px}
.ib-comp textarea:focus{outline:none;border-color:var(--acc)}
.ib-comp textarea:disabled{opacity:.5}
.ib-ca{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.ib-s{border-left:1px solid rgba(255,255,255,.08);padding:16px;overflow:auto;display:grid;gap:14px;align-content:start;min-height:0}
.ib-s h3{font:650 .9rem/1.2 "Inter"}
.ib-who{display:flex;gap:10px;align-items:center}
.ib-who>span:not(.ig-av){display:grid;gap:4px;min-width:0}
.ib-who b{font:600 .9rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis}
.ib-who a{display:inline-flex;gap:5px;align-items:center;color:var(--acc2);font:600 .76rem/1 "Inter";text-decoration:none}
.ib-who a .ic{width:13px;height:13px}
.ib-meta textarea{min-height:120px}
.ig-qr{display:grid;gap:16px}
.qr-g{display:grid;gap:8px}
.ig-line{width:100%;height:190px;display:block}
.ig-line-x{display:flex;justify-content:space-between;color:var(--mute);font:500 .74rem/1 "Inter";margin-top:4px}
.ig-tbl td{vertical-align:middle}
.ig-tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ig-tbl .num.bad{color:#ff9d95}
.ig-tbl .nowrap{white-space:nowrap}
.ig-tbl .kw{font:600 .76rem/1 "Inter";padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc2)}
.ig-tbl a{color:var(--acc2);text-decoration:none;white-space:nowrap}
.ig-tbl tbody tr[data-acc]{cursor:pointer}
.ig-tbl tbody tr[data-acc]:hover td,.ig-tbl tbody tr[data-acc]:focus-visible td{background:rgba(255,255,255,.035)}
.ig-tbl tbody tr.on td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.ig-tp{display:flex;gap:12px;align-items:center;color:var(--ink)!important;white-space:normal!important}
.ig-tp>span:not(.ig-th){display:grid;gap:3px;font:500 .86rem/1.4 "Inter"}
.ig-tp small{color:var(--mute);font-size:.76rem}
.ig-who{display:flex;gap:10px;align-items:center}
.ig-who>span:not(.ig-av){display:grid;gap:2px}
.ig-who small{color:var(--acc2);font:600 .7rem/1 "Inter"}
.ig-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.1)}
.ig-tabs a{padding:10px 14px;color:var(--ink2);text-decoration:none;font:600 .86rem/1 "Inter";border-bottom:2px solid transparent;margin-bottom:-1px}
.ig-tabs a:hover{color:var(--ink)}
.ig-tabs a.on{color:var(--ink);border-bottom-color:var(--acc)}
.ig-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--mute);font:500 .84rem/1 "Inter"}
.ig-pager>span:last-child{display:flex;gap:6px}
.ig-accs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px}
.ig-card.acc.on{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.ig-acc-r{display:flex;align-items:center;gap:14px}
.ig-acc-r>div{flex:1;min-width:0}
.ig-acc-r h2{overflow:hidden;text-overflow:ellipsis}
.ig-acc-t,.ig-acc-a{display:flex;gap:6px;flex-wrap:wrap}
.ig-hl{list-style:none;display:grid;gap:8px}
.ig-hl li{display:flex;gap:11px;align-items:center;padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.035)}
.ig-hl li span{display:grid;gap:3px}
.ig-hl li b{font:600 .88rem/1.2 "Inter"}
.ig-hl li small{color:var(--mute);font-size:.78rem;overflow-wrap:anywhere}
.ig-hl li.ok .ic{color:#7fe3b1}
.ig-hl li.bad .ic{color:#ff8f86}
.ig-empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:clamp(34px,6vw,64px) 20px;border:1px dashed rgba(255,255,255,.14);border-radius:22px;background:rgba(255,255,255,.015)}
.ig-card .ig-empty{border:0;background:none;padding:22px 10px}
.ig-empty-i{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc2)}
.ig-empty-i .ic{width:24px!important;height:24px!important}
.ig-empty h3{font:650 1.1rem/1.3 "Inter";letter-spacing:-.015em}
.ig-empty p{color:var(--ink2);max-width:34rem;line-height:1.55;font-size:.92rem}
.ig-empty p a{color:var(--acc2)}
.ig-empty .btn{margin-top:6px}
.ig-empty.bad .ig-empty-i{background:rgba(255,107,97,.14);color:#ff8f86}
.ig-note{color:var(--mute);font:500 .84rem/1.55 "Inter";padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.ig-note a{color:var(--acc2)}
.ig-gate{display:grid;place-items:center;min-height:calc(100svh - 120px)}
.ig-gate-c{width:100%;max-width:560px;display:grid;gap:6px;justify-items:start}
.ig-gate-c .ig-empty-i{margin-bottom:18px}
.ig-gate-c h1{font:700 clamp(1.9rem,3.4vw,2.6rem)/1.08 "Inter";letter-spacing:-.04em}
.ig-gate-c .pg-sub{margin-bottom:18px}
.ig-link{width:100%}
.ig-modal.wide{max-width:660px}
.ig-modal .rf-adv-g{grid-template-columns:repeat(3,minmax(0,1fr))}
.ig .err{color:#ffaaa3;font-size:.86rem}
@media(max-width:1180px){.ib{grid-template-columns:minmax(0,280px) minmax(0,1fr)}.ib-s{display:none}.ig-split{grid-template-columns:minmax(0,1fr)}.ig-split>.nr{position:static}}
@media(max-width:980px){
  .ig{grid-template-columns:minmax(0,1fr);gap:16px}
  .ig-side{position:static;max-height:none;overflow:visible;gap:10px}
  .ig-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad)*-1);padding:2px var(--pad) 4px}
  .ig-nav::-webkit-scrollbar{display:none}
  .ig-ng{display:contents}
  .ig-ng p{display:none}
  .ig-ng a{white-space:nowrap;padding:8px 12px;background:rgba(255,255,255,.04)}
  .ig-ng a.on::before{display:none}
  .ig-grid2,.ig-post-d{grid-template-columns:minmax(0,1fr)}
  .ig-chart{height:170px;gap:4px}
  .ig-chart .ig-col span{font-size:.58rem}
}
@media(max-width:720px){
  .ib{grid-template-columns:minmax(0,1fr);height:calc(100svh - 190px)}
  .ib .ib-t{display:none}
  .ib.open .ib-l{display:none}
  .ib.open .ib-t{display:grid}
  .ib-back{display:grid}
  .rf-adv-g,.ig-modal .rf-adv-g{grid-template-columns:minmax(0,1fr)}
  .ig-facts{grid-template-columns:minmax(0,1fr)}
  .ig-feed li{grid-template-columns:auto minmax(0,1fr)}
  .ig-feed time{grid-column:2}
  .ig-count{margin-left:0;width:100%}
  .msg{max-width:88%}
}
@media(prefers-reduced-motion:reduce){.ig-post,.sw i,.sw,.ig-acc-b .cv{transition:none}}
.fl>.seg{justify-self:start}
.ig-card>p.muted{font-size:.9rem;line-height:1.5;margin-top:-4px}
.ib-t>.ig-empty{border:0;background:none}
.sim-out p.eyebrow{font-size:.66rem;color:var(--acc2);margin:4px 0 -4px}
.ig .ig-nav .ig-ng a{display:flex}
@media(max-width:720px){.ib-th{flex-wrap:wrap}.ib-win{order:3;flex-basis:100%;text-align:center;white-space:normal}}

/* =================================================================================================================
   Trends (2026-10-18): #/trends — country charts merged across platforms, searches, ideas. Black and warm cream; this
   page's accent is amber. Only the play buttons animate while a preview plays.
   ================================================================================================================= */
body[data-route=trends]{--acc:#ffb224;--acc2:#ffd27a;--accg:rgba(255,178,36,.4)}
.trd{max-width:1240px;display:grid;gap:22px}
.trd .flag{width:22px;height:16px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.trd .tic{width:18px;height:18px;fill:currentColor;flex:none}
.trd-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.trd-h h1{font:700 clamp(2rem,4vw,3.3rem)/1.04 "Inter";letter-spacing:-.045em;max-width:18ch}
.trd-h .pg-sub{max-width:44rem}
.trd-cc{position:relative}
.trd-ccb{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--ink);font:600 .95rem/1 "Inter";cursor:pointer}
.trd-ccb:hover,.trd-ccb[aria-expanded=true]{border-color:rgba(255,255,255,.4)}
.trd-ccb .cv{width:16px;height:16px;fill:none;color:var(--mute)}
.trd-ccm{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(560px,92vw);padding:8px;border-radius:18px;background:#111114;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px -20px #000;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.trd-ccm[hidden]{display:none}
.trd-ccm button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;border:0;background:none;color:var(--ink2);font:550 .9rem/1.2 "Inter";cursor:pointer;text-align:left}
.trd-ccm button:hover,.trd-ccm button:focus-visible{background:rgba(255,255,255,.07);color:var(--ink);outline:none}
.trd-ccm button.on{color:var(--acc2);background:rgba(255,178,36,.1)}
.trd-src{display:flex;flex-wrap:wrap;gap:8px}
.trd-s{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);font:600 .8rem/1 "Inter";color:var(--ink)}
.trd-s i{width:7px;height:7px;border-radius:50%;background:#5fe0a0;box-shadow:0 0 0 3px rgba(95,224,160,.16)}
.trd-s.off{color:var(--mute)}
.trd-s.off i{background:rgba(255,255,255,.28);box-shadow:none}
.trd-s small{font:500 .74rem/1 "Inter";color:var(--mute)}
.trd-tabs{justify-self:start}
.trd-tabs button{height:36px;padding:0 16px;font-size:.86rem}
.trd-body{display:grid;gap:18px;min-width:0}
.trd-body.loading{opacity:.55;transition:opacity .2s .1s}
.trd-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.trd-hc{position:relative;display:grid;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0b0b0d;min-width:0}
.trd-hc .trd-art.big{aspect-ratio:1/1;width:100%;border-radius:0}
.trd-hc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.55) 62%,#000 100%);pointer-events:none}
.trd-no{position:absolute;left:18px;top:14px;z-index:1;font:800 clamp(2.8rem,5vw,4.2rem)/1 "Inter";letter-spacing:-.06em;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.trd-hi{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:grid;gap:4px;min-width:0}
.trd-hi b{font:700 1.2rem/1.2 "Inter";letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trd-hi>span{color:var(--ink2);font:500 .9rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trd-pls{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}
.trd-pl{font:600 .66rem/1 "Inter";padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--ink2);white-space:nowrap}
.trd-pl.p-apple{background:rgba(250,87,107,.18);color:#ffb2bd}
.trd-pl.p-deezer{background:rgba(162,56,255,.2);color:#d6b2ff}
.trd-pl.p-youtube{background:rgba(255,48,48,.18);color:#ffaaaa}
.trd-mv{display:inline-flex;align-items:center;gap:1px;font:700 .72rem/1 "Inter";min-width:34px}
.trd-mv .tic{width:14px;height:14px}
.trd-mv.up{color:#7fe3b1}
.trd-mv.down{color:#ff9d95}
.trd-mv.new{color:#1a1205;background:var(--acc);padding:3px 6px;border-radius:999px;min-width:0;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase}
.trd-play{position:absolute;right:16px;top:16px;z-index:2;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:#fff;color:#000;cursor:pointer;box-shadow:0 10px 30px -8px rgba(0,0,0,.6);transition:transform .15s}
.trd-play:hover{transform:scale(1.06)}
.trd-play.on{background:var(--acc);color:#1a1205;animation:trd-pulse 1.6s ease-in-out infinite}
@keyframes trd-pulse{50%{box-shadow:0 0 0 8px rgba(255,178,36,.18)}}
.trd-play.sm{position:static;width:36px;height:36px;box-shadow:none;background:rgba(255,255,255,.1);color:var(--ink)}
.trd-play.sm.on{background:var(--acc);color:#1a1205}
.trd-play .tic{width:18px;height:18px}
.trd-play-x{width:36px}
.trd-idea{position:absolute;right:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(0,0,0,.4);color:#fff;font:600 .8rem/1 "Inter";cursor:pointer}
.trd-hc .trd-idea{bottom:auto;top:70px;right:16px}
.trd-idea:hover{border-color:var(--acc);color:var(--acc2)}
.trd-idea .tic{width:15px;height:15px}
.trd-idea.sm{position:static;width:36px;height:36px;padding:0;justify-content:center;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.trd-art{position:relative;display:block;width:48px;height:48px;border-radius:10px;overflow:hidden;background:linear-gradient(140deg,#2a2017,#141418);flex:none}
.trd-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trd-list{list-style:none;display:grid;border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.02)}
.trd-list li{display:grid;grid-template-columns:30px 40px 48px minmax(0,1fr) auto 36px 36px;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.055);contain:layout paint}
.trd-list li:last-child{border-bottom:0}
.trd-list li:hover{background:rgba(255,255,255,.03)}
.trd-n{font:700 .95rem/1 "Inter";color:var(--mute);text-align:right;font-variant-numeric:tabular-nums}
.trd-ti{display:grid;gap:3px;min-width:0}
.trd-ti b{font:600 .94rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trd-ti span{color:var(--mute);font:500 .82rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trd-list .trd-pls{margin:0;justify-content:flex-end}
.trd-more{display:flex;align-items:center;gap:8px;color:var(--mute);font:500 .86rem/1.4 "Inter"}
.trd-more .tic{width:16px;height:16px;fill:none}
.trd-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:12px}
.trd-tc{position:relative;display:flex;gap:14px;padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);min-width:0}
.trd-art.tp{width:72px;height:72px;border-radius:14px}
.trd-tt{display:grid;gap:6px;flex:1;min-width:0;align-content:start;padding-right:70px}
.trd-tt .r1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.trd-tt .trd-n{text-align:left;font-size:.8rem}
.trd-tt b{font:650 1.04rem/1.25 "Inter";overflow-wrap:anywhere}
.trd-tt em{font-style:normal;font:700 .72rem/1 "Inter";padding:4px 8px;border-radius:999px;background:rgba(255,178,36,.14);color:var(--acc2)}
.trd-tt small{color:var(--mute);font:500 .78rem/1.3 "Inter"}
.trd-tt ul{list-style:none;display:grid;gap:5px;margin-top:2px}
.trd-tt li{display:flex;gap:8px;align-items:baseline;min-width:0;font:500 .84rem/1.4 "Inter"}
.trd-tt li a{color:var(--ink2);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.trd-tt li a:hover{color:var(--ink);text-decoration:underline}
.trd-tt li span{color:var(--mute);font-size:.74rem;white-space:nowrap;flex:none}
.trd-tc .trd-idea{top:16px;right:16px;bottom:auto}
.trd-sens{position:absolute;top:16px;right:16px;font:600 .7rem/1.3 "Inter";color:var(--mute);max-width:110px;text-align:right}
.trd-lead{color:var(--ink2);max-width:46rem;line-height:1.55}
.trd-ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:12px}
.trd-ic{display:flex;gap:14px;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.trd-art.ia{width:56px;height:56px;border-radius:14px}
.trd-ic>div{display:grid;gap:8px;align-content:start;min-width:0}
.trd-ic .eb{font:600 .66rem/1 "Inter";letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
.trd-ic .tx{font:500 .93rem/1.55 "Inter";color:var(--ink)}
.trd-ic .btn{justify-self:start;margin-top:4px}
.trd-lock{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:20px;background:linear-gradient(90deg,rgba(255,178,36,.12),rgba(255,178,36,.04));border:1px solid rgba(255,178,36,.3)}
.trd-lock>.tic{width:24px;height:24px;fill:none;color:var(--acc2)}
.trd-lock>div{display:grid;gap:4px;flex:1}
.trd-lock b{font:650 1rem/1.3 "Inter"}
.trd-lock span{color:var(--ink2);font-size:.88rem;line-height:1.5}
.trd-note{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:20px;border:1px dashed rgba(255,255,255,.16)}
.trd-note>div{display:grid;gap:5px;flex:1}
.trd-note b{font:650 .98rem/1.3 "Inter"}
.trd-note p{color:var(--ink2);font-size:.88rem;line-height:1.55}
.trd-note .btn .tic{width:16px;height:16px;fill:none}
.trd-fine{color:var(--mute);font:500 .82rem/1.5 "Inter"}
.trd-empty{display:grid;gap:12px;justify-items:start;padding:28px;border-radius:20px;border:1px dashed rgba(255,255,255,.14);color:var(--ink2)}
@media(max-width:980px){.trd-hero{grid-template-columns:repeat(2,minmax(0,1fr))}.trd-hero .trd-hc:nth-child(3){display:none}}
@media(max-width:720px){
  .trd-hero{grid-template-columns:minmax(0,1fr)}
  .trd-hero .trd-hc:nth-child(3){display:grid}
  .trd-hc .trd-art.big{aspect-ratio:16/11}
  .trd-list li{grid-template-columns:24px 32px 44px minmax(0,1fr) 36px;gap:10px;padding:10px 12px}
  .trd-list .trd-pls,.trd-list .trd-idea{display:none}
  .trd-art{width:44px;height:44px}
  .trd-ccm{grid-template-columns:minmax(0,1fr);left:0;right:auto;width:min(320px,92vw);max-height:60vh;overflow:auto}
  .trd-note,.trd-lock{flex-direction:column;align-items:flex-start}
  .trd-tt{padding-right:0}
  .trd-tc{flex-wrap:wrap}
  .trd-tc .trd-idea{position:static}
}
@media(prefers-reduced-motion:reduce){.trd-play.on{animation:none}.trd-play{transition:none}}
.trd-hc .trd-art.big{height:auto;width:100%;aspect-ratio:1/1;border-radius:0}

/* =================================================================================================================
   The panel (2026-10-18): signed in, every tool sits under one side menu. Wide screens: a fixed menu on the left (a
   narrow icon rail on the Studio, where the editor needs the width); phones and tablets: the top bar gets a menu
   button and the menu slides in. The marketing pages keep the top bar.
   ================================================================================================================= */
.side,.side-scrim,.menubtn{display:none}
body.app{--sw:256px}
body.app .side{display:flex;flex-direction:column;position:fixed;z-index:55;left:0;top:0;bottom:0;width:var(--sw);padding:16px 12px 12px;gap:10px;background:#08080a;border-right:1px solid rgba(255,255,255,.07);color:var(--ink)}
body.app #top .langpick,body.app #top #acct,body.app #top #navl{display:none}
.sd-top{display:flex;align-items:center;padding:6px 8px 4px;min-height:40px}
.sd-logo{font-size:1.1rem;color:var(--ink)}
.sd-new{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;background:linear-gradient(180deg,#fbf7ee,#e9e3d7);color:#0b0a0d;text-decoration:none;font:650 .9rem/1 "Inter";box-shadow:0 10px 26px -16px rgba(251,247,238,.55);transition:background .15s}
.sd-new:hover{background:#fffdf7}
.sd-new.on{box-shadow:0 0 0 2px rgba(251,247,238,.35),0 10px 26px -16px rgba(251,247,238,.55)}
.sic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sd-nav{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:4px 4px 10px;margin:0 -4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.sd-g{font:600 .63rem/1 "Inter";letter-spacing:.15em;text-transform:uppercase;color:var(--mute);padding:16px 12px 7px}
.sd-i{position:relative;display:flex;align-items:center;gap:11px;min-height:38px;padding:0 12px;border-radius:10px;color:var(--ink2);text-decoration:none;font:550 .9rem/1 "Inter";transition:background .15s,color .15s}
.sd-i:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.sd-i.on{background:rgba(255,255,255,.085);color:var(--ink)}
.sd-i.on::before{content:"";position:absolute;left:-4px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--sdc,#fbf7ee)}
.sd-i[data-k=ig]{--sdc:#ff4f8b}
.sd-i[data-k=trends]{--sdc:#ffb224}
.sd-i[data-k=videos],.sd-i[data-k=profiles]{--sdc:#b48cff}
.sd-i:focus-visible,.sd-s:focus-visible,.sd-new:focus-visible,.sd-plan:focus-visible,.sd-acc:focus-visible{outline:2px solid var(--acc2);outline-offset:1px}
.sd-b{margin-left:auto;font:700 .66rem/1 "Inter";font-style:normal;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.12);color:var(--ink);font-variant-numeric:tabular-nums}
.sd-i[data-k=ig] .sd-b,.sd-s .sd-b{background:#ff4f8b;color:#fff}
.sd-sub{display:flex;flex-direction:column;gap:1px;margin:4px 0 8px 20px;padding-left:10px;border-left:1px solid rgba(255,255,255,.08)}
.sd-s{display:flex;align-items:center;min-height:31px;padding:0 10px;border-radius:8px;color:var(--mute);text-decoration:none;font:500 .84rem/1.15 "Inter";transition:background .15s,color .15s}
.sd-s:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.sd-s.on{color:var(--ink);background:rgba(255,79,139,.13)}
.sd-ig{margin:0 0 6px}
.sd-ig:empty{display:none}
.sd-ig .ig-acc-b{padding:8px 10px;border-radius:12px}
.sd-ig .ig-av,.ig-mtop .ig-av{width:28px;height:28px}
.sd-ig .ic,.ig-mtop .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sd-ig img.gone,.ig-mtop img.gone{display:none}
.sd-ig .ig-acc-m{z-index:6}
.sd-bot{display:grid;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.sd-plan{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);text-decoration:none;color:var(--ink);transition:border-color .15s}
.sd-plan:hover,.sd-plan.on{border-color:rgba(255,255,255,.18)}
.sd-plan .sd-l{display:grid;gap:5px;flex:1;min-width:0}
.sd-plan b{font:650 .84rem/1.1 "Inter"}
.sd-plan small{font:500 .73rem/1.2 "Inter";color:var(--mute)}
.sd-m{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.sd-m i{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.sd-me{position:relative}
.sd-acc{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;border:0;background:none;color:var(--ink);cursor:pointer;text-align:left}
.sd-acc:hover,.sd-acc[aria-expanded=true]{background:rgba(255,255,255,.05)}
.sd-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 .72rem/1 "Inter";font-style:normal;background:linear-gradient(140deg,color-mix(in srgb,var(--acc) 62%,#222),#2a2a30);flex:none;color:#fff}
.sd-acc .sd-l{display:grid;gap:3px;min-width:0;flex:1}
.sd-acc b{font:600 .84rem/1.15 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-acc small{font:500 .72rem/1.15 "Inter";color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-acc>.sic{width:16px;height:16px;color:var(--mute);transform:rotate(180deg)}
.sd-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);padding:6px;border-radius:14px;background:#141417;border:1px solid rgba(255,255,255,.12);box-shadow:0 -24px 60px -24px #000;display:grid;gap:2px;z-index:6}
.sd-menu[hidden]{display:none}
.sd-menu a,.sd-menu .sd-out{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;border-radius:9px;color:var(--ink2);text-decoration:none;font:550 .86rem/1 "Inter";border:0;background:none;cursor:pointer;width:100%;text-align:left}
.sd-menu a:hover,.sd-menu .sd-out:hover,.sd-menu a:focus-visible,.sd-menu .sd-out:focus-visible{background:rgba(255,255,255,.07);color:var(--ink);outline:none}
.sd-menu .sd-out{color:#ffb3ad}
.sd-menu .sic{width:16px;height:16px}
.sd-langs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px 2px;margin:4px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.sd-langs button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:32px;border-radius:8px;border:1px solid transparent;background:none;color:var(--ink2);font:600 .74rem/1 "Inter";cursor:pointer}
.sd-langs button[aria-pressed=true]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--ink)}
.sd-langs .flag{width:18px;height:13px}
@media(min-width:1101px){
  body.app #top{display:none}
  body.app #view{margin-left:var(--sw)}
  body.app .page:not(.wizard){padding-top:clamp(30px,4.5vh,48px)}
  body.app[data-route=new] .space-reset{left:calc(var(--sw) + 24px)}
  body.app.rail{--sw:72px}
  body.app.rail .side{padding:14px 12px 12px;align-items:center}
  body.app.rail .sd-l,body.app.rail .sd-g,body.app.rail .sd-b,body.app.rail .sd-acc>.sic,body.app.rail .sd-sub{display:none}
  body.app.rail .sd-top{padding:6px 0;justify-content:center}
  body.app.rail .sd-new{width:46px;height:46px;padding:0;justify-content:center}
  body.app.rail .sd-nav{margin:0;padding:4px 0 10px;align-items:center;width:100%}
  body.app.rail .sd-nav::before{content:"";height:6px}
  body.app.rail .sd-i{width:46px;padding:0;justify-content:center}
  body.app.rail .sd-i.on::before{left:-12px}
  body.app.rail .sd-plan{width:46px;height:46px;padding:0;justify-content:center;background:none;border-color:transparent}
  body.app.rail .sd-acc{width:46px;padding:7px;justify-content:center}
  body.app.rail .sd-menu{left:calc(100% + 12px);right:auto;bottom:0;width:230px}
}
@media(min-width:1101px) and (max-width:1399px){body.app[data-route=new] .wizard{padding-top:28px}}
@media(min-width:1400px){body.app[data-route=new] .editor-toolbar{left:calc(var(--sw) + (100vw - var(--sw)) / 2)}}
@media(max-width:1100px){
  body.app .side{width:min(300px,86vw);transform:translateX(-104%);transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s .26s;visibility:hidden;box-shadow:30px 0 80px -30px #000}
  body.app.side-open .side{transform:none;visibility:visible;transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  body.app .side-scrim{display:block;position:fixed;inset:0;z-index:54;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .2s}
  body.app.side-open .side-scrim{opacity:1;pointer-events:auto}
  body.app #top{justify-content:flex-start;gap:6px}
  body.app #top nav{margin-left:auto}
  body.app .menubtn{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--ink);cursor:pointer;margin-right:6px;flex:none}
  body.app .menubtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
}
@media(prefers-reduced-motion:reduce){body.app .side,body.app .side-scrim{transition:none}}

/* Panel: everything at a glance */
.pnl{display:grid;gap:22px;max-width:1320px}
.pnl-h{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.pnl-h h1{font:700 clamp(2rem,3.4vw,2.9rem)/1.05 "Inter";letter-spacing:-.045em}
.pnl-h .kicker{text-transform:none;letter-spacing:.02em;font-size:.82rem}
.pnl-h .pg-sub{margin-top:.5rem}
.pnl-acts{display:flex;gap:8px;flex-wrap:wrap}
.pnl-acts .btn{height:42px;padding:0 16px;gap:8px}
.pnl-acts .sic{width:17px;height:17px}
.pnl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pnl-st{display:grid;gap:8px;align-content:start;padding:18px 20px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));text-decoration:none;color:var(--ink);transition:border-color .2s}
.pnl-st:hover{border-color:rgba(255,255,255,.24)}
.pnl-st span{font:600 .7rem/1.2 "Inter";letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.pnl-st b{font:700 clamp(1.6rem,2.4vw,2.1rem)/1 "Inter";letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pnl-st em{font-style:normal;font:500 .8rem/1.2 "Inter";color:var(--ink2);min-height:1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-st.c-ig span{color:#ff9cbf}
.pnl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px;align-items:start}
.pnl-card{border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));padding:clamp(16px,2vw,22px);display:grid;gap:14px;align-content:start;min-width:0}
.pnl-v{grid-column:1/-1}
.pnl-ch{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pnl-ch h2{font:650 1.06rem/1.25 "Inter";letter-spacing:-.015em}
.pnl-ch a{color:var(--mute);text-decoration:none;font:600 .82rem/1 "Inter";white-space:nowrap}
.pnl-ch a:hover{color:var(--ink)}
.pnl-vl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pnl-vc{display:grid;gap:6px;text-decoration:none;color:var(--ink);min-width:0}
.pnl-vc .ph{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#1a1a1f,#0e0e11);border:1px solid rgba(255,255,255,.08);transition:border-color .2s}
.pnl-vc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pnl-vc .st{position:absolute;left:8px;bottom:8px;font:600 .66rem/1 "Inter";font-style:normal;padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.66);color:#fff}
.pnl-vc b{font:600 .84rem/1.25 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-vc small{color:var(--mute);font:500 .74rem/1 "Inter"}
.pnl-vc:hover .ph{border-color:rgba(255,255,255,.3)}
.pnl-empty{display:grid;gap:12px;justify-items:start;color:var(--ink2);grid-column:1/-1;line-height:1.5}
.pnl-cap{font:600 .66rem/1 "Inter";letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.pnl-ia{display:flex;align-items:center;gap:12px}
.pnl-ia>div{display:grid;gap:3px;min-width:0}
.pnl-ia b{font:650 .98rem/1.2 "Inter"}
.pnl-ia small{color:var(--mute);font:500 .8rem/1.2 "Inter"}
.pnl-av{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:none;background:linear-gradient(140deg,#ff4f8b,#7a2a52);font:700 .9rem/1 "Inter"}
.pnl-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pnl-bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;align-items:end;height:74px}
.pnl-bars i{display:block;height:100%;border-radius:4px;background:linear-gradient(180deg,#ff4f8b,#a8325f);transform-origin:bottom;min-height:3px}
.pnl-kw{display:flex;flex-wrap:wrap;gap:6px}
.pnl-kw span{font:550 .76rem/1 "Inter";padding:6px 9px;border-radius:999px;background:rgba(255,79,139,.12);color:#ffc2d6}
.pnl-kw b{color:#fff;margin-left:3px}
.pnl-tb{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px}
.pnl-tc{display:grid;gap:10px;align-content:start;min-width:0}
.pnl-songs{list-style:none;display:grid;gap:8px}
.pnl-songs li{display:grid;grid-template-columns:18px 40px minmax(0,1fr) auto;align-items:center;gap:10px}
.pnl-songs .n{font:700 .82rem/1 "Inter";color:var(--mute);text-align:right;font-variant-numeric:tabular-nums}
.pnl-songs .art{position:relative;width:40px;height:40px;border-radius:9px;overflow:hidden;background:linear-gradient(140deg,#2a2017,#141418)}
.pnl-songs .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pnl-songs .tt{display:grid;gap:3px;min-width:0}
.pnl-songs b{font:600 .86rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-songs small{color:var(--mute);font:500 .75rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-songs .pl{font:700 .66rem/1 "Inter";color:#1a1205;background:#ffb224;border-radius:999px;padding:3px 6px}
.pnl-songs .pl:empty{display:none}
.pnl-topics{list-style:none;display:grid;gap:8px}
.pnl-topics li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.pnl-topics b{font:600 .86rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-topics small{grid-row:2;color:var(--mute);font:500 .74rem/1.2 "Inter"}
.pnl-make{grid-row:1/3;grid-column:2;border:1px solid rgba(255,178,36,.4);background:rgba(255,178,36,.1);color:#ffd27a;border-radius:999px;height:30px;padding:0 11px;font:600 .76rem/1 "Inter";cursor:pointer;white-space:nowrap}
.pnl-make:hover{background:rgba(255,178,36,.2)}
@media(max-width:1250px){.pnl-vl{grid-template-columns:repeat(5,minmax(0,1fr))}.pnl-vl .pnl-vc:nth-child(n+6){display:none}}
@media(max-width:1000px){.pnl-grid{grid-template-columns:minmax(0,1fr)}.pnl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.pnl-vl{grid-template-columns:repeat(4,minmax(0,1fr))}.pnl-vl .pnl-vc:nth-child(n+5){display:none}}
@media(max-width:560px){.pnl-vl{grid-template-columns:repeat(3,minmax(0,1fr))}.pnl-vl .pnl-vc:nth-child(n+4){display:none}.pnl-tb{grid-template-columns:minmax(0,1fr)}.pnl-acts{width:100%}.pnl-acts .btn{flex:1}}

/* the Instagram pages inside the panel: their menu is the side menu; on a phone a row of their pages on top */
.ig{display:block}
.ig .ig-side{display:none}
.ig-mtop{display:grid;gap:10px;margin-bottom:18px}
.ig-mtop .ig-acc{max-width:420px}
.ig-mnav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad)*-1);padding:2px var(--pad) 4px}
.ig-mnav::-webkit-scrollbar{display:none}
.ig-mnav a{flex:none;display:flex;align-items:center;height:36px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--ink2);text-decoration:none;font:550 .84rem/1 "Inter";white-space:nowrap}
.ig-mnav a.on{background:rgba(255,79,139,.16);border-color:rgba(255,79,139,.4);color:#fff}

/* the home page's "one panel" section: three tools as three cards, one account below; drawn here, no pictures but
   one poster; each card wakes once when it scrolls into view */
.pm{max-width:1280px}
.pm-head{display:grid;gap:.6rem;max-width:52rem}
.pm-sub{color:var(--ink2);font-size:1.06rem;line-height:1.6;max-width:44rem}
.pm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,5vh,52px)}
.pm-card{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:28px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));overflow:hidden;opacity:0;translate:0 26px;transition:opacity .7s,translate .7s cubic-bezier(.2,.8,.2,1),border-color .3s}
.pm-card.in{opacity:1;translate:0 0}
.pm-card:nth-child(2){transition-delay:.08s}
.pm-card:nth-child(3){transition-delay:.16s}
.pm-card:hover{border-color:color-mix(in srgb,var(--pc) 45%,transparent)}
.pm-s{--pc:#b48cff}
.pm-i{--pc:#ff4f8b}
.pm-t{--pc:#ffb224}
.pm-a{--pc:#fbf7ee}
.pm-art{position:relative;height:250px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--pc) 22%,transparent),transparent 70%);border-bottom:1px solid rgba(255,255,255,.07)}
.pm-copy{display:grid;gap:10px;align-content:start;padding:22px 24px 24px}
.pm-k{display:flex;align-items:center;gap:8px;font:650 .74rem/1 "Inter";letter-spacing:.12em;text-transform:uppercase;color:var(--pc)}
.pm-k .sic{width:17px;height:17px}
.pm-copy h3{font:700 clamp(1.25rem,1.7vw,1.5rem)/1.2 "Inter";letter-spacing:-.03em}
.pm-copy>p:not(.pm-k){color:var(--ink2);line-height:1.55;font-size:.95rem}
.pm-list{list-style:none;display:grid;gap:7px;margin-top:4px}
.pm-list li{display:flex;gap:9px;align-items:flex-start;font:500 .9rem/1.45 "Inter";color:var(--ink)}
.pm-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc);flex:none;margin-top:.55em}
.pm-go{justify-self:start;margin-top:8px;color:var(--ink);font:650 .92rem/1 "Inter";text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--pc) 70%,transparent);padding-bottom:4px}
.pm-go:hover{color:var(--pc)}
/* studio: the phone with a real finished frame, its captions lighting word by word, the steps around it */
.pm-phone{position:absolute;left:50%;top:22px;width:132px;aspect-ratio:9/16;translate:-74% 0;rotate:-4deg;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 60px -20px #000;background:#111}
.pm-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pm-capw{position:absolute;left:8px;right:8px;bottom:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:3px;font:800 .62rem/1.15 "Inter";text-transform:uppercase}
.pm-capw i{font-style:normal;color:#fff;padding:2px 4px;border-radius:4px;background:rgba(0,0,0,.55)}
.pm-card.in .pm-capw i{animation:pm-cw 3s ease-in-out infinite}
.pm-card.in .pm-capw i:nth-child(2){animation-delay:1s}
.pm-card.in .pm-capw i:nth-child(3){animation-delay:2s}
@keyframes pm-cw{0%,30%{background:#b48cff;color:#120a22}38%,100%{background:rgba(0,0,0,.55);color:#fff}}
.pm-float{position:absolute;left:50%;top:28px;list-style:none;display:grid;gap:7px;translate:6% 0}
.pm-float li{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 6px;border-radius:999px;background:rgba(18,18,22,.86);border:1px solid rgba(255,255,255,.12);font:600 .74rem/1 "Inter";white-space:nowrap;opacity:0;translate:14px 0;transition:opacity .5s,translate .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.3s + var(--i)*.12s)}
.pm-float b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#b48cff;color:#120a22;font:700 .66rem/1 "Inter"}
.pm-card.in .pm-float li{opacity:1;translate:0 0}
/* instagram: a comment, the arrow, the DM that goes out by itself, a spam comment hidden */
.pm-cm,.pm-dm,.pm-sp{position:absolute;opacity:0;transition:opacity .5s,translate .5s cubic-bezier(.2,.8,.2,1)}
.pm-cm{left:22px;top:26px;display:flex;gap:10px;align-items:center;max-width:72%;translate:0 10px}
.pm-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 .74rem/1 "Inter";font-style:normal;background:linear-gradient(140deg,#5b8cff,#2b3c7a);flex:none}
.pm-cm p{display:grid;gap:2px;padding:9px 13px;border-radius:16px 16px 16px 5px;background:rgba(255,255,255,.09);font:500 .84rem/1.3 "Inter"}
.pm-cm b{font:650 .72rem/1 "Inter";color:var(--mute)}
.pm-arc{position:absolute;left:44px;top:74px;width:120px;height:40px;fill:none;stroke:#ff4f8b;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset .7s .45s}
.pm-dm{right:20px;top:104px;max-width:70%;display:grid;gap:6px;justify-items:end;translate:0 12px;transition-delay:.85s}
.pm-dm p{padding:10px 14px;border-radius:16px 16px 5px 16px;background:#ff4f8b;color:#fff;font:550 .84rem/1.35 "Inter"}
.pm-dm small{display:flex;align-items:center;gap:5px;font:600 .7rem/1 "Inter";color:#ffb3cd}
.pm-dm small .sic{width:13px;height:13px;stroke-width:2.4}
.pm-sp{left:22px;bottom:20px;display:flex;align-items:center;gap:8px;translate:0 10px;transition-delay:1.25s}
.pm-sp s{font:500 .78rem/1 "Inter";color:var(--mute)}
.pm-sp em{font-style:normal;font:650 .7rem/1 "Inter";padding:5px 8px;border-radius:999px;background:rgba(255,190,90,.14);color:#ffd08a}
.pm-card.in .pm-cm,.pm-card.in .pm-dm,.pm-card.in .pm-sp{opacity:1;translate:0 0}
.pm-card.in .pm-arc{stroke-dashoffset:0}
.pm-cm{transition-delay:.2s}
/* trends: today's chart of a country, songs that several platforms agree on, one idea */
.pm-trh{position:absolute;left:22px;right:22px;top:22px;display:flex;align-items:center;gap:9px}
.pm-trh .fl .flag{width:22px;height:16px}
.pm-trh b{font:650 .9rem/1 "Inter"}
.pm-trh em{margin-left:auto;font-style:normal;font:600 .7rem/1 "Inter";letter-spacing:.1em;text-transform:uppercase;color:var(--pc)}
.pm-rows{position:absolute;left:22px;right:22px;top:54px;list-style:none;display:grid;gap:6px}
.pm-rows li{display:grid;grid-template-columns:14px 28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.045);opacity:0;translate:-12px 0;transition:opacity .5s,translate .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.25s + var(--i)*.14s)}
.pm-card.in .pm-rows li{opacity:1;translate:0 0}
.pm-rows .n{font:700 .8rem/1 "Inter";color:var(--mute)}
.pm-rows .art{width:28px;height:28px;border-radius:7px;background:linear-gradient(140deg,#ffb224,#7a3d10)}
.pm-rows .art.a1{background:linear-gradient(140deg,#ff4f8b,#4a1730)}
.pm-rows .art.a2{background:linear-gradient(140deg,#5fe0a0,#123f2c)}
.pm-rows .tx{display:grid;gap:5px}
.pm-rows .tx i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.28);width:82%}
.pm-rows .tx i+i{width:52%;background:rgba(255,255,255,.14)}
.pm-rows .ch{display:grid;justify-items:end;gap:3px}
.pm-rows small{font:600 .6rem/1 "Inter";color:var(--ink2);white-space:nowrap}
.pm-rows em{font-style:normal;font:700 .62rem/1 "Inter";padding:3px 6px;border-radius:999px}
.pm-rows em.up{color:#7fe3b1;padding:0}
.pm-rows em.nw{background:#ffb224;color:#1a1205;text-transform:uppercase;letter-spacing:.04em}
.pm-idea{position:absolute;left:22px;bottom:14px;font:650 .76rem/1 "Inter";color:#ffd27a;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,178,36,.4);background:rgba(255,178,36,.1);opacity:0;transition:opacity .5s .85s}
.pm-card.in .pm-idea{opacity:1}
/* one account: what the membership opens */
.pm-a{grid-column:1/-1;grid-template-rows:none;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center;gap:22px;padding:6px 26px 6px 2px;background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.pm-a .pm-copy{padding:22px}
.pm-chips{display:flex;flex-wrap:wrap;gap:8px}
.pm-chips span{font:600 .8rem/1 "Inter";padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.pm-acts{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:1100px){.pm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pm-t{grid-column:1/-1}.pm-a{grid-template-columns:minmax(0,1fr);padding:4px 22px 22px 2px}.pm-a .pm-copy{padding-bottom:4px}.pm-a .pm-chips,.pm-a .pm-acts{padding-left:22px}}
@media(max-width:720px){.pm-grid{grid-template-columns:minmax(0,1fr)}.pm-t{grid-column:auto}.pm-art{height:230px}}
@media(prefers-reduced-motion:reduce){.pm-card,.pm-card *{transition:none!important;animation:none!important}.pm-card,.pm-float li,.pm-cm,.pm-dm,.pm-sp,.pm-rows li,.pm-idea{opacity:1;translate:0 0}.pm-arc{stroke-dashoffset:0}}
/* the side menu is a <nav>: the top bar's rules for nav links do not apply to it */
body.app .side .sd-nav{align-items:stretch;gap:2px}
body.app .side .sd-nav a{opacity:1;box-shadow:none;white-space:nowrap}
body.app .side .sd-nav .sd-i,body.app .side .sd-nav .sd-s{display:flex}
.pnl-i .pnl-cap{margin-top:4px}

/* phone fixes for the Studio: the first step's drop card is sized against the screen, not against its own content
   (an auto grid track let it grow to 700 px), and the open step, which has no pill behind it on a phone, gets a light
   name and a dark number on the stage colour */
body[data-route=new] .studio[data-cur="v"] #s1{grid-template-columns:minmax(0,1fr)}
body[data-route=new] .studio[data-cur="v"] #s1>*{max-width:100%;min-width:0}
@media(max-width:760px){body[data-route=new] .wizard .wsteps li.on button{color:#f4efe6}body[data-route=new] .wizard .wsteps li.on b{background:var(--acc);border-color:var(--acc);color:var(--acc-ink,#14171c)}}
@media(max-width:560px){body.app .mark span{display:inline}}
@media(min-width:761px){body[data-route=new] .wizard[data-cur="v"] .wsteps li.on b{color:#14171c}}
.adm-t td:first-child{min-width:190px}
@media(max-width:720px){.pm-t .pm-art{height:254px}}

/* ---------------- Trend radar v2 (2026-10-18): niche, song potential, calendar; and a steady side menu ---------------- */
html:has(body.app){scrollbar-gutter:stable}
.trd-pick{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.trd-dd{position:relative}
.trd-ddb{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--ink);font:600 .95rem/1 "Inter";cursor:pointer;white-space:nowrap}
.trd-ddb:hover,.trd-ddb[aria-expanded=true]{border-color:rgba(255,255,255,.4)}
.trd-ddb .cv{width:16px;height:16px;color:var(--mute)}
.trd-ddb .sec,.trd-ddb .tic{width:18px;height:18px;color:var(--acc2)}
.trd-ddb .cv{color:var(--mute)}
.trd-ddm{position:absolute;left:0;right:auto;top:calc(100% + 8px);z-index:30;width:min(560px,calc(100vw - var(--sw,0px) - 48px));max-height:min(62vh,520px);overflow:auto;overscroll-behavior:contain;padding:8px;border-radius:18px;background:#111114;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px -20px #000;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.trd-ddm[hidden]{display:none}
.trd-ddm button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;border:0;background:none;color:var(--ink2);font:550 .9rem/1.2 "Inter";cursor:pointer;text-align:left}
.trd-ddm button:hover,.trd-ddm button:focus-visible{background:rgba(255,255,255,.07);color:var(--ink);outline:none}
.trd-ddm button.on{color:var(--acc2);background:rgba(255,178,36,.1)}
.trd-ddm .sec{width:18px;height:18px;color:var(--acc2)}
.trd-tabs button{min-width:84px}
.trd-body{min-height:420px}
.trd-wait{min-height:360px}
.trd-body.loading{opacity:.55;pointer-events:none}
/* potential: a small ring with the score and the stage */
.pot{display:inline-flex;align-items:center;gap:8px;font:650 .74rem/1 "Inter";color:var(--ink2);white-space:nowrap;--pc:#ffd27a}
.pot>i{--p:50;position:relative;width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;background:conic-gradient(var(--pc) calc(var(--p)*1%),rgba(255,255,255,.12) 0)}
.pot>i::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#0d0d10}
.pot>i b{position:relative;font:750 .7rem/1 "Inter";color:var(--ink);font-variant-numeric:tabular-nums}
.pot.st-early{--pc:#5fe0a0}.pot.st-rising{--pc:#9fe36a}.pot.st-peak{--pc:#ffb224}.pot.st-steady{--pc:#9aa4b2}.pot.st-cooling{--pc:#ff8a80}
.pot.st-early>span{color:#8ff0bd}.pot.st-peak>span{color:#ffd27a}.pot.st-cooling>span{color:#ffb1aa}
.pot.lg>i{width:58px;height:58px}.pot.lg>i::before{inset:5px}.pot.lg>i b{font-size:1.15rem}.pot.lg>span{display:none}
.pot.hc{position:absolute;left:18px;top:84px;z-index:2;padding:5px 10px 5px 5px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff}
.trd-hc{cursor:pointer;transition:border-color .15s}
.trd-hc:hover{border-color:rgba(255,255,255,.28)}
.trd-hc.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.trd-hc:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.trd-det{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.trd-list .trd-det{grid-column:1/-1;margin:4px 0 6px 12px;background:rgba(255,255,255,.035)}
.pd-l{display:flex;gap:16px;align-items:center;min-width:0;flex:1 1 380px}
.pd-l>div{display:grid;gap:5px;min-width:0}
.pd-l b{font:700 1.02rem/1.2 "Inter"}
.pd-l p{color:var(--ink2);font-size:.9rem;line-height:1.5}
.pd-l small{color:var(--mute);font:500 .8rem/1.4 "Inter"}
.fit{justify-self:start;font-style:normal;font:650 .7rem/1 "Inter";padding:5px 9px;border-radius:999px;background:rgba(95,224,160,.14);color:#8ff0bd}
.pd-a{display:flex;gap:8px;flex-wrap:wrap}
.trd .btn .tic{width:16px;height:16px}
.trd-list li{grid-template-columns:minmax(0,1fr) 36px;gap:8px;padding:6px 12px 6px 4px}
.trd-row{display:grid;grid-template-columns:30px 40px 48px minmax(0,1fr) auto 128px;align-items:center;gap:12px;padding:4px 0 4px 12px;border:0;background:none;color:inherit;text-align:left;cursor:pointer;min-width:0;border-radius:12px;font:inherit}
.trd-row:focus-visible{outline:2px solid var(--acc2)}
.trd-row .trd-pls{margin:0;justify-content:flex-end}
.trd-list li.open{background:rgba(255,255,255,.03)}
/* my niche */
.nch{display:grid;gap:16px}
.nch.loading{opacity:.6}
.nch-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nch-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,178,36,.12);border:1px solid rgba(255,178,36,.3);color:var(--acc2);font:650 .84rem/1 "Inter"}
.nch-badge .tic{width:16px;height:16px}
.nch-top small{color:var(--mute);font:500 .8rem/1 "Inter"}
.nch-card{display:grid;gap:12px;align-content:start;padding:20px;border-radius:22px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);min-width:0}
.nch-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nch-hd>div{display:flex;align-items:center;gap:10px;min-width:0}
.nch-hd .tic{width:19px;height:19px;color:var(--acc2)}
.nch-hd h3{font:700 1.05rem/1.2 "Inter";letter-spacing:-.01em}
.nch-p{color:var(--mute);font:500 .86rem/1.5 "Inter";margin-top:-6px}
.nch-rise{background:linear-gradient(135deg,rgba(255,178,36,.09),rgba(255,255,255,.02) 60%)}
.nch-chips{display:flex;flex-wrap:wrap;gap:8px}
.nch-chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--ink);font:600 .86rem/1 "Inter";cursor:pointer;transition:border-color .15s,background .15s}
.nch-chip:hover{border-color:var(--acc);background:rgba(255,178,36,.1)}
.nch-chip>.tic{width:14px;height:14px;color:var(--acc2);opacity:.75}
.nch-chip em{font-style:normal;display:inline-flex;align-items:center;font:750 .62rem/1 "Inter";letter-spacing:.04em;text-transform:uppercase;padding:3px 6px;border-radius:999px}
.nch-chip em.nw{background:var(--acc);color:#1a1205}
.nch-chip em.up{color:#7fe3b1;padding:0}.nch-chip em.up .tic{width:13px;height:13px}
.nch-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.nch-cols.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.nch-cols.two:not(:has(*)){display:none}
.nch-side{display:grid;gap:16px;min-width:0}
.nch-terms ol{list-style:none;display:grid;gap:2px;max-height:560px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;margin-right:-6px;padding-right:6px}
.nch-terms li{display:grid;grid-template-columns:26px minmax(0,1fr) auto 36px;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.nch-terms li:last-child{border-bottom:0}
.nt{display:grid;gap:5px;min-width:0}
.nt b{font:600 .92rem/1.25 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt small{color:var(--mute);font:500 .72rem/1 "Inter"}
.nt .bar{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.nt .bar>i{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.nch-hooks{list-style:none;display:grid;gap:6px}
.nch-hooks li{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 10px 9px 14px;border-radius:12px;background:rgba(255,255,255,.035)}
.nch-hooks li span{font:550 .88rem/1.4 "Inter";color:var(--ink)}
.nch-hooks li div{display:flex;gap:4px;flex:none}
.trd .tib{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--ink2);cursor:pointer;flex:none}
.trd .tib:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.trd .tib.done,.trd .btn.done{border-color:#5fe0a0;color:#8ff0bd}
.trd .tib .tic{width:16px;height:16px}
.nch-tags{display:flex;flex-wrap:wrap;gap:6px}
.nch-tags span{font:600 .8rem/1 "Inter";padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--ink2)}
.nch-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:10px}
.nch-v{display:flex;gap:12px;padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.08);text-decoration:none;color:var(--ink);min-width:0;transition:border-color .15s}
.nch-v:hover{border-color:rgba(255,255,255,.26)}
.trd-art.vt{width:128px;height:72px;border-radius:10px}
.nch-v>div{display:grid;gap:4px;min-width:0;align-content:start}
.nch-v b{font:600 .88rem/1.3 "Inter";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nch-v small{color:var(--mute);font:500 .74rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nch-v p{display:flex;flex-wrap:wrap;gap:6px;font:600 .7rem/1 "Inter";color:var(--mute)}
.nch-v p em{font-style:normal;color:#1a1205;background:var(--acc);padding:3px 6px;border-radius:999px}
.nch-v p .sh{color:#ffaaaa}
.nch-nokey{display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;padding:16px;border-radius:16px;border:1px dashed rgba(255,255,255,.16)}
.nch-nokey>div:first-child{display:grid;gap:5px;flex:1 1 380px}
.nch-nokey b{font:650 .95rem/1.3 "Inter"}
.nch-nokey p{color:var(--ink2);font-size:.86rem;line-height:1.55}
.nch-nk-a{display:flex;gap:8px;flex-wrap:wrap}
.nch-songs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:8px}
.nch-song{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.03);min-width:0}
.nch-song .tt{display:grid;gap:3px;min-width:0;flex:1}
.nch-song .tt b{font:600 .88rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nch-song .tt small{color:var(--mute);font:500 .74rem/1.2 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nch-song .pot>span{display:none}
.nch-news{list-style:none;display:grid;gap:10px}
.nch-news li{display:grid;gap:3px}
.nch-news a,.nch-news .lnk{color:var(--ink);text-decoration:none;font:550 .9rem/1.4 "Inter";text-align:left;background:none;border:0;padding:0;cursor:pointer}
.nch-news a:hover,.nch-news .lnk:hover{text-decoration:underline}
.nch-news small{color:var(--mute);font:500 .74rem/1.2 "Inter"}
.nch-pick{display:grid;gap:18px;padding:24px;border-radius:24px;border:1px solid rgba(255,178,36,.25);background:linear-gradient(135deg,rgba(255,178,36,.08),rgba(255,255,255,.015) 55%)}
.nch-pick h2{font:700 clamp(1.4rem,2.4vw,1.9rem)/1.15 "Inter";letter-spacing:-.03em}
.nch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.nch-sc{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--ink);font:600 .9rem/1.2 "Inter";cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.nch-sc:hover,.nch-sc:focus-visible{border-color:var(--acc);background:rgba(255,178,36,.1);outline:none}
.nch-sc .tic{width:20px;height:20px;color:var(--acc2)}
/* the coming days */
.cal{display:grid;gap:16px}
.cal-h{font:700 1.4rem/1.2 "Inter";letter-spacing:-.02em}
.cal-list{list-style:none;display:grid;gap:8px}
.cal-list li{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.cal-list li.soon{border-color:rgba(255,178,36,.35);background:linear-gradient(90deg,rgba(255,178,36,.08),rgba(255,255,255,.02))}
.cal-d{display:grid;justify-items:center;gap:3px;padding:8px 0;border-radius:12px;background:rgba(255,255,255,.06)}
.cal-d b{font:750 1.4rem/1 "Inter"}
.cal-d small{font:600 .68rem/1 "Inter";text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.cal-t{display:grid;gap:4px;min-width:0}
.cal-t b{font:650 1rem/1.25 "Inter"}
.cal-t small{color:var(--mute);font:500 .8rem/1.3 "Inter"}
.cal-t small em{font-style:normal;color:var(--acc2);font-weight:650}
.cal-t p{color:var(--ink2);font-size:.86rem;line-height:1.45}
.trd-art.ia.ph{display:grid;place-items:center;color:var(--acc2)}
.trd-art.ia.ph .tic{width:24px;height:24px}
@media(max-width:1100px){.nch-cols,.nch-cols.two{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){
  .trd-list li{grid-template-columns:minmax(0,1fr) 36px;padding:6px 10px 6px 0}
  .trd-row{grid-template-columns:24px 32px 44px minmax(0,1fr);gap:10px}
  .trd-row .trd-pls,.trd-row .pot{display:none}
  .trd-ddm{grid-template-columns:minmax(0,1fr);width:min(320px,92vw)}
  .trd-pick .trd-dd:first-child .trd-ddm{left:0;right:auto}
  .cal-list li{grid-template-columns:52px minmax(0,1fr)}
  .cal-list li .btn{grid-column:1/-1;justify-self:start}
  .pot.hc{top:76px}
  .trd-art.vt{width:104px;height:58px}
  .nch-terms li{grid-template-columns:22px minmax(0,1fr) 36px}
  .nch-terms li .trd-mv{display:none}
}
/* the side menu keeps its width and its place: no jump to the top, no narrowing when Instagram opens */
.sd-nav{scrollbar-gutter:stable}
.sd-sub{margin:4px 0 8px;padding:0;border-left:0;gap:1px}
.sd-ig{margin:2px 0 6px}
.sd-sg{font:600 .6rem/1 "Inter";letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34);padding:12px 12px 5px}
.sd-s{gap:10px;padding:0 10px 0 12px;min-height:33px}
.sd-s .sic{width:16px;height:16px;flex:none;opacity:.75}
.sd-s.on .sic{opacity:1;color:#ff8fb3}
@media(max-width:720px){.trd-tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}.trd-tabs::-webkit-scrollbar{display:none}.trd-tabs button{min-width:auto;flex:none}.trd-pick{width:100%}.trd-pick .trd-dd{flex:1 1 auto}.trd-pick .trd-ddb{width:100%;justify-content:flex-start}.trd-pick .trd-ddb .cv{margin-left:auto}}
.pnl-nudge{display:inline-block;margin-top:10px;color:var(--acc2,#ffd27a);font:600 .82rem/1.3 "Inter";text-decoration:none}.pnl-nudge:hover{text-decoration:underline}

/* ================= Studio — editor: media bin, cut bench, timeline (CapCut-like) ================= */
.cut-step .ed-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start;margin-top:10px}
.ed-bin{position:relative;border-radius:14px;padding:10px;background:color-mix(in srgb,var(--ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--ink) 11%,transparent);display:grid;gap:8px;align-content:start;min-height:200px}
.ed-bin.over{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.bin-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bin-h b{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.bin-imp{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:650;padding:5px 9px;border-radius:999px;background:var(--ink);color:#0b0b0b}
.bin-imp:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bin-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:330px;overflow:auto}
.bin-it{position:relative;display:grid;gap:4px;cursor:grab;border-radius:10px}
.bin-it.drag{opacity:.4}
.bin-th{aspect-ratio:9/16;border-radius:9px;background:#1b1b1b center/cover no-repeat;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);position:relative;overflow:hidden}
.bin-th em{position:absolute;right:4px;bottom:4px;font-style:normal;font-size:10px;font-variant-numeric:tabular-nums;padding:1px 5px;border-radius:5px;background:rgba(0,0,0,.65);color:#fff}
.bin-it:hover .bin-th{border-color:var(--acc)}
.bin-it>span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.bin-add{all:unset;cursor:pointer;position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:700;background:var(--acc);color:var(--acc-ink,#0b0b0b);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.bin-tip{margin:0;font-size:11px;line-height:1.35;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.bin-menu{left:0;right:auto;top:40px}
.ed-sel{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:8px;color:color-mix(in srgb,var(--ink) 75%,transparent);min-height:24px;flex-wrap:wrap}
.ed-sel b{color:var(--ink)}
.ed-dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.tl-fit{display:inline-flex;gap:4px}
.tl-fit button{all:unset;cursor:pointer;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);color:color-mix(in srgb,var(--ink) 75%,transparent)}
.tl-fit button.on{background:var(--ink);color:#000;border-color:var(--ink)}
.cut-step .tl{margin-top:16px;padding:10px 12px 12px;border-radius:14px;background:#0b0b0b;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);display:grid;gap:8px}
.cut-step .tl:empty{display:none}
.tl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:9px;color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.tl-btn:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.tl-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tl-btn[disabled]{opacity:.35;pointer-events:none}
.tl-play{background:var(--acc);color:var(--acc-ink,#0b0b0b)}
.tl-play:hover{background:var(--acc);filter:brightness(1.08)}
.tl-time{margin-left:auto;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink)}
.tl-tot{font-size:12.5px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.tl-tot.over{color:#ff7a7a;font-weight:650}
.tl-area{position:relative;cursor:pointer;padding-right:96px}
.tl-ruler{position:relative;height:18px;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);margin-bottom:6px}
.tl-ruler i{position:absolute;bottom:0;width:1px;height:6px;background:color-mix(in srgb,var(--ink) 35%,transparent)}
.tl-ruler b{position:absolute;bottom:7px;left:3px;font-size:10px;font-weight:500;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--ink) 50%,transparent);white-space:nowrap}
.tl-track{position:relative;display:flex;height:66px;gap:2px}
.tl-clip{position:relative;height:100%;min-width:38px;border-radius:8px;overflow:hidden;cursor:grab;border:2px solid transparent;background:#1c1c1c;flex:0 0 auto;box-sizing:border-box}
.tl-clip.on{border-color:var(--acc)}
.tl-clip.drag{opacity:.4}
.tl-clip.ins::before,.tl-end.ins::before{content:"";position:absolute;left:-3px;top:-4px;bottom:-4px;width:3px;border-radius:2px;background:var(--acc);z-index:3}
.tl-film{position:absolute;inset:0;background-size:auto 100%;background-repeat:repeat-x;opacity:.85}
.tl-lab{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:6px;padding:14px 6px 4px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:10.5px;color:#fff}
.tl-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tl-len{font-variant-numeric:tabular-nums;flex:0 0 auto;opacity:.85}
.tl-end{position:absolute;top:0;bottom:0;right:-96px;width:90px;border-radius:8px;border:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);display:grid;place-items:center;text-align:center;font-size:11px;color:color-mix(in srgb,var(--ink) 50%,transparent)}
.tl-end.ins{border-color:var(--acc);color:var(--acc)}
.tl-head-line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;z-index:4;left:0}
.tl-head-line::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:#fff}
.tl-warn{margin:0;font-size:12px;color:#ff7a7a}
.drop-multi{display:block;margin-top:6px;font-size:13px;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.vlist button{position:relative}
.vadd{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:700;background:rgba(0,0,0,.6);color:#fff;border:1.5px solid rgba(255,255,255,.75);z-index:2}
.vadd.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink,#0b0b0b)}
.vmulti{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;font-size:12.5px;color:color-mix(in srgb,var(--ink) 65%,transparent);min-height:34px}
.vmulti.on{color:var(--ink);font-weight:600}
@media (max-width:900px){.cut-step .ed-grid{grid-template-columns:1fr}.bin-list{grid-template-columns:repeat(4,1fr)}.tl-area{overflow-x:auto}}
/* caption designs whose typeface lacks a letter of the video's language */
.cp.nofont{opacity:.32;filter:grayscale(1);cursor:not-allowed;position:relative}
.cp.nofont::after{content:"Aa?";position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;padding:2px 5px;border-radius:5px;background:#ff5c5c;color:#fff}
/* the note box that writes itself from the video */
.sugbox{margin:10px 0 8px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--acc) 10%,transparent);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);display:grid;gap:10px;font-size:13px}
.sugbox[hidden]{display:none}
.sug-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sug-head b{color:var(--ink)}
.sug-head span{color:color-mix(in srgb,var(--ink) 65%,transparent);flex:1;min-width:0}
.sug-ask b,.sug-fix b{display:block;font-size:12px;letter-spacing:.02em;margin-bottom:4px;color:var(--ink)}
.sug-ask ul{margin:0;padding-left:18px;color:color-mix(in srgb,var(--ink) 80%,transparent);display:grid;gap:3px}
.sug-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sug-chips .chip.on{background:var(--acc);color:var(--acc-ink,#fff);border-color:var(--acc)}
.sug-busy{margin:0;display:flex;align-items:center;gap:8px;color:color-mix(in srgb,var(--ink) 75%,transparent)}
.sug-busy i{width:12px;height:12px;border-radius:50%;border:2px solid var(--acc);border-top-color:transparent;animation:sugspin .8s linear infinite}
@keyframes sugspin{to{transform:rotate(360deg)}}
/* several videos chosen with "+": the way on stays in view */
.prebar{position:fixed;left:calc(50% + 36px);bottom:28px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 20px;border-radius:999px;
  background:#f4efe6;color:#0b0b0b;box-shadow:0 18px 50px rgba(0,0,0,.6);font:600 14px/1.2 Inter,system-ui,sans-serif;animation:prebar .35s cubic-bezier(.16,1,.3,1)}
.prebar button{all:unset;cursor:pointer;padding:10px 18px;border-radius:999px;background:#0b0b0b;color:#f4efe6;font-weight:650}
.prebar button:focus-visible{outline:2px solid #0b0b0b;outline-offset:2px}
@keyframes prebar{from{opacity:0;transform:translate(-50%,16px)}}
.vmulti.on{font-weight:600;color:var(--ink)}
.sug-ask li{display:grid;gap:5px;margin-bottom:6px}
.sug-ans{width:100%;box-sizing:border-box;padding:8px 11px;border-radius:9px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);background:rgba(0,0,0,.25);color:var(--ink);font:500 13px/1.3 Inter,system-ui,sans-serif}
.sug-ans:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 30%,transparent)}
/* plan: the chosen scene's real part, and the parts it could be instead */
.sb-guide{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.sb-guide li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:color-mix(in srgb,var(--ink) 78%,transparent);padding:6px 11px 6px 6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.sb-guide b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--acc);color:var(--acc-ink,#0b0b0b)}
.sb-pv{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start;padding:12px;margin:10px 0;border-radius:14px;background:color-mix(in srgb,var(--acc) 9%,transparent);border:1px solid color-mix(in srgb,var(--acc) 32%,transparent)}
.sb-pv[hidden]{display:none}
.sb-pvh{grid-column:1/-1;display:flex;gap:10px;align-items:baseline;font-size:13px}
.sb-pvh span{color:color-mix(in srgb,var(--ink) 65%,transparent)}
.sb-pvv{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#111}
.sb-pvv video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.sb-pvv.ok video{opacity:1}
.sb-pvw{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;font-size:11.5px;padding:8px;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.sb-pvw i{width:16px;height:16px;border-radius:50%;border:2px solid var(--acc);border-top-color:transparent;animation:sugspin .8s linear infinite}
.sb-pvv.ok .sb-pvw{display:none}
.sb-pva small{display:block;font-size:12px;margin-bottom:6px;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.sb-pva>div{display:flex;flex-wrap:wrap;gap:6px}
.sb-pva .chip.on{background:var(--acc);color:var(--acc-ink,#0b0b0b);border-color:var(--acc)}
/* plan: every scene's real preview side by side */
.sb-strip{margin:10px 0 4px}
.sb-strip[hidden]{display:none}
.sb-strip-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sb-strip-h small{font-size:12px;color:color-mix(in srgb,var(--ink) 62%,transparent)}
.sb-strip-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(92px,1fr);gap:8px;overflow-x:auto;padding-bottom:4px}
.sb-st{all:unset;cursor:pointer;display:grid;gap:4px;min-width:0}
.sb-stv{position:relative;aspect-ratio:9/16;border-radius:9px;overflow:hidden;background:#111;border:2px solid transparent}
.sb-stv video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.sb-stv.ok video{opacity:1}
.sb-stv i{position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;border:2px solid var(--acc);border-top-color:transparent;animation:sugspin .8s linear infinite}
.sb-stv.ok i{display:none}
.sb-st.on .sb-stv{border-color:var(--acc)}
.sb-st b{font-size:11px;color:var(--ink)}
.sb-st small{font-size:10.5px;line-height:1.25;color:color-mix(in srgb,var(--ink) 62%,transparent);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-st:focus-visible .sb-stv{outline:2px solid var(--acc);outline-offset:2px}

/* ---------------- Trend radar: best posting times (2026-10-19) ---------------- */
.tim{display:grid;gap:16px}
.tim-now{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px}
.tim-now>div{display:grid;gap:6px;align-content:start;padding:20px;border-radius:22px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025)}
.tim-now .eb{font:600 .72rem/1 "Inter";letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tim-now b{font:750 clamp(2rem,3.4vw,2.8rem)/1.05 "Inter";letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tim-now small{color:var(--ink2);font:500 .86rem/1.4 "Inter"}
.tim-next{position:relative;background:linear-gradient(135deg,rgba(255,178,36,.13),rgba(255,255,255,.02) 65%)!important;border-color:rgba(255,178,36,.32)!important}
.tim-next b{color:var(--acc2)}
.tim-next .btn{justify-self:start;margin-top:6px}
.tim-src{color:var(--mute);font:500 .78rem/1.2 "Inter"}
.tim-slots{list-style:none;display:grid;gap:6px}
.tim-slots li{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(80px,180px) 34px;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.03)}
.tim-slots li:first-child{background:rgba(255,178,36,.09)}
.tim-rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font:750 .85rem/1 "Inter"}
.tim-slots li:first-child .tim-rank{background:var(--acc);color:#1a1205}
.tim-slots li>div{display:grid;gap:3px;min-width:0}
.tim-slots b{font:650 .95rem/1.25 "Inter"}
.tim-slots small{color:var(--mute);font:500 .78rem/1.3 "Inter"}
.tim-bar{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.tim-bar>i{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.tim-seg button{height:32px;padding:0 12px;font-size:.8rem}
.tim-heat{display:grid;gap:3px;overflow-x:auto;padding-bottom:4px}
.th-row{display:grid;grid-template-columns:46px repeat(24,minmax(12px,1fr));gap:3px;align-items:center;min-width:420px}
.th-row span{font:600 .74rem/1 "Inter";color:var(--mute);text-transform:capitalize}
.th-row>i{display:block;height:22px;border-radius:5px;background:color-mix(in srgb,var(--acc) calc(var(--k)*100%),rgba(255,255,255,.05));opacity:calc(.35 + var(--k)*.65)}
.th-h>i{height:auto;background:none;opacity:1;font:600 .62rem/1 "Inter";font-style:normal;color:var(--mute);text-align:left}
.tim-legend{display:flex;align-items:center;gap:10px;color:var(--mute);font:500 .74rem/1 "Inter"}
.tim-legend i{width:140px;height:8px;border-radius:5px;background:linear-gradient(90deg,rgba(255,255,255,.08),var(--acc))}
.tim-conf{justify-self:start;font:650 .78rem/1 "Inter";padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--ink2)}
.tim-conf.c-low{color:#ffd27a;background:rgba(255,178,36,.12)}
.tim-conf.c-high{color:#8ff0bd;background:rgba(95,224,160,.12)}
.tim-posts{list-style:none;display:grid;gap:6px}
.tim-posts li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03)}
.tim-posts b{font:650 .84rem/1 "Inter";white-space:nowrap;text-transform:capitalize}
.tim-posts span{color:var(--ink2);font:500 .82rem/1.3 "Inter";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tim-posts em{font-style:normal;color:var(--acc2);font:650 .74rem/1 "Inter";white-space:nowrap}
@media(max-width:720px){
  .tim-now{grid-template-columns:minmax(0,1fr)}
  .tim-slots li{grid-template-columns:30px minmax(0,1fr) 34px}
  .tim-slots .tim-bar{display:none}
  .nch-hd{flex-wrap:wrap}
}

/* ---------------- Studio: hook studio (2026-10-19) ---------------- */
.hint-hook[data-v=weak]:not(.on) .hh-ico{color:#ffb39a}
.hint-hook[data-v=strong]:not(.on) .hh-ico{color:#8ff0bd}
.hk-box{width:min(820px,100%)}
.hk-top{display:flex;gap:16px;align-items:center}
.hk-ring{--p:50;--c:#ffd27a;position:relative;width:62px;height:62px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.1) 0)}
.hk-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#111114}
.hk-ring b{position:relative;font:750 1.15rem/1 "Inter";font-variant-numeric:tabular-nums}
.hk-ring.v-strong{--c:#5fe0a0}.hk-ring.v-weak{--c:#ff8a74}
.hk-row .hk-ring{width:42px;height:42px}.hk-row .hk-ring::before{inset:4px}.hk-row .hk-ring b{font-size:.82rem}
.hk-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.hk-tag{font-style:normal;font:600 .72rem/1 "Inter";padding:5px 9px;border-radius:999px}
.hk-tag.good{background:rgba(95,224,160,.13);color:#8ff0bd}
.hk-tag.bad{background:rgba(255,138,116,.13);color:#ffb3a3}
.hk-list{gap:8px}
.hk-tips{list-style:none;display:grid;gap:6px;padding:12px 14px;border-radius:14px;background:rgba(255,178,36,.07);border:1px solid rgba(255,178,36,.2)}
.hk-tips li{font:500 .86rem/1.45 "Inter";color:var(--ink2);padding-left:16px;position:relative}
.hk-tips li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:50%;background:#ffb224}
.hk-sec{font:650 .76rem/1 "Inter";letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:12px 0 2px}
.hk-row{grid-template-columns:36px minmax(0,1fr) auto;cursor:pointer}
.hk-row:has(input:checked){border-color:color-mix(in srgb,var(--acc) 60%,transparent);background:color-mix(in srgb,var(--acc) 9%,transparent)}
.hk-row .clp-main b{font-weight:600}
.hk-rec{font-style:normal;color:var(--acc);font-weight:650}
.hk-sw{display:flex;align-items:center;gap:10px;font:550 .9rem/1.3 "Inter";cursor:pointer}
.hk-sw input{width:17px;height:17px;accent-color:var(--acc)}
.hk-in{width:100%;height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--ink);font:600 1rem/1 "Inter"}
.hk-in:focus{outline:none;border-color:var(--acc)}
.hk-in:disabled{opacity:.45}
.hk-sug{display:flex;flex-wrap:wrap;gap:6px}
.hk-sug .chip{max-width:100%;white-space:normal;text-align:left}
.hk-note{font-size:.8rem}

/* ---------------- Studio: comment -> DM package (2026-10-19) ---------------- */
.dmrow{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.03)}
.dmrow.on{border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.dmrow.need{border-color:#ff8a74;box-shadow:0 0 0 3px rgba(255,138,116,.18)}
.dm-body{display:grid;gap:10px;margin-top:12px}
.dm-f{display:grid;gap:5px}
.dm-f>span{font:600 .74rem/1 "Inter";letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.dm-f input,.dm-f textarea{width:100%;padding:10px 12px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--ink);font:500 .92rem/1.4 "Inter";resize:vertical}
.dm-f input:focus,.dm-f textarea:focus{outline:none;border-color:var(--acc)}
#dmkey{font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.dm-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:600px){.dm-two{grid-template-columns:1fr}}
.dm-chips{display:flex;flex-wrap:wrap;gap:6px}
.dm-note{font-size:.8rem;margin:0}
.dmcard{margin-top:14px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);max-width:62ch}
.dmcard .dm-q{font:500 .9rem/1.45 "Inter";margin:.5rem 0}
.dmcard .dm-ok{color:#8ff0bd;font:650 .9rem/1.3 "Inter";margin:.4rem 0}

/* ---------------- Video page: drop-off risk strip (2026-10-19) ---------------- */
.pace{margin-top:14px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);max-width:62ch}
.pace-top{display:flex;gap:12px;align-items:center}
.pace-top .hk-ring{width:44px;height:44px}.pace-top .hk-ring::before{inset:4px}.pace-top .hk-ring b{font-size:.85rem}
.pace-top p{margin:.15rem 0 0;font-size:.86rem}
.pace-strip{position:relative;height:12px;margin:12px 0 10px;border-radius:999px;background:rgba(95,224,160,.22);overflow:hidden}
.pace-strip i{position:absolute;top:0;bottom:0}
.pace-strip i.soft{background:rgba(255,210,122,.35)}.pace-strip i.warm{background:rgba(255,178,36,.75)}.pace-strip i.hot{background:#ff8a74}
.pace-list{list-style:none;display:grid;gap:6px;margin:0 0 10px;padding:0}
.pace-list li{display:flex;gap:10px;align-items:baseline;font:500 .88rem/1.4 "Inter"}
.pace-at{flex:none;font:650 .8rem/1 "Inter";font-variant-numeric:tabular-nums;padding:5px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--ink);cursor:pointer}
.pace-at:hover{border-color:var(--acc)}

/* ===== Studio — edit style step (2026-10-19) ===== */
body[data-route=new][data-stage="t"],body[data-route=new] .wizard[data-cur="t"]{--acc:#7cc6ff;--acc-ink:#04121f;--accg:color-mix(in srgb,var(--acc) 55%,transparent);--acc2:color-mix(in srgb,var(--acc) 52%,#fff);--wax:var(--acc)}
.stage-bg i[data-s="t"]{background:radial-gradient(70% 60% at 80% -10%,#0f3c62 0%,rgba(10,46,80,.5) 42%,transparent 74%),radial-gradient(50% 50% at 0% 100%,rgba(124,198,255,.14),transparent 70%),#04090f}
.wizard[data-cur="t"] .pvtabs,.wizard[data-cur="t"] #pvnext,.wizard[data-cur="t"] .drag-note,.wizard[data-cur="t"] .preview-note{display:none!important}
.tarz-step .tz-h{font-size:clamp(26px,2.3vw,34px);margin:.2rem 0 .3rem}
.tz-gen{margin:.9rem 0 .2rem}
.tz-guess{font-size:.82rem;color:var(--muted,#a9a59c);margin:.2rem 0 0}
.tz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin-top:1rem}
.tz{display:flex;flex-direction:column;gap:.35rem;text-align:left;padding:10px 10px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.tz:hover{border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.tz.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);box-shadow:0 0 0 1px var(--acc) inset}
.tz-media{position:relative;display:block;aspect-ratio:5/6;border-radius:12px;overflow:hidden;background:#0b0f14}
.tz-media video,.tz-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.tz-ph{filter:saturate(.8) brightness(.7)}
.tz-free{display:grid;place-items:center;color:var(--acc);background:radial-gradient(60% 60% at 50% 40%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),#0b0f14}
.tz-en{position:absolute;left:8px;bottom:8px;font-style:normal;font-size:.68rem;letter-spacing:.06em;padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.tz b{font-size:.98rem;margin-top:.25rem}
.tz small{font-size:.78rem;line-height:1.35;color:var(--muted,#a9a59c)}
.tz-rec{display:inline-block;font-style:normal;font-size:.62rem;letter-spacing:.06em;margin-top:2px;padding:2px 7px;border-radius:99px;background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc2,#fff)}
.ac-card.rec,.lk.rec{position:relative}
.ac-card.rec::after,.lk.rec::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:#7cc6ff;box-shadow:0 0 0 3px rgba(124,198,255,.25)}
.tarz-step p.editor-description{max-width:none!important;width:auto!important}
.tz-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* Public site — "coming soon" for video making (STUDIO_PUBLIC=1) */
.sd-soon{margin-left:auto;font:700 .6rem/1 "Inter";font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:999px;color:#1a1206;background:linear-gradient(110deg,#f4efe6 0%,#ffd9a0 35%,#f4efe6 55%,#c9b8ff 100%);background-size:220% 100%;animation:soonShine 4.5s ease-in-out infinite;white-space:nowrap}
.btn .sd-soon{margin-left:8px}
body.rail .sd-new .sd-soon{display:none}
@keyframes soonShine{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.pnl-stats.pub{grid-template-columns:repeat(2,minmax(0,1fr))}
.pnl-soon{position:relative;overflow:hidden;color:inherit;text-decoration:none;grid-template-columns:auto 1fr;align-items:center;gap:18px;transition:border-color .25s}
.pnl-soon:hover{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.pnl-soon h2{margin:2px 0 6px}
.soon-art{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:26px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--acc) 45%,#000) 0%,#07060c 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 50px -20px color-mix(in srgb,var(--acc) 70%,transparent)}
.soon-strip{position:absolute;inset:auto -40% 50% -40%;height:46px;transform:translateY(50%) rotate(-14deg);display:flex;gap:6px;animation:soonRoll 6s linear infinite}
.soon-strip i{flex:0 0 34px;border-radius:7px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
@keyframes soonRoll{to{transform:translateY(50%) rotate(-14deg) translateX(-80px)}}
.soon-art b{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f4efe6;box-shadow:0 0 0 6px rgba(244,239,230,.12),0 0 30px rgba(244,239,230,.35);animation:soonPulse 2.8s ease-in-out infinite}
.soon-art b svg{width:22px;height:22px;fill:#111}
@keyframes soonPulse{0%,100%{box-shadow:0 0 0 6px rgba(244,239,230,.12),0 0 24px rgba(244,239,230,.25)}50%{box-shadow:0 0 0 12px rgba(244,239,230,.05),0 0 44px rgba(244,239,230,.45)}}
.soon-pg{min-height:calc(100svh - 60px);display:grid;place-items:center;padding:40px 16px}
.soon-box{max-width:560px;text-align:center;display:grid;justify-items:center;gap:12px;padding:clamp(28px,5vw,48px);border-radius:30px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:0 40px 120px -50px color-mix(in srgb,var(--acc) 60%,transparent)}
.soon-box .soon-art{width:150px;height:150px;border-radius:34px;margin-bottom:8px}
.soon-box h1{margin:0;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.08}
.soon-box .kicker{margin:0}
.soon-list{list-style:none;margin:8px 0 6px;padding:0;display:grid;gap:8px;text-align:left}
.soon-list li{display:flex;gap:10px;align-items:center;color:var(--ink-2,rgba(244,239,230,.78))}
.soon-list .sic{width:18px;height:18px;flex:none;stroke:var(--acc)}
.soon-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
@media (max-width:600px){.pnl-soon{grid-template-columns:1fr}.pnl-soon .soon-art{width:84px;height:84px}}
@media (prefers-reduced-motion:reduce){.sd-soon,.soon-strip,.soon-art b{animation:none}}

/* sign-up code step and the Turnstile box */
.fld-code input{font:800 1.7rem/1 "Inter";letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums}
.af-hint{margin:2px 0 0;font-size:.85rem;color:rgba(244,239,230,.55);text-align:center}
.af .af-row .af-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.af .af-row .af-link:disabled{opacity:.5;cursor:default;text-decoration:none}
.af-msg.ok{border-color:rgba(47,224,160,.4);color:#9ff0cf}
.ts-box{display:flex;justify-content:center;min-height:65px}

/* ============ public panel v2: frosted "?" button, mystery page, waiting page, date chip, accounts, settings, water logo ============ */
.sd-new.sd-q,.q-btn{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));color:var(--ink);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 30px -18px color-mix(in srgb,var(--acc) 80%,transparent);font-weight:650;letter-spacing:.01em}
.sd-new.sd-q::after,.q-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);animation:qShine 5.5s ease-in-out infinite;pointer-events:none}
.sd-new.sd-q:hover,.q-btn:hover{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08))}
@keyframes qShine{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
.qm{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;font:800 .82rem/1 "Unbounded","Inter";color:#0b0a0d;background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--acc) 35%,#f4efe6));box-shadow:0 0 14px color-mix(in srgb,var(--acc) 60%,transparent);animation:qBob 3.2s ease-in-out infinite}
@keyframes qBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-2px) rotate(8deg)}}
.q-btn{display:inline-flex;align-items:center;gap:10px}
body.rail .sd-new.sd-q{justify-content:center;padding:0}
.pnl-date{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;padding:7px 14px 7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font:600 .8rem/1 "Inter";letter-spacing:.02em;color:var(--ink2)}
.pnl-date i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent);animation:dPulse 2.6s ease-out infinite}
@keyframes dPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.pnl-tag{display:inline-block;margin:0 0 6px;padding:5px 10px;border-radius:999px;font:700 .66rem/1 "Inter";letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--acc) 70%,#fff);background:color-mix(in srgb,var(--acc) 16%,transparent)}
.soon-art b{font:800 1.6rem/1 "Unbounded","Inter";color:#111;background:#f4efe6}
.soon-art b svg{display:none}
/* the mystery page */
.myst{min-height:calc(100svh - 40px);display:grid;place-items:center;align-content:center;gap:10px;text-align:center;padding:40px 16px;overflow:hidden}
.myst-stage{position:relative;width:min(620px,92vw);height:380px;margin-bottom:10px}
@media (max-width:700px){.myst-stage{transform:scale(.62);margin:-60px 0 -50px}}
.myst-q{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 clamp(7rem,18vw,11rem)/1 "Unbounded","Inter";color:transparent;background:linear-gradient(160deg,#fff 10%,color-mix(in srgb,var(--acc) 70%,#fff) 60%,var(--acc));-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 20px 60px color-mix(in srgb,var(--acc) 55%,transparent));animation:qFloat 5s ease-in-out infinite;z-index:2}
@keyframes qFloat{0%,100%{transform:translate(-50%,-50%) rotate(-4deg)}50%{transform:translate(-50%,-56%) rotate(5deg)}}
.myst-ring{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 120px -20px color-mix(in srgb,var(--acc) 60%,transparent) inset;animation:ringP 6s ease-in-out infinite}
@keyframes ringP{0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}
.mc{position:absolute;left:50%;top:50%;width:84px;height:128px;margin:-64px 0 0 -42px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 40px -20px rgba(0,0,0,.8);display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px;animation:orbit 16s linear infinite}
.mc u{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.18)}.mc u:nth-child(2){width:70%}.mc u:nth-child(3){width:45%;background:color-mix(in srgb,var(--acc) 60%,transparent)}
.mc1{animation-delay:-2.67s}.mc2{animation-delay:-5.33s}.mc3{animation-delay:-8s}.mc4{animation-delay:-10.67s}.mc5{animation-delay:-13.33s}
@keyframes orbit{0.00%{transform:translate(250px,0px) rotate(8.0deg) scale(0.93);opacity:0.73;z-index:3}6.25%{transform:translate(231px,45px) rotate(6.8deg) scale(0.97);opacity:0.83;z-index:3}12.50%{transform:translate(177px,83px) rotate(3.3deg) scale(1.01);opacity:0.92;z-index:3}18.75%{transform:translate(96px,109px) rotate(-1.9deg) scale(1.03);opacity:0.98;z-index:3}25.00%{transform:translate(0px,118px) rotate(-8.0deg) scale(1.04);opacity:1.00;z-index:3}31.25%{transform:translate(-96px,109px) rotate(-14.1deg) scale(1.03);opacity:0.98;z-index:3}37.50%{transform:translate(-177px,83px) rotate(-19.3deg) scale(1.01);opacity:0.92;z-index:3}43.75%{transform:translate(-231px,45px) rotate(-22.8deg) scale(0.97);opacity:0.83;z-index:3}50.00%{transform:translate(-250px,0px) rotate(-24.0deg) scale(0.93);opacity:0.73;z-index:3}56.25%{transform:translate(-231px,-45px) rotate(-22.8deg) scale(0.89);opacity:0.62;z-index:1}62.50%{transform:translate(-177px,-83px) rotate(-19.3deg) scale(0.85);opacity:0.53;z-index:1}68.75%{transform:translate(-96px,-109px) rotate(-14.1deg) scale(0.83);opacity:0.47;z-index:1}75.00%{transform:translate(-0px,-118px) rotate(-8.0deg) scale(0.82);opacity:0.45;z-index:1}81.25%{transform:translate(96px,-109px) rotate(-1.9deg) scale(0.83);opacity:0.47;z-index:1}87.50%{transform:translate(177px,-83px) rotate(3.3deg) scale(0.85);opacity:0.53;z-index:1}93.75%{transform:translate(231px,-45px) rotate(6.8deg) scale(0.89);opacity:0.62;z-index:1}100.00%{transform:translate(250px,-0px) rotate(8.0deg) scale(0.93);opacity:0.72;z-index:1}}
.myst-h{margin:0;font:800 clamp(2rem,4.6vw,3.4rem)/1.05 "Inter";letter-spacing:-.03em}
.myst-p{margin:0;color:var(--mute);font-size:1.02rem}
.myst-back{margin-top:16px;color:var(--ink2);font-size:.9rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
/* waiting / locked */
.soon-box.pend .pend-ico{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:28px;margin-bottom:6px;background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--acc) 40%,#000),#07060c 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pend-ico i{width:30px;height:42px;border:3px solid #f4efe6;border-radius:4px 4px 14px 14px / 4px 4px 22px 22px;position:relative;animation:hgFlip 3s ease-in-out infinite}
.pend-ico i::before{content:"";position:absolute;left:50%;top:6px;width:14px;height:14px;margin-left:-7px;background:color-mix(in srgb,var(--acc) 70%,#fff);clip-path:polygon(0 0,100% 0,50% 100%);animation:sand 3s linear infinite}
.pend-ico.lock i{width:30px;height:24px;border-radius:6px;margin-top:14px;animation:none}
.pend-ico.lock i::before{top:-17px;width:20px;height:17px;margin-left:-13px;border:3px solid #f4efe6;border-bottom:0;border-radius:12px 12px 0 0;background:none;clip-path:none;animation:none}
@keyframes hgFlip{0%,80%{transform:rotate(0)}100%{transform:rotate(180deg)}}
@keyframes sand{0%{transform:scale(1)}80%{transform:scale(.2)}100%{transform:scale(.2)}}
/* every linked account at a glance */
.pnl-accs{margin:16px 0}
.pa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.pa-c{display:grid;gap:12px;text-align:left;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.pa-c:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.pa-c.on{border-color:rgba(255,255,255,.22)}
.pa-h{display:flex;align-items:center;gap:10px;min-width:0}
.pa-n{display:grid;min-width:0;flex:1}.pa-n b{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pa-n small{color:var(--mute);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-dot{width:9px;height:9px;border-radius:50%;flex:none}.pa-dot.ok{background:#2fe0a0;box-shadow:0 0 10px #2fe0a088}.pa-dot.bad{background:#ffb224;box-shadow:0 0 10px #ffb22488}
.pa-s{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pa-s span{display:grid;gap:2px;padding:8px;border-radius:10px;background:rgba(255,255,255,.04)}.pa-s b{font:750 1.05rem/1 "Inter";font-variant-numeric:tabular-nums}.pa-s small{font-size:.64rem;color:var(--mute);line-height:1.15}
.pa-s span.warn b{color:#ff8a7a}
/* a wider side menu on the Instagram pages */
body.app[data-route=ig]{--sw:296px}
body.app[data-route=ig] .sd-sub{margin-left:6px;padding-left:8px}
/* settings */
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.set-b h2{margin:0 0 4px;font-size:1.02rem}.set-b .muted{margin:0 0 14px;font-size:.88rem}.set-h2{margin-top:20px!important}
.lk-row{display:flex;flex-wrap:wrap;gap:10px}
.lk-sw{position:relative;width:38px;height:38px;border-radius:50%;border:2px solid transparent;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.lk-sw.on{border-color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 45%,transparent)}
.lk-own{display:grid;place-items:center;background:conic-gradient(#ff4f8b,#ffb224,#2fbf71,#16c7c1,#4f7dff,#7b2cff,#ff4f8b);overflow:hidden}
.lk-own input{position:absolute;inset:0;opacity:0;cursor:pointer}.lk-own span{font-weight:800;color:#fff;text-shadow:0 1px 3px #000}
.bg-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.bgc{display:grid;gap:8px;padding:8px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--ink2);cursor:pointer;font-size:.8rem}
.bgc i{display:block;height:44px;border-radius:9px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.bgc.on{border-color:var(--acc);color:var(--ink)}
.lk-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.05)}
.lk-seg button{border:0;background:none;color:var(--ink2);padding:8px 14px;border-radius:9px;font:600 .85rem/1 "Inter";cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.lk-seg button[aria-pressed=true]{background:rgba(255,255,255,.12);color:var(--ink)}
.set-foot{margin-top:18px}
body.calm *,body.calm *::before,body.calm *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
/* admin: waiting sign-ups */
.adm-wait{border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.aw-h{display:flex;align-items:center;gap:10px}.aw-h h2{margin:0}.aw-n{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--acc);color:#fff;font:700 .78rem/1 "Inter"}
.aw-list{display:grid;gap:8px;margin-top:6px}
.aw-r{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04)}
.aw-av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--acc) 30%,#222);font-weight:700}
.aw-who{display:grid;flex:1;min-width:180px}.aw-who span{color:var(--ink2);font-size:.88rem}.aw-who small{color:var(--mute);font-size:.75rem}
.badge-wait{display:inline-block;margin:0 6px 4px 0;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,#ffb224 20%,transparent);color:#ffc65a;font:700 .68rem/1 "Inter"}
/* the logo: water lives in the frame, rises and falls, and slowly changes colour */
.mark i::after{left:50%;top:44%;width:2.1em;height:2.1em;margin-left:-1.05em;border-radius:42%;background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 55%,#fff),var(--acc));animation:wSpin 6s linear infinite,wTide 7s ease-in-out infinite,wHue 16s ease-in-out infinite}
.mark i::before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:2.1em;height:2.1em;margin-left:-1.1em;border-radius:40%;background:rgba(255,255,255,.28);animation:wSpin 9s linear infinite reverse,wTide 7s ease-in-out infinite -2s}
@keyframes wSpin{to{rotate:360deg}}
@keyframes wTide{0%,100%{translate:0 0}50%{translate:0 -.16em}}
@keyframes wHue{0%,100%{filter:hue-rotate(0)}33%{filter:hue-rotate(70deg)}66%{filter:hue-rotate(-60deg)}}
@media (prefers-reduced-motion:reduce){.mark i::after,.mark i::before,.qm,.myst-q,.mc,.myst-ring,.pnl-date i,.sd-new.sd-q::after,.q-btn::after,.pend-ico i,.pend-ico i::before{animation:none}}
.aw-r .sel{width:auto;min-width:120px;flex:none}

/* ============ the kicker: a soft dot instead of the line (everywhere) ============ */
.kicker::before{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 16%,transparent),0 0 12px currentColor;opacity:.9}
/* account switcher: the whole name shows, the menu may grow wider than the side menu */
.ig-acc{position:relative}
.ig-acc-b b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;font-size:.92rem;line-height:1.2}
.ig-acc-b small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-acc-b>span:not(.ig-av){min-width:0;flex:1}
.ig-acc-m{right:auto;min-width:100%;width:max-content;max-width:min(380px,calc(100vw - 24px))}
.ig-acc-m b{white-space:nowrap}
.ig-av{background:linear-gradient(140deg,hsl(var(--h,260) 70% 58%),hsl(calc(var(--h,260) + 40) 60% 34%))}
.ig-av b{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* posts as Reels tiles */
.ig-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.ig-reel{position:relative;display:block;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#111;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.08);transition:transform .25s,box-shadow .25s}
.ig-reel:hover{transform:translateY(-3px);box-shadow:0 22px 40px -22px #000,0 0 0 1px color-mix(in srgb,var(--acc) 50%,transparent)}
.ig-th.rl{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.ig-th.rl img{width:100%;height:100%;object-fit:cover}
.rl-top{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;gap:6px}
.rl-top .pt,.rl-on{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;font:700 .7rem/1 "Inter";background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rl-on{background:color-mix(in srgb,var(--acc) 70%,rgba(0,0,0,.4))}
.rl-bot{position:absolute;left:0;right:0;bottom:0;padding:44px 12px 12px;background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.5) 60%,transparent)}
.rl-bot p{margin:0 0 8px;font:600 .82rem/1.3 "Inter";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rl-st{display:flex;align-items:center;gap:10px;font:700 .76rem/1 "Inter"}
.rl-st span{display:inline-flex;align-items:center;gap:4px}
.rl-st em{margin-left:auto;font-style:normal;font-weight:600;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-st em.on{color:#fff}
.ri{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* one post on a phone */
.ig-phone{width:min(340px,100%);margin:0 auto 14px;padding:10px;border-radius:44px;background:linear-gradient(160deg,#2a2a30,#0d0d10);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -40px #000,inset 0 0 0 1px rgba(255,255,255,.05)}
.ph-scr{position:relative;aspect-ratio:9/19.5;border-radius:34px;overflow:hidden;background:#000;color:#fff}
.ig-th.ph-media{position:absolute;inset:0;width:100%;height:100%;border-radius:0}.ig-th.ph-media img{width:100%;height:100%;object-fit:cover}
.ph-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:22px 18px 30px;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);font:800 1.1rem/1 "Inter"}
.ph-top .ri{width:22px;height:22px}
.ph-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ph-play .ri{width:26px;height:26px;fill:#fff;stroke:none}
.ph-rail{position:absolute;right:10px;bottom:104px;display:grid;gap:16px;justify-items:center}
.ph-rail span{display:grid;justify-items:center;gap:3px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.ph-rail .ri{width:28px;height:28px;stroke-width:1.8}
.ph-rail small{font:700 .72rem/1 "Inter"}
.ph-rail span.on .ri{color:color-mix(in srgb,var(--acc) 50%,#fff);fill:color-mix(in srgb,var(--acc) 50%,transparent)}
.ph-cap{position:absolute;left:0;right:56px;bottom:0;padding:60px 14px 16px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.ph-who{display:flex;align-items:center;gap:8px;font-size:.88rem}
.ph-who .ig-av{width:28px;height:28px}
.ph-follow{padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.7);font:700 .72rem/1 "Inter"}
.ph-cap p{margin:8px 0 0;font-size:.82rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ph-cm{margin-top:6px;opacity:.85}.ph-cm p{margin:2px 0 0;-webkit-line-clamp:1}
.ph-aud{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.74rem;opacity:.9}.ph-aud .ri{width:13px;height:13px}
/* inbox: nothing spills into the next column */
.ib-l,.ib-t,.ib-s{min-width:0;overflow:hidden}
.ib-s{overflow-y:auto}
.ib-list{overflow-x:hidden}
.ib-list .r1 b{min-width:0}.ib-list .r1 time{flex:none}
.ib-th b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-win{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ib-comp textarea,.ib-s input,.ib-s textarea,.ib-s .btn{box-sizing:border-box;max-width:100%}
.ib-s input,.ib-s textarea{width:100%}
.ib-ca{flex-wrap:wrap}
.ib-who b{display:block;white-space:nowrap}
@media(max-width:1500px){.ib{grid-template-columns:minmax(0,270px) minmax(0,1fr) minmax(0,240px)}.ib-win{white-space:normal;text-align:center;max-width:46%}}