/* ============================================================
   BEYOND CHATBOTS — TRAINING DECK SYSTEM
   Night-shift cinema, same tokens as /beyond-chatbots/:
   near-black, phosphor green, dawn amber, Space Grotesk display,
   IBM Plex Mono for everything the machines say.
   Keys: → / space next · ← prev · Home/End · number+Enter via hash
   ============================================================ */

:root{
  --bg:#06070B;
  --panel:#0B0D13;
  --core:#090B10;
  --ink:#E9ECF4;
  --dim:#8B93A7;
  --faint:#5A6274;
  --green:#5BE49B;
  --amber:#F5B860;
  --red:#E8788A;
  --hair:rgba(233,236,244,.09);
  --ease:cubic-bezier(.32,.72,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(16px,1.6vw,21px);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
::selection{background:#1E4D36;color:#EAFBF2}
.mono{font-family:'IBM Plex Mono',monospace}

/* grain overlay */
.grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- slide frame ---------- */
.slide{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  padding:6vh 6vw 10vh;
}
.slide.active{display:flex}
.slide .inner{
  width:100%;max-width:1120px;
  opacity:0;transform:translateY(22px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.slide.active .inner{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .slide .inner{opacity:1;transform:none;transition:none}
}

/* ---------- chrome ---------- */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--green);
  width:0%;z-index:60;transition:width .4s var(--ease)}
.chrome{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 26px;pointer-events:none;
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.chrome .keys{pointer-events:auto;display:flex;gap:8px}
.chrome button{
  pointer-events:auto;background:rgba(233,236,244,.05);
  border:1px solid var(--hair);color:var(--dim);border-radius:8px;
  width:34px;height:34px;font-size:14px;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.chrome button:hover{color:var(--green);border-color:rgba(91,228,155,.4)}

/* ---------- type & components ---------- */
.k{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--green);margin-bottom:26px}
.k .idx{color:var(--faint)}
.k.amber{color:var(--amber)}
h1{font-weight:600;letter-spacing:-.04em;line-height:1;
  font-size:clamp(44px,7.6vw,104px)}
h1 .g{color:var(--green)}
h1 .a{color:var(--amber)}
h2{font-weight:500;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(32px,4.8vw,62px)}
h2 .g{color:var(--green)}
h2 .a{color:var(--amber)}
.sub{color:var(--dim);max-width:620px;margin-top:24px;
  font-size:clamp(17px,1.7vw,21px)}
.sub strong{color:var(--ink);font-weight:500}
.big-line{font-weight:500;letter-spacing:-.03em;line-height:1.15;
  font-size:clamp(28px,4vw,52px);max-width:20ch}
.big-line .g{color:var(--green)}
.big-line .a{color:var(--amber)}

.cols{display:grid;gap:28px;grid-template-columns:1fr 1fr;margin-top:40px}
.cols3{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin-top:40px}
@media(max-width:820px){.cols,.cols3{grid-template-columns:1fr}}

.card{border-radius:18px;padding:7px;background:rgba(233,236,244,.035);
  border:1px solid var(--hair)}
.card .in{border-radius:12px;background:var(--core);padding:22px 22px 24px;
  height:100%;box-shadow:inset 0 1px 1px rgba(233,236,244,.05)}
.card h3{font-size:clamp(17px,1.8vw,22px);font-weight:600;letter-spacing:-.01em}
.card h3 .n{font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--green);letter-spacing:.16em;display:block;margin-bottom:8px}
.card p{color:var(--dim);font-size:clamp(14px,1.4vw,16.5px);margin-top:8px}
.card p b{color:var(--ink);font-weight:500}
.card.hot{border-color:rgba(91,228,155,.3)}
.card.warn{border-color:rgba(245,184,96,.32)}
.card.warn h3 .n{color:var(--amber)}

ul.list{list-style:none;margin-top:34px;max-width:760px}
ul.list li{padding:14px 0;border-bottom:1px solid var(--hair);
  color:var(--dim);font-size:clamp(16px,1.7vw,20px);
  display:flex;gap:16px;align-items:baseline}
ul.list li::before{content:"▸";color:var(--green);font-size:13px;flex:0 0 auto}
ul.list li:last-child{border-bottom:none}
ul.list li b,ul.list li strong{color:var(--ink);font-weight:500}
ul.list.amber li::before{color:var(--amber)}
ul.list.x li::before{content:"✕";color:var(--red)}

/* mini terminal */
.term{border-radius:18px;padding:7px;background:rgba(233,236,244,.04);
  border:1px solid var(--hair);margin-top:36px}
.term .bar{display:flex;align-items:center;gap:8px;padding:10px 16px;
  border-bottom:1px solid var(--hair)}
.term .bar i{width:8px;height:8px;border-radius:50%;background:#2A2F3C;display:block}
.term .bar .t{font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.1em;color:var(--faint);margin:0 auto}
.term .body{padding:16px 18px;border-radius:0 0 12px 12px;background:var(--core);
  font-family:'IBM Plex Mono',monospace;font-size:clamp(11.5px,1.25vw,14px);
  line-height:1.85;color:var(--dim)}
.term .body .ts{color:var(--faint)}
.term .body .ok{color:var(--green)}
.term .body .hold{color:var(--amber)}
.term .body .act{color:var(--ink)}
.term .body .bad{color:var(--red)}

/* exercise slide */
.ex-tag{display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#0D0A04;background:var(--amber);
  border-radius:999px;padding:7px 16px;margin-bottom:26px;font-weight:500}
.ex-meta{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ex-meta span{display:block;color:var(--ink);font-family:'Space Grotesk',sans-serif;
  font-size:15px;text-transform:none;letter-spacing:0;margin-top:5px;font-weight:500}
.steps{counter-reset:st;list-style:none;margin-top:32px;max-width:780px}
.steps li{counter-increment:st;padding:13px 0;border-bottom:1px solid var(--hair);
  color:var(--dim);font-size:clamp(15px,1.55vw,18.5px);display:flex;gap:16px}
.steps li::before{content:counter(st,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace;color:var(--amber);font-size:13px;
  padding-top:3px;flex:0 0 auto}
.steps li:last-child{border-bottom:none}
.steps li b{color:var(--ink);font-weight:500}

/* quote / statement */
.quote{font-weight:500;letter-spacing:-.02em;line-height:1.3;
  font-size:clamp(24px,3.4vw,42px);max-width:24ch}
.quote .g{color:var(--green)}
.quote .a{color:var(--amber)}
.attr{margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  color:var(--faint);letter-spacing:.1em}

/* section divider */
.divider h1{font-size:clamp(52px,9vw,128px)}
.divider .k{margin-bottom:34px}

/* table-ish rows */
.rows{margin-top:38px;border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:200px 1fr;gap:22px;
  padding:15px 4px;border-bottom:1px solid var(--hair);align-items:baseline}
@media(max-width:700px){.row{grid-template-columns:1fr}}
.row .h{font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.row .h.amber{color:var(--amber)}
.row .h.red{color:var(--red)}
.row .d{color:var(--dim);font-size:clamp(14.5px,1.5vw,17.5px)}
.row .d b{color:var(--ink);font-weight:500}

/* footer note on a slide */
.note{margin-top:36px;padding:16px 20px;border-left:2px solid var(--amber);
  background:rgba(245,184,96,.05);border-radius:0 10px 10px 0;
  color:var(--dim);font-size:clamp(14px,1.4vw,16.5px);max-width:720px}
.note b{color:var(--amber);font-weight:500}
.note.green{border-color:var(--green);background:rgba(91,228,155,.05)}
.note.green b{color:var(--green)}

/* print: one slide per page, everything visible */
@media print{
  body{overflow:visible;background:#fff}
  .grain,.chrome,.progress{display:none}
  .slide{position:relative;display:flex!important;page-break-after:always;
    min-height:95vh;padding:40px}
  .slide .inner{opacity:1;transform:none}
}