/* ==========================================================================
   Design tokens + shared components.
   Used by the deck (index.html) AND every standalone activity in play/,
   so an activity looks identical embedded in a slide or opened on a phone.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:        #0a0720;
  --bg-2:      #150f3a;
  --glass:     rgba(255, 255, 255, 0.07);
  --glass-2:   rgba(255, 255, 255, 0.12);
  --stroke:    rgba(255, 255, 255, 0.16);

  /* text */
  --ink:       #f5f2ff;
  --muted:     #b7b0d8;

  /* neon accents */
  --cyan:      #22e4ff;
  --pink:      #ff4fd8;
  --lime:      #b6ff3b;
  --amber:     #ffc53d;
  --violet:    #8b5cff;
  --red:       #ff5a6e;

  /* class colours: the SAME three colours mean "class 1/2/3" in every activity */
  --c1: var(--cyan);
  --c2: var(--pink);
  --c3: var(--amber);

  --radius:    22px;
  --radius-sm: 12px;
  --shadow:    0 20px 60px rgba(0, 0, 0, 0.45);
  --glow-cyan: 0 0 24px rgba(34, 228, 255, 0.55);
  --glow-pink: 0 0 24px rgba(255, 79, 216, 0.55);

  --font-display: "Fredoka", "Outfit", system-ui, sans-serif;
  --font-body:    "Outfit", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* The page colour lives on <html> only: a background on <body> would paint
   over the fixed .aurora layer (z-index -2) and hide it. */
html { background: var(--bg); overflow-x: clip; }   /* the rotating aurora must never cause sideways scrolling on a phone */
html, body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Animated aurora backdrop — pure CSS, zero cost when the tab is hidden */
.aurora {
  position: fixed; inset: -20%;
  z-index: -2;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(139, 92, 255, 0.45), transparent 70%),
    radial-gradient(35% 35% at 80% 20%, rgba(255, 79, 216, 0.30), transparent 70%),
    radial-gradient(45% 45% at 70% 80%, rgba(34, 228, 255, 0.28), transparent 70%),
    radial-gradient(30% 30% at 15% 85%, rgba(182, 255, 59, 0.14), transparent 70%),
    var(--bg);
  filter: blur(20px);
  animation: aurora 24s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(3%, -2%) rotate(8deg) scale(1.08); }
  100% { transform: translate(-3%, 2%) rotate(-6deg) scale(1.02); }
}
#particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
}

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .4em; }
.grad {
  background: linear-gradient(90deg, var(--cyan), var(--pink) 50%, var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.muted { color: var(--muted); }
.mono  { font-family: var(--font-mono); }
.c1 { color: var(--c1); } .c2 { color: var(--c2); } .c3 { color: var(--c3); }
.lime { color: var(--lime); } .red { color: var(--red); }

/* ---------- glass card ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

/* ---------- buttons ---------- */
.btn {
  font: 600 1rem var(--font-body);
  color: var(--ink);
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: .6em 1.2em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  display: inline-flex; align-items: center; gap: .45em;
  text-decoration: none;
}
.btn:hover  { transform: translateY(-2px); background: rgba(255,255,255,.18); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: linear-gradient(90deg, var(--violet), var(--pink)); border-color: transparent; box-shadow: var(--glow-pink); }
.btn.cyan    { background: rgba(34,228,255,.18);  border-color: var(--cyan);  }
.btn.pink    { background: rgba(255,79,216,.18);  border-color: var(--pink);  }
.btn.amber   { background: rgba(255,197,61,.18);  border-color: var(--amber); }
.btn.on      { box-shadow: 0 0 0 2px var(--cyan) inset, var(--glow-cyan); background: rgba(34,228,255,.2); }
.btn.c1 { color: var(--ink); border-color: var(--c1); background: rgba(34,228,255,.16); }
.btn.c2 { color: var(--ink); border-color: var(--c2); background: rgba(255,79,216,.16); }
.btn.c3 { color: var(--ink); border-color: var(--c3); background: rgba(255,197,61,.16); }
.btn.c1.on { box-shadow: 0 0 0 3px var(--c1) inset, var(--glow-cyan); }
.btn.c2.on { box-shadow: 0 0 0 3px var(--c2) inset, var(--glow-pink); }
.btn.c3.on { box-shadow: 0 0 0 3px var(--c3) inset, 0 0 24px rgba(255,197,61,.5); }

input[type=range] { accent-color: var(--pink); width: 100%; }
select, input[type=text] {
  font: 500 1rem var(--font-body); color: var(--ink);
  background: var(--glass-2); border: 1px solid var(--stroke);
  border-radius: var(--radius-sm); padding: .45em .7em;
}
select option { background: var(--bg-2); }

.pill {
  display: inline-block; padding: .2em .8em; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--stroke);
  font-size: .85em; font-weight: 600;
}

/* ---------- confidence bars (doodle, teachable machine) ---------- */
.bars { display: grid; gap: .55rem; }
.bar  { display: grid; grid-template-columns: 7.5em 1fr 3.4em; align-items: center; gap: .6rem; font-weight: 600; }
.bar .track { display: block; height: 1.25rem; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar .fill  { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s ease; }
.bar .pct   { text-align: right; font-family: var(--font-mono); font-size: .9em; }
.bar.c1 .fill { background: linear-gradient(90deg, #0fa3c4, var(--c1)); box-shadow: var(--glow-cyan); }
.bar.c2 .fill { background: linear-gradient(90deg, #b3179a, var(--c2)); box-shadow: var(--glow-pink); }
.bar.c3 .fill { background: linear-gradient(90deg, #c78a00, var(--c3)); }

/* ---------- friendly notice (camera denied, model offline…) ---------- */
.notice {
  border: 1px dashed var(--amber);
  background: rgba(255,197,61,.08);
  border-radius: var(--radius-sm);
  padding: .8em 1em;
  line-height: 1.4;
}
.notice.hidden { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(140%);
  background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 999px;
  padding: .7em 1.3em; font-weight: 600; z-index: 99;
  transition: transform .35s cubic-bezier(.2,1.4,.4,1);
  box-shadow: var(--shadow);
}
.toast.show { transform: translateX(-50%) translateY(0); }

.spinner {
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2); border-top-color: var(--cyan);
  animation: spin .8s linear infinite; display: inline-block; vertical-align: -.2em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- standalone activity page layout (play/*.html) ---------- */
body.play {
  min-height: 100vh;
  padding: clamp(12px, 3vw, 28px);
}
body.play header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
body.play header.top h1 { font-size: clamp(1.5rem, 4vw, 2.4rem); margin: 0; }
body.play header.top a.back { color: var(--muted); text-decoration: none; font-weight: 600; }
/* Embedded in the deck: the slide supplies the title, so drop the page header */
body.play.embedded header.top { display: none; }
body.play.embedded { padding: 6px; min-height: 0; background: transparent; }
body.play.embedded .aurora, body.play.embedded #particles { display: none; }
html.embedded { background: transparent; }
/* Same rules keyed on <html>, which an inline <head> script marks before the
   first paint — otherwise the header flashes while CDN libraries download. */
html.embedded body.play header.top { display: none; }
html.embedded body.play { padding: 6px; min-height: 0; background: transparent; }
html.embedded .aurora, html.embedded #particles { display: none; }

.panel { padding: clamp(12px, 2vw, 22px); }
.row   { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.stack { display: grid; gap: .8rem; align-content: start; grid-template-columns: minmax(0, 1fr); }
.lab > *, .stack > * { min-width: 0; }

canvas.board {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--stroke);
  touch-action: none;            /* our pointer handlers own every gesture here */
  cursor: crosshair;
}
video.cam, canvas.cam {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm);
  background: #000;
}
.mirror { transform: scaleX(-1); }

/* Embedded in a slide the iframe has a fixed height: size canvases by the
   height that is left, keeping their aspect ratio, so nothing is cut off.
   Each page sets --ar (canvas aspect) and --below (space its controls need). */
html.embedded { font-size: clamp(14px, 1.2vw, 24px); }
body.play.embedded canvas.board,
body.play.embedded canvas.cam,
body.play.embedded video.cam {
  width: min(100%, calc((100vh - var(--below, 20px)) * var(--ar, 1.6)));
  margin-inline: auto;
}
body.play.embedded .btn { padding: .42em .85em; }
body.play.embedded .panel { padding: 12px; }
/* Standalone on a laptop: same idea, leaving room for the page header and
   the button row, so the controls are never below the fold. Phones are
   narrow, so width wins there and the page simply scrolls. */
body.play:not(.embedded) canvas.board,
body.play:not(.embedded) canvas.cam,
body.play:not(.embedded) video.cam {
  width: min(100%, calc((100vh - 110px - var(--below, 20px)) * var(--ar, 1.6)));
  margin-inline: auto;
}

/* ---------- 🐍 Show me the Python (js/python-panel.js) ---------- */
.btn.py {
  background: linear-gradient(90deg, rgba(55,118,171,.35), rgba(255,212,59,.28));
  border-color: #ffd43b;
}
.btn.py:hover { box-shadow: 0 0 22px rgba(255,212,59,.45); }
body.play header.top .btn.py { margin-left: auto; }

/* Always fits the screen: the card is capped to the viewport (dvh, so mobile
   browser bars count), header and footer stay put, and only the code scrolls.
   (A grid row of "auto" made the old max-height:100% resolve to nothing, so a
   long snippet pushed the close button off-screen.) */
.pyp { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(8px, 3vw, 40px); }
.pyp[hidden] { display: none; }
.pyp-back { position: absolute; inset: 0; background: rgba(5,3,20,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.pyp-card {
  position: relative; width: min(1180px, 100%);
  max-height: calc(100vh - 2 * clamp(8px, 3vw, 40px));
  max-height: calc(100dvh - 2 * clamp(8px, 3vw, 40px));
  display: flex; flex-direction: column; gap: .9rem; overflow: hidden;
  padding: clamp(14px, 2.2vw, 28px); background: rgba(21,15,58,.94);
  font-size: clamp(13px, min(1.15vw, 2.3vh), 21px); color: var(--ink); text-align: left;
  transform: translateY(30px) scale(.96); opacity: 0;
  transition: transform .35s cubic-bezier(.2,1.4,.4,1), opacity .25s;
  border-color: rgba(255,212,59,.45);
}
.pyp-head, .pyp-foot { flex: none; }
.pyp-steps { flex: none; max-height: 30%; overflow: auto; }
.pyp.show .pyp-back { opacity: 1; }
.pyp.show .pyp-card { transform: none; opacity: 1; }
.pyp-head { display: flex; gap: .9rem; align-items: center; }
.pyp-emo { font-size: 2.6em; line-height: 1; filter: drop-shadow(0 0 16px rgba(255,212,59,.45)); }
.pyp-titles { flex: 1; min-width: 0; }
.pyp-kicker { margin: 0; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .72em; color: #ffd43b; }
.pyp-head h2 { margin: .05em 0; font-size: 1.7em; line-height: 1.1; }
.pyp-tag { margin: 0; }
.pyp-x { align-self: flex-start; }

.pyp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; counter-reset: none; }
.pyp-steps li {
  display: inline-flex; align-items: center; gap: .45em; cursor: pointer;
  padding: .35em .9em .35em .4em; border-radius: 999px; font-weight: 600;
  background: var(--glass-2); border: 1px solid var(--stroke);
  opacity: 0; transform: translateY(8px);
  animation: pyp-in .4s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: calc(.15s + var(--i) * .12s);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.pyp-steps li + li::before { content: "→"; margin-right: .2em; color: var(--muted); }
.pyp-steps li .n { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: rgba(255,212,59,.2); color: #ffd43b; }
.pyp-steps li.on { border-color: #ffd43b; background: rgba(255,212,59,.14); box-shadow: 0 0 18px rgba(255,212,59,.35); }

.pyp-code { flex: 1 1 auto; min-height: 6em; overflow: auto; overscroll-behavior: contain; border-radius: var(--radius-sm); background: #0b0822; border: 1px solid var(--stroke); }
.pyp-code pre { margin: 0; padding: 1em 0; }
.pyp-code code { display: block; font: 500 .92em/1.55 var(--font-mono); color: #e8e4ff; counter-reset: ln; tab-size: 4; }
.pyp-code .ln {
  display: block; white-space: pre; padding: 0 1.2em 0 0; counter-increment: ln;
  opacity: 0; transform: translateX(-10px);
  animation: pyp-in .35s ease forwards; animation-delay: calc(.2s + var(--i) * .035s);
  transition: opacity .2s, background .2s;
}
.pyp-code .ln::before { content: counter(ln); display: inline-block; width: 3.2em; padding-right: 1em; text-align: right; color: rgba(183,176,216,.35); user-select: none; -webkit-user-select: none; }
.pyp-code code.focusing .ln { opacity: .28 !important; }
.pyp-code code.focusing .ln.hl { opacity: 1 !important; background: rgba(255,212,59,.08); box-shadow: inset 3px 0 0 #ffd43b; }
@keyframes pyp-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pyp-code .ln, .pyp-steps li { animation: none; opacity: 1; transform: none; } }

/* Prism tokens, in the workshop's neon palette */
.pyp-code .token.comment { color: #8f86c4; font-style: italic; }
.pyp-code .token.string, .pyp-code .token.triple-quoted-string { color: var(--lime); }
.pyp-code .token.keyword, .pyp-code .token.boolean { color: var(--pink); font-weight: 700; }
.pyp-code .token.builtin, .pyp-code .token.function { color: var(--cyan); }
.pyp-code .token.number { color: var(--amber); }
.pyp-code .token.operator, .pyp-code .token.punctuation { color: #c9c3ee; }
.pyp-code .token.decorator, .pyp-code .token.class-name { color: #ffd43b; }
.pyp-code .token.string-interpolation .token.interpolation { color: #e8e4ff; }

.pyp-foot { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pyp-foot .spacer { flex: 1; }
.pyp-pip { font-family: var(--font-mono); font-size: .85em; }
@media (max-width: 640px) {
  .pyp { padding: 0; }
  .pyp-card { border-radius: 0; height: 100vh; height: 100dvh; max-height: none; }
  .pyp-code code { font-size: .78em; }
  .pyp-head h2 { font-size: 1.35em; }
}

/* ---------- 💡 Intuition (js/intuition-panel.js) ---------- */
.btn.intu {
  background: linear-gradient(90deg, rgba(34,228,255,.22), rgba(182,255,59,.2));
  border-color: var(--lime);
}
.btn.intu:hover { box-shadow: 0 0 22px rgba(182,255,59,.45); }
body.play header.top .btn.intu { margin-left: auto; }
body.play header.top .btn.intu + .btn.py { margin-left: 0; }

/* the small 💡 next to an instruction */
.ib {
  all: unset; cursor: pointer; display: inline-grid; place-items: center;
  width: 1.55em; height: 1.55em; margin-left: .45em; vertical-align: -.2em;
  border-radius: 50%; font-size: .85em; line-height: 1;
  background: rgba(182,255,59,.14); border: 1px solid rgba(182,255,59,.6);
  box-shadow: 0 0 0 0 rgba(182,255,59,.55); animation: ib-pulse 2.8s ease-out infinite;
  transition: transform .15s;
}
.ib:hover, .ib:focus-visible { transform: scale(1.18) rotate(-8deg); background: rgba(182,255,59,.3); }
@keyframes ib-pulse { 0% { box-shadow: 0 0 0 0 rgba(182,255,59,.5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(182,255,59,0); } }
.ib-line { display: flex; align-items: center; gap: .1em; font-size: .85rem; font-weight: 600; color: var(--lime); cursor: pointer; margin-bottom: -.25rem; }
.ib-line .ib { margin-left: 0; margin-right: .35em; }
.ib.inline { align-self: center; margin-left: .1em; font-size: 1rem; }
html.embedded .ib-line { font-size: .75rem; margin-bottom: -.45rem; }
@media (prefers-reduced-motion: reduce) { .ib { animation: none; } }

/* the panel — same robust sizing as the Python panel */
.ip { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: clamp(8px, 2.5vw, 36px); }
.ip[hidden] { display: none; }
.ip-back { position: absolute; inset: 0; background: rgba(5,3,20,.74); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0; transition: opacity .25s; }
.ip-card {
  position: relative; width: min(1260px, 100%);
  max-height: calc(100vh - 2 * clamp(8px, 2.5vw, 36px));
  max-height: calc(100dvh - 2 * clamp(8px, 2.5vw, 36px));
  display: flex; flex-direction: column; gap: .8rem; overflow: hidden;
  padding: clamp(14px, 2vw, 26px); background: rgba(21,15,58,.95);
  font-size: clamp(13px, min(1.1vw, 2.2vh), 20px); color: var(--ink); text-align: left;
  border-color: rgba(182,255,59,.45);
  transform: translateY(30px) scale(.96); opacity: 0;
  transition: transform .35s cubic-bezier(.2,1.4,.4,1), opacity .25s;
}
.ip.show .ip-back { opacity: 1; }
.ip.show .ip-card { transform: none; opacity: 1; }
.ip-head { flex: none; display: flex; gap: .9rem; align-items: center; }
.ip-emo { font-size: 2.5em; line-height: 1; filter: drop-shadow(0 0 16px rgba(182,255,59,.45)); }
.ip-titles { flex: 1; min-width: 0; }
.ip-kicker { margin: 0; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .72em; color: var(--lime); }
.ip-head h2 { margin: .05em 0 0; font-size: 1.65em; line-height: 1.1; }
.ip-x { align-self: flex-start; flex: none; }

.ip-nav { flex: none; display: flex; gap: .45rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.ip-nav .chip {
  all: unset; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: .4em;
  padding: .35em .85em .35em .5em; border-radius: 999px; font-weight: 600; font-size: .85em;
  background: var(--glass-2); border: 1px solid var(--stroke); transition: background .2s, border-color .2s, box-shadow .2s;
}
.ip-nav .chip .n { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: rgba(182,255,59,.18); color: var(--lime); font-size: .9em; }
.ip-nav .chip:hover { background: rgba(255,255,255,.16); }
.ip-nav .chip.on { border-color: var(--lime); background: rgba(182,255,59,.14); box-shadow: 0 0 16px rgba(182,255,59,.3); }

.ip-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px; }
.ip-art svg { display: block; width: 100%; height: auto; max-height: 34vh; }
.ip-art { border-radius: var(--radius-sm); background: radial-gradient(120% 120% at 50% 0%, rgba(139,92,255,.16), rgba(10,7,32,.6)); border: 1px solid var(--stroke); padding: .4em; }

/* big picture: three illustrated cards */
.ip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ip-part {
  display: flex; flex-direction: column; gap: .55rem; padding: 1rem; border-radius: var(--radius);
  background: rgba(255,255,255,.05); border: 1px solid var(--stroke); border-top: 3px solid var(--col);
  opacity: 0; transform: translateY(14px); animation: pyp-in .5s cubic-bezier(.2,1.4,.4,1) forwards;
}
.ip-part.how { animation-delay: .1s; } .ip-part.why { animation-delay: .2s; }
.ip-tag { margin: 0; font-size: .72em; font-weight: 800; letter-spacing: .16em; color: var(--col); }
.ip-part h3 { margin: 0; font-size: 1.12em; }
.ip-part > p { margin: 0; line-height: 1.45; color: #ddd8f5; }
.ip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ip-list li { display: grid; grid-template-columns: auto 1fr; gap: .55em; align-items: start; line-height: 1.4; color: #ddd8f5;
  opacity: 0; transform: translateX(-8px); animation: pyp-in .4s ease forwards; animation-delay: calc(.35s + var(--i) * .15s); }
.ip-list .n { display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: rgba(255,79,216,.2); color: var(--pink); font-weight: 700; font-size: .85em; }

/* one step */
.ip-step { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.ip-art.big svg { max-height: 52vh; }
.ip-explain { display: grid; gap: .65rem; }
.ip-steplabel { margin: 0; color: var(--muted); }
.ip-steplabel b { color: var(--lime); font-family: var(--font-display); font-size: 1.15em; }
.ip-explain section { padding: .7em .9em; border-radius: var(--radius-sm); background: rgba(255,255,255,.05); border-left: 3px solid var(--col);
  opacity: 0; transform: translateX(10px); animation: pyp-in .45s ease forwards; }
.ip-explain section.you { --col: var(--cyan); animation-delay: .05s; }
.ip-explain section.ai  { --col: var(--pink); animation-delay: .18s; }
.ip-explain section.why { --col: var(--amber); animation-delay: .31s; }
.ip-explain h4 { margin: 0 0 .25em; font-family: var(--font-display); font-size: 1em; color: var(--col); }
.ip-explain p { margin: 0; line-height: 1.45; }
.ip-stepnav { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }

@media (max-width: 900px) {
  .ip-grid { grid-template-columns: 1fr; }
  .ip-step { grid-template-columns: 1fr; }
  .ip-art svg { max-height: 30vh; }
}
@media (max-width: 640px) {
  .ip { padding: 0; }
  .ip-card { border-radius: 0; height: 100vh; height: 100dvh; max-height: none; }
  .ip-head h2 { font-size: 1.3em; }
}
@media (prefers-reduced-motion: reduce) {
  .ip-part, .ip-list li, .ip-explain section { animation: none; opacity: 1; transform: none; }
}