@charset "UTF-8";
@font-face {
  font-family: "HanaMinA";
  src: url("../assets/fonts/HanaMinA.otf") format("opentype");
  font-display: swap; }
@font-face {
  font-family: "HanaMinB";
  src: url("../assets/fonts/HanaMinB.otf") format("opentype");
  font-display: swap; }
@font-face {
  font-family: "HanaMinExtA";
  src: url("../assets/fonts/HanaMinAX.otf") format("opentype");
  font-display: swap; }
@font-face {
  font-family: "HanaMinExtB";
  src: url("../assets/fonts/HanaMinBX.otf") format("opentype");
  font-display: swap; }
.highlight {
  margin-bottom: 15px; }

#speed-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e8e8e8;
  outline: none; }

#speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8B1A1A;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); }

#speed-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #e8e8e8; }

#speed-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8B1A1A;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); }

#speed-slider::-ms-track {
  height: 6px;
  border-color: transparent;
  color: transparent;
  background: transparent; }

#speed-slider::-ms-fill-lower,
#speed-slider::-ms-fill-upper {
  background: #e8e8e8;
  border-radius: 3px; }

#speed-slider::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8B1A1A;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); }

body {
  position: relative;
  padding-top: 100px; }

code br:last-child {
  display: none; }

.featurette-divider {
  margin: 80px 0;
  /* Space out the Bootstrap <hr> more */ }

.footer-featurette-divider {
  margin: 60px 0; }

.footer-separator {
  display: inline-block;
  height: 10px;
  margin: 0 15px;
  border-right: 1px solid #DDD; }

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
  padding-bottom: 40px;
  color: #5a5a5a; }

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20; }

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
  color: #EEE; }

.navbar-wrapper .navbar-inverse {
  background-color: #8B1A1A;
  border-color: #6d1414; }

.navbar-wrapper .navbar-inverse .navbar-nav > .active > a,
.navbar-wrapper .navbar-inverse .navbar-nav > .active > a:hover,
.navbar-wrapper .navbar-inverse .navbar-nav > .active > a:focus,
.navbar-wrapper .navbar-inverse .navbar-nav > li > a:hover,
.navbar-wrapper .navbar-inverse .navbar-nav > li > a:focus,
.navbar-wrapper .navbar-inverse .navbar-toggle:hover,
.navbar-wrapper .navbar-inverse .navbar-toggle:focus {
  background-color: #6d1414; }

.navbar-wrapper .navbar-inverse .navbar-toggle,
.navbar-wrapper .navbar-inverse .navbar-collapse {
  border-color: #6d1414; }

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0; }

.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px; }

.navbar-wrapper .navbar .container {
  width: auto; }

/**
 * Syntax highlighting styles
 */
.highlight {
  background: #fff; }
  .highlight .c {
    color: #998;
    font-style: italic; }
  .highlight .err {
    color: #a61717;
    background-color: #e3d2d2; }
  .highlight .k {
    font-weight: bold; }
  .highlight .o {
    font-weight: bold; }
  .highlight .cm {
    color: #998;
    font-style: italic; }
  .highlight .cp {
    color: #999;
    font-weight: bold; }
  .highlight .c1 {
    color: #998;
    font-style: italic; }
  .highlight .cs {
    color: #999;
    font-weight: bold;
    font-style: italic; }
  .highlight .gd {
    color: #000;
    background-color: #fdd; }
  .highlight .gd .x {
    color: #000;
    background-color: #faa; }
  .highlight .ge {
    font-style: italic; }
  .highlight .gr {
    color: #a00; }
  .highlight .gh {
    color: #999; }
  .highlight .gi {
    color: #000;
    background-color: #dfd; }
  .highlight .gi .x {
    color: #000;
    background-color: #afa; }
  .highlight .go {
    color: #888; }
  .highlight .gp {
    color: #555; }
  .highlight .gs {
    font-weight: bold; }
  .highlight .gu {
    color: #aaa; }
  .highlight .gt {
    color: #a00; }
  .highlight .kc {
    font-weight: bold; }
  .highlight .kd {
    font-weight: bold; }
  .highlight .kp {
    font-weight: bold; }
  .highlight .kr {
    font-weight: bold; }
  .highlight .kt {
    color: #458;
    font-weight: bold; }
  .highlight .m {
    color: #099; }
  .highlight .s {
    color: #d14; }
  .highlight .na {
    color: #008080; }
  .highlight .nb {
    color: #0086B3; }
  .highlight .nc {
    color: #458;
    font-weight: bold; }
  .highlight .no {
    color: #008080; }
  .highlight .ni {
    color: #800080; }
  .highlight .ne {
    color: #900;
    font-weight: bold; }
  .highlight .nf {
    color: #900;
    font-weight: bold; }
  .highlight .nn {
    color: #555; }
  .highlight .nt {
    color: #000080; }
  .highlight .nv {
    color: #008080; }
  .highlight .ow {
    font-weight: bold; }
  .highlight .w {
    color: #bbb; }
  .highlight .mf {
    color: #099; }
  .highlight .mh {
    color: #099; }
  .highlight .mi {
    color: #099; }
  .highlight .mo {
    color: #099; }
  .highlight .sb {
    color: #d14; }
  .highlight .sc {
    color: #d14; }
  .highlight .sd {
    color: #d14; }
  .highlight .s2 {
    color: #d14; }
  .highlight .se {
    color: #d14; }
  .highlight .sh {
    color: #d14; }
  .highlight .si {
    color: #d14; }
  .highlight .sx {
    color: #d14; }
  .highlight .sr {
    color: #009926; }
  .highlight .s1 {
    color: #d14; }
  .highlight .ss {
    color: #990073; }
  .highlight .bp {
    color: #999; }
  .highlight .vc {
    color: #008080; }
  .highlight .vg {
    color: #008080; }
  .highlight .vi {
    color: #008080; }
  .highlight .il {
    color: #099; }

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
.intro-inner {
  margin: 20px auto 0;
  max-width: 768px; }

.intro {
  text-align: center; }

.intro-actions {
  margin-top: 60px; }
  @media (max-width: 768px) {
    .intro-actions {
      display: flex; } }

.intro-btn {
  width: 300px;
  margin: 0 20px; }
  @media (max-width: 768px) {
    .intro-btn {
      margin: 0 10px; } }

/* Bump up size of carousel content */
.intro-inner p {
  margin: 20px 0;
  font-size: 21px;
  line-height: 1.4; }

/* MARKETING CONTENT
-------------------------------------------------- */
.sub-features {
  display: flex;
  justify-content: space-around; }
  @media (max-width: 768px) {
    .sub-features {
      flex-direction: column; } }

.sub-feature {
  width: 25%; }
  @media (max-width: 768px) {
    .sub-feature {
      width: 100%; } }
  .sub-feature h2 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 0; }

@media (max-width: 768px) {
  .middle-subfeature {
    margin: 20px 0; }

  .marketing-top-divider {
    margin-bottom: 40px; }

  .marketing-bottom-divider {
    margin-top: 40px; } }
.marketing {
  padding-bottom: 20px; }

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center; }

.marketing h2 {
  font-weight: normal; }

.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px; }

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px; }

  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px; }

  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0; }

  .featurette-heading {
    font-size: 50px; } }
@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px; } }
/* --------------------------------------- */
.char {
  display: inline-block;
  height: 200px;
  width: 200px;
  margin: 0 20px; }
  @media (max-width: 568px) {
    .char {
      width: 100px;
      height: 100px;
      margin: 0 10px; } }

.demo-target {
  background: white;
  clear: both;
  border: 1px solid #AAA;
  min-height: auto;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
  overflow-x: auto;
  width: fit-content;
  max-width: 100%;
  -webkit-overflow-scrolling: touch; }
  .demo-target::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 8px; }
  .demo-target::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
  .demo-target > div {
    display: inline-block !important;
    vertical-align: top; }

.demo {
  text-align: center; }

.practice-hero {
  align-items: center;
  display: flex;
  gap: 15px;
  margin: 0px 0 52px;
  padding: 1px 15px;
  text-align: left; }

.practice-hero-spine {
  align-self: stretch;
  background: #8B1A1A;
  border-radius: 4px;
  flex: 0 0 8px;
  min-height: 80px; }

.practice-hero h1 {
  color: #1C1208;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 10px; }

.practice-hero .practice-hero-description {
  color: #6B5B45;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  max-width: 610px; }

.practice-hero .practice-hero-eyebrow {
  color: #8B1A1A;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  margin: 0 0 9px;
  text-transform: uppercase; }

@media (max-width: 600px) {
  .practice-hero {
    gap: 14px;
    margin-bottom: 36px;
    padding: 12px 15px; }

  .practice-hero-spine {
    min-height: 66px; }

  .practice-hero h1 {
    font-size: 32px; }

  .practice-hero .practice-hero-description {
    font-size: 16px; } }
.demo-divider {
  margin: 40px 0; }

.demo-docs-link {
  display: inline-block;
  margin-top: 20px; }

.char-select-form {
  margin-bottom: 20px; }
  @media (max-width: 768px) {
    .char-select-form {
      text-align: center; } }

.beginner-chars-btn {
  margin-left: 10px; }
  @media (max-width: 768px) {
    .beginner-chars-btn {
      margin-left: 0;
      margin-top: 10px;
      display: inline-block; } }

.language-script-settings {
  background-color: #f5f5f5;
  padding: 10px 15px;
  border: 1px solid #ddd;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px; }
  .language-script-settings .settings-group {
    display: flex;
    gap: 12px;
    align-items: center;
    white-space: nowrap; }
    .language-script-settings .settings-group label {
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      font-weight: normal;
      margin: 0;
      cursor: pointer;
      white-space: nowrap; }
      .language-script-settings .settings-group label input {
        margin: 0 6px 0 0;
        cursor: pointer; }
    .language-script-settings .settings-group.speed-slider-group {
      gap: 8px; }
      .language-script-settings .settings-group.speed-slider-group label {
        font-size: 13px; }
      .language-script-settings .settings-group.speed-slider-group input[type="range"] {
        width: 120px; }
      .language-script-settings .settings-group.speed-slider-group small {
        min-width: 28px;
        text-align: center;
        color: #6c757d;
        font-size: 13px; }
  .language-script-settings .settings-divider {
    width: 1px;
    height: 30px;
    background-color: #ddd;
    align-self: stretch; }
  @media (max-width: 1000px) {
    .language-script-settings {
      flex-wrap: wrap;
      gap: 10px; }
      .language-script-settings .settings-divider {
        display: none; } }
  @media (max-width: 768px) {
    .language-script-settings {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px; }
      .language-script-settings .settings-group {
        justify-content: center; }
        .language-script-settings .settings-group.speed-slider-group input[type="range"] {
          flex: 1;
          min-width: 120px; } }

.demo-controls {
  margin: 10px auto;
  padding: 10px;
  max-width: 800px; }

.demo-controls .btn {
  margin: 5px; }

.demo-controls .btn-group {
  margin: 5px 0; }

.demo-controls .checkbox {
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  margin-right: 20px; }

.demo-controls .checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-right: 10px;
  flex-shrink: 0; }

.demo-controls .checkbox label {
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  margin: 0;
  display: flex;
  align-items: center; }

.xray-stroke-view {
  position: absolute;
  top: 5px;
  left: 5px;
  pointer-events: none; }

.xray-stroke-svg {
  display: block;
  height: auto;
  max-width: 100%; }

@media (max-width: 768px) {
  .demo-controls .checkbox {
    margin-right: 15px; }

  .demo-controls .checkbox input[type="checkbox"] {
    margin-right: 12px; }

  .demo-controls form {
    display: flex;
    flex-direction: column;
    align-items: center; }

  .demo-controls .btn-group {
    margin: 5px 0; }

  .demo-controls .btn {
    font-size: 14px;
    padding: 8px 12px; } }
.character-select {
  width: auto !important;
  display: inline-block !important; }

.pronunciation-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0; }

.pronunciation-description {
  margin-bottom: 8px; }

.pronunciation-actions[hidden] {
  display: none; }

.pronunciation-button-compact {
  appearance: none;
  border: 0;
  background: transparent;
  color: #337ab7;
  padding: 2px 4px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle; }

.pronunciation-button:hover:not(:disabled),
.pronunciation-button:focus:not(:disabled),
.pronunciation-button.is-speaking {
  color: #23527c; }

.pronunciation-button.is-speaking i {
  animation: pronunciation-pulse 0.8s ease-in-out infinite alternate; }

.pronunciation-button:disabled {
  cursor: not-allowed;
  opacity: 0.4; }

@keyframes pronunciation-pulse {
  from {
    transform: scale(1); }
  to {
    transform: scale(1.18); } }
.script-selector {
  display: inline-flex;
  align-items: center;
  margin-left: 15px;
  gap: 10px; }

.radio-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 6px 12px;
  border: 2px solid #ddd;
  background: white;
  transition: all 0.2s ease;
  user-select: none;
  font-size: 14px;
  font-weight: 500;
  margin: 0; }

.radio-label:hover {
  border-color: #337ab7;
  background: #f8f9fa; }

.radio-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none; }

.radio-label input[type="radio"]:checked + span {
  color: white; }

.radio-label:has(input[type="radio"]:checked) {
  background: #337ab7;
  border-color: #337ab7;
  color: white; }

.radio-label span {
  color: #333;
  transition: color 0.2s ease; }

@media (max-width: 768px) {
  .char-select-form {
    flex-direction: column;
    align-items: center; }

  .script-selector {
    margin-left: 0;
    margin-top: 10px; }

  .translation-display-position {
    margin-left: auto;
    margin-right: auto; } }
.char-select-form {
  margin: 0 0 30px;
  max-width: 620px;
  text-align: left; }

.char-select-form > label {
  color: #6B5B45;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 9px;
  text-transform: uppercase; }

.character-entry-row {
  display: flex;
  gap: 10px; }

.character-entry-row .character-select {
  flex: 1 1 auto;
  font-size: 26px;
  height: 62px;
  min-width: 0;
  padding: 10px 18px;
  width: 100% !important; }

.character-entry-row .beginner-chars-btn {
  flex: 0 0 auto;
  font-size: 16px;
  margin: 0;
  padding: 10px 18px; }

.practice-workspace {
  align-items: start;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(360px, 1.15fr) minmax(290px, 0.85fr);
  margin-bottom: 36px;
  text-align: left; }

.practice-stage,
.practice-sidebar {
  min-width: 0; }

.practice-instruction {
  color: #6B5B45;
  font-size: 14px;
  margin: 0 0 10px; }

.practice-stage .demo-target {
  background: #FAF3E3;
  border: 2px solid #C4A882;
  display: block;
  margin: 0;
  min-height: 260px;
  padding: 14px;
  width: 100%; }

.practice-playback {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px; }

.practice-playback .btn {
  min-height: 46px; }

.practice-playback-settings {
  background: #FAF3E3;
  border: 1px solid #C4A882;
  border-radius: 4px;
  margin-top: 12px;
  padding: 16px; }

.practice-secondary-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }

.practice-secondary-tools label {
  align-items: center;
  background: #FAF3E3;
  border: 1px solid #C4A882;
  border-radius: 6px;
  color: #6B5B45;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  min-height: 38px;
  padding: 8px 12px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }

.practice-secondary-tools label::before {
  align-items: center;
  border: 1px solid #C4A882;
  border-radius: 2px;
  content: "";
  display: inline-flex;
  flex: 0 0 15px;
  font-size: 11px;
  font-weight: 700;
  height: 15px;
  justify-content: center;
  line-height: 1;
  margin-right: 7px;
  width: 15px; }

.practice-secondary-tools input {
  opacity: 0;
  pointer-events: none;
  position: absolute; }

.practice-secondary-tools label:hover {
  border-color: #8B1A1A;
  color: #1C1208; }

.practice-secondary-tools label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.2);
  outline: none; }

.practice-secondary-tools label:has(input:checked) {
  background: #8B1A1A;
  border-color: #8B1A1A;
  color: #F2E8D0; }

.practice-secondary-tools label:has(input:checked)::before {
  background: #F2E8D0;
  border-color: #F2E8D0;
  color: #8B1A1A;
  content: "\2713"; }

.practice-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 29px; }

.practice-info-card,
.practice-sidebar .language-script-settings {
  background: #FAF3E3 !important;
  border: 1px solid #C4A882;
  border-radius: 6px;
  margin: 0;
  padding: 18px;
  width: 100%; }

.translation-display-position {
  max-width: none;
  text-align: left; }

.translation-display-position strong,
.translation-display-position span {
  display: block; }

.translation-display-position strong {
  color: #6B5B45;
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
  text-transform: uppercase; }

.translation-display-position span {
  color: #1C1208;
  font-size: 20px;
  line-height: 1.45; }

.practice-info-card h2 {
  color: #1C1208;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 14px; }

.practice-setting-group + .practice-setting-group {
  border-top: 1px solid #C4A882;
  margin-top: 16px;
  padding-top: 16px; }

.practice-setting-label {
  color: #6B5B45;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  text-transform: uppercase; }

.script-segment {
  background: #EBE0C6;
  border: 1px solid #C4A882;
  border-radius: 7px;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px; }

.script-segment label {
  border-radius: 5px;
  color: #6B5B45;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  padding: 9px 10px;
  text-align: center; }

.script-segment input,
.language-toggle-options input {
  opacity: 0;
  pointer-events: none;
  position: absolute; }

.script-segment label:has(input:checked) {
  background: #8B1A1A;
  color: #F2E8D0; }

.script-segment label:has(input:focus-visible),
.language-toggle-options label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.2);
  outline: none; }

.language-toggle-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px; }

.language-toggle-options label {
  background: #FAF3E3;
  border: 1px solid #C4A882;
  border-radius: 6px;
  color: #6B5B45;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  padding: 8px 11px; }

.language-toggle-options label:hover {
  border-color: #8B1A1A;
  color: #1C1208; }

.language-toggle-options label:has(input:checked) {
  background: #8B1A1A;
  border-color: #8B1A1A;
  color: #F2E8D0; }

.language-toggle-options label:has(input:checked)::before {
  content: "\2713";
  font-size: 12px;
  margin-right: 6px; }

.practice-pronunciation .pronunciation-actions {
  justify-content: flex-start;
  margin: 12px 0 0; }

.practice-sidebar .language-script-settings {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px; }

.practice-sidebar .language-script-settings .settings-group {
  flex-wrap: wrap;
  justify-content: flex-start; }

.practice-sidebar .language-script-settings .settings-divider {
  background: #C4A882;
  height: 1px;
  width: 100%; }

.practice-speed-control {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(100px, 1fr) auto; }

.practice-speed-control input[type="range"] {
  width: 100%; }

.practice-speed-control small {
  color: #6B5B45;
  min-width: 28px;
  text-align: right; }

.practice-utility-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px; }

.practice-pdf-description {
  font-size: 12px;
  line-height: 1.45;
  margin: 8px 0 0; }

@media (max-width: 900px) {
  .practice-workspace {
    grid-template-columns: 1fr; }

  .char-select-form {
    max-width: none; }

  .practice-sidebar {
    padding-top: 0; } }
@media (max-width: 520px) {
  .character-entry-row {
    align-items: stretch;
    flex-direction: column; }

  .character-entry-row .beginner-chars-btn {
    margin: 0; }

  .practice-playback {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.beginner-chars-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050; }
  .beginner-chars-modal .beginner-chars-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); }
  .beginner-chars-modal .beginner-chars-modal-content {
    position: relative;
    background: white;
    margin: 50px auto;
    max-width: 600px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1051; }
    @media (max-width: 768px) {
      .beginner-chars-modal .beginner-chars-modal-content {
        margin: 20px;
        max-height: calc(100vh - 40px); } }
  .beginner-chars-modal .beginner-chars-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa; }
    .beginner-chars-modal .beginner-chars-modal-header .close-modal-btn {
      background: none;
      border: none;
      font-size: 28px;
      line-height: 1;
      color: #999;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center; }
      .beginner-chars-modal .beginner-chars-modal-header .close-modal-btn:hover {
        color: #333; }
  .beginner-chars-modal .beginner-chars-modal-body {
    padding: 20px; }

.english-search-form {
  margin-bottom: 20px; }
  .english-search-form label {
    display: block;
    margin-bottom: 6px; }
  .english-search-form .character-entry-row {
    display: flex;
    gap: 8px; }
  .english-search-form input {
    min-width: 0; }
  .english-search-form [role="status"] {
    margin: 8px 0;
    font-size: 14px; }

.english-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto; }

.english-search-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  color: inherit;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 6px; }
  .english-search-result strong {
    font-size: 24px; }
  .english-search-result span {
    font-size: 14px;
    overflow-wrap: anywhere; }
  .english-search-result:hover, .english-search-result:focus-visible {
    background: #f0f7fb;
    outline: 2px solid #337ab7;
    outline-offset: -2px; }

.practice-syllables {
  margin-top: 16px; }
  .practice-syllables summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #C4A882;
    border-radius: 4px;
    color: #8B1A1A;
    cursor: pointer;
    font-weight: 600;
    list-style: none; }
    .practice-syllables summary::-webkit-details-marker {
      display: none; }
    .practice-syllables summary:hover {
      background: #F2E8D0; }
    .practice-syllables summary:focus-visible {
      outline: 2px solid #8B1A1A;
      outline-offset: 2px; }
  .practice-syllables .practice-syllable-chevron {
    flex-shrink: 0; }
  .practice-syllables[open] .practice-syllable-chevron {
    transform: rotate(90deg); }
  .practice-syllables > p {
    margin-top: 12px;
    font-size: 13px; }
  .practice-syllables[hidden] {
    display: none !important; }

.practice-syllable-list {
  display: grid;
  gap: 12px; }

.practice-syllable-card {
  min-width: 0;
  border-top: 1px solid #C4A882;
  padding-top: 10px; }
  .practice-syllable-card h3 {
    font-size: 24px;
    margin: 0 0 8px; }
  .practice-syllable-card p {
    margin: 8px 0;
    overflow-wrap: anywhere; }
  .practice-syllable-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0; }
  .practice-syllable-card dt {
    font-size: 12px;
    color: #6B5B45; }
  .practice-syllable-card dd {
    margin: 0;
    overflow-wrap: anywhere; }

.license-block {
  margin: 50px 0; }

.site-ad {
  clear: both;
  margin: 32px auto;
  max-width: 758px;
  width: 100%;
  text-align: center; }

.site-ad-label {
  color: #6B5B45;
  font-size: 11px;
  line-height: 16px;
  margin-bottom: 6px; }

.site-ad[hidden] {
  display: none !important; }

.site-ad--desktop-banner {
  display: none; }

.site-ad--desktop {
  display: none;
  max-width: 280px; }

@media (min-width: 901px) {
  .site-ad--desktop, .site-ad--desktop-banner {
    display: block; }

  .site-ad--mobile {
    display: none; } }
@media print {
  .site-ad {
    display: none; } }
.pronunciation-guide {
  max-width: 900px;
  padding-top: 36px;
  padding-bottom: 48px;
  line-height: 1.7; }
  .pronunciation-guide section {
    margin-top: 40px;
    scroll-margin-top: 140px; }
  .pronunciation-guide h1 {
    line-height: 1.15; }
  .pronunciation-guide h2 {
    line-height: 1.3; }
  .pronunciation-guide h3 {
    font-size: 21px;
    margin-top: 28px; }
  .pronunciation-guide li {
    margin-bottom: 10px; }

.pronunciation-guide-kicker {
  color: #8B1A1A;
  font-size: 13px;
  font-weight: 700; }

.pronunciation-guide [hidden] {
  display: none !important; }

.pronunciation-view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 24px 0; }
  .pronunciation-view-switch legend {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    border: 0; }
  .pronunciation-view-switch label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #C4A882;
    border-radius: 4px;
    background: #FAF3E3;
    cursor: pointer; }
  .pronunciation-view-switch label:has(input:checked) {
    border-color: #8B1A1A;
    color: #8B1A1A; }
  .pronunciation-view-switch label:focus-within {
    outline: 2px solid #8B1A1A;
    outline-offset: 3px; }
  .pronunciation-view-switch input {
    margin: 0;
    accent-color: #8B1A1A; }

.pronunciation-guide-pair:has(> [hidden]) {
  grid-template-columns: 1fr; }

.pronunciation-guide-jumps,
.pronunciation-guide-practice-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0; }
  .pronunciation-guide-jumps a,
  .pronunciation-guide-practice-links a {
    border: 1px solid #C4A882;
    border-radius: 4px;
    padding: 9px 14px;
    background: #FAF3E3; }

.pronunciation-guide-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; }

.pronunciation-guide-card,
.pronunciation-guide-note {
  padding: 20px;
  border: 1px solid #C4A882;
  border-radius: 4px;
  background: #FAF3E3; }

.pronunciation-guide-card h3 {
  margin-top: 0; }

.pronunciation-guide-card p:last-child {
  margin-bottom: 0; }

.pronunciation-tone-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0; }
  .pronunciation-tone-table caption {
    color: #6B5B45;
    font-size: 14px; }
  .pronunciation-tone-table th, .pronunciation-tone-table td {
    border-bottom: 1px solid #C4A882;
    padding: 14px 10px;
    text-align: left;
    vertical-align: middle; }
  .pronunciation-tone-table thead {
    background: #EBE0C6; }
  .pronunciation-tone-table tbody th {
    width: 16%; }
  .pronunciation-tone-table td {
    width: 42%; }
  .pronunciation-tone-table td a {
    display: inline-block;
    font-size: 21px; }
  .pronunciation-tone-table small {
    display: block;
    color: #6B5B45;
    font-size: 14px; }
  .pronunciation-tone-table td > span {
    display: block;
    font-size: 14px; }

.pronunciation-tone-curve {
  display: block;
  width: 90px;
  height: 59px;
  fill: none;
  stroke: #8B1A1A;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round; }
  .pronunciation-tone-curve .pronunciation-tone-axis {
    stroke: #C4A882;
    stroke-width: 1; }

.pronunciation-guide-source {
  color: #6B5B45;
  font-size: 14px; }

.pronunciation-reference {
  border: 1px solid #C4A882;
  border-radius: 4px;
  padding: 16px;
  margin: 20px 0;
  min-width: 0; }
  .pronunciation-reference summary {
    cursor: pointer;
    font-weight: 700;
    color: #8B1A1A;
    padding: 4px 0; }

.pronunciation-sound-table,
.pronunciation-glossary-table,
.pronunciation-spelling-table,
.pronunciation-finals-matrix {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px; }
  .pronunciation-sound-table caption,
  .pronunciation-glossary-table caption,
  .pronunciation-spelling-table caption,
  .pronunciation-finals-matrix caption {
    color: #6B5B45;
    font-size: 14px;
    text-align: left; }
  .pronunciation-sound-table th, .pronunciation-sound-table td,
  .pronunciation-glossary-table th,
  .pronunciation-glossary-table td,
  .pronunciation-spelling-table th,
  .pronunciation-spelling-table td,
  .pronunciation-finals-matrix th,
  .pronunciation-finals-matrix td {
    border-bottom: 1px solid #C4A882;
    padding: 12px 8px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere; }
  .pronunciation-sound-table thead,
  .pronunciation-glossary-table thead,
  .pronunciation-spelling-table thead,
  .pronunciation-finals-matrix thead {
    background: #EBE0C6; }

.pronunciation-sound-table {
  table-layout: fixed; }
  .pronunciation-sound-table th:first-child {
    width: 17%; }
  .pronunciation-sound-table th:nth-child(2) {
    width: 31%; }
  .pronunciation-sound-table small {
    display: block;
    font-size: 13px;
    color: #6B5B45; }
  .pronunciation-sound-table td a {
    display: inline-block;
    font-size: 18px; }
  .pronunciation-sound-table .pronunciation-button {
    margin-top: 8px; }

.pronunciation-spelling-table th {
  width: 32%; }

.pronunciation-table-scroll {
  max-width: 100%;
  overflow-x: auto; }

.pronunciation-finals-matrix {
  min-width: 640px; }
  .pronunciation-finals-matrix th, .pronunciation-finals-matrix td {
    text-align: center;
    white-space: nowrap; }
  .pronunciation-finals-matrix tbody th {
    background: #EBE0C6; }
  .pronunciation-finals-matrix sup {
    color: #8B1A1A; }

.tone-pair {
  margin: 32px 0; }

.tone-pair-character {
  font-size: 52px;
  line-height: 1.2; }

.tone-pair-listen {
  margin: 12px 0; }

.tone-pair-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0; }

.tone-pair-actions[hidden], .tone-pair-writer[hidden] {
  display: none; }

.tone-pair-writer {
  width: 220px;
  height: 220px;
  max-width: 100%;
  margin: 16px auto;
  border: 1px solid #C4A882;
  background: #F2E8D0;
  touch-action: none; }

.tone-pair-status {
  font-size: 14px;
  color: #6B5B45; }

.pronunciation-tone-table .pronunciation-button {
  margin-top: 8px; }

@media (max-width: 600px) {
  .pronunciation-guide {
    padding-top: 24px; }

  .pronunciation-guide-pair {
    grid-template-columns: 1fr; }

  .pronunciation-tone-table th, .pronunciation-tone-table td {
    padding: 12px 6px; }
  .pronunciation-tone-table td a {
    font-size: 18px; }

  .pronunciation-tone-curve {
    width: 72px;
    height: 47px; }

  .pronunciation-reference {
    padding: 10px; }

  .pronunciation-sound-table,
  .pronunciation-glossary-table,
  .pronunciation-spelling-table {
    font-size: 14px; }
    .pronunciation-sound-table th, .pronunciation-sound-table td,
    .pronunciation-glossary-table th,
    .pronunciation-glossary-table td,
    .pronunciation-spelling-table th,
    .pronunciation-spelling-table td {
      padding: 10px 5px; }

  .pronunciation-sound-table th:first-child {
    width: 19%; }
  .pronunciation-sound-table th:nth-child(2) {
    width: 34%; }
  .pronunciation-sound-table td a {
    font-size: 16px; } }
.tone-quiz {
  max-width: 800px; }

.tone-quiz.is-playing > header p, .tone-quiz.is-playing [data-quiz-language], .tone-quiz.is-playing [data-quiz-mode] {
  display: none; }
.tone-quiz.is-playing > header h1 {
  font-size: 28px; }
.tone-quiz.is-playing .tone-quiz-round {
  margin-top: 20px; }

.tone-quiz-round {
  position: relative;
  border: 1px solid #C4A882;
  border-radius: 4px;
  background: #FAF3E3;
  padding: 24px; }

.tone-quiz-progress {
  color: #6B5B45;
  font-size: 14px; }

.tone-quiz-listen {
  min-height: 48px;
  min-width: 160px; }

.tone-quiz-audio-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  max-width: 400px; }
  .tone-quiz-audio-controls .tone-quiz-listen {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere; }
  .tone-quiz-audio-controls label {
    min-width: 0;
    margin: 0;
    font-size: 13px; }
  .tone-quiz-audio-controls select {
    min-height: 48px;
    font-size: 16px; }

.tone-quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0; }

.tone-quiz-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px solid #C4A882;
  border-radius: 4px;
  color: #1C1208;
  background: #F2E8D0;
  font-size: 15px;
  cursor: pointer; }
  .tone-quiz-option strong {
    font-size: 18px; }
  .tone-quiz-option:disabled {
    cursor: default; }
  .tone-quiz-option:disabled:not(.is-correct):not(.is-wrong) {
    opacity: 0.6; }
  .tone-quiz-option:focus-visible {
    outline: 3px solid #8B1A1A;
    outline-offset: 3px; }
  .tone-quiz-option:hover:not(:disabled) {
    border-color: #8B1A1A; }
  .tone-quiz-option.is-correct {
    border-color: #287343;
    background: #edf7ee;
    color: #205e36; }
  .tone-quiz-option.is-wrong {
    border-color: #b23b31;
    background: #fff0ee;
    color: #8b1a1a; }
  .tone-quiz-option.is-correct::after {
    content: '✓'; }
  .tone-quiz-option.is-wrong::after {
    content: '✕'; }
  .tone-quiz-option.is-correct::after, .tone-quiz-option.is-wrong::after {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 18px;
    font-weight: 700; }
  .tone-quiz-option.is-correct .pronunciation-tone-curve {
    stroke: #287343; }

.tone-quiz-feedback {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 20px 0 12px;
  border-width: 2px;
  border-left-width: 6px; }
  .tone-quiz-feedback.is-correct {
    border-color: #287343;
    background: #edf7ee;
    color: #205e36; }
  .tone-quiz-feedback.is-wrong {
    border-color: #b23b31;
    background: #fff0ee;
    color: #8b1a1a; }
  .tone-quiz-feedback h3 {
    margin: 0 0 6px;
    color: inherit;
    font-size: 25px; }
  .tone-quiz-feedback p {
    margin: 0; }

.tone-quiz-feedback-icon {
  flex-shrink: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2; }

.tone-quiz-celebration {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1; }

.tone-quiz-confetti {
  position: absolute;
  top: -14px;
  left: var(--left);
  width: 7px;
  height: 11px;
  opacity: 0;
  background: var(--color);
  animation: tone-quiz-confetti-fall 1.4s ease-out var(--delay) forwards; }

@keyframes tone-quiz-confetti-fall {
  10% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    top: 100%;
    opacity: 0;
    transform: translateX(var(--drift)) rotate(400deg); } }
@media (prefers-reduced-motion: reduce) {
  .tone-quiz-confetti {
    display: none;
    animation: none; } }
.tone-quiz-answer-links {
  margin-top: 12px; }

.tone-quiz-round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px; }
  .tone-quiz-round-header .tone-quiz-progress {
    flex: 1;
    min-width: 0;
    margin: 0; }

.tone-quiz-reset {
  flex-shrink: 0;
  max-width: 45%;
  border: 1px solid #C4A882;
  border-radius: 4px;
  background: transparent;
  color: #6B5B45;
  padding: 8px 12px;
  min-height: 44px;
  font-size: 13px;
  cursor: pointer; }
  .tone-quiz-reset:hover {
    color: #1C1208;
    background: #F2E8D0; }
  .tone-quiz-reset:focus-visible {
    outline: 2px solid #8B1A1A;
    outline-offset: 3px; }

.tone-quiz-review {
  padding-left: 24px; }

.tone-quiz-audio-status {
  color: #8B1A1A; }

.tone-quiz-references {
  border: 1px solid #C4A882;
  border-radius: 4px;
  padding: 14px;
  margin: 18px 0;
  font-size: 14px;
  background: #EBE0C6; }
  .tone-quiz-references summary {
    display: list-item;
    cursor: pointer;
    color: #6B5B45;
    font-size: 15px;
    font-weight: 600; }
  .tone-quiz-references p:first-of-type {
    margin-top: 14px; }
  .tone-quiz-references p:last-of-type {
    margin-bottom: 10px; }

.tone-quiz-reference-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }
  .tone-quiz-reference-buttons .btn {
    flex: 1 1 120px;
    white-space: normal;
    min-height: 48px; }
  .tone-quiz-reference-buttons small {
    display: block; }

@media (max-width: 600px) {
  .tone-quiz {
    padding-top: 16px;
    line-height: 1.5; }
    .tone-quiz > header h1 {
      font-size: 28px; }
    .tone-quiz > header .lead {
      font-size: 16px; }
    .tone-quiz .pronunciation-view-switch {
      margin: 16px 0;
      gap: 6px; }
      .tone-quiz .pronunciation-view-switch legend {
        font-size: 14px;
        margin-bottom: 6px; }
      .tone-quiz .pronunciation-view-switch label {
        flex: 1;
        min-width: 0;
        padding: 8px;
        font-size: 13px; }
    .tone-quiz [data-quiz-intro] p {
      font-size: 14px; }
    .tone-quiz [data-quiz-intro] .pronunciation-guide-note {
      padding: 12px;
      font-size: 13px; }

  .tone-quiz.is-playing > header h1 {
    font-size: 22px;
    margin: 0 0 10px; }
  .tone-quiz.is-playing .tone-quiz-round {
    margin-top: 8px; }

  .tone-quiz-round {
    padding: 12px; }
    .tone-quiz-round > h2 {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0; }
    .tone-quiz-round [data-quiz-listening] {
      font-size: 13px;
      line-height: 1.4;
      margin: 8px 0; }
    .tone-quiz-round [data-quiz-keyboard] {
      display: none; }
    .tone-quiz-round [data-quiz-next] {
      min-height: 44px;
      max-width: 100%;
      white-space: normal; }

  .tone-quiz .tone-quiz-round {
    scroll-margin-top: 12px; }

  .tone-quiz-round-header {
    gap: 8px;
    margin-bottom: 8px; }
    .tone-quiz-round-header .tone-quiz-progress {
      font-size: 12px;
      line-height: 1.4; }

  .tone-quiz-options {
    gap: 8px;
    margin: 12px 0; }

  .tone-quiz-options[data-quiz-options="cantonese"]:has([data-tone="2"]:not([hidden])) {
    grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .tone-quiz-option {
    min-height: 92px;
    padding: 8px 6px;
    gap: 2px;
    font-size: 12px;
    line-height: 1.3; }
    .tone-quiz-option strong {
      font-size: 15px; }
    .tone-quiz-option .pronunciation-tone-curve {
      width: 56px;
      height: 36px; }

  .tone-quiz-feedback {
    padding: 10px;
    gap: 8px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.4; }
    .tone-quiz-feedback h3 {
      font-size: 20px;
      margin-bottom: 4px; }

  .tone-quiz-feedback-icon {
    font-size: 24px; }

  .tone-quiz-answer-links {
    margin-top: 8px;
    font-size: 13px; }

  .tone-quiz-references {
    padding: 10px;
    margin: 12px 0; } }
.tone-quiz-speaker {
  vertical-align: middle;
  margin-right: 4px; }

.tone-quiz-sound-row {
  display: flex;
  align-items: end;
  gap: 12px; }

.tone-quiz-character {
  flex-shrink: 0;
  font-size: 28px;
  line-height: 48px;
  color: #6B5B45; }

.tone-quiz-sound-row .tone-quiz-audio-controls {
  flex: 1 1 0;
  min-width: 0; }

.tutor-link-builder > div {
  margin-bottom: 18px; }
.tutor-link-builder label {
  display: block;
  margin-bottom: 6px; }
.tutor-link-builder small {
  display: block;
  color: #6B5B45;
  margin-top: 6px; }
.tutor-link-builder input, .tutor-link-builder select {
  min-height: 44px; }
.tutor-link-builder [aria-invalid="true"] {
  border-color: #8B1A1A; }

.tutor-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; }

.tutor-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px; }

.tutor-url-example {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word; }

.tutor-examples h3 {
  margin-top: 0; }

.home-tutor-link {
  margin-top: 16px; }

@media (max-width: 600px) {
  .tutor-selects {
    grid-template-columns: 1fr; } }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "PingFang TC", "PingFang HK", "Heiti SC", "Heiti TC", "Noto Sans", Helvetica, Arial, sans-serif;
  background-color: #F2E8D0; }

.components-line {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "PingFang TC", "PingFang HK", "Heiti SC", "Heiti TC", "Noto Sans", Helvetica, Arial, sans-serif; }

.components-line .components-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "PingFang TC", "PingFang HK", "Heiti SC", "Heiti TC", "Noto Sans", Helvetica, Arial, sans-serif; }

.components-line.components-heavy-font {
  font-family: "HanaMinExtA", "HanaMinExtB", "HanaMinA", "HanaMinB", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "PingFang TC", "PingFang HK", "Heiti SC", "Heiti TC", "Noto Sans", Helvetica, Arial, sans-serif; }

.component-glyph.component-glyph--supplementary {
  font-family: "HanaMinB", "HanaMinExtB", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "PingFang TC", "PingFang HK", "Heiti SC", "Heiti TC", "Noto Sans", Helvetica, Arial, sans-serif; }

.radical-line {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "PingFang TC", "PingFang HK", "Heiti SC", "Heiti TC", "Noto Sans", Helvetica, Arial, sans-serif; }

.char-unavailable {
  color: #828282;
  font-size: 12px;
  margin-top: 8px; }

.reference-list-page,
.character-reference {
  padding-top: 24px;
  padding-bottom: 40px; }

.reference-breadcrumb {
  color: #828282;
  font-size: 14px;
  margin-bottom: 16px; }

.reference-section {
  margin-top: 32px; }

.reference-table th,
.reference-table td {
  vertical-align: middle !important; }

.reference-table th[scope="row"] {
  width: 180px; }

.character-link {
  font-size: 24px;
  font-weight: 600; }

.character-stroke-widget {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 12px; }

.character-stroke-target {
  height: 220px;
  width: 220px; }

.character-tool-link {
  align-items: center;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  color: #1C1208;
  display: inline-flex;
  font-weight: 600;
  gap: 8px;
  line-height: 1.2;
  padding: 9px 14px;
  text-decoration: none; }

.idioms-page {
  color: #1C1208; }

.idioms-header {
  background: #f6f8f8;
  border-bottom: 1px solid #e1e6e6;
  padding: 36px 0 30px; }

.idioms-kicker {
  color: #637070;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: uppercase; }

.idioms-header h1 {
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 12px; }

.idioms-lede {
  color: #566161;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  max-width: 760px; }

.idioms-daily {
  background: #fff;
  border-bottom: 1px solid #e1e6e6;
  padding: 22px 0; }

.idioms-daily-card {
  align-items: stretch;
  background: #f9fbfb;
  border: 1px solid #dbe4e4;
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  padding: 18px; }

.idioms-daily-copy h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 8px; }

.idioms-daily-status {
  color: #5d6868;
  font-size: 14px;
  line-height: 1.45; }

.idioms-daily-content {
  min-width: 0; }

.idioms-daily-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px; }

.idioms-daily-hanzi-list {
  display: flex;
  flex-direction: column;
  gap: 6px; }

.idioms-daily-hanzi-row {
  align-items: baseline;
  color: #1C1208;
  display: grid;
  gap: 10px;
  grid-template-columns: 82px minmax(0, 1fr);
  text-decoration: none; }

.idioms-daily-hanzi {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  word-break: keep-all; }

.idioms-daily-hanzi-row:hover,
.idioms-daily-hanzi-row:focus {
  color: #8B1A1A;
  text-decoration: none; }

.idioms-daily-definitions {
  margin-bottom: 12px; }

.idioms-daily-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }

.idioms-daily-actions .idiom-practice-link {
  background: #2f6b61;
  border: 1px solid #2f6b61;
  border-radius: 6px;
  color: #fff;
  line-height: 1.25;
  margin-top: 0;
  min-height: 36px;
  padding: 8px 12px; }

.idioms-daily-actions .idiom-practice-link:hover,
.idioms-daily-actions .idiom-practice-link:focus {
  background: #255a51;
  border-color: #255a51;
  color: #fff;
  outline: none; }

.idioms-daily-more {
  background: #fff;
  border: 1px solid #b9cfca;
  border-radius: 6px;
  color: #2f6b61;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  min-height: 36px;
  padding: 8px 12px; }

.idioms-daily-more:hover,
.idioms-daily-more:focus {
  background: #edf5f3;
  border-color: #8bb6ae;
  color: #24584f;
  outline: none; }

.idioms-workspace {
  padding: 24px 0 48px; }

.idioms-toolbar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) minmax(190px, 260px);
  margin-bottom: 16px; }

.idioms-toolbar label {
  color: #4f5a5a;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  margin: 0; }

.idioms-toolbar input,
.idioms-toolbar select {
  background: #fff;
  border: 1px solid #cfd8d8;
  border-radius: 6px;
  color: #1C1208;
  font-size: 15px;
  font-weight: 400;
  height: 42px;
  padding: 8px 10px;
  width: 100%; }

.idioms-status {
  color: #647070;
  font-size: 14px;
  margin: 8px 0 18px; }

.idioms-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }

.idiom-card {
  background: #fff;
  border: 1px solid #dde4e4;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 246px;
  padding: 16px; }

.idiom-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px; }

.idioms-entry-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 20px; }

.idioms-language-label {
  background: #edf5f3;
  border: 1px solid #cfe0dc;
  border-radius: 999px;
  color: #31524b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 7px;
  white-space: nowrap; }

.idioms-category {
  color: #667272;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25; }

.idioms-category::before {
  color: #a2adad;
  content: "·";
  margin-right: 6px; }

.idioms-badge {
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 7px;
  white-space: nowrap; }

.idioms-badge-muted {
  background: #f5f1e8;
  border-color: #e2d6bd;
  color: #705b2f; }

.idiom-hanzi-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 10px; }

.idiom-hanzi-row {
  align-items: baseline;
  color: #1C1208;
  display: grid;
  gap: 10px;
  grid-template-columns: 82px minmax(0, 1fr);
  text-decoration: none; }

.idiom-script-label {
  color: #667272;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2; }

.idiom-hanzi-text {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  word-break: keep-all; }

.idiom-hanzi-row:hover,
.idiom-practice-link:hover {
  color: #8B1A1A;
  text-decoration: none; }

.idiom-definition-list {
  border-top: 1px solid #edf1f1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2px 0 14px;
  padding-top: 12px; }

.idiom-definition-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 74px minmax(0, 1fr); }

.idiom-definition-label {
  color: #667272;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45; }

.idiom-definition-text {
  color: #202828;
  font-size: 15px;
  line-height: 1.45; }

.idiom-practice-link {
  align-items: center;
  color: #2f6b61;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 7px;
  margin-top: auto; }

.idioms-empty {
  color: #647070;
  grid-column: 1 / -1; }

.idioms-seo {
  background: #f7f8f6;
  border-top: 1px solid #e1e6e6;
  padding: 36px 0 52px; }

.idioms-seo-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr); }

.idioms-explainer h2,
.idioms-missing h2,
.idioms-category-promos h2 {
  color: #1C1208;
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 12px; }

.idioms-explainer p,
.idioms-missing p {
  color: #4f5a5a;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px; }

.idioms-missing {
  background: #fff;
  border: 1px solid #dde4e4;
  border-radius: 8px;
  padding: 18px; }

.idioms-missing form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px; }

.idioms-missing label {
  color: #4f5a5a;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  margin: 0; }

.idioms-missing input {
  border: 1px solid #cfd8d8;
  border-radius: 6px;
  color: #1C1208;
  font-size: 15px;
  font-weight: 400;
  height: 40px;
  padding: 8px 10px; }

.idioms-missing button,
.idioms-category-promo-grid button {
  border: 1px solid #cfd8d8;
  border-radius: 6px;
  color: #1C1208;
  cursor: pointer;
  font-weight: 700; }

.idioms-missing button {
  background: #2f6b61;
  border-color: #2f6b61;
  color: #fff;
  min-height: 40px;
  padding: 8px 12px; }

.idioms-missing-status {
  color: #4f5a5a;
  font-size: 13px !important;
  margin: 10px 0 0 !important;
  min-height: 20px; }

.idioms-category-promos {
  margin-top: 28px; }

.idioms-category-promo-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }

.idioms-category-promo-grid button {
  background: #fff;
  font-size: 14px;
  line-height: 1.3;
  min-height: 44px;
  padding: 10px 12px;
  text-align: left; }

.idioms-category-promo-grid button:hover,
.idioms-category-promo-grid button:focus {
  border-color: #8bb6ae;
  color: #2f6b61;
  outline: none; }

@media (max-width: 991px) {
  .idioms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .idioms-seo-layout,
  .idioms-category-promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .idioms-header {
    padding: 28px 0 24px; }

  .idioms-header h1 {
    font-size: 30px; }

  .idioms-toolbar {
    grid-template-columns: 1fr; }

  .idioms-daily-card {
    grid-template-columns: 1fr; }

  .idioms-daily-hanzi {
    font-size: 30px; }

  .idioms-daily-actions {
    align-items: stretch;
    flex-direction: column; }

  .idioms-daily-actions .idiom-practice-link,
  .idioms-daily-more {
    justify-content: center;
    text-align: center;
    width: 100%; }

  .idioms-grid {
    grid-template-columns: 1fr; }

  .idioms-seo-layout,
  .idioms-category-promo-grid {
    grid-template-columns: 1fr; } }
.character-tool-link:hover,
.character-tool-link:focus {
  background: #e8e8e8;
  color: #1C1208;
  text-decoration: none; }

.radical-link {
  font-size: 18px;
  font-weight: 600; }

.home-geo-quiz-callout,
.home-daily-idiom-callout {
  align-items: center;
  background: #f4f7f8;
  border: 1px solid #d9e1e5;
  border-radius: 8px;
  color: #3c464b;
  display: flex;
  gap: 12px;
  line-height: 1.35;
  margin: 20px auto 0;
  max-width: 760px;
  padding: 14px 16px;
  text-align: left; }

.home-geo-quiz-callout i,
.home-daily-idiom-callout i {
  color: #b6485f;
  font-size: 24px; }

.home-daily-idiom-callout i {
  color: #2f7f73; }

.home-geo-quiz-callout div,
.home-daily-idiom-callout > div:not(.home-callout-actions) {
  flex: 1 1 auto; }

.home-callout-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px; }

.home-geo-quiz-callout strong,
.home-geo-quiz-callout span,
.home-daily-idiom-callout strong,
.home-daily-idiom-callout span {
  display: block; }

.home-geo-quiz-callout strong,
.home-daily-idiom-callout strong {
  color: #202124;
  font-size: 15px; }

.home-geo-quiz-callout span,
.home-daily-idiom-callout span {
  color: #59666d;
  font-size: 13px;
  margin-top: 2px; }

.home-geo-quiz-callout a,
.home-daily-idiom-callout a {
  background: #2f7f73;
  border: 1px solid #2f7f73;
  border-radius: 6px;
  color: #fff;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  text-decoration: none; }

.home-daily-idiom-callout .home-callout-secondary {
  background: #fff;
  border-color: #b9cfca;
  color: #2f6b61; }

.home-geo-quiz-callout a:hover,
.home-geo-quiz-callout a:focus,
.home-daily-idiom-callout .home-callout-primary:hover,
.home-daily-idiom-callout .home-callout-primary:focus {
  background: #256a60;
  border-color: #256a60;
  color: #fff;
  text-decoration: none; }

.home-daily-idiom-callout .home-callout-secondary:hover,
.home-daily-idiom-callout .home-callout-secondary:focus {
  background: #edf5f3;
  border-color: #8bb6ae;
  color: #24584f;
  text-decoration: none; }

.geo-quiz-page {
  color: #202124; }

.geo-quiz-intro {
  background: #f4f7f8;
  border-bottom: 1px solid #dfe7ea;
  margin-top: -20px;
  padding: 42px 0 34px; }

.geo-quiz-kicker {
  color: #b6482a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: uppercase; }

.geo-quiz-intro h1 {
  color: #111;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 14px; }

.geo-quiz-lede {
  color: #465057;
  font-size: 18px;
  line-height: 1.55;
  max-width: 780px; }

.geo-quiz-privacy {
  background: #fff;
  border: 1px solid #d9e0e3;
  border-radius: 6px;
  color: #3f4b52;
  display: inline-block;
  font-size: 14px;
  margin-top: 12px;
  padding: 10px 14px; }

.geo-quiz-research-note {
  color: #59666d;
  font-size: 13px;
  line-height: 1.45;
  margin: 14px 0 0;
  max-width: 820px; }

.geo-quiz-workspace {
  padding: 34px 0 20px; }

.geo-quiz-shell {
  max-width: 880px; }

.geo-quiz-panel,
.geo-quiz-results {
  background: #fff;
  border: 1px solid #dfe4e7;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(32, 33, 36, 0.06); }

.geo-quiz-panel {
  min-height: 500px;
  padding: 24px; }

.geo-quiz-mode {
  align-items: center;
  border-bottom: 1px solid #edf1f3;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: space-between;
  margin: -4px 0 22px;
  padding-bottom: 18px; }

.geo-quiz-mode span {
  color: #66727a;
  font-size: 13px;
  font-weight: 700; }

.geo-quiz-mode-options {
  background: #f4f7f8;
  border: 1px solid #d9e1e5;
  border-radius: 8px;
  display: flex;
  gap: 4px;
  padding: 4px; }

.geo-quiz-mode-options button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #3c464b;
  font-size: 13px;
  font-weight: 700;
  min-height: 34px;
  padding: 7px 10px; }

.geo-quiz-mode-options button:hover,
.geo-quiz-mode-options button:focus {
  background: #fff;
  outline: none; }

.geo-quiz-mode-options button.is-selected {
  background: #2f7f73;
  color: #fff; }

.geo-quiz-results-detail h3,
.geo-quiz-feedback h3 {
  color: #202124;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 14px; }

.geo-quiz-progress {
  margin-bottom: 28px; }

.geo-quiz-progress span {
  color: #66727a;
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 9px; }

.geo-quiz-progress-track {
  background: #e8eef1;
  border-radius: 999px;
  height: 8px;
  overflow: hidden; }

.geo-quiz-progress-bar {
  background: #2f7f73;
  border-radius: inherit;
  height: 100%;
  transition: width 180ms ease;
  width: 0; }

.geo-quiz-prompt-type {
  color: #b6482a;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase; }

.geo-quiz-question h2 {
  color: #111;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.24;
  margin: 0; }

.geo-quiz-question-note {
  color: #66727a;
  font-size: 15px;
  min-height: 23px;
  margin: 10px 0 18px; }

.geo-quiz-visual {
  color: #4f5b62;
  margin: 0 0 12px; }

.geo-quiz-visual[data-tone="people"] {
  color: #5f6b73; }

.geo-quiz-visual[data-tone="food"] {
  color: #8b5a2b; }

.geo-quiz-visual[data-tone="home"] {
  color: #59666d; }

.geo-quiz-visual[data-tone="sun"] {
  color: #d89216; }

.geo-quiz-visual[data-tone="rain"] {
  color: #3d78a8; }

.geo-quiz-visual[data-tone="hot"] {
  color: #c64a2f; }

.geo-quiz-visual[data-tone="cold"] {
  color: #3f83b7; }

.geo-quiz-visual[data-tone="location"] {
  color: #b6485f; }

.geo-quiz-visual[hidden] {
  display: none; }

.geo-quiz-visual i {
  font-size: 42px;
  line-height: 1; }

.geo-quiz-options {
  display: grid;
  gap: 10px; }

.geo-quiz-option {
  background: #f8fafb;
  border: 1px solid #d9e1e5;
  border-radius: 6px;
  color: #202124;
  font-size: 18px;
  line-height: 1.35;
  min-height: 54px;
  padding: 13px 15px;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  width: 100%; }

.geo-quiz-option:hover,
.geo-quiz-option:focus {
  background: #fff;
  border-color: #2f7f73;
  box-shadow: 0 0 0 3px rgba(47, 127, 115, 0.14);
  outline: none; }

.geo-quiz-option.is-selected {
  background: #e7f3f0;
  border-color: #2f7f73;
  box-shadow: inset 4px 0 0 #2f7f73; }

.geo-quiz-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px; }

.geo-quiz-button {
  background: #2f7f73;
  border: 1px solid #2f7f73;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  min-height: 42px;
  min-width: 112px;
  padding: 9px 16px; }

.geo-quiz-button:hover,
.geo-quiz-button:focus {
  background: #256a60;
  border-color: #256a60;
  color: #fff;
  outline: none; }

.geo-quiz-button:disabled {
  background: #bcc8cc;
  border-color: #bcc8cc;
  cursor: not-allowed; }

.geo-quiz-button-secondary {
  background: #fff;
  border-color: #cbd5d9;
  color: #263238; }

.geo-quiz-button-secondary:hover,
.geo-quiz-button-secondary:focus {
  background: #f3f6f7;
  border-color: #9aa9af;
  color: #263238; }

.geo-quiz-muted {
  color: #66727a;
  font-size: 14px;
  line-height: 1.45;
  margin: 0; }

.geo-quiz-results {
  padding: 0; }

.geo-quiz-result-summary {
  background: #f8fafb;
  border-bottom: 1px solid #dfe4e7;
  border-radius: 8px 8px 0 0;
  padding: 24px; }

.geo-quiz-result-summary h2 {
  color: #111;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 8px; }

.geo-quiz-result-summary p {
  color: #465057;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 12px;
  max-width: 850px; }

.geo-quiz-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; }

.geo-quiz-result-meta span {
  background: #fff;
  border: 1px solid #d8e0e3;
  border-radius: 999px;
  color: #263238;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 11px; }

.geo-quiz-map-layout {
  padding: 24px; }

.geo-quiz-map-wrap {
  min-width: 0; }

.geo-quiz-map {
  background: #e8eef1;
  border: 1px solid #d4dde1;
  border-radius: 8px;
  height: 520px;
  overflow: hidden;
  width: 100%; }

.geo-quiz-heat-layer {
  pointer-events: none; }

.geo-quiz-map-note {
  color: #66727a;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 8px; }

.geo-quiz-map-fallback {
  align-items: center;
  color: #465057;
  display: flex;
  height: 100%;
  justify-content: center;
  line-height: 1.45;
  padding: 24px;
  text-align: center; }

.geo-quiz-results-detail {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  padding: 0 24px 24px; }

.geo-quiz-detail-block {
  min-width: 0; }

.geo-quiz-detail-block-wide {
  grid-column: 1 / -1; }

.geo-quiz-ranked-list,
.geo-quiz-local-list,
.geo-quiz-clue-list {
  margin-bottom: 0;
  padding-left: 22px; }

.geo-quiz-ranked-list li,
.geo-quiz-local-list li {
  color: #3c464b;
  margin-bottom: 9px;
  padding-left: 4px; }

.geo-quiz-ranked-list li span,
.geo-quiz-local-list li span {
  display: block;
  font-weight: 700; }

.geo-quiz-ranked-list li strong,
.geo-quiz-local-list li strong {
  color: #b6482a;
  display: block;
  font-size: 13px; }

.geo-quiz-ranked-list li em,
.geo-quiz-local-list li em {
  color: #66727a;
  display: block;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35; }

.geo-quiz-local-muted {
  color: #66727a !important;
  font-size: 13px;
  line-height: 1.45;
  list-style: none;
  margin-left: -22px; }

.geo-quiz-map-insight {
  background: #f8fafb;
  border: 1px solid #dfe4e7;
  border-radius: 8px;
  color: #3c464b;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 0;
  padding: 13px 14px; }

.geo-quiz-map-insight p {
  margin: 0 0 8px; }

.geo-quiz-map-insight p:last-child {
  margin-bottom: 0; }

.geo-quiz-local-report {
  background: #f8fafb;
  border: 1px solid #dfe4e7;
  border-radius: 8px;
  color: #3c464b;
  font-size: 13px;
  line-height: 1.45;
  padding: 13px 14px; }

.geo-quiz-local-report p {
  margin: 0 0 10px; }

.geo-quiz-local-report p:last-child {
  margin-bottom: 0; }

.geo-quiz-blend {
  display: grid;
  gap: 9px;
  margin: 12px 0;
  max-width: 560px; }

.geo-quiz-blend-row {
  display: grid;
  gap: 4px 10px;
  grid-template-columns: minmax(0, 1fr) auto; }

.geo-quiz-blend-row span {
  color: #263238;
  font-weight: 700;
  min-width: 0; }

.geo-quiz-blend-row strong {
  color: #b6482a; }

.geo-quiz-blend-row i {
  background: #2f7f73;
  border-radius: 999px;
  display: block;
  grid-column: 1 / -1;
  height: 7px;
  max-width: 100%; }

.geo-quiz-local-report-note {
  color: #66727a;
  font-size: 12px; }

.geo-quiz-clue-list li {
  color: #3c464b;
  line-height: 1.45;
  margin-bottom: 8px; }

.geo-quiz-feedback {
  background: #f8fafb;
  border: 1px solid #dfe4e7;
  border-radius: 8px;
  padding: 16px; }

.geo-quiz-feedback-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px; }

.geo-quiz-feedback-buttons button {
  background: #fff;
  border: 1px solid #cbd5d9;
  border-radius: 6px;
  color: #263238;
  font-weight: 700;
  min-height: 36px;
  padding: 7px 12px; }

.geo-quiz-feedback-buttons button:hover,
.geo-quiz-feedback-buttons button:focus {
  border-color: #2f7f73;
  outline: none; }

.geo-quiz-feedback-buttons button.is-selected {
  background: #e7f3f0;
  border-color: #2f7f73;
  box-shadow: inset 3px 0 0 #2f7f73; }

.geo-quiz-feedback-location {
  display: grid;
  gap: 7px;
  margin: 2px 0 10px; }

.geo-quiz-feedback-location[hidden] {
  display: none; }

.geo-quiz-feedback-location label {
  color: #3c464b;
  font-size: 13px;
  font-weight: 700; }

.geo-quiz-feedback-location div {
  display: flex;
  gap: 8px; }

.geo-quiz-feedback-location input {
  background: #fff;
  border: 1px solid #cbd5d9;
  border-radius: 6px;
  color: #263238;
  flex: 1 1 auto;
  min-height: 36px;
  min-width: 0;
  padding: 7px 10px; }

.geo-quiz-feedback-location input:focus {
  border-color: #2f7f73;
  outline: none; }

.geo-quiz-feedback-location button {
  background: #2f7f73;
  border: 1px solid #2f7f73;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  min-height: 36px;
  padding: 7px 12px; }

.geo-quiz-feedback p {
  color: #66727a;
  font-size: 13px;
  line-height: 1.45;
  margin: 0; }

.geo-quiz-results-actions {
  border-top: 1px solid #dfe4e7;
  margin-top: 0;
  padding: 18px 24px 24px; }

.geo-quiz-share-status {
  color: #66727a;
  font-size: 13px;
  line-height: 1.4;
  margin: -16px 24px 22px;
  min-height: 18px; }

.geo-quiz-sources {
  color: #4c5961;
  font-size: 13px;
  line-height: 1.45;
  margin: 22px 0 0; }

.geo-quiz-sources h2 {
  color: #202124;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 10px; }

.geo-quiz-sources ul {
  margin: 0;
  padding-left: 20px; }

.geo-quiz-sources li {
  margin-bottom: 8px; }

.geo-quiz-sources a {
  color: #2f7f73;
  font-weight: 700; }

.geo-quiz-explainer {
  border-top: 1px solid #dfe4e7;
  color: #3c464b;
  line-height: 1.6;
  margin: 28px 0 0;
  padding: 28px 0 0; }

.geo-quiz-explainer h2,
.geo-quiz-explainer h3 {
  color: #202124;
  font-weight: 700;
  line-height: 1.25; }

.geo-quiz-explainer h2 {
  font-size: 26px;
  margin: 0 0 14px; }

.geo-quiz-explainer h3 {
  font-size: 19px;
  margin: 24px 0 8px; }

.geo-quiz-explainer p {
  font-size: 15px;
  margin: 0 0 13px;
  max-width: 880px; }

.geo-quiz-map-legend {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 33, 36, 0.16);
  color: #263238;
  font-size: 12px;
  line-height: 1.3;
  max-width: 240px;
  padding: 10px 11px; }

.geo-quiz-map-legend strong {
  display: block;
  margin-bottom: 6px; }

.geo-quiz-map-legend span {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-top: 4px; }

.geo-quiz-map-legend i {
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto; }

.geo-quiz-legend-swatch {
  display: inline-block;
  height: 10px;
  width: 18px; }

.geo-quiz-legend-swatch-red {
  background: #d85b32; }

.geo-quiz-legend-swatch-purple {
  background: #9a6fc2; }

.geo-quiz-legend-swatch-dark {
  background: #263238; }

.geo-quiz-legend-dot {
  background: #fff;
  border: 2px solid #263238;
  height: 9px;
  width: 9px; }

.geo-quiz-legend-ring {
  background: transparent;
  border: 3px solid #10211f;
  height: 12px;
  width: 12px; }

@media (max-width: 991px) {
  .geo-quiz-map {
    height: 440px; } }
@media (max-width: 600px) {
  .geo-quiz-intro {
    padding: 30px 0 26px; }

  .geo-quiz-intro h1 {
    font-size: 32px; }

  .geo-quiz-lede {
    font-size: 16px; }

  .geo-quiz-panel,
  .geo-quiz-result-summary,
  .geo-quiz-map-layout,
  .geo-quiz-results-detail {
    padding: 16px; }

  .geo-quiz-results-detail {
    grid-template-columns: 1fr; }

  .geo-quiz-mode {
    align-items: stretch; }

  .geo-quiz-mode-options {
    width: 100%; }

  .geo-quiz-mode-options button {
    flex: 1 1 0;
    padding-left: 6px;
    padding-right: 6px; }

  .geo-quiz-question h2,
  .geo-quiz-result-summary h2 {
    font-size: 24px; }

  .geo-quiz-option {
    font-size: 16px; }

  .geo-quiz-visual {
    margin-bottom: 10px; }

  .geo-quiz-visual i {
    font-size: 36px; }

  .geo-quiz-map {
    height: 360px; }

  .geo-quiz-actions {
    flex-direction: column-reverse; }

  .geo-quiz-feedback-location div {
    flex-direction: column; }

  .geo-quiz-button {
    width: 100%; }

  .home-geo-quiz-callout,
  .home-daily-idiom-callout {
    align-items: flex-start;
    flex-direction: column; }

  .home-geo-quiz-callout a,
  .home-daily-idiom-callout a {
    display: block;
    text-align: center;
    width: 100%; }

  .home-callout-actions {
    flex-direction: column;
    width: 100%; } }
.component-list,
.related-character-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin-left: 0;
  padding-left: 0; }

.component-list li,
.related-character-list li {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  font-size: 22px;
  min-width: 42px;
  padding: 6px 10px;
  text-align: center; }

.word-cloud {
  line-height: 2.2; }

.word-cloud span {
  background: #e8e8e8;
  border-radius: 4px;
  display: inline-block;
  margin: 3px;
  padding: 2px 8px; }

#speed-slider {
  background: #e8e8e8; }

#speed-slider::-webkit-slider-thumb,
#speed-slider::-moz-range-thumb,
#speed-slider::-ms-thumb {
  background: #8B1A1A; }

@media (min-width: 768px) {
  .navbar-nav > li.active > a,
  .navbar-nav > li.active > a:hover,
  .navbar-nav > li.active > a:focus {
    background-color: transparent; } }
.btn,
.form-control,
.demo-target,
.practice-info-card,
.practice-sidebar .language-script-settings,
.script-segment,
.script-segment label,
.practice-secondary-tools label,
.language-toggle-options label,
.idioms-daily-card,
.idiom-card,
.idioms-seo-copy,
.idioms-missing,
.idioms-category-promo-grid button,
.home-geo-quiz-callout,
.home-daily-idiom-callout,
.geo-quiz-privacy,
.geo-quiz-panel,
.geo-quiz-results,
.geo-quiz-mode-options,
.geo-quiz-mode-options button,
.geo-quiz-option,
.geo-quiz-result-summary,
.geo-quiz-result-meta span,
.geo-quiz-map,
.geo-quiz-map-insight,
.geo-quiz-local-report,
.geo-quiz-feedback,
.geo-quiz-feedback-buttons button,
.geo-quiz-feedback-location input,
.geo-quiz-feedback-location button,
.geo-quiz-map-legend,
.modal-content,
.well,
.panel,
.navbar-wrapper .language-switch-item,
.navbar-wrapper .navbar-nav > .language-switch-item > a.language-option,
.mobile-language-switch,
.mobile-language-switch a {
  border-radius: 4px; }

.hsk-explorer {
  color: #1C1208;
  max-width: 1240px; }

.hsk-explorer > h1 {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 12px; }

.hsk-explorer > .lead {
  color: #6B5B45;
  max-width: 900px; }

.hsk-about,
.hsk-vocabulary {
  background: #EBE0C6;
  border: 1px solid #C4A882;
  border-radius: 4px;
  margin-top: 24px;
  padding: 14px 16px; }

.hsk-about summary,
.hsk-vocabulary summary {
  color: #1C1208;
  cursor: pointer;
  font-weight: 700; }

.hsk-about p {
  color: #6B5B45;
  line-height: 1.6;
  margin: 12px 0 2px;
  max-width: 900px; }

.hsk-browser > h2,
.hsk-continue > h2 {
  font-size: 24px;
  font-weight: 700; }

.hsk-search {
  display: block;
  margin: 18px 0 14px;
  position: relative; }

.hsk-script-choice {
  border: 0;
  margin: 16px 0 14px;
  max-width: 460px;
  padding: 0; }

.hsk-script-choice legend {
  border: 0;
  color: #6B5B45;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  text-transform: uppercase; }

.hsk-script-choice .script-segment {
  width: 100%; }

.hsk-search i {
  color: #6B5B45;
  font-size: 16px;
  left: 16px;
  pointer-events: none;
  position: absolute;
  top: 17px; }

.hsk-search input {
  background: #FAF3E3;
  border: 1px solid #C4A882;
  border-radius: 4px;
  color: #1C1208;
  font-size: 17px;
  height: 50px;
  padding: 10px 16px 10px 44px;
  width: 100%; }

.hsk-search input:focus,
.hsk-controls input:focus,
.hsk-controls select:focus {
  border-color: #8B1A1A;
  box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.14);
  outline: none; }

.hsk-controls {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hsk-controls label {
  color: #6B5B45;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0; }

.hsk-controls label > span {
  display: block;
  margin-bottom: 5px; }

.hsk-controls input,
.hsk-controls select {
  background: #FAF3E3;
  border: 1px solid #C4A882;
  border-radius: 4px;
  color: #1C1208;
  font-size: 14px;
  font-weight: 400;
  height: 42px;
  padding: 8px 10px;
  width: 100%; }

.hsk-filter-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  min-height: 30px; }

.hsk-filter-summary > strong {
  margin-right: 4px; }

.hsk-active-filters {
  display: contents; }

.hsk-active-filters button {
  background: #EBE0C6;
  border: 1px solid #C4A882;
  border-radius: 4px;
  color: #1C1208;
  font-size: 12px;
  padding: 5px 8px; }

.hsk-clear-filters {
  background: transparent;
  border: 0;
  color: #8B1A1A;
  font-size: 13px;
  font-weight: 700;
  padding: 5px; }

.hsk-card-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hsk-card {
  background: #FAF3E3;
  border: 1px solid #C4A882;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 16px;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }

.hsk-card[hidden] {
  display: none; }

.hsk-card:hover,
.hsk-card:focus {
  border-color: #8B1A1A;
  box-shadow: 0 5px 16px rgba(28, 18, 8, 0.1);
  outline: none;
  transform: translateY(-2px); }

.hsk-card-character {
  color: #1C1208;
  display: block;
  font-size: 54px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 14px;
  text-align: center;
  text-decoration: none; }

.hsk-card-character:hover,
.hsk-card-character:focus {
  color: #8B1A1A;
  text-decoration: none; }

.hsk-readings {
  border-bottom: 1px solid #D4C5A8;
  border-top: 1px solid #D4C5A8;
  margin: 0 0 12px;
  padding: 9px 0; }

.hsk-readings > div {
  align-items: baseline;
  display: grid;
  gap: 8px;
  grid-template-columns: 54px minmax(0, 1fr); }

.hsk-readings > div + div {
  margin-top: 5px; }

.hsk-readings dt,
.hsk-readings dd {
  font-size: 13px;
  margin: 0; }

.hsk-readings dt {
  color: #6B5B45;
  font-weight: 700; }

.hsk-readings dd {
  color: #1C1208;
  font-weight: 600; }

.hsk-speak {
  background: transparent;
  border: 0;
  color: #8B1A1A;
  margin-left: 4px;
  padding: 2px 4px; }

.hsk-card-meaning {
  color: #1C1208;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 12px; }

.hsk-card-meta {
  color: #6B5B45;
  font-size: 12px;
  margin-bottom: 12px; }

.hsk-radical-filter {
  background: transparent;
  border: 0;
  color: #8B1A1A;
  font-weight: 700;
  padding: 0 2px; }

.hsk-practice-link {
  border-top: 1px solid #D4C5A8;
  color: #8B1A1A;
  display: block;
  font-size: 13px;
  font-weight: 700;
  padding-top: 10px;
  text-align: right; }

.hsk-load-more {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px; }

.hsk-load-more p {
  color: #6B5B45;
  margin: 0; }

.hsk-load-more button,
.hsk-continue a,
.hsk-continue button {
  background: #FAF3E3;
  border: 1px solid #C4A882;
  border-radius: 4px;
  color: #8B1A1A;
  font-weight: 700;
  padding: 10px 14px;
  text-decoration: none; }

.hsk-load-more button:hover,
.hsk-load-more button:focus,
.hsk-continue a:hover,
.hsk-continue a:focus,
.hsk-continue button:hover,
.hsk-continue button:focus {
  background: #8B1A1A;
  border-color: #8B1A1A;
  color: #F2E8D0;
  text-decoration: none; }

.hsk-empty {
  background: #EBE0C6;
  border: 1px solid #C4A882;
  border-radius: 4px;
  color: #6B5B45;
  padding: 24px;
  text-align: center; }

.hsk-vocabulary summary span {
  color: #6B5B45;
  display: block;
  font-size: 13px;
  font-weight: 400;
  margin-top: 3px; }

.hsk-vocabulary .word-cloud {
  margin-top: 16px; }

.hsk-continue > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; }

@media (max-width: 1100px) {
  .hsk-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .hsk-controls,
  .hsk-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .hsk-explorer > h1 {
    font-size: 30px; }

  .hsk-controls,
  .hsk-card-grid {
    grid-template-columns: 1fr; }

  .hsk-card {
    min-height: 0; }

  .hsk-continue > div {
    align-items: stretch;
    flex-direction: column; } }
.practice-hero {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 20px; }

.practice-hero-copy {
  min-width: 0; }

.practice-intro {
  margin-bottom: 16px; }

@media (min-width: 901px) {
  .practice-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas: "intro sponsor" "banner sponsor";
    align-items: center;
    gap: 16px 34px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #C4A882; }

  .practice-intro .practice-hero {
    grid-area: intro;
    margin: 0;
    padding: 0; }

  .practice-intro > .site-ad {
    margin: 0 auto;
    padding: 10px 14px;
    border: 1px solid #C4A882;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.18); }

  .practice-intro > .site-ad--desktop-banner {
    grid-area: banner; }

  .practice-intro > .site-ad--desktop {
    grid-area: sponsor; } }
@media (min-width: 901px) and (max-width: 1199px) {
  .practice-intro {
    grid-template-areas: "intro sponsor" "banner banner"; } }
.practice-explore {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px auto;
  font-size: 14px; }

@media (max-width: 600px) {
  .practice-hero {
    padding: 8px 0;
    margin-bottom: 16px; }

  .practice-hero h1 {
    font-size: 26px; }

  .practice-hero .practice-hero-description {
    font-size: 14px; }

  .practice-hero .home-tutor-link {
    margin: 8px 0 0; } }
@media (min-width: 992px) {
  .navbar-wrapper .navbar > .container {
    max-width: none;
    width: 100%; } }
@media (max-width: 768px) {
  .beginner-chars {
    max-width: 100% !important; }

  .beginner-chars-content {
    min-width: 0 !important;
    width: 100% !important; }

  .char-buttons {
    display: flex;
    flex-wrap: wrap; } }
html,
body {
  background-color: #F2E8D0;
  color: #1C1208; }

body {
  min-height: 100vh; }

a,
.btn-link,
.pronunciation-button-compact {
  color: #8B1A1A; }

a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus,
.pronunciation-button:hover:not(:disabled),
.pronunciation-button:focus:not(:disabled),
.pronunciation-button.is-speaking {
  color: #691414; }

hr,
.featurette-divider,
.page-header {
  border-color: #C4A882; }

.text-muted,
small,
.char-unavailable,
.reference-breadcrumb,
.idioms-kicker,
.idioms-lede,
.idioms-status,
.idioms-category,
.idiom-script-label,
.geo-quiz-mode span,
.geo-quiz-progress span,
.geo-quiz-question-note,
.geo-quiz-muted,
.geo-quiz-share-status,
.geo-quiz-map-note,
.geo-quiz-local-report-note,
.char-item .desc {
  color: #6B5B45 !important; }

.demo-target,
.modal-content,
.dropdown-menu,
.panel,
.idioms-daily,
.idioms-daily-card,
.idiom-card,
.idioms-seo-copy,
.idioms-category-promo-grid button,
.geo-quiz-panel,
.geo-quiz-results,
.geo-quiz-privacy,
.geo-quiz-option,
.geo-quiz-feedback-buttons button,
.geo-quiz-feedback-location input,
.geo-quiz-result-meta span,
.geo-quiz-map-legend,
.radio-label,
.form-control,
input,
select,
textarea,
table,
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  background-color: #FAF3E3;
  border-color: #C4A882;
  color: #1C1208; }

.well,
.language-script-settings,
.beginner-chars-modal-header,
.example-box,
.char-grid,
.idioms-header,
.idioms-seo,
.home-geo-quiz-callout,
.home-daily-idiom-callout,
.geo-quiz-intro,
.geo-quiz-mode-options,
.geo-quiz-result-summary,
.geo-quiz-map-insight,
.geo-quiz-local-report,
.geo-quiz-feedback,
.word-cloud span {
  background-color: #EBE0C6 !important;
  border-color: #C4A882; }

.btn-primary,
.btn-info,
.radio-label:has(input[type="radio"]:checked),
.idioms-daily-actions .idiom-practice-link,
.idioms-category-promo-grid button:hover,
.idioms-category-promo-grid button:focus,
.home-geo-quiz-callout a,
.home-daily-idiom-callout .home-callout-primary,
.geo-quiz-mode-options button.is-selected,
.geo-quiz-progress-bar,
.geo-quiz-button,
.geo-quiz-feedback-location button,
.geo-quiz-blend-row i {
  background-color: #8B1A1A;
  border-color: #8B1A1A;
  color: #F2E8D0; }

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus,
.idioms-daily-actions .idiom-practice-link:hover,
.idioms-daily-actions .idiom-practice-link:focus,
.home-geo-quiz-callout a:hover,
.home-geo-quiz-callout a:focus,
.home-daily-idiom-callout .home-callout-primary:hover,
.home-daily-idiom-callout .home-callout-primary:focus,
.geo-quiz-button:hover,
.geo-quiz-button:focus {
  background-color: #691414;
  border-color: #691414;
  color: #F2E8D0; }

.radio-label:hover,
.geo-quiz-option:hover,
.geo-quiz-option:focus,
.geo-quiz-feedback-buttons button:hover,
.geo-quiz-feedback-buttons button:focus,
.geo-quiz-feedback-location input:focus {
  border-color: #8B1A1A; }

.geo-quiz-option.is-selected,
.geo-quiz-feedback-buttons button.is-selected {
  background: #EBE0C6;
  border-color: #8B1A1A;
  box-shadow: inset 4px 0 0 #8B1A1A; }

.character-tool-link,
.component-list li,
.related-character-list li,
.idioms-toolbar input,
.idioms-toolbar select,
.idioms-daily-more,
.home-daily-idiom-callout .home-callout-secondary,
.geo-quiz-button-secondary {
  background-color: #FAF3E3;
  border-color: #C4A882;
  color: #1C1208; }

.book-spine,
.idiom-card {
  border-left: 5px solid #8B1A1A; }

#speed-slider,
#speed-slider::-moz-range-track,
#speed-slider::-ms-fill-lower,
#speed-slider::-ms-fill-upper {
  background: #D4C5A8; }

.site-footer {
  background: #1C1208;
  color: #F2E8D0;
  margin-bottom: -40px;
  padding: 30px 0 40px; }

.site-footer a,
.site-footer .footer-separator {
  color: #B8A07A;
  border-color: #B8A07A; }

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-toggle {
  color: #F2E8D0; }

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #F2E8D0; }

.stroke-rules-table {
  background-color: #FAF3E3 !important; }

.navbar-wrapper .language-switch-item {
  align-items: center;
  background: rgba(242, 232, 208, 0.14);
  border: 1px solid rgba(242, 232, 208, 0.42);
  border-radius: 999px;
  display: flex;
  gap: 2px;
  margin: 10px 0 10px 16px;
  padding: 3px; }

.mobile-language-switch {
  display: none; }

@media (max-width: 767px) {
  .navbar-wrapper .navbar-collapse .language-switch-item {
    display: none; }

  .mobile-language-switch {
    align-items: center;
    background: rgba(242, 232, 208, 0.14);
    border: 1px solid rgba(242, 232, 208, 0.42);
    border-radius: 999px;
    display: flex;
    float: right;
    gap: 1px;
    margin: 9px 7px 0 0;
    padding: 2px; }

  .mobile-language-switch a {
    border-radius: 999px;
    color: rgba(242, 232, 208, 0.7);
    font-size: 12px;
    font-weight: 700;
    line-height: 25px;
    min-width: 29px;
    padding: 0 6px;
    text-align: center;
    text-decoration: none; }

  .mobile-language-switch a:hover,
  .mobile-language-switch a:focus,
  .mobile-language-switch a.is-current {
    background: #F2E8D0;
    color: #8B1A1A; }

  .navbar-wrapper .navbar-toggle {
    margin-left: 3px; } }
.navbar-wrapper .navbar-nav > .language-switch-item > a.language-option {
  color: rgba(242, 232, 208, 0.62);
  border-radius: 999px;
  line-height: 24px;
  margin: 0;
  min-width: 36px;
  padding: 3px 8px;
  text-align: center; }

.navbar-wrapper .navbar-nav > .language-switch-item > a.language-option:hover,
.navbar-wrapper .navbar-nav > .language-switch-item > a.language-option:focus,
.navbar-wrapper .navbar-nav > .language-switch-item > a.language-option.is-current {
  background: #F2E8D0;
  color: #8B1A1A; }

@media (min-width: 768px) {
  body {
    padding-top: 122px; }

  .navbar-wrapper .navbar {
    border-radius: 0;
    box-shadow: 0 5px 14px rgba(28, 18, 8, 0.16);
    min-height: 72px; }

  .navbar-wrapper .navbar > .container {
    align-items: center;
    display: flex; }

  .navbar-wrapper .navbar-header {
    flex: 0 0 auto; }

  .navbar-wrapper .navbar-collapse {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0; }

  .navbar-wrapper .navbar-nav {
    align-items: center;
    display: flex;
    float: none !important;
    gap: 8px;
    margin-left: auto; }

  .navbar-wrapper .navbar-brand {
    font-size: 18px;
    font-weight: 700;
    height: 70px;
    line-height: 30px;
    padding-bottom: 20px;
    padding-top: 20px; }

  .navbar-wrapper .navbar-nav > li > a {
    border-radius: 5px;
    font-size: 16px;
    margin: 6px 2px;
    padding: 19px 11px; }

  .navbar-wrapper .navbar-nav > .language-switch-item > a.language-option {
    padding: 3px 8px; }

  .navbar-wrapper .navbar-inverse .navbar-nav > .active > a,
  .navbar-wrapper .navbar-inverse .navbar-nav > .active > a:hover,
  .navbar-wrapper .navbar-inverse .navbar-nav > .active > a:focus {
    background: #F2E8D0;
    color: #8B1A1A; } }
.practice-hero-promos .home-geo-quiz-callout,
.practice-hero-promos .home-daily-idiom-callout,
.navbar-wrapper .language-switch-item,
.navbar-wrapper .navbar-nav > .language-switch-item > a.language-option,
.mobile-language-switch,
.mobile-language-switch a {
  border-radius: 4px; }