:root{
  /* light and airy: white panels on a pale mint ground, Deck Studio green for everything that acts */
  --bg:#F3F8F5; --p1:#FFFFFF; --p2:#FFFFFF; --line:#E2ECE6; --line2:#D2DFD7;
  --fg:#13251D; --fg2:#3C4D44; --mute:#56665E; --faint:#5F6F67;
  --sage:#2B7A52; --mint:#DCEFE3; --mint2:#EAF4EE; --green:#1E4034; --green2:#2A5745; --warn:#94560F;
  --gold:#B68235;
  --ink:#10201A;   /* dark text, for the few places something sits on a pale fill */
  --serif:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --shadow:0 18px 40px -20px rgba(19,37,29,.28);
}
/* Presenting stays dark: the slide is the only bright thing in the room. */
#present,.viewer,#speaker,.jumplayer{
  --bg:#0B0D0F; --p1:#0E1114; --p2:#111417; --line:#1B1F23; --line2:#262B30;
  --fg:#E8EBED; --fg2:#B6BEC4; --mute:#8A939B; --faint:#7C868E;
  --sage:#8FBCA4; --mint2:#16241D; --warn:#E0B48A; color:var(--fg);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg)}
body{font-family:var(--sans);color:var(--fg);overflow:hidden}
button,input,select,textarea{font-family:inherit}
a{color:var(--sage)} a:hover{color:var(--green)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}

.row{display:flex;align-items:center}
.spread{display:flex;align-items:center;justify-content:space-between}
.col{display:flex;flex-direction:column}
.grow{flex:1}.min0{min-width:0}.hide{display:none!important}
.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}
.mt3{margin-top:3px}.mt6{margin-top:6px}.mt10{margin-top:10px}.end{align-items:flex-end}
.small{font-size:13px}.muted{color:var(--mute)}.faint{color:var(--faint)}
.line{line-height:1.65}.serif{font-family:var(--serif)}
.kicker{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--sage)}
.pill{border:1px solid var(--line2);border-radius:999px;padding:3px 8px;font-size:11.5px;color:var(--mute);white-space:nowrap}
.pill.on{border-color:var(--sage);color:var(--sage);background:var(--mint2)}

.btn{border:1px solid var(--line2);background:var(--p1);color:var(--fg2);font-size:14px;font-weight:600;padding:9px 16px;
  border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--sage);color:var(--fg)}
.btn.primary{border:1px solid var(--green);background:var(--green);color:#fff;font-weight:700}
.btn.primary:hover{background:var(--green2);border-color:var(--green2);color:#fff}
.btn.ghost{border-color:transparent;background:none;color:var(--mute)} .btn.ghost:hover{color:var(--sage)}
.btn.danger:hover{border-color:#B3261E;color:#B3261E}
.btn.dashed{border-style:dashed;padding:13px;color:var(--mute)}
.btn.big{padding:11px}.btn[disabled]{opacity:.4;cursor:not-allowed}
.icon{border:none;background:none;color:var(--faint);font-size:13px;cursor:pointer;padding:1px 4px}
.icon:hover{color:var(--sage)}
.input{background:var(--p1);border:1px solid var(--line2);border-radius:10px;color:var(--fg);
  font-size:14.5px;padding:9px 11px;width:100%}
textarea.input{line-height:1.55;resize:vertical;min-height:74px}
textarea.tall{min-height:150px}
label.f,.f{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--mute)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.check{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--fg2)}
.hr{height:1px;background:var(--line)}
.errline{color:#B3261E}
.warnnote{border:1px solid #F0D9B5;background:#FFF6E8;border-radius:12px;padding:10px 12px;color:var(--warn)}

/* ══ sign in ══════════════════════════════════════════
   Light and open, like the sales page: the mascot on a soft mint ground on
   the left, and a plain, friendly form on the right. */
#login{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:stretch;overflow-y:auto;background:var(--p1)}
.loginart{position:relative;overflow:hidden;background:var(--bg);
  padding:44px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:36px;
  min-height:100%}
/* two soft shapes behind everything, like the reference's blobs */
.loginart::before{content:'';position:absolute;z-index:0;right:-22%;bottom:-18%;width:78%;aspect-ratio:1;
  border-radius:58% 42% 46% 54% / 52% 44% 56% 48%;background:var(--mint)}
.loginart::after{content:'';position:absolute;z-index:0;left:-12%;top:-14%;width:40%;aspect-ratio:1;border-radius:50%;
  background:#E6F2EA}
.loginart>*{position:relative;z-index:2}
.artbrand{display:flex;align-items:center;gap:10px}
.artkicker{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);margin-bottom:16px}
.artline{font-family:var(--serif);font-size:clamp(36px,4vw,56px);line-height:1.06;font-weight:800;
  letter-spacing:-.025em;margin:0 0 20px;color:var(--fg);text-wrap:balance}
.artline em{font-style:normal;color:var(--sage)}
.artsub{margin:0;max-width:40ch;font-size:16px;line-height:1.75;color:var(--fg2)}
.artrules{margin-top:30px;max-width:46ch;display:flex;flex-direction:column;gap:10px}
.artrules div{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;
  font-size:14.5px;line-height:1.5;color:var(--fg);font-weight:500}
.artrules .n{width:34px;height:34px;border-radius:50%;background:var(--p1);color:var(--sage);display:grid;place-items:center;
  font-size:11.5px;font-weight:800;box-shadow:0 4px 14px -6px rgba(19,37,29,.3)}
.artfoot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.artmascot{position:absolute!important;right:8%;top:7%;width:clamp(96px,11vw,150px);aspect-ratio:1;z-index:1!important}
.artmascot .mascot{width:100%;height:100%}

.loginpane{display:flex;align-items:center;justify-content:center;padding:48px 36px}
#login .card{width:400px;max-width:100%;border:none;background:none;border-radius:0;padding:0;
  display:flex;flex-direction:column;gap:18px}
#login .kicker{color:var(--sage);font-weight:700;letter-spacing:.14em;font-size:12.5px}
#login h1{font-family:var(--serif);font-size:clamp(32px,3vw,42px);font-weight:800;
  margin:-4px 0 2px;letter-spacing:-.025em;line-height:1.08;color:var(--fg)}
#login .f{gap:7px}
#login .f>span,#login label.f{font-size:14px;font-weight:600;color:var(--fg)}
#login .input{background:var(--bg);border:1.5px solid transparent;border-radius:14px;
  padding:13px 16px;height:auto;font-size:15.5px;color:var(--fg);transition:border-color .15s,background .15s}
#login .input:hover{border-color:var(--line2)}
#login .input:focus,#login .input:focus-visible{outline:none;border-color:var(--sage);background:var(--p1)}
#login .input[readonly]{color:var(--fg2)}
#login .card .btn.big{margin-top:8px;width:100%;justify-content:center;padding:15px;font-size:15px;
  border:1px solid var(--green);color:#fff;background:var(--green);font-weight:700}
#login .card .btn.big:hover{background:var(--green2);border-color:var(--green2)}
#login .authalt{padding-top:18px;border-top:1px solid var(--line)}
#login .smallprint{font-size:12px;color:var(--faint);line-height:1.6;margin:0}
@media (max-height:720px){
  .loginart{padding:32px 44px;gap:22px}
  .artsub{display:none}
  .artrules{margin-top:18px}
}
@media (max-height:600px){
  .artrules,.artkicker,.artmascot{display:none}
}
@media (max-width:880px){
  #login{grid-template-columns:minmax(0,1fr)}
  .loginart{display:none}
  .loginpane{padding:40px 22px}
}
.brand{display:flex;align-items:center;gap:9px}
.brandname{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--fg)}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 32px;border-bottom:1px solid var(--line);background:var(--p1)}
.libwrap{flex:1;overflow-y:auto;padding:36px 32px 60px}
.libinner{max-width:1560px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.libinner.narrow{max-width:920px}
.libinner h1{font-family:var(--serif);font-size:40px;font-weight:800;margin:0;letter-spacing:-.015em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));gap:26px}
.deckcard{border:1px solid var(--line);background:var(--p2);border-radius:18px;transition:box-shadow .2s,transform .2s;overflow:hidden;cursor:pointer}
.deckcard:hover{border-color:var(--line2);box-shadow:var(--shadow);transform:translateY(-2px)}
.thumb{position:relative;width:100%;padding-bottom:56.25%;overflow:hidden}
.mini{position:absolute;inset:0}
.deckmeta{padding:16px 19px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.deckmeta .t{font-size:17px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emptybig{border:1px dashed var(--line2);background:var(--p1);border-radius:24px;padding:56px 40px 64px;display:flex;
  flex-direction:column;align-items:center;gap:14px;text-align:center}
.emptybig .h2{font-size:28px;font-weight:800;color:var(--fg)}.mw44{max-width:44ch}
.panel{border:1px solid var(--line);border-radius:18px;background:var(--p1);overflow:hidden}
.issue{display:flex;gap:14px;align-items:flex-start;padding:15px 20px;border-bottom:1px solid var(--line)}
.issue:last-child{border-bottom:0}
.issue .t{font-size:14.5px;font-weight:600}
.dot3{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 auto}
.dot3.warn{background:var(--warn)}.dot3.info{background:#4A6A8C}.dot3.ok{background:var(--sage)}
.revgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.revslide .thumb{border:1px solid var(--line);border-radius:10px}

.editbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 16px;
  border-bottom:1px solid var(--line);background:var(--p1);overflow-x:auto;scrollbar-width:none}
.editbar::-webkit-scrollbar{height:0}
.editbar>.row{flex:0 0 auto;min-width:0}
@media (max-width:1560px){.editbar{flex-wrap:wrap;row-gap:8px}.editbar>.row:last-child{flex-wrap:wrap;justify-content:flex-end;flex:1 1 auto}}
.editbar>.row.min0{overflow:hidden}
.editbar .title{min-width:0}
.editbar .title{font-family:var(--serif);font-size:19px;font-weight:800;background:none;
  border:1px solid transparent;color:var(--fg);padding:4px 8px;border-radius:6px;min-width:120px}
.editbar .title:hover{border-color:var(--line2)}
.banner{display:flex;align-items:center;gap:10px;padding:9px 16px;background:#FFF6E8;
  border-bottom:1px solid #F0D9B5;font-size:13.5px;color:var(--warn)}
.banner .pip{width:7px;height:7px;border-radius:50%;background:var(--warn);animation:pulse 1.6s ease-in-out infinite}
.editgrid{flex:1;display:grid;grid-template-columns:206px 1fr 336px;min-height:0}
.rail{border-right:1px solid var(--line);background:var(--p1);overflow-y:auto;padding:12px 10px;
  display:flex;flex-direction:column;gap:9px}
.railitem.hiddenslide{opacity:.5}
.railbtn{position:relative;border:1px solid var(--line2);background:none;border-radius:10px;
  padding:0;cursor:pointer;overflow:hidden;display:block;width:100%}
.railbtn.sel{border:2px solid var(--sage)}
.railrow{display:flex;align-items:center;justify-content:space-between;gap:5px}
.railrow>span:first-child{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hiddentag{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.72);font-weight:700;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--warn)}
.cdot{position:absolute;top:4px;right:5px;min-width:15px;height:15px;border-radius:8px;background:var(--sage);
  color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;padding:0 3px}
.canvaswrap{position:relative;overflow:auto;background:#E6EFE9;display:flex;align-items:center;justify-content:center}
.canvaslabel{position:absolute;top:12px;left:16px;z-index:5;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.stage{position:relative;flex-shrink:0;border-radius:6px;box-shadow:0 24px 50px -18px rgba(19,37,29,.35),0 0 0 1px rgba(19,37,29,.06)}
.slide{position:absolute;top:0;left:0;width:1920px;height:1080px;transform-origin:top left;overflow:hidden}
.el{position:absolute;white-space:pre-wrap;overflow:hidden}
.slide.editing .el{cursor:move;user-select:none}
.selbox{position:absolute;border:3px solid var(--sage);pointer-events:none}
.handle{position:absolute;right:-13px;bottom:-13px;width:26px;height:26px;background:var(--sage);
  border-radius:4px;cursor:nwse-resize;pointer-events:auto}
.zoompill{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;
  gap:10px;background:var(--p2);border:1px solid var(--line2);border-radius:999px;padding:6px 15px;box-shadow:var(--shadow)}
.zoompill button{border:none;background:none;color:var(--fg2);font-size:16px;cursor:pointer}
.zoompill .pct{font-size:12.5px;color:var(--mute);min-width:46px;text-align:center}
.zoompill .tiny{font-size:12px;color:var(--mute)}
.inspector{border-left:1px solid var(--line);background:var(--p1);overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:18px}
.sect{display:flex;flex-direction:column;gap:11px}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:28px;height:28px;border-radius:8px;border:1px solid var(--line2);cursor:pointer}
.sw.on{border:2px solid var(--fg)}
.sw.none{background:repeating-linear-gradient(45deg,#E2ECE6,#E2ECE6 5px,#fff 5px,#fff 10px)}
.empty{border:1px dashed var(--line2);border-radius:14px;background:var(--bg);padding:20px 14px;text-align:center;
  font-size:13px;line-height:1.7;color:var(--faint)}
.comment{display:flex;gap:10px}
.comment .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.comment .who{font-size:14px;font-weight:600}
.comment .txt{font-size:13.5px;line-height:1.65;color:var(--fg2)}
.lnk{background:none;border:none;padding:0;font-size:12.5px;color:var(--sage);cursor:pointer;text-align:left}
.lnk.dim{color:var(--faint)} .lnk.dim:hover{color:var(--fg)}
.statusbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  height:32px;border-top:1px solid var(--line);background:var(--p1);font-size:12.5px;color:var(--faint)}
.connstate.warn{color:var(--warn)}

.avatar{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line2);color:var(--fg2);
  display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 auto;background:var(--p1)}
.avatar.me{border-color:var(--sage);color:var(--sage)}
.stack .avatar+.avatar{margin-left:-7px}

.scrim{position:fixed;inset:0;background:rgba(19,37,29,.34);backdrop-filter:blur(2px);z-index:40}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,92vw);max-height:88vh;
  overflow:auto;background:var(--p2);border:1px solid var(--line);border-radius:22px;z-index:50;
  padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 40px 90px -30px rgba(19,37,29,.45)}
.modal .h3{font-size:22px;font-weight:800;color:var(--fg)}
.menu{position:fixed;top:60px;right:18px;width:330px;background:var(--p2);border:1px solid var(--line);
  border-radius:18px;z-index:50;box-shadow:0 30px 60px -24px rgba(19,37,29,.4);padding:8px;display:flex;flex-direction:column;gap:2px}
.menu button{text-align:left;border:none;background:none;color:var(--fg);font-size:14px;padding:12px 14px;
  border-radius:12px;cursor:pointer}
.menu button:hover{background:var(--mint2)}
.modes{display:flex;flex-direction:column;gap:2px}
.mode{display:flex;gap:11px;align-items:flex-start;padding:10px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.mode.on{border-color:var(--sage);background:var(--mint2)}
.mode b{font-size:14px;display:block}
.mode em{font-style:normal;font-size:12.5px;color:var(--faint);display:block;margin-top:3px}
.linkrow{display:flex;gap:8px}

#present,.viewer{position:fixed;inset:0;background:#000;z-index:100;display:flex;align-items:center;justify-content:center}
#present{cursor:default}
#present.laseron{cursor:none}   /* only the laser dot replaces the pointer */
.presentstage,.viewstage{position:relative;overflow:hidden;flex-shrink:0}
.presentbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;
  gap:12px;background:rgba(17,20,23,.94);border:1px solid var(--line2);border-radius:24px;padding:7px 17px;cursor:default}
.presentbar .mid{min-width:56px;text-align:center}
.presentbar .sep{width:1px;height:14px;background:var(--line2)}
.laseron{background:#7A2222;color:#FFD9D9;border-radius:12px}
.laser{position:fixed;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(255,60,60,.9);
  box-shadow:0 0 18px 6px rgba(255,60,60,.45);pointer-events:none;z-index:200}
#speaker{position:fixed;inset:0;background:#08090B;z-index:100;display:flex;flex-direction:column;padding:22px 26px;gap:18px}
.spkgrid{flex:1;display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:minmax(0,1fr);gap:22px;min-height:0}
.spkgrid>.col{min-height:0}
.spkstage{position:relative;width:100%;overflow:hidden;border:1px solid var(--line);border-radius:8px}
.tile{border:1px solid var(--line);background:var(--p1);border-radius:9px;padding:13px 15px;display:flex;
  flex-direction:column;gap:4px}
.tinylabel{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.tile .n{font-family:var(--serif);font-size:40px;font-weight:600;font-variant-numeric:tabular-nums}
.tile .n.over{color:var(--warn)} .tile .n.sage{color:var(--sage)}
.tile .upnext{font-size:15.5px;color:var(--fg2)}
.spknext{position:relative;width:100%;max-width:300px;overflow:hidden;border:1px solid var(--line);border-radius:6px;
  pointer-events:none;flex-shrink:0}
.spknext .slide{transform-origin:0 0}
.notesbox{flex:1 1 0;border:1px solid var(--line);background:var(--p1);border-radius:9px;padding:16px 18px;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:flex;flex-direction:column;gap:9px;min-height:120px}
.notesbox>*{flex-shrink:0}
.notesbar{position:sticky;top:-16px;margin:-16px -18px 0;padding:12px 18px 8px;background:var(--p1);z-index:1}
.notesbar .btn{min-width:44px;padding-left:8px;padding-right:8px}
.notesbox p{margin:0;font-size:19px;line-height:1.75;color:#C9D0D5;white-space:pre-wrap}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#13251D;color:#fff;
  border:none;border-radius:999px;padding:13px 22px;font-size:14px;font-weight:500;z-index:300;max-width:calc(100vw - 32px);
  box-shadow:0 16px 36px -12px rgba(19,37,29,.5)}
.localbadge{position:fixed;left:12px;bottom:12px;z-index:60;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--warn);border:1px solid #F0D9B5;background:#FFF6E8;border-radius:20px;padding:5px 12px}

#printroot{display:none}
@media print{
  body{overflow:visible}
  #app{display:none!important}
  #printroot{display:block!important}
  .printslide{width:1920px;height:1080px;position:relative;overflow:hidden;break-after:page}

  /* paper layouts — Letter portrait, 0.5in margins, ink on white */
  #printroot.paper{background:#fff;color:#201F1D}
  .ppage{width:816px;height:1056px;padding:48px;box-sizing:border-box;display:flex;
    flex-direction:column;justify-content:space-between;break-after:page;position:relative}
  .ppage:last-child{break-after:auto}
  .pbody{display:flex;flex-direction:column;gap:26px;flex:1;min-height:0}
  /* Notes pages carry prose, so they flow and paginate instead of clipping.
     The page inset comes from @page, not padding: padding is not repeated at
     a fragmentation break, so a continued note would start at the very edge
     of the second sheet, inside the printer's dead margin.
     The write-on area is elastic — it fills whatever the note leaves and
     collapses to nothing when the note fills the sheet, so a long note never
     pushes a footer and a set of blank rules onto a sheet of their own. */
  .ppage.flow{height:auto;min-height:960px;width:auto;padding:0;
    display:flex;flex-direction:column}
  .ppage.flow .pbody{display:flex;flex-direction:column;flex:1 1 auto;gap:0;min-height:0}
  .ppage.flow .pcap{margin-bottom:14px}
  .ppage.flow .pslot{margin:0 auto 14px}
  .ppage.flow .pnotes{overflow:visible;height:auto;flex:0 0 auto;min-height:0}
  /* The ruling is painted at a constant 28px pitch, so the number of rules
     follows the space available instead of six rules being crushed into
     whatever height is left over. Anything shorter than one full pitch
     prints blank rather than as a smear. */
  .ppage.flow .plines.wide{flex:1 1 0;height:auto;min-height:0;overflow:hidden;
    margin-top:16px;display:block;padding:0;
    background-image:repeating-linear-gradient(to bottom,
      transparent 0 27px,#E2E4E0 27px 28px);
    background-position:0 0;background-repeat:repeat-y}
  .ppage.flow .plines.wide span{display:none}
  .prow{display:flex;align-items:flex-start;gap:16px}
  .pnum{font:600 11px 'Raleway',Arial,sans-serif;letter-spacing:.14em;color:#8A938D;
    padding-top:4px;min-width:22px;font-variant-numeric:tabular-nums}
  .pslot{position:relative;overflow:hidden;border:1px solid #D8DAD5;flex:0 0 auto;break-inside:avoid}
  .pstage{position:absolute;top:0;left:0;width:1920px;height:1080px;transform-origin:top left;overflow:hidden}
  .pstage .el{position:absolute}
  .plines{flex:1;display:flex;flex-direction:column;justify-content:space-between;
    align-self:stretch;padding:6px 0 10px}
  .plines span{display:block;height:0;border-bottom:1px solid #E2E4E0}
  .plines.wide{flex:0 0 auto;height:150px;margin-top:14px}
  .pbody.notes{gap:14px;align-items:center}
  .pbody.notes .pslot{align-self:center}
  .pcap{align-self:stretch;font:400 12px 'Raleway',Arial,sans-serif;letter-spacing:.06em;
    text-transform:uppercase;color:#6E7772;border-bottom:1px solid #E2E4E0;padding-bottom:8px;break-after:avoid}
  .pcap .pnum{display:inline;padding:0;color:#B68235}
  .pnotes{align-self:stretch;font:400 13.5px/1.65 'Lora',Georgia,serif;color:#201F1D;
    white-space:pre-wrap;flex:1;min-height:0;overflow:hidden;orphans:3;widows:3}
  .pempty{color:#9AA29C;font-style:italic}
  .pfoot{display:flex;justify-content:space-between;font:400 10.5px 'Raleway',Arial,sans-serif;
    letter-spacing:.1em;text-transform:uppercase;color:#9AA29C;
    border-top:1px solid #E2E4E0;padding-top:10px;margin-top:16px;break-before:avoid}
}

/* toggle switch */
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
  font-size:13.5px;color:var(--fg2);padding:2px 0}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .track{flex:0 0 auto;width:42px;height:24px;border-radius:12px;background:var(--bg);
  border:1px solid var(--line2);position:relative;transition:background .14s,border-color .14s}
.toggle .track::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--faint);transition:transform .14s,background .14s}
.toggle input:checked+.track{background:var(--mint);border-color:var(--sage)}
.toggle input:checked+.track::after{transform:translateX(18px);background:var(--sage)}
.toggle input:focus-visible+.track{outline:2px solid var(--sage);outline-offset:2px}
.toggle:hover .track{border-color:var(--sage)}

/* segmented toggle group */
.seg{display:flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden;background:var(--p1)}
.seg button{flex:1;border:none;background:none;color:var(--mute);font-size:13px;padding:8px 6px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line2)}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--mint2);color:var(--sage);font-weight:700}

/* four-up numeric fields: keep 4 digits visible at the larger base size */
.g4 .input{font-size:13px;padding:9px 5px;text-align:center}

/* active laser toggle must beat .btn.ghost's colour */
.btn.ghost.laseron{background:#7A2222;color:#FFD9D9;border-radius:14px}

/* never over a projected slide */
body.presenting .localbadge{display:none}


/* ══ photographs ══════════════════════════════════════ */
.imgprev{border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--bg)}
.imgprev img{display:block;width:100%;max-height:170px;object-fit:cover}
.slide.dropping{outline:2px dashed var(--sage);outline-offset:-6px}
.el.drophit{outline:3px solid var(--sage);outline-offset:2px}

/* ══ new-slide layout picker ══════════════════════════ */
.modal.wide{width:min(920px,92vw);max-height:86vh;overflow-y:auto}
.layoutgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px;margin-top:4px}
.layoutcard{border:1px solid var(--line);background:var(--p1);border-radius:14px;padding:9px;cursor:pointer;
  text-align:left;color:var(--fg2);display:flex;flex-direction:column;gap:6px}
.layoutcard:hover{border-color:var(--sage)}
.layoutcard .lpv{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:var(--bg)}
.layoutcard .lpv .mini{position:absolute;inset:0}
.layoutcard .t{font-size:13.5px;color:var(--fg)}

/* ══ slide sorter ═════════════════════════════════════ */
#sorter{position:fixed;inset:0;background:var(--bg);z-index:110;display:flex;flex-direction:column}
.sortbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;
  border-bottom:1px solid var(--line);background:var(--p1)}
.sortbar .sep{width:1px;height:16px;background:var(--line2)}
.sortgrid{flex:1;overflow-y:auto;padding:22px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px;align-content:start}
.sortcard{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--p1);padding:8px;
  cursor:pointer;transition:border-color .12s,transform .12s}
.sortcard:hover{border-color:var(--line2)}
.sortcard.sel{border-color:var(--sage);box-shadow:0 0 0 1px var(--sage) inset}
.sortcard.hid{opacity:.5}
.sortcard.dragging{opacity:.35}
.sortcard.over{border-color:var(--sage);transform:translateX(5px)}
.sortcard .thumb{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:var(--bg)}
.sortcard .thumb .mini{position:absolute;inset:0}
.sortcard .cap{margin-top:8px;font-size:13px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sortcard .cap .num{color:var(--faint);font-variant-numeric:tabular-nums;margin-right:5px}
.sortcard .hiddentag,.sortcard .cdot{position:absolute;top:14px}
.sortcard .hiddentag{left:14px}
.sortcard .cdot{right:14px}
.sorthint{padding:11px 20px;border-top:1px solid var(--line);background:var(--p1)}

/* ══ house style ══════════════════════════════════════ */
.pairgrid,.palgrid{display:grid;gap:10px}
.pairgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.palgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.paircard,.palcard{border:1px solid var(--line);background:var(--p1);border-radius:14px;padding:13px;
  cursor:pointer;text-align:left;color:var(--fg2);display:flex;flex-direction:column;gap:7px}
.paircard:hover,.palcard:hover{border-color:var(--line2)}
.paircard.on,.palcard.on{border-color:var(--sage);box-shadow:0 0 0 1px var(--sage) inset}
.paircard .ph{font-size:34px;line-height:1;color:var(--fg)}
.paircard .pb{font-size:13px;line-height:1.5;color:var(--mute)}
.paircard .t,.palcard .t{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.palcard .chips{display:flex;gap:5px}
.palcard .chips i{width:26px;height:26px;border-radius:4px;border:1px solid var(--line2)}

/* ══ version history ══════════════════════════════════ */
.histlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.histrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 15px;background:var(--p1)}
.histrow+.histrow{border-top:1px solid var(--line)}
.histrow .t{font-size:14px;color:var(--fg)}

/* ══ comment threads + mentions ═══════════════════════ */
.seg.tiny button{font-size:11.5px;padding:5px 7px}
.thread{border-left:1px solid var(--line2);padding-left:10px;margin-bottom:12px}
.thread.replying{border-left-color:var(--sage)}
.comment.reply{margin-left:22px;opacity:.92}
.comment.mentioned .txt{border-left:2px solid var(--sage);padding-left:9px}
.comment .men{color:var(--sage);font-weight:600}
.pill.mention{border-color:var(--sage);color:var(--sage)}
.replyhint{padding:2px 0 6px}
.draftwrap{position:relative}
.mentionmenu{position:absolute;left:0;right:0;bottom:calc(100% + 5px);z-index:40;background:var(--p2);
  border:1px solid var(--line2);border-radius:12px;overflow:hidden;box-shadow:0 16px 36px -14px rgba(19,37,29,.35)}
.mentionmenu.hide{display:none}
.mentionmenu button{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;
  color:var(--fg2);font-size:13.5px;padding:8px 11px;cursor:pointer;text-align:left}
.mentionmenu button:hover,.mentionmenu button.on{background:var(--mint2);color:var(--fg)}

/* ══ pacing ═══════════════════════════════════════════ */
.tile.pace{gap:8px}
.pacetrack{position:relative;height:6px;border-radius:3px;background:var(--line);overflow:visible}
.pacetrack .fill{height:100%;border-radius:3px;background:var(--sage);transition:width .4s linear}
.pacetrack .planmark{position:absolute;top:-4px;width:2px;height:14px;background:var(--fg2);opacity:.8}
.paceword{font-size:15.5px;color:var(--fg2)}
.tile.pace.on .fill{background:var(--sage)}
.tile.pace.ahead .fill{background:#8FB4D6}
.tile.pace.behind .fill{background:var(--warn)}
.tile.pace.behind .paceword{color:var(--warn)}
.tile.pace.ahead .paceword{color:#B4CFE6}

/* ══ present: jump grid ═══════════════════════════════ */
.jumplayer{position:fixed;inset:0;background:rgba(6,8,9,.93);z-index:150;overflow-y:auto;padding:34px}
.jumpinner{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:16px;max-width:1400px;margin:0 auto}
.jumpcard{border:1px solid var(--line);background:var(--p1);border-radius:8px;padding:7px;cursor:pointer;text-align:left}
.jumpcard:hover{border-color:var(--sage)}
.jumpcard.on{border-color:var(--sage);box-shadow:0 0 0 1px var(--sage) inset}
.jumpcard .thumb{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:var(--bg)}
.jumpcard .thumb .mini{position:absolute;inset:0}
.jumpcard .cap{margin-top:7px;font-size:12.5px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ══ viewer: follow the presenter ═════════════════════ */
.livechip{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;
  gap:8px;border:1px solid var(--line2);background:var(--p2);color:var(--fg2);border-radius:20px;
  padding:7px 15px;font-size:13px;cursor:pointer}
.livechip:hover{border-color:var(--sage)}
.livechip.on{border-color:#2E6B4F;background:var(--mint2);color:var(--sage)}
.livechip .pip{width:7px;height:7px;border-radius:50%;background:#D98A8A;animation:pulse 1.6s infinite}
.livechip.on .pip{background:var(--sage)}


/* ══ roles and team ═══════════════════════════════════ */
.pill.role{text-transform:lowercase;letter-spacing:.04em}
.pill.role.owner{border-color:#E4CFA5;color:#7A5418}
.pill.role.editor{border-color:var(--sage);color:var(--sage)}
.pill.role.viewer{border-color:var(--line2);color:var(--faint)}
.avatar.viewing{opacity:.62;border-style:dashed}
.row.end{align-items:flex-end}
.histrow code{font-size:12.5px;color:var(--fg2);background:var(--bg);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px}
.seg.tiny button{text-transform:lowercase}

/* ══ render guard, keyboard reach, shortcut sheet ═════ */
.slidefail{display:flex;align-items:center;justify-content:center;background:#1B1E21;color:var(--faint);
  font-family:var(--sans);text-align:center;padding:80px}
.slidefail b{display:block;font-size:44px;color:var(--fg);margin-bottom:20px;font-family:var(--serif)}
.slidefail span{display:block;font-size:24px;line-height:1.5;max-width:1100px}
.minifail{display:flex;align-items:center;justify-content:center;background:#20242A;color:var(--faint);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.slide.editing .el:focus-visible{outline:3px solid var(--sage);outline-offset:2px}
.keycols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin:6px 0 18px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:12px 0 0;align-items:baseline}
.keys dt{margin:0}
.keys dd{margin:0;font-size:13px;color:var(--faint);line-height:1.4}
.keys kbd{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.03em;color:var(--fg2);
  border:1px solid var(--line2);border-radius:5px;padding:3px 7px;background:var(--p2);white-space:nowrap}

/* ══ dropping photographs onto a slide ════════════════ */
.slide.dropping{outline:3px dashed var(--sage);outline-offset:-8px}
.slide.dropping::after{content:'Drop to place — aim at a picture to replace it';color:#fff!important;
  position:absolute;left:50%;top:26px;transform:translateX(-50%);z-index:60;pointer-events:none;
  font-family:var(--sans);font-size:40px;letter-spacing:.02em;color:var(--ink);
  background:var(--sage);padding:18px 40px;border-radius:999px;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.el.drophit,img.drophit{outline:4px solid var(--sage);outline-offset:2px;
  box-shadow:0 0 0 9999px rgba(20,26,22,.28)}

/* ══ accounts, sharing and storage ════════════════════ */
.acctbtn{display:flex;align-items:center;gap:9px;background:none;border:1px solid transparent;
  border-radius:20px;padding:3px 11px 3px 3px;color:var(--fg2);cursor:pointer}
.acctbtn span:last-child{white-space:nowrap}
.acctbtn:hover{border-color:var(--line2)}
.acctbtn:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar.big{width:56px;height:56px;font-size:17px;border-width:2px}

.meter{display:flex;align-items:center;gap:9px}
.mbar{width:104px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.mbar i{display:block;height:100%;background:var(--sage);border-radius:3px}
.meter.hot .mbar i{background:var(--warn)}
.meter.hot .small{color:var(--warn)}

.linkish{background:none;border:none;color:var(--sage);font-size:13px;cursor:pointer;padding:0;
  text-decoration:underline;text-underline-offset:3px;font-family:inherit}
.linkish:hover{color:var(--fg)}
.linkish:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:2px}
.authalt{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:2px}
.okline{color:var(--sage);line-height:1.6;margin:0}
.breaklink{display:block;margin-top:7px;color:var(--sage);word-break:break-all;font-size:12px}
.block{display:block;margin-top:3px}
.toggle.tiny{gap:7px}
.toggle.tiny .track{width:34px;height:19px}
.toggle.tiny .track::after{width:13px;height:13px;top:2px;left:2px}
.toggle.tiny input:checked+.track::after{transform:translateX(15px)}
.pill.warn{border-color:#F0D9B5;color:var(--warn)}
.modal .sect+.sect{border-top:1px solid var(--line);padding-top:16px}
.modal.wide{max-width:720px}

/* alignment hairlines, shown only while something is being moved */
.snapguide{position:absolute;z-index:9;pointer-events:none;background:var(--sage);opacity:.9}
.snapguide.v{top:0;bottom:0}
.snapguide.h{left:0;right:0}

/* placeholders read as hints, never as filled values */
.input::placeholder{color:currentColor;opacity:.38;font-style:italic}

@media (max-height:720px){.spknext{display:none}}

/* only for screen readers */
.sronly{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* for people who have asked their device for less motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ══ present split button ═════════════════════════════ */
.split{display:flex;flex:0 0 auto}
.split .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.split .btn.caret{border-top-left-radius:0;border-bottom-left-radius:0;padding:8px 10px;
  border-left:1px solid rgba(255,255,255,.22)}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu kbd{font-family:var(--sans);font-size:11.5px;color:var(--faint);border:1px solid var(--line2);
  border-radius:4px;padding:1px 6px;white-space:nowrap}
.menu button:focus-visible{outline:2px solid var(--sage);outline-offset:-2px}

/* ══ smaller screens ══════════════════════════════════ */
@media (max-width:1280px){
  .editgrid{grid-template-columns:176px 1fr 300px}
}
@media (max-width:980px){
  .editgrid{grid-template-columns:132px 1fr 268px}
  .railrow>span:first-child{display:none}
  .railrow{justify-content:center}
  .editbar .title{font-size:17px}
}
@media (max-width:760px){
  /* phones: slides in a strip on top, the slide in the middle, settings underneath */
  .editgrid{grid-template-columns:1fr;grid-template-rows:118px minmax(220px,42vh) auto;overflow-y:auto}
  .rail{flex-direction:row;align-items:flex-start;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line)}
  .rail .railitem{flex:0 0 120px}
  .rail #addslide{flex:0 0 auto}
  .inspector{border-left:0;border-top:1px solid var(--line);overflow:visible}
  .editbar{padding:8px 12px;gap:8px}
  .editbar>.row:first-child{flex:1 1 100%}
  .editbar>.row:last-child{flex:1 1 100%;justify-content:flex-start}
  .editbar .split{order:-1}
  .editbar #editfs,.editbar #savestate{display:none}
  .topbar{padding:12px 16px;flex-wrap:wrap;gap:10px}
  .topbar .meter{display:none}
  .libwrap{padding:24px 16px 48px}
  .libinner h1{font-size:34px}
  .libinner>.spread{flex-wrap:wrap}
  .statusbar #stp{display:none}
  .presentbar{gap:6px;padding:6px 10px;max-width:calc(100vw - 16px);overflow-x:auto}
  .presentbar .sep{display:none}
  .menu{left:12px;right:12px;width:auto}
  .modal{padding:18px}
  .spkgrid{grid-template-columns:1fr;overflow-y:auto}
}

/* ══ the mascot ═══════════════════════════════════════ */
.mascot{display:inline-block;flex:0 0 auto;line-height:0}
.mascot.sm{width:36px;height:36px}
.mascot.mid{width:112px;height:112px;margin-bottom:4px}
.mascot svg{overflow:visible}
.mascot .m-fig{transform-box:fill-box;transform-origin:50% 100%;animation:m-bob 2.8s ease-in-out infinite}
.mascot .m-eyes{animation:m-look 7.5s ease-in-out infinite}
.mascot .m-eye{transform-box:fill-box;transform-origin:center;animation:m-blink 4.2s infinite}
.mascot .m-happy{opacity:0}
.mascot .m-shadow{transform-box:fill-box;transform-origin:center;animation:m-shadow 2.8s ease-in-out infinite}
.mascot:hover .m-fig,.brand:hover .m-fig,.artbrand:hover .m-fig{animation:m-hop .75s ease-out 1,m-bob 2.8s ease-in-out .75s infinite}
.mascot:hover .m-eye,.brand:hover .m-eye,.artbrand:hover .m-eye{opacity:0}
.mascot:hover .m-happy,.brand:hover .m-happy,.artbrand:hover .m-happy{opacity:1}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3%)}}
@keyframes m-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.88);opacity:.7}}
@keyframes m-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.1)}}
@keyframes m-look{0%,30%{transform:translateX(0)}38%,58%{transform:translateX(2.4px)}66%,80%{transform:translateX(-2px)}88%,100%{transform:translateX(0)}}
@keyframes m-hop{0%{transform:translateY(0) rotate(0)}22%{transform:translateY(-14%) rotate(-6deg)}44%{transform:translateY(0) rotate(5deg)}
  62%{transform:translateY(-7%) rotate(-3deg)}80%{transform:translateY(0) rotate(1deg)}100%{transform:translateY(0) rotate(0)}}
@media (prefers-reduced-motion:reduce){.mascot *{animation:none!important}}

/* a little more air in the light layout */
.editbar{background:var(--p1)}
.kicker{font-weight:700}
.libinner h1{letter-spacing:-.025em}
.inspector .sect .kicker,.sortbar .kicker{color:var(--sage)}
/* the editor toolbar stays on one line at laptop widths */
.editbar .btn{padding:7px 13px;font-size:13.5px}
.editbar .split .btn.caret{padding:7px 9px}
.editbar .title{min-width:100px}

/* the audience window, when it cannot show the deck */
.audmsg{margin:auto;max-width:520px;padding:48px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.audmsg h1{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--fg);margin:0}
.audmsg p{margin:0;font-size:16px;line-height:1.7;color:var(--fg2)}

/* ══ offline ══════════════════════════════════════════ */
.pill.offl{border-color:var(--sage);color:var(--sage);background:var(--mint2)}
.deckcard.notkept{opacity:.45}
.modal>.mascot.mid{align-self:center}

/* ══ folders ══════════════════════════════════════════ */
.folderbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:-6px}
.fchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--p1);color:var(--fg2);
  border-radius:999px;padding:7px 14px;font:600 13.5px var(--sans);cursor:pointer;transition:background .15s,border-color .15s}
.fchip i{font-style:normal;font-weight:700;font-size:11.5px;color:var(--faint);background:var(--bg);border-radius:999px;padding:1px 7px}
.fchip:hover{border-color:var(--sage)}
.fchip.on{background:var(--green);border-color:var(--green);color:#fff}
.fchip.on i{background:rgba(255,255,255,.18);color:#fff}
.fchip.over{border-color:var(--sage);background:var(--mint);box-shadow:0 0 0 3px var(--mint)}
.fchip.add{border-style:dashed;color:var(--sage)}
.fsel{display:inline-flex;gap:14px;margin-left:6px}
.icon.fold{display:inline-grid;place-items:center;padding:3px}
.deckcard.dragging{opacity:.45}
.menu.foldermenu{width:260px}
.menu.foldermenu [aria-current]{color:var(--sage);font-weight:700}