/* ============================================================
   Introduction to Claude Desktop — MOE PMO Training
   Single-page app engine styles.
   Design tokens ported verbatim from the original reveal.js deck
   (legacy/index.html) — same palette, same component vocabulary.
   ============================================================ */

:root{
  --navy:#0a2a4f;
  --navy-2:#143a68;
  --navy-deep:#06203d;
  --ink:#17222e;
  --muted:#5a6a78;
  --line:#e4e9ef;
  --bg:#ffffff;
  --paper:#fbfaf7;
  --bg-soft:#f1f5f9;
  --accent:#0e7480;
  --accent-bright:#7fd4e0;
  --gold:#b08322;
  --gold-soft:#e4d3a6;
  --amber:#a9710c;
  --amber-bg:#fbf2e0;
  --green:#1f7a44;
  --green-bg:#e9f5ed;
  --red:#a32a2a;
  --red-bg:#f9ebeb;
  --shadow-sm:0 1px 2px rgba(8,32,61,.05), 0 3px 10px rgba(8,32,61,.05);
  --shadow-md:0 12px 32px rgba(8,32,61,.11), 0 2px 6px rgba(8,32,61,.06);
  --surface-2:var(--bg-soft);
  --border:var(--line);
  --border-strong:#c7d2de;
  --text:var(--ink);
  --text-muted:var(--muted);
}

[data-theme="dark"]{
  --bg:#0d1620; --paper:#0d1620; --bg-soft:#152233; --line:#243347;
  --ink:#e7edf5; --muted:#9db0c4; --border:#243347; --border-strong:#33475f;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 12px 32px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:"Public Sans","Segoe UI",system-ui,sans-serif;
  font-size:16px; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--navy); text-transform:none; line-height:1.13; margin:0 0 .5em; font-weight:600;}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3{color:#bcd4f2;}
h1,h2{font-family:"Fraunces","Georgia",serif; font-weight:600; letter-spacing:-.015em;}
h3,h4{font-family:"Public Sans",system-ui,sans-serif; font-weight:700; letter-spacing:-.005em;}
h1{font-size:2.05em;} h2{font-size:1.5em; line-height:1.15; display:flex; align-items:center; gap:.42em;}
h2 .ico{color:var(--accent); width:.9em; height:.9em;}
h3{font-size:1.05em; color:var(--navy-2);}
p,li{line-height:1.55;}
strong{color:var(--navy);}
[data-theme="dark"] strong{color:#bcd4f2;}
a{color:var(--accent);font-weight:600;text-underline-offset:2px;}
a:hover{color:var(--navy-2);}
[data-theme="dark"] a{color:var(--accent-bright);}
[data-theme="dark"] a:hover{color:#fff;}
ul,ol{margin:0 0 0 1.1em; padding:0;}
li{margin-bottom:.4em;}

svg.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.13em;flex:0 0 auto;}

.eyebrow{font-size:.72em;letter-spacing:2.6px;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:.7em;}

.cols{display:flex;gap:24px;flex-wrap:wrap;}
.col{flex:1;min-width:240px;}
.card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px 22px;box-shadow:var(--shadow-sm);}
.card h3{margin-top:0;display:flex;align-items:center;gap:.4em;}
.card h3 .ico{width:1em;height:1em;color:var(--accent);}
.card.tip{background:var(--green-bg);border-color:#c7e6d3;}
.card.tip h3 .ico{color:var(--green);}
.card.warn{background:var(--amber-bg);border-color:#ecd9af;}
.card.warn h3 .ico{color:var(--amber);}
.card.bad{background:var(--red-bg);border-color:#eecccc;}
.card.bad h3 .ico{color:var(--red);}
[data-theme="dark"] .card{background:var(--bg-soft);}
[data-theme="dark"] .card.tip{background:rgba(31,122,68,.15);}
[data-theme="dark"] .card.warn{background:rgba(169,113,12,.15);}
[data-theme="dark"] .card.bad{background:rgba(163,42,42,.15);}
[data-theme="dark"] .checklist li.done{background:rgba(31,122,68,.2);}

.pill{display:inline-block;font-size:.7em;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:var(--bg-soft);color:var(--navy);}

.agenda{list-style:none;margin-left:0;display:flex;flex-direction:column;gap:7px;}
.agenda li{
  display:grid;grid-template-columns:21px 108px 1fr;column-gap:14px;align-items:start;
  padding:11px 14px;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
}
.agenda li:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.agenda li.is-break{background:var(--bg-soft);border-style:dashed;}
[data-theme="dark"] .agenda li{background:var(--bg-soft);}
[data-theme="dark"] .agenda li.is-break{background:rgba(255,255,255,.03);}
.agenda .ico{color:var(--accent);width:21px;height:21px;margin-top:3px;}
.agenda .t{color:var(--accent);font-weight:700;white-space:nowrap;}
.agenda .x{color:var(--ink);}
@media (max-width:640px){.agenda li{grid-template-columns:21px 1fr;}.agenda .t{grid-column:2;white-space:normal;}.agenda .x{grid-column:2;}}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:.4em;}
.chip{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:.85em;color:var(--ink);}

.iconlist{list-style:none;margin-left:0;}
.iconlist li{display:flex;gap:.55em;align-items:flex-start;}
.iconlist li .ico{color:var(--accent);width:1.05em;height:1.05em;margin-top:.2em;flex:0 0 auto;}
.card.tip .iconlist li .ico{color:var(--green);}
.card.warn .iconlist li .ico{color:var(--amber);}
.card.bad .iconlist li .ico{color:var(--red);}

/* Definition list — icon, then two invisible columns: a fixed-width
   term/label and a flexible description. Use instead of .iconlist when a
   list item pairs a short bold label with a longer explanation, so the
   label doesn't wrap raggedly into the description text. */
.deflist{list-style:none;margin:0;padding:0;}
.deflist li{display:grid;grid-template-columns:1.3em minmax(92px,120px) 1fr;column-gap:.6em;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);}
.deflist li:last-child{border-bottom:none;}
.deflist li .ico{align-self:start;margin-top:.3em;color:var(--accent);width:1.05em;height:1.05em;}
.deflist li strong{color:var(--navy);}
[data-theme="dark"] .deflist li strong{color:#bcd4f2;}
.deflist li span{color:var(--ink);}
@media (max-width:640px){.deflist li{grid-template-columns:1.3em 1fr;}.deflist li strong{grid-column:2;}.deflist li span{grid-column:2;}}

.example{background:linear-gradient(160deg,#0d2138,#0a1a2e);color:#e8eef6;border-radius:12px;padding:16px 20px;font-family:"IBM Plex Mono","SF Mono",monospace;font-size:.82em;line-height:1.55;box-shadow:var(--shadow-md);border:1px solid rgba(127,212,224,.14);}
.example .lbl{color:var(--accent-bright);font-weight:700;display:block;margin-bottom:5px;font-family:"Public Sans",sans-serif;letter-spacing:1.5px;font-size:.82em;text-transform:uppercase;}
.example + .example{margin-top:14px;}
.example-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px;}
.example-hd .lbl{margin-bottom:0;}
.example-hd-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.lang-toggle{display:flex;gap:2px;background:#ffffff14;border-radius:8px;padding:2px;flex:0 0 auto;}
.lang-btn{background:transparent;border:none;color:#b9c8d8;font-family:"Public Sans",sans-serif;font-size:.72em;font-weight:700;letter-spacing:.4px;padding:3px 10px;border-radius:6px;cursor:pointer;transition:background .15s,color .15s;}
.lang-btn.active{background:var(--accent-bright);color:#0a1a2e;}
.example-copy-btn{background:#ffffff14;border:1px solid #ffffff2e;color:#e8eef6;font-family:"Public Sans",sans-serif;font-size:.72em;font-weight:700;letter-spacing:.3px;padding:4px 11px;border-radius:6px;cursor:pointer;transition:background .15s;flex:0 0 auto;}
.example-copy-btn:hover{background:#ffffff26;}
.example-body{white-space:normal;}

.note{font-size:.85em;color:var(--muted);margin-top:.8em;}
.kicker{color:var(--accent);font-weight:700;font-size:.85em;letter-spacing:1px;text-transform:uppercase;}
.big-q{font-size:1.3em;color:var(--navy);font-weight:600;}

table.simple{width:100%;border-collapse:collapse;font-size:.9em;}
table.simple th,table.simple td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
table.simple th{color:var(--navy);background:var(--bg-soft);}
table.simple td .ico{color:var(--accent);width:1em;height:1em;margin-right:.45em;vertical-align:-.16em;}

.kbd{font-family:"IBM Plex Mono","SF Mono",monospace;font-size:.88em;background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:1px 7px;color:var(--navy);}
[data-theme="dark"] .kbd{background:rgba(255,255,255,.08);color:#bcd4f2;}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--paper);}

.topbar{
  display:flex;align-items:center;gap:14px;padding:0 18px;height:56px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--navy-deep),var(--navy) 55%,#0e3a6b);
  color:#fff; box-shadow:var(--shadow-sm); position:relative; z-index:40;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;overflow:hidden;}
.brand img{height:52px;width:auto;max-width:170px;object-fit:contain;border-radius:6px;background:#fff;padding:4px 8px;flex:0 0 auto;}
.brand-name{font-family:"Fraunces",serif;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-name .tn-sep{color:#7fa5c9;font-weight:400;margin:0 .35em;}
.brand-name .tn{color:#cfe0f4;font-weight:500;font-size:.88em;}
.brand-tag{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-soft);white-space:nowrap;}
.topbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.tb-btn{background:#ffffff1a;border:1px solid #ffffff33;color:#fff;font-size:12px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .15s;}
.tb-btn:hover{background:#ffffff33;}
.tb-btn svg{width:14px;height:14px;}

.hamburger{width:36px;height:36px;border-radius:8px;border:1px solid #ffffff33;background:#ffffff1a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;flex:0 0 auto;}
.hamburger span{width:16px;height:2px;background:#fff;border-radius:2px;transition:.2s;}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.side-panel{
  position:fixed;top:56px;right:-360px;width:340px;max-width:92vw;height:calc(100% - 56px);
  background:var(--bg);border-left:1px solid var(--line);box-shadow:-8px 0 30px rgba(8,32,61,.15);
  z-index:50;transition:right .25s ease;overflow-y:auto;padding:16px;
}
.side-panel.open{right:0;}
.panel-hd{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:9px 4px 7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);user-select:none;border:none;background:none;width:100%;text-align:left;}
.panel-hd:hover{color:var(--ink);}
.panel-chevron{transition:transform .2s;font-style:normal;font-size:11px;opacity:.6;}
.panel-hd.collapsed .panel-chevron{transform:rotate(-90deg);}
.panel-hd.collapsed + .panel-body{display:none;}

#navList{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.nav-topic{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border:none;border-radius:8px;background:transparent;color:var(--ink);font-size:13px;cursor:pointer;line-height:1.3;transition:background .15s;}
.nav-topic:hover{background:var(--bg-soft);}
.nav-topic.active{background:var(--navy);color:#fff;font-weight:600;}
.nav-num{color:var(--accent);font-weight:700;font-size:11px;min-width:20px;flex:0 0 auto;}
.nav-topic.active .nav-num{color:var(--gold-soft);}
.nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.nav-done{width:14px;height:14px;flex:0 0 auto;color:var(--green);}

.tweak-row{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;gap:10px;}
.tweak-options{display:flex;gap:4px;}
.tweak-options button{border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;cursor:pointer;}
.tweak-options button.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.toggle-switch{position:relative;display:inline-block;width:38px;height:20px;flex:0 0 auto;}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:20px;transition:.2s;}
.toggle-track:before{content:"";position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.toggle-switch input:checked + .toggle-track{background:var(--accent);}
.toggle-switch input:checked + .toggle-track:before{transform:translateX(18px);}

/* cheatsheet panel content */
.cheat-block{margin-bottom:16px;}
.cheat-block h4{font-size:13px;margin:0 0 6px;color:var(--navy-2);}
.cheat-block .example{font-size:.78em;padding:12px 14px;}

/* ============================================================
   STAGE / SLIDES
   ============================================================ */
.main{flex:1;overflow:hidden;position:relative;background:var(--paper);}
.stage{height:100%;overflow:hidden;position:relative;}
.slide{
  position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;
  padding:44px 6vw 30px; overflow-y:auto; opacity:0; pointer-events:none;
  transform:translateY(14px); transition:opacity .3s ease, transform .3s ease;
}
.slide.active{opacity:1;pointer-events:auto;transform:translateY(0);}
.slide.exit{opacity:0;transform:translateY(-10px);}
.slide-inner{width:100%;max-width:980px;margin:0 auto;}

/* Hero/section slides: centre the text block in the full-bleed canvas
   instead of top-aligning — avoids a dead zone of empty background below. */
.slide.k-title,.slide.k-divider,.slide.k-break{align-items:center;}
.slide.k-title .slide-inner,.slide.k-divider .slide-inner,.slide.k-break .slide-inner{max-width:760px;}

@keyframes riseIn{from{opacity:0;transform:translateY(15px);}to{opacity:1;transform:translateY(0);}}
.slide.active .reveal{animation:riseIn .5s ease both;}
.slide.active .reveal:nth-child(1){animation-delay:0s;}
.slide.active .reveal:nth-child(2){animation-delay:.06s;}
.slide.active .reveal:nth-child(3){animation-delay:.12s;}
.slide.active .reveal:nth-child(4){animation-delay:.18s;}
.slide.active .reveal:nth-child(n+5){animation-delay:.24s;}
@media (prefers-reduced-motion: reduce){.slide.active .reveal{animation:none;}}

.title-slide{position:relative;text-align:center;}
.title-slide .title-eyebrow{font-size:.8em;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold-soft);font-weight:700;margin-bottom:.9em;}
.title-slide h1{font-size:2.6em;letter-spacing:-.02em;color:var(--navy);}
[data-theme="dark"] .title-slide h1{color:#e7edf5;}
.title-slide p{color:var(--muted);font-size:1.05em;max-width:600px;margin:0 auto;}
.title-slide .title-art{margin:0 auto 22px;width:110px;height:110px;color:var(--accent);}
.title-fg{position:relative;z-index:1;}

.divider-wrap{position:relative;}
.divider-fg{position:relative;z-index:1;}
.divider-num{font-family:"Fraunces",serif;font-size:5em;font-weight:600;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--gold-soft);opacity:.7;margin-bottom:6px;}

.break-fg{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.break-emoji{font-size:3.6em;line-height:1;}
.break-fg h1{color:#fff;}
.break-fg p{color:#cfe0f4;font-size:1.05em;max-width:520px;}

/* three.js background canvas — title/divider/break slides only.
   The foreground wrapper is made static on these slides so the mount's
   containing block becomes the .slide itself → full-bleed canvas. */
.slide.k-title .title-slide,.slide.k-divider .divider-wrap,.slide.k-break .break-fg{position:static;}
.bg3d-mount{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg3d-canvas{display:block;width:100%;height:100%;opacity:.85;}
[data-motion="reduced"] .bg3d-mount{display:none;}

.obj-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.obj{display:flex;align-items:flex-start;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow-sm);}
.obj-num{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;}

/* checklist / exercise slides */
.ex-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.ex-badge{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;padding:4px 12px;border-radius:20px;text-transform:uppercase;}
.ex-cap-badge{display:inline-flex;align-items:center;gap:5px;background:var(--bg);color:var(--accent);border:1.5px solid var(--accent);font-size:11px;font-weight:700;letter-spacing:.3px;padding:3px 11px;border-radius:20px;}
.ex-cap-badge .ico{width:.95em;height:.95em;}
[data-theme="dark"] .ex-cap-badge{background:transparent;color:var(--accent-bright);border-color:var(--accent-bright);}
.ex-ws-badge{display:inline-flex;align-items:center;gap:5px;background:var(--bg);color:var(--ink-soft, var(--ink));border:1.5px dashed var(--border-strong);font-size:11px;font-weight:600;letter-spacing:.3px;padding:3px 11px;border-radius:20px;}
.ex-ws-badge .ico{width:.95em;height:.95em;}
[data-theme="dark"] .ex-ws-badge{background:transparent;}

/* compact capability overview cards */
.cap-cards{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;}
.cap-card{flex:1;min-width:230px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm);}
.cap-card h3{margin-top:0;font-size:1em;display:flex;align-items:center;gap:.4em;}
.cap-card h3 .ico{color:var(--accent);width:1.05em;height:1.05em;}
.cap-card p{font-size:.9em;color:var(--ink);margin-bottom:0;}
[data-theme="dark"] .cap-card{background:var(--bg-soft);}

/* embedded exercise blocks — when an exercise is merged directly into a
   content slide (explainer + hands-on practice on the same page), each
   gets its own visually separated block instead of a full slide switch. */
.ex-block{margin-top:26px;padding-top:22px;border-top:2px dashed var(--line);}
.ex-block:first-of-type{margin-top:24px;}
.ex-block h2{font-size:1.25em;}
.ex-meta{font-size:.82em;color:var(--ink);opacity:.65;font-style:italic;margin:4px 0 12px;}
.ex-block .card{margin-top:0;}
.checklist{list-style:none;padding:0;margin:14px 0;}
.checklist li{display:flex;align-items:flex-start;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:8px;cursor:pointer;transition:border-color .15s, transform .15s;}
.checklist li:hover{border-color:var(--accent);}
.checklist .ck{width:20px;height:20px;border-radius:6px;border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:transparent;font-size:13px;font-weight:700;flex:0 0 auto;transition:.15s;}
.checklist li.done{border-color:var(--green);background:var(--green-bg);}
.checklist li.done .ck{background:var(--green);border-color:var(--green);color:#fff;}
.ckl-progress{font-size:.85em;color:var(--muted);margin-top:6px;}

/* ============================================================
   NAV BAR / PROGRESS / DOTS
   ============================================================ */
.progress{height:4px;background:var(--line);flex:0 0 auto;}
.pfill{height:100%;background:linear-gradient(90deg,var(--navy),var(--accent));transition:width .3s ease;}

.navbar{display:flex;align-items:center;gap:14px;padding:10px 18px;flex:0 0 auto;border-top:1px solid var(--line);background:var(--bg);}
.btn{border:none;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s, opacity .15s;}
.btn.ghost{background:var(--bg-soft);color:var(--ink);}
.btn.ghost:hover{background:var(--line);}
.btn.ghost:disabled{opacity:.4;cursor:default;}
.btn.primary{background:var(--navy);color:#fff;}
.btn.primary:hover{background:var(--navy-2);}
.nav-spacer{flex:1;}
.slide-count{font-size:12px;color:var(--muted);font-weight:600;}

@media (max-width:760px){
  .brand-tag{display:none;}
  .brand-name .tn-sep,.brand-name .tn{display:none;}
  .slide{padding:30px 5vw 24px;}
}

/* Accessibility tweaks */
[data-dyslexia="on"] .stage{font-family:'Lexend',sans-serif;}
[data-fontsize="large"] .stage{font-size:112%;}
[data-fontsize="xlarge"] .stage{font-size:126%;}
#colourOverlay{position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.13;display:none;}
[data-colour="red"] #colourOverlay{display:block;background:#f00;}
[data-colour="green"] #colourOverlay{display:block;background:#0c0;}
[data-colour="blue"] #colourOverlay{display:block;background:#06f;}
[data-colour="yellow"] #colourOverlay{display:block;background:#ff0;}
[data-colour="hc"] .app{filter:contrast(155%) brightness(.9);}

.brandfoot{font-size:11px;color:var(--muted);margin-top:1.4em;letter-spacing:.3px;}

/* ============================================================
   HERO & SECTION SLIDES — full-bleed navy, constellation glows
   ============================================================ */
.slide.k-title,.slide.k-divider,.slide.k-break{
  background:linear-gradient(150deg,var(--navy-deep),var(--navy) 55%,#0e3a6b);
}
.slide.k-title::after,.slide.k-divider::after,.slide.k-break::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 480px at 18% -5%, rgba(127,212,224,.16), transparent 60%);
}
.slide.k-title h1,.slide.k-divider h1,.slide.k-break h1{color:#fff;}
.slide.k-title .title-eyebrow{color:var(--gold-soft);}
.slide.k-divider .eyebrow{color:var(--accent-bright);}
.slide.k-title p,.slide.k-divider p{color:#cfe0f4 !important;}
.slide.k-title .note{color:#a3c2e4 !important;}
.slide.k-divider .divider-num{-webkit-text-stroke:1.5px var(--gold-soft);opacity:.85;font-size:6em;}
.slide.k-title .title-art{color:var(--accent-bright);}

/* card hover lift (from the original deck) */
.card{transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
@media (prefers-reduced-motion: reduce){.card,.card:hover{transform:none;transition:none;}}

/* ============================================================
   QUIZ (Knowledge Check)
   ============================================================ */
.quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;}
@media (max-width:760px){.quiz-grid{grid-template-columns:1fr;}}
.quiz{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm);}
[data-theme="dark"] .quiz{background:var(--bg-soft);}
.quiz h4{display:flex;gap:8px;margin:0 0 10px;font-size:.95em;align-items:flex-start;}
.quiz-num{background:var(--navy);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;flex:0 0 auto;margin-top:2px;}
.quiz-opt{border:1.5px solid var(--line);border-radius:8px;padding:7px 12px;font-size:.88em;margin-bottom:6px;cursor:pointer;transition:border-color .15s,background .15s;}
.quiz-opt:hover{border-color:var(--accent);background:var(--bg-soft);}
.quiz-opt.locked{cursor:default;pointer-events:none;}
.quiz-opt.ok{background:var(--green-bg);border-color:var(--green);color:var(--green);font-weight:600;}
.quiz-opt.wrong{background:var(--red-bg);border-color:var(--red);color:var(--red);}
[data-theme="dark"] .quiz-opt.ok{background:rgba(31,122,68,.22);}
[data-theme="dark"] .quiz-opt.wrong{background:rgba(163,42,42,.22);}
.quiz-feedback{display:none;font-size:.82em;margin-top:4px;font-weight:600;}
.quiz-feedback.show{display:block;}
.quiz-feedback.good{color:var(--green);}
.quiz-feedback.bad{color:var(--amber);}

/* ============================================================
   PROGRESS CHIP + NAV BADGES
   ============================================================ */
#exChipRing{transition:stroke-dashoffset .4s ease;}
.nav-ex{font-size:10px;font-weight:700;color:var(--muted);background:var(--bg-soft);border-radius:10px;padding:2px 7px;flex:0 0 auto;}
.nav-ex:empty{display:none;}
.nav-ex.all{background:var(--green-bg);color:var(--green);}
.nav-topic.active .nav-ex{background:#ffffff2b;color:#fff;}

/* ============================================================
   CONFETTI + FINALE
   ============================================================ */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:9800;overflow:hidden;}
.confetti i{position:absolute;top:-14px;border-radius:2px;animation:confFall linear forwards;}
@keyframes confFall{to{transform:translateY(105vh) rotate(720deg);opacity:.85;}}
@media (prefers-reduced-motion: reduce){.confetti{display:none;}}

.finale{position:fixed;inset:0;z-index:9700;background:rgba(6,32,61,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;backdrop-filter:blur(3px);}
.finale.open{opacity:1;}
.finale-card{background:var(--bg);border-radius:20px;padding:34px 40px;max-width:460px;margin:0 20px;text-align:center;box-shadow:var(--shadow-md);transform:translateY(12px);transition:transform .25s;}
.finale.open .finale-card{transform:none;}
.finale-emoji{font-size:3em;margin-bottom:8px;}
.finale-card p{color:var(--muted);font-size:.95em;}
.finale-stats{display:flex;gap:14px;justify-content:center;margin:18px 0;}
.fs{background:var(--bg-soft);border-radius:12px;padding:12px 22px;}
.fs strong{display:block;font-size:1.6em;color:var(--navy);font-family:"Fraunces",serif;}
[data-theme="dark"] .fs strong{color:#bcd4f2;}
.fs span{font-size:.78em;color:var(--muted);}
.finale-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ============================================================
   PROFILE BUILDER — generates a Custom Instructions block
   ============================================================ */
.profile-builder{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px;align-items:start;}
@media (max-width:760px){.profile-builder{grid-template-columns:1fr;}}
.pb-field{margin-bottom:16px;}
.pb-field label{display:block;font-size:.82em;font-weight:700;color:var(--navy);margin-bottom:6px;}
[data-theme="dark"] .pb-field label{color:#bcd4f2;}
.pb-field input[type="text"],.pb-field select{
  width:100%;border:1.5px solid var(--line);border-radius:8px;padding:9px 12px;font-size:.9em;
  font-family:inherit;color:var(--ink);background:var(--bg);
}
.pb-field input[type="text"]:focus,.pb-field select:focus{outline:none;border-color:var(--accent);}
.pb-check-grid{display:flex;flex-direction:column;gap:7px;}
.pb-check-grid label{display:flex;align-items:flex-start;gap:8px;font-size:.85em;font-weight:400;color:var(--ink);cursor:pointer;}
.pb-check-grid input[type="checkbox"]{margin-top:3px;accent-color:var(--accent);flex:0 0 auto;}
.pb-output{position:sticky;top:0;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
[data-theme="dark"] .pb-output{background:rgba(255,255,255,.03);}
.pb-output-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}
.pb-output-hd span{font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.pb-output-btns{display:flex;gap:8px;flex:0 0 auto;}
.pb-output-hd .btn{padding:6px 14px;font-size:12px;}
.pb-output-text{
  display:block;width:100%;box-sizing:border-box;resize:vertical;
  font-family:"IBM Plex Mono","SF Mono",monospace;font-size:.78em;line-height:1.6;
  color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;white-space:pre-wrap;min-height:130px;
}
.pb-output-text:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,116,128,.12);}
[data-theme="dark"] .pb-output-text{background:var(--paper);}
.pb-output-text.dirty{border-color:var(--gold);}
#pbEditHint.is-dirty{color:var(--amber);font-weight:600;}

/* ============================================================
   BREAK / LUNCH TIMER
   ============================================================ */
.break-timer{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.break-timer-display{font-family:"Fraunces",serif;font-size:3.2em;font-weight:600;color:#fff;line-height:1;min-width:2.4em;text-align:center;}
.break-timer-display.done{color:var(--gold-soft);animation:pulseDone 1.1s ease-in-out infinite;}
@keyframes pulseDone{0%,100%{opacity:1;}50%{opacity:.5;}}
@media (prefers-reduced-motion: reduce){.break-timer-display.done{animation:none;}}
.break-timer-controls{display:flex;gap:10px;}
.break-timer .btn.ghost{background:#ffffff1a;color:#fff;}
.break-timer .btn.ghost:hover{background:#ffffff2e;}
.break-timer .btn.primary{background:var(--gold);}
.break-timer .btn.primary:hover{background:#c4954a;}