/* Bundled locally so the deck renders identically offline on any machine
   (Mac/Windows) with no network. Both are variable fonts — one woff2 covers
   the whole weight range. Paths are relative to this file (css/). */
@font-face{
  font-family:"Darker Grotesque";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("../assets/fonts/darker-grotesque-latin.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
}
:root{
  --bg:#F5F0E6; --surface:#FFFFFF; --ink:#000000; --body:#1A1A1A; --subtle:#3A3A3A;
  --brand:#DAA346; --brand-strong:#B8862E;
  --sec-brand:#DAA346; --sec-secondary:#DD644E; --sec-cyan:#A6FAFF; --sec-purple:#A388EE;
  --sec-green:#7CDB8A; --sec-pink:#FF99C8; --sec-blue:#88AAEE; --sec-yellow:#FFD166;
  --sec-white:#FFFFFF; --sec-dark:#000000;
  --s-2xs:1px 1px 0 #000; --s-xs:2px 2px 0 #000; --s-sm:3px 3px 0 #000; --s-md:4px 4px 0 #000;
  --s-lg:6px 6px 0 #000; --s-xl:8px 8px 0 #000; --s-2xl:12px 12px 0 #000;
  --font:"Darker Grotesque",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--body);font-family:var(--font);font-size:16px;-webkit-font-smoothing:antialiased}
button{font-family:var(--font);font-weight:700;cursor:pointer}
h1,h2,h3,h4{font-weight:800;color:var(--ink);margin:0;line-height:1}

#app{display:flex;flex-direction:column;height:100%}
#topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:2px solid #000;flex-wrap:wrap}
#topbar .title{font-weight:900;font-size:22px;letter-spacing:-.5px;text-transform:uppercase;padding-right:8px}
#topbar .deckname{font-size:15px;font-weight:600;border:2px solid #000;border-radius:6px;padding:6px 10px;background:var(--sec-yellow);box-shadow:var(--s-xs);min-width:170px;outline:none}
#topbar .demohost{font-size:13px;font-weight:600;font-family:var(--mono);border:2px solid #000;border-radius:6px;padding:6px 10px;background:var(--sec-cyan);box-shadow:var(--s-xs);min-width:220px;outline:none}
#topbar .demohost::placeholder{color:#000;opacity:.5;font-weight:600}
.spacer{flex:1}
.btn{border:2px solid #000;border-radius:6px;padding:8px 12px;font-size:14px;font-weight:700;background:var(--surface);box-shadow:var(--s-xs);transition:box-shadow .12s,transform .12s;color:#000}
.btn:hover{box-shadow:var(--s-sm)}
.btn:active{transform:translate(1px,1px);box-shadow:var(--s-xs)}
.btn.brand{background:var(--brand)} .btn.brand:hover{background:var(--brand-strong)}
.btn.dark{background:#000;color:#fff} .btn.green{background:var(--sec-green)}
.btn.pink{background:var(--sec-pink)} .btn.blue{background:var(--sec-blue)}
.btn.sm{padding:5px 8px;font-size:12px} .btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{background:#00000010;box-shadow:none}

#main{display:flex;flex:1;min-height:0}
#sidebar{width:210px;flex:none;background:var(--surface);border-right:2px solid #000;overflow-y:auto;padding:10px}
#sidebar h4{font-size:12px;text-transform:uppercase;letter-spacing:1px;margin:2px 0 10px}
.thumb{border:2px solid #000;border-radius:6px;background:var(--surface);box-shadow:var(--s-xs);margin-bottom:10px;overflow:hidden;cursor:grab;position:relative}
.thumb.active{box-shadow:var(--s-md);outline:3px solid var(--brand)}
.thumb.dragover{outline:3px dashed var(--sec-secondary)}
.thumb .tnum{position:absolute;top:0;left:0;background:#000;color:#fff;font-size:11px;font-weight:800;padding:1px 6px;border-bottom-right-radius:6px;z-index:2}
.thumb .tface{height:78px;padding:16px 8px 6px;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden}
.thumb .ttitle{font-size:13px;font-weight:800;line-height:1;color:#000;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.thumb .tacts{display:flex;border-top:2px solid #000}
.thumb .tacts button{flex:1;border:none;background:transparent;padding:4px;font-size:11px;border-radius:0}
.thumb .tacts button:hover{background:#00000012}
.thumb .tacts button+button{border-left:2px solid #000}
#addslide{width:100%}

#editor{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#canvaswrap{flex:1;overflow:auto;padding:26px;display:flex;justify-content:center;align-items:flex-start}
.slide{width:min(100%,980px);aspect-ratio:16/9;border:2px solid #000;border-radius:6px;box-shadow:var(--s-2xl);overflow:auto;position:relative;display:flex;flex-direction:column}
.slide-inner{padding:44px 52px;display:flex;flex-direction:column;gap:16px;min-height:100%}
.slide[data-dark="1"]{color:#fff}
.slide[data-dark="1"] h1,.slide[data-dark="1"] h2,.slide[data-dark="1"] h3{color:#fff}

.block{position:relative;border:2px dashed transparent;border-radius:6px;padding:4px}
#editor .block:hover{border-color:#00000040}
.block .bhandle{position:absolute;top:-2px;left:-30px;width:26px;height:100%;display:none;align-items:flex-start;justify-content:center;cursor:grab;color:#000}
#editor .block:hover .bhandle{display:flex}
.slide[data-dark="1"] .block .bhandle{color:#fff}
.bhandle span{background:#000;color:#fff;border-radius:4px;padding:2px 4px;font-size:11px;margin-top:4px}
.block .btools{position:absolute;top:-14px;right:-2px;display:none;gap:4px;z-index:5}
#editor .block:hover .btools{display:flex}
.btools button{border:2px solid #000;background:#fff;border-radius:4px;font-size:11px;padding:2px 6px;box-shadow:var(--s-2xs);color:#000}
.btools button:hover{background:var(--sec-yellow)}
.block.dragover{border-color:var(--sec-secondary);border-style:solid}
.block .rhandle{position:absolute;bottom:-11px;right:-11px;width:22px;height:22px;display:none;align-items:center;justify-content:center;cursor:nwse-resize;background:#fff;border:2px solid #000;border-radius:5px;box-shadow:var(--s-2xs);z-index:6;touch-action:none}
#editor .block:hover .rhandle{display:flex}
.rhandle:hover{background:var(--sec-yellow)}
.rhandle span{font-size:12px;font-weight:800;line-height:1;color:#000}
.block .scale-readout{position:absolute;bottom:-11px;right:20px;background:#000;color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;z-index:7;pointer-events:none;white-space:nowrap}

h1.bl{font-size:60px;letter-spacing:-1.5px;line-height:.95}
h2.bl{font-size:42px;letter-spacing:-1px;line-height:1}
h3.bl{font-size:29px;line-height:1.1}
.text.bl{font-size:21px;line-height:1.5;font-weight:500}
.small.bl{font-size:16px;line-height:1.5;color:var(--subtle)}
.slide[data-dark="1"] .small.bl{color:#d8d8d8}
ul.bl{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
ul.bl li{font-size:21px;line-height:1.35;font-weight:500;padding-left:34px;position:relative}
ul.bl li::before{content:"▪";position:absolute;left:6px;top:-2px;font-size:26px;color:var(--brand-strong)}
.slide[data-dark="1"] ul.bl li::before{color:var(--brand)}
pre.bl{font-family:var(--mono);font-size:16px;background:#000;color:#fff;border:2px solid #000;border-radius:6px;padding:16px 18px;overflow:auto;box-shadow:var(--s-sm);line-height:1.5}
.badge.bl{display:inline-block;align-self:flex-start;background:var(--brand);border:2px solid #000;border-radius:9999px;padding:4px 14px;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:1px;box-shadow:var(--s-xs);color:#000}
[contenteditable]{outline:none}
[contenteditable]:focus{background:#ffffff30}
.slide[data-dark="1"] [contenteditable]:focus{background:#ffffff18}

.media.bl{border:2px solid #000;border-radius:6px;overflow:hidden;box-shadow:var(--s-md);background:#000;position:relative}
.media.bl iframe,.media.bl video,.media.bl img{display:block;width:100%;border:0}
.media-guard{position:absolute;inset:0;z-index:3;cursor:pointer;display:flex;align-items:flex-start;justify-content:flex-end}
.media-guard .tag{background:#000;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-bottom-left-radius:6px;font-family:var(--mono)}
.media-ctrls{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap;font-family:var(--mono)}
.media-ctrls button{border:2px solid #000;background:#fff;border-radius:5px;padding:3px 8px;font-size:12px;font-weight:700;box-shadow:var(--s-2xs);cursor:pointer;color:#000}
.media-ctrls button:hover{background:var(--sec-yellow)}
.media-ctrls .val{min-width:44px;text-align:center;font-weight:700;font-size:12px}
.media-ctrls .sep{color:#999}
.slide[data-dark="1"] .media-ctrls .val{color:#fff}

/* Columns / grid */
.cols.bl{display:grid;gap:20px;align-items:start;width:100%}
.col-cell{display:flex;flex-direction:column;gap:12px;min-width:0}
#editor .col-cell.editable{border:2px dashed #00000030;border-radius:6px;padding:8px}
.col-add{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.col-add button{border:2px solid #000;background:#fff;border-radius:5px;padding:2px 7px;font-size:11px;font-weight:700;box-shadow:var(--s-2xs);cursor:pointer;font-family:var(--mono);color:#000}
.col-add button:hover{background:var(--sec-green)}

/* Text-level switcher (hover to reveal) */
.text-ctrls{display:none;gap:4px;align-items:center;margin-top:6px;flex-wrap:wrap;font-family:var(--mono)}
#editor .block:hover>.text-ctrls{display:flex}
.text-ctrls button{border:2px solid #000;background:#fff;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:700;box-shadow:var(--s-2xs);cursor:pointer;color:#000}
.text-ctrls button:hover{background:var(--sec-yellow)}
.text-ctrls button.on{background:#000;color:#fff}
.media-empty{padding:22px;color:#fff;font-family:var(--mono);font-size:13px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}

/* FE-parallel callout — "you already know this" analogy for frontend engineers */
.feparallel{display:block;border:2px solid #000;border-left:9px solid var(--brand-strong);border-radius:6px;background:#fff;box-shadow:var(--s-xs);padding:9px 14px;font-size:19px;font-weight:600;line-height:1.32;color:#000;align-self:flex-start}
.feparallel .lbl{display:block;font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--brand-strong);margin-bottom:3px}
.feparallel code{font-family:var(--mono);font-size:.82em;background:#000;color:var(--brand);padding:1px 6px;border-radius:4px}
.slide[data-dark="1"] .feparallel{background:#111;color:#fff;border-color:#fff;border-left-color:var(--brand)}
.slide[data-dark="1"] .feparallel .lbl{color:var(--brand)}

/* SVG figures */
.figure.bl{border:2px solid #000;border-radius:6px;background:#fff;box-shadow:var(--s-md);padding:12px 14px}
.figure.bl svg{display:block;width:100%;height:auto}

/* Act tracker */
.acttrack{position:absolute;top:12px;right:16px;z-index:6;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1px;display:flex;align-items:center;gap:7px;color:#000;background:#ffffffcc;border:2px solid #000;border-radius:9999px;padding:3px 11px;box-shadow:var(--s-2xs)}
.slide[data-dark="1"] .acttrack{color:#fff;background:#000000cc;border-color:#fff}
.acttrack .dot{width:9px;height:9px;border-radius:50%;border:2px solid currentColor;display:inline-block}
.acttrack .dot.on{background:currentColor}

/* Presenter-only (hidden in Present) */
.hidden-ribbon{position:absolute;top:0;left:0;right:0;z-index:6;background:#000;color:var(--brand);text-align:center;font-family:var(--mono);font-size:12px;font-weight:700;padding:4px;text-transform:uppercase;letter-spacing:1px;border-bottom:2px solid var(--brand)}
.thumb.ishidden{opacity:.55}
.thumb .thide{position:absolute;top:0;right:0;background:#000;color:var(--brand);font-size:9px;font-weight:800;padding:1px 5px;border-bottom-left-radius:6px;z-index:2;font-family:var(--mono)}

/* Quiz */
.quiz.bl{display:flex;flex-direction:column;gap:10px}
.qcard{border:2px solid #000;border-radius:6px;background:#fff;box-shadow:var(--s-sm);padding:10px 14px;cursor:pointer;transition:box-shadow .12s,transform .12s}
.qcard:hover{box-shadow:var(--s-md)} .qcard:active{transform:translate(1px,1px)}
.qcard .q{font-size:20px;font-weight:700;color:#000}
.qcard .qhint{font-size:12px;font-family:var(--mono);color:var(--subtle);margin-top:2px}
.qcard .a{display:none;margin-top:8px;font-size:16px;color:#000}
.qcard.revealed .a{display:block} .qcard.revealed .qhint{display:none}
.verdict{display:inline-block;font-weight:800;border:2px solid #000;border-radius:9999px;padding:1px 12px;margin-right:8px;font-size:14px;text-transform:uppercase}
.verdict.myth{background:var(--sec-secondary);color:#fff} .verdict.fact{background:var(--sec-green);color:#000}

#bottombar{border-top:2px solid #000;background:var(--surface);padding:10px 14px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
#addblocks{display:flex;gap:6px;flex-wrap:wrap;align-items:center;max-width:640px}
#addblocks .lab,.swlab{font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:800;margin-right:2px}
.addsep{display:inline-block;width:2px;height:20px;background:#0002;margin:0 4px;vertical-align:middle;border-radius:2px}
#pasteBtn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(16px);background:#000;color:#fff;border:2px solid #fff;border-radius:8px;padding:8px 16px;font-family:var(--mono);font-size:13px;font-weight:700;z-index:200;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--s-xl)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.swatches{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.sw{width:22px;height:22px;border:2px solid #000;border-radius:4px;box-shadow:var(--s-2xs);cursor:pointer}
.sw.active{outline:3px solid var(--brand);outline-offset:1px}
#notesbox{flex:1;min-width:240px}
#notesbox label{font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:800;display:block;margin-bottom:4px}
#notes{width:100%;height:66px;border:2px solid #000;border-radius:6px;padding:8px 10px;font-family:var(--font);font-size:14px;resize:vertical;box-shadow:var(--s-xs);background:var(--sec-cyan);outline:none}

#modal,#gmodal,#bgmodal{position:fixed;inset:0;background:#00000066;display:none;align-items:center;justify-content:center;z-index:50}
#modal.open,#gmodal.open,#bgmodal.open{display:flex}
.mcard input[type=range]{padding:6px 0;border:none;box-shadow:none;background:transparent;accent-color:var(--brand);cursor:pointer}
.mcard .mrow .spacer{flex:1}
.bgimg-btn{border:2px solid #000;background:#fff;border-radius:4px;height:24px;min-width:26px;padding:0 5px;font-size:13px;line-height:1;box-shadow:var(--s-2xs);cursor:pointer;margin-left:6px;color:#000}
.bgimg-btn:hover{background:var(--sec-yellow)}
.bgimg-btn.on{outline:3px solid var(--brand);outline-offset:1px}
.mcard{background:var(--surface);border:2px solid #000;border-radius:6px;box-shadow:var(--s-2xl);width:min(520px,92vw);padding:22px;max-height:90vh;overflow:auto}
.mcard h3{font-size:24px;margin-bottom:14px;text-transform:uppercase}
.mcard label{font-size:14px;font-weight:600;display:block;margin:12px 0 6px}
.mcard input,.mcard select{width:100%;border:2px solid #000;border-radius:6px;padding:10px 12px;font-family:var(--font);font-size:15px;box-shadow:var(--s-xs);outline:none;background:#fff}
.mcard input:focus{border-width:3px}
.mcard .mrow{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}
.hint{font-size:13px;color:var(--subtle);margin-top:6px;font-family:var(--mono)}
.glist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gcell{border:2px solid #000;border-radius:6px;box-shadow:var(--s-xs);background:#fff;padding:8px;cursor:pointer;transition:box-shadow .12s,transform .12s}
.gcell:hover{box-shadow:var(--s-md);transform:translate(-1px,-1px)}
.gcell svg{display:block;width:100%;height:70px}
.gcell .glabel{font-size:12px;font-weight:700;text-align:center;margin-top:6px;text-transform:uppercase;letter-spacing:.5px}

#present{position:fixed;inset:0;background:#000;display:none;z-index:100;flex-direction:column}
#present.open{display:flex}
#stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
#present .slide{box-shadow:none;border:none;border-radius:0;width:100vw;height:100vh;max-width:100vw;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden}
#present .slide-inner{width:1000px;min-height:0;padding:24px 44px;gap:16px;transform-origin:top center;will-change:transform}
#present .block{border-color:transparent!important}
#pbar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:8px 16px;background:#000;color:#fff;border-top:2px solid #fff;font-family:var(--mono);font-size:13px;transition:opacity .3s}
#pbar.hide{opacity:0;pointer-events:none}
#pbar .pbtn{border:2px solid #fff;background:#000;color:#fff;border-radius:6px;padding:5px 10px;font-size:12px}
#pbar .pbtn:hover{background:#fff;color:#000}
#pnotes{position:fixed;bottom:44px;left:16px;right:16px;max-height:34vh;overflow:auto;background:var(--sec-yellow);border:2px solid #000;border-radius:6px;padding:14px 16px;font-size:16px;line-height:1.5;box-shadow:var(--s-xl);display:none;white-space:pre-wrap}
#pnotes.show{display:block}
#pnotes b{background:#000;color:#fff;padding:1px 6px;border-radius:4px;font-family:var(--mono);font-size:13px}
.pcount{font-weight:700}
.pprog{flex:1;height:8px;background:#333;border:2px solid #fff;border-radius:9999px;overflow:hidden}
.pprog i{display:block;height:100%;background:var(--brand)}

@media (max-width:820px){
  #sidebar{display:none}
  h1.bl{font-size:38px} h2.bl{font-size:28px} .text.bl{font-size:18px} ul.bl li{font-size:18px}
  .slide-inner{padding:26px 28px} .glist{grid-template-columns:repeat(2,1fr)}
}