/* ==========================================================================
   Ascent Training Wales — course page extras
   Animated course explainer · "Is this course right for you?" questionnaire
   Myths vs reality · Learning outcomes
   Built on the tokens already defined in css/ascent-modern.css; the fallbacks
   only apply if a token is missing.
   ========================================================================== */

.ax-sec { padding: clamp(60px, 8vw, 110px) 0; }
.ax-sec--warm { background: var(--paper-warm, #f5f3ee); }
.ax-sec--tight { padding-top: 0; }

/* ---------- Learning outcomes + prerequisites (inside .course-main) ------- */
.ax-outcomes { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 12px; }
.ax-outcomes li { position: relative; padding-left: 38px; line-height: 1.55; }
.ax-outcomes li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue, #1f5fbf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.ax-prereq {
  margin-top: 28px; padding: 20px 22px; border-radius: 14px;
  background: var(--paper-warm, #f5f3ee); border-left: 4px solid var(--blue, #1f5fbf);
}
.ax-prereq p { margin: 0; }
.ax-prereq p + p { margin-top: 10px; }
.ax-pairs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.ax-pairs a {
  display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 14px; text-decoration: none;
  border: 1px solid var(--rule-strong, rgba(13, 46, 42, .22)); color: var(--ink-soft, #2b3a38);
  transition: border-color .2s, color .2s;
}
.ax-pairs a:hover, .ax-pairs a:focus-visible { border-color: var(--blue, #1f5fbf); color: var(--blue, #1f5fbf); }

/* ---------- Animated explainer ------------------------------------------- */
.ax-exp {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px); align-items: start;
}
@media (max-width: 920px) { .ax-exp { grid-template-columns: 1fr; } }

.ax-stage, .ax-term {
  --c-ink: #ffffff;
  --c-dim: rgba(255, 255, 255, .42);
  --c-card: rgba(255, 255, 255, .07);
  --c-card2: rgba(255, 255, 255, .12);
  --c-line: rgba(255, 255, 255, .22);
  --c-acc: var(--blue-bright, #5aa9ff);
  --c-acc2: var(--saffron, #f2b33d);
  --c-alert: #ff7a6b;
  --c-ok: #4fd1a5;
}
.ax-stage {
  position: relative; border-radius: 22px; overflow: hidden; margin: 0;
  background-color: var(--navy, #0D2E2A);
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px);
  background-size: 22px 22px;
  box-shadow: 0 30px 60px -30px rgba(13, 46, 42, .55);
  position: sticky; top: 96px;
}
@media (max-width: 920px) { .ax-stage { position: relative; top: auto; } }
.ax-stage svg { display: block; width: 100%; height: auto; }

.ax-scene { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.ax-scene.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* SVG paint classes */
.k-card  { fill: var(--c-card);  stroke: var(--c-line); stroke-width: 1.2; }
.k-card2 { fill: var(--c-card2); stroke: var(--c-line); stroke-width: 1.2; }
.k-acc   { fill: var(--c-acc); }
.k-acc2  { fill: var(--c-acc2); }
.k-alert { fill: var(--c-alert); }
.k-ok    { fill: var(--c-ok); }
.k-ink   { fill: var(--c-ink); }
.k-dim   { fill: var(--c-dim); }
.k-faint { fill: rgba(255, 255, 255, .14); }
.k-accA  { fill: var(--c-acc); fill-opacity: .16; stroke: var(--c-acc); stroke-width: 1.4; }
.k-alertA{ fill: var(--c-alert); fill-opacity: .16; stroke: var(--c-alert); stroke-width: 1.4; }
.k-okA   { fill: var(--c-ok); fill-opacity: .16; stroke: var(--c-ok); stroke-width: 1.4; }
.k-acc2A { fill: var(--c-acc2); fill-opacity: .16; stroke: var(--c-acc2); stroke-width: 1.4; }
.l-ink, .l-dim, .l-acc, .l-acc2, .l-alert, .l-ok {
  fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.l-ink { stroke: var(--c-ink); } .l-dim { stroke: var(--c-line); stroke-width: 1.6; }
.l-acc { stroke: var(--c-acc); } .l-acc2 { stroke: var(--c-acc2); }
.l-alert { stroke: var(--c-alert); } .l-ok { stroke: var(--c-ok); }
.l-thin { stroke-width: 1.4; }
.l-dash { stroke-dasharray: 4 7; }

.tx   { fill: var(--c-ink); font: 500 14px/1 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
.tx-s { font-size: 11.5px; fill: var(--c-dim); font-weight: 500; }
.tx-b { font-weight: 650; }
.tx-l { font: 700 21px/1 "Bricolage Grotesque", "Geist", system-ui, sans-serif; letter-spacing: -.01em; }
.tx-m { font-family: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; }
.tx-c { text-anchor: middle; }
.tx-r { text-anchor: end; }
.tx-dk { fill: var(--navy, #0D2E2A); }
.tx-acc { fill: var(--c-acc); } .tx-alert { fill: var(--c-alert); } .tx-ok { fill: var(--c-ok); } .tx-acc2 { fill: var(--c-acc2); }

/* Motion — default state IS the final state; keyframes describe the entrance.
   Animations only run on the active scene, so the stage reads correctly with
   motion off. */
.is-on .a-fade  { animation: axFade .6s ease var(--d, 0s) both; }
.is-on .a-up    { animation: axUp .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.is-on .a-slide { animation: axSlide .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.is-on .a-pop   { animation: axPop .55s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0s) both; transform-box: fill-box; transform-origin: center; }
.is-on .a-grow  { animation: axGrowY .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; transform-box: fill-box; transform-origin: 50% 100%; }
.is-on .a-growx { animation: axGrowX .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; transform-box: fill-box; transform-origin: 0 50%; }
.is-on .a-shrink{ animation: axShrink 1.4s cubic-bezier(.6, 0, .2, 1) var(--d, 0s) both; transform-box: fill-box; transform-origin: 0 50%; }
.is-on .a-draw  { stroke-dasharray: 1; animation: axDraw 1.2s ease var(--d, 0s) both; }
.is-on .a-type  { animation: axType 1.1s steps(24) var(--d, 0s) both; }
.is-on .a-move  { animation: axMove 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.is-on .a-flow  { animation: axFlow .9s linear infinite; }
.is-on .a-blink { animation: axBlink 1s steps(1) infinite; }
.is-on .a-pulse { animation: axPulse 1.8s ease-in-out var(--d, 0s) infinite; transform-box: fill-box; transform-origin: center; }
.is-on .a-spin  { animation: axSpin 6s linear infinite; }
.is-on .a-scan  { animation: axScan 2.6s ease-in-out infinite alternate; }

@keyframes axFade   { from { opacity: 0; } }
@keyframes axUp     { from { opacity: 0; transform: translateY(16px); } }
@keyframes axSlide  { from { opacity: 0; transform: translateX(-22px); } }
@keyframes axPop    { from { opacity: 0; transform: scale(.3); } }
@keyframes axGrowY  { from { transform: scaleY(0); } }
@keyframes axGrowX  { from { transform: scaleX(0); } }
@keyframes axShrink { from { transform: scaleX(var(--from, 3)); } }
@keyframes axDraw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes axType   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes axMove   { from { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)); } 30% { opacity: 1; } }
@keyframes axFlow   { to { stroke-dashoffset: -11; } }
@keyframes axBlink  { 50% { opacity: 0; } }
@keyframes axPulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--s, 1.12)); } }
@keyframes axSpin   { to { transform: rotate(360deg); } }
@keyframes axScan   { from { transform: translateY(0); } to { transform: translateY(var(--sy, 200px)); } }

/* Stage controls */
.ax-ctrl {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .38));
}
.ax-toggle {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .2s;
}
.ax-toggle:hover { background: rgba(255, 255, 255, .2); }
.ax-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ax-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.ax-toggle .i-play { display: none; }
.ax-exp.is-paused .ax-toggle .i-play { display: block; }
.ax-exp.is-paused .ax-toggle .i-pause { display: none; }
.ax-cap { flex: 1; min-width: 0; margin: 0; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ax-cap span { display: block; font-weight: 500; font-size: 12px; opacity: .7; letter-spacing: .04em; }
.ax-bar { flex: none; width: 96px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.ax-bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.ax-exp.is-running .ax-bar i { animation: axBar var(--dur, 7s) linear both; }
@keyframes axBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ax-exp.is-paused .ax-scene *, .ax-exp.is-paused .ax-bar i,
.ax-exp.is-offscreen .ax-scene *, .ax-exp.is-offscreen .ax-bar i { animation-play-state: paused !important; }

/* Step list */
.ax-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ax-step button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; row-gap: 4px;
  padding: 16px 18px; border-radius: 16px; border: 1px solid transparent;
  transition: background .25s, border-color .25s, opacity .25s; opacity: .72;
}
.ax-step button:hover { opacity: 1; background: var(--paper-warm, #f5f3ee); }
.ax-step button:focus-visible { outline: 2px solid var(--blue, #1f5fbf); outline-offset: 2px; opacity: 1; }
.ax-step.is-on button { opacity: 1; background: var(--paper-warm, #f5f3ee); border-color: var(--rule-strong, rgba(13, 46, 42, .18)); }
.ax-n {
  grid-row: 1 / span 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 14px; border: 1.5px solid var(--rule-strong, rgba(13, 46, 42, .25));
  color: var(--ink-soft, #2b3a38); transition: background .25s, color .25s, border-color .25s;
}
.ax-step.is-on .ax-n { background: var(--blue, #1f5fbf); border-color: var(--blue, #1f5fbf); color: #fff; }
.ax-when { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue, #1f5fbf); }
.ax-step strong { font-size: 18px; line-height: 1.25; }
.ax-step .ax-desc { font-size: 15px; line-height: 1.55; color: var(--ink-soft, #2b3a38); }
.ax-note { margin-top: 18px; font-size: 14px; color: var(--muted, #5d6b69); }

/* ---------- Questionnaire ------------------------------------------------- */
.ax-quiz {
  max-width: 860px; margin: 0 auto; background: var(--paper, #fff); border-radius: 24px;
  border: 1px solid var(--rule-strong, rgba(13, 46, 42, .14));
  padding: clamp(24px, 4vw, 48px); box-shadow: 0 24px 50px -36px rgba(13, 46, 42, .45);
}
.ax-quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.ax-count { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #5d6b69); }
.ax-dots { display: flex; gap: 6px; }
.ax-dots i { width: 26px; height: 5px; border-radius: 5px; background: var(--paper-deep, #e7e3da); transition: background .3s; }
.ax-dots i.is-done { background: var(--blue, #1f5fbf); }
.ax-q { border: 0; padding: 0; margin: 0 0 30px; min-inline-size: 0; }
.ax-q legend { padding: 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.ax-q .ax-hint { margin: 8px 0 0; font-size: 15px; color: var(--muted, #5d6b69); }
.ax-opts { display: grid; gap: 10px; margin-top: 20px; }
.ax-opt { position: relative; display: block; cursor: pointer; }
.ax-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ax-opt span {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 14px; font-size: 16px; line-height: 1.4;
  border: 1.5px solid var(--rule-strong, rgba(13, 46, 42, .18)); transition: border-color .2s, background .2s;
}
.ax-opt span::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--rule-strong, rgba(13, 46, 42, .35)); transition: border .2s, background .2s;
}
.ax-opt:hover span { border-color: var(--blue, #1f5fbf); }
.ax-opt input:focus-visible + span { outline: 2px solid var(--blue, #1f5fbf); outline-offset: 2px; }
.ax-opt input:checked + span { border-color: var(--blue, #1f5fbf); background: var(--blue-haze, rgba(31, 95, 191, .07)); }
.ax-opt input:checked + span::before { border: 5px solid var(--blue, #1f5fbf); }
.ax-nav { display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.ax-nav .ax-back { margin-right: auto; }
.ax-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; border: 1.5px solid transparent;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.ax-btn--primary { background: var(--blue, #1f5fbf); color: #fff; }
.ax-btn--primary:hover { filter: brightness(1.08); }
.ax-btn--ghost { background: transparent; color: var(--ink-soft, #2b3a38); border-color: var(--rule-strong, rgba(13, 46, 42, .25)); }
.ax-btn--ghost:hover { border-color: var(--blue, #1f5fbf); color: var(--blue, #1f5fbf); }
.ax-btn:focus-visible { outline: 2px solid var(--blue, #1f5fbf); outline-offset: 3px; }
.ax-btn[disabled] { opacity: .4; cursor: not-allowed; }
.ax-quiz .ax-back[hidden], .ax-quiz .ax-next[hidden] { display: none; }

/* JS-enhanced mode: one question at a time */
.ax-quiz.is-js .ax-q { display: none; }
.ax-quiz.is-js .ax-q.is-on { display: block; animation: axUp .45s cubic-bezier(.2, .8, .2, 1) both; }
.ax-quiz:not(.is-js) .ax-quiz-top, .ax-quiz:not(.is-js) .ax-back { display: none; }

.ax-result { display: none; }
.ax-quiz.is-done .ax-result { display: block; animation: axUp .5s cubic-bezier(.2, .8, .2, 1) both; }
.ax-quiz.is-done form, .ax-quiz.is-done .ax-quiz-top { display: none; }
.ax-meter { position: relative; height: 12px; border-radius: 12px; background: var(--paper-deep, #e7e3da); overflow: hidden; margin: 6px 0 10px; }
.ax-meter i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 12px; background: var(--blue, #1f5fbf); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.ax-meter-lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted, #5d6b69); }
.ax-result h3 { margin: 26px 0 10px; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
.ax-result p { margin: 0 0 14px; line-height: 1.6; }
.ax-focus { margin: 18px 0 26px; padding: 20px 22px; border-radius: 14px; background: var(--paper-warm, #f5f3ee); }
.ax-focus strong { display: block; margin-bottom: 8px; }
.ax-focus ul { margin: 0; padding-left: 20px; line-height: 1.7; }
.ax-result-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ax-retake { background: none; border: 0; padding: 8px 4px; font: inherit; font-size: 14px; color: var(--muted, #5d6b69); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ax-retake:hover { color: var(--blue, #1f5fbf); }
.ax-disclaim { margin-top: 18px !important; font-size: 13px; color: var(--muted, #5d6b69); }

/* ---------- Myths vs reality --------------------------------------------- */
.ax-myths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .ax-myths { grid-template-columns: 1fr; } }
.ax-myth {
  margin: 0; padding: 26px 24px; border-radius: 18px; background: var(--paper, #fff);
  border: 1px solid var(--rule-strong, rgba(13, 46, 42, .14)); display: flex; flex-direction: column; gap: 14px;
}
.ax-myth-tag { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.ax-myth-tag--myth { color: var(--muted, #5d6b69); }
.ax-myth-tag--fact { color: var(--blue, #1f5fbf); }
.ax-myth blockquote {
  margin: 0; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--muted, #5d6b69);
  text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(220, 70, 55, .55);
}
.ax-myth p { margin: 0; line-height: 1.6; }
.ax-myth hr { border: 0; border-top: 1px dashed var(--rule-strong, rgba(13, 46, 42, .2)); margin: 2px 0; width: 100%; }

/* ---------- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ax-scene, .ax-scene * { animation: none !important; transition: none !important; }
  .ax-bar { display: none; }
  .ax-quiz.is-js .ax-q.is-on, .ax-quiz.is-done .ax-result { animation: none; }
  .ax-meter i { transition: none; }
}

/* ---------- Small screens ------------------------------------------------- */
.ax-count { white-space: nowrap; }
@media (max-width: 600px) {
  .ax-ctrl { position: static; background: rgba(0, 0, 0, .28); padding: 12px 14px; }
  .ax-cap { font-size: 14px; }
  .ax-bar { width: 64px; }
  .ax-dots i { width: 16px; }
  .ax-step button { padding: 14px; column-gap: 12px; }
  .ax-quiz { border-radius: 18px; }
}

/* ---------- Toolkit explorer (tabs + animated terminal) ------------------- */
.ax-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
@media (max-width: 700px) { .ax-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } }
.ax-tabs button {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer;
  padding: 12px 16px; border-radius: 14px; font: inherit; text-align: left; background: var(--paper, #fff);
  border: 1.5px solid var(--rule-strong, rgba(13, 46, 42, .16)); color: var(--ink-soft, #2b3a38); transition: border-color .2s, background .2s;
}
.ax-tabs button strong { font-size: 16px; }
.ax-tabs button span { font-size: 12px; color: var(--muted, #5d6b69); }
.ax-tabs button:hover { border-color: var(--blue, #1f5fbf); }
.ax-tabs button[aria-selected="true"] { background: var(--blue, #1f5fbf); border-color: var(--blue, #1f5fbf); color: #fff; }
.ax-tabs button[aria-selected="true"] span { color: rgba(255, 255, 255, .8); }
.ax-tabs button:focus-visible { outline: 2px solid var(--blue, #1f5fbf); outline-offset: 2px; }

.ax-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(22px, 4vw, 44px); align-items: start; margin-bottom: 28px; }
.ax-tools.is-js .ax-panel { display: none; margin-bottom: 0; }
.ax-tools.is-js .ax-panel.is-active { display: grid; }
@media (max-width: 920px) { .ax-panel, .ax-tools.is-js .ax-panel.is-active { grid-template-columns: 1fr; } }
.ax-panel h3 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.ax-tool-tag { margin: 6px 0 16px; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue, #1f5fbf); }
.ax-panel p { line-height: 1.6; margin: 0 0 12px; }
.ax-io { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.ax-io div { padding: 14px 16px; border-radius: 12px; background: var(--paper, #fff); border: 1px solid var(--rule-strong, rgba(13, 46, 42, .14)); }
.ax-io dt { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #5d6b69); }
.ax-io dd { margin: 4px 0 0; font-weight: 600; line-height: 1.4; }
.ax-tool-link { display: inline-block; margin-top: 6px; color: var(--blue, #1f5fbf); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ax-term { border-radius: 18px; overflow: hidden; background: var(--navy, #0D2E2A); box-shadow: 0 30px 60px -30px rgba(13, 46, 42, .55); }
.ax-term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ax-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ax-term-bar span { margin-left: 8px; font-size: 12px; color: rgba(255, 255, 255, .55); flex: 1; }
.ax-replay { background: none; border: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .8); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.ax-replay:hover { background: rgba(255, 255, 255, .1); }
.ax-replay:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ax-term pre { margin: 0; padding: 18px 20px 8px; min-height: 290px; overflow-x: auto; font: 13px/1.75 "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; color: rgba(255, 255, 255, .88); white-space: pre; }
.ax-term .ln { display: block; }
.ax-term .ln.dim { color: rgba(255, 255, 255, .5); }
.ax-term .ln.hd { color: var(--saffron, #f2b33d); }
.ax-term .ln.hit { color: #ff8f80; }
.ax-term .ln.note { color: #4fd1a5; }
.ax-term .ln.cmd .ps { color: var(--blue-bright, #5aa9ff); }
.ax-term .ln.cmd .typed { display: inline-block; vertical-align: bottom; }
.ax-term svg { display: block; width: 100%; height: auto; }
.ax-term-note { margin: 0; padding: 0 20px 14px; font-size: 12px; color: rgba(255, 255, 255, .5); }
.ax-panel.is-on .ln { animation: axLine .3s ease var(--d, 0s) both; }
.ax-panel.is-on .ln.cmd .typed { animation: axType .9s steps(30) var(--d, 0s) both; }
@keyframes axLine { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Case studies -------------------------------------------------- */
.ax-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .ax-cases { grid-template-columns: 1fr; } }
.ax-case { padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: var(--paper, #fff); border: 1px solid var(--rule-strong, rgba(13, 46, 42, .14)); display: flex; flex-direction: column; }
.ax-case--composite { border-style: dashed; background: var(--paper-warm, #f5f3ee); }
.ax-case-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ax-case-year { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; background: var(--blue, #1f5fbf); color: #fff; }
.ax-case--composite .ax-case-year { background: var(--muted, #5d6b69); }
.ax-case-who { font-size: 13px; color: var(--muted, #5d6b69); }
.ax-case h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; }
.ax-case p { margin: 0 0 14px; line-height: 1.6; }
.ax-case-tags { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.ax-case-tags li { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule-strong, rgba(13, 46, 42, .2)); }
.ax-case-lesson { margin-top: auto; padding: 16px 18px; border-radius: 12px; background: var(--paper-warm, #f5f3ee); border-left: 4px solid var(--blue, #1f5fbf); }
.ax-case--composite .ax-case-lesson { background: var(--paper, #fff); }
.ax-case-lesson strong { display: block; font-size: 13px; margin-bottom: 4px; }
.ax-case-lesson p { margin: 0; }
.ax-cases-note { margin-top: 16px; font-size: 13px; color: var(--muted, #5d6b69); }
@media (prefers-reduced-motion: reduce) { .ax-panel.is-on .ln, .ax-panel.is-on .ln.cmd .typed { animation: none; } }
@media (max-width: 600px) { .ax-term pre { font-size: 11.5px; padding: 14px 14px 6px; min-height: 0; } .ax-io { grid-template-columns: 1fr; } }