:root {
  color-scheme: light;
  --glenn-accent: #b82362;
  --glenn-ink: #332630;
  --glenn-muted: #76626e;
  --glenn-background: #fffaf8;
  --glenn-rose: #f9e8ef;
  --glenn-border: #eddee5;
  --glenn-surface: #ffffff;
  --glenn-hero: #f9e9f0;
  --glenn-hero-border: #f0d7e2;
  --glenn-goal: #f6f2e9;
  --glenn-goal-border: #e8e2d5;
  --glenn-symbol: #fff9fc;
  --glenn-badge-border: #dbbbc9;
  --glenn-badge-ink: #79445a;
  --glenn-button: #b82362;
  --glenn-button-hover: #95194e;
  --glenn-on-button: #ffffff;
  --glenn-outline: #dab8c7;
  --glenn-sun: #a26a12;
  --glenn-shadow: rgba(51, 38, 48, 0.0823529412);
  --glenn-field-border: #a98e9c;
  --glenn-audio-border: #e7c4d4;
  --glenn-tip: #f6efe2;
  --glenn-tip-border: #e6dac4;
  --glenn-option-border: #a98e9c;
  --glenn-feedback: #f2f6ed;
  --glenn-feedback-border: #cbd7bc;
  --glenn-success: #3e5e2c;
  --glenn-notice-border: #b3535e;
  --glenn-notice: #fff0f1;
  --glenn-notice-ink: #7a2230;
}

:root[data-theme=dark] {
  color-scheme: dark;
  --glenn-accent: #f396be;
  --glenn-ink: #f5eaf0;
  --glenn-muted: #c5afbd;
  --glenn-background: #19151b;
  --glenn-rose: #3a2331;
  --glenn-border: #493643;
  --glenn-surface: #241d27;
  --glenn-hero: #33212e;
  --glenn-hero-border: #684051;
  --glenn-goal: #2c2822;
  --glenn-goal-border: #554938;
  --glenn-symbol: #452b3b;
  --glenn-badge-border: #805366;
  --glenn-badge-ink: #f3b2ce;
  --glenn-button: #f396be;
  --glenn-button-hover: #ffb4d5;
  --glenn-on-button: #321324;
  --glenn-outline: #956077;
  --glenn-sun: #e4bb71;
  --glenn-shadow: rgba(0, 0, 0, 0.2509803922);
  --glenn-field-border: #a18496;
  --glenn-audio-border: #9b657e;
  --glenn-tip: #302a21;
  --glenn-tip-border: #726043;
  --glenn-option-border: #a18496;
  --glenn-feedback: #232e24;
  --glenn-feedback-border: #617e57;
  --glenn-success: #b3d69b;
  --glenn-notice-border: #c77f8c;
  --glenn-notice: #3c222d;
  --glenn-notice-ink: #ffc0cc;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme=system] {
    color-scheme: dark;
    --glenn-accent: #f396be;
    --glenn-ink: #f5eaf0;
    --glenn-muted: #c5afbd;
    --glenn-background: #19151b;
    --glenn-rose: #3a2331;
    --glenn-border: #493643;
    --glenn-surface: #241d27;
    --glenn-hero: #33212e;
    --glenn-hero-border: #684051;
    --glenn-goal: #2c2822;
    --glenn-goal-border: #554938;
    --glenn-symbol: #452b3b;
    --glenn-badge-border: #805366;
    --glenn-badge-ink: #f3b2ce;
    --glenn-button: #f396be;
    --glenn-button-hover: #ffb4d5;
    --glenn-on-button: #321324;
    --glenn-outline: #956077;
    --glenn-sun: #e4bb71;
    --glenn-shadow: rgba(0, 0, 0, 0.2509803922);
    --glenn-field-border: #a18496;
    --glenn-audio-border: #9b657e;
    --glenn-tip: #302a21;
    --glenn-tip-border: #726043;
    --glenn-option-border: #a18496;
    --glenn-feedback: #232e24;
    --glenn-feedback-border: #617e57;
    --glenn-success: #b3d69b;
    --glenn-notice-border: #c77f8c;
    --glenn-notice: #3c222d;
    --glenn-notice-ink: #ffc0cc;
  }
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-SemiBold.ttf") format("truetype");
  font-weight: 600 800;
  font-display: swap;
}
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  color: var(--glenn-ink);
  background: var(--glenn-background);
  font-family: "DM Sans", sans-serif;
  line-height: 1.65;
}

button, input, select, textarea {
  font: 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(--glenn-accent);
  outline-offset: 5px;
}

a {
  color: inherit;
}

button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.65;
  cursor: wait;
}

p {
  margin: 0 0 1rem;
}

h1, h2, h3 {
  line-height: 1.2;
  font-weight: 400;
  margin-top: 0;
}

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 52px);
}

.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 25px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.brand__icon {
  border-radius: 13px;
}

.brand__name {
  font-size: 30px;
  letter-spacing: -1.7px;
  font-weight: 600;
}

.brand__dot {
  color: var(--glenn-accent);
}

.header__caption {
  color: var(--glenn-muted);
  font-size: 10px;
  letter-spacing: 2.5px;
  flex: 1 1 190px;
  text-align: center;
}

.navigation {
  display: flex;
  gap: clamp(12px, 4vw, 40px);
  border-bottom: 1px solid var(--glenn-border);
}

.navigation__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--glenn-muted);
  padding: 16px 3px;
  min-height: 48px;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.navigation__link[aria-current=page] {
  color: var(--glenn-accent);
  border-color: var(--glenn-accent);
}

.main {
  min-height: 65vh;
  padding: 46px 0 60px;
}
.main:focus {
  outline: none;
}

.intro {
  max-width: 710px;
  margin-bottom: 34px;
}

.eyebrow {
  color: var(--glenn-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  margin: 0 0 14px;
}

.intro__title {
  font-size: clamp(36px, 5.3vw, 60px);
  letter-spacing: -2px;
  line-height: 1.09;
  margin-bottom: 20px;
}

.intro__description {
  font-size: 17px;
  color: var(--glenn-muted);
  max-width: 550px;
}

.dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

.dashboard__aside {
  flex: 1 1 300px;
  display: grid;
  gap: 20px;
}

.card {
  background: var(--glenn-surface);
  border: 1px solid var(--glenn-border);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 34px);
}

.card--hero {
  flex: 1.35 1 360px;
  background: var(--glenn-hero);
  border-color: var(--glenn-hero-border);
  padding: clamp(28px, 4vw, 42px);
}

.card--goal {
  background: var(--glenn-goal);
  border-color: var(--glenn-goal-border);
}

.card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.card__category {
  font-size: 13px;
  color: var(--glenn-muted);
  margin-bottom: 8px;
}

.card__title {
  font-size: clamp(30px, 3.5vw, 42px);
  letter-spacing: -1.2px;
  margin-bottom: 14px;
}

.card__subtitle {
  font-size: 24px;
  letter-spacing: -0.6px;
  margin-bottom: 12px;
}

.card__description {
  color: var(--glenn-muted);
  margin-bottom: 20px;
}

.card__meta {
  color: var(--glenn-muted);
  font-size: 13px;
  margin-bottom: 24px;
}

.card__mini-icon {
  color: var(--glenn-accent);
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}

.lesson-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  color: var(--glenn-accent);
  background: var(--glenn-symbol);
  border-radius: 24px;
  font-size: 44px;
  margin-bottom: 24px;
}

.badge {
  display: inline-block;
  border: 1px solid var(--glenn-badge-border);
  border-radius: 40px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--glenn-badge-ink);
  font-weight: 600;
}

.badge--subtle {
  color: var(--glenn-muted);
  border-color: var(--glenn-border);
  font-weight: 400;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--glenn-button);
  border-radius: 12px;
  background: var(--glenn-button);
  color: var(--glenn-on-button);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.button:hover {
  background: var(--glenn-button-hover);
  color: var(--glenn-on-button);
}

.button--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--glenn-muted);
  padding: 10px 8px;
  font-size: 13px;
}
.button--quiet:hover {
  color: var(--glenn-accent);
  background: var(--glenn-rose);
}

.button--outline {
  background: transparent;
  color: var(--glenn-accent);
  border-color: var(--glenn-outline);
}
.button--outline:hover {
  background: var(--glenn-rose);
  color: var(--glenn-accent);
}

.button--soft {
  background: var(--glenn-rose);
  border-color: var(--glenn-rose);
  color: var(--glenn-accent);
}

.goal {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.4;
}

.goal__number {
  font-size: 55px;
  letter-spacing: -3px;
  line-height: 1;
}

.goal__sun {
  font-size: 42px;
  color: var(--glenn-sun);
  margin-left: auto;
}

.text-link {
  color: var(--glenn-accent);
  font-size: 14px;
  font-weight: 600;
  text-underline-offset: 4px;
  display: inline-block;
  padding: 10px 0;
}

.path-teaser {
  border-top: 1px solid var(--glenn-border);
  margin-top: 40px;
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  color: var(--glenn-muted);
}

.path-teaser__title {
  color: var(--glenn-ink);
  margin-bottom: 10px;
  font-size: 26px;
  letter-spacing: -0.7px;
}

.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  border-top: 1px solid var(--glenn-border);
  padding: 24px 0;
  color: var(--glenn-muted);
  font-size: 11px;
}

.switch {
  display: inline-flex;
  flex-wrap: wrap;
  border-radius: 14px;
  background: var(--glenn-rose);
  padding: 5px;
  margin-bottom: 12px;
}

.switch__button {
  border: 0;
  border-radius: 10px;
  padding: 12px 22px;
  min-height: 46px;
  background: transparent;
  color: var(--glenn-muted);
}

.switch__button--active {
  background: var(--glenn-surface);
  color: var(--glenn-accent);
  box-shadow: 0 1px 4px var(--glenn-shadow);
}

.topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
  margin: 24px 0;
}

.topic__number {
  color: var(--glenn-accent);
  font-size: 26px;
}

.lesson-link {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--glenn-border);
  padding: 17px 0;
  color: var(--glenn-ink);
}
.lesson-link:hover {
  color: var(--glenn-accent);
}

.lesson-link__title {
  display: block;
  font-weight: 600;
  font-size: 15px;
}

.lesson-link__meta {
  display: block;
  font-size: 12px;
  color: var(--glenn-muted);
  margin-top: 3px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
}

.stat__value {
  display: block;
  color: var(--glenn-accent);
  font-size: 42px;
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 1.5;
}

.section-title {
  font-size: 26px;
  margin: 38px 0 22px;
}

.history {
  background: var(--glenn-surface);
  border: 1px solid var(--glenn-border);
  border-radius: 24px;
  padding: 8px 24px;
}

.history__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  border-bottom: 1px solid var(--glenn-border);
  padding: 20px 0;
}
.history__row:last-child {
  border: 0;
}

.history__check {
  border-radius: 50%;
  padding: 7px 14px;
  background: var(--glenn-rose);
  color: var(--glenn-accent);
}

.history__title {
  font-size: 18px;
  margin: 0 0 4px;
}

.settings {
  max-width: 720px;
  margin-bottom: 24px;
}

.field__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.field__input {
  display: block;
  width: 100%;
  padding: 16px;
  color: var(--glenn-ink);
  background: var(--glenn-surface);
  border: 1px solid var(--glenn-field-border);
  border-radius: 12px;
  margin-bottom: 24px;
  resize: vertical;
}

.practice {
  max-width: 740px;
  margin: 0 auto;
}

.practice__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.practice__title {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -1px;
  margin-bottom: 26px;
}

.practice__progress {
  width: 100%;
  height: 8px;
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: var(--glenn-rose);
  accent-color: var(--glenn-accent);
  margin-bottom: 24px;
}
.practice__progress::-webkit-progress-bar {
  background: var(--glenn-rose);
  border-radius: 8px;
}
.practice__progress::-webkit-progress-value {
  background: var(--glenn-accent);
  border-radius: 8px;
}
.practice__progress::-moz-progress-bar {
  background: var(--glenn-accent);
  border-radius: 8px;
}

.practice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.phrases {
  background: var(--glenn-surface);
  border: 1px solid var(--glenn-border);
  border-radius: 24px;
  padding: 8px 24px;
  margin-bottom: 24px;
}

.phrase {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  border-bottom: 1px solid var(--glenn-border);
  padding: 20px 0;
}
.phrase:last-child {
  border: 0;
}

.phrase__english {
  font-size: 18px;
  margin-bottom: 4px;
}

.phrase__german {
  color: var(--glenn-muted);
  font-size: 14px;
  margin: 0;
}

.audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--glenn-rose);
  color: var(--glenn-accent);
  padding: 10px 16px;
  border: 1px solid var(--glenn-audio-border);
  border-radius: 12px;
  min-height: 46px;
  font-size: 13px;
  margin-bottom: 8px;
}

.audio--playing {
  background: var(--glenn-button);
  color: var(--glenn-on-button);
}

.tip {
  padding: 20px 24px;
  background: var(--glenn-tip);
  border: 1px solid var(--glenn-tip-border);
  border-radius: 16px;
  margin: 24px 0;
  font-size: 14px;
}

.options {
  border: 0;
  padding: 0;
  margin: 20px 0;
}

.option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--glenn-surface);
  border: 1px solid var(--glenn-option-border);
  border-radius: 14px;
  margin-bottom: 12px;
  cursor: pointer;
}
.option:has(input:checked) {
  background: var(--glenn-rose);
  border-color: var(--glenn-accent);
}
.option:has(input:focus-visible) {
  outline: 3px solid var(--glenn-accent);
  outline-offset: 3px;
}

.option__input {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  accent-color: var(--glenn-accent);
}

.option__text {
  flex: 1;
}

.option__number {
  color: var(--glenn-muted);
  font-size: 12px;
}

.feedback {
  background: var(--glenn-feedback);
  border: 1px solid var(--glenn-feedback-border);
  border-radius: 18px;
  padding: 24px;
  margin: 24px 0;
}

.feedback__title {
  font-size: 23px;
  color: var(--glenn-success);
  margin-bottom: 12px;
}

.completion {
  text-align: center;
  padding: 40px 24px;
}

.completion__symbol {
  display: block;
  color: var(--glenn-accent);
  font-size: 80px;
  line-height: 1.4;
}

.muted {
  color: var(--glenn-muted);
  font-size: 14px;
}

.notice {
  border: 1px solid var(--glenn-notice-border);
  background: var(--glenn-notice);
  color: var(--glenn-notice-ink);
  padding: 18px 22px;
  border-radius: 14px;
  margin-top: 24px;
}

.loading {
  padding: 60px 0;
  color: var(--glenn-muted);
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  background: var(--glenn-button);
  color: var(--glenn-on-button);
  padding: 12px;
  z-index: 2;
}
.skip:focus {
  top: 10px;
}

.header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.button--theme[aria-pressed=true] {
  background: var(--glenn-rose);
  color: var(--glenn-accent);
}

.offline-status {
  color: var(--glenn-muted);
  font-size: 13px;
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--glenn-border);
  border-radius: 12px;
  background: var(--glenn-surface);
}