:root{
  --paper:#f5f5f7; --ink:#1d1d1f; --ink-soft:#6e6e73; --line:rgba(0,0,0,0.09);
  --accent:#0071e3; --accent-hi:#4aa4ff; --accent-glow:rgba(0,113,227,0.3);
  --good:#30d158; --good-glow:rgba(48,209,88,0.35);
  --code-bg:#1c1c1e; --code-ink:#f2f2f7; --code-dim:#8e8e93;
  --panel:rgba(255,255,255,0.72); --panel-edge:rgba(255,255,255,0.8); --panel-shadow:rgba(20,40,80,0.09);
  --serif:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(0.22,0.61,0.36,1); --spring:cubic-bezier(0.34,1.56,0.64,1);
  --t-fast:0.22s; --t-med:0.4s;
}
[data-theme="dark"]{
  --paper:#0c0c0f; --ink:#f2f2f7; --ink-soft:#9a9aa2; --line:rgba(255,255,255,0.12);
  --accent:#4aa4ff; --accent-hi:#7cc0ff; --accent-glow:rgba(74,164,255,0.35);
  --code-bg:#161618; --code-ink:#f2f2f7; --code-dim:#8e8e93;
  --panel:rgba(40,40,48,0.6); --panel-edge:rgba(255,255,255,0.14); --panel-shadow:rgba(0,0,0,0.5);
  --btn-bg:linear-gradient(160deg,var(--accent-hi),var(--accent)); --btn-ink:#fff;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); color:var(--ink); background:var(--paper); min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; line-height:1.6;
  transition:background var(--t-med) var(--ease), color var(--t-med) var(--ease); }
.aura{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(1000px 700px at 80% -10%, rgba(0,113,227,0.07), transparent 60%),
             radial-gradient(700px 600px at 5% 108%, rgba(90,160,255,0.06), transparent 60%); }

/* ---------- First-time hook: type one line, watch it run ---------- */
.theme-toggle{ position:absolute; top:18px; right:18px; z-index:160; width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink); display:grid; place-items:center; padding:0;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 6px 18px var(--panel-shadow);
  transition:transform var(--t-fast) var(--spring), background var(--t-med) var(--ease); }
.theme-toggle:hover{ transform:translateY(-2px) rotate(-8deg); }
.theme-toggle svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tt-sun{ display:grid; }
.tt-moon{ display:none; }
[data-theme="dark"] .tt-sun{ display:none; }
[data-theme="dark"] .tt-moon{ display:grid; }
/* Satisfying theme-change wipe: a soft circle blooms from the toggle,
   sweeping over the buttons (feels 3D) while each fades to its new color. */
.theme-wipe{ position:fixed; z-index:158; left:var(--wx,100%); top:var(--wy,0); width:10px; height:10px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none; mix-blend-mode:normal; }
.theme-wipe.go{ animation:themewipe 0.7s var(--ease) forwards; }
@keyframes themewipe{
  0%{ transform:translate(-50%,-50%) scale(0); opacity:0.75; }
  55%{ opacity:0.7; }
  100%{ transform:translate(-50%,-50%) scale(240); opacity:0; }
}
/* Glass surfaces ease into their new theme colors (not snap). Only surfaces
   without a transform-based hover, so we don't clobber those animations. */
.ghost-btn,.journey-close,.picker-close,.task,.did,.sound-onboard,.jrow{
  transition:background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.replay-hook{ position:fixed; bottom:16px; left:16px; z-index:150; width:34px; height:34px; border-radius:50%;
  font-size:0.85rem; color:var(--ink-soft); background:rgba(255,255,255,0.7); border:1px solid var(--line);
  cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0.5; transition:opacity var(--t-fast) var(--ease); }
.replay-hook:hover{ opacity:1; }
.hook{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; text-align:center; padding:32px;
  background:var(--paper); transition:opacity 0.6s var(--ease); }
.hook.out{ opacity:0; pointer-events:none; }
.hook-inner{ max-width:560px; width:100%; }
.hook-kicker{ font-family:var(--sans); font-size:0.82rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.hook h1{ font-family:var(--serif); font-weight:600; font-size:clamp(36px,6.5vw,60px); letter-spacing:-2px; line-height:1.05; }
.hook-sub{ color:var(--ink-soft); font-size:clamp(16px,2vw,19px); margin:20px auto 0; max-width:40ch; line-height:1.55; }
.hook-editor{ margin:38px auto 0; max-width:440px; border-radius:18px; overflow:hidden; position:relative; cursor:text;
  background:var(--code-bg); box-shadow:0 20px 50px rgba(10,20,50,0.22), inset 0 1px 0 rgba(255,255,255,0.12); text-align:left; }
.hook-typed{ position:relative; padding:26px 24px 14px; font-family:var(--mono); font-size:clamp(20px,4vw,30px); color:var(--code-ink); min-height:1.4em; white-space:pre-wrap; word-break:break-word; }
.hch{ display:inline-block; }
.hch.bad{ color:#ff6961; background:rgba(255,105,97,0.16); border-radius:3px; }
.hch.pop{ animation:chpop 0.24s var(--spring); }
.hook-ghost{ color:var(--code-dim); }
.hook-caret{ display:inline-block; width:2px; height:1.1em; background:var(--accent-hi); vertical-align:text-bottom; margin-left:1px; animation:blink 1.1s step-end infinite; box-shadow:0 0 8px var(--accent-glow); }
.hook-input{ position:absolute; inset:0; opacity:0; cursor:text; }
.hook-console{ display:flex; align-items:center; gap:10px; padding:12px 24px 18px; border-top:1px solid rgba(255,255,255,0.08); font-family:var(--mono); }
.hook-out-label{ font-size:0.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--code-dim); }
.hook-out{ font-size:1.1rem; color:#7bffb0; opacity:0; transform:translateY(4px); transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.hook-out.show{ opacity:1; transform:none; }
.hook-done{ opacity:0; transform:translateY(12px); transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); margin-top:30px; pointer-events:none; }
.hook-done.show{ opacity:1; transform:none; pointer-events:auto; }
.hook-done-msg{ color:var(--ink); font-size:1.05rem; font-weight:500; margin-bottom:20px; }
.hook-skip{ display:block; margin:26px auto 0; font-family:var(--sans); font-size:0.85rem; font-weight:600; color:var(--ink-soft);
  background:transparent; border:none; cursor:pointer; }
.hook-skip:hover{ color:var(--ink); }



.slider{ position:relative; width:62px; height:34px; border-radius:999px; border:1px solid var(--line); cursor:pointer;
  background:rgba(120,120,128,0.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.14); transition:background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); padding:0; }
.slider .knob{ position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(180deg,#fff,#f0f0f3); box-shadow:0 2px 6px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.9);
  transition:transform var(--t-med) var(--spring); }
.slider[aria-checked="true"]{ background:linear-gradient(160deg,var(--accent-hi),var(--accent)); border-color:transparent;
  box-shadow:0 0 0 4px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.4); }
.slider[aria-checked="true"] .knob{ transform:translateX(28px); }
.slider.small{ width:52px; height:29px; }
.slider.small .knob{ width:22px; height:22px; }
.slider.small[aria-checked="true"] .knob{ transform:translateX(23px); }

/* ---------- Sound gate ---------- */
.gate{ position:fixed; inset:0; z-index:50; overflow-y:auto; text-align:center; padding:min(9vh,72px) 32px 96px;
  background:var(--paper); transition:opacity var(--t-med) var(--ease); }
.gate.hide{ opacity:0; pointer-events:none; }
.gate-inner{ max-width:540px; margin:0 auto; }
/* Consistent home rhythm: brand, title, sub, sound, resume, CTA cluster. */
.brand-big{ display:inline-flex; align-items:center; gap:11px; font-family:var(--serif); font-weight:600; font-size:1.4rem; letter-spacing:-0.5px; margin-bottom:36px; }
/* Reserve stable height so rotating text never shifts the layout. */
.gate h1{ min-height:2.2em; display:flex; align-items:center; justify-content:center; }
.gate-sub{ min-height:3.2em; display:flex; align-items:center; justify-content:center; }
/* Logo mark: glossy glass gem tile with an S-caret monogram. */
.brand-big .mark, .brand .mark{ width:28px; height:28px; border-radius:9px; position:relative; overflow:hidden;
  background:linear-gradient(155deg,#7cc0ff,var(--accent-hi) 45%,var(--accent)); box-shadow:0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -6px 12px rgba(0,40,120,0.25); }
/* Glossy top-corner sheen */
.brand-big .mark::after, .brand .mark::after{ content:""; position:absolute; top:-30%; left:-20%; width:90%; height:80%; border-radius:50%;
  background:linear-gradient(160deg, rgba(255,255,255,0.7), rgba(255,255,255,0)); pointer-events:none; }
/* The S-caret monogram */
.brand-big .mark::before, .brand .mark::before{ content:""; position:absolute; inset:0; border-radius:inherit;
  background:no-repeat center / 17px 17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 7.5 C15 6 12.5 5.5 10.5 6.3 C8 7.3 8.2 9.8 10.5 10.8 C13 11.8 14.5 12.5 14.5 14.2 C14.5 16.2 12 17 9.5 16' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round'/%3E%3Crect x='16.4' y='13.6' width='2.1' height='5.2' rx='1' fill='%23ffffff'/%3E%3C/svg%3E"); }
.gate h1{ font-family:var(--serif); font-weight:700; font-size:clamp(40px,7vw,68px); line-height:1.06; letter-spacing:-2.2px;
  transition:opacity 0.5s var(--ease), transform 0.5s var(--ease); }
/* Bubbly liquid-3D headline */
.liquid3d{
  background:linear-gradient(175deg, #8fc4ff 0%, #2f8fff 42%, #0058c4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 8px rgba(0,113,227,0.28));
}
.gate-sub{ transition:opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.gate h1.fade, .gate .gate-sub.fade{ opacity:0; transform:translateY(8px); }

/* Why section */
.why{ margin-top:56px; padding-top:30px; border-top:1px solid var(--line); max-width:44ch; margin-left:auto; margin-right:auto; }
.why-line{ font-size:0.78rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.why p{ font-size:0.98rem; color:var(--ink-soft); line-height:1.65; margin:0; }

/* Session picker */
.sessions{ display:flex; flex-direction:column; gap:22px; margin-top:34px; }
.track-head{ font-size:0.85rem; font-weight:700; color:var(--ink); margin-bottom:12px; text-align:left; }
.track-head span{ color:var(--ink-soft); font-weight:500; }
.track-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }

/* Session select page */
.picker{ position:fixed; inset:0; z-index:65; display:none; overflow:hidden; background:var(--paper); }
.picker.show{ display:block; animation:jfade 0.4s var(--ease); }
.picker-scroll{ position:absolute; inset:0; overflow-y:auto; padding:min(9vh,72px) clamp(24px,5vw,48px) 80px; }
.picker-head{ max-width:640px; margin:0 auto 10px; text-align:center; }
.picker-kicker{ font-size:0.8rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); }
.picker-head h1{ font-family:var(--serif); font-weight:700; font-size:clamp(34px,5.5vw,56px); letter-spacing:-1.6px; margin:14px 0; }
.picker-head p{ color:var(--ink-soft); font-size:1.05rem; max-width:44ch; margin:0 auto; }
.picker .sessions{ max-width:820px; margin:34px auto 0; }
.picker-close{ position:fixed; top:20px; right:20px; z-index:5; width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,0.7); border:1px solid var(--line); color:var(--ink); font-size:1rem; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

.sess-card{ font-family:var(--sans); cursor:pointer; text-align:left; padding:20px 22px; border-radius:20px;
  background:linear-gradient(160deg, rgba(255,255,255,0.9), rgba(244,247,252,0.7));
  border:1px solid rgba(255,255,255,0.8); box-shadow:0 8px 26px rgba(20,40,80,0.09), inset 0 1px 0 rgba(255,255,255,0.9);
  display:flex; flex-direction:column; gap:8px; transition:transform var(--t-fast) var(--spring), box-shadow var(--t-fast) var(--ease); }
.sess-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(20,40,80,0.14); }
.sess-card.cleared{ border-color:rgba(48,209,88,0.4); }
.sc-top{ display:flex; align-items:center; justify-content:space-between; }
.sess-tag{ font-size:0.72rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--accent); }
.sc-done{ font-size:0.75rem; font-weight:700; color:var(--good); }
.sess-name{ font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:-0.5px; color:var(--ink); }
.sc-blurb{ font-size:0.92rem; color:var(--ink-soft); line-height:1.55; }
.sc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.sc-tag{ font-family:var(--mono); font-size:0.75rem; color:var(--ink-soft); padding:4px 9px; border-radius:999px; background:rgba(0,113,227,0.07); border:1px solid rgba(0,113,227,0.12); }
.sc-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding-top:12px; border-top:1px solid var(--line); }
.sess-meta{ font-size:0.82rem; color:var(--ink-soft); }
.sc-go{ font-size:0.9rem; font-weight:700; color:var(--accent); }

/* Did you know? sidebar nugget */
.did{ margin-top:22px; padding:16px 18px; border-radius:14px; background:rgba(0,113,227,0.06); border:1px solid rgba(0,113,227,0.14);
  display:none; }
.did.show{ display:block; animation:conIn var(--t-med) var(--ease); }
.did-label{ display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.did-text{ font-size:0.9rem; color:var(--ink-soft); line-height:1.6; }

/* Micro-quiz */
.quiz{ border-radius:20px; padding:26px 24px; margin-bottom:16px; color:var(--code-ink);
  max-height:0; opacity:0; overflow:hidden; transition:max-height var(--t-med) var(--ease), opacity var(--t-med) var(--ease), padding var(--t-med) var(--ease); }
.quiz.show{ max-height:340px; opacity:1; }
.quiz-label{ font-family:var(--mono); font-size:0.72rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--accent-hi); }
.quiz-q{ font-family:var(--serif); font-weight:600; font-size:1.2rem; letter-spacing:-0.4px; margin:10px 0 18px; line-height:1.3; }
.quiz-opts{ display:flex; flex-direction:column; gap:10px; }
.quiz-opt{ font-family:var(--sans); text-align:left; cursor:pointer; font-size:0.98rem; font-weight:500; color:var(--code-ink);
  padding:13px 16px; border-radius:12px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--spring); }
.quiz-opt:hover{ background:rgba(255,255,255,0.16); }
.quiz-opt.right{ background:linear-gradient(160deg,#4be07a,var(--good)); border-color:transparent; color:#04240f; font-weight:600; }
.quiz-opt.wrong{ background:rgba(255,105,97,0.2); border-color:rgba(255,105,97,0.5); animation:shake 0.35s; }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }

/* Editor locked (while quiz is up) + fix-mode badge */
.editor.locked{ opacity:0.4; filter:blur(1px); pointer-events:none; transition:opacity var(--t-med) var(--ease); }
.editor.fixmode .ed-name::after{ content:" · fix it"; color:#febc2e; }

/* Done card actions */
.done-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.ghost-btn{ font-family:var(--sans); font-weight:600; font-size:1rem; cursor:pointer; color:rgba(242,242,247,0.8);
  background:transparent; border:1px solid rgba(255,255,255,0.2); padding:16px 26px; border-radius:999px; transition:all var(--t-fast) var(--ease); }
.ghost-btn:hover{ color:#fff; border-color:rgba(255,255,255,0.4); }
.gate p{ color:var(--ink-soft); font-size:clamp(17px,2vw,20px); margin:22px auto 0; max-width:42ch; }
.sound-onboard{ display:inline-flex; align-items:center; gap:16px; margin:32px 0 28px; padding:16px 24px; border-radius:999px;
  background:rgba(255,255,255,0.7); border:1px solid var(--line); box-shadow:0 8px 26px rgba(20,40,80,0.08); }
.so-label{ font-weight:600; font-size:1rem; }
.so-state{ font-size:0.95rem; font-weight:600; color:var(--ink-soft); min-width:26px; text-align:left; transition:color var(--t-med) var(--ease); }
.so-state.on{ color:var(--accent); }
.enter-btn{ font-family:var(--sans); font-weight:600; font-size:1.05rem; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(160deg,var(--accent-hi),var(--accent)); padding:16px 34px; border-radius:999px;
  box-shadow:0 8px 22px var(--accent-glow); transition:transform var(--t-fast) var(--spring), box-shadow var(--t-fast) var(--ease); }
.enter-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px var(--accent-glow); }
.gate-hint{ margin-top:16px; font-size:0.9rem; color:var(--ink-soft); }
/* Secondary links as one tidy centered row, not two stacked buttons. */
.gate-links{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:20px; }
.gate-links-dot{ color:var(--ink-soft); opacity:0.5; }

/* ---------- App ---------- */
.app{ opacity:0; transition:opacity var(--t-med) var(--ease); min-height:100vh; display:flex; flex-direction:column; }
.app.show{ opacity:1; }
.bar{ display:flex; align-items:center; justify-content:space-between; padding:18px clamp(24px,5vw,48px); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:1.15rem; letter-spacing:-0.4px; }
.brand-home{ background:none; border:none; cursor:pointer; color:var(--ink); padding:4px 6px; margin-left:-6px; border-radius:10px;
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--spring); }
.brand-home:hover{ opacity:0.7; transform:translateX(-2px); }
.bar-right{ display:flex; align-items:center; gap:22px; }
.session{ font-size:0.9rem; color:var(--ink-soft); font-weight:500; }
.sound-mini{ display:flex; align-items:center; gap:10px; }
/* Split-screen toggle (long sessions only) */
.split-btn{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel); cursor:pointer;
  display:grid; place-items:center; padding:0; color:var(--ink-soft); transition:all var(--t-fast) var(--ease); }
.split-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.split-btn:hover{ color:var(--ink); }
.split-btn.active{ color:#fff; background:linear-gradient(160deg,var(--accent-hi),var(--accent)); border-color:transparent; box-shadow:0 3px 12px var(--accent-glow); }
.sm-ico{ font-size:1.1rem; color:var(--ink-soft); transition:color var(--t-med) var(--ease), text-shadow var(--t-med) var(--ease); }
.sm-ico.on{ color:var(--accent); text-shadow:0 0 12px var(--accent-glow); }

.progress{ height:3px; background:rgba(0,0,0,0.06); }
.progress-fill{ height:100%; width:20%; background:linear-gradient(90deg,var(--accent-hi),var(--accent)); border-radius:0 999px 999px 0; transition:width var(--t-med) var(--ease); }

.stage{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center;
  max-width:1180px; width:100%; margin:0 auto; padding:clamp(30px,5vw,64px) clamp(24px,5vw,48px); }

/* Teaching side */
.step-count{ font-size:0.82rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.teach-title{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,4vw,44px); line-height:1.1; letter-spacing:-1.4px; }
.teach-body{ color:var(--ink-soft); font-size:clamp(16px,1.6vw,18px); margin-top:18px; max-width:46ch; }
.task{ margin-top:28px; padding:18px 20px; border-radius:16px; background:rgba(255,255,255,0.72); border:1px solid var(--line); box-shadow:0 6px 20px rgba(20,40,80,0.06); }
.task-label{ display:block; font-size:0.75rem; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
.target{ font-family:var(--mono); font-size:1.15rem; color:var(--ink); letter-spacing:-0.2px; }
.explain{ margin-top:20px; font-size:0.95rem; color:var(--ink-soft); line-height:1.6; max-width:46ch; }
.explain code, .target code{ font-family:var(--mono); }

/* Requirement checklist */
.checklist{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.check{ display:flex; align-items:center; gap:12px; font-size:0.95rem; color:var(--ink-soft); transition:color var(--t-med) var(--ease); }
.check .cbox{ width:24px; height:24px; flex:none; border-radius:8px; border:1.5px solid var(--line); display:grid; place-items:center;
  color:#fff; background:transparent; transition:background var(--t-med) var(--spring), border-color var(--t-med) var(--ease), transform var(--t-med) var(--spring); }
.check .cbox svg{ width:16px; height:16px; }
.check .cbox path{ stroke-dasharray:30; stroke-dashoffset:30; transition:stroke-dashoffset var(--t-med) var(--ease); }
.check.done{ color:var(--ink); }
.check.done .cbox{ background:linear-gradient(160deg,#4be07a,var(--good)); border-color:transparent; box-shadow:0 4px 12px var(--good-glow); animation:pop 0.4s var(--spring); }
.check.done .cbox path{ stroke-dashoffset:0; }
@keyframes pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.28); } 100%{ transform:scale(1); } }

/* Editor side */
.editor-wrap{ display:flex; flex-direction:column; gap:16px; }
.editor{ border-radius:20px; overflow:hidden; }
.glass{ background:rgba(28,28,30,0.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1); box-shadow:0 20px 60px rgba(10,20,50,0.28), inset 0 1px 0 rgba(255,255,255,0.14); }
.ed-top{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.08); }
.dot{ width:12px; height:12px; border-radius:50%; }
.dot.r{ background:#ff5f57; } .dot.y{ background:#febc2e; } .dot.g{ background:#28c840; }
.ed-name{ margin-left:10px; font-family:var(--mono); font-size:0.82rem; color:var(--code-dim); }
.ed-body{ position:relative; padding:28px 24px; min-height:120px; font-family:var(--mono); font-size:1.35rem; line-height:1.6; }
.ghost-inline{ color:var(--code-dim); opacity:0.5; }
.typed{ position:relative; color:var(--code-ink); white-space:pre-wrap; word-break:break-word; min-height:1.6em; }
.typed .ch.ok{ color:var(--code-ink); }
.typed .ch.bad{ color:#ff6961; background:rgba(255,105,97,0.16); border-radius:3px; }
.typed .ch{ display:inline-block; }
.typed .ch.pop{ animation:chpop 0.24s var(--spring); }
@keyframes chpop{ 0%{ transform:scale(1.7) translateY(-2px); opacity:0.4; } 60%{ transform:scale(0.94); } 100%{ transform:scale(1); opacity:1; } }
.caret{ display:inline-block; width:2px; height:1.25em; background:var(--accent-hi); vertical-align:text-bottom; margin-left:1px;
  animation:blink 1.1s step-end infinite; box-shadow:0 0 8px var(--accent-glow); }
@keyframes blink{ 50%{ opacity:0; } }
.ed-body.done .caret{ display:none; }
.hidden-input{ position:absolute; inset:0; opacity:0; border:none; outline:none; font-family:var(--mono); font-size:1.35rem; cursor:text; caret-color:transparent; color:transparent; background:transparent; padding:28px 24px; }
.ed-status{ padding:12px 20px; border-top:1px solid rgba(255,255,255,0.08); font-size:0.85rem; color:var(--code-dim); transition:color var(--t-med) var(--ease); }
.ed-status.ok{ color:var(--good); }
.ed-status.err{ color:#ff6961; }

.next-btn{ align-self:flex-end; font-family:var(--sans); font-weight:600; font-size:0.98rem; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(160deg,var(--accent-hi),var(--accent)); padding:13px 26px; border-radius:999px;
  box-shadow:0 6px 18px var(--accent-glow); transition:transform var(--t-fast) var(--spring), opacity var(--t-fast) var(--ease); }
.next-btn:hover:not(:disabled){ transform:translateY(-2px); }
.next-btn:disabled{ opacity:0.35; cursor:not-allowed; }

/* Output console — now lives inside the editor, over the code space */
.console{ border-top:1px solid rgba(255,255,255,0.08); max-height:0; overflow:hidden; opacity:0;
  transition:max-height var(--t-med) var(--ease), opacity var(--t-med) var(--ease); background:rgba(0,0,0,0.25); }
.console.show{ max-height:160px; opacity:1; }
.con-top{ padding:10px 18px 4px; }
.con-label{ font-family:var(--mono); font-size:0.72rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--good); }
.con-body{ padding:6px 18px 16px; font-family:var(--mono); font-size:1.1rem; color:var(--code-ink); white-space:pre-wrap; word-break:break-word;
  animation:conIn var(--t-med) var(--ease); }
@keyframes conIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* The Next button that appears inside the taken-over output panel (split mode). */
.con-next{ display:none; align-self:flex-start; margin:8px 18px 16px; font-family:var(--sans); font-weight:600; font-size:0.95rem; color:#fff;
  border:none; cursor:pointer; padding:11px 22px; border-radius:999px; background:linear-gradient(160deg,var(--accent-hi),var(--accent));
  box-shadow:0 6px 18px var(--accent-glow); transition:transform var(--t-fast) var(--spring); }
.con-next:hover{ transform:translateY(-2px); }

/* ---- Split screen: editor left, lesson right ---- */
.stage.split{ direction:rtl; } /* flips column order */
.stage.split > *{ direction:ltr; } /* keep content normal */
.stage.split .editor-wrap{ align-self:stretch; }
/* When solved in split mode, the output takes over the whole editor panel. */
.stage.split .console.show{ position:absolute; inset:0; max-height:none; z-index:5; display:flex; flex-direction:column;
  background:var(--code-bg); border-top:none; }
.stage.split .editor{ position:relative; }
.stage.split .console.show .con-body{ flex:1; font-size:1.4rem; padding:24px; }
.stage.split .console.show .con-next{ display:inline-block; }
.stage.split .console.show .con-top{ padding:16px 24px 4px; }
/* Hide the small footer Next in split (the big one lives in the output). */
.stage.split .next-btn{ display:none; }

/* Next button power-up when the step is solved */
.next-btn.ready{ animation:powerup 0.6s var(--spring); }
@keyframes powerup{
  0%{ transform:scale(0.9); box-shadow:0 0 0 rgba(0,113,227,0); }
  50%{ transform:scale(1.06); box-shadow:0 0 30px var(--accent-glow); }
  100%{ transform:scale(1); box-shadow:0 6px 18px var(--accent-glow); }
}

/* Done card */
.done-card{ position:fixed; inset:0; margin:auto; width:min(480px,calc(100% - 40px)); height:fit-content; z-index:40;
  border-radius:26px; padding:44px 40px; text-align:center; color:var(--code-ink);
  opacity:0; pointer-events:none; transform:scale(0.94); transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--spring); }
.done-card.show{ opacity:1; pointer-events:auto; transform:scale(1); }
.done-check{ width:64px; height:64px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; font-size:1.8rem; color:#fff;
  background:linear-gradient(160deg,#4be07a,var(--good)); box-shadow:0 8px 24px var(--good-glow); }
.done-card h2{ font-family:var(--serif); font-weight:600; font-size:1.8rem; letter-spacing:-0.8px; }
.done-card p{ color:rgba(242,242,247,0.75); margin:14px auto 28px; max-width:36ch; font-size:1rem; }

a:focus-visible,button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:12px; }

/* Cutscene concept explainer */
.cutscene{ position:fixed; inset:0; z-index:80; display:none; place-items:center; text-align:center; padding:32px;
  background:rgba(12,18,32,0.75); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); opacity:0; transition:opacity var(--t-med) var(--ease); }
.cutscene.show{ display:grid; opacity:1; }
.cut-inner{ max-width:560px; }
.cut-concept{ font-family:var(--mono); font-size:0.9rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent-hi);
  margin-bottom:24px; animation:cfade 0.5s var(--ease); }
.cut-code{ display:inline-block; padding:20px 28px; border-radius:16px; font-family:var(--mono); font-size:1.5rem; color:var(--code-ink);
  background:rgba(28,28,30,0.9); }
.cut-caret{ display:inline-block; width:2px; height:1.1em; background:var(--accent-hi); vertical-align:text-bottom; margin-left:2px; animation:blink 1.1s step-end infinite; }
.cut-arrow{ font-size:1.6rem; color:var(--accent-hi); margin:16px 0; opacity:0; animation:cfade 0.4s var(--ease) 0.4s forwards; }
.cut-out{ display:inline-block; padding:14px 24px; border-radius:14px; font-family:var(--mono); font-size:1.2rem; color:#7bffb0;
  background:rgba(28,28,30,0.9); opacity:0; transform:translateY(8px); transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--spring); }
.cut-out.show{ opacity:1; transform:none; }
.cut-say{ color:rgba(242,242,247,0.9); font-size:1.05rem; line-height:1.6; margin:26px auto 0; max-width:44ch;
  opacity:0; transform:translateY(8px); transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.cut-say.show{ opacity:1; transform:none; }
.cut-skip{ margin-top:30px; font-family:var(--sans); font-weight:600; font-size:1rem; color:#0b1220; cursor:pointer; border:none;
  background:linear-gradient(160deg,#fff,#cfe4ff); padding:14px 30px; border-radius:999px; transition:transform var(--t-fast) var(--spring); }
.cut-skip:hover{ transform:translateY(-2px); }
@keyframes cfade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* Journey link on home */
.journey-link{ font-family:var(--sans); font-weight:600; font-size:0.95rem; color:var(--accent); cursor:pointer;
  background:transparent; border:none; padding:0; transition:opacity var(--t-fast) var(--ease); }
.journey-link:hover{ opacity:0.7; }
/* Streak + Continue strip */
.resume-strip{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:0 auto 26px; }
.streak-chip{ display:inline-flex; align-items:center; gap:8px; font-size:0.9rem; font-weight:600; color:var(--ink); padding:8px 16px 8px 12px; border-radius:999px;
  background:var(--panel); border:1px solid var(--panel-edge); box-shadow:0 4px 14px var(--panel-shadow); }
.flame{ display:inline-grid; place-items:center; width:22px; height:22px; }
.flame svg{ width:20px; height:20px; }
.flame svg path{ fill:url(#flameGrad); filter:drop-shadow(0 1px 3px rgba(255,120,40,0.5)); }
.continue-btn{ font-family:var(--sans); font-weight:600; font-size:0.95rem; color:#fff; cursor:pointer; border:none;
  padding:11px 22px; border-radius:999px; background:linear-gradient(160deg,var(--accent-hi),var(--accent));
  box-shadow:0 6px 18px var(--accent-glow); transition:transform var(--t-fast) var(--spring); }
.continue-btn:hover{ transform:translateY(-2px); }

/* Finish certificate */
.cert{ position:fixed; inset:0; z-index:74; display:none; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  padding:32px; background:var(--paper); }
.cert.show{ display:flex; animation:jfade 0.5s var(--ease); }
.cert-card{ width:min(520px,100%); border-radius:28px; padding:44px 40px 36px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,0.95), rgba(233,242,255,0.85));
  border:1px solid rgba(255,255,255,0.8); box-shadow:0 30px 80px rgba(20,40,80,0.2), inset 0 1px 0 rgba(255,255,255,0.9);
  animation:certpop 0.7s var(--spring) both; }
[data-theme="dark"] .cert-card{ background:linear-gradient(160deg, rgba(50,55,70,0.7), rgba(24,26,36,0.85)); border-color:var(--panel-edge); }
.cert-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(150deg, rgba(255,255,255,0.6), transparent 40%); pointer-events:none; }
@keyframes certpop{ 0%{ opacity:0; transform:scale(0.9) translateY(20px); } 100%{ opacity:1; transform:none; } }
.cert-seal{ width:58px; height:58px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--accent-hi),var(--accent)); box-shadow:0 8px 22px var(--accent-glow); }
.cert-seal svg{ width:30px; height:30px; fill:#fff; }
.cert-kicker{ font-family:var(--mono); font-size:0.78rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent); }
.cert-card h1{ font-family:var(--serif); font-weight:700; font-size:clamp(30px,5vw,44px); letter-spacing:-1.4px; margin:14px 0; }
.cert-sub{ color:var(--ink-soft); font-size:1rem; line-height:1.6; max-width:38ch; margin:0 auto; }
.cert-sub code{ font-family:var(--mono); }
.cert-skills{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:26px 0; }
.cert-skill{ font-family:var(--mono); font-size:0.78rem; color:var(--accent); padding:5px 11px; border-radius:999px; background:rgba(0,113,227,0.08); border:1px solid rgba(0,113,227,0.16); }
[data-theme="dark"] .cert-skill{ background:rgba(74,164,255,0.12); border-color:rgba(74,164,255,0.22); }
.cert-foot{ margin-top:10px; padding-top:18px; border-top:1px solid var(--line); font-size:0.85rem; color:var(--ink-soft); }

/* Scrollytelling explainer */
.explain-scroll{ margin:72px auto 0; max-width:460px; display:flex; flex-direction:column; gap:60px; text-align:center; }
.es-step{ opacity:0; transform:translateY(30px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.es-step.in{ opacity:1; transform:none; }
.es-ico{ margin-bottom:18px; display:flex; justify-content:center; }
/* Liquid-glass badge behind each icon */
.es-ico > .es-badge{ position:relative; width:74px; height:74px; border-radius:22px; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(255,255,255,0.85), rgba(226,238,255,0.55));
  border:1px solid rgba(255,255,255,0.8); box-shadow:0 8px 24px rgba(0,80,196,0.14), inset 0 1px 0 rgba(255,255,255,0.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); overflow:hidden;
  animation:esfloat 5s var(--ease) infinite; }
.es-ico > .es-badge::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 45%); }
.es-ico svg{ width:38px; height:38px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1; }
.es-step:nth-child(2) .es-badge{ animation-delay:-1.2s; }
.es-step:nth-child(3) .es-badge{ animation-delay:-2.4s; }
.es-step:nth-child(4) .es-badge{ animation-delay:-3.6s; }
@keyframes esfloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-7px) rotate(-1.5deg); } }
/* Per-icon liveliness once revealed */
.es-step.in .es-ico svg{ animation:icodraw 0.9s var(--ease) both; }
@keyframes icodraw{ from{ opacity:0; transform:scale(0.7); } to{ opacity:1; transform:scale(1); } }
.es-step.in:nth-child(1) .es-badge svg{ animation:icodraw 0.9s var(--ease) both, keyGlow 3s ease-in-out 1s infinite; }
.es-step.in:nth-child(2) .es-badge svg{ animation:icodraw 0.9s var(--ease) both, sparkle 2.6s ease-in-out 1s infinite; }
.es-step.in:nth-child(4) .es-badge svg{ animation:icodraw 0.9s var(--ease) both, liftoff 3.4s ease-in-out 1s infinite; }
@keyframes keyGlow{ 0%,100%{ filter:none; } 50%{ filter:drop-shadow(0 0 6px var(--accent-glow)); } }
@keyframes sparkle{ 0%,100%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(18deg) scale(1.08); } }
@keyframes liftoff{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.es-step h3{ font-family:var(--serif); font-weight:600; font-size:1.5rem; letter-spacing:-0.6px; }
.es-step p{ color:var(--ink-soft); font-size:1rem; line-height:1.65; margin:10px auto 0; max-width:38ch; }

/* ---------- Progress — minimal, Apple-style ---------- */
.journey{ position:fixed; inset:0; z-index:70; display:none; background:var(--paper); color:var(--ink); }
.journey.show{ display:grid; place-items:center; animation:jfade 0.5s var(--ease); }
@keyframes jfade{ from{ opacity:0; } to{ opacity:1; } }
.journey-close{ position:fixed; top:20px; right:20px; z-index:5; width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,0.7); border:1px solid var(--line); color:var(--ink); font-size:1rem; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.prog{ text-align:center; padding:32px; max-width:460px; animation:progrise 0.7s var(--ease) both; }
@keyframes progrise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.prog-kicker{ font-family:var(--mono); font-size:0.8rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:34px; }
/* The one elegant progress ring — liquid glass */
.prog-ring{ position:relative; width:200px; height:200px; margin:0 auto 40px; }
/* Frosted glass disc behind the ring */
.prog-ring::before{ content:""; position:absolute; inset:14px; border-radius:50%;
  background:linear-gradient(160deg, rgba(255,255,255,0.75), rgba(226,238,255,0.35));
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,0.8);
  box-shadow:0 16px 40px rgba(20,40,80,0.16), inset 0 2px 6px rgba(255,255,255,0.9), inset 0 -8px 20px rgba(20,40,80,0.06); }
/* Specular highlight sweep on the glass */
.prog-ring::after{ content:""; position:absolute; inset:14px; border-radius:50%; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 42%); }
.prog-ring svg{ position:relative; z-index:1; width:100%; height:100%; transform:rotate(-90deg); filter:drop-shadow(0 2px 6px var(--accent-glow)); }
.pr-track{ fill:none; stroke:rgba(0,0,0,0.06); stroke-width:6; }
.pr-fill{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round;
  transition:stroke-dashoffset 1s var(--ease); }
.prog-count{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--serif); line-height:1; }
.prog-count > span:first-child{ font-size:3.6rem; font-weight:600; letter-spacing:-2px; color:var(--ink); }
.prog-of{ font-size:0.95rem; color:var(--ink-soft); font-weight:500; margin-top:6px; letter-spacing:0.3px; }
.prog-place{ font-family:var(--serif); font-weight:600; font-size:clamp(32px,6vw,52px); letter-spacing:-1.6px; line-height:1.05; }
.prog-where{ color:var(--ink-soft); font-size:1rem; margin-top:8px; }
.prog-status{ color:var(--ink-soft); font-size:1.02rem; margin-top:22px; line-height:1.5; }
/* Quiet dots — a subtle sense of the path */
.prog-dots{ display:flex; gap:9px; justify-content:center; margin-top:34px; }
.pdot{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:all var(--t-med) var(--ease); }
.pdot.done{ background:var(--accent); }
.pdot.now{ background:var(--accent); box-shadow:0 0 0 4px var(--accent-glow); transform:scale(1.15); }

@media (max-width:860px){
  .stage{ grid-template-columns:1fr; gap:34px; }
  .session{ display:none; }
}

/* ---------- Dark mode surface overrides ---------- */
[data-theme="dark"] .sound-onboard,
[data-theme="dark"] .task,
[data-theme="dark"] .sess-card,
[data-theme="dark"] .journey-close,
[data-theme="dark"] .picker-close,
[data-theme="dark"] .replay-hook{
  background:var(--panel); border-color:var(--panel-edge); color:var(--ink);
  box-shadow:0 8px 24px var(--panel-shadow);
}
[data-theme="dark"] .prog-ring::before{
  background:linear-gradient(160deg, rgba(60,60,72,0.6), rgba(30,30,40,0.4));
  border-color:var(--panel-edge);
  box-shadow:0 16px 40px rgba(0,0,0,0.5), inset 0 2px 6px rgba(255,255,255,0.12), inset 0 -8px 20px rgba(0,0,0,0.3);
}
[data-theme="dark"] .prog-ring::after{ background:linear-gradient(150deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 42%); }
[data-theme="dark"] .pr-track{ stroke:rgba(255,255,255,0.1); }
[data-theme="dark"] .slider{ background:rgba(255,255,255,0.14); }
[data-theme="dark"] .slider .knob{ background:linear-gradient(180deg,#f4f4f6,#d8d8de); }
[data-theme="dark"] .did{ background:rgba(74,164,255,0.1); border-color:rgba(74,164,255,0.22); }
[data-theme="dark"] .sc-tag{ background:rgba(74,164,255,0.12); border-color:rgba(74,164,255,0.2); }
[data-theme="dark"] .picker .aura, [data-theme="dark"] .aura{ opacity:0.5; }
/* Dark-mode icon badges: dark glass, bright icon, subtle glow. */
[data-theme="dark"] .es-ico > .es-badge{
  background:linear-gradient(150deg, rgba(74,164,255,0.16), rgba(40,44,58,0.5));
  border-color:rgba(255,255,255,0.16);
  box-shadow:0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.16);
}
[data-theme="dark"] .es-ico > .es-badge::before{ background:linear-gradient(150deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 45%); }
[data-theme="dark"] .es-ico svg{ stroke:var(--accent-hi); filter:drop-shadow(0 0 6px var(--accent-glow)); }

@media (prefers-reduced-motion:reduce){
  .slider .knob,.app,.gate,.done-card,.caret,.check .cbox,.check .cbox path,.typed .ch.pop,.cutscene,.cut-arrow,.cut-caret,.es-step,.es-badge,.es-ico svg,.theme-wipe{ transition:none; animation:none; }
  .check .cbox path{ stroke-dashoffset:0; }
  .cut-arrow{ opacity:1; }
  .es-step{ opacity:1; transform:none; }
}