@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,500;1,6..72,600&display=swap");

:root {
  --ink: #102b32;
  --paper: #f3f5e9;
  --cream: #e9edda;
  --acid: #cafa57;
  --aqua: #87e6dc;
  --blue: #2e75b6;
  --orange: #f09a58;
  --line: rgba(16, 43, 50, 0.16);
  --muted: #64747a;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", "Segoe UI", sans-serif;
  --mono: "DM Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 7%, rgba(202, 250, 87, 0.24), transparent 26rem),
    linear-gradient(180deg, #f7f8ef 0, var(--paper) 42rem, #eef1e5 100%);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, a, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.lab-nav {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.brand img { width: 136px; display: block; }
.lab-nav nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 700; }
.lab-nav nav a:last-child { border: 1px solid var(--ink); border-radius: 999px; padding: 10px 17px; }
.lab-access-state { padding: 8px 12px; border-radius: 999px; color: #496267; background: rgba(16,43,50,.07); font: 700 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.lab-access-state[data-state="staff"] { color: #18332f; background: var(--acid); }
.lab-access-state[data-state="premium"] { color: white; background: #28736c; }

main { overflow: hidden; }
.lab-hero {
  width: min(1380px, calc(100% - 48px));
  min-height: 680px;
  margin: 0 auto;
  padding: 74px 0 82px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, 0.7fr);
  gap: clamp(54px, 8vw, 130px);
  align-items: center;
  position: relative;
}
.hero-orbit { position: absolute; width: 600px; height: 600px; left: -290px; top: 28px; opacity: 0.4; pointer-events: none; }
.hero-orbit i { position: absolute; inset: 0; border: 1px solid rgba(16,43,50,.2); border-radius: 50%; }
.hero-orbit i:nth-child(2) { inset: 90px; }
.hero-orbit i:nth-child(3) { inset: 180px; background: rgba(135,230,220,.22); }
.hero-copy { position: relative; z-index: 1; }
.eyebrow, .section-heading p, .passport-section header p, .membership-copy > p {
  margin: 0 0 18px;
  color: #2b6b68;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-copy h1, .section-heading h2, .passport-section h2, .membership-copy h2 {
  margin: 0;
  font-size: clamp(54px, 6.2vw, 98px);
  line-height: .94;
  letter-spacing: -.065em;
  font-weight: 600;
}
.hero-copy h1 em, .section-heading h2 em, .passport-section h2 em, .membership-copy h2 em { color: #22786f; font-family: var(--serif); font-weight: 500; }
.hero-copy > p:not(.eyebrow) { max-width: 660px; margin: 30px 0; font-size: 17px; line-height: 1.72; color: #435b60; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.primary, .secondary, .runner-primary, .runner-secondary {
  border: 0;
  border-radius: 999px;
  min-height: 52px;
  padding: 0 24px;
  font-weight: 700;
  cursor: pointer;
}
.primary, .runner-primary { background: var(--ink); color: white; }
.secondary, .runner-secondary { background: transparent; border: 1px solid var(--ink); }
.hero-copy small { display: block; margin-top: 16px; color: var(--muted); font-size: 12px; }

.daily-console {
  min-height: 500px;
  border-radius: 34px;
  padding: 28px;
  color: #effffb;
  background:
    linear-gradient(140deg, rgba(255,255,255,.18), transparent 34%),
    radial-gradient(circle at 80% 12%, rgba(135,230,220,.38), transparent 29%),
    linear-gradient(160deg, #2e7d83, #114f70 58%, #102b53);
  box-shadow: 0 32px 90px rgba(16,43,50,.22), inset 0 1px 0 rgba(255,255,255,.35);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.daily-console:after { content: ""; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; right: -120px; bottom: -110px; }
.console-top { display: flex; justify-content: space-between; font: 500 11px var(--mono); letter-spacing: .12em; }
.console-top span { color: var(--acid); }
.signal-art { height: 176px; margin: 38px 0 30px; position: relative; display: grid; place-items: center; }
.signal-art:before, .signal-art:after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.signal-art:before { width: 160px; height: 160px; }
.signal-art:after { width: 104px; height: 104px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 35px rgba(135,230,220,.34); }
.signal-art span { position: absolute; width: 8px; height: 8px; background: var(--acid); border-radius: 50%; z-index: 2; box-shadow: 0 0 18px var(--acid); }
.signal-art span:nth-child(1) { transform: translate(-51px, -29px); }
.signal-art span:nth-child(2) { transform: translate(41px, 42px); }
.signal-art span:nth-child(3) { width: 3px; height: 82px; border-radius: 5px; transform: rotate(39deg); background: rgba(255,255,255,.86); }
.daily-console > p { margin: 0 0 8px; color: var(--aqua); font: 500 11px var(--mono); letter-spacing: .12em; }
.daily-console h2 { margin: 0; font-size: 31px; line-height: 1.08; letter-spacing: -.035em; }
.daily-console > span { margin: 8px 0 24px; color: rgba(255,255,255,.68); font-size: 14px; }
.daily-console > button { margin-top: auto; border: 0; border-radius: 18px; min-height: 58px; background: var(--acid); color: var(--ink); font-weight: 800; cursor: pointer; position: relative; z-index: 2; }
.daily-console > button i { display: inline-block; width: 0; height: 0; margin-right: 8px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }

.proof-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-strip div { min-height: 132px; padding: 28px clamp(20px, 4vw, 58px); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.proof-strip div:last-child { border: 0; }
.proof-strip strong { font: 500 30px var(--mono); letter-spacing: -.05em; }
.proof-strip span { color: var(--muted); font-size: 12px; margin-top: 8px; }

.path-section { width: min(1180px, calc(100% - 48px)); margin: 72px auto 0; border-radius: 24px; background: var(--ink); color: white; padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.path-section p { margin: 0 0 6px; color: var(--acid); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.path-section h2 { margin: 0 0 6px; font-size: 25px; }
.path-section span { color: rgba(255,255,255,.7); font-size: 13px; }
.path-section button { flex: none; border: 1px solid rgba(255,255,255,.5); color: white; background: transparent; border-radius: 999px; padding: 11px 17px; cursor: pointer; }

.library-section, .skills-section, .passport-section, .inventory-section, .path-library { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 120px 0; }
.skills-section { border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .55fr); gap: 80px; align-items: end; margin-bottom: 54px; }
.section-heading h2, .passport-section h2, .membership-copy h2 { font-size: clamp(42px, 4.5vw, 68px); }
.section-heading > span { color: var(--muted); font-size: 14px; line-height: 1.75; }
.library-controls { display: flex; gap: 8px; margin-bottom: 26px; overflow-x: auto; padding-bottom: 4px; }
.library-controls button { flex: none; border: 1px solid var(--line); background: rgba(255,255,255,.4); border-radius: 999px; padding: 10px 16px; font-size: 12px; font-weight: 700; cursor: pointer; }
.library-controls button.is-active { color: white; background: var(--ink); }
.episode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.episode-card { min-height: 300px; padding: 14px; background: rgba(255,255,255,.56); border: 1px solid rgba(16,43,50,.11); border-radius: 24px; display: flex; flex-direction: column; position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.episode-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(16,43,50,.09); }
.episode-visual { height: 135px; border-radius: 15px; display: grid; place-items: center; overflow: hidden; position: relative; background: linear-gradient(145deg, rgba(255,255,255,.55), transparent), #a6d7d0; }
.topic-thinking .episode-visual { background-color: #f0c581; }
.topic-ai .episode-visual { background-color: #83b8d5; }
.topic-economics .episode-visual { background-color: #d6bd84; }
.topic-culture .episode-visual { background-color: #db9a82; }
.topic-learning .episode-visual { background-color: #b6d986; }
.episode-visual:before, .episode-visual:after { content: ""; position: absolute; border: 1px solid rgba(16,43,50,.28); border-radius: 50%; }
.episode-visual:before { width: 102px; height: 102px; }
.episode-visual:after { width: 58px; height: 58px; background: rgba(255,255,255,.2); }
.episode-visual span { z-index: 2; font: 500 12px var(--mono); }
.episode-card-copy { padding: 18px 6px 8px; }
.episode-card-copy p { margin: 0 0 9px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.episode-card-copy h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.episode-card-copy span { display: block; color: var(--muted); margin-top: 5px; font-size: 12px; }
.episode-card > button { margin: auto 4px 3px auto; border: 1px solid var(--ink); background: transparent; border-radius: 999px; padding: 8px 15px; font-size: 11px; font-weight: 800; cursor: pointer; }
.episode-card.is-locked { opacity: .67; }
.episode-card.is-locked > button { background: var(--cream); border-color: transparent; }
.episode-card.is-prescribed { outline: 2px solid var(--acid); outline-offset: 2px; }

.inventory-section { border-top: 1px solid var(--line); }
.mastery-rail { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 18px; }
.mastery-rail span { flex: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font: 600 10px var(--mono); text-transform: uppercase; }
.mastery-rail .mastery-noticed { background: #f1e4c7; }
.mastery-rail .mastery-recognized { background: #d6e7da; }
.mastery-rail .mastery-recalled { background: #b8dfd9; }
.mastery-rail .mastery-used { color: white; background: #28736c; }
.mastery-rail .mastery-stable { background: var(--acid); }
.inventory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.inventory-card { min-height: 150px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.54); display: flex; flex-direction: column; cursor: pointer; transition: transform .2s ease; }
.inventory-card:hover { transform: translateY(-3px); }
.inventory-card small { color: #28736c; font: 600 9px var(--mono); text-transform: uppercase; }
.inventory-card strong { margin-top: auto; font-size: 18px; }
.inventory-card span { margin-top: 6px; color: var(--muted); font-size: 12px; }
.inventory-card.state-used, .inventory-card.state-stable { color: white; background: var(--ink); }
.inventory-card.state-stable { color: var(--ink); background: var(--acid); }
.inventory-card.state-used span, .inventory-card.state-used small { color: rgba(255,255,255,.65); }

.path-library { border-top: 1px solid var(--line); }
.path-preview-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; }
.path-preview { min-height: 280px; padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.55); display: flex; flex-direction: column; }
.path-preview:first-child { color: white; background: linear-gradient(145deg, #28736c, #123a5b); }
.path-preview > span { color: #28736c; font: 600 9px var(--mono); letter-spacing: .1em; }
.path-preview:first-child > span { color: var(--acid); }
.path-preview h3 { margin: auto 0 8px; font-size: 27px; line-height: 1.05; }
.path-preview p { margin: 0 0 14px; font-size: 13px; font-weight: 700; }
.path-preview small { color: var(--muted); line-height: 1.6; }
.path-preview:first-child small { color: rgba(255,255,255,.68); }

.skill-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.skill-card { min-height: 185px; padding: 24px 20px; display: grid; grid-template-columns: 46px 1fr auto; gap: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); align-items: start; }
.skill-card:nth-child(3n) { border-right: 0; }
.skill-card > span { font: 500 11px var(--mono); color: #37746e; }
.skill-card p { margin: 0 0 9px; color: var(--muted); font: 500 10px var(--mono); text-transform: uppercase; }
.skill-card h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.skill-card button { align-self: end; grid-column: 3; border: 0; background: transparent; font-weight: 800; cursor: pointer; }

.passport-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; border-top: 1px solid var(--line); }
.receipt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; }
.empty-receipt, .receipt-card { min-height: 180px; padding: 24px; border-radius: 22px; border: 1px dashed rgba(16,43,50,.28); display: flex; flex-direction: column; justify-content: space-between; }
.empty-receipt span, .receipt-card p { margin: 0; font: 500 10px var(--mono); color: var(--muted); text-transform: uppercase; }
.empty-receipt p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.receipt-card { border-style: solid; background: var(--ink); color: white; }
.receipt-card p { color: var(--acid); }
.receipt-card strong { font-size: 15px; line-height: 1.5; }
.receipt-card span { color: rgba(255,255,255,.55); font-size: 11px; }

.membership { background: var(--ink); color: white; padding: 90px max(24px, calc((100vw - 1380px) / 2)); display: grid; grid-template-columns: 1.2fr .65fr .65fr; gap: 16px; }
.membership-copy { padding-right: 50px; }
.membership-copy > p { color: var(--acid); }
.membership-copy > span { display: block; max-width: 660px; color: rgba(255,255,255,.68); margin-top: 28px; line-height: 1.75; }
.membership article { padding: 28px; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; display: flex; flex-direction: column; min-height: 280px; background: rgba(255,255,255,.04); }
.membership article.annual { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.membership article p { margin: 0; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.membership article strong { margin: 30px 0 10px; font-size: 29px; }
.membership article span { font-size: 13px; line-height: 1.5; opacity: .7; }
.membership article a { margin-top: auto; text-align: center; border-radius: 999px; border: 1px solid currentColor; padding: 13px 15px; font-size: 12px; font-weight: 800; }

footer { min-height: 130px; padding: 28px max(24px, calc((100vw - 1380px) / 2)); display: flex; align-items: center; gap: 36px; }
footer img { width: 120px; }
footer p { margin-right: auto; color: var(--muted); font-size: 12px; }
footer a { font-size: 12px; }

.experience { position: fixed; inset: 0; z-index: 100; background: rgba(5,22,27,.7); backdrop-filter: blur(18px); padding: 22px; overflow-y: auto; }
.experience[hidden] { display: none; }
.experience-shell { width: min(860px, 100%); min-height: calc(100vh - 44px); margin: 0 auto; background: #f7f8ef; border-radius: 30px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.32); }
.experience-shell > header { min-height: 100px; padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.experience-shell > header p { margin: 0 0 5px; color: #28736c; font: 500 10px var(--mono); letter-spacing: .1em; }
.experience-shell > header h2 { margin: 0; font-size: 20px; }
.experience-shell > header button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 25px; cursor: pointer; }
.experience-progress { height: 4px; background: rgba(16,43,50,.08); }
.experience-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #28736c, var(--acid)); transition: width .45s ease; }
.experience-stage { padding: clamp(28px, 6vw, 64px); }
.stage-step, .question-label { margin: 0 0 14px; color: #28736c; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.stage-title { max-width: 680px; margin: 0; font-size: clamp(32px, 5vw, 54px); line-height: 1.05; letter-spacing: -.045em; }
.stage-copy { max-width: 680px; margin: 20px 0 28px; color: #50666a; font-size: 15px; line-height: 1.75; }
.context-visual { height: 270px; margin: 28px 0; border-radius: 25px; background: linear-gradient(145deg, rgba(255,255,255,.5), transparent), #9edbd3; display: grid; place-items: center; position: relative; overflow: hidden; }
.context-visual:before, .context-visual:after { content: ""; position: absolute; border: 1px solid rgba(16,43,50,.25); border-radius: 50%; }
.context-visual:before { width: 220px; height: 220px; }
.context-visual:after { width: 130px; height: 130px; background: rgba(255,255,255,.25); }
.context-visual span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); z-index: 2; position: absolute; }
.context-visual span:nth-child(1) { transform: translate(-82px, -30px); }
.context-visual span:nth-child(2) { transform: translate(70px, 54px); background: var(--acid); }
.context-visual span:nth-child(3) { width: 3px; height: 145px; border-radius: 9px; transform: rotate(50deg); background: rgba(16,43,50,.5); }
.transcript-rule { color: var(--muted); font: 500 11px var(--mono); }
.runner-primary, .runner-secondary { margin-top: 24px; }

.audio-player { margin: 28px 0; padding: 24px; border-radius: 22px; color: white; background: linear-gradient(150deg, #256e73, #123a5b); }
.audio-status { font-size: 12px; color: rgba(255,255,255,.7); }
.audio-wave { height: 74px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.audio-wave i { display: block; width: 3px; height: calc(15px + (var(--n, 1) * 2px)); min-height: 12px; max-height: 48px; border-radius: 6px; background: var(--aqua); animation: wave 1s ease-in-out infinite alternate; animation-play-state: paused; }
.audio-wave i:nth-child(3n) { height: 39px; animation-delay: -.3s; }
.audio-wave i:nth-child(4n) { height: 24px; animation-delay: -.6s; }
.audio-player.is-playing .audio-wave i { animation-play-state: running; }
@keyframes wave { to { transform: scaleY(.42); opacity: .55; } }
.audio-controls { display: flex; gap: 8px; }
.audio-controls button { border: 1px solid rgba(255,255,255,.25); color: white; background: rgba(255,255,255,.08); border-radius: 999px; padding: 10px 16px; font-size: 12px; font-weight: 700; cursor: pointer; }
.audio-controls .audio-play { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.audio-player audio { display: none; }
.question-block { margin-top: 26px; transition: opacity .2s; }
.question-block.is-gated { opacity: .3; pointer-events: none; }
.confidence-check { margin: 26px 0 10px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.56); transition: opacity .2s; }
.confidence-check.is-gated { opacity: .35; pointer-events: none; }
.confidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.confidence-option { min-height: 112px; padding: 16px; text-align: left; border: 1px solid var(--line); border-radius: 15px; background: white; cursor: pointer; }
.confidence-option strong, .confidence-option span { display: block; }
.confidence-option strong { font-size: 14px; }
.confidence-option span { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.confidence-option.is-selected { border-color: #28736c; background: rgba(135,230,220,.22); box-shadow: 0 0 0 2px rgba(40,115,108,.12); }
.question-title { margin: 0 0 18px; font-size: 22px; line-height: 1.35; }
.answer-grid { display: grid; gap: 9px; }
.answer-option { min-height: 58px; padding: 13px 17px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: white; cursor: pointer; }
.answer-option:hover { border-color: #2a756e; }
.answer-option.is-correct { color: #145d37; background: #e5f6d2; border-color: #78b35c; }
.answer-option.is-wrong { color: #943f2b; background: #f9dfd7; border-color: #d88a73; }
.answer-feedback { padding: 16px; border-left: 3px solid var(--acid); background: rgba(202,250,87,.18); line-height: 1.6; }
.placement-listen { width: 100%; min-height: 84px; border: 0; border-radius: 20px; color: white; background: var(--ink); font-weight: 800; cursor: pointer; }
.placement-result { margin: 30px 0 4px; padding: 28px; border-radius: 22px; background: #9edbd3; display: flex; align-items: center; gap: 22px; }
.placement-result strong { font: 500 56px var(--mono); }
.placement-result span { font-size: 13px; }
.chunk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
.chunk-card { padding: 20px; border-radius: 17px; background: white; border: 1px solid var(--line); }
.chunk-card strong { display: block; font-size: 16px; }
.chunk-card span { display: block; color: var(--muted); font-size: 12px; margin-top: 7px; }
.support-summary { margin-top: 16px; padding: 18px; border-left: 3px solid #28736c; background: rgba(135,230,220,.18); color: #39575b; line-height: 1.7; }
.comprehension-gain { margin-top: 18px; padding: 19px; border-radius: 17px; background: #edf4f1; }
.comprehension-gain small, .comprehension-gain strong, .comprehension-gain span { display: block; }
.comprehension-gain small { color: #28736c; font: 600 9px var(--mono); letter-spacing: .08em; }
.comprehension-gain strong { margin-top: 8px; font-size: 17px; }
.comprehension-gain span { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.comprehension-gain.is-gain { background: rgba(202,250,87,.24); }
.comprehension-gain.is-review { background: #f6ecd4; }
.reader-text { margin: 24px 0; padding: 27px; border: 1px solid var(--line); border-radius: 22px; background: white; font-family: Georgia, serif; font-size: 18px; line-height: 1.95; }
.reader-text.is-blind { filter: blur(7px); user-select: none; }
.reader-sentence { border-radius: 5px; transition: color .2s ease, background .2s ease; }
.language-token { display: inline; margin: 0; padding: 1px 3px; border: 0; border-bottom: 1px dashed #28736c; color: #174f4b; background: rgba(135,230,220,.18); font: inherit; line-height: inherit; cursor: pointer; }
.language-token:hover, .language-token:focus-visible { background: var(--acid); outline: 2px solid rgba(40,115,108,.22); outline-offset: 2px; }
.reader-sentence.is-speaking { color: #0d413c; background: rgba(202,250,87,.72); box-shadow: 0 0 0 3px rgba(202,250,87,.22); }
.reader-dialogue-turn { margin: 0 0 15px; padding: 13px 15px; border-left: 3px solid #d7e4e0; border-radius: 0 12px 12px 0; background: #f7faf8; transition: background .2s ease, border-color .2s ease; }
.reader-dialogue-turn:nth-child(even) { margin-left: 8%; border-left-color: #d4b26d; background: #fdfaf3; }
.reader-dialogue-speaker { display: block; margin-bottom: 5px; color: #55706a; font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.reader-dialogue-turn.is-speaking { border-left-color: #0d413c; background: rgba(202,250,87,.18); }
.reader-dialogue-turn.is-speaking .reader-sentence { color: #0d413c; background: rgba(202,250,87,.72); box-shadow: 0 0 0 3px rgba(202,250,87,.22); }
.word-web { display: grid; place-items: center; margin: 28px auto 16px; }
.word-web-center { min-width: min(100%, 340px); padding: 28px; border-radius: 50%; text-align: center; color: white; background: radial-gradient(circle at 35% 20%, #3c9991, #123a5b); box-shadow: 0 20px 60px rgba(18,58,91,.2); }
.word-web-center small, .word-web-center span { display: block; opacity: .68; }
.word-web-center strong { display: block; margin: 8px 0; font-size: 27px; }
.word-web-pronounce { margin-top: 14px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: white; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; cursor: pointer; }
.word-web-pronounce.is-speaking, .pronounce-button.is-speaking, .lens-chip.is-speaking, .language-example.is-speaking, .grammar-example.is-speaking { color: var(--ink); background: var(--acid); }
.word-relations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 18px 0; }
.word-relation { min-height: 90px; padding: 18px; border-radius: 17px; border: 1px solid var(--line); background: rgba(255,255,255,.68); }
.word-relation small { display: block; color: #28736c; font: 600 9px var(--mono); text-transform: uppercase; }
.word-relation strong { display: block; margin-top: 9px; font-size: 15px; line-height: 1.4; }
.collocation-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0; }
.collocation-strip span { padding: 9px 13px; border-radius: 999px; color: white; background: var(--ink); font-size: 12px; }
.usage-warning, .privacy-note { padding: 14px 17px; border-left: 3px solid #d6a847; background: #f6ecd4; color: #66522f; font-size: 12px; line-height: 1.6; }
.recall-input { width: 100%; min-height: 62px; margin-top: 20px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.transfer-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.coach-feedback { margin-top: 20px; padding: 24px; border-radius: 22px; color: white; background: linear-gradient(145deg, #1e6864, #102b53); }
.coach-feedback small { color: var(--acid); font: 600 9px var(--mono); letter-spacing: .08em; }
.coach-feedback strong, .coach-feedback span { display: block; margin-top: 13px; }
.coach-feedback p { color: rgba(255,255,255,.72); line-height: 1.6; }
.coach-feedback blockquote { margin: 16px 0; padding: 14px 17px; border-left: 3px solid var(--acid); background: rgba(255,255,255,.08); font-size: 16px; line-height: 1.55; }
.transcript-card { padding: 27px; border-radius: 20px; background: white; border: 1px solid var(--line); font-size: 15px; line-height: 1.9; }
.language-focus { margin-top: 13px; padding: 24px; border-radius: 20px; color: white; background: var(--ink); }
.language-focus p { margin: 0 0 10px; color: var(--acid); font: 500 10px var(--mono); text-transform: uppercase; }
.language-focus strong { display: block; font-size: 19px; margin-bottom: 10px; }
.language-focus span { color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.65; }
.grammar-slots { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.grammar-slots span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: white; background: rgba(255,255,255,.08); font: 700 11px var(--mono); }
.grammar-examples { display: grid; gap: 9px; margin: 14px 0 26px; }
.grammar-example, .grammar-contrast { padding: 18px; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: white; }
.grammar-example { cursor: pointer; }
.grammar-example strong, .grammar-example span, .grammar-contrast small, .grammar-contrast strong, .grammar-contrast span { display: block; }
.grammar-example span, .grammar-contrast span { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.grammar-contrast { background: #f6ecd4; }
.grammar-contrast small { color: #9a6c1f; font: 700 9px var(--mono); letter-spacing: .08em; }
.grammar-contrast strong { margin-top: 8px; }
.grammar-reconstruction { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.transfer-input { width: 100%; min-height: 150px; resize: vertical; margin-top: 8px; padding: 19px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: white; line-height: 1.6; }
.transfer-input.needs-answer { border-color: #c95d40; box-shadow: 0 0 0 3px rgba(201,93,64,.12); }
.model-answer { margin-top: 18px; padding: 20px; border-radius: 17px; background: rgba(135,230,220,.25); }
.model-answer p { margin: 0 0 7px; color: #28736c; font: 500 10px var(--mono); text-transform: uppercase; }
.model-answer span { line-height: 1.6; }
.runner-receipt { margin-top: 30px; min-height: 220px; padding: 28px; border-radius: 24px; color: white; background: linear-gradient(145deg, #28736c, #103450); display: flex; flex-direction: column; justify-content: space-between; }
.runner-receipt p { color: var(--acid); font: 500 10px var(--mono); letter-spacing: .08em; }
.runner-receipt strong { max-width: 560px; font-size: 23px; line-height: 1.4; }
.receipt-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lab-notice { position: fixed; z-index: 150; right: 22px; bottom: 22px; max-width: 360px; padding: 16px 19px; border-radius: 14px; background: var(--ink); color: white; box-shadow: 0 14px 45px rgba(0,0,0,.2); font-size: 13px; line-height: 1.5; }
.lab-notice.is-error { background: #8c3d2e; }
.experience-open { overflow: hidden; }

.language-lens-backdrop { position: fixed; z-index: 240; inset: 0; padding: 18px; display: flex; justify-content: flex-end; background: rgba(7,25,31,.48); backdrop-filter: blur(5px); }
.language-lens { width: min(520px, 100%); height: 100%; overflow-y: auto; padding: clamp(25px, 5vw, 42px); border-radius: 26px; color: var(--ink); background: #f7f7ef; box-shadow: 0 24px 90px rgba(0,0,0,.25); animation: lens-enter .28s ease both; }
@keyframes lens-enter { from { opacity: 0; transform: translateX(24px); } }
.language-lens-close { float: right; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; }
.language-lens-title { clear: both; padding-top: 24px; }
.language-lens-title h3 { margin: 5px 0; font-size: clamp(35px, 8vw, 54px); line-height: 1; letter-spacing: -.045em; }
.language-lens-ipa { color: #28736c; font: 600 14px var(--mono); }
.pronounce-button { margin: 19px 0; padding: 11px 16px; border: 0; border-radius: 999px; color: white; background: #28736c; font-weight: 800; cursor: pointer; }
.language-lens-meaning { padding: 22px; border-radius: 18px; background: rgba(135,230,220,.24); }
.language-lens-meaning small, .language-lens-meaning strong { display: block; }
.language-lens-meaning small { color: #28736c; font: 700 9px var(--mono); letter-spacing: .08em; }
.language-lens-meaning strong { margin-top: 8px; font-size: 19px; }
.language-lens-meaning p { margin: 11px 0 0; color: #496267; line-height: 1.6; }
.language-lens-section { padding: 23px 0; border-bottom: 1px solid var(--line); }
.language-lens-section h4 { margin: 0 0 13px; font-size: 16px; }
.lens-chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.lens-chip { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: 12px; cursor: pointer; }
.language-lens-relations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.language-lens-relation { min-height: 78px; padding: 14px; border-radius: 14px; background: white; }
.language-lens-relation small, .language-lens-relation strong { display: block; }
.language-lens-relation small { color: #28736c; font: 700 8px var(--mono); text-transform: uppercase; }
.language-lens-relation strong { margin-top: 7px; font-size: 13px; line-height: 1.45; }
.language-example { width: 100%; margin-top: 7px; padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: 13px; background: white; font-family: Georgia, serif; line-height: 1.55; cursor: pointer; }

@media (max-width: 1050px) {
  .episode-grid { grid-template-columns: repeat(3, 1fr); }
  .membership { grid-template-columns: 1fr 1fr; }
  .membership-copy { grid-column: 1 / -1; padding: 0 0 25px; }
}

@media (max-width: 780px) {
  .lab-nav { width: calc(100% - 32px); height: 72px; }
  .brand img { width: 112px; }
  .lab-nav nav a { display: none; }
  .lab-nav nav a:last-child { display: block; padding: 8px 12px; font-size: 11px; }
  .lab-nav nav { gap: 7px; }
  .lab-access-state { max-width: 132px; overflow: hidden; text-overflow: ellipsis; font-size: 8px; }
  .lab-hero { width: calc(100% - 32px); min-height: 0; padding: 56px 0 62px; grid-template-columns: 1fr; gap: 44px; }
  .hero-copy h1 { font-size: clamp(47px, 14vw, 68px); }
  .hero-copy > p:not(.eyebrow) { font-size: 15px; }
  .hero-actions { display: grid; }
  .primary, .secondary { width: 100%; }
  .daily-console { min-height: 450px; border-radius: 27px; }
  .proof-strip { grid-template-columns: repeat(2, 1fr); }
  .proof-strip div { min-height: 110px; border-bottom: 1px solid var(--line); }
  .proof-strip div:nth-child(2) { border-right: 0; }
  .path-section { width: calc(100% - 32px); margin-top: 45px; align-items: flex-start; flex-direction: column; }
  .library-section, .skills-section, .passport-section, .inventory-section, .path-library { width: calc(100% - 32px); padding: 80px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; }
  .section-heading h2, .passport-section h2, .membership-copy h2 { font-size: 42px; }
  .episode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .episode-card { min-height: 270px; }
  .episode-visual { height: 112px; }
  .skill-grid { grid-template-columns: 1fr; }
  .skill-card { border-right: 0; }
  .passport-section { grid-template-columns: 1fr; gap: 45px; }
  .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path-preview-grid { grid-template-columns: 1fr; }
  .path-preview { min-height: 230px; }
  .confidence-grid { grid-template-columns: 1fr; }
  .confidence-option { min-height: 0; }
  .language-lens-backdrop { padding: 0; }
  .language-lens { border-radius: 0; }
  .language-lens-relations { grid-template-columns: 1fr; }
  .membership { padding: 70px 16px; grid-template-columns: 1fr; }
  .membership-copy { grid-column: auto; }
  footer { flex-wrap: wrap; gap: 18px; }
  footer p { width: 100%; order: 3; }
  .experience { padding: 0; background: #f7f8ef; }
  .experience-shell { min-height: 100vh; border-radius: 0; }
  .experience-shell > header { min-height: 78px; padding: 16px; position: sticky; top: 0; z-index: 4; background: rgba(247,248,239,.95); backdrop-filter: blur(14px); }
  .experience-stage { padding: 32px 16px 70px; }
  .stage-title { font-size: 36px; }
  .context-visual { height: 220px; }
  .chunk-grid { grid-template-columns: 1fr; }
  .reader-text { padding: 20px; font-size: 17px; line-height: 1.85; }
  .word-relations { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  .episode-grid { grid-template-columns: 1fr; }
  .episode-card { min-height: 245px; }
  .episode-visual { height: 105px; }
  .receipt-grid { grid-template-columns: 1fr; }
  .inventory-grid { grid-template-columns: 1fr; }
  .audio-controls { display: grid; grid-template-columns: 1fr 1fr 68px; }
  .audio-controls button { padding: 10px 8px; }
  .receipt-actions { display: grid; }
  .receipt-actions button { width: 100%; }
}

.production-knowledge-card { margin: 18px 0; padding: 22px; border: 1px solid rgba(122, 242, 209, .35); border-radius: 20px; background: linear-gradient(135deg, rgba(15, 66, 73, .94), rgba(23, 48, 76, .96)); color: #f8fbef; }
.production-knowledge-card small, .production-knowledge-card strong { display: block; }
.production-knowledge-card small { color: #bffb73; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.production-knowledge-card strong { margin: 10px 0; font-family: var(--display); font-size: clamp(22px, 4vw, 34px); line-height: 1.08; }
.production-knowledge-card p { margin: 0; color: rgba(248, 251, 239, .76); line-height: 1.65; }
.production-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.production-mode-card { min-height: 180px; padding: 22px; border: 1px solid rgba(14, 48, 72, .14); border-radius: 20px; text-align: left; background: #fffef8; color: #102e4d; }
.production-mode-card:hover, .production-mode-card:focus-visible { border-color: #28766d; transform: translateY(-2px); }
.production-mode-card span, .production-mode-card strong, .production-mode-card p { display: block; }
.production-mode-card span { color: #27766d; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.production-mode-card strong { margin: 13px 0 8px; font-size: 20px; line-height: 1.2; }
.production-mode-card p { margin: 0; color: #61767d; font-size: 12px; line-height: 1.5; }
.production-count { display: block; margin: 8px 0 14px; color: #60777e; font-size: 11px; }
.production-feedback { display: grid; gap: 10px; margin: 22px 0; padding: 22px; border-radius: 20px; background: #eff7ed; border: 1px solid #cbdcc6; }
.production-feedback > small { color: #26726a; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.production-feedback > strong { font-size: 19px; color: #123a42; }
.production-feedback > p, .production-feedback > em { margin: 0; color: #566b6f; line-height: 1.55; }
.production-feedback blockquote { margin: 6px 0; padding: 15px; border-left: 3px solid #bde96c; background: white; color: #14354c; font-style: normal; line-height: 1.6; }
.production-rubric { display: grid; gap: 6px; }
.production-rubric article { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 10px 12px; border-radius: 11px; background: rgba(255,255,255,.72); }
.production-rubric span { font-size: 10px; font-weight: 800; }
.production-rubric p { margin: 0; color: #5b7074; font-size: 11px; line-height: 1.45; }
.production-rubric .rubric-evident { border-left: 3px solid #6ebc76; }
.production-rubric .rubric-developing { border-left: 3px solid #d4a84f; }
.production-rubric .rubric-not_evident { border-left: 3px solid #b96b58; }
.production-revision { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(14,48,72,.14); }
.production-revision h4 { margin: 16px 0 10px; font-size: 18px; }
.speaking-prep { margin: 14px 0; padding: 18px; border-radius: 16px; background: #f3f2df; }
.speaking-prep small, .speaking-prep strong { display: block; }
.speaking-prep small { color: #60731f; font-size: 9px; font-weight: 900; }
.speaking-prep strong { margin: 8px 0; line-height: 1.45; }
.speaking-prep p { margin: 0; color: #67716d; font-size: 11px; }
.speech-recorder { display: grid; gap: 10px; margin: 18px 0; padding: 22px; border-radius: 20px; background: radial-gradient(circle at 90% 10%, rgba(189,233,108,.2), transparent 36%), #13394a; color: white; }
.speech-recorder > strong { font-size: 20px; }
.speech-recorder > span { color: #bffb73; font-variant-numeric: tabular-nums; }
.speech-recorder > p { margin: 0; color: rgba(255,255,255,.66); font-size: 11px; }
.speech-recorder audio { width: 100%; margin-top: 4px; }
.speech-transcript { margin: 16px 0; padding: 18px; border: 1px solid rgba(14,48,72,.14); border-radius: 16px; background: white; }
.speech-transcript small, .speech-transcript span { display: block; color: #64777c; font-size: 9px; }
.speech-transcript p { color: #14364c; font-size: 16px; line-height: 1.55; }
@media (max-width: 620px) { .production-mode-grid { grid-template-columns: 1fr; } .production-mode-card { min-height: 140px; } .production-rubric article { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}