:root {
  --ink: #14203b;
  --muted: #61708c;
  --navy: #101b45;
  --navy-2: #192b66;
  --blue: #5267ff;
  --blue-soft: #eef0ff;
  --green: #18a77b;
  --green-soft: #e5f8f2;
  --yellow: #ffd45a;
  --yellow-soft: #fff6d8;
  --purple: #8e5bed;
  --purple-soft: #f1eaff;
  --red: #cf3d5a;
  --red-soft: #fff0f3;
  --amber: #a86700;
  --amber-soft: #fff4d6;
  --paper: #ffffff;
  --canvas: #f3f6fb;
  --line: #dce3ef;
  --shadow: 0 18px 55px rgba(23, 40, 88, .12);
  --shadow-sm: 0 7px 22px rgba(23, 40, 88, .09);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --body-size: 1rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--body-size);
  line-height: 1.55;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
a { color: var(--blue); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 4vw, 3.8rem); margin-bottom: .55rem; }
h2 { font-size: clamp(1.2rem, 2.2vw, 1.65rem); margin-bottom: .45rem; }
h3 { font-size: 1.05rem; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; background: var(--yellow); color: var(--navy); padding: .8rem 1.1rem; border-radius: .7rem; font-weight: 800; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(100px, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 76px;
  padding: .7rem clamp(1rem, 4vw, 3.2rem);
  color: #fff;
  background: rgba(16, 27, 69, .97);
  box-shadow: 0 4px 24px rgba(5, 13, 42, .18);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; justify-self: start; gap: .7rem; border: 0; padding: 0; color: #fff; background: none; text-align: left; cursor: pointer; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; color: var(--navy); background: var(--yellow); font: 900 1.55rem/1 Georgia, serif; box-shadow: 0 5px 0 #dba92e; transform: rotate(-3deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .98rem; letter-spacing: -.01em; }
.brand small { color: #b9c6ed; font-size: .72rem; margin-top: .06rem; }
.main-nav { display: flex; align-items: center; gap: .25rem; padding: .3rem; border-radius: 14px; background: rgba(255,255,255,.07); }
.nav-btn { border: 0; border-radius: 10px; padding: .62rem .9rem; color: #c9d3f4; background: transparent; font-size: .9rem; font-weight: 700; cursor: pointer; }
.nav-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-btn.is-active { color: var(--navy); background: #fff; }
.header-actions { justify-self: end; display: flex; gap: .45rem; }
.icon-btn { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: #fff; background: rgba(255,255,255,.07); font-weight: 850; cursor: pointer; }
.icon-btn:hover { background: rgba(255,255,255,.14); }

main { min-height: calc(100vh - 160px); }
.view { display: none; width: min(1420px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 2.6rem); animation: enter .35s ease both; }
.view.is-active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.hero-shell {
  position: relative;
  overflow: hidden;
  min-height: 610px;
  padding: clamp(2rem, 5vw, 4.7rem);
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 12%, rgba(114, 101, 255, .72), transparent 30%),
    radial-gradient(circle at 15% 100%, rgba(0, 200, 166, .28), transparent 33%),
    linear-gradient(135deg, #0c163d 0%, #1d2d70 58%, #432b8c 100%);
  box-shadow: var(--shadow);
}
.hero-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.hero-copy { position: relative; z-index: 2; width: min(760px, 75%); }
.hero-copy h1 { max-width: 780px; font-size: clamp(2.45rem, 5vw, 5.5rem); }
.hero-copy p:not(.eyebrow) { max-width: 650px; color: #d6def7; font-size: clamp(1rem, 1.7vw, 1.18rem); }
.eyebrow { margin-bottom: .55rem; color: var(--yellow); font-size: .78rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow--dark { color: #5d4ed5; }
.letter-sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.letter-sky span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: clamp(44px, 6vw, 78px);
  height: clamp(44px, 6vw, 78px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 20px 40px rgba(0,0,0,.12);
  font: 900 clamp(1.3rem, 3vw, 2.2rem)/1 Georgia, serif;
  transform: rotate(var(--r));
  animation: float-letter var(--d) ease-in-out infinite alternate;
  backdrop-filter: blur(8px);
}
@keyframes float-letter { 0% { translate: 0 0; rotate: -2deg; } 45% { translate: 11px -22px; } 100% { translate: -8px 12px; rotate: 5deg; } }

.quick-start { position: relative; z-index: 3; width: min(1080px, 100%); margin-top: 2.2rem; padding: 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 25px; background: rgba(7, 15, 47, .62); box-shadow: 0 24px 60px rgba(0,0,0,.2); backdrop-filter: blur(18px); }
.step-block { display: grid; grid-template-columns: 40px 1fr; gap: .8rem; padding: .85rem; }
.step-block + .step-block { border-top: 1px solid rgba(255,255,255,.12); }
.step-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--navy); background: var(--yellow); font-weight: 900; }
.step-block h2 { margin: .18rem 0 .8rem; font-size: 1.05rem; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.segmented button { border: 1px solid rgba(255,255,255,.15); border-radius: 13px; padding: .65rem .75rem; color: #d7def6; background: rgba(255,255,255,.06); text-align: left; cursor: pointer; }
.segmented button span, .segmented button small { display: block; }
.segmented button span { color: #fff; font-weight: 800; }
.segmented button small { margin-top: .1rem; color: #aebbe2; font-size: .76rem; }
.segmented button.is-selected { border-color: var(--yellow); background: rgba(255, 212, 90, .13); box-shadow: inset 0 0 0 1px var(--yellow); }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.mode-card { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: .65rem .75rem; color: #fff; background: rgba(255,255,255,.055); text-align: left; cursor: pointer; }
.mode-card > span { grid-row: span 2; font-size: 1.35rem; }
.mode-card strong { font-size: .87rem; }
.mode-card small { color: #aebbe2; font-size: .72rem; line-height: 1.25; }
.mode-card.is-selected { border-color: #75e5c4; background: rgba(58, 221, 176, .12); box-shadow: inset 0 0 0 1px #75e5c4; }
.start-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .6rem; padding: .85rem 1rem; border-radius: 16px; color: var(--ink); background: #fff; }
.smart-note { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.smart-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--purple)); }
.smart-note strong, .smart-note span { display: block; }
.smart-note span { color: var(--muted); font-size: .85rem; }

.primary-btn, .secondary-btn, .danger-btn, .back-btn, .icon-text-btn, .text-btn { border: 0; cursor: pointer; font-weight: 800; }
.primary-btn { border-radius: 13px; padding: .78rem 1.15rem; color: #fff; background: linear-gradient(135deg, var(--blue), #6c4fe6); box-shadow: 0 8px 20px rgba(82, 103, 255, .27); }
.primary-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.primary-btn--large { white-space: nowrap; padding: .95rem 1.35rem; }
.secondary-btn { border: 1px solid var(--line); border-radius: 13px; padding: .75rem 1rem; background: #fff; box-shadow: 0 3px 9px rgba(24, 41, 82, .06); }
.secondary-btn:hover { border-color: #b3bfd4; background: #f9faff; }
.danger-btn { border-radius: 13px; padding: .75rem 1rem; color: #fff; background: var(--red); }
.text-btn { padding: .4rem; color: var(--blue); background: none; }
.text-btn.danger { color: var(--red); }
.full-width { width: 100%; }

.home-lower { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.2rem; margin-top: 1.2rem; }
.daily-card, .today-progress, .panel-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.daily-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; padding: 1.35rem; }
.daily-card p { margin-bottom: 0; color: var(--muted); }
.daily-illustration { position: relative; width: 100px; height: 78px; }
.daily-illustration span { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-weight: 900; box-shadow: var(--shadow-sm); }
.daily-illustration span:nth-child(1) { left: 0; top: 20px; background: var(--yellow); transform: rotate(-8deg); }
.daily-illustration span:nth-child(2) { left: 37px; top: 0; color: #fff; background: var(--blue); transform: rotate(6deg); }
.daily-illustration span:nth-child(3) { left: 55px; top: 34px; background: #7ce4c5; transform: rotate(-4deg); }
.today-progress { padding: 1.35rem; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.section-heading.compact h2 { margin-bottom: .1rem; }
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .85rem; border-top: 1px solid var(--line); }
.stat-strip div { padding: .85rem .5rem 0; text-align: center; }
.stat-strip div + div { border-left: 1px solid var(--line); }
.stat-strip strong, .stat-strip span { display: block; }
.stat-strip strong { font-size: 1.65rem; }
.stat-strip span { color: var(--muted); font-size: .78rem; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin: .6rem 0 1.8rem; }
.page-head h1 { margin-bottom: .35rem; }
.page-head p:last-child { margin-bottom: 0; color: var(--muted); }
.filter-bar { display: grid; grid-template-columns: repeat(3, minmax(150px, .8fr)) minmax(220px, 1.4fr); gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.filter-bar label span, .teacher-controls label span { display: block; margin: 0 0 .3rem .15rem; color: var(--muted); font-size: .75rem; font-weight: 800; }
input, select, textarea { width: 100%; border: 1.5px solid #cfd8e7; border-radius: 12px; padding: .75rem .85rem; color: var(--ink); background: #fff; }
textarea { resize: vertical; line-height: 1.65; }
input:hover, select:hover, textarea:hover { border-color: #aab8ce; }
.result-count { margin: 1.2rem 0 .7rem; color: var(--muted); font-weight: 700; }
.exercise-library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.library-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 245px; padding: 1.2rem; border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.library-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.library-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--card-color, var(--blue)); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.level-pill, .topic-pill, .privacy-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .3rem .6rem; font-size: .72rem; font-weight: 850; }
.level-pill { color: var(--navy); background: var(--blue-soft); }
.topic-pill { color: #4b5873; background: #edf1f7; }
.library-card h2 { margin: 1rem 0 .45rem; font-size: 1.28rem; }
.library-card p { color: var(--muted); font-size: .9rem; }
.rule-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: auto 0 .9rem; }
.rule-tags span { border-radius: 7px; padding: .2rem .45rem; color: #5c4ccd; background: var(--purple-soft); font-size: .7rem; font-weight: 800; }
.card-action { display: flex; align-items: center; justify-content: space-between; padding-top: .8rem; border-top: 1px solid var(--line); }
.card-action small { color: var(--muted); }
.card-action button { border: 0; color: var(--blue); background: none; font-weight: 900; cursor: pointer; }
.empty-state { padding: 4rem 1rem; text-align: center; }
.empty-state span { font-size: 3rem; }

.exercise-topbar { display: grid; grid-template-columns: auto minmax(100px, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.back-btn { padding: .55rem; color: var(--navy); background: none; }
.exercise-progress-track { overflow: hidden; height: 9px; border-radius: 10px; background: #dde4f0; }
.exercise-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #62d7b9); transition: width .3s ease; }
.live-score { display: flex; gap: .8rem; color: var(--muted); font-size: .85rem; }
.live-score b { color: var(--ink); }
.exercise-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .75fr); gap: 1.2rem; align-items: start; }
.exercise-card, .feedback-panel { border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow-sm); }
.exercise-card { padding: clamp(1.1rem, 3vw, 2rem); }
.exercise-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.exercise-heading h1 { margin-bottom: 0; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.exercise-meta { margin-bottom: .35rem; color: var(--purple); font-size: .77rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.exercise-actions { display: flex; gap: .45rem; }
.icon-text-btn { border: 1px solid var(--line); border-radius: 11px; padding: .55rem .7rem; color: #354260; background: #f8faff; font-size: .8rem; }
.mode-instruction { margin: 1rem 0; padding: .8rem 1rem; border-left: 4px solid var(--blue); border-radius: 0 12px 12px 0; color: #39445f; background: var(--blue-soft); font-size: .92rem; }
.word-bank { margin: 1rem 0 1.2rem; padding: 1rem; border: 1.5px solid #d7d0ff; border-radius: 17px; background: linear-gradient(135deg, #f7f4ff, #eef4ff); }
.word-bank[hidden] { display: none; }
.word-bank-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.word-bank-head .eyebrow { margin-bottom: .2rem; }
.word-bank-head h2 { margin: 0; font-size: 1.05rem; }
.word-bank-head > span { flex: 0 0 auto; border-radius: 999px; padding: .25rem .55rem; color: #5342bb; background: #fff; font-size: .74rem; font-weight: 850; }
.word-bank-help { margin: .55rem 0 .75rem; color: #66617b; font-size: .82rem; }
.word-bank-list { display: flex; flex-wrap: wrap; gap: .48rem; }
.bank-word { border: 1.5px solid #beb4f5; border-radius: 11px; padding: .45rem .72rem; color: #3e318d; background: #fff; box-shadow: 0 3px 8px rgba(54, 44, 120, .08); font-weight: 850; cursor: pointer; transition: transform .16s ease, opacity .16s ease, background .16s ease; }
.bank-word:hover, .bank-word:focus-visible { border-color: var(--purple); background: var(--purple-soft); transform: translateY(-1px); }
.bank-word.is-used { border-color: #b9ded2; color: #548072; background: #edf8f4; opacity: .62; text-decoration: line-through; }
.bank-word.is-active { border-color: var(--blue); color: #fff; background: var(--blue); }
.passage { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 2.05; letter-spacing: .002em; }
.word-input { display: inline-block; width: var(--input-width, 7ch); min-width: 4.5ch; margin: 0 .12em; border: 0; border-bottom: 3px solid #7d8baa; border-radius: 8px 8px 3px 3px; padding: .15em .25em .08em; background: #f1f4f9; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .8em; line-height: 1.2; text-align: center; transition: background .2s ease, border-color .2s ease; }
.word-input:focus { outline: 3px solid rgba(82,103,255,.25); outline-offset: 1px; border-color: var(--blue); }
.word-input.is-correct { border-color: var(--green); color: #087356; background: var(--green-soft); }
.word-input.is-wrong { border-color: #d18b17; color: #7a4b00; background: var(--amber-soft); animation: nudge .2s linear 2; }
.word-input.is-revealed { border-color: var(--red); color: #a72e49; background: var(--red-soft); }
@keyframes nudge { 50% { transform: translateX(3px); } }
.memory-stage { position: relative; margin: 1rem 0; padding: 1.2rem 5.3rem 1.2rem 1.2rem; border: 2px solid var(--yellow); border-radius: 16px; background: var(--yellow-soft); }
.memory-stage p { margin-bottom: .8rem; font: 1.18rem/1.8 Georgia, serif; }
.memory-timer { position: absolute; right: 1rem; top: 1rem; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: #fff; background: var(--navy); }
.memory-timer span { font-size: 1.4rem; font-weight: 900; line-height: 1; }
.memory-timer small { font-size: .55rem; }
.full-write label { display: block; margin-bottom: .45rem; font-weight: 850; }
.full-write textarea { min-height: 230px; font: 1.12rem/1.7 Georgia, serif; }
.exercise-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.feedback-panel { position: sticky; top: 92px; overflow: hidden; padding: 1.2rem; }
.feedback-welcome { padding: 1.4rem .5rem; text-align: center; }
.feedback-orb { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--purple)); font: 900 1.35rem/1 Georgia, serif; box-shadow: 0 14px 30px rgba(82,103,255,.25); transform: rotate(-4deg); }
.feedback-welcome p { color: var(--muted); font-size: .9rem; }
.feedback-content { padding: .2rem; }
.feedback-status { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; font-weight: 900; }
.feedback-status .status-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; }
.feedback-status.good .status-icon { color: #087356; background: var(--green-soft); }
.feedback-status.try .status-icon { color: var(--amber); background: var(--amber-soft); }
.feedback-status.reveal .status-icon { color: var(--red); background: var(--red-soft); }
.feedback-rule { padding: .9rem; border-radius: 13px; background: #f5f7fb; }
.feedback-rule strong, .feedback-rule span { display: block; }
.feedback-rule span { margin-top: .25rem; color: var(--muted); font-size: .85rem; }
.feedback-word { margin-top: .75rem; padding: .7rem .9rem; border-left: 4px solid var(--purple); border-radius: 0 10px 10px 0; background: var(--purple-soft); }
.feedback-word b { color: #5c3fc5; }
.feedback-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.feedback-links button, .feedback-links a { border: 0; border-radius: 8px; padding: .35rem .55rem; color: #4050bd; background: var(--blue-soft); font-size: .75rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.attempt-meter { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.attempt-meter > span, .attempt-meter > strong { display: block; }
.attempt-meter > span { color: var(--muted); font-size: .75rem; }
.attempt-meter > strong { margin: .1rem 0 .5rem; }
.attempt-meter > div { overflow: hidden; height: 7px; border-radius: 8px; background: #e6eaf2; }
.attempt-meter i { display: block; width: 0; height: 100%; background: var(--green); transition: width .3s ease; }

.complete-card { position: relative; overflow: hidden; width: min(760px, 100%); margin: 1rem auto; padding: clamp(1.6rem, 5vw, 3.5rem); border: 1px solid var(--line); border-radius: 32px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.celebration { position: absolute; inset: 0; pointer-events: none; }
.celebration span { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-weight: 900; }
.celebration span:nth-child(1) { left: 8%; top: 14%; background: var(--yellow); transform: rotate(-12deg); }
.celebration span:nth-child(2) { right: 10%; top: 11%; color: #fff; background: var(--green); transform: rotate(9deg); }
.celebration span:nth-child(3) { right: 5%; top: 45%; color: #fff; background: var(--purple); transform: rotate(-6deg); }
.complete-card > p { color: var(--muted); }
.result-ring { display: grid; place-items: center; width: 150px; height: 150px; margin: 1.4rem auto; border-radius: 50%; background: radial-gradient(circle at center, #fff 58%, transparent 60%), conic-gradient(var(--green) var(--score-angle, 0deg), #e7ebf2 0); }
.result-ring strong, .result-ring span { grid-area: 1/1; }
.result-ring strong { margin-top: -.8rem; font-size: 2.2rem; }
.result-ring span { margin-top: 2.2rem; color: var(--muted); font-size: .7rem; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1rem 0; border: 1px solid var(--line); border-radius: 16px; }
.result-grid div { padding: 1rem; }
.result-grid div + div { border-left: 1px solid var(--line); }
.result-grid strong, .result-grid span { display: block; }
.result-grid strong { font-size: 1.5rem; }
.result-grid span { color: var(--muted); font-size: .78rem; }
.review-box { margin: 1rem 0; padding: 1rem; border-radius: 15px; background: #f6f8fc; text-align: left; }
.review-box h2 { font-size: 1rem; }
.review-box p { margin-bottom: 0; color: var(--muted); }
.complete-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1.4rem; }
.rulelab-launch { border: 0; border-radius: 13px; padding: .78rem 1.05rem; color: #fff; background: linear-gradient(135deg, #7c43d8, #b45dea); box-shadow: 0 8px 20px rgba(126, 66, 216, .25); font-weight: 850; cursor: pointer; }
.rulelab-launch:hover { filter: brightness(1.06); transform: translateY(-1px); }

.rulelab-shell { position: relative; overflow: hidden; width: min(900px, 100%); margin: 1rem auto; border-radius: 32px; color: #fff; background: linear-gradient(145deg, #121e4c 0%, #283a87 55%, #6334a9 100%); box-shadow: var(--shadow); }
.rulelab-shell::before { content: "y  ng  nn  hv  gj"; position: absolute; right: -5%; top: 6%; color: rgba(255,255,255,.06); font: 900 clamp(3rem, 8vw, 7rem)/1 Georgia, serif; transform: rotate(-8deg); white-space: nowrap; }
.rulelab-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 5vw, 3rem); padding-bottom: 1.2rem; }
.rulelab-head h1 { margin-bottom: .45rem; }
.rulelab-head p:last-child { max-width: 590px; margin-bottom: 0; color: #cbd5f7; }
.rulelab-score { display: grid; place-items: center; flex: 0 0 auto; min-width: 118px; min-height: 96px; border: 1px solid rgba(255,255,255,.17); border-radius: 22px; background: rgba(255,255,255,.09); backdrop-filter: blur(10px); }
.rulelab-score strong, .rulelab-score span { display: block; }
.rulelab-score strong { font-size: 2rem; line-height: 1; }
.rulelab-score span { color: #d5dcf5; font-size: .7rem; }
.rulelab-progress { position: relative; z-index: 1; overflow: hidden; height: 8px; margin: 0 clamp(1.5rem, 5vw, 3rem); border-radius: 999px; background: rgba(255,255,255,.13); }
.rulelab-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), #7de8c8); transition: width .3s ease; }
.rulelab-workbench, .rulelab-finish { position: relative; z-index: 1; margin: 1.2rem; padding: clamp(1.4rem, 4vw, 2.5rem); border-radius: 24px; color: var(--ink); background: #fff; text-align: center; }
.rulelab-count { margin-bottom: .7rem; color: var(--muted); font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.rulelab-word { display: inline-grid; place-items: center; min-width: 180px; min-height: 82px; margin: .2rem auto 1.2rem; border: 2px solid #dcd5ff; border-radius: 20px; color: #5737bd; background: var(--purple-soft); font: 900 clamp(1.8rem, 4vw, 2.7rem)/1 Georgia, serif; box-shadow: 0 10px 26px rgba(99, 61, 179, .12); }
.rulelab-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.2rem 0; }
.rulelab-option { min-height: 84px; border: 2px solid var(--line); border-radius: 15px; padding: .8rem; background: #fff; text-align: left; cursor: pointer; }
.rulelab-option strong, .rulelab-option span { display: block; }
.rulelab-option strong { font-size: .9rem; }
.rulelab-option span { margin-top: .18rem; color: var(--muted); font-size: .75rem; line-height: 1.3; }
.rulelab-option:hover { border-color: var(--blue); background: var(--blue-soft); }
.rulelab-option.is-right { border-color: var(--green); color: #087356; background: var(--green-soft); }
.rulelab-option.is-wrong { border-color: var(--red); color: #9d2944; background: var(--red-soft); }
.rulelab-feedback { min-height: 72px; margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 13px; color: #4c5872; background: #f4f6fa; text-align: left; }
.rulelab-feedback.good { color: #0b6f55; background: var(--green-soft); }
.rulelab-feedback.try { color: #865400; background: var(--amber-soft); }
.rulelab-badge { display: grid; place-items: center; width: 100px; height: 100px; margin: 0 auto 1.2rem; border-radius: 30px; color: #fff; background: linear-gradient(135deg, var(--purple), var(--blue)); font: 900 1.5rem/1 Georgia, serif; box-shadow: 0 16px 36px rgba(91, 66, 200, .25); transform: rotate(-4deg); }
.rulelab-finish > p { color: var(--muted); }

.progress-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1rem; }
.big-stat { position: relative; overflow: hidden; min-height: 180px; padding: 1.2rem; border-radius: 22px; color: #fff; box-shadow: var(--shadow-sm); }
.big-stat::after { content: "Aa"; position: absolute; right: -6px; bottom: -30px; font: 900 6.4rem/1 Georgia, serif; opacity: .1; transform: rotate(-8deg); }
.accent-blue { background: linear-gradient(135deg, #3f56df, #6f77ff); }
.accent-green { background: linear-gradient(135deg, #087e65, #20bb8d); }
.accent-yellow { color: var(--navy); background: linear-gradient(135deg, #f1bc2f, #ffe681); }
.accent-purple { background: linear-gradient(135deg, #6d3fd1, #aa6cf0); }
.big-stat span, .big-stat strong, .big-stat small { position: relative; z-index: 1; display: block; }
.big-stat span { font-weight: 800; }
.big-stat strong { margin: .7rem 0 .2rem; font-size: 2.5rem; }
.big-stat small { opacity: .85; }
.progress-columns { display: grid; grid-template-columns: 1.45fr .8fr; gap: 1rem; }
.panel-card { padding: 1.3rem; }
.rule-bars { display: grid; gap: .8rem; margin-top: 1.2rem; }
.rule-bar-row { display: grid; grid-template-columns: minmax(115px, .7fr) minmax(150px, 1.6fr) 52px; align-items: center; gap: .7rem; }
.rule-bar-row > span { font-size: .86rem; font-weight: 780; }
.rule-bar-row > div { overflow: hidden; height: 10px; border-radius: 9px; background: #e6eaf2; }
.rule-bar-row i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--purple)); }
.rule-bar-row b { font-size: .8rem; text-align: right; }
.practice-card { margin: .75rem 0 1rem; padding: 1rem; border: 1px solid #ded5ff; border-radius: 15px; background: var(--purple-soft); }
.practice-card strong { display: block; color: #583ab3; }
.practice-card p { margin: .35rem 0 0; color: #655d7e; font-size: .87rem; }
.difficult-card { margin-top: 1rem; }
.word-cloud { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 60px; margin-top: 1rem; }
.word-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #e8c6ce; border-radius: 999px; padding: .4rem .7rem; color: #813044; background: var(--red-soft); font-weight: 750; }
.word-chip small { color: #a15b6b; }
.empty-copy { color: var(--muted); font-style: italic; }

.teacher-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .65fr); gap: 1rem; align-items: start; }
.builder-step { display: flex; gap: .8rem; margin-bottom: 1rem; }
.builder-step > span { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: var(--blue); font-weight: 900; }
.builder-step h2 { margin-bottom: .15rem; }
.builder-step p { margin-bottom: 0; color: var(--muted); font-size: .9rem; }
.field-label { display: block; margin: .85rem 0 .3rem; font-size: .83rem; font-weight: 850; }
.teacher-builder > .secondary-btn { margin-top: .85rem; }
#teacherWordSection { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.word-selector { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 270px; overflow: auto; padding: .8rem; border: 1px solid var(--line); border-radius: 13px; background: #f8faff; }
.selectable-word { border: 1px solid transparent; border-radius: 7px; padding: .25rem .4rem; background: #fff; cursor: pointer; }
.selectable-word:hover { border-color: #b4c0d6; }
.selectable-word.is-selected { border-color: var(--blue); color: #3145c4; background: var(--blue-soft); font-weight: 850; }
.teacher-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
.selection-status { margin: .75rem 0 0; color: var(--muted); font-size: .85rem; }
.builder-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.teacher-help { position: sticky; top: 92px; }
.teacher-help-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1rem; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--purple)); font-size: 1.4rem; }
.teacher-help ul { padding-left: 1.25rem; color: var(--muted); }
.teacher-help li + li { margin-top: .55rem; }
.source-links { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.source-links h3 { margin-bottom: .7rem; }
.source-links a { display: block; margin-top: .45rem; text-decoration: none; font-size: .86rem; font-weight: 750; }
.privacy-badge { color: #0b7054; background: var(--green-soft); }

.challenge-card { width: min(720px, 100%); margin: 1.5rem auto; padding: clamp(1.4rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.challenge-card > p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; }
.challenge-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 1.4rem 0; }
.challenge-option { border: 2px solid var(--line); border-radius: 16px; padding: 1.1rem; background: #fff; font-size: 1.05rem; font-weight: 850; cursor: pointer; }
.challenge-option:hover { border-color: var(--blue); background: var(--blue-soft); }
.challenge-option.is-right { border-color: var(--green); color: #087356; background: var(--green-soft); }
.challenge-option.is-wrong { border-color: var(--red); color: #9d2944; background: var(--red-soft); }
.challenge-feedback { min-height: 74px; padding: .9rem; border-radius: 13px; background: #f6f8fc; }
.challenge-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; color: var(--muted); }

.site-footer { display: flex; justify-content: space-between; gap: 2rem; width: min(1420px, calc(100% - 2rem)); margin: 0 auto 1rem; padding: 1.2rem 1.4rem; border-radius: 18px; color: #aeb9da; background: var(--navy); }
.site-footer strong, .site-footer span { display: block; }
.site-footer span { font-size: .75rem; }
.site-footer a { margin-left: 1rem; color: #d7def4; font-size: .8rem; text-decoration: none; }

.app-dialog { width: min(560px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; border: 0; border-radius: 24px; padding: 0; color: var(--ink); background: #fff; box-shadow: 0 32px 100px rgba(4, 12, 42, .35); }
.app-dialog::backdrop { background: rgba(7, 14, 40, .6); backdrop-filter: blur(5px); }
.app-dialog form { padding: 1.3rem; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.dialog-head h2 { margin-bottom: 0; }
.dialog-close { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: #edf1f7; font-size: 1.5rem; cursor: pointer; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.switch-row strong, .switch-row small { display: block; }
.switch-row small { color: var(--muted); }
.switch-row input { width: 24px; height: 24px; }
.switch-row + .full-width { margin-top: .7rem; }
.rule-dialog { width: min(700px, calc(100% - 2rem)); }
.rule-guide-item { padding: .9rem; border: 1px solid var(--line); border-radius: 13px; }
.rule-guide-item + .rule-guide-item { margin-top: .6rem; }
.rule-guide-item h3 { margin-bottom: .3rem; }
.rule-guide-item p { margin-bottom: .4rem; color: var(--muted); }
.rule-guide-item a { font-size: .82rem; font-weight: 800; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.toast { position: fixed; left: 50%; bottom: 1.3rem; z-index: 200; max-width: min(420px, calc(100% - 2rem)); padding: .75rem 1rem; border-radius: 12px; color: #fff; background: var(--navy); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* v2.0 — Orðaleiðangurinn */
.expedition-hero {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  padding: clamp(1.5rem, 4vw, 3.4rem);
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 0%, rgba(121, 91, 255, .65), transparent 30%),
    radial-gradient(circle at 8% 100%, rgba(24, 167, 123, .32), transparent 34%),
    linear-gradient(145deg, #091334 0%, #172a6c 52%, #43277e 100%);
  box-shadow: var(--shadow);
}
.expedition-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.expedition-copy { position: relative; z-index: 3; max-width: 720px; }
.expedition-copy h1 { margin-bottom: .5rem; font-size: clamp(3rem, 7vw, 6.4rem); }
.expedition-copy > p:last-child { max-width: 650px; color: #d7dff8; font-size: clamp(1rem, 1.6vw, 1.16rem); }
.secret-card { position: absolute; z-index: 4; right: clamp(1.5rem, 4vw, 3.4rem); top: clamp(1.5rem, 4vw, 3.4rem); width: min(330px, 32%); padding: 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: rgba(6, 13, 43, .5); box-shadow: 0 18px 40px rgba(0,0,0,.2); backdrop-filter: blur(14px); }
.secret-label { display: block; margin-bottom: .55rem; color: #dce3fb; font-size: .75rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.secret-letters { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.secret-letters span { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: var(--yellow); background: rgba(255,255,255,.08); font: 900 clamp(1rem, 2vw, 1.45rem)/1 Georgia, serif; }
.secret-letters span.is-hidden { color: rgba(255,255,255,.35); }
.secret-card small { display: block; margin-top: .55rem; color: #aebbe1; }
.zone-map { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: .75rem; margin-top: clamp(2rem, 5vw, 4.3rem); }
.zone-map::before { content: ""; position: absolute; left: 4%; right: 4%; top: 58px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); }
.zone-card { --zone-color: var(--blue); position: relative; display: flex; flex-direction: column; min-height: 270px; padding: .9rem; border: 1px solid rgba(255,255,255,.16); border-radius: 21px; color: #fff; background: rgba(255,255,255,.085); backdrop-filter: blur(12px); transition: transform .2s ease, background .2s ease; }
.zone-card:nth-child(even) { margin-top: 2rem; }
.zone-card:not(.is-locked):hover { transform: translateY(-4px); background: rgba(255,255,255,.13); }
.zone-card.is-locked { opacity: .58; filter: saturate(.65); }
.zone-node { position: relative; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: .85rem; border: 4px solid rgba(255,255,255,.75); border-radius: 18px; color: #fff; background: var(--zone-color); box-shadow: 0 8px 22px rgba(0,0,0,.24); font: 900 1.2rem/1 Georgia, serif; transform: rotate(-3deg); }
.zone-card.is-mastered .zone-node::after { content: "✓"; position: absolute; right: -8px; top: -9px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #075d47; background: #82f0d0; font: 900 .75rem/1 system-ui, sans-serif; }
.zone-kicker { color: #b8c5e8; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.zone-card h2 { margin: .3rem 0 .45rem; font-size: 1.08rem; }
.zone-card p { flex: 1; margin-bottom: .65rem; color: #ccd5ef; font-size: .78rem; line-height: 1.42; }
.zone-progress { overflow: hidden; height: 7px; margin-bottom: .65rem; border-radius: 7px; background: rgba(255,255,255,.13); }
.zone-progress i { display: block; height: 100%; border-radius: inherit; background: var(--zone-color); }
.zone-card button { width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; padding: .58rem .45rem; color: #fff; background: rgba(255,255,255,.1); font-size: .77rem; font-weight: 850; cursor: pointer; }
.zone-card button:hover { background: rgba(255,255,255,.18); }
.zone-card button + button { margin-top: .4rem; color: var(--navy); background: var(--yellow); }
.zone-card button:disabled { cursor: not-allowed; opacity: .72; }
.home-lower--v2 { grid-template-columns: 1.25fr .75fr; }
.daily-card--personal { border-color: #cbc9ff; background: linear-gradient(135deg, #fff, #f1efff); }
.quick-practice { margin-top: 1.2rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.quick-practice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; }
.quick-practice-head .smart-note { max-width: 560px; padding: .65rem .8rem; border-radius: 14px; background: #f3f5fb; }
.quick-practice-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.2rem; margin: 1rem 0; }
.quick-practice-grid h3 { margin-bottom: .55rem; color: var(--muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.segmented--light button, .mode-grid--light .mode-card { border-color: var(--line); color: var(--ink); background: #f7f9fc; }
.segmented--light button span, .mode-grid--light .mode-card strong { color: var(--ink); }
.segmented--light button small, .mode-grid--light .mode-card small { color: var(--muted); }
.segmented--light button.is-selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.mode-grid--light .mode-card.is-selected { border-color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }
.freshness-badge { display: inline-flex; align-items: center; margin-top: .3rem; border-radius: 999px; padding: .3rem .6rem; color: #087356; background: var(--green-soft); font-size: .72rem; font-weight: 850; }

.sprint-launch { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.2rem; margin-top: 1.2rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,.14); border-radius: 25px; color: #fff; background: radial-gradient(circle at 82% 0%, rgba(255,212,90,.3), transparent 28%), linear-gradient(135deg, #111c49, #3f2b85 62%, #763da0); box-shadow: var(--shadow); }
.sprint-launch::after { content: "⚡"; position: absolute; right: 19%; bottom: -3.4rem; color: rgba(255,255,255,.055); font-size: 11rem; transform: rotate(8deg); }
.sprint-launch > * { position: relative; z-index: 1; }
.sprint-bolt { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 23px; color: var(--navy); background: var(--yellow); box-shadow: 0 10px 26px rgba(0,0,0,.22); font: 900 2rem/1 Georgia, serif; transform: rotate(-5deg); }
.sprint-launch h2 { margin-bottom: .25rem; }
.sprint-launch p:not(.eyebrow) { max-width: 650px; margin: 0; color: #d5dcf5; }
.sprint-launch-stats { min-width: 112px; padding: .7rem .9rem; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(0,0,0,.12); text-align: center; }
.sprint-launch-stats span, .sprint-launch-stats strong, .sprint-launch-stats small { display: block; }
.sprint-launch-stats span, .sprint-launch-stats small { color: #c5cfee; font-size: .68rem; }
.sprint-launch-stats strong { color: var(--yellow); font-size: 1.8rem; }
.sprint-start-btn { border: 0; border-radius: 15px; padding: .9rem 1.1rem; color: var(--navy); background: var(--yellow); box-shadow: 0 8px 20px rgba(255,212,90,.2); font-weight: 900; cursor: pointer; white-space: nowrap; }
.sprint-start-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }

.sprint-shell { position: relative; overflow: hidden; width: min(900px, 100%); min-height: 650px; margin: 1rem auto; border-radius: 32px; padding: clamp(1.2rem, 4vw, 2.5rem); color: #fff; background: radial-gradient(circle at 85% 5%, rgba(255,212,90,.28), transparent 24%), linear-gradient(145deg, #091333, #22357a 55%, #6a348f); box-shadow: var(--shadow); }
.sprint-shell::before { content: "Y  NN  HV  Ð  Æ"; position: absolute; left: -2%; bottom: -1rem; color: rgba(255,255,255,.045); font: 900 clamp(3rem, 9vw, 7rem)/1 Georgia, serif; transform: rotate(-5deg); white-space: nowrap; }
.sprint-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.back-btn--light { color: #fff; }
.sprint-live-stats { display: flex; gap: .5rem; }
.sprint-live-stats span { min-width: 86px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; padding: .55rem .7rem; color: #c8d2ef; background: rgba(255,255,255,.07); font-size: .72rem; text-align: center; }
.sprint-live-stats b { display: block; color: #fff; font-size: 1.15rem; }
.sprint-track { position: relative; z-index: 1; overflow: hidden; height: 9px; margin: 1rem 0; border-radius: 9px; background: rgba(255,255,255,.12); }
.sprint-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--yellow), #73ebc9); transition: width .3s ease; }
.sprint-stage, .sprint-finish { position: relative; z-index: 1; margin-top: 1rem; padding: clamp(1.4rem, 4vw, 2.7rem); border-radius: 25px; color: var(--ink); background: #fff; box-shadow: 0 22px 55px rgba(0,0,0,.18); }
.sprint-round { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.sprint-round span { color: var(--muted); font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sprint-round strong { border-radius: 999px; padding: .3rem .6rem; color: #5b3ab5; background: var(--purple-soft); font-size: .7rem; }
.sprint-stage h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
.sprint-context { min-height: 92px; padding: 1rem 1.1rem; border-left: 5px solid var(--yellow); border-radius: 0 15px 15px 0; background: #f7f8fc; font: 700 clamp(1.1rem, 2.5vw, 1.4rem)/1.65 Georgia, serif; }
.sprint-stage label { display: block; margin: 1rem 0 .4rem; font-weight: 850; }
.sprint-input-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.sprint-input-row input { min-height: 56px; font-size: 1.12rem; font-weight: 800; }
.sprint-check { border: 0; border-radius: 13px; padding: .75rem 1.1rem; color: #fff; background: linear-gradient(135deg, var(--purple), var(--blue)); font-weight: 900; cursor: pointer; }
.sprint-check:disabled { opacity: .5; cursor: not-allowed; }
.sprint-feedback { min-height: 76px; margin-top: .8rem; padding: .85rem 1rem; border-radius: 14px; color: var(--muted); background: #f4f6fa; }
.sprint-feedback.good { color: #087356; background: var(--green-soft); }
.sprint-feedback.try { color: #865400; background: var(--amber-soft); }
.sprint-feedback.reveal { color: #9d2944; background: var(--red-soft); }
.sprint-next { display: block; margin: 1rem 0 0 auto; }
.sprint-next[hidden] { display: none; }
.sprint-finish { padding-top: 3rem; text-align: center; }
.sprint-trophy { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 1rem; border-radius: 30px; color: var(--navy); background: var(--yellow); box-shadow: 0 14px 32px rgba(226,155,34,.28); font-size: 2.2rem; transform: rotate(-5deg); }
.sprint-finish > p { color: var(--muted); }
.sprint-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.2rem 0; border: 1px solid var(--line); border-radius: 17px; }
.sprint-result-grid div { padding: 1rem; }
.sprint-result-grid div + div { border-left: 1px solid var(--line); }
.sprint-result-grid strong, .sprint-result-grid span { display: block; }
.sprint-result-grid strong { font-size: 1.7rem; }
.sprint-result-grid span { color: var(--muted); font-size: .75rem; }

.detective-launch { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.2rem; margin-top: 1.2rem; padding: 1.35rem; border: 1px solid #decf9d; border-radius: 25px; color: #2d281c; background: radial-gradient(circle at 82% 5%, rgba(255,255,255,.82), transparent 28%), repeating-linear-gradient(-7deg, rgba(94,73,30,.035) 0 1px, transparent 1px 8px), linear-gradient(135deg, #f8efcf, #eadba8); box-shadow: var(--shadow); }
.detective-launch::before { content: "TRÚNAÐARMÁL"; position: absolute; right: 16%; bottom: -1.1rem; color: rgba(96,55,31,.055); font: 900 5.5rem/1 Georgia, serif; transform: rotate(-6deg); white-space: nowrap; }
.detective-launch > * { position: relative; z-index: 1; }
.detective-seal { display: grid; place-items: center; width: 88px; height: 88px; border: 4px double #9c2f33; border-radius: 50%; color: #9c2f33; transform: rotate(-8deg); text-align: center; }
.detective-seal span, .detective-seal strong { display: block; line-height: 1; }
.detective-seal span { font-size: .62rem; letter-spacing: .13em; }
.detective-seal strong { max-width: 68px; margin-top: .2rem; font-size: .74rem; }
.detective-launch .eyebrow { color: #8b2e33; }
.detective-launch h2 { margin-bottom: .25rem; font-family: Georgia, serif; }
.detective-launch-copy > p:not(.eyebrow) { max-width: 680px; margin-bottom: .45rem; color: #665b42; }
.detective-focus { display: inline-flex; border-radius: 999px; padding: .3rem .65rem; color: #493e25; background: rgba(255,255,255,.62); font-size: .72rem; font-weight: 850; }
.detective-launch-stats { display: grid; grid-template-columns: repeat(2, minmax(92px, 1fr)); border: 1px solid rgba(91,71,31,.18); border-radius: 16px; background: rgba(255,255,255,.45); }
.detective-launch-stats div { padding: .7rem .8rem; text-align: center; }
.detective-launch-stats div + div { border-left: 1px solid rgba(91,71,31,.16); }
.detective-launch-stats strong, .detective-launch-stats span { display: block; }
.detective-launch-stats strong { color: #8b2e33; font-size: 1.5rem; }
.detective-launch-stats span { color: #665b42; font-size: .67rem; }
.detective-start-btn { min-height: 50px; border: 0; border-radius: 14px; padding: .8rem 1rem; color: #fff; background: #252a2e; box-shadow: 0 8px 20px rgba(45,40,28,.22); font-weight: 900; cursor: pointer; white-space: nowrap; }
.detective-start-btn:hover { background: #8b2e33; transform: translateY(-2px); }

.detective-shell { position: relative; overflow: hidden; width: min(1060px, 100%); min-height: 700px; margin: 1rem auto; padding: clamp(1rem, 3vw, 2.3rem); border-radius: 32px; color: #fff; background: radial-gradient(circle at 95% 0%, rgba(211,171,72,.24), transparent 27%), linear-gradient(145deg, #171a1c, #292f32 58%, #3a3028); box-shadow: var(--shadow); }
.detective-shell::before { content: "CASE 05  ·  EVIDENCE  ·  CONFIDENTIAL"; position: absolute; left: -2rem; bottom: 1rem; color: rgba(255,255,255,.035); font: 900 clamp(2rem, 6vw, 5rem)/1 Georgia, serif; transform: rotate(-4deg); white-space: nowrap; }
.detective-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.detective-live-stats { display: flex; gap: .5rem; }
.detective-live-stats span { min-width: 96px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; padding: .55rem .7rem; color: #d3cbbb; background: rgba(255,255,255,.06); font-size: .7rem; text-align: center; }
.detective-live-stats b { display: block; color: #f2d77d; font-size: 1.12rem; }
.evidence-strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; margin: 1rem 0; }
.evidence-dot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .55rem; min-height: 48px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; padding: .45rem .6rem; color: #9ba2a5; background: rgba(255,255,255,.045); }
.evidence-dot b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: rgba(255,255,255,.08); }
.evidence-dot small { font-size: .65rem; font-weight: 800; }
.evidence-dot.is-active { border-color: #f2d77d; color: #f2d77d; background: rgba(242,215,125,.1); }
.evidence-dot.is-solved { border-color: #61d2ae; color: #a8eed8; background: rgba(24,167,123,.15); }
.evidence-dot.is-solved b { color: #172b25; background: #61d2ae; }
.evidence-dot.is-revealed { border-color: #d6a65f; color: #f0cf9d; background: rgba(214,166,95,.12); }
.case-file, .detective-finish { position: relative; z-index: 1; overflow: hidden; border-radius: 10px 28px 28px 10px; padding: clamp(1.35rem, 4vw, 2.8rem); color: #2b2923; background: repeating-linear-gradient(0deg, rgba(94,73,30,.025) 0 1px, transparent 1px 31px), #fbf7e9; box-shadow: 0 24px 55px rgba(0,0,0,.34); }
.case-file::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 9px; background: repeating-linear-gradient(to bottom, #8b2e33 0 16px, #d8c795 16px 32px); }
.case-file-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; padding-bottom: .75rem; border-bottom: 2px solid #ded4b6; }
.case-file-top span { color: #786b4f; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.case-file-top strong { border-radius: 999px; padding: .3rem .65rem; color: #8b2e33; background: #f2e5c0; font-size: .7rem; }
.case-file h1 { font-family: Georgia, serif; }
.detective-brief { color: #615944; }
.detective-passage { min-height: 170px; margin: 1.1rem 0 .7rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid #dcd0ad; border-radius: 17px; color: #27251f; background: rgba(255,255,255,.66); font: 700 clamp(1.06rem, 2.2vw, 1.3rem)/1.95 Georgia, serif; white-space: pre-wrap; }
.detective-passage button { display: inline; margin: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 4px; padding: .05rem .08rem; color: inherit; background: transparent; font: inherit; line-height: inherit; cursor: crosshair; }
.detective-passage button:hover { border-bottom-color: #8b2e33; color: #8b2e33; background: #f6e6c0; }
.detective-passage button.is-cleared { color: #827a67; background: #e8e3d5; text-decoration: line-through; opacity: .72; }
.detective-passage button.is-found { border-bottom-color: #8b2e33; color: #8b2e33; background: #f2d7b5; box-shadow: 0 0 0 3px rgba(139,46,51,.12); }
.detective-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #786f5a; font-size: .74rem; }
.hint-btn { border: 1px solid #b8a675; border-radius: 11px; padding: .55rem .75rem; color: #554923; background: #fff8df; font-weight: 850; cursor: pointer; }
.hint-btn small { margin-left: .25rem; color: #8b2e33; }
.hint-btn:disabled { cursor: default; opacity: .62; }
.detective-clue, .detective-feedback { min-height: 70px; margin-top: .75rem; padding: .8rem 1rem; border-radius: 13px; }
.detective-clue { min-height: 0; border: 1px dashed #b99e55; color: #604e1e; background: #fff6d5; }
.detective-feedback { color: #625b4a; background: rgba(255,255,255,.62); }
.detective-feedback.good { color: #087356; background: #e5f5e9; }
.detective-feedback.try { color: #7a4b08; background: #fff0c8; }
.detective-feedback.reveal { color: #8b2e33; background: #f8dfdc; }
.correction-panel { margin-top: .9rem; padding: 1rem; border: 2px solid #8b2e33; border-radius: 15px; background: #fff; }
.correction-panel label { display: block; margin-bottom: .5rem; color: #574e3c; font-size: .78rem; font-weight: 900; }
.correction-row { display: grid; grid-template-columns: auto auto minmax(160px, 1fr) auto; align-items: center; gap: .65rem; }
.correction-row > span:first-child { border-radius: 9px; padding: .55rem .7rem; color: #8b2e33; background: #f8dfdc; font-weight: 900; text-decoration: line-through; }
.correction-row input { min-height: 50px; border-color: #b9aa7e; font-size: 1.05rem; font-weight: 850; }
.correction-row button { min-height: 50px; border: 0; border-radius: 11px; padding: .7rem .9rem; color: #fff; background: #8b2e33; font-weight: 900; cursor: pointer; }
.correction-row button:disabled { opacity: .5; }
.detective-next { display: block; margin: 1rem 0 0 auto; }
.detective-next[hidden] { display: none; }
.detective-finish { text-align: center; }
.detective-medal { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 1rem; border: 4px double #8b2e33; border-radius: 50%; color: #8b2e33; background: #f5e7bc; font-size: 2rem; transform: rotate(-6deg); }
.detective-finish > p:not(.eyebrow) { color: #655d4c; }
.detective-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.2rem 0; border: 1px solid #d9cfb3; border-radius: 16px; background: rgba(255,255,255,.58); }
.detective-result-grid div { padding: 1rem; }
.detective-result-grid div + div { border-left: 1px solid #d9cfb3; }
.detective-result-grid strong, .detective-result-grid span { display: block; }
.detective-result-grid strong { color: #8b2e33; font-size: 1.65rem; }
.detective-result-grid span { color: #6b624e; font-size: .73rem; }
.evidence-report { margin: 1rem 0; padding: 1rem; border: 1px dashed #bbaa7d; border-radius: 15px; text-align: left; }
.evidence-report h2 { font-family: Georgia, serif; }
.evidence-report > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.evidence-report span { display: grid; grid-template-columns: auto 1fr; gap: .15rem .4rem; padding: .6rem; border-radius: 11px; color: #5b513c; background: #eee8d8; font-weight: 850; }
.evidence-report span.is-solved { color: #087356; background: #e5f5e9; }
.evidence-report span.is-revealed { color: #8b2e33; background: #f8dfdc; }
.evidence-report span small { grid-column: 1 / -1; color: #746b57; font-size: .62rem; font-weight: 700; }

.daily-session { width: min(780px, 100%); margin: 1rem auto; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; padding: clamp(1.2rem, 4vw, 2.6rem); background: #fff; box-shadow: var(--shadow); }
.daily-session-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.daily-streak { text-align: right; }
.daily-streak strong, .daily-streak span { display: block; }
.daily-streak strong { color: var(--purple); font-size: 1.8rem; }
.daily-streak span { color: var(--muted); font-size: .72rem; }
.daily-session-progress { overflow: hidden; height: 9px; margin: 1rem 0 2rem; border-radius: 9px; background: #e8ecf4; }
.daily-session-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--purple), var(--green)); transition: width .3s ease; }
.daily-prompt { min-height: 72px; padding: 1rem; border-left: 5px solid var(--purple); border-radius: 0 15px 15px 0; background: var(--purple-soft); font: 700 clamp(1.08rem, 2.5vw, 1.35rem)/1.6 Georgia, serif; }
.daily-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1.2rem 0; }
.daily-options button { border: 2px solid var(--line); border-radius: 16px; padding: 1rem; background: #fff; font-size: 1.08rem; font-weight: 900; cursor: pointer; }
.daily-options button:hover { border-color: var(--blue); background: var(--blue-soft); }
.daily-options button.is-right { border-color: var(--green); color: #087356; background: var(--green-soft); }
.daily-options button.is-wrong { border-color: var(--red); color: #9d2944; background: var(--red-soft); }
.daily-feedback { min-height: 78px; padding: .9rem 1rem; border-radius: 14px; color: var(--muted); background: #f5f7fb; }
.daily-feedback.good { color: #087356; background: var(--green-soft); }
.daily-feedback.try { color: #91344c; background: var(--red-soft); }
.daily-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--muted); }
.daily-finish { padding: 2rem 0 .5rem; text-align: center; }
.daily-medal { display: grid; place-items: center; width: 90px; height: 90px; margin: 0 auto 1rem; border-radius: 28px; color: var(--navy); background: var(--yellow); box-shadow: 0 14px 30px rgba(226,155,34,.25); font-size: 2rem; transform: rotate(-5deg); }

.collection-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; min-height: 250px; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 30px; color: #fff; background: radial-gradient(circle at 75% 0%, rgba(255,212,90,.38), transparent 30%), linear-gradient(135deg, #075c4c, #159474 58%, #233f78); box-shadow: var(--shadow); }
.collection-hero::after { content: "y  nn  orð  hv"; position: absolute; right: -1rem; top: -.6rem; color: rgba(255,255,255,.07); font: 900 clamp(3rem, 9vw, 8rem)/1 Georgia, serif; transform: rotate(-5deg); white-space: nowrap; }
.collection-hero > * { position: relative; z-index: 1; }
.collection-hero p:last-child { max-width: 650px; margin-bottom: 0; color: #d6f3e9; }
.garden-summary { display: grid; grid-template-columns: repeat(2, minmax(105px, 1fr)); min-width: 250px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(0,0,0,.13); }
.garden-summary div { padding: 1rem; text-align: center; }
.garden-summary div + div { border-left: 1px solid rgba(255,255,255,.18); }
.garden-summary strong, .garden-summary span { display: block; }
.garden-summary strong { font-size: 2rem; }
.garden-summary span { color: #caece1; font-size: .75rem; }
.collection-toolbar { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0; }
.collection-toolbar button { border: 1px solid var(--line); border-radius: 999px; padding: .5rem .8rem; background: #fff; font-weight: 800; cursor: pointer; }
.collection-toolbar button.is-selected { border-color: var(--green); color: #087356; background: var(--green-soft); }
.word-garden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.word-card { --growth: var(--amber); position: relative; overflow: hidden; min-height: 185px; border: 1px solid var(--line); border-radius: 20px; padding: 1rem; background: #fff; box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; }
.word-card::after { content: attr(data-symbol); position: absolute; right: -8px; bottom: -28px; color: var(--growth); font: 900 6rem/1 Georgia, serif; opacity: .12; transform: rotate(-9deg); }
.word-card:hover { border-color: var(--growth); transform: translateY(-2px); }
.growth-pill { display: inline-flex; border-radius: 999px; padding: .28rem .55rem; color: #735000; background: var(--yellow-soft); font-size: .68rem; font-weight: 900; }
.word-card.is-sprout { --growth: var(--green); }
.word-card.is-sprout .growth-pill { color: #087356; background: var(--green-soft); }
.word-card.is-bloom { --growth: var(--purple); }
.word-card.is-bloom .growth-pill { color: #5f3cba; background: var(--purple-soft); }
.word-card h2 { position: relative; z-index: 1; margin: 1rem 0 .4rem; font: 900 1.55rem/1.1 Georgia, serif; }
.word-card p, .word-card small { position: relative; z-index: 1; display: block; margin-bottom: 0; color: var(--muted); }
.word-card p { font-size: .78rem; }
.word-card small { margin-top: .55rem; }
.word-detail-grid { display: grid; gap: .7rem; margin-bottom: 1rem; }
.word-detail-grid div { padding: .8rem; border-radius: 13px; background: #f5f7fb; }
.word-detail-grid strong, .word-detail-grid span { display: block; }
.word-detail-grid span { margin-top: .2rem; color: var(--muted); }

.master-finale { width: min(820px, 100%); margin: 1rem auto; padding: clamp(1.5rem, 5vw, 3.5rem); border: 1px solid #ddd3ff; border-radius: 32px; background: linear-gradient(145deg, #fff, #f5f1ff); box-shadow: var(--shadow); text-align: center; }
.master-crown { display: grid; place-items: center; width: 86px; height: 86px; margin: 0 auto 1.2rem; border-radius: 27px; color: var(--navy); background: var(--yellow); box-shadow: 0 12px 28px rgba(226,155,34,.25); font-size: 2rem; transform: rotate(-5deg); }
.master-finale > p:not(.eyebrow) { max-width: 650px; margin: 0 auto 1.2rem; color: var(--muted); }
.master-finale label { display: block; margin-bottom: .4rem; font-weight: 850; text-align: left; }
.master-finale textarea { font: 1.15rem/1.65 Georgia, serif; }
.master-sentence-feedback { margin-top: .7rem; padding: .8rem; border-radius: 13px; color: var(--muted); background: #fff; text-align: left; }
.master-sentence-feedback.good { color: #087356; background: var(--green-soft); }
.master-sentence-feedback.try { color: #8b3349; background: var(--red-soft); }
.master-award { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin-top: 1.5rem; padding: 1rem; border: 2px solid #e9c653; border-radius: 18px; background: var(--yellow-soft); text-align: left; }
.master-award > span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: #fff; background: var(--purple); font: 900 2rem/1 Georgia, serif; }
.master-award h2, .master-award p { margin-bottom: .15rem; }
.master-award p { color: var(--muted); }

.teacher-suggestion-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .65rem; }
.selectable-word { display: inline-flex; align-items: center; gap: .28rem; }
.selectable-word small { border-radius: 999px; padding: .08rem .28rem; color: #fff; background: var(--blue); font-size: .58rem; }
.selectable-word.is-active { outline: 3px solid var(--yellow); outline-offset: 1px; }
.active-word-status { margin: .2rem 0 0; color: #4658c6; font-size: .8rem; font-weight: 750; }
.teacher-review { margin-top: 1.2rem; padding: 1rem; border: 1px solid #d8d0ff; border-radius: 18px; background: var(--purple-soft); }
.teacher-review h2 { font-size: 1.1rem; }
.teacher-review-passage { padding: 1rem; border-radius: 13px; background: #fff; font: 1.02rem/1.9 Georgia, serif; }
.teacher-review-passage mark { border-radius: 5px; padding: .08rem .28rem; color: #4f38ac; background: #e5ddff; }
.teacher-review-rules { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0; }
.teacher-review-rules span { border-radius: 999px; padding: .3rem .55rem; color: #583ab3; background: #fff; font-size: .7rem; font-weight: 850; }
.teacher-version-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.teacher-version { padding: .8rem; border-radius: 14px; background: #fff; }
.teacher-version strong, .teacher-version small { display: block; }
.teacher-version small { min-height: 38px; margin: .25rem 0 .65rem; color: var(--muted); }
.teacher-version-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.teacher-version-actions button { flex: 1; padding: .55rem; font-size: .75rem; }
.library-card.is-master { border-color: #d8c36e; background: linear-gradient(145deg, #fff, #fff9df); }
.library-card.is-locked { opacity: .65; }
.library-card.is-locked .card-action button { cursor: not-allowed; filter: grayscale(.5); }
.master-pill { display: inline-flex; border-radius: 999px; padding: .28rem .55rem; color: #674b00; background: var(--yellow); font-size: .68rem; font-weight: 900; }
.card-badges { display: flex; align-items: center; gap: .35rem; }
.new-pill { display: inline-flex; border-radius: 999px; padding: .28rem .52rem; color: #075f49; background: #baf4e1; font-size: .68rem; font-weight: 900; }

body.large-text { --body-size: 1.14rem; }
body.readable-font { font-family: Arial, Verdana, sans-serif; letter-spacing: .025em; }
body.readable-font .passage, body.readable-font .full-write textarea { font-family: Arial, Verdana, sans-serif; letter-spacing: .035em; }
body.high-contrast { --ink: #000; --muted: #354055; --line: #8b98ad; --canvas: #fff; }
body.high-contrast .panel-card, body.high-contrast .exercise-card, body.high-contrast .feedback-panel, body.high-contrast .library-card { border-width: 2px; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { order: 3; grid-column: 1 / -1; justify-content: center; overflow-x: auto; }
  .hero-copy { width: 88%; }
  .mode-grid { grid-template-columns: repeat(2, 1fr); }
  .exercise-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-summary { grid-template-columns: repeat(2, 1fr); }
  .exercise-layout, .teacher-layout { grid-template-columns: 1fr; }
  .feedback-panel, .teacher-help { position: static; }
  .feedback-panel { display: grid; grid-template-columns: 1fr minmax(190px, .55fr); gap: 1rem; }
  .attempt-meter { margin-top: 0; padding: 0 0 0 1rem; border-top: 0; border-left: 1px solid var(--line); }
  .secret-card { position: relative; right: auto; top: auto; width: min(420px, 100%); margin-top: 1rem; }
  .zone-map { grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
  .zone-map::before { display: none; }
  .zone-card:nth-child(even) { margin-top: 0; }
  .word-garden { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sprint-launch { grid-template-columns: auto 1fr auto; }
  .sprint-start-btn { grid-column: 2 / -1; justify-self: start; }
  .detective-launch { grid-template-columns: auto 1fr auto; }
  .detective-start-btn { grid-column: 2 / -1; justify-self: start; }
  .evidence-report > div { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .site-header { position: static; padding: .7rem; }
  .brand strong { font-size: .86rem; }
  .header-actions { gap: .25rem; }
  .main-nav { justify-content: flex-start; }
  .nav-btn { flex: 0 0 auto; padding: .58rem .72rem; }
  .view { padding: .8rem; }
  .hero-shell { min-height: 0; padding: 1.25rem; border-radius: 24px; }
  .hero-copy { width: 100%; }
  .hero-copy h1 { font-size: clamp(2.25rem, 11vw, 3.4rem); }
  .letter-sky span { opacity: .35; }
  .letter-sky span:nth-child(-n+3) { display: none; }
  .quick-start { padding: .45rem; }
  .step-block { grid-template-columns: 32px 1fr; padding: .75rem .45rem; }
  .segmented, .mode-grid { grid-template-columns: 1fr; }
  .segmented button { text-align: center; }
  .start-row { align-items: stretch; flex-direction: column; }
  .primary-btn--large { width: 100%; }
  .home-lower { grid-template-columns: 1fr; }
  .daily-card { grid-template-columns: auto 1fr; }
  .daily-card .secondary-btn { grid-column: 1 / -1; }
  .page-head { align-items: stretch; flex-direction: column; gap: .8rem; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: 1 / -1; }
  .exercise-library { grid-template-columns: 1fr; }
  .exercise-topbar { grid-template-columns: auto 1fr; }
  .live-score { grid-column: 1 / -1; justify-content: flex-end; }
  .exercise-heading { flex-direction: column; }
  .exercise-actions { width: 100%; }
  .exercise-actions button { flex: 1; }
  .passage { font-size: 1.22rem; line-height: 2.25; }
  .feedback-panel { display: block; }
  .attempt-meter { margin-top: 1rem; padding: 1rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .exercise-footer { flex-direction: column-reverse; }
  .exercise-footer button { width: 100%; }
  .result-grid { grid-template-columns: 1fr; }
  .result-grid div + div { border-top: 1px solid var(--line); border-left: 0; }
  .progress-summary, .progress-columns { grid-template-columns: 1fr; }
  .big-stat { min-height: 145px; }
  .rule-bar-row { grid-template-columns: 105px 1fr 42px; }
  .teacher-controls { grid-template-columns: 1fr; }
  .builder-actions { flex-direction: column; }
  .challenge-options { grid-template-columns: 1fr; }
  .rulelab-head { align-items: stretch; flex-direction: column; gap: 1rem; }
  .rulelab-score { grid-template-columns: auto auto; justify-content: center; gap: .55rem; min-height: 66px; }
  .rulelab-options { grid-template-columns: 1fr; }
  .rulelab-option { min-height: 0; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .site-footer a { margin: 0 1rem 0 0; }
  .expedition-hero { min-height: 0; padding: 1.25rem; border-radius: 24px; }
  .expedition-copy h1 { font-size: clamp(2.7rem, 15vw, 4.5rem); }
  .zone-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .zone-card { min-height: 245px; }
  .home-lower--v2, .quick-practice-grid { grid-template-columns: 1fr; }
  .quick-practice-head { flex-direction: column; }
  .quick-practice-head .smart-note { max-width: none; }
  .daily-options { grid-template-columns: 1fr; }
  .collection-hero { align-items: stretch; flex-direction: column; }
  .garden-summary { min-width: 0; }
  .word-garden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-award { grid-template-columns: auto 1fr; }
  .master-award .primary-btn { grid-column: 1 / -1; }
  .teacher-version-grid { grid-template-columns: 1fr; }
  .sprint-launch { grid-template-columns: auto 1fr; }
  .sprint-launch-stats { min-width: 0; }
  .sprint-start-btn { grid-column: 1 / -1; justify-self: stretch; }
  .sprint-head { align-items: stretch; flex-direction: column; }
  .sprint-live-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .sprint-live-stats span { min-width: 0; }
  .detective-launch { grid-template-columns: auto 1fr; }
  .detective-launch-stats { min-width: 0; }
  .detective-start-btn { grid-column: 1 / -1; justify-self: stretch; }
  .detective-head { align-items: stretch; flex-direction: column; }
  .detective-live-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .detective-live-stats span { min-width: 0; }
  .evidence-strip { grid-template-columns: repeat(5, minmax(54px, 1fr)); overflow-x: auto; }
  .evidence-dot { grid-template-columns: 1fr; justify-items: center; gap: .2rem; text-align: center; }
  .correction-row { grid-template-columns: auto auto 1fr; }
  .correction-row button { grid-column: 1 / -1; }
  .evidence-report > div { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 470px) {
  .brand small { display: none; }
  .brand-mark { width: 38px; height: 38px; }
  .icon-btn { width: 38px; height: 38px; }
  .filter-bar { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .stat-strip strong { font-size: 1.35rem; }
  .rule-bar-row { grid-template-columns: 1fr 45px; }
  .rule-bar-row > div { grid-column: 1 / -1; grid-row: 2; }
  .rule-bar-row b { grid-column: 2; grid-row: 1; }
  .zone-map, .word-garden { grid-template-columns: 1fr; }
  .zone-card { min-height: 0; }
  .secret-card { width: 100%; }
  .teacher-suggestion-bar { align-items: stretch; flex-direction: column; }
  .sprint-launch { grid-template-columns: 1fr; text-align: center; }
  .sprint-bolt { margin: 0 auto; }
  .sprint-launch-stats, .sprint-start-btn { grid-column: auto; width: 100%; }
  .sprint-input-row { grid-template-columns: 1fr; }
  .sprint-result-grid { grid-template-columns: 1fr; }
  .sprint-result-grid div + div { border-top: 1px solid var(--line); border-left: 0; }
  .detective-launch { grid-template-columns: 1fr; text-align: center; }
  .detective-seal { margin: 0 auto; }
  .detective-launch-stats, .detective-start-btn { grid-column: auto; width: 100%; }
  .detective-live-stats { grid-template-columns: 1fr; }
  .evidence-strip { grid-template-columns: repeat(5, 68px); }
  .case-file { padding: 1.15rem; }
  .case-file-top { align-items: flex-start; flex-direction: column; }
  .detective-toolbar { align-items: stretch; flex-direction: column; }
  .correction-row { grid-template-columns: 1fr; }
  .correction-row > span:nth-child(2) { display: none; }
  .detective-result-grid, .evidence-report > div { grid-template-columns: 1fr; }
  .detective-result-grid div + div { border-top: 1px solid #d9cfb3; border-left: 0; }
}

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

@media print {
  body { background: #fff; }
  .site-header, .site-footer, .page-head .secondary-btn, .complete-actions, .exercise-topbar, .exercise-actions, .exercise-footer, .teacher-help, .toast, .word-bank { display: none !important; }
  .view { display: none !important; max-width: none; padding: 0; }
  #view-progress.is-active, #view-complete.is-active { display: block !important; }
  .panel-card, .complete-card, .big-stat { box-shadow: none; break-inside: avoid; }
  .complete-card { width: 100%; border: 0; }
  .progress-summary { grid-template-columns: repeat(4, 1fr); }
}