:root{
  --bg:#0B0D0F; --p1:#0E1114; --p2:#111417; --line:#1B1F23; --line2:#262B30;
  --fg:#E8EBED; --fg2:#B6BEC4; --mute:#8A939B; --faint:#6B747C;
  --sage:#8FBCA4; --green:#1E4034; --green2:#2A5745; --warn:#E0B48A;
  --gold:#B68235;
  --ink:#10201A;   /* dark text, for the few places something sits on a pale fill */
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Raleway','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{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:#B6D6C3}
::-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;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:5px;padding:3px 8px;font-size:11.5px;color:var(--mute);white-space:nowrap}
.pill.on{border-color:#2E6B4F;color:#B6D6C3}

.btn{border:1px solid var(--line2);background:none;color:var(--fg2);font-size:14px;padding:8px 14px;
  border-radius:7px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--sage);color:var(--fg)}
.btn.primary{border:none;background:var(--green);color:#DCEAE1;font-weight:600}
.btn.primary:hover{background:var(--green2)}
.btn.ghost{border:none;color:var(--mute)} .btn.ghost:hover{color:var(--sage)}
.btn.danger:hover{border-color:#D98A8A;color:#D98A8A}
.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:#565F66;font-size:13px;cursor:pointer;padding:1px 4px}
.icon:hover{color:var(--sage)}
.input{background:var(--bg);border:1px solid var(--line2);border-radius:7px;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:#D98A8A}
.warnnote{border:1px solid #4A3222;background:#2A1F18;border-radius:7px;padding:10px 12px;color:var(--warn)}

/* ══ sign in ══════════════════════════════════════════
   An editorial split: a colophon page on the left, and on the right a form
   set like the head of a chapter — rules instead of boxes. */
#login{min-height:100%;display:grid;grid-template-columns:1.06fr .94fr;align-items:stretch;overflow-y:auto}
.loginart{position:relative;overflow:hidden;background:#0B1410;border-right:1px solid var(--line);
  padding:54px 58px;display:flex;flex-direction:column;justify-content:space-between;gap:44px;
  min-height:100%}
/* the ground: a warm centre falling away to the corners, over a faint ruling */
.loginart::before{content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(115% 85% at 12% 4%,#16281F 0%,#0D1813 52%,#080F0C 100%)}
.loginart::after{content:'';position:absolute;inset:0;z-index:0;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(143,188,164,.05) 0 1px,transparent 1px 34px)}
.loginart>*{position:relative;z-index:2}
.artbrand{display:flex;align-items:center;gap:11px}
.artbrand .brandname{font-family:var(--serif);font-size:17px;letter-spacing:.01em}
.artkicker{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-variant-numeric:tabular-nums;margin-bottom:20px}
.artline{font-family:var(--serif);font-size:clamp(38px,4.1vw,60px);line-height:1.06;font-weight:400;
  letter-spacing:-.018em;margin:0 0 22px;color:var(--fg);text-wrap:balance}
.artline em{font-style:italic;color:var(--sage)}
.artsub{margin:0;max-width:38ch;font-size:15px;line-height:1.8;color:var(--fg2)}
.artrules{margin-top:40px;max-width:44ch}
.artrules div{display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:baseline;padding:14px 0;
  border-top:1px solid rgba(143,188,164,.14);font-size:13.5px;line-height:1.55;color:var(--mute)}
.artrules div:last-child{border-bottom:1px solid rgba(143,188,164,.14)}
.artrules .n{color:var(--gold);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.1em}
.artfoot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
/* a tipped-in plate, drawn in hairlines rather than pictured */
.artplate{position:absolute;right:-118px;bottom:-104px;width:380px;height:260px;z-index:1;opacity:.6;
  pointer-events:none}
.artplate i{position:absolute;display:block;border:1px solid rgba(143,188,164,.16);border-radius:3px;
  width:288px;height:162px;background:linear-gradient(150deg,#0F1D17,#0A130F)}
.artplate i:nth-child(1){right:74px;bottom:70px;opacity:.5}
.artplate i:nth-child(2){right:60px;bottom:52px;opacity:.75}
.artplate i:nth-child(3){right:46px;bottom:34px;border-color:rgba(182,130,53,.34)}

.loginpane{display:flex;align-items:center;justify-content:center;padding:48px 36px}
#login .card{width:398px;max-width:100%;border:none;background:none;border-radius:0;padding:0;
  display:flex;flex-direction:column;gap:18px}
#login .kicker{color:var(--gold);letter-spacing:.2em}
#login h1{font-family:var(--serif);font-size:clamp(34px,3.2vw,44px);font-weight:400;
  margin:-2px 0 2px;letter-spacing:-.018em;line-height:1.05}
#login h1::after{content:'';display:block;width:44px;height:1px;background:var(--gold);margin-top:20px}
/* fields as ruled lines, in the manner of a printed form */
#login .f{gap:7px}
#login .f>span,#login label.f{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
#login .input{background:transparent;border:none;border-bottom:1px solid var(--line2);border-radius:0;
  padding:9px 2px;height:auto;font-size:15px;text-transform:none;letter-spacing:normal;
  color:var(--fg);transition:border-color .16s ease}
#login .input:hover{border-bottom-color:#3A4740}
#login .input:focus,#login .input:focus-visible{outline:none;border-bottom-color:var(--sage);
  box-shadow:0 1px 0 0 var(--sage)}
#login .input[readonly]{color:var(--fg2)}
#login .card .btn.big{margin-top:10px;width:100%;justify-content:center;
  border:1px solid var(--gold);color:#E7C89B;background:transparent;letter-spacing:.04em}
#login .card .btn.big:hover{background:rgba(182,130,53,.12);color:#F2DCBB;border-color:#D2A05C}
#login .card .btn.big:active{background:rgba(182,130,53,.2)}
#login .authalt{padding-top:16px;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:38px 46px;gap:26px}
  .artsub{display:none}
  .artrules{margin-top:24px}
  .artrules div{padding:10px 0}
  .artplate{display:none}
}
@media (max-height:600px){
  .artrules,.artkicker{display:none}
}
@media (max-width:880px){
  #login{grid-template-columns:1fr}
  .loginart{display:none}
}
.brand{display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;background:var(--sage);border-radius:50%}
.brandname{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;border-bottom:1px solid var(--line)}
.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:42px;font-weight:600;margin:0;letter-spacing:-.015em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:26px}
.deckcard{border:1px solid var(--line);background:var(--p2);border-radius:11px;overflow:hidden;cursor:pointer}
.deckcard:hover{border-color:#3A4249;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.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:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emptybig{border:1px dashed var(--line2);border-radius:12px;padding:70px 40px;display:flex;
  flex-direction:column;align-items:center;gap:14px;text-align:center}
.emptybig .h2{font-size:31px}.mw44{max-width:44ch}
.panel{border:1px solid var(--line);border-radius:12px;background:var(--p1);overflow:hidden}
.issue{display:flex;gap:14px;align-items:flex-start;padding:15px 20px;border-bottom:1px solid #15181B}
.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:#9DB8E0}.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:5px}

.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}
.editbar>.row.min0{overflow:hidden}
.editbar .title{min-width:0}
.editbar .title{font-family:var(--serif);font-size:20px;font-weight:600;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:#2A1F18;
  border-bottom:1px solid #4A3222;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:6px;
  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(11,13,15,.6);
  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:#0B0D0F;font-size:9px;font-weight:700;display:grid;place-items:center;padding:0 3px}
.canvaswrap{position:relative;overflow:auto;background:#08090B;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;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.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:20px;padding:5px 13px}
.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:26px;height:26px;border-radius:5px;border:1px solid var(--line2);cursor:pointer}
.sw.on{border:2px solid var(--fg)}
.sw.none{background:repeating-linear-gradient(45deg,#23282D,#23282D 5px,#14171A 5px,#14171A 10px)}
.empty{border:1px dashed var(--line2);border-radius:9px;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:#C8D2D8;
  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(5,6,7,.66);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(--line2);border-radius:14px;z-index:50;
  padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal .h3{font-size:24px}
.menu{position:fixed;top:56px;right:18px;width:310px;background:var(--p2);border:1px solid var(--line2);
  border-radius:11px;z-index:50;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:7px;cursor:pointer}
.menu button:hover{background:var(--line)}
.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:#2E6B4F;background:#131A17}
.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;gap:22px;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)}
.notesbox{flex:1;border:1px solid var(--line);background:var(--p1);border-radius:9px;padding:16px 18px;
  overflow-y:auto;display:flex;flex-direction:column;gap:9px;min-height:0}
.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:var(--p2);
  border:1px solid var(--line2);border-radius:8px;padding:13px 19px;font-size:14px;z-index:300;
  box-shadow:0 12px 30px rgba(0,0,0,.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 #4A3222;background:#2A1F18;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:#16241D;border-color:#2E6B4F}
.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:7px;overflow:hidden}
.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:#16241D;color:var(--sage);font-weight:600}

/* 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:8px;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:9px;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:9px;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:9px;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:9px;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:#2E6B4F;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:8px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.55)}
.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:#16241D;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:#16241D;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:#7A5E22;color:#D8B36A}
.pill.role.editor{border-color:#2E6B4F;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';
  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:#4A3222;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}