/* ahaqqu.com/agentic-engineering — the slide deck.
   Loads after style.css and reuses its palette tokens (bg, ink, card,
   kajianq/tepuq/gunbatte/rumaq/agent accents). CSP note: style-src 'self'
   forbids style elements and inline style attributes — every visual here is
   class-driven; the only inline writes are JS setting CSS custom props. */

* { box-sizing: border-box; }

/* ---- deck shell ---- */

.deck {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: clip;
  background: var(--bg);
  color: var(--ink);
}

/* dua gumpalan warna lembut, seperti hero homepage */
.deck::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(44rem 26rem at 16% 20%, var(--glow-a), transparent 70%),
    radial-gradient(44rem 26rem at 84% 80%, var(--glow-b), transparent 70%);
  pointer-events: none;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--grad);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  transition: transform 0.45s ease;
}

.deck-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 3vw, 1.6rem);
}

.deck-left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }

.deck-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 72%, transparent);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease;
}

.deck-brand svg { width: 1rem; height: 1rem; }

.deck-brand:hover { color: var(--ink); border-color: color-mix(in oklab, var(--ink) 30%, transparent); }

.deck-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-actions { display: flex; gap: 0.5rem; }

.ui-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.ui-btn:hover { color: var(--ink); border-color: color-mix(in oklab, var(--ink) 30%, transparent); }

.ui-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.ui-btn svg { width: 1.1rem; height: 1.1rem; }

.ui-btn .ic-collapse { display: none; }
.ui-btn.is-full .ic-collapse { display: block; }
.ui-btn.is-full .ic-expand { display: none; }

/* ---- stage & slides ---- */

.stage { position: relative; flex: 1; }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  padding: clamp(0.5rem, 2vh, 1.5rem) clamp(1.1rem, 4.5vw, 3.5rem) clamp(1rem, 3vh, 2rem);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 1;
  transition: opacity 0.55s ease 0.08s, transform 0.55s cubic-bezier(0.2, 0.75, 0.25, 1) 0.08s;
}

.slide-inner { width: min(100%, 64rem); margin: auto; }

/* aksen per slide (dipakai kicker, diagram, tick) */
.s1, .s3, .s8 { --accent: var(--kajianq); }
.s2, .s4, .s9 { --accent: var(--tepuq); }
.s5 { --accent: var(--gunbatte); }
.s6 { --accent: var(--rumaq); }
.s7 { --accent: var(--agent); }
.s10 { --accent: var(--kajianq); }

/* ---- staggered reveal ---- */

.js .slide .rv { opacity: 0; }

.js .slide.is-active .rv {
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(140ms + var(--i, 0) * 95ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---- typography ---- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  color: var(--accent, var(--kajianq));
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.slide h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.75rem, 3.9vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.slide .sub {
  margin: 0 0 1.3rem;
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 54rem;
}

.hl {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.punch {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--accent, var(--kajianq));
  border-radius: 0.3rem 0.9rem 0.9rem 0.3rem;
  background: color-mix(in oklab, var(--accent, var(--kajianq)) 8%, transparent);
  font-size: 1.02rem;
}

.punch b, .honest b { font-weight: 800; }

/* kutipan pendek pemrakarsaan — satu baris, redup, aksen pada tanda kutip */
.pull {
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.pull::before {
  content: "“";
  margin-right: 0.12em;
  color: var(--accent, var(--kajianq));
  font-size: 1.25em;
  font-weight: 800;
}

.pull-by { display: block; margin-top: 0.1rem; color: var(--ink); font-size: 0.82rem; font-weight: 700; }

.pull-by a {
  color: var(--accent, var(--kajianq));
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent, var(--kajianq)) 40%, transparent);
}

.pull-by a:hover { color: var(--ink); }

.takes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.take {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 82%, transparent);
  color: var(--muted);
  font-size: 0.87rem;
  font-weight: 600;
}

.take svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; }

.panel {
  background: color-mix(in oklab, var(--card) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  box-shadow: var(--shadow);
}

/* ---- slide 1 · title ---- */

.title-slide { text-align: center; }

.title-slide .kicker { justify-content: center; }
.title-slide .kicker::after {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.title-slide h1 {
  margin: 0.1rem 0 0.9rem;
  font-size: clamp(2.7rem, 7.5vw, 4.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.title-lede {
  max-width: 40rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.1rem;
}

.loopviz {
  display: block;
  width: min(100%, 600px);
  height: auto;
  margin: 1.4rem auto 0;
  color: var(--accent);
}

.loopviz .node { fill: color-mix(in oklab, var(--card) 90%, transparent); stroke: currentColor; stroke-width: 2; }

.loopviz .glyph { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.loopviz .arc { fill: none; stroke: currentColor; stroke-width: 2; }

.loopviz .lbl { fill: var(--muted); font-size: 14.5px; font-weight: 600; }

.loopviz .dot { fill: var(--accent); }
.loopviz .dot--alt { fill: var(--tepuq); }

.hint {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

kbd {
  padding: 0.08rem 0.4rem;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 0.35rem;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.82em;
}

/* ---- slide 2 · the shift ---- */

.shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.1rem;
  align-items: stretch;
  margin-top: 0.4rem;
}

.shift-panel { padding: 1.05rem 1.2rem 1.15rem; }

.shift-tag {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.bars { display: grid; gap: 0.45rem; }

.bars i {
  display: block;
  height: 0.58rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 26%, transparent);
  transform-origin: left center;
}

.bars i:nth-child(1) { width: 88%; }
.bars i:nth-child(2) { width: 64%; }
.bars i:nth-child(3) { width: 78%; }
.bars i:nth-child(4) { width: 46%; }
.bars i:nth-child(5) { width: 70%; }

.slide.is-active .bars i { animation: growx 0.5s ease both; }
.slide.is-active .bars i:nth-child(1) { animation-delay: 0.7s; }
.slide.is-active .bars i:nth-child(2) { animation-delay: 0.8s; }
.slide.is-active .bars i:nth-child(3) { animation-delay: 0.9s; }
.slide.is-active .bars i:nth-child(4) { animation-delay: 1s; }
.slide.is-active .bars i:nth-child(5) { animation-delay: 1.1s; }

@keyframes growx { from { transform: scaleX(0); } }

.intent {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.8rem;
  border: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent);
  border-radius: 0.7rem;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  font-size: 0.93rem;
  font-weight: 600;
}

.machine { display: flex; align-items: center; gap: 0.7rem; }

.machine .bars { flex: 1; }
.machine .bars i:nth-child(1) { width: 92%; }
.machine .bars i:nth-child(2) { width: 70%; }
.machine .bars i:nth-child(3) { width: 82%; }
.machine .bars i:nth-child(4) { width: 52%; }

.machine-chip {
  flex: none;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--agent) 14%, transparent);
  color: var(--agent);
  font-size: 0.74rem;
  font-weight: 800;
}

.shift-cap { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.86rem; }

.shift-arrow { align-self: center; color: var(--accent); }

.shift-arrow svg { width: 2.2rem; height: 2.2rem; animation: nudge 1.6s ease-in-out infinite; }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }

.toc span {
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.toc b { color: var(--accent); font-weight: 800; margin-right: 0.25rem; }

/* ---- slide 3 · stairs ---- */

.vsrow { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }

.vs {
  flex: 1 1 280px;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  font-size: 0.9rem;
}

.vs .mark { font-weight: 800; }
.vs--bad { border-style: dashed; color: var(--muted); background: color-mix(in oklab, var(--gunbatte) 7%, transparent); }
.vs--good {
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  background: color-mix(in oklab, var(--accent) 9%, transparent);
}
.vs--good .mark { color: var(--accent); }

.stairs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  align-items: end;
  height: 200px;
  margin-top: 1.2rem;
}

.stair {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in oklab, var(--accent) 42%, transparent);
  border-radius: 0.9rem 0.9rem 0.45rem 0.45rem;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 16%, transparent),
    color-mix(in oklab, var(--accent) 4%, transparent));
}

.stair:nth-child(1) { height: 40%; }
.stair:nth-child(2) { height: 58%; }
.stair:nth-child(3) { height: 76%; }
.stair:nth-child(4) { height: 94%; }

.stair b { font-size: 0.87rem; }
.stair span { color: var(--muted); font-size: 0.76rem; line-height: 1.3; }

.stair .tick {
  position: absolute;
  top: -0.7rem;
  right: -0.45rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: var(--shadow);
  opacity: 0;
}

.slide.is-active .stair .tick { animation: pop-in 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.slide.is-active .stair:nth-child(1) .tick { animation-delay: 0.75s; }
.slide.is-active .stair:nth-child(2) .tick { animation-delay: 1.05s; }
.slide.is-active .stair:nth-child(3) .tick { animation-delay: 1.35s; }
.slide.is-active .stair:nth-child(4) .tick { animation-delay: 1.65s; }

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- slide 4 · flow + venn ---- */

.scrollx { overflow-x: auto; overflow-y: hidden; }

.flowviz {
  display: block;
  width: 100%;
  min-width: 680px;
  max-width: 900px;
  height: auto;
  margin: 0.2rem 0 1.1rem;
  color: var(--accent);
}

.loopstrip { margin-bottom: 0.6rem; }

.flowviz .flnode {
  fill: color-mix(in oklab, var(--card) 92%, transparent);
  stroke: currentColor;
  stroke-width: 1.6;
}

.flowviz .fltext { fill: var(--ink); font-size: 15.5px; font-weight: 650; }

.flowviz .arrow { fill: none; stroke: currentColor; stroke-width: 2; }

.flowviz .lbl { fill: var(--muted); font-size: 14px; font-weight: 600; }

.flowviz .stepnum { fill: currentColor; }
.flowviz .stepnumt { fill: var(--bg); font-size: 12.5px; font-weight: 800; }

.pop {
  opacity: 0;
  transform: scale(0.94);
  transform-box: fill-box;
  transform-origin: center;
}

.slide.is-active .pop { animation: pop-node 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.25) both; }

.slide.is-active .flnode:nth-of-type(1), .slide.is-active .stepnum:nth-of-type(1), .slide.is-active .stepnumt:nth-of-type(1) { animation-delay: 0.35s; }
.slide.is-active .flnode:nth-of-type(2), .slide.is-active .stepnum:nth-of-type(2), .slide.is-active .stepnumt:nth-of-type(2) { animation-delay: 0.55s; }
.slide.is-active .flnode:nth-of-type(3), .slide.is-active .stepnum:nth-of-type(3), .slide.is-active .stepnumt:nth-of-type(3) { animation-delay: 0.75s; }
.slide.is-active .flnode:nth-of-type(4), .slide.is-active .stepnum:nth-of-type(4), .slide.is-active .stepnumt:nth-of-type(4) { animation-delay: 0.95s; }

.slide.is-active .cnode-g:nth-of-type(1) { animation-delay: 0.4s; }
.slide.is-active .cnode-g:nth-of-type(2) { animation-delay: 0.65s; }
.slide.is-active .cnode-g:nth-of-type(3) { animation-delay: 0.9s; }
.slide.is-active .cnode-g:nth-of-type(4) { animation-delay: 1.15s; }

@keyframes pop-node {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

/* garis svg yang digambar masuk (pathLength=1 di elemennya) */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; }

.slide.is-active .draw { animation: drawline 0.9s ease forwards; }
.slide.is-active .arrow:nth-of-type(1) { animation-delay: 0.75s; }
.slide.is-active .arrow:nth-of-type(2) { animation-delay: 0.95s; }
.slide.is-active .arrow:nth-of-type(3) { animation-delay: 1.15s; }
.slide.is-active .arc { animation-delay: 0.45s; }
.slide.is-active .arc + .arc { animation-delay: 0.75s; }
.slide.is-active .arrow--ret { animation-delay: 1.45s; }

@keyframes drawline { to { stroke-dashoffset: 0; } }

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.q {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 0.9rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.q .qmark {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.q--bad {
  border: 1px dashed var(--line);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

.q--bad .qmark { color: var(--gunbatte); }

.q--good {
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

.q--good .qmark { color: var(--accent); }

.vennrow {
  display: grid;
  grid-template-columns: minmax(280px, 430px) 1fr;
  gap: 1.4rem;
  align-items: center;
}

.venn { width: 100%; height: auto; }

.venn circle {
  fill: color-mix(in oklab, var(--accent) 13%, transparent);
  stroke: color-mix(in oklab, var(--accent) 55%, transparent);
  stroke-width: 1.6;
}

.venn .vlbl { fill: var(--muted); font-size: 17.5px; font-weight: 700; }
.venn .vlbl--mix { fill: var(--accent); font-weight: 800; }

.honest h3 { margin: 0 0 0.45rem; font-size: 1.12rem; letter-spacing: -0.01em; }
.honest p { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.94rem; line-height: 1.5; }
.honest p:last-child { margin-bottom: 0; }

/* ---- slide 5 · cycle ---- */

.cycle {
  display: block;
  width: min(100%, 600px);
  min-width: 560px;
  height: auto;
  margin: 0.2rem auto 0;
}

.cycle .ring {
  fill: none;
  stroke: color-mix(in oklab, var(--accent) 55%, transparent);
  stroke-width: 2;
  stroke-dasharray: 5 9;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 46s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.cycle .cnode { fill: var(--card); stroke: var(--line); stroke-width: 1.4; }
.cycle text { fill: var(--ink); font-size: 13.5px; font-weight: 650; }
.cycle .core { fill: var(--accent); font-size: 13.5px; font-weight: 800; letter-spacing: 0.02em; }
.cycle .orbit { fill: var(--accent); }

/* ---- slide 6 · workshop ---- */

.workshop { padding: 1.1rem 1.25rem 1.25rem; margin-top: 0.3rem; }

.workshop-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
}

.wchip {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent);
}

.wchip svg { width: 1.15rem; height: 1.15rem; }

.tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }

.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 0.7rem;
  background: color-mix(in oklab, var(--accent) 9%, transparent);
  font-size: 0.86rem;
  font-weight: 650;
}

.tool svg { width: 0.95rem; height: 0.95rem; color: var(--accent); flex: none; }

/* ---- slide 7 · adapt ---- */

.projgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 0.2rem;
}

.proj { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.95rem 1.05rem; }

.proj--kajianq { --pc: var(--kajianq); }
.proj--gunbatte { --pc: var(--gunbatte); }
.proj--tepuq { --pc: var(--tepuq); }
.proj--rumaq { --pc: var(--rumaq); }

.proj-ic {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.55rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--pc) 14%, transparent);
  color: var(--pc);
}

.proj h3 { margin: 0; font-size: 0.99rem; letter-spacing: -0.01em; }
.proj p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.86rem; }

.axes-label {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.axes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.axes span {
  padding: 0.42rem 0.8rem;
  border: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 650;
}

/* ---- slide 8 · case study ---- */

.case {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.3rem;
  align-items: start;
  margin-top: 0.2rem;
}

.chat { padding: 1rem 1.05rem 1.1rem; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.chat-head i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tepuq);
  animation: blink 2.2s ease-in-out infinite;
}

@keyframes blink { 50% { opacity: 0.35; } }

.bubble {
  max-width: 92%;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: 0.95rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

.bubble--user {
  margin-left: auto;
  border-bottom-right-radius: 0.3rem;
  background: color-mix(in oklab, var(--rumaq) 16%, transparent);
}

.bubble--bot {
  margin-top: 0.6rem;
  border: 1px solid var(--line);
  border-bottom-left-radius: 0.3rem;
  background: var(--bg);
}

.cites { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }

.cite {
  padding: 0.18rem 0.55rem;
  border: 1px solid color-mix(in oklab, var(--tepuq) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--tepuq) 13%, transparent);
  color: var(--tepuq);
  font-size: 0.73rem;
  font-weight: 700;
}

.gnote {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px dashed var(--line);
  border-radius: 0.7rem;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.4;
}

.gnote b { color: var(--accent); flex: none; }

.map { display: grid; gap: 0.5rem; }

.maprow {
  display: grid;
  grid-template-columns: 9.4rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  margin: 0;
  padding: 0.58rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: color-mix(in oklab, var(--card) 72%, transparent);
}

.maprow b { color: var(--accent); font-size: 0.83rem; }
.maprow span { color: var(--muted); font-size: 0.87rem; line-height: 1.4; }

/* ---- slide 9 · try it ---- */

.trygrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  margin-top: 0.2rem;
}

.try { padding: 1rem 1rem 1.05rem; }

.try .num {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.try h3 { margin: 0.55rem 0 0.3rem; font-size: 0.99rem; letter-spacing: -0.01em; }
.try p { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }

.cta {
  margin: 1.3rem 0 0;
  padding: 0.95rem 1.2rem;
  border-radius: 1rem;
  background: var(--grad);
  color: oklch(99% 0.005 95);
  font-size: 1.02rem;
  font-weight: 800;
  text-align: center;
}

/* ---- slide 10 · closing ---- */

.quote-slide { text-align: center; }

.quote-slide .kicker { justify-content: center; }
.quote-slide .kicker::after {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.quote {
  max-width: 56rem;
  margin: 0 auto;
  font-size: clamp(1.45rem, 3.3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.32;
}

.quote > span { display: block; text-wrap: balance; }

.quote-by {
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.quote-by a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.quote-by a:hover { color: var(--accent, var(--kajianq)); border-color: currentColor; }

.quote .dim {
  margin-bottom: 0.9rem;
  color: var(--muted);
  font-size: 0.68em;
  font-weight: 600;
}

.quote .punch {
  display: block;
  margin-top: 1.05rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.08em;
  font-weight: 800;
}

.thanks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.2rem;
  margin: 2.1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.thanks a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.thanks a:hover { color: var(--ink); }

/* ---- bottom ui ---- */

.deck-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0.75rem clamp(1rem, 3vw, 1.6rem) 0.95rem;
}

.dots { display: flex; gap: 0.42rem; }

.dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.dot.is-on { width: 1.5rem; background: var(--grad); }

.dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.counter {
  min-width: 4.4rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---- under the hood ---- */

.s11 { --accent: var(--tepuq); }
.s12 { --accent: var(--kajianq); }
.s13 { --accent: var(--agent); }

/* slide · context window */

.ctxrow {
  display: grid;
  grid-template-columns: minmax(300px, 54fr) 46fr;
  gap: 1.4rem;
  align-items: center;
}

.ctxviz { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }

.ctxframe {
  fill: color-mix(in oklab, var(--card) 55%, transparent);
  stroke: var(--line);
  stroke-width: 1.6;
}

.ctxtitle { fill: var(--muted); font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }

.ctxseg {
  fill: color-mix(in oklab, var(--accent) 12%, transparent);
  stroke: color-mix(in oklab, var(--accent) 38%, transparent);
  stroke-width: 1.3;
}

.ctxseg.seg-b {
  fill: color-mix(in oklab, var(--kajianq) 13%, transparent);
  stroke: color-mix(in oklab, var(--kajianq) 42%, transparent);
}

.ctxlbl { fill: var(--ink); font-size: 13.5px; font-weight: 600; }
.ctxfoot { fill: var(--muted); font-size: 12.5px; font-weight: 600; font-style: italic; }

/* rect nth-of-type: the frame is rect #1, so the five segments are #2..#6 */
.slide.is-active .ctxseg:nth-of-type(2) { animation-delay: 0.3s; }
.slide.is-active .ctxseg:nth-of-type(3) { animation-delay: 0.45s; }
.slide.is-active .ctxseg:nth-of-type(4) { animation-delay: 0.6s; }
.slide.is-active .ctxseg:nth-of-type(5) { animation-delay: 0.75s; }
.slide.is-active .ctxseg:nth-of-type(6) { animation-delay: 0.9s; }

.ctxtips .axes-label { margin-top: 0; }

/* slide · tiers (AGENTS.md / skills / scripts — also used for context tips) */

.tiers { display: grid; gap: 0.55rem; }

.tier {
  padding: 0.68rem 0.9rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: color-mix(in oklab, var(--card) 75%, transparent);
}

.tier--hot {
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  background: color-mix(in oklab, var(--accent) 9%, transparent);
}

.tier b { display: block; margin-bottom: 0.12rem; font-size: 0.9rem; }
.tier span { color: var(--muted); font-size: 0.82rem; line-height: 1.45; }

.tier-down {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}

/* slide · AGENTS.md mock */

.memrow {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) 3fr;
  gap: 1.3rem;
  align-items: center;
}

.agentsmd {
  margin: 0;
  padding: 0.95rem 1.05rem 1.05rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--muted);
}

.agentsmd p { margin: 0; }

.agentsmd-name {
  display: inline-block;
  margin-bottom: 0.55rem !important;
  padding: 0.22rem 0.6rem;
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.agentsmd .md-h { margin-top: 0.55rem; color: var(--accent); font-weight: 700; }

/* slide · harness & model */

.harnessviz {
  display: block;
  width: 100%;
  min-width: 680px;
  max-width: 780px;
  height: auto;
  margin: 0.1rem auto 0.6rem;
}

.harnessbox {
  fill: color-mix(in oklab, var(--card) 55%, transparent);
  stroke: color-mix(in oklab, var(--agent) 40%, transparent);
  stroke-width: 1.6;
}

.harness-lbl { fill: var(--muted); font-size: 15px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

.modelcore {
  fill: color-mix(in oklab, var(--agent) 16%, transparent);
  stroke: var(--agent);
  stroke-width: 1.8;
}

.modelcore-lbl { fill: var(--ink); font-size: 17px; font-weight: 800; }
.modelcore-sub { fill: var(--muted); font-size: 12px; font-weight: 600; }

.hline { stroke: var(--line); stroke-width: 1.2; }

.hchip {
  fill: color-mix(in oklab, var(--agent) 9%, transparent);
  stroke: color-mix(in oklab, var(--agent) 32%, transparent);
  stroke-width: 1.2;
}

.hchip--out {
  fill: color-mix(in oklab, var(--kajianq) 10%, transparent);
  stroke: color-mix(in oklab, var(--kajianq) 35%, transparent);
}

.hchip-lbl { fill: var(--ink); font-size: 12.5px; font-weight: 650; }

.harrow { fill: none; stroke: var(--kajianq); stroke-width: 2; }

.slide.is-active .harnessviz g.pop-model { animation-delay: 0.25s; }
.slide.is-active .harnessviz g:nth-of-type(1) { animation-delay: 0.4s; }
.slide.is-active .harnessviz g:nth-of-type(2) { animation-delay: 0.48s; }
.slide.is-active .harnessviz g:nth-of-type(3) { animation-delay: 0.56s; }
.slide.is-active .harnessviz g:nth-of-type(4) { animation-delay: 0.64s; }
.slide.is-active .harnessviz g:nth-of-type(5) { animation-delay: 0.48s; }
.slide.is-active .harnessviz g:nth-of-type(6) { animation-delay: 0.56s; }
.slide.is-active .harnessviz g:nth-of-type(7) { animation-delay: 0.64s; }
.slide.is-active .harnessviz g:nth-of-type(8) { animation-delay: 0.72s; }
.slide.is-active .harnessviz g:nth-of-type(n + 10) { animation-delay: 0.95s; }
.slide.is-active .hline { animation-delay: 0.35s; }
.slide.is-active .harrow { animation-delay: 1.15s; }

.pickrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }

.pick { padding: 0.62rem 0.9rem 0.68rem; }
.pick b { display: block; margin-bottom: 0.14rem; color: var(--accent); font-size: 0.9rem; }
.pick span { color: var(--muted); font-size: 0.84rem; line-height: 1.42; }

/* ---- responsive ---- */

@media (max-width: 860px) {
  .shift { grid-template-columns: 1fr; }
  .shift-arrow { justify-self: center; transform: rotate(90deg); }
  .shift-arrow svg { animation: none; }
  .compare { grid-template-columns: 1fr; }
  .vennrow { grid-template-columns: 1fr; }
  .venn { max-width: 360px; margin: 0 auto; }
  .case { grid-template-columns: 1fr; }
  .projgrid { grid-template-columns: 1fr; }
  .trygrid { grid-template-columns: 1fr 1fr; }
  .ctxrow, .memrow, .pickrow { grid-template-columns: 1fr; }
  .agentsmd { order: 2; }
  .stairs { height: 170px; gap: 0.55rem; }
  .stair { padding: 0.55rem 0.6rem; }
  .stair span { font-size: 0.68rem; }
  .maprow { grid-template-columns: 7.8rem 1fr; }
  .deck-label { display: none; }
}

@media (max-width: 540px) {
  .trygrid { grid-template-columns: 1fr; }
  .stairs { grid-template-columns: repeat(2, 1fr); height: auto; }
  .stair { height: auto !important; min-height: 4.4rem; }
  .slide.is-active .stair .tick { top: -0.55rem; right: -0.3rem; }
}

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active { transition: none; transform: none; }
  .js .slide .rv, .js .slide.is-active .rv { animation: none; opacity: 1; transform: none; }
  .slide.is-active .draw { animation: none; stroke-dashoffset: 0; }
  .slide.is-active .pop { animation: none; opacity: 1; transform: none; }
  .slide.is-active .bars i { animation: none; }
  .slide.is-active .stair .tick { animation: none; opacity: 1; }
  .cycle .ring { animation: none; }
  .shift-arrow svg, .chat-head i { animation: none; }
}

/* ---- no-JS fallback: the deck becomes a scrollable document ---- */

html:not(.js) .slide {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
}

html:not(.js) .deck-ui,
html:not(.js) .progress,
html:not(.js) .hint { display: none; }