/* Arc Deck app, in the website's look: xGravity ink, violet buttons, the pixel gradient, Schibsted Grotesk and IBM Plex. */
:root{
 --bg:#14131F;--plate:#1C1A2A;--plate2:#24223A;--rule:#2C2A3E;--act:#4B3FD1;--act-h:#5D51E6;--text:#D9D8DE;--strong:#FFFFFF;--mute:#8E8A9B;
 --violet:#7B4DFF;--blue:#3D6BFF;--soft-v:#9C93FF;--ok:#6BD39C;--err:#FF8A80;--live:#FF5A4E;
 --display:'Schibsted Grotesk',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
 color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font:400 15px/1.55 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0;color:var(--strong);text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--text);text-decoration-color:var(--violet);text-underline-offset:3px}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hidden,[hidden]{display:none!important}
.mono{font-family:var(--mono)}
.bgpx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* brand lockup: pixel ARC DECK, by, xGravity, Beta */
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
.brand .pm{height:13px;display:block}.brand .pm svg{height:100%;width:auto;display:block}
.brand .by{font:400 12px var(--mono);color:var(--mute)}
.brand .xg{height:18px;width:auto;display:block}
.beta{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft-v);border:1px solid rgba(156,147,255,.45);border-radius:999px;padding:1px 7px;margin-left:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 14px var(--body);color:#fff;background:var(--act);border:1px solid transparent;border-radius:9px;padding:9px 15px;cursor:pointer;text-decoration:none;min-height:40px;transition:background .15s,border-color .15s}
.btn:hover{background:var(--act-h)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:rgba(28,26,42,.85);color:var(--text);border-color:var(--rule)}
.btn.ghost:hover{border-color:#4A4660;background:var(--plate2)}
.btn.danger{background:#B4372B}.btn.danger:hover{background:#C9473A}
.btn.sm{font-size:13px;padding:6px 11px;min-height:34px;border-radius:8px}
.btn.on{background:#2E2752;border-color:var(--act);color:#fff}
.btn.big{font-size:16px;padding:12px 26px;min-height:52px;border-radius:12px}
.link{background:none;border:0;padding:0;color:var(--text);text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:3px;cursor:pointer}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font:500 12px var(--mono);color:var(--mute);letter-spacing:.02em}
.field input{border:1px solid var(--rule);border-radius:9px;padding:11px 12px;background:var(--plate);outline:none;color:var(--strong)}
.field input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(123,77,255,.2)}
.msg{font-size:14px;border-radius:9px;padding:10px 12px;margin-bottom:14px}
.msg.err{background:rgba(180,55,43,.18);color:var(--err)}
.msg.ok{background:rgba(47,184,114,.14);color:var(--ok)}

/* sign in */
#auth{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr}
#auth .pitch{padding:44px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;border-right:1px solid var(--rule)}
#auth .pitch h1{font-size:clamp(30px,3.6vw,50px);line-height:1.04;margin:0 0 16px;max-width:15ch}
#auth .pitch p{color:#B9B6C2;font-size:17px;max-width:44ch;margin:0}
#auth .pitch canvas{width:100%;max-width:560px;aspect-ratio:37/7;display:block}
#auth .pitch small{font:400 12px var(--mono);color:var(--mute)}
#auth .form{display:flex;align-items:center;justify-content:center;padding:44px 24px}
#auth .box{width:100%;max-width:380px}
#auth h2{font-size:26px;margin:0 0 6px}
#auth .sub{color:var(--mute);margin:0 0 24px}
#auth .swap{margin-top:16px;color:var(--mute);font-size:14px}
#auth form .btn{width:100%}
@media (max-width:860px){#auth{grid-template-columns:1fr}#auth .pitch{padding:24px 20px;border-right:0;border-bottom:1px solid var(--rule)}#auth .pitch canvas{max-width:320px}}

/* dashboard */
#app{position:relative;z-index:1}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-bottom:1px solid var(--rule);background:rgba(20,19,31,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
.who{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mute)}
main{max-width:1120px;margin:0 auto;padding:40px 28px 80px}
.bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.bar h1{font-size:clamp(30px,3.4vw,44px);line-height:1}
.bar p{margin:8px 0 0;color:var(--mute)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.deck{background:var(--plate);border:1px solid var(--rule);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.deck .thumb{aspect-ratio:16/9;background:#0E0D16;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:13px;border-bottom:1px solid var(--rule)}
.deck .thumb img{width:100%;height:100%;object-fit:contain}
.deck .body{padding:14px 14px 14px;display:flex;flex-direction:column;gap:9px;flex:1}
.deck .title{font:600 17px var(--display);color:var(--strong);border:1px solid transparent;border-radius:8px;padding:4px 6px;margin:-4px -6px;outline:none;width:calc(100% + 12px);background:transparent}
.deck .title:hover{border-color:var(--rule)}
.deck .title:focus{border-color:var(--violet);background:var(--plate2)}
.deck .meta{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:13px;flex-wrap:wrap}
.chip{font:500 11.5px var(--mono);border-radius:999px;padding:2px 9px;background:var(--plate2);color:var(--mute)}
.chip.live{background:rgba(255,90,78,.16);color:#FF9A90}
.chip.ended{background:rgba(47,184,114,.14);color:var(--ok)}
.deck .actions{display:flex;gap:8px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.deck .confirm{display:flex;align-items:center;font-size:13px;color:var(--err)}
.empty{border:1.5px dashed var(--rule);border-radius:16px;padding:56px 24px;text-align:center;color:var(--mute)}
.empty h3{margin:0 0 6px;font-size:20px}
.skel{height:250px;border-radius:16px;background:linear-gradient(90deg,var(--plate),var(--plate2),var(--plate));background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#26243A;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:11px 17px;font-size:14px;z-index:60;box-shadow:0 16px 40px rgba(0,0,0,.4)}

/* dialogs */
.overlay{position:fixed;inset:0;background:rgba(8,7,14,.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:40}
.panel{background:var(--plate);border:1px solid var(--rule);border-radius:18px;width:100%;max-width:470px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.5);max-height:90vh;overflow:auto}
.panel.wide{max-width:760px}
.panel h2{margin:0 0 4px;font-size:22px}
.panel .sub{color:var(--mute);margin:0 0 18px;font-size:14px}
.panel .sub code,.help code{font:12px var(--mono);background:var(--plate2);padding:1px 5px;border-radius:5px}
.panel .row{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.logo-row{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.logo-prev{width:150px;height:64px;border:1px solid var(--rule);border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--plate2);color:var(--mute);font-size:12px;overflow:hidden}
.logo-prev img{max-width:90%;max-height:80%}
.drop{border:1.5px dashed var(--rule);border-radius:12px;padding:28px 16px;text-align:center;color:var(--mute);font-size:14px;cursor:pointer;margin-bottom:12px}
.drop:hover,.drop.over{border-color:var(--violet);color:var(--strong);background:rgba(123,77,255,.08)}
.help{font-size:13px;color:var(--mute);margin:0 0 6px}
.imp-list{list-style:none;margin:0 0 14px;padding:0;font-size:14px;color:var(--mute);display:grid;gap:3px}
.imp-list b{color:var(--strong)}
.prog{height:8px;border-radius:999px;background:var(--plate2);overflow:hidden;margin:14px 0 8px}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--blue));transition:width .2s}
.imp-file{font-size:13px;color:var(--mute);min-height:1.5em;word-break:break-all}

/* views */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 20px}
.stats div{background:var(--plate2);border-radius:12px;padding:12px 14px}
.stats span{display:block;font:500 11px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.stats b{font:700 24px var(--display);color:var(--strong)}
.vh{font:500 11px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 8px}
.vt{width:100%;border-collapse:collapse;font-size:14px}
.vt td,.vt th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--rule);vertical-align:middle}
.vt th{font:500 11px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.vt td.n{text-align:right;font-family:var(--mono);font-size:13px;white-space:nowrap}
.vt .barc{width:34%}
.vt .bar2{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--violet),var(--blue));min-width:2px}
.vt img{width:64px;aspect-ratio:16/9;object-fit:contain;background:#0E0D16;border-radius:4px;display:block}
.fine{font-size:12.5px;color:var(--mute);margin:14px 0 0}
@media (max-width:640px){.stats{grid-template-columns:1fr 1fr}header.top{padding:12px 16px}main{padding:24px 16px 60px}.bar{flex-direction:column;align-items:flex-start}}

/* ================= presenter ================= */
body.dark{overflow:hidden}
body.dark #auth,body.dark #app{display:none!important}
.screen{position:fixed;inset:0;display:none;z-index:1}
#pv{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr)}
body.pv-mode #pv{display:grid}
.pv-bar{grid-column:1/3;display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--rule);font-size:13px;flex-wrap:wrap;background:rgba(20,19,31,.8);backdrop-filter:blur(8px);position:relative;z-index:2}
.pv-bar .t{font:600 14px var(--display);color:var(--strong);max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-bar .sep{width:1px;height:20px;background:var(--rule)}
.pv-bar .sp{flex:1}
.pill{display:inline-flex;align-items:center;gap:7px;font:500 12px var(--mono);border-radius:999px;padding:4px 10px;background:var(--plate2);color:var(--mute);white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:#6C6880}
.pill.on{background:rgba(255,90,78,.16);color:#FF9A90}.pill.on i{background:var(--live);box-shadow:0 0 0 3px rgba(255,90,78,.25);animation:lv 1.6s infinite}
@keyframes lv{50%{opacity:.35}}
.pill.ended{background:rgba(47,184,114,.14);color:var(--ok)}.pill.ended i{background:#2FB872}
.pill.bad{background:rgba(180,55,43,.2);color:var(--err)}
.pill.timer{cursor:pointer;color:var(--text);border:0;font:500 13px var(--mono)}
.pill.timer:hover{background:#2E2B48}
.pv-main{position:relative;z-index:1;padding:16px 20px 14px;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:0;min-width:0}
.pv-cur{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;position:relative}
.pv-frame{position:relative;flex:none;border-radius:8px;box-shadow:0 0 0 1px var(--rule),0 20px 60px rgba(0,0,0,.45);background:#000;overflow:hidden}
.pv-frame img,.pv-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pv-frame [hidden]{display:none}
.pv-cur .held{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--act);color:#fff;font:500 12px var(--mono);border-radius:999px;padding:5px 12px;display:none;z-index:3;white-space:nowrap}
.pv-cur.isheld .held{display:block}.pv-cur.isheld .pv-frame{opacity:.35}
.pv-frame[data-tool="pointer"]{cursor:none}.pv-frame[data-tool="box"]{cursor:crosshair}
.marks{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:8px}
.laser{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#FF5A4E;box-shadow:0 0 0 4px rgba(255,90,78,.25),0 0 22px 6px rgba(255,90,78,.55);opacity:0;transition:opacity .2s}
.laser.show{opacity:1}
.hl{position:absolute;border-radius:6px;background:rgba(255,181,71,.14);box-shadow:inset 0 0 0 3px #FFB547,0 0 30px rgba(255,181,71,.35),0 0 0 100vmax rgba(0,0,0,.25)}
.hl.pop{animation:hlp .35s cubic-bezier(.2,.8,.3,1.3)}
@keyframes hlp{from{transform:scale(.94);opacity:0}}
.pv-ctl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:100%}
.pv-ctl .l,.pv-ctl .r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pv-ctl .r{justify-content:flex-end}
.pv-ctl .c{display:flex;gap:10px}
.nav{font:600 17px var(--display);min-width:150px;min-height:56px;border-radius:14px}
.pv-ctl .n{font:500 13px var(--mono);color:var(--mute)}
.vc{display:none;gap:8px}.vc.show{display:flex}
.tool{display:inline-flex;align-items:center;gap:7px}
.ti{width:12px;height:12px;display:inline-block}
.ti-pointer{border-radius:50%;background:#FF5A4E;box-shadow:0 0 0 3px rgba(255,90,78,.3)}
.ti-box{border-radius:3px;box-shadow:inset 0 0 0 2px #FFB547}
.pv-notes{width:100%;font-size:18px;line-height:1.55;color:#E2E0E8;max-height:24vh;overflow:auto;white-space:pre-wrap;min-height:2.6em;padding:2px 2px 6px}
.pv-notes:empty:before{content:"No notes for this slide.";color:var(--mute)}
.kbd{font:400 11px var(--mono);color:#6C6880;text-align:center}
.pv-side{position:relative;z-index:1;border-left:1px solid var(--rule);overflow:auto;padding:12px;background:rgba(20,19,31,.6)}
.seg{display:flex;background:var(--plate);border:1px solid var(--rule);border-radius:999px;padding:3px;margin-bottom:12px}
.seg button{flex:1;font:500 12.5px var(--body);color:var(--mute);background:none;border:0;border-radius:999px;padding:7px 8px;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--act);color:#fff}
.pv-side h3{margin:4px 4px 8px;font:500 11px var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase}
.th{display:grid;grid-template-columns:22px 1fr 28px;align-items:center;gap:8px;padding:5px;border-radius:10px;cursor:pointer;margin-bottom:3px}
.th:hover{background:var(--plate)}
.th.cur{background:rgba(75,63,209,.2);box-shadow:inset 0 0 0 1.5px var(--act)}
.th .i{font:500 11px var(--mono);color:var(--mute);text-align:right}
.th img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:4px;display:block}
.th.off img{opacity:.22}
.th .eye{background:none;border:0;color:var(--mute);cursor:pointer;padding:4px;font-size:13px}
.th.off .eye{color:#FF6B4A}
.th .vk{font:400 10px var(--mono);color:var(--mute)}
.ba .lbl{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:10px 0 4px 32px}
.ba .th.now{grid-template-columns:22px 1fr 28px}
.ba .th.dim{opacity:.6}
.ba .edge{display:grid;place-items:center;aspect-ratio:16/9;border:1px dashed var(--rule);border-radius:6px;font:500 11px var(--mono);color:var(--mute);margin:0 30px 0 30px}
/* large text */
body.big .pv-notes{font-size:24px;line-height:1.5}
body.big .pv-bar{font-size:15px}body.big .pv-bar .t{font-size:16px}
body.big .pill{font-size:14px}body.big .btn.sm{font-size:15px;min-height:40px}
body.big .pv-ctl .n{font-size:16px}body.big .nav{font-size:20px;min-height:64px;min-width:170px}
body.big .pv-side h3,body.big .th .i{font-size:13px}body.big .seg button{font-size:14px}
@media (max-width:860px){#pv{grid-template-columns:1fr;grid-template-rows:auto auto auto;overflow:auto}.pv-side{border-left:0;border-top:1px solid var(--rule)}.pv-bar{grid-column:1}.pv-cur{min-height:40vh}.pv-ctl{grid-template-columns:1fr}.pv-ctl .l,.pv-ctl .r{justify-content:center}.pv-ctl .c{justify-content:center}}
.pv-msg{max-width:440px;margin:18vh auto;text-align:center;color:var(--mute);padding:0 20px;position:relative;z-index:2}
.pv-msg h2{margin:0 0 8px}

/* ================= audience ================= */
body.aud-mode #aud{display:block}
#aud{--m:max(46px,5vmin)}
.a-frame{position:fixed;z-index:2;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.5);background:#000;transition:opacity .3s}
.a-frame img,.a-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.a-frame img{opacity:0;transition:opacity .25s}.a-frame img.on{opacity:1}
.a-frame video{display:none;background:#000}
.a-frame.vid img{display:none}.a-frame.vid video{display:block}
.a-frame .marks{border-radius:0}
.a-wait{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;z-index:3;transition:opacity .45s}
.a-wait.off{opacity:0;pointer-events:none}
.a-wait .bigmark{width:min(560px,78vw);aspect-ratio:37/7;transition:transform .7s cubic-bezier(.6,0,.3,1),opacity .7s}
.a-wait .bigmark canvas{width:100%;height:100%;display:block}
.a-wait.off .bigmark{transform:translateY(42vh) scale(.18);opacity:0}
.a-wait .byline{display:flex;align-items:center;gap:10px;font:400 13px var(--mono);color:var(--mute);margin-top:-6px}
.a-wait .byline img{height:20px}
.a-wait h1{font-size:clamp(20px,2.6vw,30px);margin:18px 0 0;max-width:26ch}
.a-wait p{margin:0;color:var(--mute);font-size:15px;max-width:44ch}
.a-wait .client{max-height:46px;max-width:180px}
.cursor{display:inline-block;width:.45em;height:1em;background:linear-gradient(135deg,var(--violet),var(--blue));vertical-align:-.14em;margin-left:6px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.join{font:600 16px var(--body);color:#fff;background:var(--act);border:0;border-radius:999px;padding:12px 32px;cursor:pointer}
.join:hover{background:var(--act-h)}
.snd{position:fixed;left:50%;bottom:calc(var(--m) + 14px);transform:translateX(-50%);font:600 15px var(--body);color:#fff;background:var(--act);border:0;border-radius:999px;padding:11px 22px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.4);z-index:6}
.a-foot{position:fixed;left:0;right:0;bottom:0;height:var(--m);display:flex;align-items:center;justify-content:center;gap:16px;z-index:4;font:400 11.5px var(--mono);color:#6C6880}
.a-foot a{display:inline-flex;align-items:center;gap:8px;color:#8E8A9B;text-decoration:none;opacity:.8}
.a-foot a:hover{opacity:1;color:#fff}
.a-foot .pm{height:9px}.a-foot .pm svg{height:100%;width:auto;display:block}
.a-foot img{height:14px;opacity:.75}
.a-foot .count{position:absolute;right:16px}
.a-foot .conn{position:absolute;left:16px;color:#8E8A9B}
/* leave-behind */
.a-browse{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--m) + 2px);display:none;align-items:center;gap:10px;z-index:6;background:rgba(20,19,31,.85);backdrop-filter:blur(8px);border:1px solid var(--rule);border-radius:14px;padding:5px}
body.browse .a-browse{display:flex}
.a-browse .n{font:500 13px var(--mono);color:var(--text);min-width:70px;text-align:center}
.a-browse .btn{min-width:48px}
.a-top{position:fixed;top:0;left:0;right:0;height:var(--m);display:none;align-items:center;justify-content:center;gap:12px;font-size:13.5px;color:var(--text);z-index:4}
.a-top img{max-height:22px;max-width:120px}
body.browse .a-top{display:flex}
/* the blinking cursor some videos ask for on their first frame */
.tcur{position:fixed;z-index:7;pointer-events:none;display:none}
.tcur i{position:absolute;inset:0;animation:tblink 1.06s steps(1) infinite}
@keyframes tblink{0%{background:var(--c,#6EBF78)}50%{background:transparent}}
@media (prefers-reduced-motion:reduce){.a-wait .bigmark{transition:none}.cursor,.pill.on i{animation:none}}

/* v0.3 fixes: one-line presenter bar, footer on phones */
.pv-bar .brand[data-small] .by,.pv-bar .brand[data-small] .xg,.pv-bar .brand[data-small] .beta{display:none}
.pv-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pv-bar>*{flex:none}
.pv-bar .t{flex:0 1 auto;min-width:60px}
@media (max-width:600px){.a-foot .count,.a-foot .conn{display:none}.a-foot{font-size:12px}.a-foot .pm{height:8px}}

/* ===== v0.4 ===== */
/* toolbar right above the slide: everything you touch while presenting */
.pv-tools{width:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px;background:rgba(28,26,42,.75);border:1px solid var(--rule);border-radius:12px;backdrop-filter:blur(8px)}
.pv-tools .tsep{width:1px;height:22px;background:var(--rule);margin:0 2px}
.pv-tools .sp{flex:1}
.pv-tools .count{font:500 14px var(--mono);color:var(--strong);padding:0 8px;white-space:nowrap}
body.big .pv-tools .count{font-size:17px}
/* on is unmistakable: solid violet, white text, a light ring */
.btn.tog.on,.btn.tog[aria-pressed="true"]{background:var(--act);border-color:transparent;color:#fff;box-shadow:0 0 0 2px #9C93FF}
.btn.tog.on:hover,.btn.tog[aria-pressed="true"]:hover{background:var(--act-h)}
#pvHold.on{background:#B4372B;box-shadow:0 0 0 2px #FF9A90}
/* the pointer: a small dot with a soft ripple */
.laser{width:10px;height:10px;margin:-5px 0 0 -5px;background:#FF4D3D;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 8px rgba(255,77,61,.6)}
.laser:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #FF4D3D;animation:rip 1.1s ease-out infinite}
@keyframes rip{from{transform:scale(1);opacity:.85}to{transform:scale(3.4);opacity:0}}
/* click to point: a mark that ripples, then fades */
.ping{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#FF4D3D;box-shadow:0 0 0 2px rgba(255,255,255,.9);animation:pingfade 2.8s ease-in forwards}
.ping:before,.ping:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #FF4D3D;animation:rip 1s ease-out 3}
.ping:after{animation-delay:.33s}
@keyframes pingfade{0%{transform:scale(.4);opacity:0}8%{transform:scale(1.15);opacity:1}14%{transform:scale(1)}75%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.laser:after,.ping:before,.ping:after{animation:none}}
/* current and next side by side */
.pv-cur{gap:18px}
.pv-nextbox{flex:none;display:flex;flex-direction:column;gap:6px;align-self:center}
.pv-nextbox .lbl{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pv-nf{position:relative;border-radius:8px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--rule)}
.pv-nf img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pv-nf .end{position:absolute;inset:0;display:grid;place-items:center;font:500 13px var(--mono);color:var(--mute)}
/* the side panel switch stays put while slides scroll under it */
.pv-side{padding-top:0}
.pv-side .seg{position:sticky;top:0;z-index:2;margin:0 -12px 10px;border-radius:0;border-width:0 0 1px;padding:10px 12px;background:rgba(20,19,31,.96);backdrop-filter:blur(8px)}
.pv-side .seg button{border-radius:999px}
.pv-ctl .l,.pv-ctl .r{min-width:0}

/* ===== edit slides ===== */
body.ed-mode #auth,body.ed-mode #app{display:none!important}
#ed{position:relative;z-index:1}
.ed-status{font:500 12px var(--mono);color:var(--mute);min-width:70px;text-align:right}
.ed-status.ok{color:var(--ok)}.ed-status.err{color:var(--err)}
.ed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.ed-card{position:relative;background:var(--plate);border:1px solid var(--rule);border-radius:14px;overflow:hidden;cursor:grab;transition:transform .15s,box-shadow .15s,opacity .15s}
.ed-card:active{cursor:grabbing}
.ed-card.dragging{opacity:.35}
.ed-card.before{box-shadow:-4px 0 0 0 var(--violet)}.ed-card.after{box-shadow:4px 0 0 0 var(--violet)}
.ed-card .th2{position:relative;aspect-ratio:16/9;background:#0E0D16}
.ed-card .th2 img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.ed-card.off .th2 img{opacity:.25}
.ed-card .num{position:absolute;left:8px;top:8px;font:500 12px var(--mono);color:#fff;background:rgba(20,19,31,.85);border-radius:6px;padding:2px 7px}
.ed-card .kind{position:absolute;right:8px;top:8px;font:500 11px var(--mono);color:var(--soft-v);background:rgba(20,19,31,.85);border-radius:6px;padding:2px 7px}
.ed-card .hid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 12px var(--mono);color:#FF9A90;background:rgba(20,19,31,.9);border-radius:6px;padding:3px 9px;display:none}
.ed-card.off .hid{display:block}
.ed-card .eb{padding:10px;display:flex;flex-direction:column;gap:8px}
.ed-card input{font:600 14px var(--display);color:var(--strong);background:transparent;border:1px solid transparent;border-radius:7px;padding:4px 6px;margin:0 -6px;outline:none;width:calc(100% + 12px);cursor:text}
.ed-card input:hover{border-color:var(--rule)}.ed-card input:focus{border-color:var(--violet);background:var(--plate2)}
.ed-card .ea{display:flex;gap:6px;align-items:center}
.ed-card .ea .sp{flex:1}
.ed-card .btn.sm{min-height:30px;padding:4px 10px}