#kn-app .kn-header { gap: 16px; }
.kn-header > .kn-text-button { margin-left: auto; }
#kn-app .kn-language-control { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; margin: 0; border: 1px solid #20372e40; border-radius: 999px; background: #ffffff26; color: #20372e; box-shadow: inset 0 1px 0 #ffffff30; transition: background .18s ease, border-color .18s ease; }
#kn-app .kn-language-face { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; pointer-events: none; }
#kn-app .kn-language-globe { width: 18px; height: 18px; flex: none; }
#kn-app .kn-language-code { min-width: 20px; font: 700 12px/1 var(--kn-font-ui); letter-spacing: .035em; text-align: center; white-space: nowrap; }
#kn-app .kn-language-chevron { width: 12px; height: 12px; flex: none; opacity: .7; }
/* The whole 44px pill is the real select, including the globe and chevron. */
#kn-app .kn-language-control select { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; max-width: none; margin: 0; padding: 0; border: 0; border-radius: inherit; opacity: 0; font-size: 16px; cursor: pointer; }
#kn-app .kn-language-control:focus-within { outline: 2px solid #20372e; outline-offset: 3px; border-color: #20372e; background: #ffffff59; }
@media (hover: hover) { #kn-app .kn-language-control:hover { border-color: #20372e80; background: #ffffff59; } }
@media (prefers-reduced-motion: reduce) { #kn-app .kn-language-control { transition: none; } }
@media (forced-colors: active) { #kn-app .kn-language-control { color: CanvasText; background: Canvas; border-color: ButtonText; } #kn-app .kn-language-control:focus-within { outline-color: Highlight; } }
.kn-policy-language { font: inherit; opacity: .75; white-space: nowrap; }
@font-face { font-family: "Noto Sans Arabic"; src: url('/assets/fonts/NotoSansArabic-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: "Noto Sans Thai"; src: url('/assets/fonts/NotoSansThai-Regular.woff2') format('woff2'); font-display: swap; }
/* A saved reading keeps its own language even after the UI language changes. */
#kn-app :lang(ar), html:lang(ar) #kn-app { --kn-font-ui: "Noto Sans Arabic", "Satoshi", "Pretendard", Arial, sans-serif; font-family: var(--kn-font-ui); letter-spacing: normal; line-height: 1.8; }
#kn-app :lang(th), html:lang(th) #kn-app { --kn-font-ui: "Noto Sans Thai", "Satoshi", "Pretendard", Arial, sans-serif; font-family: var(--kn-font-ui); letter-spacing: normal; line-height: 1.75; }
#kn-app [lang]:not(:lang(ar)):not(:lang(th)) { --kn-font-ui: "Satoshi", "Pretendard", "Name Korean", Arial, sans-serif; font-family: var(--kn-font-ui); }
html:is(:lang(ar),:lang(th)) #kn-app :is(h1,h2,h3,h4,.kn-journey-kicker,.kn-journey-scroll,.kn-eyebrow,.kn-language-code), #kn-app :is([lang="ar"],[lang="th"]) :is(h1,h2,h3,h4) { letter-spacing: normal; text-transform: none; }
html:is(:lang(ar),:lang(th)) #kn-app .kn-journey-intro h1, html:is(:lang(ar),:lang(th)) #kn-app .kn-journey-intro h1 em { line-height: 1.3; letter-spacing: normal; }
#kn-app [dir="rtl"] { text-align: start; }
html[dir="rtl"] #kn-app :is(.kn-field,.kn-result,.kn-reading-section,.kn-basic-topic,.kn-result-detail,.kn-process-copy,.kn-business-info,.kn-footer-nav) { text-align: start; }
html[dir="rtl"] #kn-app :is(ul,ol) { padding-left: 0; padding-inline-start: 1.5em; }
html[dir="rtl"] #kn-app :is(.kn-check,.kn-consent) { text-align: start; }
/* Keep physical camera movement, swiping and the card conveyor consistent. */
#kn-app :is(.kn-header,.kn-journey-art,.kn-journey-stops,.kn-card-gallery,.kn-process-pack,.kn-wordmark,.kn-footer-brand button,.kn-result h2,.kn-result-roman,#kn-chosen-name,#kn-chosen-roman,.kn-result-hanja,.kn-pillars,.kn-hanja,.kn-hangul) { direction: ltr; unicode-bidi: isolate; }
#kn-app .kn-wordmark, #kn-app .kn-footer-brand button { font-family: "Satoshi", Arial, sans-serif; }
html[dir="rtl"] #kn-app :is(.kn-header>.kn-text-button,.kn-pack-saju,.kn-pack-seal>span,.kn-card-gallery figcaption) { direction: rtl; }
#kn-app :is(input[type="email"],input[type="date"],input[type="time"],input[type="number"]) { direction: ltr; }
html[dir="rtl"] #kn-app .kn-result-hanja small { text-align: start; }
html[dir="rtl"] #kn-app :is(.kn-result h2,.kn-result-roman,#kn-chosen-name,#kn-chosen-roman) { text-align: right; }
html:not([lang="en"]) .kn-journey-intro h1 { text-transform: none; letter-spacing: -.045em; }
html:lang(ja), html:lang(zh) { word-break: normal; overflow-wrap: anywhere; }
html:lang(ja) #kn-app, html:lang(zh) #kn-app { line-break: strict; }
@media (max-width: 700px) {
  #kn-app .kn-header { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; row-gap: 0; }
  #kn-app .kn-header .kn-wordmark { grid-column: 1; grid-row: 1; justify-self: start; margin-right: 0; font-size: clamp(20px,6vw,25px); }
  #kn-app .kn-header .kn-language-control { grid-column: 2; grid-row: 1; justify-self: end; }
  #kn-app .kn-header .kn-text-button { grid-column: 1 / -1; grid-row: 2; justify-self: end; font-size: 11px; max-width: 100%; }
  html:not([lang="en"]) .kn-journey-intro h1 { font-size: clamp(25px,7.2vw,42px); }
  html:not([lang="en"]) .kn-journey-description { font-size: 13px; line-height: 1.5; }
  html:not([lang="en"]) #kn-app button, html:not([lang="en"]) #kn-app .kn-primary, html:not([lang="en"]) #kn-app .kn-secondary { white-space: normal; }
}