:root {
  color-scheme: light;
  --ink: #1c2b3f;
  --ink-soft: #5e6b7d;
  --paper: #fffdf8;
  --cream: #f6f1e7;
  --line: #dcd6c9;
  --navy: #153b55;
  --navy-2: #0d2d43;
  --teal: #2f8f87;
  --teal-soft: #dcefeb;
  --gold: #d7a949;
  --gold-soft: #f6ead0;
  --coral: #d86d58;
  --coral-soft: #f8e3de;
  --green: #3d8d68;
  --green-soft: #e0f0e7;
  --shadow: 0 24px 70px -42px rgba(13, 45, 67, .56);
  --shadow-small: 0 14px 34px -24px rgba(13, 45, 67, .4);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --sans: ui-rounded, "Avenir Next", "Hiragino Maru Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif;
  --serif: "Avenir Next", ui-rounded, "Hiragino Maru Gothic ProN", Georgia, "Yu Mincho", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 6% 4%, rgba(47, 143, 135, .12), transparent 28rem),
    radial-gradient(circle at 96% 24%, rgba(215, 169, 73, .15), transparent 30rem),
    var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image: linear-gradient(rgba(21, 59, 85, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 59, 85, .05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, black, transparent 55%);
  z-index: -1;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(47,143,135,.45);
  outline-offset: 3px;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.03em; }
.shell { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.skip-link { position: fixed; left: 14px; top: -80px; z-index: 1000; padding: 10px 14px; background: var(--navy); color: white; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.site-header {
  width: min(1260px, calc(100% - 24px));
  min-height: 76px;
  margin: 12px auto 0;
  padding: 11px 13px 11px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 10px;
  z-index: 40;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 20px;
  background: rgba(255, 253, 248, .86);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-small);
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 210px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  color: white; background: linear-gradient(145deg, var(--navy), var(--teal));
  font-size: .78rem; font-weight: 900; letter-spacing: .03em;
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 10px 25px -15px var(--navy);
}
.brand-mark b, .brand-mark i { line-height: 1; font-style: normal; }
.brand span:last-child { display: grid; }
.brand strong { font-size: .93rem; }
.brand small { color: var(--ink-soft); font-size: .7rem; margin-top: 2px; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.header-settings-controls { display: contents; }
.mobile-settings-toggle { display: none; }
.quiet-btn, .voice-select, .filter-chip {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  padding: 9px 13px;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 800;
  transition: .18s ease;
}
.quiet-btn:hover, .filter-chip:hover { transform: translateY(-1px); border-color: var(--teal); }
.quiet-btn[aria-pressed="false"] { color: var(--ink-soft); background: #ebe8e0; }
.voice-select { display: inline-flex; align-items: center; gap: 6px; padding-right: 9px; }
.voice-select select { min-height: 42px; border: 0; background: transparent; color: var(--navy); font-weight: 900; outline: 0; }
.primary-btn, .secondary-btn {
  display: inline-flex; justify-content: center; align-items: center; min-height: 44px;
  padding: 11px 17px; border-radius: 13px; font-weight: 850; cursor: pointer;
  border: 1px solid transparent; transition: .18s ease;
}
.primary-btn { color: white; background: linear-gradient(135deg, var(--navy), #205978); box-shadow: 0 14px 28px -18px var(--navy); }
.secondary-btn { background: var(--paper); border-color: var(--line); color: var(--navy); }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -22px var(--navy); }
.primary-btn:disabled, .secondary-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.full-width { width: 100%; }
.eyebrow { margin-bottom: 9px; color: var(--teal); font-size: .71rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.hero {
  margin-top: 34px;
  min-height: 590px;
  padding: clamp(28px, 5.4vw, 70px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
  align-items: center;
  gap: clamp(28px, 6vw, 74px);
  overflow: hidden;
  position: relative;
  border-radius: 36px;
  color: white;
  background:
    linear-gradient(110deg, rgba(13,45,67,.97), rgba(21,59,85,.94) 52%, rgba(47,143,135,.82)),
    var(--navy);
  box-shadow: 0 32px 90px -50px var(--navy);
}
.hero::after {
  content: "";
  position: absolute; width: 420px; height: 420px; right: -160px; top: -170px;
  border: 80px solid rgba(255,255,255,.07); border-radius: 50%;
}
.hero-copy, .hero-panel { position: relative; z-index: 1; }
.hero h1, .private-hero h1 { margin-bottom: 22px; font-family: var(--serif); font-weight: 500; font-size: clamp(3.1rem, 7vw, 6.9rem); line-height: .94; }
.hero h1 span { color: #bfe8df; }
.hero-lead { max-width: 650px; color: #e3edf1; font-size: clamp(.98rem, 1.7vw, 1.16rem); line-height: 1.75; }
.hero .jp { color: #c9dadd; font-size: .9rem; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.hero .primary-btn { background: white; color: var(--navy); }
.hero .secondary-btn { color: white; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.hero-panel {
  padding: 24px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 26px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
}
.panel-kicker { color: var(--gold); font-size: .67rem; font-weight: 900; letter-spacing: .18em; }
.practice-flow { list-style: none; padding: 0; margin: 17px 0 0; }
.practice-flow li { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.13); }
.practice-flow li span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #d8eee8; border: 1px solid rgba(255,255,255,.2); font-size: .72rem; }
.practice-flow strong { font-size: .95rem; }
.practice-flow small { color: #b9cbd3; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.metrics article, .dashboard-card {
  padding: 20px; border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-lg);
  background: rgba(255,253,248,.82); box-shadow: var(--shadow-small);
}
.metrics strong, .dashboard-card strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 2rem; font-weight: 500; }
.metrics span, .dashboard-card span { color: var(--ink-soft); font-size: .76rem; font-weight: 750; }
.section { padding-top: 84px; padding-bottom: 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.section-heading h1, .section-heading h2, .teacher-top h1 { margin-bottom: 8px; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 500; }
.section-heading p { color: var(--ink-soft); }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip.active { color: white; background: var(--navy); border-color: var(--navy); }
.lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.lesson-card {
  min-height: 330px; padding: 23px; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.85); border-radius: var(--radius-xl);
  background: rgba(255,253,248,.86); box-shadow: var(--shadow);
  transition: .2s ease;
}
.lesson-card:hover { transform: translateY(-5px); box-shadow: 0 34px 80px -48px var(--navy); }
.lesson-card::before { content:""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg,var(--teal),var(--gold)); }
.lesson-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lesson-date, .lesson-status, .role-badge {
  display: inline-flex; padding: 6px 9px; border-radius: 999px; font-size: .66rem; font-weight: 900; letter-spacing: .04em;
}
.lesson-date { background: var(--teal-soft); color: #256c66; }
.lesson-status { background: var(--gold-soft); color: #855e18; }
.lesson-card h3 { margin: 28px 0 10px; font-family: var(--serif); font-size: 1.55rem; font-weight: 600; line-height: 1.15; }
.lesson-card p { color: var(--ink-soft); font-size: .86rem; line-height: 1.6; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0 20px; }
.lesson-meta span { padding: 5px 8px; border-radius: 999px; background: #f0ede5; color: var(--ink-soft); font-size: .66rem; font-weight: 750; }
.lesson-progress { height: 6px; margin-top: auto; overflow: hidden; background: #e6e0d5; border-radius: 99px; }
.lesson-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); }
.lesson-action { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding: 9px 2px; color: var(--navy); font-size: .78rem; font-weight: 900; }
.split-promo {
  margin-top: 70px; margin-bottom: 70px; padding: clamp(24px,5vw,54px);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 42px; align-items: center;
  border: 1px solid rgba(255,255,255,.9); border-radius: 32px; background: rgba(255,253,248,.85); box-shadow: var(--shadow);
}
.split-promo h2 { font-family: var(--serif); font-size: clamp(2rem,4vw,3.4rem); font-weight: 500; }
.split-promo p { color: var(--ink-soft); line-height: 1.7; }
.auth-card, .stack-form { display: grid; gap: 12px; }
.auth-card { padding: 20px; border-radius: 22px; background: #f0ece3; border: 1px solid var(--line); }
.auth-card label, .stack-form label, .editor-form label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .73rem; font-weight: 800; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cfc8bb; border-radius: 11px; background: white; color: var(--ink); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,143,135,.13); }
.form-status { min-height: 20px; color: var(--coral); font-size: .77rem; font-weight: 750; }
.site-footer {
  width: min(1180px, calc(100% - 32px)); margin: 65px auto 25px; padding: 18px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--ink-soft); font-size: .75rem;
  border-top: 1px solid var(--line);
}
.site-footer nav { display: flex; gap: 17px; flex-wrap: wrap; }
.site-footer a:hover { color: var(--teal); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 130px); z-index: 100; max-width: min(520px,calc(100% - 28px)); padding: 11px 16px; border-radius: 999px; background: var(--navy-2); color: white; font-size: .78rem; box-shadow: var(--shadow); transition: .25s ease; }
.toast.show { transform: translate(-50%,0); }

/* Private hub */
.private-hero {
  margin-top: 34px; padding: clamp(28px,5vw,64px);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center;
  border-radius: 34px; background: linear-gradient(135deg,#e6f1ed,#fbf6e9); border: 1px solid white; box-shadow: var(--shadow);
}
.private-hero h1 { color: var(--navy); font-size: clamp(3rem,7vw,6rem); }
.private-hero h1 span { color: var(--teal); }
.private-hero p { max-width: 650px; color: var(--ink-soft); line-height: 1.7; }
.access-message h1 { font-size: clamp(2.4rem,6vw,5.2rem); }
.continue-card { padding: 26px; border-radius: 25px; background: var(--navy); color: white; box-shadow: 0 24px 55px -35px var(--navy); }
.continue-card h2 { font-family: var(--serif); font-size: 1.8rem; font-weight: 500; }
.continue-card p:not(.panel-kicker) { color: #c7d8df; }
.continue-card .primary-btn { margin-top: 12px; background: white; color: var(--navy); }
.dashboard-shell { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 16px; }
.auth-dialog, .editor-dialog {
  width: min(520px, calc(100% - 28px)); border: 0; border-radius: 26px; padding: 30px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 120px rgba(13,45,67,.35);
}
.auth-dialog::backdrop, .editor-dialog::backdrop { background: rgba(13,45,67,.65); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; right: 14px; top: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eee9df; cursor: pointer; font-size: 1.25rem; }

/* Quiz */
.quiz-shell { padding-top: 30px; padding-bottom: 70px; }
.lesson-banner {
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: end;
  padding: 30px; border-radius: 28px; background: var(--paper); border: 1px solid white; box-shadow: var(--shadow-small);
}
.lesson-banner h1 { margin-bottom: 9px; font-family: var(--serif); font-size: clamp(2rem,5vw,4.2rem); font-weight: 500; }
.lesson-banner p { max-width: 760px; color: var(--ink-soft); line-height: 1.65; }
.lesson-mode { display: grid; gap: 9px; min-width: 230px; }
.lesson-mode label { color: var(--ink-soft); font-size: .72rem; font-weight: 800; }
.lesson-mode select { margin-top: 5px; }
.quiz-toolbar {
  margin: 14px 0; padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid white; border-radius: 18px; background: rgba(255,253,248,.84); box-shadow: var(--shadow-small);
}
.segmented { display: inline-flex; padding: 3px; border-radius: 12px; background: #eae5da; }
.segmented button { min-height: 44px; border: 0; border-radius: 9px; background: transparent; padding: 8px 11px; cursor: pointer; font-size: .72rem; font-weight: 850; }
.segmented button.active { background: white; color: var(--navy); box-shadow: 0 4px 12px rgba(13,45,67,.1); }
.toggle-label { font-size: .75rem; color: var(--ink-soft); font-weight: 750; }
.toggle-label input { width: auto; min-height: 0; vertical-align: middle; }
.score-pill { margin-left: auto; padding: 8px 11px; border-radius: 999px; background: var(--gold-soft); color: #785315; font-size: .72rem; font-weight: 900; }
.question-nav { display: flex; gap: 7px; padding: 9px 2px 13px; overflow-x: auto; scrollbar-width: thin; }
.question-nav button { flex: 0 0 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); cursor: pointer; font-size: .72rem; font-weight: 900; }
.question-nav button.current { color: white; background: var(--navy); border-color: var(--navy); }
.question-nav button.correct { background: var(--green-soft); color: #26724f; border-color: #aad6bd; }
.question-nav button.wrong { background: var(--coral-soft); color: #a94735; border-color: #e4b4aa; }
.question-nav button.answered:not(.current):not(.correct):not(.wrong) { border-color: var(--gold); background: var(--gold-soft); }
.question-stage { padding: clamp(18px,4vw,38px); border-radius: 30px; background: var(--paper); border: 1px solid white; box-shadow: var(--shadow); }
.question-topline { display: flex; justify-content: space-between; color: var(--teal); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.question-card { min-height: 310px; padding: 30px 0 12px; }
.question-card h2 { max-width: 870px; font-family: var(--serif); font-size: clamp(1.75rem,4vw,3.1rem); line-height: 1.15; font-weight: 500; }
.question-card .question-jp { color: var(--ink-soft); font-size: .9rem; }
.context-box { margin: 18px 0; padding: 15px; white-space: pre-line; border-left: 4px solid var(--gold); background: var(--gold-soft); border-radius: 5px 14px 14px 5px; }
[data-page="lesson"] .prompt-heading-row,
[data-page="lesson"] .context-audio-row,
[data-page="lesson"] .feedback-audio-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
[data-page="lesson"] .prompt-heading-row { align-items: flex-end; }
[data-page="lesson"] .prompt-heading-row h2,
[data-page="lesson"] .context-audio-row > span,
[data-page="lesson"] .feedback-audio-row > p { min-width: 0; flex: 1; }
[data-page="lesson"] .text-audio-btn {
  flex: 0 0 auto; min-height: 44px; padding: 9px 12px;
  border: 1px solid #9dcac2; border-radius: 11px; background: #f5fffc; color: #246b62;
  cursor: pointer; font-size: .7rem; font-weight: 900; white-space: nowrap;
}
[data-page="lesson"] .text-audio-btn:hover { border-color: var(--teal); background: white; }
[data-page="lesson"] .text-audio-btn.loading { opacity: .62; cursor: wait; }
.choice-list { display: grid; gap: 10px; margin-top: 24px; }
[data-page="lesson"] .choice-audio-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: stretch; }
.choice-option { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center; padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: 15px; background: white; cursor: pointer; transition: .15s ease; }
.choice-option:hover { border-color: var(--teal); transform: translateY(-1px); }
.choice-option.selected { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(21,59,85,.13); }
.choice-option .letter { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #eeeae2; font-weight: 900; }
.choice-option small { display: block; margin-top: 3px; color: var(--ink-soft); }
.answer-input { margin-top: 22px; max-width: 760px; min-height: 54px; font-size: 1.05rem; }
.word-bank, .built-sentence { display: flex; flex-wrap: wrap; gap: 8px; min-height: 70px; padding: 12px; margin-top: 14px; border: 1px dashed #bdb6aa; border-radius: 15px; background: #f6f2ea; }
.word-chip { min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; font-weight: 800; }
.built-sentence { background: white; border-style: solid; }
[data-page="lesson"] .completed-order-audio { display: flex; justify-content: flex-end; margin-top: 8px; }
.matching-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 20px; }
[data-page="lesson"] .matching-row { display: contents; }
[data-page="lesson"] .matching-term {
  min-width: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 0;
}
.sorting-board { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin-top: 20px; }
.sort-column { padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: #f4f0e8; }
.sort-column h3 { font-size: .88rem; }
.sort-column select { margin-top: 8px; }
[data-page="lesson"] .sorting-category-audio,
[data-page="lesson"] .sort-item-heading {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
[data-page="lesson"] .sorting-category-audio {
  margin-top: 18px; padding: 10px; border-radius: 13px; background: #f4f0e8;
}
[data-page="lesson"] .sorting-category-audio > span {
  color: var(--ink-soft); font-size: .72rem; font-weight: 850;
}
[data-page="lesson"] .sort-item-heading { justify-content: space-between; }
[data-page="lesson"] .sort-item-heading h3 { min-width: 0; flex: 1; }
.position-grid { width: min(360px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 20px; }
.position-grid button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; background: #f5f1e9; cursor: pointer; }
.position-grid button.selected { background: var(--teal-soft); border-color: var(--teal); }
.position-grid.has-labels { width: min(860px,100%); }
.position-grid.has-labels button {
  min-width: 0;
  min-height: 104px;
  aspect-ratio: auto;
  padding: 12px 10px;
  display: grid;
  place-content: center;
  gap: 5px;
  color: var(--ink);
  text-align: center;
  line-height: 1.32;
}
.grid-cell-label { overflow-wrap: anywhere; font-size: clamp(.67rem,1.2vw,.82rem); font-weight: 850; }
.position-grid.has-labels button small { color: var(--ink-soft); font-size: .62rem; line-height: 1.3; }
.audio-practice, .speaking-practice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0; padding: 16px; border-radius: 17px; background: var(--teal-soft); }
.audio-btn, .mic-btn { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; color: white; background: var(--teal); cursor: pointer; font-weight: 900; }
.audio-btn.loading { opacity: .65; cursor: wait; }
.mic-btn.listening { background: var(--coral); animation: pulse 1.2s infinite; }
.audio-status, .speech-status { color: #28655f; font-size: .78rem; font-weight: 750; }
.speech-target { flex-basis: 100%; font-family: var(--serif); font-size: 1.3rem; }
.hint-box { margin-top: 12px; padding: 12px 15px; border-radius: 14px; background: #f0ece3; }
.hint-box summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 850; color: var(--navy); }
.hint-box div { padding-top: 8px; color: var(--ink-soft); line-height: 1.6; }
[data-page="lesson"] .hint-countdown { color: var(--teal); font-size: .68rem; font-weight: 900; white-space: nowrap; }
[data-page="lesson"] .hint-mode-toggle button { white-space: nowrap; }
.feedback-card { margin-top: 14px; padding: 17px; border-radius: 16px; line-height: 1.6; }
.feedback-card.correct { background: var(--green-soft); color: #256446; }
.feedback-card.wrong { background: var(--coral-soft); color: #8e3e30; }
.speech-diagnostic {
  margin: 15px 0;
  padding: 14px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(142,62,48,.2);
  border-radius: 14px;
  color: #263f4e;
  background: rgba(255,255,255,.68);
}
.speech-diagnostic-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.speech-diagnostic-compare > span { min-width: 0; padding: 11px; display: grid; gap: 4px; border-radius: 11px; background: #fffaf5; }
.speech-diagnostic small { color: #7d493d; font-size: .61rem; font-weight: 950; letter-spacing: .08em; }
.speech-diagnostic strong { overflow-wrap: anywhere; color: #17384a; }
.speech-diagnostic-details { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.speech-diagnostic-details li { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 8px; }
.speech-diagnostic-details b { color: #8e3e30; }
.speech-diagnostic-next { padding: 12px; display: grid; gap: 5px; border-left: 4px solid #1d746d; border-radius: 10px; background: #e4f1ed; }
.speech-diagnostic-next span { color: #4a626d; font-size: .72rem; }
[data-page="lesson"] .feedback-audio-row + .feedback-audio-row { margin-top: 9px; }
[data-page="lesson"] .feedback-audio-row p { margin: 0; }
.question-actions, .result-actions, .dialog-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.result-panel { margin-top: 16px; padding: 28px; border-radius: 27px; background: var(--navy); color: white; }
.result-panel h2 { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; }
.result-panel p { color: #cbd9df; }
.result-panel .secondary-btn { background: rgba(255,255,255,.08); color: white; border-color: rgba(255,255,255,.2); }

/* Phrase library */
.phrase-heading { align-items: end; }
.search-box { width: min(350px,100%); color: var(--ink-soft); font-size: .72rem; font-weight: 800; }
.search-box input { margin-top: 5px; }
.phrase-filters { margin-bottom: 20px; }
.phrase-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.phrase-card { padding: 22px; border-radius: 23px; border: 1px solid white; background: var(--paper); box-shadow: var(--shadow-small); }
.phrase-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.phrase-card h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.phrase-card .jp { color: var(--ink-soft); }
.phrase-note { margin-top: 12px; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }
.phrase-learning { display: grid; gap: 9px; margin-top: 17px; }
.phrase-learning-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.58); }
.phrase-learning-label { display: flex; align-items: baseline; gap: 7px; color: var(--navy); font-size: .72rem; letter-spacing: .025em; }
.phrase-learning-label .jp { font-size: .68rem; font-weight: 700; }
.phrase-learning-text { margin-top: 5px; color: var(--ink); font-size: .8rem; line-height: 1.55; }
.phrase-learning-jp { margin-top: 3px; }
.phrase-actions { display: flex; align-items: stretch; gap: 7px; margin-top: 15px; flex-wrap: wrap; }
.phrase-audio-group { display: flex; gap: 7px; flex-wrap: wrap; }
.phrase-actions button, .favorite { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #f4f0e8; padding: 8px 12px; cursor: pointer; font-size: .72rem; font-weight: 850; }
.phrase-audio-btn[data-voice="us"] { color: #215f78; background: #edf7fb; border-color: #c6e2eb; }
.phrase-audio-btn[data-voice="gb"] { color: #744c65; background: #f8eff5; border-color: #ead1e0; }
.phrase-audio-btn:disabled { opacity: .58; cursor: wait; }
.favorite { min-width: 44px; }
.favorite.active { color: #a56d0b; background: var(--gold-soft); }
.phrase-source-link { min-height: 44px; display: inline-flex; align-items: center; color: #256c66; font-weight: 850; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.phrase-source-link:hover { color: var(--navy); text-decoration-thickness: 2px; }

/* Teacher */
.teacher-shell { padding-top: 34px; padding-bottom: 70px; }
.teacher-login { min-height: 620px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.teacher-login h1 { font-family: var(--serif); font-size: clamp(3rem,7vw,6rem); font-weight: 500; }
.teacher-login p { color: var(--ink-soft); line-height: 1.7; }
.role-badge { color: #745417; background: var(--gold-soft); }
.teacher-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.teacher-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 22px 0 12px; }
.teacher-tabs button { min-height: 74px; display: grid; align-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 16px; padding: 11px 14px; text-align: left; background: var(--paper); cursor: pointer; font-weight: 850; }
.teacher-tabs button strong { font-size: .8rem; }
.teacher-tabs button small { color: var(--ink-soft); font-size: .62rem; font-weight: 700; }
.teacher-tabs button.active { color: white; background: var(--navy); border-color: var(--navy); }
.teacher-tabs button.active small { color: rgba(255,255,255,.78); }
.teacher-panel { min-height: 360px; padding: 20px; border: 1px solid white; border-radius: 25px; background: rgba(255,253,248,.85); box-shadow: var(--shadow-small); overflow-x: auto; }
.teacher-workflow { margin: 10px 0 20px; border: 1px solid #d8d2c7; border-radius: 20px; background: rgba(255,255,255,.8); }
.teacher-workflow > summary { padding: 16px 19px; cursor: pointer; color: var(--navy); font-weight: 900; }
.teacher-workflow-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; padding: 0 14px 14px; }
.teacher-workflow article { padding: 13px; border-radius: 14px; background: var(--sky-soft); }
.teacher-workflow article:nth-child(2) { background: var(--lavender-soft); }
.teacher-workflow article:nth-child(3) { background: var(--green-soft); }
.teacher-workflow article:nth-child(4) { background: var(--gold-soft); }
.teacher-workflow article:nth-child(5) { background: var(--coral-soft); }
.teacher-workflow strong { color: var(--navy); font-size: .78rem; }
.teacher-workflow p { margin: 7px 0 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.55; }
.lesson-editor-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lesson-editor-steps li { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg,#fff,var(--sky-soft)); }
.lesson-editor-steps li:nth-child(2) { background: linear-gradient(145deg,#fff,var(--lavender-soft)); }
.lesson-editor-steps li:nth-child(3) { background: linear-gradient(145deg,#fff,var(--green-soft)); }
.lesson-editor-steps li > b { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); }
.lesson-editor-steps span { display: grid; gap: 2px; }
.lesson-editor-steps small { color: var(--ink-soft); font-size: .62rem; }
.editor-question-callout { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid rgba(47,143,135,.25); border-radius: 16px; background: var(--teal-soft); }
.editor-question-callout p { margin: 4px 0 0; color: var(--ink-soft); font-size: .7rem; }
.editor-question-callout button { flex: 0 0 auto; }
.easy-question-builder { display: grid; gap: 12px; padding: 16px; border: 1px solid #cddfec; border-radius: 17px; background: var(--sky-soft); }
.easy-question-builder > div:first-child p { margin: 5px 0 0; color: var(--ink-soft); font-size: .76rem; }
.easy-choice-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.advanced-question-details { padding: 12px; border: 1px dashed var(--line); border-radius: 14px; }
.advanced-question-details summary { cursor: pointer; color: var(--ink-soft); font-weight: 800; }
.advanced-question-details label { display: block; margin-top: 12px; }
.data-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.data-table th, .data-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: .78rem; }
.data-table th { color: var(--ink-soft); font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; }
.status-dot { display: inline-flex; padding: 5px 8px; border-radius: 99px; background: var(--gold-soft); color: #765413; font-size: .67rem; font-weight: 850; }
.status-dot.published { background: var(--green-soft); color: #286447; }
.table-actions { display: flex; gap: 6px; }
.table-actions button { border: 1px solid var(--line); background: white; border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: .68rem; font-weight: 800; }
.editor-dialog { width: min(720px,calc(100% - 28px)); }
.editor-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.editor-form .wide, .editor-form .dialog-actions, .editor-form .form-status { grid-column: 1 / -1; }
.teacher-analytics { display: grid; gap: 18px; }
.teacher-analytics-heading > div { color: var(--navy); font-family: var(--serif); font-size: clamp(1.8rem,4vw,2.7rem); }
.teacher-analytics-heading p { margin-top: 5px; color: var(--ink-soft); font-size: .83rem; }
.teacher-analytics-metrics, .teacher-analytics-mini-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.teacher-analytics-metric { display: grid; gap: 5px; min-height: 120px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.teacher-analytics-metric span { color: var(--ink-soft); font-size: .67rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.teacher-analytics-metric strong { color: var(--navy); font-family: var(--serif); font-size: 2rem; font-weight: 600; }
.teacher-analytics-metric small { align-self: end; color: var(--ink-soft); line-height: 1.4; }
.teacher-analytics-tabs { margin: 0; }
.teacher-analytics-content { display: grid; gap: 15px; }
.teacher-analytics-section { padding: 17px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); }
.teacher-analytics-section h2 { color: var(--navy); font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.teacher-analytics-section > p { margin: 5px 0 12px; color: var(--ink-soft); font-size: .78rem; line-height: 1.55; }
.teacher-analytics-section .data-table { margin-top: 9px; }
.teacher-analytics-section .data-table td { vertical-align: top; }
.teacher-analytics-empty { padding: 18px; border-radius: 13px; background: #f0ece3; }
.empty-page { min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.empty-page h1 { font-family: var(--serif); font-size: clamp(2rem,6vw,4.5rem); font-weight: 500; }

.sr-only {
  width: 1px; height: 1px; padding: 0; margin: -1px;
  position: absolute; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.jp[hidden], body.hide-jp .jp { display: none !important; }
[hidden] { display: none !important; }
@keyframes pulse { 50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(216,109,88,.12); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; } }
@media (max-width: 900px) {
  .site-header { position: static; align-items: flex-start; }
  .header-actions { max-width: 58%; }
  .hero, .private-hero, .split-promo, .teacher-login { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .lesson-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metrics, .dashboard-shell { grid-template-columns: repeat(2,1fr); }
  .lesson-banner { grid-template-columns: 1fr; }
  .lesson-mode { min-width: 0; }
  .teacher-analytics-metrics, .teacher-analytics-mini-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .teacher-workflow-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .teacher-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .speech-diagnostic-compare { grid-template-columns: 1fr; }
  .speech-diagnostic-details li { grid-template-columns: 68px minmax(0,1fr); }
  .shell { width: min(100% - 20px,1180px); }
  .site-header { width: calc(100% - 12px); margin-top: 6px; padding: 10px; border-radius: 16px; flex-direction: column; }
  .brand { min-width: 0; }
  .header-actions { max-width: none; width: 100%; justify-content: flex-start; }
  .mobile-settings-toggle { width: 100%; display: flex; justify-content: space-between; }
  .mobile-settings-toggle::after { content: "+"; font-size: 1rem; }
  .mobile-settings-toggle[aria-expanded="true"]::after { content: "−"; }
  .header-settings-controls { width: 100%; display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .header-settings-controls.mobile-open { display: grid; }
  .header-settings-controls > .quiet-btn,
  .header-settings-controls > .voice-select { width: 100%; min-width: 0; justify-content: space-between; }
  .header-settings-controls > .voice-select select { min-width: 0; max-width: 150px; }
  .quiet-btn, .voice-select { padding: 8px 10px; }
  .hero { margin-top: 12px; padding: 30px 20px; border-radius: 25px; }
  .hero h1, .private-hero h1 { font-size: 3.15rem; }
  .hero-panel { padding: 18px; }
  .metrics { grid-template-columns: repeat(2,1fr); }
  .metrics article { padding: 15px; }
  .section { padding-top: 62px; }
  .section-heading, .site-footer, .teacher-top { align-items: flex-start; flex-direction: column; }
  .lesson-grid, .phrase-grid { grid-template-columns: 1fr; }
  .lesson-card { min-height: 300px; }
  .split-promo { margin-top: 48px; padding: 23px; }
  .private-hero { margin-top: 12px; padding: 26px 20px; border-radius: 24px; }
  .dashboard-shell { grid-template-columns: repeat(2,1fr); }
  .quiz-shell { width: calc(100% - 12px); padding-top: 10px; }
  .lesson-banner, .question-stage { padding: 20px 16px; border-radius: 22px; }
  .quiz-toolbar { align-items: stretch; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
  [data-page="lesson"] .hint-mode-toggle { max-width: 100%; }
  [data-page="lesson"] .hint-mode-toggle button { white-space: normal; overflow-wrap: anywhere; }
  .score-pill { margin-left: 0; }
  .question-card { min-height: 260px; }
  [data-page="lesson"] .prompt-heading-row,
  [data-page="lesson"] .context-audio-row,
  [data-page="lesson"] .feedback-audio-row { align-items: flex-start; flex-wrap: wrap; }
  [data-page="lesson"] .choice-audio-row { grid-template-columns: 1fr; }
  [data-page="lesson"] .choice-audio-row .text-audio-btn { justify-self: end; }
  .matching-grid { grid-template-columns: 1fr; }
  .matching-grid label { display: grid; }
  .question-actions .primary-btn { order: -1; flex-basis: 100%; }
  .teacher-login { min-height: 0; padding-top: 36px; }
  .editor-form { grid-template-columns: 1fr; }
  .editor-form .wide, .editor-form .dialog-actions, .editor-form .form-status { grid-column: auto; }
  .teacher-analytics-metrics, .teacher-analytics-mini-grid { grid-template-columns: 1fr; }
  .teacher-workflow-grid, .easy-choice-fields { grid-template-columns: 1fr; }
  .teacher-tabs, .lesson-editor-steps { grid-template-columns: 1fr; }
  .editor-question-callout { align-items: stretch; flex-direction: column; }
}

/* Plans and contact checkout ------------------------------------------------ */
.pricing-hero {
  padding: clamp(58px, 9vw, 112px) 0 34px;
  text-align: center;
}
.pricing-hero h1 {
  max-width: 900px;
  margin: 0 auto 18px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(2.55rem, 6vw, 5.8rem);
  font-weight: 520;
  line-height: 1.02;
}
.pricing-hero > p:not(.eyebrow) {
  max-width: 750px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(.95rem, 1.8vw, 1.12rem);
  line-height: 1.75;
}
.billing-switch {
  width: fit-content;
  margin: 28px auto 0;
  padding: 5px;
  display: flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-small);
}
.billing-switch button {
  min-height: 48px;
  padding: 9px 18px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 850;
}
.billing-switch button.active { color: white; background: var(--navy); }
.billing-switch small { display: block; margin-top: 2px; color: var(--gold); font-size: .62rem; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  align-items: stretch;
  padding-block: 22px 52px;
}
.plan-card {
  min-height: 560px;
  padding: 25px 21px 21px;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius-xl);
  background: rgba(255,253,248,.9);
  box-shadow: var(--shadow);
}
.plan-card.featured { border: 2px solid var(--gold); transform: translateY(-10px); }
.plan-card.premium-plus {
  color: white;
  border-color: rgba(215,169,73,.62);
  background: linear-gradient(150deg,var(--navy-2),var(--navy) 66%,#275c6a);
}
.plan-badge {
  width: fit-content;
  margin: -40px auto 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--navy);
  background: var(--gold);
  box-shadow: 0 10px 24px -16px #65440a;
  font-size: .67rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.plan-card-heading { min-height: 117px; }
.plan-name { color: var(--navy); font-family: var(--serif); font-size: 1.55rem; font-weight: 700; }
.premium-plus .plan-name { color: white; }
.plan-card-heading p { margin-top: 9px; color: var(--ink-soft); font-size: .79rem; line-height: 1.55; }
.premium-plus .plan-card-heading p { color: #d4e2e8; }
.plan-price { display: flex; align-items: baseline; gap: 5px; margin: 12px 0 5px; }
.plan-price strong { color: var(--navy); font-family: var(--serif); font-size: clamp(2rem,3vw,2.65rem); font-weight: 650; }
.premium-plus .plan-price strong { color: #f4d78f; }
.plan-price span, .plan-saving { color: var(--ink-soft); font-size: .68rem; font-weight: 800; }
.premium-plus .plan-price span, .premium-plus .plan-saving { color: #bed0d8; }
.plan-card ul { margin: 18px 0 26px; padding: 0; display: grid; gap: 13px; list-style: none; }
.plan-card li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: .78rem; line-height: 1.45; }
.plan-card li > span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #1d645c; background: var(--teal-soft); font-size: .7rem; font-weight: 950; }
.premium-plus li > span { color: var(--navy); background: #f4d78f; }
.plan-cta { width: 100%; margin-top: auto; text-align: center; }
.premium-plus .plan-cta { color: var(--navy); background: linear-gradient(135deg,#f7dda2,var(--gold)); }
.contact-assurance {
  margin-top: 28px;
  padding: clamp(24px,5vw,52px);
  display: grid;
  grid-template-columns: 1fr minmax(190px,260px);
  gap: clamp(28px,6vw,70px);
  align-items: center;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 32px;
  background: rgba(255,253,248,.88);
  box-shadow: var(--shadow);
}
.contact-assurance h2 { margin-bottom: 14px; color: var(--navy); font-family: var(--serif); font-size: clamp(1.8rem,4vw,3.1rem); font-weight: 560; }
.contact-assurance p:not(.eyebrow) { margin: 0; color: var(--ink-soft); line-height: 1.75; }
.contact-assurance img { width: 100%; height: auto; border: 10px solid white; border-radius: 22px; box-shadow: var(--shadow-small); }
.contact-dialog {
  width: min(520px,calc(100% - 24px));
  padding: 28px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: var(--radius-xl);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 35px 110px -35px var(--navy-2);
}
.contact-dialog::backdrop { background: rgba(13,45,67,.68); backdrop-filter: blur(7px); }
.contact-dialog h2 { margin-right: 35px; color: var(--navy); font-family: var(--serif); font-size: 2rem; font-weight: 620; }
.contact-dialog > p:not(.eyebrow,.contact-status) { color: var(--ink-soft); line-height: 1.6; }
.dialog-close-row { margin: 0; }
.contact-plan-summary { margin: 18px 0; padding: 14px 16px; display: flex; justify-content: space-between; gap: 14px; border-radius: 14px; background: var(--teal-soft); color: var(--navy); }
.contact-message-label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .72rem; font-weight: 850; }
.contact-message-label textarea { resize: vertical; line-height: 1.5; }
.contact-actions { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.contact-channel { min-height: 50px; padding: 11px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; color: white; font-size: .78rem; }
.line-channel { background: #06b84d; }
.instagram-channel { background: linear-gradient(135deg,#f09b3c,#d52f78,#6854bf); }
.contact-status { min-height: 20px; margin: 11px 0 0; color: var(--green); font-size: .76rem; font-weight: 800; }

@media (max-width: 1040px) {
  .plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 30px; }
  .plan-card.featured { transform: none; }
}
@media (max-width: 620px) {
  .pricing-header .header-actions { align-items: stretch; }
  .pricing-header .voice-select { flex: 1; }
  .pricing-hero { padding-top: 45px; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 0; }
  .plan-card-heading { min-height: 0; }
  .plan-badge { margin: -36px auto 13px; }
  .contact-assurance { grid-template-columns: 1fr; }
  .contact-assurance img { width: min(230px,100%); justify-self: center; }
  .contact-dialog { padding: 24px 18px; }
  .contact-actions { grid-template-columns: 1fr; }
}

/* v11 · warm studio edition */
.brand-logo {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 28px -16px rgba(21,59,85,.72);
  transition: transform .24s ease, box-shadow .24s ease;
}
.brand:hover .brand-logo { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 18px 34px -17px rgba(21,59,85,.75); }
.site-header {
  border-color: rgba(255,255,255,.92);
  background: rgba(255,252,247,.9);
  box-shadow: 0 20px 46px -31px rgba(21,59,85,.5);
}
body {
  background:
    radial-gradient(circle at 0 0, rgba(80,190,174,.28), transparent 27rem),
    radial-gradient(circle at 100% 10%, rgba(255,181,139,.25), transparent 32rem),
    radial-gradient(circle at 86% 88%, rgba(255,198,104,.2), transparent 31rem),
    linear-gradient(135deg,#f3fbf7 0%,#fff8ef 46%,#fff0e4 100%);
}
.hero {
  min-height: 560px;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.94);
  background:
    radial-gradient(circle at 10% 12%, rgba(67,181,166,.22), transparent 18rem),
    radial-gradient(circle at 92% 85%, rgba(247,168,104,.2), transparent 20rem),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,249,241,.94));
  box-shadow: 0 36px 90px -54px rgba(65,50,80,.5);
}
.hero::after { border-color: rgba(47,143,135,.09); }
.hero::before { color: rgba(215,169,73,.7); }
.hero h1 { color: var(--navy); font-weight: 650; }
.hero h1 span { color: var(--teal); }
.hero-lead, .hero .jp { color: var(--ink-soft); }
.hero .eyebrow { color: #23786f; }
.hero-panel {
  border-color: rgba(47,143,135,.16);
  color: var(--ink);
  background: rgba(255,255,255,.76);
  box-shadow: 0 28px 60px -45px rgba(21,59,85,.65);
}
.hero-panel .panel-kicker { color: #9b6a16; }
.practice-flow li { border-color: rgba(21,59,85,.09); }
.practice-flow small { color: var(--ink-soft); }
.practice-flow li span { color: var(--teal); border-color: rgba(47,143,135,.22); }
.hero .primary-btn { color: white; background: linear-gradient(130deg,var(--navy),var(--teal)); }
.hero .secondary-btn { color: var(--navy); border-color: rgba(21,59,85,.14); background: rgba(255,255,255,.9); }

.lesson-card { cursor: pointer; }
.lesson-card::after { content: none; }
.lesson-card-locked {
  border-color: rgba(21,59,85,.12);
  background: linear-gradient(145deg,rgba(255,255,255,.92),rgba(240,245,243,.9));
}
.lesson-card-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg,rgba(255,255,255,.02),rgba(232,241,238,.22));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.62);
}
.lesson-card-locked .en,
.lesson-card-locked .jp,
.lesson-card-locked .lesson-meta { filter: blur(.55px); opacity: .64; }
.lesson-card-locked .lesson-status { color: #35685f; background: #e2f0ec; }
.lesson-action.locked { position: relative; z-index: 1; color: white; background: linear-gradient(130deg,var(--navy),var(--teal)); border-color: transparent; }

.required-note { margin: 0; color: var(--ink-soft); font-size: .68rem; }
.required-note b { color: var(--coral); }
.field-help { display: block; margin: -2px 0 2px; color: var(--ink-soft); font-size: .64rem; line-height: 1.4; }
.signup-form label > span { color: var(--navy); }
.signup-form label > span::first-letter { }
.signup-form input:invalid:not(:placeholder-shown),
.signup-form select:invalid { border-color: rgba(216,109,88,.62); }
.google-btn:disabled { opacity: .58; cursor: not-allowed; filter: grayscale(.25); }
.privacy-note { border-left: 3px solid var(--teal); }

[data-page="lesson"] .prompt-heading-row { align-items: flex-start; }
[data-page="lesson"] .prompt-heading-row h2 { font-size: clamp(1.65rem,3.1vw,2.65rem); }
[data-page="lesson"] .text-audio-btn {
  min-width: 148px;
  max-width: 190px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  white-space: normal;
  text-align: left;
  line-height: 1.15;
}
[data-page="lesson"] .audio-play-icon { flex: 0 0 auto; }
[data-page="lesson"] .audio-button-copy { display: grid; gap: 3px; }
[data-page="lesson"] .audio-button-copy b { font-size: .69rem; }
[data-page="lesson"] .audio-button-copy small { color: #4f7771; font-size: .61rem; font-weight: 750; }
.choice-help-toggle { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; }
.choice-help-toggle small { grid-column: 2; color: var(--ink-soft); font-size: .6rem; }
.speech-status, .phrase-speaking-status { white-space: pre-line; line-height: 1.55; }

.guide-card-themes { grid-column: 1 / -1; }
.guide-concepts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.guide-concept {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(21,59,85,.09);
  border-radius: 18px;
  background: linear-gradient(145deg,#fff,#f7fbfa);
}
.guide-concept::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--guide-tone,var(--teal)); }
.guide-tone-1 { --guide-tone: var(--teal); }
.guide-tone-2 { --guide-tone: var(--lavender); }
.guide-tone-3 { --guide-tone: var(--peach); }
.guide-tone-4 { --guide-tone: var(--sky); }
.guide-concept-number { margin: 0 0 5px; color: var(--guide-tone); font-size: .62rem; font-weight: 950; letter-spacing: .16em; }
.guide-concept h4 { margin: 0 0 10px; color: var(--navy); font-size: 1rem; }
.guide-concept h4 small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.guide-concept > p { margin: 0 0 8px; color: var(--ink-soft); font-size: .78rem; line-height: 1.65; }
.guide-example { display: grid; gap: 4px; margin-top: 12px; padding: 12px; border-radius: 13px; background: rgba(255,255,255,.82); }
.guide-example strong { color: var(--navy); font-size: .82rem; }
.guide-example small { color: var(--ink-soft); font-size: .72rem; }
.guide-example .text-audio-btn { margin-top: 5px; }

@media (max-width: 760px) {
  .brand-logo { width: 44px; height: 44px; flex-basis: 44px; }
  .hero { min-height: 0; }
  .guide-concepts { grid-template-columns: 1fr; }
  [data-page="lesson"] .prompt-heading-row,
  [data-page="lesson"] .context-audio-row,
  [data-page="lesson"] .feedback-audio-row { align-items: stretch; flex-direction: column; }
  [data-page="lesson"] .text-audio-btn { width: 100%; max-width: none; min-width: 0; }
  [data-page="lesson"] .choice-audio-row { grid-template-columns: 1fr; }
}

/* v10 — warmer brand, clearer account flow and calmer playful motion. */
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 22px -1px 22px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,var(--gold),var(--teal),transparent);
  opacity: .6;
}
.brand { position: relative; }
.brand-mark {
  position: relative;
  width: 48px;
  height: 48px;
  grid-template-columns: auto auto auto;
  gap: 1px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 17px 11px 17px 11px;
  background: linear-gradient(145deg,#102f49 5%,#246c79 55%,#3f9a81);
  box-shadow: inset 0 1px rgba(255,255,255,.38),0 13px 26px -16px #123a56;
  transform: rotate(-2deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 11px 7px 11px 7px;
}
.brand-mark b { z-index: 1; font-size: .8rem; letter-spacing: -.05em; }
.brand-mark i { z-index: 1; color: #ffe4a1; font-size: .62rem; animation: brand-glint 3.8s ease-in-out infinite; }
.brand:hover .brand-mark { transform: rotate(1deg) translateY(-2px); box-shadow: inset 0 1px rgba(255,255,255,.4),0 18px 32px -17px #123a56; }
.brand strong { color: var(--navy-2); font-size: 1rem; letter-spacing: -.01em; }
.brand small { font-weight: 700; }

.voice-select {
  box-shadow: inset 0 1px rgba(255,255,255,.85);
  background: linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,241,231,.72));
}
.voice-select:has(#languageToggle) { border-color: rgba(47,143,135,.34); background: linear-gradient(180deg,#f5fffc,#e7f5f2); }
.voice-select select { cursor: pointer; }

.feature-link { min-height: 64px; gap: 11px; padding: 10px 17px 10px 11px; text-align: left; }
.feature-link > span:last-child { display: grid; gap: 2px; }
.feature-link small { opacity: .75; font-size: .68rem; font-weight: 700; }
.feature-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--navy); background: rgba(255,255,255,.88); box-shadow: 0 8px 20px -15px var(--navy); font-size: .76rem; font-weight: 950; }
.secondary-btn.feature-link .feature-icon { color: white; background: linear-gradient(135deg,var(--coral),#e69f75); }
.hero-actions .feature-link:hover .feature-icon { animation: feature-bounce .48s ease; }

.metrics article, .dashboard-card { overflow: hidden; position: relative; }
.metrics article::after, .dashboard-card::after { content: ""; position: absolute; width: 74px; height: 74px; right: -33px; bottom: -39px; border-radius: 50%; background: rgba(255,255,255,.24); }
.metrics strong, .dashboard-card strong { font-family: var(--sans); font-weight: 850; letter-spacing: -.05em; }

.account-card { align-self: start; min-width: 0; padding: 22px; background: rgba(255,255,255,.82); box-shadow: var(--shadow); }
.auth-tabs, .library-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 5px; border-radius: 15px; background: var(--cream); }
.auth-tabs button { min-height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-soft); cursor: pointer; font-weight: 850; }
.auth-tabs button.active { color: white; background: linear-gradient(135deg,var(--navy),#276d7e); box-shadow: 0 10px 22px -16px var(--navy); }
.google-btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: white; color: var(--navy); cursor: pointer; font-weight: 850; }
.google-btn > span:first-child { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: white; background: conic-gradient(#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0); font-weight: 950; }
.auth-divider { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: .67rem; font-weight: 800; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.form-two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.stack-form textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: white; }
.privacy-note { margin: 0; padding: 10px 12px; border-radius: 12px; color: var(--ink-soft); background: var(--sky-soft); font-size: .7rem; line-height: 1.55; }
.membership-benefits { display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }
.membership-benefits li { display: flex; align-items: center; gap: 9px; color: var(--navy); font-size: .83rem; font-weight: 800; }
.membership-benefits li::before { content: "✓"; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); }
.membership-box { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(47,143,135,.28); border-radius: 15px; background: var(--teal-soft); }
.membership-box > strong { color: var(--navy); font-size: 1.05rem; }
.membership-box p { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.55; }
.membership-box form { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; align-items: stretch; }
.membership-box form label { display: grid; gap: 5px; color: var(--ink-soft); font-size: .7rem; font-weight: 850; }
.membership-box input { min-width: 0; }
.membership-box form .secondary-btn { width: 100%; min-height: 46px; }
.profile-completion { margin-top: 5px; padding: 12px; border: 1px solid rgba(47,143,135,.28); border-radius: 16px; background: rgba(255,255,255,.64); }
.profile-completion summary { cursor: pointer; color: var(--navy); font-weight: 850; }
.profile-completion > p { margin: 8px 0 11px; color: var(--ink-soft); font-size: .72rem; line-height: 1.55; }
.profile-completion .signup-form { margin-top: 10px; }
.membership-admin { display: grid; gap: 13px; margin-bottom: 18px; padding: 18px; border: 1px solid rgba(47,143,135,.28); border-radius: 20px; background: linear-gradient(145deg,var(--teal-soft),#fffaf0); }
.teacher-panel-heading > div { color: var(--navy); font-size: 1.2rem; font-weight: 900; }
.teacher-panel-heading p { margin: 4px 0 0; color: var(--ink-soft); font-size: .76rem; }
.editor-check-field { display: flex !important; align-items: center; gap: 8px; }
.editor-check-field input { width: auto; }
.code-create-form { display: grid; grid-template-columns: minmax(190px,1.4fr) repeat(5,minmax(110px,.7fr)) auto; gap: 8px; }
.code-create-form input, .code-create-form select { min-width: 0; }
.generated-code { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; border-radius: 14px; background: white; }
.generated-code strong { color: var(--navy); letter-spacing: .05em; }
.generated-code p { flex: 1 1 260px; margin: 0; color: var(--ink-soft); font-size: .7rem; }
.code-list { display: grid; gap: 9px; }
.code-history-item { border: 1px solid rgba(21,59,85,.13); border-radius: 14px; background: rgba(255,255,255,.76); }
.code-history-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; cursor: pointer; list-style-position: inside; }
.code-history-item summary > span { display: inline-grid; gap: 3px; margin-right: auto; }
.code-history-item summary strong { color: var(--navy); font-size: .78rem; }
.code-history-item summary small, .code-history-meta { color: var(--ink-soft); font-size: .66rem; line-height: 1.45; }
.code-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--navy); background: var(--gold-soft); font-size: .61rem; }
.code-status-unused { color: #176b50; background: #dff4e8; }
.code-status-disabled, .code-status-expired, .code-status-used { color: #893b31; background: #fde5df; }
.code-history-meta { margin: 0; padding: 0 12px 9px; }
.code-edit-fields { display: grid; grid-template-columns: minmax(170px,1.4fr) repeat(5,minmax(105px,.7fr)); gap: 8px; padding: 0 12px 10px; }
.code-edit-fields input, .code-edit-fields select { width: 100%; min-width: 0; }
.code-enabled-field { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink-soft); font-size: .7rem; font-weight: 800; }
.code-enabled-field input { width: auto; }
.code-history-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.code-history-actions button { min-height: 39px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; font-weight: 800; }
.table-scroll { overflow-x: auto; border-radius: 16px; }

/* Teacher Studio control surfaces */
.teacher-list-view, .learner-admin, #learnerDialogContent { display: grid; gap: 16px; }
.lesson-list-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lesson-list-filters .filter-chip[aria-pressed="true"] { color: white; border-color: var(--navy); background: var(--navy); }
.lesson-list-filters p { flex: 1 1 360px; margin: 0 0 0 6px; color: var(--ink-soft); font-size: .72rem; line-height: 1.5; }
.table-actions .danger-action, .danger-action { border: 1px solid rgba(178,62,46,.35); border-radius: 10px; background: #fff1ee; color: #993b2e; }
.danger-action:disabled { opacity: .48; cursor: not-allowed; }
.generated-code { justify-content: space-between; border: 2px solid rgba(47,143,135,.36); box-shadow: 0 13px 30px -25px var(--navy); }
.generated-code > div { display: grid; gap: 6px; min-width: min(100%,360px); }
.generated-code code { width: fit-content; padding: 9px 12px; border-radius: 10px; color: var(--navy); background: var(--gold-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(.94rem,2vw,1.25rem); font-weight: 900; letter-spacing: .08em; user-select: all; }
.generated-code .primary-btn { flex: 0 0 auto; }
.code-history-note { margin: 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.5; }
.learner-dialog { width: min(1120px,calc(100% - 28px)); }
.learner-profile-card { padding: 18px; border-radius: 18px; background: linear-gradient(135deg,var(--teal-soft),rgba(255,255,255,.92)); }
.learner-profile-card > div { color: var(--navy); font-size: 1rem; font-weight: 900; }
.learner-profile-card p { margin: 6px 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }
.learner-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.learner-metrics article { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.learner-metrics span { color: var(--ink-soft); font-size: .66rem; font-weight: 800; }
.learner-metrics strong { color: var(--navy); font-size: 1.7rem; }
.learner-control-section { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); }
.learner-control-section h3 { margin-bottom: 5px; color: var(--navy); font-size: 1.15rem; }
.learner-control-section > p { margin-bottom: 13px; color: var(--ink-soft); font-size: .75rem; line-height: 1.5; }
.learner-access-actions { display: grid; grid-template-columns: 100px repeat(2,minmax(120px,.7fr)) repeat(3,max-content); gap: 8px; align-items: center; }
.learner-access-actions input, .learner-access-actions select, .learner-control-section .data-table select { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: white; }
.learner-access-actions button { min-height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: white; cursor: pointer; font-weight: 800; }
.learner-control-section > small { display: block; margin-top: 10px; color: var(--ink-soft); line-height: 1.5; }
.control-warning { padding: 10px 12px; border-radius: 12px; color: #805d19 !important; background: var(--gold-soft); }
.learner-timeline { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.learner-timeline li { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(220px,1.2fr) max-content; gap: 12px; align-items: start; padding: 11px 12px; border-radius: 12px; background: var(--cream); }
.learner-timeline strong { color: var(--navy); font-size: .75rem; }
.learner-timeline span, .learner-timeline time { color: var(--ink-soft); font-size: .68rem; line-height: 1.45; }
.learner-timeline time { white-space: nowrap; }
.lesson-bulk-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 10px; padding: 10px; border-radius: 12px; background: var(--cream); }
.lesson-bulk-controls label { color: var(--navy); font-size: .72rem; font-weight: 850; }
.lesson-bulk-controls select, .lesson-bulk-controls button { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: white; font-weight: 800; }
.assignment-settings { min-width: 235px; }
.assignment-settings summary { cursor: pointer; color: var(--navy); font-size: .69rem; font-weight: 850; }
.assignment-settings > div { display: grid; grid-template-columns: 64px minmax(150px,1fr); gap: 7px; align-items: center; margin-top: 8px; }
.assignment-settings input, .assignment-settings select { min-width: 0; min-height: 38px !important; }
.assignment-settings > div > select, .assignment-settings > div > label, .assignment-settings > div > button { grid-column: 1 / -1; }
.assignment-settings label { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: .67rem; font-weight: 800; }
.assignment-settings label input { width: auto !important; }
.assignment-settings button { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; font-weight: 800; }

/* Premium teacher-reviewed submissions */
.premium-tasks-panel { display: grid; gap: 18px; margin: 26px 0; padding: clamp(18px,3vw,30px); border: 1px solid rgba(47,143,135,.28); border-radius: 24px; background: linear-gradient(145deg,#fffaf0,var(--teal-soft)); }
.locked-question-teasers { display: grid; gap: 18px; margin: 26px 0; padding: clamp(18px,3vw,30px); border: 1px solid rgba(215,169,73,.4); border-radius: 24px; background: linear-gradient(145deg,#fffaf0,#f2f8f7); }
.locked-question-heading > span, .locked-question-plan { color: var(--teal); font-size: .66rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.locked-question-heading h2 { margin: 6px 0; color: var(--navy); font-size: clamp(1.4rem,3vw,2rem); }
.locked-question-heading p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.locked-question-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
.locked-question-teaser { display: grid; gap: 9px; padding: 16px; border: 1px solid rgba(21,59,85,.12); border-radius: 16px; background: rgba(255,255,255,.88); }
.locked-question-teaser h3, .locked-question-teaser p { margin: 0; }
.locked-question-teaser h3 { color: var(--navy); }
.locked-question-teaser p { color: var(--ink-soft); font-size: .76rem; line-height: 1.55; }
.locked-question-placeholder { display: grid; gap: 7px; padding: 13px; border-radius: 12px; background: var(--cream); filter: blur(2px); }
.locked-question-placeholder i { display: block; height: 9px; border-radius: 999px; background: linear-gradient(90deg,rgba(21,59,85,.15),rgba(47,143,135,.26)); }
.locked-question-placeholder i:nth-child(2) { width: 78%; }
.locked-question-placeholder i:nth-child(3) { width: 58%; }
.locked-question-teasers > .primary-btn { width: fit-content; text-decoration: none; }
.question-access-note { color: var(--ink-soft); line-height: 1.55; }
.premium-task-heading span, .premium-task-lock > span { color: var(--teal); font-size: .66rem; font-weight: 950; letter-spacing: .16em; }
.premium-task-heading h2, .premium-task-lock h2 { margin: 6px 0; color: var(--navy); font-size: clamp(1.5rem,3vw,2.3rem); }
.premium-task-heading p, .premium-task-lock p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.premium-task-list { display: grid; gap: 15px; }
.premium-task-card { display: grid; gap: 10px; padding: clamp(16px,2.5vw,24px); border: 1px solid rgba(21,59,85,.12); border-radius: 19px; background: rgba(255,255,255,.9); box-shadow: 0 16px 34px -30px var(--navy); }
.premium-task-type, .premium-submission-status { width: fit-content; padding: 5px 8px; border-radius: 999px; color: var(--navy); background: var(--gold-soft); font-size: .64rem; font-weight: 900; }
.premium-task-card h3 { margin: 0; color: var(--navy); font-size: 1.35rem; }
.premium-task-card p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.premium-task-card textarea { width: 100%; resize: vertical; }
.premium-requirements { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0; padding: 0; list-style: none; }
.premium-requirements li { padding: 6px 8px; border-radius: 9px; color: var(--ink-soft); background: var(--cream); font-size: .68rem; font-weight: 800; }
.premium-word-count { color: var(--ink-soft); font-size: .7rem; font-weight: 800; }
.premium-word-count[data-valid="true"] { color: #176b50; }
.premium-task-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.premium-task-actions button { min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; font-weight: 850; }
.premium-task-actions button:disabled { cursor: not-allowed; opacity: .55; }
.premium-recorder { display: grid; gap: 10px; padding: 13px; border-radius: 14px; background: var(--cream); }
.premium-recorder > strong { color: var(--navy); font-family: ui-monospace,monospace; font-size: 1.3rem; }
.premium-recorder audio { width: 100%; }
.premium-feedback { display: grid; gap: 6px; padding: 13px; border-left: 4px solid var(--teal); border-radius: 10px; background: var(--teal-soft); }
.premium-feedback strong { color: var(--navy); }
.premium-task-lock { position: relative; display: grid; gap: 10px; overflow: hidden; padding: clamp(20px,4vw,36px); border-radius: 20px; background: rgba(255,255,255,.78); }
.premium-task-lock::after { content: "PREMIUM"; position: absolute; right: -31px; top: 27px; width: 135px; padding: 6px 0; color: white; background: linear-gradient(90deg,var(--coral),#e49862); font-size: .62rem; font-weight: 950; letter-spacing: .12em; text-align: center; transform: rotate(42deg); }
.premium-task-lock .primary-btn { width: fit-content; margin-top: 4px; text-decoration: none; }
.premium-admin { display: grid; gap: 18px; }
.premium-admin-section { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.78); }
.premium-admin-section h2 { margin: 0; color: var(--navy); }
.premium-admin-section > p { margin: 0; color: var(--ink-soft); font-size: .75rem; line-height: 1.55; }
.premium-task-builder { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.premium-task-builder input, .premium-task-builder select, .premium-task-builder textarea { min-width: 0; }
.premium-task-builder textarea { grid-column: span 2; }
.premium-task-builder .primary-btn { grid-column: 1 / -1; justify-self: start; }
.premium-review-list { display: grid; gap: 12px; }
.premium-review-card { display: grid; gap: 9px; padding: 15px; border: 1px solid rgba(21,59,85,.13); border-radius: 15px; background: white; }
.premium-review-card > span { color: var(--teal); font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.premium-review-card h3, .premium-review-card p { margin: 0; }
.premium-response-text { margin-top: 9px !important; padding: 12px; border-radius: 10px; white-space: pre-wrap; background: var(--cream); line-height: 1.6; }
.premium-feedback-editor { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 9px; align-items: start; }
.premium-feedback-editor textarea { width: 100%; resize: vertical; }
.premium-feedback-editor label, .premium-feedback-editor .premium-task-actions { grid-column: 1 / -1; }
.premium-feedback-editor label { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: .7rem; font-weight: 800; }
.premium-feedback-editor label input { width: auto; }

@media (max-width: 820px) {
  .premium-task-builder { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .premium-feedback-editor { grid-template-columns: 1fr 1fr; }
  .premium-feedback-editor > input { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .premium-task-builder, .premium-feedback-editor { grid-template-columns: 1fr; }
  .premium-task-builder textarea, .premium-feedback-editor > * { grid-column: 1; }
}

/* Final product polish · bright studio, premium plans, honest locks ---------- */
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% 2%,rgba(47,143,135,.09),transparent 25rem),
    radial-gradient(circle at 94% 22%,rgba(215,169,73,.09),transparent 28rem),
    #f7faf8;
}
html[data-theme="light"] .site-header {
  border-color: rgba(21,59,85,.09);
  background: rgba(255,255,255,.91);
}

/* Cards retain their badge inside their own stacking context at every width. */
.plan-grid { padding-top: 56px; }
.plan-card {
  isolation: isolate;
  overflow: visible;
  padding-top: 32px;
}
.plan-card.featured { padding-top: 32px; }
.plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  max-width: calc(100% - 30px);
  margin: 0;
  white-space: nowrap;
  transform: translate(-50%,-55%);
}
.plan-card.premium-plus {
  border-color: rgba(224,185,99,.72);
  background: linear-gradient(145deg,#071c2b 0%,#0d3044 58%,#184853 100%);
  box-shadow: 0 30px 75px -44px rgba(6,23,34,.92);
}
.plan-card.premium-plus::before {
  height: 5px;
  background: linear-gradient(90deg,#9b6a16,#f4d995,#b78321,#f8e8bd,#9b6a16);
  background-size: 240% 100%;
  animation: premium-signature-border 8s linear infinite;
}
@keyframes premium-signature-border { to { background-position: 240% 0; } }
.premium-promotion {
  margin: 12px 0 2px;
  padding: 14px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(27,101,91,.23);
  border-radius: 14px;
  color: #123e42;
  background: linear-gradient(135deg,#e4f4ed,#f7f0dc);
}
.premium-promotion > span { color: #7a5510; font-size: .58rem; font-weight: 950; letter-spacing: .11em; }
.premium-promotion strong { color: #123b55; font-size: 1rem; }
.premium-promotion b { font-size: .73rem; }
.premium-promotion small { color: #465b63; font-size: .64rem; line-height: 1.45; }
.pricing-hero::after { content: none; }

/* Locked content stays legible and honest: no fake blurred preview. */
.lesson-card-locked {
  border-color: rgba(21,59,85,.18);
  background: linear-gradient(145deg,#f7faf8,#edf3f1);
}
.lesson-card-locked::after { content: none; }
.lesson-card-locked::before { width: 6px; height: 100%; background: linear-gradient(var(--navy),var(--teal)); }
.lesson-card-locked .en,
.lesson-card-locked .jp,
.lesson-card-locked .lesson-meta { filter: none; opacity: 1; user-select: auto; }
.lesson-card-locked .lesson-action.locked { background: linear-gradient(130deg,#153b55,#246c69); }
.membership-lock-card {
  justify-items: start;
  max-width: 720px;
  padding: clamp(24px,5vw,42px);
  border-color: rgba(21,59,85,.17);
  background: linear-gradient(145deg,#fff,#edf5f2);
  text-align: left;
}
.membership-lock-kicker {
  width: fit-content;
  height: auto;
  padding: 6px 9px;
  border-radius: 6px;
  color: white;
  background: var(--navy);
  box-shadow: none;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .13em;
}
.locked-question-teasers { border-color: rgba(21,59,85,.17); background: linear-gradient(145deg,#fff,#edf5f2); }
.locked-question-teaser { border-color: rgba(21,59,85,.13); box-shadow: none; }
.locked-question-placeholder { filter: none; opacity: 1; transform: none; background: #edf1ef; }
.locked-question-placeholder::after { content: none; }
.locked-question-placeholder i { background: #d5dfdc; }

/* A consistent personal footer across learner-facing pages. */
.site-footer.premium-footer {
  padding: 26px 4px 18px;
  display: grid;
  grid-template-columns: minmax(220px,1fr) auto;
  gap: 18px 34px;
  border-color: rgba(21,59,85,.13);
}
.footer-brand { display: flex; align-items: center; gap: 11px; }
.footer-brand img { width: 44px; height: 44px; border-radius: 50%; }
.footer-brand span { display: grid; gap: 2px; }
.footer-brand strong { color: var(--navy); font-size: .86rem; }
.footer-brand small { color: var(--ink-soft); font-size: .67rem; }
.premium-footer nav { justify-content: flex-end; }
.premium-footer nav a { color: var(--navy); font-weight: 800; }
.premium-footer > p { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: .65rem; }

html[data-theme="dark"] .premium-promotion { color: #f7e3b6; border-color: rgba(224,185,99,.35); background: rgba(224,185,99,.11); }
html[data-theme="dark"] .premium-promotion strong,
html[data-theme="dark"] .premium-promotion b { color: #fff4d8; }
html[data-theme="dark"] .premium-promotion small { color: #dbe8e9; }
html[data-theme="dark"] .lesson-card-locked,
html[data-theme="dark"] .membership-lock-card,
html[data-theme="dark"] .locked-question-teasers { color: var(--ink); border-color: var(--line); background: #102a3c; }
html[data-theme="dark"] .locked-question-teaser { background: #0a2131; }
html[data-theme="dark"] .locked-question-placeholder { background: #163348; }
html[data-theme="dark"] .locked-question-placeholder i { background: #315267; }
html[data-theme="dark"] .footer-brand strong,
html[data-theme="dark"] .premium-footer nav a { color: var(--ink); }

@media (max-width: 760px) {
  .site-footer.premium-footer { grid-template-columns: 1fr; }
  .premium-footer nav { justify-content: flex-start; }
  .premium-footer > p { grid-column: 1; }
  .plan-grid { padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-card.premium-plus::before { animation: none; }
}

/* 2026-09-05 · teacher-curated structured learning entry */
[data-student-hidden="true"] { display: none !important; }
html[data-student-access="pending"] [data-student-feature],
html[data-student-access="pending"] [data-student-feature-any] {
  visibility: hidden;
  pointer-events: none;
}
body[data-page="pricing"][data-access-pending="true"] #plansMain {
  min-height: 65vh;
  visibility: hidden;
}
body[data-student-shell-feature][data-access-pending="true"] main {
  min-height: 65vh;
  visibility: hidden;
}

.access-boundary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-block: clamp(3rem, 10vh, 7rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-radius: 1.5rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 94%, var(--teal)), var(--paper));
  box-shadow: var(--shadow);
}
.access-boundary-mark {
  display: grid;
  width: 3.4rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--teal) 14%, var(--paper));
  font-size: 1.55rem;
}
.access-boundary h1 { margin: 0 0 .3rem; max-width: 22ch; }
.access-boundary p { max-width: 62ch; }
.access-boundary .primary-btn { margin-top: .7rem; }

@media (max-width: 560px) {
  .access-boundary { grid-template-columns: 1fr; }
}

.curriculum-home { padding-top: 62px; }
.curriculum-home-heading { align-items: center; }
.curriculum-home-heading > div { max-width: 730px; }
.curriculum-category-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 15px;
}
.curriculum-category-card {
  min-height: 190px;
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(21,59,85,.1);
  border-radius: 26px;
  background: rgba(255,253,248,.9);
  box-shadow: var(--shadow-small);
  transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.curriculum-category-card::after {
  content: "";
  width: 130px;
  height: 130px;
  position: absolute;
  right: -58px;
  bottom: -68px;
  border-radius: 50%;
  background: currentColor;
  opacity: .07;
}
.curriculum-category-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47,143,135,.42);
  box-shadow: 0 25px 55px -35px rgba(13,45,67,.65);
}
.curriculum-category-card.words { color: #276a56; }
.curriculum-category-card.phrases { color: #335b87; }
.curriculum-category-card.phonics { color: #9a583f; }
.curriculum-category-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 21px;
  background: color-mix(in srgb,currentColor 11%,var(--paper));
  font-size: 2rem;
}
.curriculum-category-card > span:nth-child(2) { display: grid; gap: 7px; }
.curriculum-category-card small {
  color: currentColor;
  font-size: .65rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .13em;
}
.curriculum-category-card strong { color: var(--ink); font-size: 1.08rem; line-height: 1.25; }
.curriculum-category-card em { color: var(--ink-soft); font-size: .73rem; font-style: normal; line-height: 1.45; }
.curriculum-category-card > b { position: relative; z-index: 1; font-size: 1.25rem; }

.announcement-banner {
  margin-top: 32px;
  padding: 17px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  border: 1px solid rgba(215,169,73,.48);
  border-radius: 18px;
  background: linear-gradient(115deg,rgba(246,234,208,.96),rgba(255,253,248,.95));
  box-shadow: var(--shadow-small);
}
.announcement-banner[hidden] { display: none; }
.announcement-banner > span { font-size: 1.25rem; }
.announcement-banner h2 { margin: 0 0 3px; color: var(--navy); font-size: .95rem; }
.announcement-banner p { margin: 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.6; }

html[data-theme="dark"] .curriculum-category-card {
  border-color: rgba(197,224,227,.16);
  background: rgba(9,33,49,.84);
}
html[data-theme="dark"] .curriculum-category-card strong { color: #eff8f7; }
html[data-theme="dark"] .curriculum-category-card em { color: #b8cbd0; }
html[data-theme="dark"] .announcement-banner {
  border-color: rgba(237,204,124,.32);
  background: linear-gradient(115deg,rgba(104,77,27,.55),rgba(9,33,49,.92));
}
html[data-theme="dark"] .announcement-banner h2 { color: #fff4d8; }
html[data-theme="dark"] .announcement-banner p { color: #d8e3e4; }

@media (max-width: 900px) {
  .curriculum-category-grid { grid-template-columns: 1fr; }
  .curriculum-category-card { min-height: 142px; }
}
@media (max-width: 620px) {
  .curriculum-home { padding-top: 46px; }
  .curriculum-home-heading { align-items: flex-start; }
  .curriculum-home-heading > .secondary-btn { width: 100%; }
  .curriculum-category-card { min-height: 130px; padding: 18px; gap: 13px; border-radius: 21px; }
  .curriculum-category-icon { width: 54px; height: 54px; border-radius: 17px; font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .curriculum-category-card { transition: none; }
  .curriculum-category-card:hover { transform: none; }
}

@media (max-width: 820px) {
  .learner-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .learner-access-actions { grid-template-columns: 1fr 1fr; }
  .learner-access-actions button:last-child { grid-column: 1 / -1; }
  .learner-timeline li { grid-template-columns: 1fr; }
  .code-edit-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 520px) {
  .learner-metrics, .learner-access-actions { grid-template-columns: 1fr; }
  .generated-code .primary-btn { width: 100%; }
  .code-edit-fields { grid-template-columns: 1fr; }
  .code-history-item summary { align-items: flex-start; flex-direction: column; }
}
.membership-actions { min-width: 350px; }
.membership-actions select { min-height: 39px; }

.lesson-card-locked { background: linear-gradient(145deg,rgba(255,255,255,.9),rgba(240,236,227,.86)); }
.lesson-card-locked::after { content: "MEMBERSHIP"; position: absolute; top: 58px; right: -29px; width: 116px; padding: 5px 0; color: white; background: linear-gradient(90deg,var(--coral),#e49862); font-size: .56rem; font-weight: 950; letter-spacing: .12em; text-align: center; transform: rotate(42deg); }
.lesson-action.locked { color: var(--navy); background: var(--gold-soft); border-color: rgba(215,169,73,.5); }
.membership-lock-card { display: grid; justify-items: center; gap: 10px; max-width: 680px; margin: 12px auto; padding: 28px; border: 1px solid rgba(215,169,73,.42); border-radius: 22px; background: linear-gradient(145deg,#fff9ea,#eef8f5); text-align: center; }
.membership-lock-card > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: white; box-shadow: var(--shadow-small); font-size: 1.75rem; }
.membership-lock-card h2 { margin: 4px 0 0; }
.membership-lock-card p { max-width: 560px; margin: 0; color: var(--ink-soft); }

.lesson-guide > summary { position: relative; transition: filter .2s ease; }
.lesson-guide > summary:hover { filter: saturate(1.1) brightness(1.01); }
.guide-summary-title { display: grid; gap: 4px; }
.guide-summary-title b { font-size: 1.03rem; }
.guide-open-cue { min-width: 130px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid rgba(21,59,85,.13); border-radius: 999px; background: rgba(255,255,255,.65); font-size: .7rem; }
.guide-open-cue b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font-size: 1rem; transition: transform .25s ease; }
.lesson-guide[open] .guide-open-cue b { transform: rotate(45deg); }
.guide-card li strong { color: var(--navy); }

@keyframes brand-glint { 0%,72%,100% { transform: scale(.8) rotate(0); opacity: .65; } 80% { transform: scale(1.35) rotate(22deg); opacity: 1; } }
@keyframes feature-bounce { 0%,100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-4px) rotate(-3deg); } }

@media (prefers-reduced-motion: reduce) {
  .brand-mark i, .hero-actions .feature-link:hover .feature-icon { animation: none; }
  .brand-mark, .primary-btn, .secondary-btn, .quiet-btn, .lesson-card { transition: none; }
}

@media (max-width: 760px) {
  .site-header { align-items: flex-start; }
  .brand { min-width: 0; }
  .brand strong { font-size: .84rem; }
  .brand small { font-size: .61rem; }
  .feature-link { width: 100%; }
  .form-two { grid-template-columns: 1fr; }
  .membership-box form { grid-template-columns: 1fr; }
  .guide-open-cue { width: 100%; }
  .question-illustration { min-height: 150px; padding: 8px; }
  .question-illustration img { max-height: 46vh; }
  .code-create-form { grid-template-columns: 1fr; }
}

/* v9 · playful, calm and reversible */
:root {
  --lavender: #7568c7;
  --lavender-soft: #ebe8fb;
  --sky: #4e94be;
  --sky-soft: #e3f2fa;
  --peach: #ef8c67;
  --lemon-soft: #fff1bd;
}
body {
  background:
    radial-gradient(circle at 4% 5%, rgba(78,148,190,.18), transparent 25rem),
    radial-gradient(circle at 96% 18%, rgba(239,140,103,.17), transparent 28rem),
    radial-gradient(circle at 58% 62%, rgba(117,104,199,.09), transparent 34rem),
    var(--cream);
}
body[data-language="en"] .jp { display: none !important; }
body[data-language="ja"] .en { display: none !important; }
body[data-language="ja"] .ui-en-heading { display: none !important; }
body:not([data-language="ja"]) .ui-ja-heading { display: none !important; }
.hero .ui-ja-heading {
  font-size: clamp(3.1rem, 5.9vw, 5.35rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,214,118,.2), transparent 15rem),
    radial-gradient(circle at 20% 90%, rgba(132,111,217,.28), transparent 22rem),
    linear-gradient(125deg, #102f4a 0%, #1a526a 48%, #3a8c85 100%);
}
.hero::before {
  content: "✦";
  position: absolute;
  right: 13%;
  bottom: 12%;
  color: rgba(255,240,177,.72);
  font-size: 2.2rem;
  filter: drop-shadow(0 0 10px rgba(255,223,135,.45));
  animation: hero-twinkle 3.2s ease-in-out infinite;
}
.hero-panel {
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 24px 60px -38px #071b2a;
}
.practice-flow li:nth-child(1) span { background: rgba(92,190,174,.17); }
.practice-flow li:nth-child(2) span { background: rgba(78,148,190,.2); }
.practice-flow li:nth-child(3) span { background: rgba(239,140,103,.2); }
.practice-flow li:nth-child(4) span { background: rgba(215,169,73,.2); }
.lesson-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lesson-card:nth-child(4n+1) { --card-accent: var(--teal); }
.lesson-card:nth-child(4n+2) { --card-accent: var(--lavender); }
.lesson-card:nth-child(4n+3) { --card-accent: var(--peach); }
.lesson-card:nth-child(4n) { --card-accent: var(--sky); }
.lesson-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 118px;
  height: 118px;
  border: 18px solid color-mix(in srgb, var(--card-accent, var(--teal)) 15%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.lesson-card:hover {
  transform: translateY(-6px) rotate(.15deg);
  border-color: color-mix(in srgb, var(--card-accent, var(--teal)) 32%, white);
  box-shadow: 0 28px 60px -36px color-mix(in srgb, var(--card-accent, var(--navy)) 70%, #000);
}
.primary-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(130deg, var(--navy), #25677f 58%, var(--teal));
}
.primary-btn::after {
  content: "";
  position: absolute;
  inset: -90% auto -90% -35%;
  width: 18%;
  transform: rotate(18deg);
  background: rgba(255,255,255,.34);
  transition: left .5s ease;
}
.primary-btn:hover::after { left: 125%; }
.library-tabs {
  display: inline-flex;
  gap: 6px;
  margin: 2px 0 18px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}
.library-tabs button {
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 850;
}
.library-tabs button.active {
  color: white;
  background: linear-gradient(135deg, var(--lavender), var(--sky));
  box-shadow: 0 10px 22px -15px var(--lavender);
}
.lesson-guide {
  margin: 16px 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 24px;
  background: rgba(255,253,248,.86);
  box-shadow: var(--shadow-small);
}
.lesson-guide > summary {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  cursor: pointer;
  color: var(--navy);
  font-weight: 900;
  background: linear-gradient(100deg, var(--sky-soft), var(--lavender-soft), var(--gold-soft));
}
.lesson-guide > summary small { color: var(--ink-soft); font-weight: 700; }
#lessonGuideContent { padding: 20px; }
.guide-snapshot { padding: 20px; border-radius: 19px; background: linear-gradient(135deg, #123a56, #2f7f7a); color: white; }
.guide-snapshot h2 { font-family: var(--serif); font-size: clamp(1.8rem,4vw,3rem); font-weight: 500; }
.guide-snapshot p { margin-bottom: 7px; color: #dbe9ed; line-height: 1.65; }
.guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.guide-card { align-self: start; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: white; }
.guide-card:nth-child(1) { background: var(--lemon-soft); }
.guide-card:nth-child(2) { background: var(--sky-soft); }
.guide-card:nth-child(3) { background: var(--coral-soft); }
.guide-card:nth-child(4) { background: var(--lavender-soft); }
.guide-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; padding: 16px 18px; cursor: pointer; list-style: none; }
.guide-card > summary::-webkit-details-marker { display: none; }
.guide-card > summary:hover { background: rgba(255,255,255,.36); }
.guide-card h3 { margin: 0; color: var(--navy); font-family: var(--serif); font-size: 1.35rem; }
.guide-card-toggle { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); transition: transform .22s ease; }
.guide-card[open] .guide-card-toggle { transform: rotate(45deg); }
.guide-card-body { padding: 0 18px 18px; }
.guide-card ul { margin: 0; padding-left: 19px; line-height: 1.75; }
.guide-phrase-list { display: grid; gap: 9px; }
.guide-phrase-list > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid rgba(21,59,85,.1); }
.guide-phrase-list > div > span { grid-column: 1 / -1; min-width: 0; }
.guide-phrase-list small { display: block; margin-top: 3px; color: var(--ink-soft); font-weight: 650; }
.guide-phrase-list .text-audio-btn { width: 100%; min-width: 0; max-width: none; }
.guide-card-corrections p { display: grid; gap: 3px; margin-bottom: 10px; }
.guide-card-corrections del { color: #965244; }
.question-illustration { margin: 0 0 20px; }
.question-illustration { display: grid; place-items: center; min-height: 200px; padding: 12px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg,#fffdfa,#eef7f7); box-shadow: var(--shadow-small); }
.question-illustration img { width: 100%; height: auto; max-height: min(54vh,520px); object-fit: contain; border: 0; border-radius: 15px; box-shadow: none; }
.question-illustration.is-storyboard { min-height: 0; overflow: hidden; }
.storyboard-panel-window {
  position: relative;
  width: min(100%,620px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 15px;
  background: #edf5f2;
  box-shadow: inset 0 0 0 1px rgba(21,59,85,.08);
}
.question-illustration.is-storyboard .storyboard-panel-window > img {
  position: absolute;
  top: var(--storyboard-y);
  left: var(--storyboard-x);
  width: 300%;
  max-width: none;
  height: 200%;
  max-height: none;
  object-fit: fill;
  border-radius: 0;
}
@media (max-width: 620px) {
  .position-grid.has-labels { grid-template-columns: 1fr; }
  .position-grid.has-labels button { min-height: 70px; }
}
.success-pop { animation: success-pop .55s cubic-bezier(.2,.8,.3,1); }
.celebration-burst { position: fixed; z-index: 400; width: 1px; height: 1px; pointer-events: none; }
.celebration-burst span {
  position: absolute;
  opacity: 0;
  font-size: 1.15rem;
  transform: translate(-50%,-50%);
  animation: burst-spark .95s cubic-bezier(.16,.8,.35,1) var(--delay) forwards;
}
.speaking-burst span { font-size: 1.35rem; }
.click-sparkle {
  position: fixed;
  z-index: 500;
  width: 7px;
  height: 7px;
  pointer-events: none;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(215,169,73,.72);
  animation: click-spark .55s ease-out var(--spark-delay) forwards;
}
@keyframes hero-twinkle { 0%,100% { transform: scale(.75) rotate(0); opacity: .45; } 50% { transform: scale(1.18) rotate(18deg); opacity: 1; } }
@keyframes success-pop { 0% { transform: scale(.97); } 48% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes burst-spark {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) rotate(calc(var(--angle) * -1)) scale(1); }
}
@keyframes click-spark { to { opacity: 0; transform: translateY(-22px) scale(.2); } }
@media (max-width: 620px) {
  .guide-grid { grid-template-columns: 1fr; }
  .lesson-guide > summary { align-items: flex-start; flex-direction: column; }
  .guide-phrase-list > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .guide-phrase-list > div > span { grid-column: 1 / -1; }
  .guide-phrase-list .text-audio-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .voice-select { min-width: 0; }
  .voice-select select { max-width: 145px; }
}

/* v11 final cascade: keep the warm reference-inspired surface above v9 */
body {
  background:
    radial-gradient(circle at 0 0, rgba(80,190,174,.28), transparent 27rem),
    radial-gradient(circle at 100% 10%, rgba(255,181,139,.25), transparent 32rem),
    radial-gradient(circle at 86% 88%, rgba(255,198,104,.2), transparent 31rem),
    linear-gradient(135deg,#f3fbf7 0%,#fff8ef 46%,#fff0e4 100%);
}
.hero {
  color: var(--ink);
  border-color: rgba(255,255,255,.94);
  background:
    radial-gradient(circle at 10% 12%, rgba(67,181,166,.22), transparent 18rem),
    radial-gradient(circle at 92% 85%, rgba(247,168,104,.2), transparent 20rem),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,249,241,.94));
  box-shadow: 0 36px 90px -54px rgba(65,50,80,.5);
}
.hero h1 { color: var(--navy); font-weight: 650; }
.hero h1 span { color: var(--teal); }
.hero-lead, .hero .jp, .practice-flow small { color: var(--ink-soft); }
.hero .eyebrow { color: #23786f; }
.hero-panel { color: var(--ink); border-color: rgba(47,143,135,.16); background: rgba(255,255,255,.76); }
.practice-flow li { border-color: rgba(21,59,85,.09); }
.practice-flow li span { color: var(--teal); border-color: rgba(47,143,135,.22); }
.hero .primary-btn { color: white; background: linear-gradient(130deg,var(--navy),var(--teal)); }
.hero .secondary-btn { color: var(--navy); border-color: rgba(21,59,85,.14); background: rgba(255,255,255,.9); }
.lesson-card::after { content: none; }
.lesson-card-locked::after {
  content: "";
  inset: 0;
  width: auto;
  padding: 0;
  transform: none;
  border-radius: inherit;
  background: linear-gradient(120deg,rgba(255,255,255,.02),rgba(232,241,238,.22));
}
.guide-card-themes { background: rgba(255,255,255,.92) !important; }

/* Central lesson settings and plan-safe locked previews -------------------- */
.lesson-settings-dialog {
  width: min(680px,calc(100% - 24px));
  max-height: calc(100dvh - 28px);
  padding: 28px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius-xl);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 38px 110px -38px var(--navy-2);
}
.lesson-settings-dialog::backdrop { background: rgba(13,45,67,.68); backdrop-filter: blur(7px); }
.lesson-settings-dialog > h2 { margin-bottom: 6px; color: var(--navy); font-family: var(--serif); font-size: 2.25rem; font-weight: 620; }
.settings-intro { margin: 0 42px 20px 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }
.settings-group { margin-top: 12px; padding: 18px; display: grid; gap: 13px; border: 1px solid var(--line); border-radius: 18px; background: rgba(246,241,231,.58); }
.settings-group h3 { margin: 0; color: var(--navy); font-size: 1rem; }
.settings-group > label, .settings-grid > label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .72rem; font-weight: 850; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; align-items: end; }
.settings-check { grid-template-columns: auto 1fr !important; align-items: flex-start; padding: 12px; border-radius: 13px; background: rgba(255,255,255,.82); cursor: pointer; }
.settings-check input { width: 20px; min-height: 20px; margin: 2px 0 0; }
.settings-check span { display: grid; gap: 3px; }
.settings-check b { color: var(--ink); }
.settings-check small, .settings-note { color: var(--ink-soft); font-size: .68rem; line-height: 1.5; }
.settings-note { margin: 0; }
.lesson-settings-dialog > form:last-child { margin-top: 17px; }
.locked-question-teasers { position: relative; overflow: hidden; border-color: rgba(215,169,73,.62); background: linear-gradient(145deg,#fffaf0,#eef8f5); }
.locked-question-teaser { position: relative; overflow: hidden; border-color: rgba(215,169,73,.34); box-shadow: 0 18px 38px -32px var(--navy); }
.locked-question-placeholder { position: relative; overflow: hidden; filter: blur(4px); transform: scale(1.015); }
.locked-question-placeholder::after {
  content: "";
  position: absolute;
  inset: -50% -80%;
  background: linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 49%,transparent 60%);
  animation: locked-shimmer 3.2s ease-in-out infinite;
}
.locked-question-plan { width: fit-content; padding: 5px 8px; border-radius: 999px; color: #78540f; background: var(--gold-soft); }
.locked-premium_plus .locked-question-plan { color: white; background: linear-gradient(135deg,var(--navy),#3a6578); }
@keyframes locked-shimmer { 0%,28% { transform: translateX(-45%); opacity: 0; } 48% { opacity: .8; } 72%,100% { transform: translateX(45%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .locked-question-placeholder::after { display: none; }
}
@media (max-width: 620px) {
  .lesson-settings-dialog { padding: 23px 16px; }
  .settings-grid { grid-template-columns: 1fr; }
  .lesson-settings-dialog .segmented { display: grid; grid-template-columns: 1fr; }
}
.learner-feature-flags { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.learner-feature-flags label { display: grid; gap: 5px; color: var(--ink-soft); font-size: .7rem; font-weight: 800; }
@media (max-width: 820px) { .learner-feature-flags { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) { .learner-feature-flags { grid-template-columns: 1fr; } }

/* v9 final product system -------------------------------------------------- */
:root {
  --ink: #172538;
  --ink-soft: #586779;
  --paper: #fffdf8;
  --cream: #f2efe8;
  --line: #d8d4ca;
  --navy: #102f47;
  --navy-2: #091f31;
  --teal: #287f78;
  --teal-soft: #dcebe8;
  --gold: #d2a64f;
  --gold-soft: #f5e8c9;
  --surface-raised: rgba(255,253,248,.94);
  --surface-soft: rgba(246,242,233,.82);
  --shadow: 0 28px 72px -48px rgba(9,31,49,.56);
  --shadow-small: 0 15px 36px -27px rgba(9,31,49,.42);
  --sans: Inter, "Noto Sans JP", "Avenir Next", "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", "Yu Mincho", Georgia, serif;
}

body {
  font-size: 16px;
  line-height: 1.58;
  background:
    radial-gradient(circle at 4% -8%, rgba(40,127,120,.13), transparent 30rem),
    radial-gradient(circle at 100% 12%, rgba(210,166,79,.12), transparent 32rem),
    linear-gradient(180deg,#f8f6f0 0%,var(--cream) 100%);
}

.site-header {
  color: #f8fbfc;
  border-color: rgba(255,255,255,.1);
  background: rgba(9,31,49,.94);
  box-shadow: 0 22px 48px -30px rgba(9,31,49,.86);
}
.site-header .brand strong { color: white; }
.site-header .brand small { color: #b8c9d2; }
.site-header .quiet-btn,
.site-header .voice-select {
  color: #f7fafb;
  border-color: rgba(255,255,255,.17);
  background: rgba(255,255,255,.08);
}
.site-header .voice-select select { color: #f7fafb; }
.site-header .voice-select select option { color: var(--ink); background: var(--paper); }
.site-header .voice-select:has(#languageToggle) {
  color: #f7fafb;
  border-color: rgba(255,255,255,.17);
  background: rgba(255,255,255,.08);
}
.site-header .quiet-btn:hover { border-color: rgba(210,166,79,.72); background: rgba(255,255,255,.13); }

.hero {
  color: white;
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 88% 15%, rgba(210,166,79,.18), transparent 21rem),
    radial-gradient(circle at 15% 90%, rgba(40,127,120,.3), transparent 25rem),
    linear-gradient(125deg,#091f31 0%,#123c55 62%,#174a5b 100%);
  box-shadow: 0 40px 92px -52px rgba(9,31,49,.88);
}
.hero h1 { color: white; font-weight: 620; }
.hero h1 span { color: #efd28d; }
.hero-lead, .hero .jp, .hero .practice-flow small { color: #d4e0e5; }
.hero .eyebrow { color: #efd28d; }
.hero-panel { color: white; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.075); }
.hero .practice-flow li { border-color: rgba(255,255,255,.12); }
.hero .practice-flow li span { color: #efd28d; border-color: rgba(239,210,141,.34); }
.hero .primary-btn { color: var(--navy-2); background: linear-gradient(135deg,#f6dfaa,var(--gold)); }
.hero .secondary-btn { color: white; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }

.lesson-card,
.metrics article,
.dashboard-card { border-color: rgba(16,47,71,.09); background: var(--surface-raised); }
.lesson-card::before { height: 4px; background: linear-gradient(90deg,var(--teal),var(--gold)); }
.lesson-card-locked {
  border-color: rgba(210,166,79,.48);
  background: linear-gradient(145deg,rgba(255,253,248,.98),rgba(235,228,212,.96));
}
.lesson-card-locked .en,
.lesson-card-locked .jp,
.lesson-card-locked .lesson-meta { filter: blur(2.6px); opacity: .48; user-select: none; }
.lesson-card-locked::after {
  content: "MEMBERSHIP";
  inset: 17px 17px auto auto;
  width: auto;
  padding: 7px 10px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: var(--navy-2);
  background: linear-gradient(135deg,#f5dda3,var(--gold));
  box-shadow: 0 12px 28px -18px rgba(77,52,11,.8);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .12em;
}
.lesson-action.locked { color: white; border-color: transparent; background: linear-gradient(135deg,var(--navy-2),#1e5a70); }

.locked-question-teasers {
  border-color: rgba(210,166,79,.62);
  background: linear-gradient(145deg,#fff9eb,#eef5f3);
  box-shadow: 0 28px 70px -52px var(--navy-2);
}
.locked-question-placeholder { filter: blur(6px); opacity: .72; }
.premium-tasks-panel {
  border-color: rgba(210,166,79,.45);
  background:
    radial-gradient(circle at 94% 0,rgba(210,166,79,.17),transparent 20rem),
    linear-gradient(145deg,#fffaf0,#edf5f3);
  box-shadow: 0 28px 70px -52px var(--navy-2);
}
.premium-task-card { border-color: rgba(16,47,71,.11); background: rgba(255,255,255,.94); }
.premium-task-heading { padding: clamp(20px,3vw,31px); border-radius: 20px; color: white; background: linear-gradient(125deg,var(--navy-2),#16485a); }
.premium-task-heading > span { color: #efd28d; }
.premium-task-heading h2 { color: white; font-family: var(--serif); font-weight: 580; }
.premium-task-heading > p { max-width: 760px; color: #d5e1e6; }
.premium-review-promise { margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.premium-review-promise li { padding: 8px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #edf4f6; background: rgba(255,255,255,.07); font-size: .67rem; font-weight: 800; }
.premium-task-card { position: relative; overflow: hidden; padding: clamp(21px,3vw,31px); border-radius: 21px; }
.premium-task-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg,var(--teal),var(--gold)); }
.premium-task-card[data-task-type="speaking"]::before { background: linear-gradient(90deg,#1c6671,#65b5aa); }
.premium-task-card[data-task-type="essay"]::before { background: linear-gradient(90deg,#9b701b,var(--gold)); }
.premium-task-topline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.premium-task-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--navy-2); background: var(--gold-soft); font-family: ui-monospace,monospace; font-size: .68rem; font-weight: 950; }
.premium-task-topline .premium-submission-status { margin-left: auto; }
.premium-task-card h3 { max-width: 770px; font-family: var(--serif); font-size: clamp(1.45rem,3vw,2.25rem); font-weight: 620; }
.premium-topic-experience { display: grid; gap: 13px; }
.premium-topic-experience > h4 { margin: 3px 0 0; color: var(--navy); font-size: .78rem; letter-spacing: .02em; }
.premium-topic-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.premium-topic-choices button { min-height: 50px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-soft); background: var(--surface-raised); font: inherit; font-size: .7rem; font-weight: 820; line-height: 1.35; text-align: left; cursor: pointer; }
.premium-topic-choices button:hover { border-color: var(--teal); color: var(--navy); }
.premium-topic-choices button.active { color: white; border-color: transparent; background: linear-gradient(135deg,var(--navy),#236378); box-shadow: 0 12px 25px -20px var(--navy); }
.premium-topic-choices button:disabled { cursor: default; opacity: 1; }
.premium-topic-choices button:focus-visible { outline: 3px solid rgba(210,166,79,.7); outline-offset: 2px; }
.premium-topic-brief { display: grid; gap: 8px; padding: clamp(15px,2vw,20px); border: 1px solid rgba(40,127,120,.18); border-radius: 15px; background: linear-gradient(145deg,var(--teal-soft),var(--surface-raised)); }
.premium-topic-brief h4 { margin: 0; color: var(--navy); font-family: var(--serif); font-size: 1.25rem; }
.premium-topic-level { width: fit-content; padding: 4px 7px; border-radius: 999px; color: var(--navy); background: var(--gold-soft); font-size: .61rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.premium-topic-prompt { display: block; padding-top: 9px; border-top: 1px solid rgba(40,127,120,.17); color: var(--navy); line-height: 1.55; }
.premium-topic-prompt-ja { color: var(--ink-soft); }
.premium-task-checklist { padding: 15px; border: 1px solid rgba(16,47,71,.09); border-radius: 14px; background: var(--surface-soft); }
.premium-task-checklist > strong { color: var(--navy); font-size: .74rem; }
.premium-response-field { display: grid; gap: 7px; color: var(--navy); font-size: .72rem; font-weight: 850; }
.premium-response-field textarea { min-height: 210px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--paper); line-height: 1.62; }
.premium-recorder { padding: 18px; border: 1px solid rgba(16,47,71,.09); }
.premium-recorder-steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; list-style: none; counter-reset: premium-step; }
.premium-recorder-steps li { padding: 10px; border-radius: 11px; color: var(--ink-soft); background: var(--surface-raised); font-size: .67rem; font-weight: 750; counter-increment: premium-step; }
.premium-recorder-steps li::before { content: counter(premium-step); width: 21px; height: 21px; margin-right: 6px; display: inline-grid; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-size: .58rem; }
.premium-task-actions button { min-height: 46px; }
.premium-task-actions .primary-btn { color: white; border-color: transparent; background: linear-gradient(135deg,var(--navy),#236378); }
.premium-feedback { padding: 18px; border-left: 0; border: 1px solid rgba(40,127,120,.24); background: linear-gradient(145deg,var(--teal-soft),var(--surface-raised)); }
.premium-feedback-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.premium-feedback-heading span { color: var(--teal); font-size: .62rem; font-weight: 950; letter-spacing: .11em; }
.premium-feedback-heading strong { padding: 5px 8px; border-radius: 999px; color: var(--navy); background: var(--surface-raised); }
.premium-feedback > small { color: var(--ink-soft); }
.premium-task-lock { min-height: 330px; align-content: center; padding-right: min(36%,300px); border: 1px solid rgba(210,166,79,.52); color: white; background: radial-gradient(circle at 90% 20%,rgba(210,166,79,.23),transparent 20rem),linear-gradient(125deg,var(--navy-2),#16495a); }
.premium-task-lock > span { color: #efd28d; }
.premium-task-lock h2 { color: white; font-family: var(--serif); font-weight: 580; }
.premium-task-lock p { color: #d8e3e7; }
.premium-task-lock .jp { color: #c5d6dc; }
.premium-task-lock::after { content: "PREMIUM"; color: var(--navy-2); background: linear-gradient(90deg,#f5dda3,var(--gold)); }
.premium-lock-preview { position: absolute; right: 26px; top: 50%; width: min(28%,240px); min-height: 180px; padding: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; color: #efdcae; background: rgba(255,255,255,.08); filter: blur(1.5px); line-height: 1.65; transform: translateY(-50%); }
.premium-task-lock .primary-btn { color: var(--navy-2); background: linear-gradient(135deg,#f5dfa9,var(--gold)); }

@media (max-width: 680px) {
  .premium-review-promise { display: grid; }
  .premium-recorder-steps { grid-template-columns: 1fr; }
  .premium-task-lock { min-height: 0; padding-right: clamp(20px,4vw,36px); }
  .premium-lock-preview { position: static; width: 100%; min-height: 90px; transform: none; }
  .premium-task-topline .premium-submission-status { width: 100%; margin-left: 0; }
  .premium-topic-choices { grid-template-columns: 1fr; }
  .premium-topic-choices button { width: 100%; min-height: 48px; }
}

/* Professional pricing journey ------------------------------------------- */
[data-page="pricing"] main { padding-bottom: 40px; }
.pricing-hero {
  min-height: 600px;
  margin-top: 30px;
  padding: clamp(34px,6vw,76px);
  display: grid;
  grid-template-columns: minmax(0,1.28fr) minmax(270px,.72fr);
  gap: clamp(32px,6vw,78px);
  align-items: center;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 34px;
  color: white;
  text-align: left;
  background:
    radial-gradient(circle at 86% 4%,rgba(210,166,79,.2),transparent 20rem),
    radial-gradient(circle at 6% 96%,rgba(40,127,120,.36),transparent 26rem),
    linear-gradient(125deg,#091f31 0%,#11354d 58%,#174858 100%);
  box-shadow: 0 42px 100px -58px rgba(9,31,49,.94);
}
.pricing-hero::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -240px;
  bottom: -250px;
  border: 68px solid rgba(255,255,255,.035);
  border-radius: 50%;
}
.pricing-hero-copy,
.pricing-hero-note { position: relative; z-index: 1; }
.pricing-hero .eyebrow { color: #efd28d; }
.pricing-hero h1 {
  max-width: 820px;
  margin: 0 0 24px;
  color: white;
  font-size: clamp(3rem,5.7vw,5.8rem);
  font-weight: 570;
  line-height: 1.01;
}
.pricing-hero-copy > p:not(.eyebrow) {
  max-width: 730px;
  margin: 0;
  color: #d7e1e6;
  font-size: clamp(1rem,1.5vw,1.16rem);
  line-height: 1.75;
}
.pricing-proof {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-block: 1px solid rgba(255,255,255,.13);
}
.pricing-proof > span { padding: 19px 20px 19px 0; display: grid; gap: 3px; }
.pricing-proof b { color: #efd28d; font-family: var(--serif); font-size: 1.8rem; font-weight: 650; }
.pricing-proof small { color: #c4d3da; font-size: .72rem; }
.pricing-hero-note {
  padding: clamp(24px,3vw,34px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  background: rgba(255,255,255,.075);
  backdrop-filter: blur(10px);
}
.pricing-note-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--navy-2);
  background: linear-gradient(135deg,#f4d99c,var(--gold));
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 800;
}
.pricing-hero-note p { margin: 20px 0 14px; color: #e5edf0; line-height: 1.78; }
.pricing-hero-note strong { color: #efd28d; }

.pricing-selector {
  margin-top: 20px;
  padding: clamp(24px,4vw,40px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 32px;
  align-items: center;
  border: 1px solid rgba(16,47,71,.1);
  border-radius: 24px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-small);
}
.pricing-selector h2 { margin: 0; color: var(--navy); font-size: clamp(1.5rem,3vw,2.35rem); }
.pricing-selector .billing-switch { margin: 0; padding: 6px; background: var(--surface-soft); }
.pricing-selector .billing-switch button { min-width: 155px; min-height: 62px; display: grid; place-items: center; align-content: center; }
.pricing-selector .billing-switch button.active { color: white; background: linear-gradient(135deg,var(--navy-2),#1b5368); box-shadow: 0 12px 25px -18px var(--navy-2); }
.pricing-selector .billing-switch button.active small { color: #f3d68e; }
.billing-summary { grid-column: 1 / -1; min-height: 24px; margin: 0; color: var(--ink-soft); font-size: .8rem; font-weight: 700; }

.plan-grid { gap: 18px; padding-block: 44px 82px; }
.plan-card {
  min-height: 650px;
  padding: 28px 24px 24px;
  border: 1px solid rgba(16,47,71,.12);
  border-radius: 21px;
  background: var(--surface-raised);
  box-shadow: 0 24px 64px -48px rgba(9,31,49,.62);
}
.plan-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 21px 21px 0 0;
  background: #c7c3b9;
}
.plan-card[data-plan="standard"]::before { background: var(--teal); }
.plan-card[data-plan="premium"]::before { background: linear-gradient(90deg,#9a6d16,var(--gold),#f1d38a); }
.plan-card[data-plan="premium_plus"]::before { background: linear-gradient(90deg,var(--gold),#f2d78f); }
.plan-card.featured {
  border: 2px solid var(--gold);
  transform: translateY(-10px);
  box-shadow: 0 34px 80px -48px rgba(92,64,12,.72);
}
.plan-card.premium-plus { background: linear-gradient(150deg,#091f31,#123b52 70%,#174c5b); }
.plan-badge { margin: -44px auto 17px; }
.plan-card-heading { min-height: 128px; }
.plan-name { font-size: 1.72rem; }
.plan-card-heading p { font-size: .82rem; line-height: 1.62; }
.plan-best-for {
  min-height: 86px;
  padding: 13px 14px;
  display: grid;
  gap: 4px;
  align-content: start;
  border-radius: 13px;
  background: var(--surface-soft);
}
.plan-best-for small { color: var(--teal); font-size: .61rem; font-weight: 950; letter-spacing: .12em; }
.plan-best-for strong { color: var(--ink); font-size: .76rem; line-height: 1.45; }
.premium-plus .plan-best-for { background: rgba(255,255,255,.08); }
.premium-plus .plan-best-for small { color: #efd28d; }
.premium-plus .plan-best-for strong { color: white; }
.plan-price { margin-top: 19px; }
.plan-price strong { font-size: clamp(2.25rem,3vw,3.05rem); font-variant-numeric: tabular-nums; }
.plan-saving {
  min-height: 55px;
  margin: 8px 0 0;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(210,166,79,.35);
  border-radius: 12px;
  color: #76530f;
  background: var(--gold-soft);
}
.plan-saving strong { font-size: .78rem; }
.plan-saving span { font-size: .66rem; line-height: 1.45; }
.premium-plus .plan-saving { color: #f7e3b6; border-color: rgba(210,166,79,.3); background: rgba(210,166,79,.12); }
.plan-card ul { gap: 12px; }
.plan-card li { font-size: .79rem; }
.plan-card .plan-cta { min-height: 52px; }

.plan-comparison { padding-block: 74px; }
.comparison-heading { align-items: end; }
.comparison-heading > p { max-width: 500px; margin: 0; font-size: .84rem; line-height: 1.65; }
.comparison-table-wrap {
  overflow: hidden;
  border: 1px solid rgba(16,47,71,.13);
  border-radius: 22px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-small);
}
.comparison-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.comparison-table th,
.comparison-table td { padding: 15px 12px; border-bottom: 1px solid rgba(16,47,71,.09); text-align: center; vertical-align: middle; }
.comparison-table thead th { padding-block: 20px; color: var(--navy); background: var(--surface-soft); font-size: .86rem; }
.comparison-table thead th:first-child { width: 31%; text-align: left; }
.comparison-table tbody th { color: var(--ink); text-align: left; font-size: .76rem; line-height: 1.45; }
.comparison-table td { color: var(--ink-soft); font-size: .73rem; line-height: 1.4; }
.comparison-table .comparison-premium { background: rgba(245,232,201,.45); }
.comparison-table thead .comparison-premium { color: #6e4c0d; background: var(--gold-soft); }
.comparison-table thead small { display: block; margin-top: 3px; color: #856013; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.comparison-yes { width: 27px; height: 27px; margin: auto; display: grid; place-items: center; border-radius: 50%; color: #176452; background: var(--teal-soft); font-weight: 950; }
.comparison-no { color: #a5aab0; }
.comparison-mobile { display: none; }

.contact-assurance {
  margin-top: 38px;
  grid-template-columns: minmax(0,1fr) minmax(220px,300px);
  border-color: rgba(255,255,255,.1);
  color: white;
  background:
    radial-gradient(circle at 90% 0,rgba(210,166,79,.18),transparent 22rem),
    linear-gradient(125deg,#091f31,#123b52);
}
.contact-assurance .eyebrow { color: #efd28d; }
.contact-assurance h2 { color: white; font-weight: 560; }
.contact-assurance p:not(.eyebrow) { color: #d2dfe5; }
.contact-steps { margin: 26px 0 19px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
.contact-steps li { display: flex; align-items: center; gap: 8px; color: #eaf1f3; font-size: .75rem; }
.contact-steps span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--navy-2); background: #efd28d; font-size: .68rem; font-weight: 950; }
.contact-disclaimer { font-size: .74rem; }
.contact-qr-card { padding: 17px; display: grid; gap: 6px; justify-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: rgba(255,255,255,.08); }
.contact-qr-card img { width: min(240px,100%); border: 8px solid white; border-radius: 17px; }
.contact-qr-card strong { color: #efd28d; }
.contact-qr-card small { color: #c8d7de; text-align: center; }

.pricing-faq { padding-block: 86px 58px; }
.pricing-faq > h2 { color: var(--navy); font-family: var(--serif); font-size: clamp(2rem,4vw,3.5rem); font-weight: 560; }
.faq-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.faq-grid details { padding: 20px; border: 1px solid rgba(16,47,71,.11); border-radius: 17px; background: var(--surface-raised); }
.faq-grid summary { color: var(--navy); cursor: pointer; font-weight: 850; line-height: 1.45; }
.faq-grid p { margin: 15px 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.7; }

.contact-dialog { max-height: calc(100dvh - 24px); overflow: auto; }
.contact-field { margin-top: 14px; display: grid; gap: 7px; color: var(--ink-soft); font-size: .72rem; font-weight: 850; }
.contact-field input,
.contact-field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--paper); }
.contact-field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.contact-plan-summary > span { display: grid; gap: 3px; }
.contact-plan-summary small { color: var(--ink-soft); font-size: .6rem; font-weight: 850; }
.contact-message-actions { margin-top: 11px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }
.contact-message-actions button { min-height: 48px; }

@media (max-width: 1080px) {
  .pricing-hero { grid-template-columns: 1fr; min-height: 0; }
  .pricing-hero-note { max-width: 680px; }
  .pricing-selector { grid-template-columns: 1fr; }
  .pricing-selector .billing-switch { width: 100%; }
  .pricing-selector .billing-switch button { flex: 1; }
  .plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 34px; }
  .plan-card { min-height: 0; }
  .plan-card.featured { transform: none; }
}

@media (max-width: 760px) {
  .pricing-hero { padding: 36px 24px; border-radius: 26px; }
  .pricing-hero h1 { font-size: clamp(2.55rem,11vw,4rem); }
  .pricing-proof { grid-template-columns: 1fr; }
  .pricing-proof > span { grid-template-columns: 58px 1fr; align-items: center; border-top: 1px solid rgba(255,255,255,.1); }
  .pricing-proof > span:first-child { border-top: 0; }
  .pricing-selector .billing-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .pricing-selector .billing-switch button { min-width: 0; padding-inline: 9px; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card-heading,
  .plan-best-for { min-height: 0; }
  .comparison-table-wrap { display: none; }
  .comparison-mobile { display: grid; gap: 14px; }
  .comparison-mobile-card { padding: 21px; border: 1px solid rgba(16,47,71,.12); border-radius: 19px; background: var(--surface-raised); }
  .comparison-mobile-card.comparison-premium { border: 2px solid var(--gold); background: linear-gradient(145deg,var(--surface-raised),rgba(245,232,201,.7)); }
  .comparison-mobile-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .comparison-mobile-card h3 { margin: 0; color: var(--navy); font-size: 1.45rem; }
  .comparison-mobile-card header span { padding: 5px 8px; border-radius: 999px; color: #704c0b; background: var(--gold-soft); font-size: .62rem; font-weight: 950; }
  .comparison-mobile-card dl { margin: 17px 0; }
  .comparison-mobile-card dl div { padding: 10px 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(90px,.55fr); gap: 12px; border-top: 1px solid rgba(16,47,71,.09); }
  .comparison-mobile-card dt { color: var(--ink-soft); font-size: .72rem; }
  .comparison-mobile-card dd { margin: 0; color: var(--ink); font-size: .72rem; font-weight: 800; text-align: right; }
  .comparison-mobile-card .comparison-yes { margin-left: auto; }
  .comparison-mobile-card > a,
  .comparison-mobile-card > button { width: 100%; }
  .contact-assurance { grid-template-columns: 1fr; }
  .contact-qr-card { width: min(310px,100%); justify-self: center; }
  .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .shell { width: min(100% - 24px,1180px); }
  .pricing-header .header-actions { width: 100%; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); }
  .pricing-header .quiet-btn,
  .pricing-header .voice-select { width: 100%; min-width: 0; }
  .pricing-header .voice-select select { min-width: 0; max-width: 42px; }
  .pricing-hero { margin-top: 16px; padding: 30px 20px; }
  .pricing-hero h1 { font-size: clamp(2.35rem,12vw,3.3rem); }
  .pricing-selector { padding: 21px 16px; }
  .pricing-selector .billing-switch { grid-template-columns: 1fr; }
  .plan-card { padding: 26px 20px 21px; }
  .plan-price strong { font-size: 2.55rem; }
  .comparison-heading { display: block; }
  .contact-steps { display: grid; }
  .contact-message-actions { grid-template-columns: 1fr; }
}

/* Theme tokens: JS resolves System to the active light/dark value. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] {
  --ink: #edf3f6;
  --ink-soft: #b8c5cc;
  --paper: #102a3c;
  --cream: #081b2a;
  --line: #355064;
  --navy: #d8e8ee;
  --navy-2: #061722;
  --teal: #6fc6bb;
  --teal-soft: #173f44;
  --gold: #e0b963;
  --gold-soft: #493b20;
  --green-soft: #183d32;
  --coral-soft: #4d2e2c;
  --surface-raised: rgba(16,42,60,.94);
  --surface-soft: rgba(8,27,42,.72);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 0 0,rgba(40,127,120,.16),transparent 30rem),
    radial-gradient(circle at 100% 12%,rgba(210,166,79,.1),transparent 32rem),
    #081b2a;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] dialog { color: var(--ink); background-color: var(--paper); }
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .metrics article,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .premium-task-card { border-color: rgba(216,232,238,.12); background: var(--surface-raised); }
html[data-theme="dark"] .premium-topic-choices button { border-color: rgba(216,232,238,.22); color: var(--ink); background: var(--surface-soft); }
html[data-theme="dark"] .premium-topic-choices button.active { color: white; border-color: #77c9be; background: #17685f; }
html[data-theme="dark"] .premium-topic-brief { border-color: rgba(119,201,190,.24); background: linear-gradient(145deg,#123441,var(--surface-soft)); }
html[data-theme="dark"] .lesson-card-locked { border-color: rgba(224,185,99,.45); background: linear-gradient(145deg,#132d3e,#2e2c29); }
html[data-theme="dark"] .lesson-settings-dialog,
html[data-theme="dark"] .contact-dialog { border-color: rgba(255,255,255,.12); background: var(--paper); }
html[data-theme="dark"] .settings-group,
html[data-theme="dark"] .settings-check { background: var(--surface-soft); }
html[data-theme="dark"] .locked-question-teasers,
html[data-theme="dark"] .premium-tasks-panel { color: var(--ink); background: linear-gradient(145deg,#112b3d,#282c2d); }
html[data-theme="dark"] .plan-card.premium-plus { background: linear-gradient(150deg,#061722,#123b52 70%,#174c5b); }
html[data-theme="dark"] .comparison-table th,
html[data-theme="dark"] .comparison-table td,
html[data-theme="dark"] .comparison-mobile-card dl div { border-color: rgba(216,232,238,.11); }
html[data-theme="dark"] .comparison-table .comparison-premium { background: rgba(73,59,32,.48); }
html[data-theme="dark"] .comparison-table thead .comparison-premium { color: #f4d995; background: #493b20; }
html[data-theme="dark"] .phrase-source-link { color: #8dd9cf; }

/* Learner progress, onboarding, and progressive library rendering. */
.learner-progress .section-heading:first-child { align-items: center; }
.learner-progress .continue-card { margin-bottom: 16px; }
.learner-progress .dashboard-shell { grid-template-columns: repeat(3,minmax(0,1fr)); }
.learner-progress .dashboard-card { min-height: 118px; display: grid; align-content: space-between; gap: 12px; }
.profile-gate-dialog { max-height: min(88vh,820px); overflow-y: auto; border: 1px solid rgba(210,166,79,.32); }
.profile-gate-dialog #profileGateMount { margin: 18px 0 12px; }
.profile-gate-dialog .profile-completion { margin: 0; padding: 0; border: 0; background: transparent; }
.profile-gate-dialog .profile-completion > summary,
.profile-gate-dialog .profile-completion > p { display: none; }
.phrase-load-more { padding: 24px 0 8px; text-align: center; }
.phrase-load-more .secondary-btn { min-width: min(260px,100%); }
.phrase-load-more-status { margin: 9px 0 0; color: var(--ink-soft); font-size: .75rem; }
.mic-btn:disabled { color: white; background: #5e6b7d; cursor: not-allowed; opacity: 1; }

@media (max-width: 900px) {
  .learner-progress .dashboard-shell { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 520px) {
  .learner-progress .dashboard-shell { grid-template-columns: 1fr; }
  .library-tabs { width: 100%; display: grid; grid-template-columns: 1fr; }
  .library-tabs button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Final accessibility and responsive cascade --------------------------------
   These rules intentionally sit last so later theme editions cannot weaken
   contrast, keyboard touch targets, or the compact settings header. */
.site-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: 8px;
}
.filter-chip.active,
.lesson-list-filters .filter-chip[aria-pressed="true"] {
  color: #fff;
  border-color: #174f67;
  background: #174f67;
}
.google-btn { color: #102f47; background: #fff; }
.favorite.active { color: #704800; }
.phrase-actions .mic-btn {
  color: #fff;
  border-color: #17685f;
  background: #17685f;
}
.phrase-actions .mic-btn.listening {
  color: #fff;
  border-color: #9c3d31;
  background: #9c3d31;
}
.phrase-actions .mic-btn:disabled,
.mic-btn:disabled { color: #fff; border-color: #536172; background: #536172; }
.audio-btn,
.mic-btn { background: #287f78; }
.mic-btn.listening { background: #9c3d31; }
.faq-grid summary { min-height: 44px; display: flex; align-items: center; }
.pricing-heading-en,
.pricing-heading-ja { display: block; }
.pricing-heading-ja {
  margin-top: .24em;
  font-size: .56em;
  line-height: 1.18;
  letter-spacing: -.035em;
}
body[data-language="en"] .pricing-heading-ja,
body[data-language="ja"] .pricing-heading-en { display: none; }
.pricing-header .voice-select select { min-width: 96px; max-width: none; }

html[data-theme="dark"] .filter-chip.active,
html[data-theme="dark"] .lesson-list-filters .filter-chip[aria-pressed="true"] {
  color: #fff;
  border-color: #17685f;
  background: #17685f;
}
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .quiet-btn,
html[data-theme="dark"] .voice-select {
  color: var(--ink);
  border-color: var(--line);
  background: #163348;
}
html[data-theme="dark"] .primary-btn { color: #fff; background: linear-gradient(135deg,#174f67,#17685f); }
html[data-theme="dark"] .google-btn { color: #102f47; background: #f8fbfc; }
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .quiz-toolbar,
html[data-theme="dark"] .lesson-guide,
html[data-theme="dark"] .membership-lock-card {
  color: var(--ink);
  border-color: var(--line);
  background: #102a3c;
}
html[data-theme="dark"] .auth-tabs,
html[data-theme="dark"] .segmented { background: #0a2131; }
html[data-theme="dark"] .auth-tabs button.active,
html[data-theme="dark"] .segmented button.active {
  color: #fff;
  background: #17685f;
}
html[data-theme="dark"] .privacy-note,
html[data-theme="dark"] .profile-completion { color: var(--ink); border-color: var(--line); background: #163348; }
html[data-theme="dark"] .phrase-card { border-color: rgba(216,232,238,.14); background: #102a3c; }
html[data-theme="dark"] .phrase-learning-item,
html[data-theme="dark"] .library-tabs,
html[data-theme="dark"] .word-bank,
html[data-theme="dark"] .built-sentence,
html[data-theme="dark"] .sort-column,
html[data-theme="dark"] [data-page="lesson"] .sorting-category-audio {
  color: var(--ink);
  border-color: var(--line);
  background: #0a2131;
}
html[data-theme="dark"] .phrase-actions button:not(.phrase-audio-btn):not(.mic-btn),
html[data-theme="dark"] .favorite,
html[data-theme="dark"] .word-chip,
html[data-theme="dark"] .choice-option,
html[data-theme="dark"] .position-grid button {
  color: var(--ink);
  border-color: var(--line);
  background: #163348;
}
html[data-theme="dark"] .favorite.active { color: #f4d995; background: #493b20; }
html[data-theme="dark"] .choice-option .letter { color: #102f47; background: #e9f0f2; }
html[data-theme="dark"] .choice-option.selected,
html[data-theme="dark"] .position-grid button.selected { border-color: #8dd9cf; background: #18484a; }
html[data-theme="dark"] .hint-box { background: #102a3c; border: 1px solid var(--line); }
html[data-theme="dark"] .hint-box summary { color: var(--ink); }
html[data-theme="dark"] .audio-practice,
html[data-theme="dark"] .speaking-practice { background: #173f44; }
html[data-theme="dark"] .audio-btn,
html[data-theme="dark"] .mic-btn,
html[data-theme="dark"] .phrase-actions .mic-btn { color: #fff; background: #17685f; }
html[data-theme="dark"] .mic-btn.listening,
html[data-theme="dark"] .phrase-actions .mic-btn.listening { color: #fff; background: #9c3d31; }
html[data-theme="dark"] .audio-status,
html[data-theme="dark"] .speech-status { color: #d5eeea; }
html[data-theme="dark"] .feedback-card.correct { color: #d7f2e3; background: #183d32; }
html[data-theme="dark"] .feedback-card.wrong { color: #f6d8d3; background: #4d2e2c; }
html[data-theme="dark"] .speech-diagnostic { color: #edf4f6; border-color: #75483f; background: #1b3039; }
html[data-theme="dark"] .speech-diagnostic-compare > span { background: #102a3c; }
html[data-theme="dark"] .speech-diagnostic small { color: #f0c0b4; }
html[data-theme="dark"] .speech-diagnostic strong { color: #f3f8fa; }
html[data-theme="dark"] .speech-diagnostic-details b { color: #f0b0a2; }
html[data-theme="dark"] .speech-diagnostic-next { background: #163f44; }
html[data-theme="dark"] .speech-diagnostic-next span { color: #c4d7dd; }
html[data-theme="dark"] .question-nav button.correct { color: #d7f2e3; border-color: #2d7257; background: #183d32; }
html[data-theme="dark"] .question-nav button.wrong { color: #f6d8d3; border-color: #8b4a42; background: #4d2e2c; }
html[data-theme="dark"] .question-nav button.answered:not(.current):not(.correct):not(.wrong) { color: #f4d995; background: #493b20; }
html[data-theme="dark"] .question-nav button.current { color: #fff; border-color: #17685f; background: #17685f; }
html[data-theme="dark"] .score-pill { color: #f4d995; background: #493b20; }
html[data-theme="dark"] .lesson-guide > summary {
  color: var(--ink);
  background: linear-gradient(100deg,#163348,#1b354d,#3b3524);
}
html[data-theme="dark"] .guide-open-cue { color: var(--ink); border-color: var(--line); background: #0a2131; }
html[data-theme="dark"] .guide-open-cue b { color: #fff; background: #17685f; }
html[data-theme="dark"] .guide-concept,
html[data-theme="dark"] .guide-example { border-color: var(--line); background: #0a2131; }
html[data-theme="dark"] .guide-card-themes { background: #102a3c !important; }
html[data-theme="dark"] .continue-card,
html[data-theme="dark"] .result-panel { color: var(--ink); background: #061722; }
html[data-theme="dark"] .plan-badge,
html[data-theme="dark"] .premium-plus .plan-cta,
html[data-theme="dark"] .premium-plus li > span { color: #091f31; }
html[data-theme="dark"] .hero .primary-btn,
html[data-theme="dark"] .premium-plus .plan-cta { color: #061722; background: #e0b963; }
html[data-theme="dark"] .plan-saving { color: #f4d995; }
html[data-theme="dark"] .comparison-yes { color: #d5eeea; background: #18484a; }
html[data-theme="dark"] .comparison-mobile-card header span { color: #091f31; background: #e0b963; }

@media (min-width: 901px) and (max-width: 1100px) {
  .site-header { gap: 8px; padding-inline: 12px; }
  .site-header .brand { min-width: 180px; }
  .site-header .header-actions { gap: 5px; }
  .site-header .quiet-btn,
  .site-header .voice-select { padding: 7px 9px; font-size: .68rem; }
  .site-header .voice-select select { max-width: 112px; font-size: .68rem; }
}

@media (max-width: 1500px) {
  .site-header {
    position: relative;
    top: auto;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .header-actions,
  .pricing-header .header-actions {
    width: auto;
    max-width: none;
    margin-left: auto;
    display: flex;
    align-items: center;
  }
  .mobile-settings-toggle {
    width: auto;
    min-width: 96px;
    display: inline-flex;
    justify-content: space-between;
    gap: 10px;
  }
  .mobile-settings-toggle::after { content: "+"; font-size: 1rem; }
  .mobile-settings-toggle[aria-expanded="true"]::after { content: "−"; }
  .header-settings-controls {
    width: min(560px,calc(100vw - 24px));
    max-height: min(72vh,560px);
    padding: 12px;
    display: none;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    overflow-y: auto;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 17px;
    background: #091f31;
    box-shadow: 0 24px 55px -24px rgba(9,31,49,.9);
  }
  .header-settings-controls.mobile-open { display: grid; }
  .header-settings-controls > .quiet-btn,
  .header-settings-controls > .voice-select {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }
  .header-settings-controls > .voice-select select,
  .pricing-header .header-settings-controls > .voice-select select { min-width: 96px; max-width: 155px; }
}

@media (max-width: 760px) {
  .pricing-hero {
    min-height: 0;
    gap: 24px;
    padding: 31px 22px;
  }
  .pricing-hero h1 { font-size: clamp(2.3rem,10.5vw,3.7rem); line-height: 1.02; }
  .pricing-hero-copy > p:not(.eyebrow) { font-size: .94rem; line-height: 1.58; }
  .pricing-proof { margin-top: 23px; }
  .pricing-proof > span { padding-block: 12px; }
  .pricing-hero-note { padding: 21px; }
  .pricing-hero-note p { margin: 14px 0 10px; line-height: 1.6; }
}

@media (max-width: 520px) {
  .site-header { padding: 9px 10px; }
  .site-header .brand span:last-child { max-width: 145px; }
  .site-header .brand small { display: none; }
  .site-header .brand strong { font-size: .78rem; line-height: 1.2; }
  .mobile-settings-toggle { min-width: 82px; padding-inline: 10px; }
  .header-settings-controls { grid-template-columns: 1fr; }
  .pricing-heading-ja { font-size: .6em; }
}

/* 2026-08-20 · unified premium clarity layer -----------------------------
   This final layer replaces the conflicting warm/playful/product cascades
   above with one explicit light/dark contract for learner-facing pages. */
:root {
  --learner-bg: #f4f7f5;
  --learner-surface: #fffefa;
  --learner-surface-2: #eef4f2;
  --learner-ink: #14283a;
  --learner-muted: #536776;
  --learner-border: #cedbd8;
  --learner-navy: #0d3046;
  --learner-teal: #1d746d;
  --learner-gold: #d5ae5d;
  --learner-gold-soft: #f4e7c8;
}

html[data-theme="dark"] {
  --learner-bg: #071927;
  --learner-surface: #102b3d;
  --learner-surface-2: #163749;
  --learner-ink: #edf4f6;
  --learner-muted: #b7c8cf;
  --learner-border: #35556a;
  --learner-navy: #dcebf0;
  --learner-teal: #79d2c7;
  --learner-gold: #edcc7c;
  --learner-gold-soft: #493d25;
}

html[data-theme="light"] body,
html[data-theme="dark"] body {
  color: var(--learner-ink);
  background:
    radial-gradient(circle at 5% 0,rgba(38,129,119,.12),transparent 31rem),
    radial-gradient(circle at 100% 15%,rgba(213,174,93,.11),transparent 32rem),
    var(--learner-bg);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 4% 0,rgba(71,176,164,.13),transparent 31rem),
    radial-gradient(circle at 100% 16%,rgba(213,174,93,.08),transparent 30rem),
    #071927;
}

/* Header: light mode must never inherit the dark header's white text. */
html[data-theme="light"] .site-header {
  color: #14283a;
  border-color: rgba(13,48,70,.14);
  background: rgba(255,254,250,.94);
  box-shadow: 0 18px 48px -30px rgba(13,48,70,.5);
}
html[data-theme="light"] .site-header .brand strong { color: #0d3046; }
html[data-theme="light"] .site-header .brand small { color: #536776; }
html[data-theme="light"] .site-header .quiet-btn,
html[data-theme="light"] .site-header .voice-select,
html[data-theme="light"] .site-header .voice-select:has(#languageToggle) {
  color: #19384c;
  border-color: #c9d8d5;
  background: #f5f9f7;
  box-shadow: none;
}
html[data-theme="light"] .site-header .voice-select select { color: #17384c; }
html[data-theme="light"] .site-header .quiet-btn[aria-pressed="false"] { color: #526674; background: #edf1ef; }
html[data-theme="light"] .header-settings-controls { border-color: #cad8d5; background: #fffefa; box-shadow: 0 24px 55px -28px rgba(13,48,70,.45); }

html[data-theme="dark"] .site-header {
  color: #f3f7f8;
  border-color: rgba(154,200,211,.18);
  background: rgba(7,25,39,.94);
}
html[data-theme="dark"] .site-header .brand strong { color: #fff; }
html[data-theme="dark"] .site-header .brand small { color: #b7c8cf; }
html[data-theme="dark"] .site-header .quiet-btn,
html[data-theme="dark"] .site-header .voice-select,
html[data-theme="dark"] .site-header .voice-select:has(#languageToggle) {
  color: #edf4f6;
  border-color: #35556a;
  background: #122f42;
  box-shadow: none;
}
html[data-theme="dark"] .site-header .voice-select select { color: #edf4f6; }
html[data-theme="dark"] .site-header .quiet-btn[aria-pressed="false"] { color: #b7c8cf; background: #0c2435; }
html[data-theme="dark"] .header-settings-controls { border-color: #35556a; background: #091f31; }

.ambient-volume-control { min-width: 170px; }
.ambient-volume-control input[type="range"] { width: 78px; min-height: 26px; padding: 0; accent-color: #62bdb1; }

/* Home hero: editorial navy in both themes, with bounded typography. */
.hero {
  min-height: 520px;
  color: #fff;
  border-color: rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 88% 15%,rgba(237,204,124,.18),transparent 19rem),
    radial-gradient(circle at 12% 92%,rgba(59,157,147,.28),transparent 24rem),
    linear-gradient(125deg,#081f31 0%,#123d53 58%,#1d5963 100%);
  box-shadow: 0 38px 90px -54px rgba(3,18,29,.86);
}
html[data-theme="dark"] .hero {
  background:
    radial-gradient(circle at 86% 12%,rgba(237,204,124,.16),transparent 19rem),
    radial-gradient(circle at 11% 92%,rgba(65,178,165,.22),transparent 24rem),
    linear-gradient(125deg,#0b2638 0%,#15455a 58%,#1c5863 100%);
}
.hero h1,
.hero .ui-ja-heading { color: #fff; font-size: clamp(3rem,5.4vw,5.35rem); line-height: .98; font-weight: 590; }
.hero h1 span { color: #f2d58e; }
.hero .eyebrow { color: #f2d58e; }
.hero-lead,
.hero .jp,
.hero .practice-flow small { color: #d7e4e8; }
.hero-panel { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.075); }
.hero .practice-flow li { border-color: rgba(255,255,255,.13); }
.hero .practice-flow li span { color: #f2d58e; border-color: rgba(242,213,142,.36); }
.hero .primary-btn { color: #081f31; background: linear-gradient(135deg,#f9e4b1,#d8ad53); }
.hero .secondary-btn { color: #fff; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.075); }

.learner-progress .section-heading h2,
.section-heading h1,
.section-heading h2 { color: var(--learner-navy); font-size: clamp(2rem,3.35vw,3.35rem); line-height: 1.08; }
.section-heading p { color: var(--learner-muted); }

/* Cards: fully legible, with calm hierarchy in both themes. */
.metrics article,
.dashboard-card,
.lesson-card {
  color: var(--learner-ink);
  border-color: var(--learner-border);
  background: var(--learner-surface);
  box-shadow: 0 20px 52px -40px rgba(8,31,49,.58);
}
.metrics article::after,
.dashboard-card::after { content: none; }
.metrics strong,
.dashboard-card strong,
.lesson-card h3 { color: var(--learner-navy); }
.metrics span,
.dashboard-card span,
.lesson-card p { color: var(--learner-muted); }
.lesson-date { color: #155a55; background: #dcece8; }
.lesson-status { color: #68480e; background: #f4e7c8; }
.lesson-meta span { color: #455c6a; background: #eef2ef; }
.lesson-progress { background: #dfe6e3; }

html[data-theme="dark"] .lesson-date { color: #b8eee7; background: #17433f; }
html[data-theme="dark"] .lesson-status { color: #ffe5a2; background: #4b3a1d; }
html[data-theme="dark"] .lesson-meta span { color: #d6e2e6; background: #18384b; }
html[data-theme="dark"] .lesson-progress { background: #284759; }
html[data-theme="dark"] .lesson-action { color: #eaf4f6; }

/* Reference-inspired lock: quiet fade + useful CTA, no oval/circle badge. */
.lesson-card-locked,
html[data-theme="dark"] .lesson-card-locked {
  border-color: var(--learner-border);
  background: var(--learner-surface);
}
.lesson-card-locked::before { width: 5px; height: 100%; background: linear-gradient(#1d746d,#d5ae5d); }
.lesson-card-locked::after {
  content: "";
  position: absolute;
  inset: auto 0 55px;
  width: 100%;
  height: 150px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to top,var(--learner-surface) 22%,transparent);
  box-shadow: none;
  transform: none;
  pointer-events: none;
}
.lesson-card-locked .en,
.lesson-card-locked .jp,
.lesson-card-locked .lesson-meta {
  filter: none;
  opacity: .56;
  user-select: none;
}
.lesson-card-locked .lesson-status { color: #174c48; background: #dcece8; }
.lesson-card-locked .lesson-status::before { content: "LOCKED · "; font-size: .55rem; letter-spacing: .08em; }
html[data-theme="dark"] .lesson-card-locked .lesson-status { color: #c6f0eb; background: #17433f; }
.lesson-action.locked,
html[data-theme="dark"] .lesson-action.locked {
  z-index: 2;
  margin: 12px -7px -7px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(130deg,#0d3046,#1d746d);
}

.membership-lock-card,
html[data-theme="dark"] .membership-lock-card {
  justify-items: start;
  color: var(--learner-ink);
  border-color: var(--learner-border);
  background: var(--learner-surface);
  box-shadow: 0 24px 60px -46px rgba(8,31,49,.72);
}
.membership-lock-card h2 { color: var(--learner-navy); }
.membership-lock-card p { color: var(--learner-muted); }
.membership-lock-kicker { color: #fff; background: #1d746d; }

.locked-question-teasers,
html[data-theme="dark"] .locked-question-teasers {
  color: var(--learner-ink);
  border-color: var(--learner-border);
  background: var(--learner-surface);
}
.locked-question-teaser,
html[data-theme="dark"] .locked-question-teaser { border-color: var(--learner-border); background: var(--learner-surface-2); }
.locked-question-placeholder,
html[data-theme="dark"] .locked-question-placeholder {
  filter: blur(.35px);
  opacity: .82;
  background: var(--learner-surface-2);
  -webkit-mask-image: linear-gradient(to bottom,#000 15%,transparent 100%);
  mask-image: linear-gradient(to bottom,#000 15%,transparent 100%);
}
.locked-question-placeholder::after { content: none; }

.continue-card,
html[data-theme="dark"] .continue-card { color: #edf5f7; background: #081f31; }
.continue-card h2,
.continue-card h3 { color: #fff; }
.continue-card p:not(.panel-kicker) { color: #c4d6dd; }
.split-promo { color: var(--learner-ink); border-color: var(--learner-border); background: var(--learner-surface); }
.split-promo h2 { color: var(--learner-navy); }
.split-promo p { color: var(--learner-muted); }

/* Pricing cards: badges sit inside the cards and Premium+ reads as coaching. */
.plan-grid { gap: 18px; padding-top: 40px; }
.plan-card,
html[data-theme="dark"] .plan-card {
  min-height: 660px;
  overflow: hidden;
  padding: 28px 24px 24px;
  color: var(--learner-ink);
  border-color: var(--learner-border);
  background: var(--learner-surface);
}
.plan-card.featured { padding-top: 72px; transform: none; }
.plan-card[data-plan="premium"] { border: 2px solid #d5ae5d; background: linear-gradient(155deg,var(--learner-surface),var(--learner-gold-soft)); }
.plan-card.premium-plus,
html[data-theme="dark"] .plan-card.premium-plus {
  color: #fff;
  border-color: rgba(237,204,124,.7);
  background:
    radial-gradient(circle at 88% 6%,rgba(237,204,124,.18),transparent 13rem),
    linear-gradient(145deg,#071e2d 0%,#103a50 62%,#195861 100%);
}
.plan-badge {
  position: absolute;
  top: 20px;
  right: 0;
  left: auto;
  z-index: 4;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 8px 17px 8px 15px;
  border-radius: 999px 0 0 999px;
  color: #183041;
  background: #efd28d;
  box-shadow: 0 12px 26px -18px rgba(59,39,4,.68);
  transform: none;
}
.plan-card[data-plan="premium"] .plan-badge { color: #fff; background: #1d746d; }
.plan-visual {
  min-height: 94px;
  margin-bottom: 20px;
  padding: 14px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 4px 12px;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--learner-border);
  border-radius: 17px;
  background: var(--learner-surface-2);
}
.plan-visual-mark {
  grid-row: 1 / 3;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg,#0d3046,#1d746d);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 750;
}
.plan-visual-caption { max-width: 150px; color: var(--learner-muted); font-size: .68rem; font-weight: 850; line-height: 1.42; }
.plan-card[data-plan="premium"] .plan-visual { border-color: rgba(128,91,19,.28); background: rgba(255,254,250,.62); }
.plan-card[data-plan="premium"] .plan-visual-mark { color: #112f42; background: linear-gradient(135deg,#f7e1aa,#d5ae5d); }
.plan-card.premium-plus .plan-visual { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.075); }
.plan-card.premium-plus .plan-visual-mark { color: #0a2839; background: linear-gradient(135deg,#f8e6b4,#d5ae5d); }
.plan-card.premium-plus .plan-visual-caption { color: #d6e5e8; }
.plan-card-heading { min-height: 126px; }
.plan-name { color: var(--learner-navy); font-size: 1.62rem; }
.plan-card-heading p { color: var(--learner-muted); }
.premium-plus .plan-name { color: #fff; }
.premium-plus .plan-card-heading p { color: #d3e1e5; }
.plan-best-for { background: var(--learner-surface-2); }
.plan-best-for small { color: #1d746d; }
.plan-best-for strong { color: var(--learner-ink); }
.premium-plus .plan-best-for { background: rgba(255,255,255,.075); }
.premium-plus .plan-best-for small { color: #efd28d; }
.premium-plus .plan-best-for strong { color: #fff; }
.plan-price strong { color: var(--learner-navy); }
.premium-plus .plan-price strong { color: #f3d88f; }
.premium-plus .plan-price span { color: #c7d8de; }

.pricing-selector,
.comparison-table-wrap,
.comparison-mobile-card,
.faq-grid details { color: var(--learner-ink); border-color: var(--learner-border); background: var(--learner-surface); }
.pricing-selector h2,
.pricing-faq > h2,
.faq-grid summary,
.comparison-mobile-card h3 { color: var(--learner-navy); }

/* Premium lesson work area: readable surfaces in both themes. */
.premium-tasks-panel,
html[data-theme="dark"] .premium-tasks-panel {
  color: var(--learner-ink);
  border-color: var(--learner-border);
  background: var(--learner-surface-2);
}
.premium-task-card,
html[data-theme="dark"] .premium-task-card { color: var(--learner-ink); border-color: var(--learner-border); background: var(--learner-surface); }
.premium-task-card h3,
.premium-topic-experience > h4,
.premium-topic-brief h4,
.premium-topic-prompt { color: var(--learner-navy); }
.premium-task-card p,
.premium-topic-prompt-ja { color: var(--learner-muted); }
.premium-task-checklist,
.premium-recorder { color: var(--learner-ink); border-color: var(--learner-border); background: var(--learner-surface-2); }
.premium-task-lock::after { content: none; }

/* Ensure lesson learning surfaces cannot inherit light fixed colours in dark. */
html[data-theme="dark"] .quiz-toolbar,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .lesson-guide,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .guide-card-themes,
html[data-theme="dark"] .guide-card-corrections,
html[data-theme="dark"] .guide-card-examples,
html[data-theme="dark"] .guide-card-phrases {
  color: var(--learner-ink);
  border-color: var(--learner-border);
  background: var(--learner-surface) !important;
}
html[data-theme="dark"] .lesson-banner h1,
html[data-theme="dark"] .question-card h2,
html[data-theme="dark"] .question-card h3,
html[data-theme="dark"] .guide-card h3 { color: var(--learner-navy); }
html[data-theme="dark"] .lesson-banner p,
html[data-theme="dark"] .question-card p,
html[data-theme="dark"] .guide-card p,
html[data-theme="dark"] .guide-card li { color: var(--learner-muted); }

@media (max-width: 1080px) {
  .plan-card.featured { padding-top: 70px; }
}
@media (max-width: 760px) {
  .hero { min-height: 0; padding: 34px 23px; }
  .hero h1,
  .hero .ui-ja-heading { font-size: clamp(2.7rem,12vw,4.2rem); }
  .learner-progress .section-heading h2,
  .section-heading h1,
  .section-heading h2 { font-size: clamp(2rem,8vw,3rem); }
  .plan-card,
  html[data-theme="dark"] .plan-card { min-height: 0; }
}
@media (max-width: 520px) {
  .ambient-volume-control { min-width: 0; }
  .ambient-volume-control input[type="range"] { width: min(140px,46vw); }
  .plan-card.featured { padding-top: 68px; }
  .plan-visual { min-height: 88px; }
}
/* Pricing polish: keep the value badge separate from the illustration and
   bring the plans into view sooner without flattening the editorial hero. */
.pricing-hero {
  min-height: 620px;
  padding: clamp(38px,5vw,68px);
}
.pricing-hero h1 { font-size: clamp(3rem,4.25vw,4.6rem); }
.plan-card[data-plan="premium"],
.plan-card[data-plan="premium_plus"],
html[data-theme="dark"] .plan-card[data-plan="premium"],
html[data-theme="dark"] .plan-card[data-plan="premium_plus"] {
  padding-top: 72px;
}
.plan-badge {
  top: 18px;
  right: 18px;
  max-width: calc(100% - 36px);
  border-radius: 999px;
}
html[data-theme="dark"] .plan-card[data-plan="premium"] .plan-visual {
  border-color: rgba(237,204,124,.32);
  background: #173547;
}
html[data-theme="dark"] .plan-card[data-plan="premium"] .plan-visual-caption { color: #dce8eb; }
html[data-theme="dark"] .premium-promotion > span { color: #efd28d; }
html[data-theme="dark"] .plan-card:not(.premium-plus) li > span {
  color: #f2fbfa;
  background: #1d746d;
}

@media (max-width: 1399px) and (min-width: 761px) {
  .plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .plan-card,
  html[data-theme="dark"] .plan-card { min-height: 620px; }
  .plan-visual-caption { max-width: 250px; }
}

@media (max-width: 760px) {
  .pricing-hero { min-height: 0; padding: 34px 23px; }
  .pricing-hero h1 { font-size: clamp(2.55rem,11.5vw,3.8rem); }
}

/* Inactive billing savings must remain legible in both themes. */
.billing-switch button:not(.active) small { color: #76520e; }
html[data-theme="dark"] .billing-switch button:not(.active) small { color: #f0cc76; }

/* 2026-08-24 · Premium coaching signature and lesson-length choice ---------- */
@property --premium-coaching-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.plan-card.premium-plus,
html[data-theme="dark"] .plan-card.premium-plus {
  --premium-coaching-angle: 0deg;
  border: 2px solid transparent;
  background:
    radial-gradient(circle at 88% 6%,rgba(237,204,124,.18),transparent 13rem) padding-box,
    linear-gradient(145deg,#071e2d 0%,#103a50 62%,#195861 100%) padding-box,
    conic-gradient(from var(--premium-coaching-angle),#d5ae5d 0 13%,#5db8ad 23%,#d5ae5d 38%,#f5dfaa 55%,#5db8ad 74%,#d5ae5d 100%) border-box;
  animation: premium-coaching-border 12s linear infinite;
}
.plan-card.premium-plus::before { content: none; }
@keyframes premium-coaching-border { to { --premium-coaching-angle: 360deg; } }

.premium-review-gift,
.coaching-calendar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.premium-review-gift b {
  margin-right: 2px;
  font-size: 1.42rem;
  line-height: 1;
  filter: drop-shadow(0 6px 9px rgba(100,69,11,.2));
}
.premium-review-gift i {
  padding: 5px 7px;
  border: 1px solid rgba(128,91,19,.2);
  border-radius: 999px;
  color: #68480e;
  background: #fff8e5;
  font-size: .49rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .07em;
}
.premium-review-gift > span { color: #8a641e; font-size: .66rem; font-weight: 950; }
.premium-promotion > span { display: flex; align-items: center; gap: 6px; }
.premium-promotion-gift { font-size: 1.05rem; line-height: 1; }

.coaching-calendar {
  min-width: 114px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  border: 1px solid rgba(237,204,124,.28);
  border-radius: 13px;
  background: rgba(4,25,38,.42);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.coaching-calendar b {
  grid-column: 1 / -1;
  color: #f4da97;
  font-size: .48rem;
  letter-spacing: .18em;
  text-align: center;
}
.coaching-calendar i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(237,204,124,.42);
  border-radius: 50%;
  color: #ffe7ab;
  background: rgba(237,204,124,.1);
  font-size: .49rem;
  font-style: normal;
  font-weight: 950;
  animation: coaching-session-glow 3.6s ease-in-out infinite;
}
.coaching-calendar i:nth-of-type(2) { animation-delay: 1.2s; }
.coaching-calendar i:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes coaching-session-glow {
  0%,34%,100% { color: #ffe7ab; background: rgba(237,204,124,.1); box-shadow: none; }
  12% { color: #082434; background: #f2d489; box-shadow: 0 0 18px rgba(237,204,124,.42); }
}

.lesson-mode-actions {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.lesson-card:not(.lesson-card-locked) { cursor: default; }
.lesson-mode-action {
  min-height: 74px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--learner-border);
  border-radius: 14px;
  color: var(--learner-ink);
  background: var(--learner-surface-2);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lesson-mode-action:hover,
.lesson-mode-action:focus-visible {
  transform: translateY(-2px);
  border-color: #2c8b83;
  box-shadow: 0 13px 28px -22px rgba(8,48,66,.65);
}
.lesson-mode-action.quick { border-color: rgba(29,116,109,.42); background: linear-gradient(145deg,#e3f2ed,#f9f5e9); }
.lesson-mode-action.full { border-color: rgba(21,59,85,.26); background: #f4f7f6; }
.lesson-mode-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: #1d746d;
  font-size: 1rem;
  font-weight: 950;
}
.lesson-mode-action.full .lesson-mode-icon { color: #f7df9e; background: #123b55; }
.lesson-mode-copy { min-width: 0; display: grid; gap: 2px; }
.lesson-mode-copy strong { color: #123b55; font-size: .72rem; line-height: 1.2; }
.lesson-mode-copy small { color: #50646e; font-size: .55rem; font-weight: 750; line-height: 1.35; }
.lesson-mode-arrow { color: #1d746d; font-weight: 950; }

html[data-theme="dark"] .lesson-mode-action.quick {
  color: #edf8f7;
  border-color: rgba(103,205,194,.34);
  background: #153c43;
}
html[data-theme="dark"] .lesson-mode-action.full {
  color: #edf5f7;
  border-color: rgba(178,209,218,.25);
  background: #102c3e;
}
html[data-theme="dark"] .lesson-mode-copy strong { color: #f4fafb; }
html[data-theme="dark"] .lesson-mode-copy small { color: #c5d9df; }
html[data-theme="dark"] .lesson-mode-arrow { color: #a7e1da; }

.practice-entry-note {
  width: fit-content;
  margin: 17px 0 0 !important;
  padding: 7px 11px;
  border: 1px solid var(--learner-border);
  border-radius: 999px;
  color: var(--learner-navy) !important;
  background: var(--learner-surface-2);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
}
.practice-entry-note.quick {
  color: #174f4a !important;
  border-color: rgba(29,116,109,.38);
  background: #def0eb;
}
html[data-theme="dark"] .practice-entry-note { color: #eaf4f6 !important; background: #16364a; }
html[data-theme="dark"] .practice-entry-note.quick { color: #c6f0eb !important; background: #17433f; }

@media (max-width: 520px) {
  .lesson-mode-actions { grid-template-columns: 1fr; }
  .lesson-mode-action { min-height: 68px; }
  .premium-review-gift { right: 9px; }
  .premium-review-gift b { font-size: 1.15rem; }
  .coaching-calendar { right: 8px; min-width: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .plan-card.premium-plus,
  html[data-theme="dark"] .plan-card.premium-plus,
  .coaching-calendar i { animation: none; }
}

/* Study-music credits keep the licensing visible without cluttering practice. */
.compact-page-header { position: relative; }
.music-credits-shell { display: grid; gap: 24px; }
.music-license-summary {
  padding: clamp(22px,4vw,36px);
  border: 1px solid var(--learner-border);
  border-radius: 24px;
  color: var(--learner-ink);
  background: linear-gradient(145deg,var(--learner-surface),var(--learner-gold-soft));
  box-shadow: 0 22px 52px -42px rgba(8,31,49,.6);
}
.music-license-summary h2 { margin: 8px 0 12px; color: var(--learner-navy); }
.music-license-summary p:last-child { margin: 0; color: var(--learner-muted); line-height: 1.75; }
.music-license-summary a,
.music-credit-grid a { color: #155e58; font-weight: 850; }
.music-credit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.music-credit-grid article {
  padding: 22px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--learner-border);
  border-radius: 20px;
  color: var(--learner-ink);
  background: var(--learner-surface);
}
.music-credit-grid article > span { color: #89621c; font-size: .61rem; font-weight: 950; letter-spacing: .12em; }
.music-credit-grid h2,
.music-credit-grid p,
.music-credit-grid dl { margin: 0; }
.music-credit-grid h2 { color: var(--learner-navy); }
.music-credit-grid p { color: var(--learner-muted); line-height: 1.55; }
.music-credit-grid dl { display: grid; gap: 5px; }
.music-credit-grid dl div { display: flex; gap: 9px; }
.music-credit-grid dt { min-width: 45px; color: var(--learner-muted); font-size: .68rem; font-weight: 850; }
.music-credit-grid dd { margin: 0; color: var(--learner-ink); font-size: .68rem; }
html[data-theme="dark"] .music-license-summary,
html[data-theme="dark"] .music-credit-grid article { border-color: var(--learner-border); background: var(--learner-surface); }
html[data-theme="dark"] .music-license-summary a,
html[data-theme="dark"] .music-credit-grid a { color: #a8e7df; }
html[data-theme="dark"] .music-credit-grid article > span { color: #f0cf7f; }

@media (max-width: 680px) {
  .music-credit-grid { grid-template-columns: 1fr; }
}

/* Shared study-music controller: public plans, credits, errors and Teacher
   Studio use the same device preference and the same five licensed tracks. */
.study-music-controls {
  min-width: 0;
  display: contents;
}
.study-music-controls .study-music-toggle,
.study-music-controls .study-music-track,
.study-music-controls .study-music-volume { min-height: 44px; }
.study-music-controls .study-music-track { min-width: 220px; }
.study-music-controls .study-music-volume { min-width: 180px; }
.study-music-controls .study-music-volume input[type="range"] { width: 92px; accent-color: #1d746d; }
.study-music-status {
  min-width: 124px;
  align-self: center;
  color: var(--learner-muted);
  font-size: .61rem;
  font-weight: 850;
  line-height: 1.3;
}
.empty-page-music {
  width: min(620px,100%);
  margin-top: 22px;
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--learner-border);
  border-radius: 18px;
  background: var(--learner-surface);
}
[data-page="teacher"] .header-actions { flex-wrap: wrap; }
[data-page="teacher"] .study-music-controls .study-music-track { min-width: 190px; }
[data-page="teacher"] .study-music-controls .study-music-volume { min-width: 165px; }

@media (max-width: 1500px) {
  .header-settings-controls > .study-music-controls { display: contents; }
  .header-settings-controls .study-music-toggle,
  .header-settings-controls .study-music-track,
  .header-settings-controls .study-music-volume,
  .header-settings-controls .study-music-status { width: 100%; min-width: 0; }
}

@media (max-width: 900px) {
  [data-page="teacher"] .site-header { align-items: flex-start; flex-direction: column; }
  [data-page="teacher"] .header-actions { width: 100%; }
  [data-page="teacher"] .study-music-controls .study-music-track,
  [data-page="teacher"] .study-music-controls .study-music-volume { min-width: min(240px,100%); }
  .compact-page-header { align-items: flex-start; flex-direction: column; }
  .compact-page-header .header-actions { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .study-music-controls .study-music-track,
  .study-music-controls .study-music-volume,
  .study-music-controls .study-music-status { width: 100%; min-width: 0; }
}

/* 2026-08-25 · clear Premium value storytelling ------------------------- */
.plan-card.premium-plus,
html[data-theme="dark"] .plan-card.premium-plus {
  border: 2px solid transparent;
  background:
    radial-gradient(circle at 88% 6%,rgba(237,204,124,.16),transparent 13rem) padding-box,
    linear-gradient(145deg,#071e2d 0%,#103a50 62%,#195861 100%) padding-box,
    linear-gradient(110deg,#d5ae5d,#6bbfb5,#f3dda4,#d5ae5d) border-box;
  background-size: auto,auto,230% 100%;
  animation: premium-border-light 8s ease-in-out infinite alternate;
}
@keyframes premium-border-light { to { background-position: 0 0,0 0,100% 0; } }

.plan-visual-premium,
.plan-visual-coaching {
  min-height: 154px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 12px;
}
.plan-visual-kicker {
  color: #715015;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .13em;
}
.premium-review-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.premium-review-flow > span {
  min-width: 0;
  padding: 12px 10px;
  display: grid;
  grid-template-columns: 27px minmax(0,1fr);
  gap: 2px 7px;
  align-items: center;
  border: 1px solid rgba(128,91,19,.18);
  border-radius: 13px;
  background: #fffaf0;
  animation: premium-review-lift 5s ease-in-out infinite;
}
.premium-review-flow > span:nth-child(2) { animation-delay: 1.4s; }
.premium-review-flow b {
  grid-row: 1 / 3;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff7de;
  background: #1d746d;
  font-size: .68rem;
}
.premium-review-flow strong { color: #17384a; font-size: .74rem; }
.premium-review-flow small { color: #5b6e76; font-size: .54rem; font-weight: 800; }
@keyframes premium-review-lift {
  0%,75%,100% { transform: translateY(0); box-shadow: none; }
  84% { transform: translateY(-3px); box-shadow: 0 10px 20px -17px rgba(72,48,9,.7); }
}

.plan-visual-coaching { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.075); }
.plan-visual-coaching .plan-visual-kicker { color: #f1d58d; }
.coaching-value { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0 10px; align-items: center; }
.coaching-value strong { grid-row: 1 / 3; color: #f7dc94; font-family: var(--serif); font-size: 2.75rem; line-height: .85; }
.coaching-value span { color: #fff; font-size: .76rem; font-weight: 900; }
.coaching-value b { color: #cbdce1; font-size: .61rem; }
.coaching-sessions { display: grid; grid-template-columns: 28px 1fr 28px 1fr 28px; gap: 5px; align-items: center; }
.coaching-sessions i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(237,204,124,.55);
  border-radius: 50%;
  color: #ffe7aa;
  background: rgba(237,204,124,.1);
  font-size: .52rem;
  font-style: normal;
  font-weight: 950;
  animation: coaching-session-glow 4.8s ease-in-out infinite;
}
.coaching-sessions i:nth-of-type(2) { animation-delay: 1.6s; }
.coaching-sessions i:nth-of-type(3) { animation-delay: 3.2s; }
.coaching-sessions span { height: 1px; background: linear-gradient(90deg,rgba(237,204,124,.2),rgba(237,204,124,.7)); }

.premium-promotion { padding: 14px; gap: 10px; }
.premium-promotion-steps { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.premium-promotion-steps > span {
  min-width: 0;
  padding: 10px;
  display: grid;
  gap: 1px;
  border: 1px solid rgba(128,91,19,.2);
  border-radius: 12px;
  background: rgba(255,255,255,.56);
}
.premium-promotion-steps small { color: #795514; font-size: .5rem; font-weight: 950; letter-spacing: .07em; }
.premium-promotion-steps strong { color: #123b55; font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; }
.premium-promotion-steps b { color: #1c615b; font-size: .61rem; }
.premium-promotion-steps > i { color: #936b1e; font-style: normal; font-weight: 950; }
html[data-theme="dark"] .premium-review-flow > span { border-color: rgba(237,204,124,.26); background: #102f40; }
html[data-theme="dark"] .premium-review-flow strong { color: #f4fafb; }
html[data-theme="dark"] .premium-review-flow small { color: #c5d9df; }
html[data-theme="dark"] .plan-visual-premium .plan-visual-kicker { color: #f0cf7f; }
html[data-theme="dark"] .premium-promotion-steps > span { border-color: rgba(237,204,124,.3); background: rgba(5,31,45,.58); }
html[data-theme="dark"] .premium-promotion-steps small { color: #f0cf7f; }
html[data-theme="dark"] .premium-promotion-steps strong { color: #fff5dc; }
html[data-theme="dark"] .premium-promotion-steps b { color: #b4e7e0; }

@media (max-width: 520px) {
  .plan-visual-premium,
  .plan-visual-coaching { min-height: 0; }
  .premium-review-flow { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .plan-card.premium-plus,
  html[data-theme="dark"] .plan-card.premium-plus,
  .premium-review-flow > span,
  .coaching-sessions i { animation: none; }
}

/* 2026-08-26 · readable plan stories and discreet legal attribution ------- */
.music-license-line {
  margin-top: 5px;
  display: block;
  color: var(--learner-muted);
  font-size: .52rem;
  font-weight: 650;
  line-height: 1.4;
}
.music-license-line a { color: inherit; text-underline-offset: 2px; }
.music-license-line a:hover { color: var(--learner-teal); }

.plan-visual-premium,
.plan-visual-coaching { min-height: 0; }
.premium-review-flow {
  grid-template-columns: 1fr;
  gap: 8px;
}
.premium-review-flow > span {
  padding: 10px 12px;
  grid-template-columns: 30px minmax(0,1fr);
  column-gap: 10px;
  text-align: left;
}
.premium-review-flow b {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.premium-review-flow strong {
  min-width: 0;
  font-size: .72rem;
  line-height: 1.22;
  word-break: normal;
  overflow-wrap: break-word;
}
.premium-review-flow small {
  min-width: 0;
  font-size: .55rem;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
}
.plan-visual-caption {
  max-width: 12rem;
  line-height: 1.3;
  text-align: left;
}

@media (max-width: 390px) {
  .premium-review-flow > span { grid-template-columns: 28px minmax(0,1fr); padding-inline: 9px; }
  .premium-review-flow b { width: 28px; height: 28px; }
}

/* Private pricing-layout comparison. It is deliberately not linked from the
   customer journey; the owner can compare both complete concepts in Preview. */
[data-page="pricing-layout-preview"] { background: var(--learner-bg); }
.layout-preview-shell { padding-block: 46px 90px; }
.layout-preview-intro {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}
.layout-preview-intro h1 {
  margin: 10px auto 16px;
  max-width: 820px;
  color: var(--learner-navy);
  font-family: var(--serif);
  font-size: clamp(2.2rem,5vw,4.6rem);
  line-height: .98;
}
.layout-preview-intro > p:not(.eyebrow):not(.layout-choice-status) {
  max-width: 720px;
  margin-inline: auto;
  color: var(--learner-muted);
}
.layout-choice {
  margin: 30px auto 12px;
  padding: 7px;
  width: min(730px,100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  border: 1px solid var(--learner-border);
  border-radius: 22px;
  background: var(--learner-surface-soft);
}
.layout-choice button {
  min-height: 72px;
  padding: 12px 18px;
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 16px;
  color: var(--learner-muted);
  background: transparent;
  cursor: pointer;
}
.layout-choice button strong { font-size: .76rem; }
.layout-choice button small { font-size: .56rem; }
.layout-choice button.active {
  color: #fff;
  background: linear-gradient(135deg,#113f57,#1e8178);
  box-shadow: 0 12px 26px -20px rgba(10,38,52,.8);
}
.layout-choice-status { min-height: 1.5em; color: var(--learner-teal); font-size: .62rem; font-weight: 800; }
.layout-preview-grid {
  margin-top: 42px;
  display: grid;
  gap: 20px;
  align-items: stretch;
}
.layout-preview-grid.layout-four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.layout-preview-grid.layout-two { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 1120px; margin-inline: auto; }
.layout-plan-card {
  position: relative;
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--learner-border);
  border-radius: 30px;
  color: var(--learner-ink);
  background: var(--learner-surface);
  box-shadow: 0 24px 50px -42px rgba(9,32,48,.65);
  overflow: hidden;
  transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.layout-plan-card:hover { transform: translateY(-6px); border-color: #75b8b0; box-shadow: 0 30px 60px -38px rgba(9,49,59,.65); }
.layout-plan-card::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:#77bdb5; }
.layout-premium::before { background:linear-gradient(90deg,#c59a42,#f1d58d,#4aa195); }
.layout-premium_plus {
  color: #f5fafb;
  border-color: #c8a75e;
  background: radial-gradient(circle at 86% 5%,rgba(241,213,141,.18),transparent 13rem),linear-gradient(145deg,#071e2d,#103e53 65%,#175860);
}
.layout-premium_plus::before { background:linear-gradient(90deg,#f0d58d,#5eb4a8,#f0d58d); }
.layout-plan-badge {
  align-self: flex-start;
  margin: -4px 0 14px;
  padding: 7px 12px;
  border-radius: 99px;
  color: #fff;
  background: #1d746d;
  font-size: .52rem;
  font-weight: 950;
  letter-spacing: .07em;
}
.layout-premium_plus .layout-plan-badge { color:#102d3e; background:#f1d58d; }
.preview-value-strip {
  min-height: 86px;
  padding: 13px;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  border: 1px solid var(--learner-border);
  border-radius: 18px;
  background: var(--learner-surface-soft);
}
.preview-value-strip > span {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #163449;
  background: linear-gradient(135deg,#f7dfaa,#d9ad55);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 900;
}
.preview-value-strip strong { min-width:0; font-size:.69rem; line-height:1.3; overflow-wrap:break-word; }
.preview-value-strip > small { min-width:0; color:var(--learner-muted); font-size:.53rem; font-weight:750; line-height:1.35; }
.preview-feedback > span { font-size:1.55rem; }
.preview-live { border-color:rgba(241,213,141,.3); background:rgba(255,255,255,.07); }
.preview-live > span { font-family:var(--sans); font-size:.48rem; letter-spacing:.08em; }
.preview-live > small { display:flex; gap:5px; color:#d2e2e6; }
.preview-live i { width:22px; height:22px; display:grid; place-items:center; border:1px solid #dcbf77; border-radius:50%; color:#f8df9c; font-style:normal; font-size:.44rem; animation: coaching-session-glow 4.8s ease-in-out infinite; }
.preview-live i:nth-child(2) { animation-delay:1.6s; }
.preview-live i:nth-child(3) { animation-delay:3.2s; }
.layout-plan-heading { min-height: 142px; margin-top: 20px; }
.layout-plan-heading p { margin:0 0 9px; color:var(--learner-navy); font-family:var(--serif); font-size:clamp(1.45rem,2vw,2.2rem); line-height:1.03; }
.layout-plan-heading span { color:var(--learner-muted); font-size:.66rem; line-height:1.5; }
.layout-premium_plus .layout-plan-heading p { color:#fff9e9; }
.layout-premium_plus .layout-plan-heading span { color:#d1e1e5; }
.layout-plan-price { margin: 12px 0 15px; display:flex; align-items:end; gap:8px; }
.layout-plan-price strong { color:var(--learner-navy); font-family:var(--serif); font-size:clamp(2rem,3.2vw,3.35rem); line-height:1; }
.layout-plan-price small { padding-bottom:5px; color:var(--learner-muted); font-size:.55rem; font-weight:850; }
.layout-premium_plus .layout-plan-price strong { color:#f4d485; }
.layout-premium_plus .layout-plan-price small { color:#d8e6e9; }
.layout-offer { padding:12px; display:flex; gap:10px; border:1px solid #d5b66e; border-radius:15px; background:#fff7e3; }
.layout-offer > b { font-size:1.35rem; }
.layout-offer span { display:grid; gap:2px; }
.layout-offer strong { color:#59400f; font-size:.63rem; }
.layout-offer small { color:#526871; font-size:.52rem; font-weight:750; }
.layout-plan-card ul { margin:18px 0 24px; padding:0; display:grid; gap:10px; list-style:none; }
.layout-plan-card li { display:grid; grid-template-columns:20px minmax(0,1fr); gap:8px; font-size:.61rem; line-height:1.4; }
.layout-plan-card li > span { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#105b55; background:#d9f0ec; font-size:.55rem; font-weight:950; }
.layout-premium_plus li > span { color:#163449; background:#f1d58d; }
.layout-plan-card .primary-btn { margin-top:auto; width:100%; }

.layout-two .layout-plan-card { padding:30px; }
.layout-two .layout-plan-heading { min-height:110px; }
.layout-two .preview-value-strip { min-height:96px; }

@media (max-width: 1180px) {
  .layout-preview-grid.layout-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .layout-choice { grid-template-columns:1fr; }
  .layout-preview-grid.layout-four,
  .layout-preview-grid.layout-two { grid-template-columns:1fr; }
  .layout-plan-heading { min-height:0; }
}
@media (prefers-reduced-motion: reduce) {
  .layout-plan-card,.preview-live i { animation:none; transition:none; }
}

/* 2026-08-26 · first-visit story, conversion clarity and tactile polish ---- */
.hero-arrival {
  isolation: isolate;
  overflow: hidden;
}
.hero-arrival::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(58vw,780px);
  aspect-ratio: 1;
  right: -18%;
  top: -48%;
  border: 1px solid rgba(238,205,123,.34);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(93,181,169,.055),0 0 0 150px rgba(238,205,123,.035);
  animation: hero-halo-breathe 8s ease-in-out infinite alternate;
}
.hero-arrival .hero-copy { position: relative; z-index: 1; }
.hero-word { display: inline-block; opacity: 0; filter: blur(9px); transform: translateY(26px) rotate(.7deg); animation: hero-word-arrive .86s cubic-bezier(.16,1,.3,1) forwards; }
.hero-word-1 { animation-delay: .12s; }
.hero-word-2 { animation-delay: .34s; }
.hero-word-3 { animation-delay: .53s; }
.hero-word-4 { animation-delay: .72s; }
.hero-reveal { opacity: 0; transform: translateY(14px); animation: hero-detail-arrive .72s ease forwards; }
.hero-reveal-1 { animation-delay: .05s; }
.hero-reveal-2 { animation-delay: .92s; }
.hero-arrival .hero-actions { opacity: 0; transform: translateY(16px); animation: hero-detail-arrive .72s 1.08s ease forwards; }
.hero-arrival .hero-panel { opacity: 0; transform: translateX(26px) scale(.985); animation: hero-panel-arrive .92s .58s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes hero-word-arrive { to { opacity:1; filter:blur(0); transform:translateY(0) rotate(0); } }
@keyframes hero-detail-arrive { to { opacity:1; transform:translateY(0); } }
@keyframes hero-panel-arrive { to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes hero-halo-breathe { to { transform:translate(-18px,20px) scale(1.05); opacity:.72; } }

.value-story {
  margin-top: 22px;
  padding: clamp(34px,5vw,70px);
  display: grid;
  gap: 30px;
  border: 1px solid var(--learner-border);
  border-radius: 36px;
  background:
    radial-gradient(circle at 92% 6%,rgba(93,181,169,.14),transparent 17rem),
    var(--learner-surface);
  box-shadow: 0 30px 65px -52px rgba(9,39,52,.7);
}
.value-story-heading { max-width: 900px; }
.value-story-heading h2 { margin:9px 0 14px; max-width:820px; color:var(--learner-navy); font-family:var(--serif); font-size:clamp(2rem,4.5vw,4.5rem); line-height:1.02; }
.value-story-heading > p:last-child { max-width:760px; color:var(--learner-muted); line-height:1.72; }
.value-story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.value-story-grid article {
  min-width:0;
  padding:24px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:7px 14px;
  border:1px solid var(--learner-border);
  border-radius:22px;
  background:var(--learner-surface-soft);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.value-story-grid article:hover { transform:translateY(-5px); border-color:#6bb9b0; box-shadow:0 22px 40px -34px rgba(9,64,70,.8); }
.value-story-grid article > span { grid-row:1 / 3; width:46px; height:46px; display:grid; place-items:center; border-radius:15px; color:#12354a; background:linear-gradient(135deg,#f5dfa9,#d7ac57); font-family:var(--serif); font-weight:900; }
.value-story-grid strong { color:var(--learner-navy); font-size:.75rem; line-height:1.3; }
.value-story-grid p { margin:0; color:var(--learner-muted); font-size:.63rem; line-height:1.55; }
.value-story-cta { display:flex; flex-wrap:wrap; gap:10px; }

.music-start-chip {
  position: fixed;
  z-index: 80;
  right: max(16px,env(safe-area-inset-right));
  bottom: max(16px,env(safe-area-inset-bottom));
  max-width: min(350px,calc(100vw - 32px));
  padding: 12px 15px;
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid rgba(238,205,123,.65);
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,#0b3046,#1b756f);
  box-shadow:0 18px 45px -22px rgba(5,26,38,.9);
  cursor:pointer;
  animation:music-chip-arrive .5s ease both;
}
.music-start-chip[hidden] { display:none; }
.music-start-icon { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:#143447; background:#f0d28a; font-size:1.1rem; }
.music-start-chip > span:last-child { display:grid; text-align:left; }
.music-start-chip strong { font-size:.67rem; }
.music-start-chip small { color:#d5e5e8; font-size:.5rem; line-height:1.35; }
@keyframes music-chip-arrive { from { opacity:0; transform:translateY(16px) scale(.97); } }

.reveal-ready [data-reveal] { opacity:0; transform:translateY(24px); }
.reveal-ready [data-reveal].revealed { opacity:1; transform:translateY(0); transition:opacity .65s ease calc(var(--reveal-index,0) * 55ms),transform .72s cubic-bezier(.16,1,.3,1) calc(var(--reveal-index,0) * 55ms); }

.primary-btn,.secondary-btn,.quiet-btn,.lesson-mode-action,.filter-chip,.plan-cta {
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease;
}
.primary-btn:hover,.secondary-btn:hover,.lesson-mode-action:hover { transform:translateY(-2px); }
.primary-btn:active,.secondary-btn:active,.quiet-btn:active,.lesson-mode-action:active,.filter-chip:active { transform:translateY(1px) scale(.985); }
.lesson-card,.dashboard-card,.phrase-card,.comparison-mobile-card { transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; }
@media (hover:hover) {
  .lesson-card:not(.lesson-card-locked):hover,.dashboard-card:hover,.phrase-card:hover,.comparison-mobile-card:hover { transform:translateY(-4px); border-color:#6cb7af; box-shadow:0 25px 50px -40px rgba(8,56,65,.75); }
}

@media (max-width: 820px) {
  .value-story-grid { grid-template-columns:1fr; }
  .hero-arrival::before { width:100vw; right:-52%; top:-10%; }
}
@media (max-width: 520px) {
  .value-story { padding:28px 20px; border-radius:27px; }
  .value-story-grid article { padding:18px; grid-template-columns:40px minmax(0,1fr); }
  .value-story-grid article > span { width:40px; height:40px; }
  .music-start-chip { padding:10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-arrival::before,.hero-word,.hero-reveal,.hero-arrival .hero-actions,.hero-arrival .hero-panel,.music-start-chip { opacity:1; filter:none; transform:none; animation:none; }
  .reveal-ready [data-reveal] { opacity:1; transform:none; }
  .primary-btn,.secondary-btn,.quiet-btn,.lesson-mode-action,.filter-chip,.plan-cta,.lesson-card,.dashboard-card,.phrase-card,.comparison-mobile-card,.value-story-grid article { transition:none; }
}

/* 2026-08-26 · final readable 2×2 pricing, local practice controls and guide */
.ui-line,
.localized-title-line { display: block; min-width: 0; }
.ui-line + .ui-line,
.localized-title-line + .localized-title-line { margin-top: .18em; }
.ui-line-ja,
.localized-title-ja {
  font-family: var(--sans);
  font-size: .68em;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
}

body[data-page="pricing"] .plan-grid {
  width: min(1120px,calc(100% - 32px));
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 28px;
}
body[data-page="pricing"] .plan-card,
html[data-theme="dark"] body[data-page="pricing"] .plan-card {
  min-width: 0;
  min-height: 650px;
  padding-inline: clamp(24px,3.2vw,38px);
}
body[data-page="pricing"] .plan-card-heading { min-height: 136px; }
body[data-page="pricing"] .plan-name {
  display: block;
  font-size: clamp(1.9rem,3.2vw,3rem);
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: keep-all;
}
body[data-page="pricing"] .plan-card-heading p {
  max-width: 44rem;
  font-size: clamp(.82rem,1.25vw,.98rem);
}
body[data-page="pricing"] .plan-visual { padding: 18px; }
body[data-page="pricing"] .premium-review-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
body[data-page="pricing"] .premium-review-flow strong { font-size: .8rem; }
body[data-page="pricing"] .premium-review-flow small { font-size: .61rem; }
body[data-page="pricing"] .coaching-value span { font-size: .86rem; }
body[data-page="pricing"] .coaching-value b { font-size: .7rem; }
body[data-page="pricing"] .pricing-selector h2 { line-height: 1.16; }
body[data-page="pricing"] .pricing-selector .ui-line-ja { font-size: .64em; }

.layout-preview-intro h1 .ui-line-ja {
  margin-top: .28em;
  font-size: .55em;
  line-height: 1.28;
}

.hero-wordmark { line-height: 1.02; }
.hero-word-1 { color: #f7fbfc; }
.hero-word-2 { color: #f0cf7f; }
.hero-word-3 { color: #92d6cd; }
.hero-word-4 { color: #f7fbfc; }
.hero-word {
  position: relative;
  text-shadow: 0 18px 44px rgba(4,29,43,.2);
}
.hero-word::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -.08em;
  height: 2px;
  opacity: .55;
  background: linear-gradient(90deg,transparent,currentColor,transparent);
  transform: scaleX(0);
  animation: hero-line-draw .7s calc(.72s + var(--hero-step,0s)) ease forwards;
}
.hero-word-1 { --hero-step: .05s; }
.hero-word-2 { --hero-step: .2s; }
.hero-word-3 { --hero-step: .35s; }
.hero-word-4 { --hero-step: .5s; }
@keyframes hero-line-draw { to { transform: scaleX(1); } }

.practice-settings-open {
  min-width: min(260px,100%);
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 0 8px;
  align-items: center;
  text-align: left;
  border-color: rgba(29,116,109,.34);
  background: var(--learner-surface-2);
}
.practice-settings-open > small {
  grid-column: 2;
  color: var(--learner-muted);
  font-size: .54rem;
  line-height: 1.25;
}

.guide-grid { grid-template-columns: 1fr; gap: 14px; }
.guide-card { align-self: stretch; }
.guide-card h3 { line-height: 1.25; }
.guide-card-coverage { background: linear-gradient(145deg,#edf8f5,#f8f1df) !important; }
.guide-coverage-intro { margin: 0 0 14px; color: var(--learner-muted); line-height: 1.6; }
.guide-coverage-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.guide-coverage-list > div {
  min-width: 0;
  padding: 13px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 8px 10px;
  align-items: start;
  border: 1px solid var(--learner-border);
  border-radius: 15px;
  background: var(--learner-surface);
}
.guide-coverage-list > div > b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #12364a;
  background: #efd28d;
  font-size: .57rem;
}
.guide-coverage-list > div > span { min-width: 0; line-height: 1.4; }
.guide-coverage-list > div > span small { display: block; color: var(--learner-muted); }
.guide-coverage-list .text-audio-btn { grid-column: 2; width: fit-content; min-width: 150px; }
html[data-theme="dark"] .guide-card-coverage { background: var(--learner-surface) !important; }

@media (max-width: 760px) {
  body[data-page="pricing"] .plan-grid { width: min(100% - 24px,620px); grid-template-columns: 1fr; gap: 24px; }
  body[data-page="pricing"] .plan-card,
  html[data-theme="dark"] body[data-page="pricing"] .plan-card { min-height: 0; }
  body[data-page="pricing"] .plan-card-heading { min-height: 0; }
  body[data-page="pricing"] .premium-review-flow { grid-template-columns: 1fr; }
  .guide-coverage-list { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .hero-wordmark { line-height: 1.08; }
  .guide-coverage-list .text-audio-btn { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-word::after { transform: scaleX(1); animation: none; }
}

/* 2026-08-27 · release readability, focused practice controls and pricing scan */
:root {
  --sans: "Avenir Next", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", Baskerville, "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
}
body {
  line-height: 1.58;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
h1, h2, h3,
.plan-name,
.hero-wordmark {
  text-wrap: balance;
  letter-spacing: -.025em;
}
p, li, small, label, summary, button, a { overflow-wrap: break-word; }
[lang="ja"], .jp, [data-ui-ja] { font-feature-settings: "palt" 1; line-break: strict; }

/* Autoplay must wait for a browser gesture. Present one calm, central invitation
   for a few seconds, then leave the lesson unobstructed if it is ignored. */
.music-start-chip {
  z-index: 100;
  left: 50%;
  right: auto;
  top: clamp(150px,38vh,430px);
  bottom: auto;
  width: min(460px,calc(100vw - 32px));
  max-width: none;
  min-height: 92px;
  padding: 17px 20px;
  gap: 14px;
  overflow: hidden;
  border-color: rgba(246,218,150,.78);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 0,rgba(246,218,150,.2),transparent 10rem),
    linear-gradient(135deg,#08283c,#17645f);
  box-shadow: 0 30px 90px -28px rgba(3,21,32,.88),0 0 0 1px rgba(255,255,255,.08) inset;
  transform: translate(-50%,-50%);
  animation: music-chip-arrive .72s cubic-bezier(.16,1,.3,1) both;
}
.music-start-chip::after {
  content: "";
  position: absolute;
  inset: auto 18px 9px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,#f1d184,#77c9be);
  transform-origin: left;
  animation: music-chip-progress 4.2s linear both;
}
.music-start-chip.is-leaving {
  pointer-events: none;
  animation: music-chip-leave .65s ease forwards;
}
.music-start-icon {
  flex-basis: 52px;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  box-shadow: 0 12px 24px -18px #000;
}
.music-start-chip strong { font-size: clamp(.78rem,2vw,.94rem); line-height: 1.25; }
.music-start-chip small { margin-top: 3px; font-size: clamp(.58rem,1.5vw,.69rem); }
@keyframes music-chip-arrive {
  from { opacity:0; filter:blur(9px); transform:translate(-50%,calc(-50% + 24px)) scale(.94); }
  to { opacity:1; filter:blur(0); transform:translate(-50%,-50%) scale(1); }
}
@keyframes music-chip-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes music-chip-leave {
  to { opacity:0; filter:blur(8px); transform:translate(-50%,calc(-50% - 18px)) scale(.97); }
}

/* The top Settings dialog remains complete. The in-question shortcut shows
   only the choices learners commonly change while answering. */
.lesson-settings-dialog[data-settings-scope="practice"] { width: min(620px,calc(100% - 24px)); }
.lesson-settings-dialog[data-settings-scope="practice"] .settings-global-only { display: none !important; }
.lesson-settings-dialog[data-settings-scope="practice"] .voice-settings-group,
.lesson-settings-dialog[data-settings-scope="practice"] .settings-group:not(.settings-global-only) {
  background: var(--learner-surface-2);
}
.lesson-settings-dialog[data-settings-scope="practice"] .settings-intro {
  padding: 11px 13px;
  border-left: 3px solid var(--learner-teal);
  border-radius: 0 12px 12px 0;
  background: var(--learner-surface-2);
}

/* Pricing settings stay out of the comparison until deliberately opened. */
body[data-page="pricing"] .pricing-header {
  min-height: 72px;
  padding-block: 9px;
}
body[data-page="pricing"] .pricing-header .header-actions {
  width: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
}
body[data-page="pricing"] .pricing-header .mobile-settings-toggle {
  width: auto;
  min-width: 118px;
  display: inline-flex;
  justify-content: space-between;
  gap: 10px;
}
body[data-page="pricing"] .pricing-header .mobile-settings-toggle::after { content: "+"; font-size: 1rem; }
body[data-page="pricing"] .pricing-header .mobile-settings-toggle[aria-expanded="true"]::after { content: "−"; }
body[data-page="pricing"] .pricing-header .header-settings-controls {
  width: min(580px,calc(100vw - 24px));
  max-height: min(76vh,610px);
  padding: 12px;
  display: none;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  overflow-y: auto;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  color: #eef7f8;
  background: #091f31;
  box-shadow: 0 30px 68px -28px rgba(3,20,31,.92);
}
body[data-page="pricing"] .pricing-header .header-settings-controls.mobile-open { display: grid; }
body[data-page="pricing"] .pricing-header .header-settings-controls > .quiet-btn,
body[data-page="pricing"] .pricing-header .header-settings-controls > .voice-select,
body[data-page="pricing"] .pricing-header .header-settings-controls .study-music-toggle,
body[data-page="pricing"] .pricing-header .header-settings-controls .study-music-track,
body[data-page="pricing"] .pricing-header .header-settings-controls .study-music-volume,
body[data-page="pricing"] .pricing-header .header-settings-controls .study-music-status {
  width: 100%;
  min-width: 0;
}

.plan-quick-nav {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
}
.plan-quick-link {
  min-width: 0;
  min-height: 118px;
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--learner-border);
  border-radius: 18px;
  color: var(--learner-ink);
  background: var(--learner-surface);
  box-shadow: 0 17px 38px -34px rgba(6,35,49,.72);
  transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.plan-quick-link:hover {
  transform: translateY(-3px);
  border-color: #6eb8af;
  box-shadow: 0 24px 48px -36px rgba(6,48,55,.8);
}
.plan-quick-name { color: var(--learner-teal); font-size: .68rem; font-weight: 900; }
.plan-quick-link strong { color: var(--learner-navy); font-family: var(--serif); font-size: clamp(1.4rem,2.5vw,2rem); line-height: 1.05; }
.plan-quick-link small { color: var(--learner-muted); font-size: .58rem; font-weight: 720; line-height: 1.35; }
.plan-quick-premium { border-color: rgba(196,151,61,.62); background: linear-gradient(145deg,var(--learner-surface),var(--learner-gold-soft)); }
.plan-quick-premium_plus { border-color: #c8a458; background: linear-gradient(145deg,#08263a,#124b59); }
.plan-quick-premium_plus .plan-quick-name,
.plan-quick-premium_plus strong { color: #f4d485; }
.plan-quick-premium_plus small { color: #d7e5e8; }

body[data-page="pricing"] .plan-grid { padding-top: 28px; align-items: start; }
body[data-page="pricing"] .plan-card,
html[data-theme="dark"] body[data-page="pricing"] .plan-card {
  min-height: 0;
  scroll-margin-top: 100px;
}
body[data-page="pricing"] .plan-card-heading { min-height: 0; }
body[data-page="pricing"] .plan-name { font-size: clamp(2rem,3.1vw,2.8rem); }
body[data-page="pricing"] .plan-card-heading p { font-size: clamp(.9rem,1.1vw,1rem); line-height: 1.66; }
body[data-page="pricing"] .plan-best-for { min-height: 0; }
body[data-page="pricing"] .plan-best-for strong { font-size: .82rem; line-height: 1.5; }
body[data-page="pricing"] .plan-price strong { font-size: clamp(2.65rem,4.2vw,3.6rem); }
.plan-feature-details {
  margin: 17px 0 20px;
  border: 1px solid var(--learner-border);
  border-radius: 15px;
  background: var(--learner-surface-2);
  overflow: hidden;
}
.plan-feature-details > summary {
  min-height: 52px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--learner-navy);
  cursor: pointer;
  font-size: .77rem;
  font-weight: 900;
  list-style: none;
}
.plan-feature-details > summary::-webkit-details-marker { display: none; }
.plan-feature-details > summary::after { content: "+"; font-size: 1.1rem; }
.plan-feature-details[open] > summary::after { content: "−"; }
.plan-feature-details > summary small { margin-left: auto; color: var(--learner-muted); font-size: .58rem; }
.plan-feature-details ul { margin: 0 !important; padding: 4px 14px 17px !important; }
.premium-plus .plan-feature-details { border-color: rgba(237,204,124,.28); background: rgba(255,255,255,.065); }
.premium-plus .plan-feature-details > summary { color: #fff4d8; }
.premium-plus .plan-feature-details > summary small { color: #cbdce1; }

@media (max-width: 900px) {
  .plan-quick-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  body[data-page="pricing"] .pricing-header { flex-direction: row; }
  body[data-page="pricing"] .pricing-header .brand { min-width: 0; }
  body[data-page="pricing"] .pricing-header .brand small { display: none; }
  body[data-page="pricing"] .pricing-header .header-actions { width: auto; }
  body[data-page="pricing"] .pricing-header .mobile-settings-toggle { min-width: 96px; }
}
@media (max-width: 520px) {
  .music-start-chip { top: 42vh; min-height: 84px; padding: 14px; border-radius: 21px; }
  .music-start-icon { flex-basis: 46px; width: 46px; height: 46px; }
  .plan-quick-nav { width: calc(100% - 20px); grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .plan-quick-link { min-height: 105px; padding: 13px; }
  body[data-page="pricing"] .pricing-header .brand strong { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .music-start-chip { animation: none; }
  .music-start-chip::after { animation: none; transform: scaleX(1); }
  .music-start-chip.is-leaving { opacity: 0; animation: none; }
  .plan-quick-link { transition: none; }
}

/* 2026-08-28 · compact navigation and calm answer coaching */
.site-header,
.pricing-header {
  min-height: 64px;
  max-height: 80px;
  padding: 7px 10px 7px 14px;
  flex-flow: row nowrap;
  position: sticky !important;
  top: 8px !important;
  overflow: visible;
}
.site-header .brand { min-width: 0; }
.site-header .brand-logo { width: 46px; height: 46px; }
.site-header .header-actions,
.pricing-header .header-actions {
  width: auto;
  max-width: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
body[data-page="teacher"] .site-header {
  align-items: center;
  flex-flow: row nowrap;
}
body[data-page="teacher"] .header-actions { width: auto; }
.site-header .mobile-settings-toggle,
.pricing-header .mobile-settings-toggle {
  width: auto;
  min-width: 108px;
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mobile-settings-toggle::after { content: "+"; font-size: 1rem; line-height: 1; }
.mobile-settings-toggle[aria-expanded="true"]::after { content: "−"; }
.site-header .header-settings-controls,
.pricing-header .header-settings-controls {
  width: min(590px,calc(100vw - 24px));
  max-height: min(72vh,590px);
  padding: 12px;
  display: none !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  border: 1px solid rgba(21,59,85,.14);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255,253,248,.98);
  backdrop-filter: blur(20px);
  box-shadow: 0 26px 60px -28px rgba(9,31,49,.62);
}
.site-header .header-settings-controls.mobile-open,
.pricing-header .header-settings-controls.mobile-open { display: grid !important; }
.site-header .header-settings-controls .quiet-btn,
.site-header .header-settings-controls .voice-select,
.pricing-header .header-settings-controls .quiet-btn,
.pricing-header .header-settings-controls .voice-select {
  color: #19384c;
  border-color: #c9d8d5;
  background: #f5f9f7;
  box-shadow: none;
}
.site-header .header-settings-controls .voice-select select,
.pricing-header .header-settings-controls .voice-select select { color: #17384c; }
.header-settings-controls > .quiet-btn,
.header-settings-controls > .voice-select,
.header-settings-controls > [data-study-music-controls] {
  width: 100%;
  min-width: 0;
  justify-content: space-between;
}
.header-settings-controls > .voice-select select,
.pricing-header .header-settings-controls > .voice-select select {
  min-width: 96px;
  max-width: 165px;
}
html[data-theme="dark"] .site-header .header-settings-controls,
html[data-theme="dark"] .pricing-header .header-settings-controls {
  color: var(--ink);
  border-color: rgba(197,224,227,.18);
  background: rgba(6,23,34,.98);
  box-shadow: 0 28px 64px -26px rgba(0,0,0,.82);
}
html[data-theme="dark"] .site-header .header-settings-controls .quiet-btn,
html[data-theme="dark"] .site-header .header-settings-controls .voice-select,
html[data-theme="dark"] .pricing-header .header-settings-controls .quiet-btn,
html[data-theme="dark"] .pricing-header .header-settings-controls .voice-select {
  color: #edf4f6;
  border-color: #35556a;
  background: #122f42;
}
html[data-theme="dark"] .site-header .header-settings-controls .voice-select select,
html[data-theme="dark"] .pricing-header .header-settings-controls .voice-select select { color: #edf4f6; }

.hero-actions { align-items: center; gap: 13px 18px; }
.hero-actions .feature-link { flex: 0 1 410px; }
.hero-tertiary-link {
  min-height: 42px;
  padding: 7px 2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f7df9a;
  border-bottom: 1px solid rgba(247,223,154,.44);
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .01em;
  transition: color .18s ease,border-color .18s ease,transform .18s ease;
}
.hero-tertiary-link:hover {
  color: #fff2c8;
  border-color: #f7df9a;
  transform: translateX(3px);
}

.answer-coach {
  margin: 0 0 12px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid currentColor;
  border-radius: 13px;
  background: rgba(255,255,255,.42);
}
.answer-coach-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  box-shadow: inset 0 1px rgba(255,255,255,.35);
}
.answer-coach-icon > span { color: white; }
.feedback-card.correct .answer-coach-icon { background: #2c8061; }
.feedback-card.wrong .answer-coach-icon { background: #a95243; }
html[data-theme="dark"] .answer-coach { background: rgba(255,255,255,.065); }
.retry-nudge { animation: retry-nudge .62s cubic-bezier(.2,.78,.3,1); }
.retry-cue {
  position: fixed;
  z-index: 400;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.retry-cue span {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(220,126,102,.78);
  border-radius: 50%;
  opacity: 0;
  animation: retry-orbit .72s ease-out var(--delay) forwards;
}
@keyframes retry-nudge {
  0% { transform: translateY(4px); filter: saturate(.82); }
  45% { transform: translateY(-2px); filter: saturate(1.08); }
  100% { transform: translateY(0); filter: none; }
}
@keyframes retry-orbit {
  0% { opacity: 0; transform: rotate(var(--angle)) translateX(8px) scale(.4); }
  24% { opacity: .9; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--distance)) scale(.15); }
}

@media (max-width: 620px) {
  .site-header,
  .pricing-header { min-height: 60px; max-height: 72px; padding: 6px 8px; }
  .site-header .brand-logo { width: 42px; height: 42px; }
  .site-header .header-settings-controls,
  .pricing-header .header-settings-controls {
    width: calc(100vw - 16px);
    right: -2px;
    grid-template-columns: 1fr;
  }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-actions .feature-link { width: 100%; flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tertiary-link { transition: none; }
  .hero-tertiary-link:hover { transform: none; }
  .success-pop,
  .retry-nudge,
  .celebration-burst span,
  .retry-cue span { animation: none !important; }
  .celebration-burst,
  .retry-cue { display: none; }
}

/* structured-hub-teacher */
.structured-hub-teacher > div,
.structured-hub-teacher-announcements > div,
.structured-hub-teacher-settings { display: grid; gap: 14px; }

.learner-dialog-workspace { display: grid; gap: 16px; }
.learner-dialog-tabs {
  display: flex;
  gap: 7px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--cream);
  scrollbar-width: thin;
}
.learner-dialog-tabs button {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 8px 13px;
  border: 0;
  border-radius: 11px;
  color: var(--ink-soft);
  background: transparent;
  font-size: .7rem;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}
.learner-dialog-tabs button.active {
  color: white;
  background: linear-gradient(135deg,var(--navy),#276d7e);
  box-shadow: 0 10px 22px -16px var(--navy);
}
.learner-dialog-panel { display: grid; gap: 14px; }
.learner-dialog-panel[hidden] { display: none; }
.learner-dialog-panel > :first-child { margin-top: 0; }
.structured-hub-teacher-settings > small { color: var(--ink-soft); line-height: 1.5; }
.structured-hub-teacher-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(47,143,135,.34);
  border-radius: 13px;
  color: var(--navy);
  background: var(--teal-soft);
  font-weight: 900;
}
.structured-hub-teacher-account input,
.structured-hub-teacher-toggle-grid input,
.structured-hub-teacher-level-grid input { width: auto; min-height: 0; margin: 0; }
.structured-hub-teacher-fieldset {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.62);
}
.structured-hub-teacher-fieldset legend,
.structured-hub-teacher-progress h4 {
  padding: 0 5px;
  color: var(--navy);
  font-weight: 900;
}
.structured-hub-teacher-fieldset > p,
.structured-hub-teacher-progress > p,
.structured-hub-teacher-item-access > p {
  margin: 8px 0 11px;
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.5;
}
.structured-hub-teacher-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
.structured-hub-teacher-toggle-grid label,
.structured-hub-teacher-level-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--navy);
  font-size: .7rem;
  font-weight: 800;
}
.structured-hub-teacher-level-range,
.structured-hub-teacher-item-filters,
.structured-hub-teacher-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}
.structured-hub-teacher-level-range label { display: grid; flex: 1 1 170px; gap: 5px; color: var(--ink-soft); font-size: .68rem; font-weight: 800; }
.structured-hub-teacher-level-range select,
.structured-hub-teacher-item-filters select,
.structured-hub-teacher-announcement-form input,
.structured-hub-teacher-announcement-form select,
.structured-hub-teacher-announcement-form textarea,
.structured-hub-teacher-item-list select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--paper);
}
.structured-hub-teacher-level-grid {
  display: grid;
  grid-template-columns: repeat(8,minmax(46px,1fr));
  gap: 6px;
  margin-bottom: 10px;
}
.structured-hub-teacher-level-grid label:has(input:disabled) { opacity: .46; }
.structured-hub-teacher-actions button,
.structured-hub-teacher-fieldset > button { min-height: 42px; }
.structured-hub-teacher-progress { display: grid; gap: 9px; }
.structured-hub-teacher-progress h4 { margin: 0; }
.structured-hub-teacher-metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
.structured-hub-teacher-metrics article {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.structured-hub-teacher-metrics span { color: var(--ink-soft); font-size: .65rem; font-weight: 800; }
.structured-hub-teacher-metrics strong { color: var(--navy); font-size: 1.35rem; }
.structured-hub-teacher-item-access { padding: 13px; border: 1px solid var(--line); border-radius: 14px; }
.structured-hub-teacher-item-access summary,
.structured-hub-teacher-announcement-create summary { color: var(--navy); cursor: pointer; font-weight: 900; }
.structured-hub-teacher-item-filters { margin: 10px 0; }
.structured-hub-teacher-item-filters select { flex: 1 1 180px; }
.structured-hub-teacher-announcement-create { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.52); }
.structured-hub-teacher-announcement-form {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px;
  margin-top: 14px;
}
.structured-hub-teacher-announcement-form label { display: grid; gap: 5px; color: var(--ink-soft); font-size: .69rem; font-weight: 800; }
.structured-hub-teacher-announcement-form textarea { min-height: 100px; resize: vertical; }
.structured-hub-teacher-wide { grid-column: 1 / -1; }
.structured-hub-teacher-announcement-list { display: grid; gap: 10px; }
.structured-hub-teacher-announcement {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.structured-hub-teacher-announcement > div { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.structured-hub-teacher-announcement h4 { margin: 0; color: var(--navy); }
.structured-hub-teacher-announcement > div span { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; color: var(--navy); background: var(--gold-soft); font-size: .62rem; font-weight: 850; }
.structured-hub-teacher-announcement p { margin: 0; color: var(--ink); white-space: pre-wrap; line-height: 1.5; }
.structured-hub-teacher-announcement p + p { color: var(--ink-soft); font-size: .68rem; }
.structured-hub-teacher-announcement button { justify-self: start; }

@media (max-width: 760px) {
  .structured-hub-teacher-toggle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .structured-hub-teacher-level-grid { grid-template-columns: repeat(4,minmax(46px,1fr)); }
  .structured-hub-teacher-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .structured-hub-teacher-announcement-form { grid-template-columns: 1fr; }
  .structured-hub-teacher-wide { grid-column: auto; }
}

@media (max-width: 440px) {
  .structured-hub-teacher-toggle-grid,
  .structured-hub-teacher-metrics { grid-template-columns: 1fr; }
}

/* Per-learner paths and personal packs remain usable inside the mobile dialog. */
.structured-hub-visibility-summary {
  padding: 1rem; border: 1px solid var(--line, #cbd5e1); border-radius: 16px;
  background: var(--learner-surface, var(--paper)); overflow-wrap: anywhere;
}
.structured-hub-visibility-summary h4 { margin: 0 0 .6rem; }
.structured-hub-visibility-summary ul { margin: 0; padding-left: 1.2rem; }
.structured-hub-category-rule, .structured-hub-personal-packs {
  min-width: 0; padding: .8rem 0; border-top: 1px solid var(--line, #cbd5e1);
}
.structured-hub-category-rule > summary, .structured-hub-personal-packs > summary {
  cursor: pointer; min-height: 44px; display: list-item; font-weight: 750;
}
.structured-hub-category-rule fieldset { border: 0; min-width: 0; padding: .6rem 0; }
.structured-hub-category-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.structured-hub-category-levels label { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.structured-hub-category-levels label > span { width: 1.4rem; flex-shrink: 0; }
.structured-hub-category-levels select { min-width: 0; width: 100%; min-height: 44px; }
.structured-hub-personal-packs form { display: grid; gap: .8rem; min-width: 0; }
.structured-hub-personal-packs form > label { display: grid; gap: .35rem; min-width: 0; }
.structured-hub-personal-packs :is(input:not([type=checkbox]), textarea, select) { max-width: 100%; min-width: 0; }
.structured-hub-pack-choices { display: grid; gap: .35rem; max-height: 22rem; overflow: auto; border: 1px solid var(--line, #cbd5e1); border-radius: 12px; padding: .5rem; }
.structured-hub-pack-choices > label { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .35rem; min-width: 0; }
.structured-hub-pack-choices > label > span { flex: 1; overflow-wrap: anywhere; }
.structured-hub-pack-choices small { font-size: .7rem; }
.structured-hub-pack-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .6rem 0; }
.structured-hub-pack-row strong { flex: 1 1 10rem; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .structured-hub-teacher-item-filters { display: flex; flex-wrap: wrap; }
  .structured-hub-teacher-item-filters > * { flex: 1 1 7rem; min-width: 0; max-width: 100%; }
}

/* The credits page keeps its optional player behind a native disclosure. */
.music-credits-menu { position: relative; }
.music-credits-menu > summary { cursor: pointer; min-height: 44px; }
.music-credits-menu [data-study-music-controls] { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; max-width: 100%; }
.music-credits-menu[open] { flex-basis: 100%; }
body[data-page="music-credits"] .header-actions { flex-wrap: wrap; min-width: 0; }
body[data-page="music-credits"] .compact-page-header { max-height: none; position: relative !important; align-items: flex-start; }
@media (max-width: 720px) {
  body[data-page="music-credits"] .compact-page-header { position: relative; flex-wrap: wrap; gap: 12px; padding: 14px; }
  body[data-page="music-credits"] .compact-page-header .brand { flex-basis: 100%; }
  body[data-page="music-credits"] .header-actions { width: 100%; justify-content: flex-start; }
  .music-credits-menu [data-study-music-controls] .voice-select { min-width: 120px; }
  .music-credits-menu .study-music-status { flex-basis: 100%; }
}

/* Checkbox dimensions must override the full-width form input rule. */
.structured-hub-pack-choices > label { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:12px; padding:12px; border-radius:10px; }
.structured-hub-pack-choices > label:has(input:checked) { background:color-mix(in srgb,var(--teal,#287c79) 12%,transparent); }
.structured-hub-pack-choices > label > input[type=checkbox] { width:20px; height:20px; min-height:20px; max-width:20px; padding:0; margin:0; flex:none; }
.structured-hub-pack-choices > label > span { min-width:0; overflow-wrap:break-word; line-height:1.6; }
.structured-hub-pack-choices > label > small { white-space:nowrap; }
.assigned-summary { min-width:140px; padding:10px; border:1px solid var(--line); border-radius:12px; }
.assigned-summary summary { cursor:pointer; font-weight:800; }
.assigned-summary ul { padding-left:20px; line-height:1.7; }
.studio-notices > summary { cursor:pointer; padding:18px; font-weight:850; border:1px solid var(--line); border-radius:16px; }
@media(max-width:540px) { .structured-hub-pack-choices > label { grid-template-columns:24px minmax(0,1fr); } .structured-hub-pack-choices small { grid-column:2; } }
/* English Club's offer language: ink, warm paper and fresh mint. */
.campaign-eyebrow { font-size:.68rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.campaign-banner { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px 32px; border-radius:22px; background:#102f3b; color:#fffdf6; box-shadow:0 18px 40px -32px #102f3b; margin:24px auto; }
.campaign-banner[hidden] { display:none; }
.campaign-banner h2 { margin:6px 0; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.035em; }
.campaign-banner p { margin:6px 0; }
.campaign-banner .campaign-eyebrow { color:#bfe4b0; }
.campaign-deadline { display:grid; gap:8px; border-left:1px solid #ffffff35; padding-left:28px; }
.campaign-deadline span,.campaign-deadline small { font-size:.66rem; line-height:1.6; color:#d5e6e6; }
.campaign-deadline strong { color:#d6f5a7; font-size:1.05rem; }
.campaign-price-reference { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:20px; font-size:.72rem; }
.campaign-price-reference del { color:var(--ink-soft); text-decoration-thickness:1.5px; }
.campaign-price-reference b { color:#103b38; background:#d6edb5; padding:6px 10px; border-radius:100px; white-space:nowrap; }
.campaign-card-saving { margin:-4px 0 18px; color:var(--teal,#26776f); font-weight:800; font-size:.74rem; }
body[data-page=pricing] .plan-card { border-radius:24px; }
body[data-page=pricing] .plan-card.featured { box-shadow:0 24px 64px -38px #1b6259; }
.welcome-offer { box-sizing:border-box; width:min(570px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow:auto; padding:36px; border:1px solid #466462; border-radius:28px; color:#f6f8ee; background:radial-gradient(ellipse at 80% 0%,#315e50 0%,transparent 46%),#122f36; box-shadow:0 30px 100px #071b3270; text-align:center; }
.welcome-offer::backdrop { background:#0c202da8; backdrop-filter:blur(7px); }
.welcome-close { position:absolute; right:14px; top:14px; width:36px; height:36px; border-radius:50%; border:1px solid #ffffff30; background:#ffffff0a; color:white; cursor:pointer; font-size:24px; }
.welcome-emblem { width:50px; height:50px; display:grid; place-items:center; margin:0 auto 18px; font-size:30px; border:1px solid #d4eaa577; border-radius:16px; color:#d5f1a6; transform:rotate(-8deg); }
.welcome-offer .campaign-eyebrow { color:#d5f1a6; font-size:.61rem; }
.welcome-offer h2 { color:inherit; font-size:clamp(1.8rem,5vw,2.9rem); line-height:1.1; letter-spacing:-.045em; margin:20px 0 12px; }
.welcome-offer p { font-size:.78rem; line-height:1.8; }
.welcome-japanese { color:#d5e1da; }
.welcome-value { display:grid; gap:0; margin:25px 0 12px; }
.welcome-value > span { font-size:.65rem; letter-spacing:.2em; color:#d5e1da; }
.welcome-value > strong { color:#d5f1a6; font-size:4.3rem; line-height:1.1; letter-spacing:-.05em; }
.welcome-value small { font-size:1.4rem; letter-spacing:-.02em; margin-left:5px; }
.welcome-prices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #ffffff25; border-radius:15px; padding:14px 5px; gap:4px; margin-top:20px; }
.welcome-prices > div { display:grid; gap:6px; font-size:.72rem; }
.welcome-prices > div + div { border-left:1px solid #ffffff20; }
.welcome-prices del { color:#b5c7c4; font-size:.72rem; }
.welcome-prices strong { font-size:1.03rem; }.welcome-prices small { font-size:.55rem; }
.welcome-offer .campaign-terms { font-size:.6rem; color:#b9ceca; margin:15px 0; }
.welcome-countdown { font-variant-numeric:tabular-nums; color:#deebbf; font-size:.72rem; padding:10px; }
.welcome-claim { display:block; width:100%; border:0; border-radius:12px; text-decoration:none; background:#d5f1a6; color:#173832; font-size:.82rem; font-weight:850; padding:17px 8px; cursor:pointer; margin-top:12px; }
.welcome-claim:hover { background:#e6ffc2; }.welcome-later { border:0; background:none; color:#b9ceca; padding:14px; cursor:pointer; font-size:.68rem; }
.preview-ribbon { color:#d5f1a6; border-bottom:1px solid #ffffff30; padding-bottom:10px; }
.experience-studio { margin:0 0 20px; }.experience-workspace { background:var(--paper,#fffdf8); border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.experience-workspace > summary { display:flex; align-items:center; gap:16px; list-style:none; padding:22px; cursor:pointer; background:linear-gradient(115deg,#102f3b,#275f5b); color:#fffdf6; }
.experience-workspace > summary::-webkit-details-marker { display:none; }
.studio-mark { display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:14px; background:#ffffff14; color:#d5f1a6; font-size:26px; }
.experience-workspace > summary strong { display:grid; gap:3px; font-size:1.05rem; }.experience-workspace > summary strong span { font-size:.7rem; font-weight:600; }
.experience-workspace > summary small { display:block; letter-spacing:.14em; font-size:.55rem; color:#d5f1a6; margin-bottom:7px; }
.studio-live { margin-left:auto; border:1px solid #b6d0b94a; background:#ffffff12; color:#d5f1a6; border-radius:100px; font-size:.65rem; padding:9px 13px; }
.experience-form { padding:28px; }.studio-intro { display:flex; gap:30px; align-items:center; margin-bottom:26px; }.studio-intro h3 { flex:1; margin:0; font-size:1.6rem; letter-spacing:-.045em; }.studio-intro p { flex:1; font-size:.73rem; line-height:1.9; color:var(--ink-soft); }
.studio-step { display:grid; grid-template-columns:32px minmax(0,1fr); gap:18px; border-top:1px solid var(--line); padding:28px 0; }.studio-step > span { width:30px; height:30px; border-radius:50%; background:#e2eddf; color:#275c50; display:grid; place-items:center; font-size:.66rem; font-weight:850; }.studio-step h4 { margin:3px 0 18px; font-size:.92rem; }
.studio-mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:15px; }.studio-mode-switch label { padding:17px; border:1px solid var(--line); border-radius:14px; cursor:pointer; display:grid; grid-template-columns:20px 1fr; gap:7px; }.studio-mode-switch label:has(:checked) { border-color:#458475; background:#eaf1e4; color:#184b41; }.studio-mode-switch small { grid-column:2; font-size:.62rem; }.studio-mode-switch b { font-size:.74rem; }
.experience-form input[type=checkbox],.experience-form input[type=radio] { width:18px; height:18px; min-height:18px; padding:0; margin:0; accent-color:#277368; }
.experience-form label { font-size:.71rem; }.studio-switch { display:flex; gap:12px; align-items:center; padding:15px; border-radius:14px; background:color-mix(in srgb,var(--cream,#ede9df) 65%,transparent); }.studio-switch span { display:grid; gap:6px; }.studio-switch small { font-size:.65rem; color:var(--ink-soft); }
.studio-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.studio-fields label,.studio-price-inputs label { display:grid; gap:7px; }.experience-form :is(input:not([type=checkbox]):not([type=radio]),select) { width:100%; min-width:0; border:1px solid var(--line); border-radius:10px; padding:11px; min-height:44px; background:var(--paper,#fff); color:var(--ink); }
.studio-hint { font-size:.66rem; line-height:1.8; color:var(--ink-soft); margin:14px 0; }.studio-price-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.studio-price-inputs fieldset { min-width:0; border:1px solid var(--line); border-radius:14px; padding:14px; display:grid; gap:12px; }.studio-price-inputs legend { font-weight:850; padding:0 5px; font-size:.82rem; }.studio-price-inputs output { font-size:.67rem; color:var(--teal); font-weight:800; }
.studio-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.studio-feature-grid label,.studio-audience label { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; }.studio-feature-grid label:has(:checked) { border-color:#4b857c70; }.studio-feature-grid small { display:block; color:var(--ink-soft); margin-top:3px; font-size:.6rem; }
.studio-audience { display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:14px; max-height:240px; overflow:auto; }.studio-audience[hidden] { display:none; }
.studio-footer { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); }.studio-footer a { font-size:.67rem; color:var(--teal); }.studio-status { width:100%; font-size:.72rem; font-weight:750; }
@media(max-width:680px) { .campaign-banner,.studio-intro { flex-direction:column; align-items:stretch; }.campaign-deadline { border-left:0; border-top:1px solid #ffffff30; padding:16px 0 0; }.experience-form { padding:18px; }.studio-step { gap:9px; grid-template-columns:24px minmax(0,1fr); }.studio-step > span { width:24px;height:24px; }.studio-fields,.studio-price-inputs { grid-template-columns:1fr; }.studio-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.experience-workspace > summary { flex-wrap:wrap; padding:17px; }.studio-live { margin-left:60px; }.studio-mode-switch { grid-template-columns:1fr; }.welcome-offer { padding:30px 22px 18px; }.welcome-offer h2 { font-size:2rem; } }
@media(prefers-reduced-motion:reduce) { .welcome-offer { scroll-behavior:auto; } }

.pricing-hero-cta { display:inline-flex; text-decoration:none; background:#d5f1a6; color:#153a35; box-shadow:none; margin:12px 0 4px; }
@media(max-height:800px) { .welcome-offer { padding-top:24px; }.welcome-emblem { width:34px;height:34px;font-size:23px;margin-bottom:10px; }.welcome-offer h2 { font-size:2rem;margin:12px 0 6px; }.welcome-offer p { margin:8px 0; }.welcome-value { margin:14px 0 8px; }.welcome-value > strong { font-size:3.2rem; }.welcome-prices { margin-top:12px;padding:10px 5px; }.welcome-offer .campaign-terms { margin:10px 0; }.welcome-offer .preview-ribbon { padding-bottom:8px; } }

/* A calm front door: navigation appears immediately, with no delayed reveal. */
.private-recording-player { display:grid; gap:10px; padding:16px; background:var(--cream); border:1px solid var(--line); border-radius:14px; }
.private-recording-player audio,.voice-feedback-editor audio { width:100%; min-width:0; }
.recording-status { min-height:1.5em; margin:0; font-size:.75rem; line-height:1.6; color:var(--ink-soft); }
.voice-feedback-editor { grid-column:1/-1; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--cream); display:grid; gap:12px; }
.voice-feedback-editor h4,.voice-feedback-editor p { margin:0; }.voice-feedback-editor>p{font-size:.75rem;line-height:1.7;}
.audio-upload-label { position:relative; display:inline-flex; align-items:center; cursor:pointer; overflow:hidden; }
.audio-upload-label input[type=file] { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.submission-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.submission-filters label { display:grid; gap:7px; font-size:.76rem; font-weight:700; }.submission-filters select{width:100%;min-height:44px;}
.premium-task-management>summary { cursor:pointer; padding:22px; border:1px solid var(--line); border-radius:16px; font-weight:800; }
.premium-task-management[open]>summary { margin-bottom:18px; }
.teacher-tabs button[data-teacher-tab=submissions] { position:relative; padding-right:38px; }
.submission-count { position:absolute; right:10px; top:12px; background:var(--teal); color:white; border-radius:20px; min-width:23px; text-align:center; padding:3px; font-size:.65rem; }
@media(max-width:600px) { .submission-filters{grid-template-columns:1fr;} .voice-feedback-editor{padding:14px;} .premium-review-card .premium-task-actions{display:flex;flex-wrap:wrap;} .premium-review-card .premium-task-actions>button,.audio-upload-label{min-height:44px;flex:1 1 140px;justify-content:center;} }
.home-portal .site-header { max-width:1280px; margin:18px auto 0; gap:22px; align-items:center; position:relative; }
.home-portal .header-actions { position:relative; flex-wrap:wrap; }
.home-portal .mobile-settings-toggle { display:inline-flex; order:5; }
.home-portal .header-settings-controls { display:none; }
.home-portal .header-settings-controls.mobile-open { display:flex; flex-wrap:wrap; position:absolute; top:calc(100% + 15px); right:0; z-index:50; width:min(620px,calc(100vw - 48px)); padding:22px; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.home-portal .hero { padding-top:42px; padding-bottom:40px; margin-bottom:12px; min-height:0; }
.home-portal .hero-wordmark { font-size:clamp(2.5rem,4.8vw,4.25rem); line-height:1.14; }
.home-portal .hero-panel { padding:24px; max-width:330px; justify-self:end; }
.home-portal .hero-reveal,.home-portal .hero-word,.home-portal [data-reveal] { animation:none!important; opacity:1!important; transform:none!important; }
.home-greeting { color:var(--teal); letter-spacing:.1em; font-size:.65rem; font-weight:800; margin-bottom:20px; }
.home-destinations { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:18px; margin-top:0; margin-bottom:42px; }
.destination-card { display:flex; flex-direction:column; padding:30px; border:1px solid var(--line); border-radius:22px; text-decoration:none; color:var(--ink); background:var(--paper); transition:transform .18s,border-color .18s; }
.destination-card:hover { transform:translateY(-3px); border-color:var(--teal); }
.destination-number { font-size:.62rem; font-weight:850; letter-spacing:.12em; }
.destination-card h2 { font-size:clamp(1.5rem,2.35vw,2.15rem); line-height:1.2; letter-spacing:-.035em; margin:28px 0 18px; }
.destination-card h2 em { font-family:Georgia,serif; font-weight:400; }
.destination-card p { font-size:.7rem; line-height:1.9; margin:0 0 24px; color:var(--ink-soft); }
.destination-link { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line); font-size:.72rem; font-weight:800; margin-top:auto; }.destination-link b{font-size:1.35rem;}
.destination-lessons { background:#153f43; color:#f5f2df; border-color:#153f43; }.destination-lessons h2{color:inherit;}.destination-lessons h2 em{color:#dbe9ad;}.destination-lessons p{color:#d1e0da;}.destination-lessons .destination-link{border-color:#ffffff35;}.destination-personal{background:var(--gold-soft);}
.home-portal .metrics { border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; background:none; padding:22px 0; box-shadow:none; }.home-portal .metrics article{background:none;box-shadow:none;border:0;}.home-portal .curriculum-home{padding-top:44px;}
/* Reference price, discount and present price form one visible price story. */
.campaign-price-reference { display:flex; align-items:center; gap:10px; justify-content:space-between; background:#fff0ed; border:1px solid #f0b5a9; border-radius:13px; padding:14px; margin-top:22px; }
.campaign-price-reference > span { display:grid; gap:4px; color:#8a3b31; font-size:.61rem; line-height:1.5; }
.campaign-price-reference del { color:#a8372a; font-size:1.55rem; font-weight:700; text-decoration-thickness:2px; font-variant-numeric:tabular-nums; }
.campaign-price-reference b { color:white; background:#c6392d; font-size:1.07rem; border-radius:9px; padding:10px; box-shadow:0 4px 10px #b7402220; }
.campaign-price-reference + .plan-price { margin-top:12px; }.campaign-price-reference + .plan-price strong{color:#b32c22;}
.campaign-card-saving { display:inline-block; color:#a22d23; font-size:.85rem; font-weight:850; margin:0 0 20px; }
.premium-plus .campaign-price-reference, html[data-theme=dark] .campaign-price-reference { background:#512b2e; border-color:#9c514c; }.premium-plus .campaign-price-reference>span,html[data-theme=dark] .campaign-price-reference>span{color:#f7cac1;}.premium-plus .campaign-price-reference del,html[data-theme=dark] .campaign-price-reference del{color:#ffb9a8;}.premium-plus .campaign-price-reference + .plan-price strong,html[data-theme=dark] .campaign-price-reference + .plan-price strong{color:#ffe5c8;}.premium-plus .campaign-card-saving,html[data-theme=dark] .campaign-card-saving{color:#ffbaa8;}
.translation-setting,.pronunciation-setting { background:var(--teal-soft); border:1px solid var(--teal); border-radius:14px; padding:16px!important; margin:12px 0; }
.translation-setting b,.pronunciation-setting b { font-size:.88rem; }.translation-setting input[type=checkbox],.pronunciation-setting input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--teal);}
.question-topline { flex-wrap:wrap; gap:12px; }.save-learning-btn[aria-pressed=true]{color:var(--teal);background:var(--teal-soft);}
.profile-avatar{width:96px;height:96px;flex:none;display:grid;place-items:center;font:2.5rem Georgia,serif;border-radius:50%;background:var(--teal-soft);color:var(--navy);overflow:hidden;border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line);}.profile-avatar img{display:block;width:100%;height:100%;object-fit:cover;}.teacher-profile-avatar{margin-bottom:16px;}
.personal-card{padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);min-width:0;}.personal-card h3{font-size:1.15rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0;}.personal-card p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:.8rem;}.personal-card .eyebrow{font-size:.6rem;color:var(--teal);}.personal-teacher-note{border-left:3px solid var(--gold);padding:10px 14px;background:var(--cream);border-radius:0 8px 8px 0;}.personal-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}.personal-card-actions button,.personal-card-actions a{font-size:.7rem;}.personal-save[aria-pressed=true]{color:var(--teal);}.personal-card-status:empty{display:none;}.personal-card-form{display:grid;gap:16px;max-width:820px;}.personal-card-form>label{display:grid;gap:8px;}.personal-card-form>.settings-check{display:flex;align-items:center;}.personal-card-form input[type=checkbox]{width:20px;height:20px;min-height:20px;flex:none;}.personal-card-form textarea,.personal-card-form select{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;}.personal-studio-list{display:grid;gap:18px;margin-top:28px;}.personal-studio-entry>.personal-card-actions{margin:12px 0;}
@media(max-width:800px){.home-destinations{grid-template-columns:1fr;}.destination-card{padding:24px;}.destination-card h2{font-size:2rem;margin:18px 0 14px;}.home-portal .site-header{margin:10px 16px;flex-wrap:wrap;}.home-portal .hero-panel{display:none;}.home-portal .hero{grid-template-columns:1fr;padding-top:25px;}.home-portal .hero-wordmark{font-size:2.55rem;}.home-portal .header-actions{justify-content:flex-start;}.home-portal .header-settings-controls.mobile-open{right:auto;left:0;}.campaign-price-reference del{font-size:1.7rem;}.campaign-price-reference b{font-size:1.2rem;}}

.home-portal .hero-wordmark,.home-portal .hero-word,.home-portal .feature-icon { filter:none!important; }
.home-portal .hero-wordmark { font-size:clamp(2rem,3.8vw,3.35rem); }.home-portal .hero-wordmark em{font-family:Georgia,"Yu Mincho",serif;font-weight:500;}.home-portal .hero-arrival{padding:34px 38px;}.home-portal .hero-copy>p:not(.home-greeting){font-size:.8rem;line-height:1.8;}.home-portal .hero-panel{padding:20px;}.home-portal .practice-flow li{padding:12px 0;}.home-portal .hero-actions{margin-top:22px;}.home-portal .hero-tertiary-link{padding:10px 0;}
@media(max-width:600px){.home-portal .hero-arrival{padding:25px;}.home-portal .hero-wordmark{font-size:1.85rem;}.home-portal .hero{margin-top:22px;}}

.choice-speech-status{font-size:.75rem;color:var(--ink-soft);line-height:1.7;margin:8px 0;}.choice-speech-status:empty{display:none;}

.dialog-close{color:#183447!important;}

.owner-preview-badge{display:block;text-align:center;font-size:.68rem;font-weight:700;padding:10px 16px;background:#e7d2a1;color:#283c3d;text-decoration:none;line-height:1.6;}.owner-preview-badge+header{margin-top:10px!important;}