:root {
  color-scheme: dark;
  --warm: #ead8b5;
  --sans: 'DM Sans', 'Noto Sans TC', sans-serif;
}
* { box-sizing: border-box; }
html { background: #000; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: #000; color: #e8e4dc; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 1px solid #b4a58c; outline-offset: 8px; }
[hidden] { display: none !important; }
::selection { background: #665e49; color: #fff; }
.universe { position: fixed; inset: 0; overflow: clip; isolation: isolate; background: #000; touch-action: none; cursor: grab; }
.universe.dragging, .universe.dragging * { cursor: grabbing !important; user-select: none; }
#cosmos, .word-field, .vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
#cosmos { z-index: 0; pointer-events: none; }
.word-field { z-index: 2; pointer-events: none; }
.vignette { z-index: 3; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, #0003 85%, #0008 110%); }
.universe-header { position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 28px 38px; z-index: 10; pointer-events: none; }
.universe-header > * { pointer-events: auto; }
.wordmark { display: flex; align-items: center; gap: 13px; font-size: 14px; letter-spacing: 4px; color: #b8b0a0; transition: color .3s; }
.wordmark span { font-size: 8px; letter-spacing: 3px; color: #59554d; }
.wordmark:hover { color: #e4d6bb; }
.atlas-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 0 12px 10px; font-size: 11px; letter-spacing: 2px; color: #a09a8e; transition: color .3s; }
.atlas-toggle:hover { color: #e8dbc6; }
.atlas-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: .8; }
.word-star { position: absolute; top: 0; left: 0; width: 1px; height: 1px; transform: translate3d(var(--x), var(--y), 0); pointer-events: none; text-align: center; will-change: transform; color: #c7bda9; }
.word-star.visible { pointer-events: auto; }
.star-target { position: absolute; left: -100px; top: -22px; width: 200px; height: 116px; border-radius: 50%; z-index: 2; background: none; }
.star-target:focus-visible { outline: 1px solid #e4d2aa50; outline-offset: 5px; }
.star-core { position: absolute; width: 4px; height: 4px; left: -2px; top: -2px; border-radius: 50%; background: #e7d5b3; box-shadow: 0 0 6px 2px #e3c58c70, 0 0 18px 5px #b8893520; pointer-events: none; transform: scale(var(--star-depth,1)); }
.active .star-core { width: 6px; height: 6px; left: -3px; top: -3px; background: #fff7e8; box-shadow: 0 0 8px 3px #ffe5ac80, 0 0 28px 9px #dca95430, 0 0 65px 24px #d2ac5510; }
.star-label { position: absolute; top: 20px; left: 0; transform: translateX(-50%) scale(var(--label-scale, 1)); transform-origin: 50% 0; min-width: 120px; max-width: 340px; display: flex; align-items: center; flex-direction: column; pointer-events: none; white-space: nowrap; transition: opacity .7s; }
.star-word { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(21px, 2vw, 28px); font-weight: 400; line-height: 1.25; letter-spacing: .2px; color: #a59d8e; transition: color .35s, text-shadow .35s; }
.star-word mark { background: none; color: inherit; transition: color .8s; }
.star-chinese { margin-top: 8px; font-size: 11px; letter-spacing: 1.5px; color: #938978; line-height: 1.8; transition: color .7s; }
.word-star.active { z-index: 6; }
.word-star.active .star-word { font-size: clamp(36px, 3.5vw, 52px); color: #f1eadb; letter-spacing: .3px; text-shadow: 0 0 40px #e5cf8620; }
.word-star.active .star-word mark { color: #f1d4a0; }
.word-star.active .star-chinese { color: #c4b9a6; font-size: 14px; letter-spacing: 2px; margin-top: 11px; }
.word-star.active .star-target { width: 320px; left: -160px; }
.word-star.root .star-label { top: 26px; }
.word-star.root .star-word { font-size: clamp(60px, 6.2vw, 86px); color: #f0e7d5; letter-spacing: 1px; }
.word-star.root.long-root .star-word { font-size: clamp(35px, 5.5vw, 64px); }
.word-star.root .star-chinese { color: #c2b49b; font-size: 14px; letter-spacing: 5px; margin-top: 12px; }
.word-star.root.receded .star-label { top: 20px; }
.word-star.root.receded .star-word { font-size: 29px; letter-spacing: 1px; color: #c9b997; }
.word-star.root.receded .star-chinese { font-size: 11px; letter-spacing: 2px; color: #93856c; margin-top: 8px; }
.word-star.past .star-label { opacity: .78; }
.word-star.past:hover .star-label, .word-star.past:focus-within .star-label { opacity: 1; }
.word-star.past:hover .star-word, .word-star.past:focus-within .star-word { color: #eddbb5; }
.word-star.quiet .star-label { opacity: 0; }
.word-star.quiet .star-target { width: 30px; height: 30px; left: -15px; top: -15px; }
.word-star.quiet:hover, .word-star.quiet:focus-within { z-index: 8; }
.word-star.quiet:hover .star-label, .word-star.quiet:focus-within .star-label { opacity: 1; }
.root-tag { font-size: 9px; letter-spacing: 3px; position: absolute; top: -43px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #8a7d66; transition: opacity .8s; }
.word-star.root.receded .root-tag { opacity: 0; }
.star-detail { white-space: normal; width: min(310px, 78vw); text-align: center; pointer-events: auto; animation: fade-in .5s ease both; }
.word-construction { color: #ccba96; font-size: 12px; line-height: 1.8; letter-spacing: .4px; margin: 21px 0 14px; }
.word-construction mark { background: none; color: #f0d29c; }
.star-example { font: 15px/1.8 var(--sans); letter-spacing: .1px; color: #e2d8c7; margin: 0; }
.example-translation { color: #a89b87; font-size: 12px; line-height: 1.9; margin: 8px 0 12px; }
.listen-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #b9a78a; padding: 12px; font-size: 11px; letter-spacing: 1px; }
.listen-button:hover { color: #fff0d3; }
.listen-button svg { width: 16px; height: 16px; }
.scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; flex-direction: column; gap: 16px; transition: opacity 1s; color: #9d8e73; padding: 12px 28px 0; }
.scroll-cue span { font-size: 11px; letter-spacing: 3px; margin-left: 3px; white-space: nowrap; }
.scroll-cue:hover { color: #e6d0a6; }
.scroll-cue i { height: 32px; width: 1px; background: linear-gradient(#b3a38480, transparent); position: relative; }
.scroll-cue i::after { content: ''; position: absolute; top: 0; left: -1px; width: 3px; height: 5px; background: #b6a784; border-radius: 3px; animation: scroll-light 2.8s ease-in-out infinite; }
.step-indicator { position: absolute; bottom: 38px; right: 40px; display: flex; align-items: center; gap: 12px; z-index: 5; opacity: 0; transition: opacity 1s; font-size: 10px; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; color: #776b56; }
.step-indicator > span:first-child { color: #baa47d; }
.step-indicator i { width: 32px; height: 1px; background: #75694f70; }
.return-origin { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 2px; color: #b19e7e; padding: 12px; z-index: 10; animation: fade-in 1.5s both; white-space: nowrap; }
.return-origin:hover { color: #f1d7a6; }
.atlas-filters { display: flex; gap: 32px; position: absolute; left: 50%; transform: translateX(-50%); }
.atlas-filters button { color: #948875; font-size: 12px; letter-spacing: 3px; padding: 13px 0; position: relative; }
.atlas-filters button.active { color: #ebd3aa; }
.atlas-filters button.active::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 3px; height: 3px; transform: translateX(-50%); border-radius: 50%; background: #dbc7a3; box-shadow: 0 0 8px #dbc7a3; }
.atlas-star .star-word { font-size: clamp(25px, 2.5vw, 38px); color: #c8b797; }
.atlas-star .star-chinese { font-size: 11px; color: #9f8c69; white-space: normal; max-width: 145px; letter-spacing: 1px; }
.atlas-star .star-target { width: 150px; height: 126px; left: -75px; top: -22px; border-radius: 30px; }
.atlas-star .star-label { pointer-events: auto; cursor: pointer; }
.atlas-star .star-core { width: 3px; height: 3px; }
.atlas-star:hover .star-word, .atlas-star:focus-within .star-word { color: #ffdfaa; text-shadow: 0 0 35px #dcc28740; }
.atlas-star:hover .star-chinese { color: #d4b586; }
.atlas-star.discovered .star-core { background: #fff4dc; box-shadow: 0 0 12px 5px #e9c58c40; }
.in-atlas .step-indicator, .in-atlas .scroll-cue, .in-atlas .return-origin { display: none; }
.map-caption { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: #a39174; text-align: center; font-size: 11px; line-height: 1.9; letter-spacing: 2px; width: 90%; margin: 0; z-index: 10; pointer-events: none; }
.notice { position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%); color: #c4ac87; text-align: center; font-size: 12px; line-height: 1.9; width: 80%; max-width: 440px; z-index: 10; pointer-events: none; }
.sr-only { position: absolute; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
@keyframes scroll-light { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .7; } 80%, 100% { opacity: 0; transform: translateY(24px); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .universe-header { padding: 18px 22px; }
  .wordmark { font-size: 13px; gap: 9px; }
  .wordmark span { font-size: 7px; letter-spacing: 2px; }
  .atlas-toggle { font-size: 10px; gap: 8px; letter-spacing: 1px; }
  .atlas-toggle svg { width: 18px; height: 18px; }
  .star-word { font-size: 23px; }
  .star-chinese { font-size: 11px; letter-spacing: 1px; margin-top: 6px; }
  .word-star.active .star-word { font-size: clamp(31px, 9vw, 40px); }
  .word-star.active .star-chinese { font-size: 13px; letter-spacing: 1px; }
  .word-star.root .star-word { font-size: 66px; }
  .word-star.root.receded .star-word { font-size: 25px; }
  .word-star.root.receded .star-chinese { font-size: 10px; letter-spacing: 1px; }
  .star-label { top: 18px; min-width: 100px; }
  .root-tag { font-size: 9px; letter-spacing: 2px; }
  .step-indicator { right: 24px; bottom: 30px; font-size: 9px; gap: 8px; }
  .step-indicator i { width: 22px; }
  .scroll-cue { bottom: 24px; }
  .scroll-cue span { font-size: 10px; letter-spacing: 2px; }
  .atlas-filters { top: 78px; gap: 32px; }
  .atlas-filters button { font-size: 12px; }
  .atlas-star .star-word { font-size: 30px; }
  .atlas-star .star-chinese { font-size: 11px; max-width: 135px; }
  .return-origin { bottom: 68px; font-size: 10px; }
  .map-caption { font-size: 10px; bottom: 20px; letter-spacing: 1px; }
  .star-example { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* A star and its label always enter and leave the viewport together. */
.word-star.offstage { visibility: hidden; pointer-events: none; }
.star-label, .word-star.root .star-label, .word-star.root.receded .star-label { top: 10px; gap: 1px; max-width: min(330px, 86vw); }
.star-chinese { white-space: normal; max-width: min(300px, 85vw); letter-spacing: 1px; }
.word-star.active .star-chinese { margin-top: 5px; }
.word-star.root .star-word { font-size: clamp(52px, 5vw, 74px); }
.star-target { top: -15px; height: 106px; }
.header-actions { display: flex; align-items: center; gap: 24px; }
#language { color: #b4aa95; background: #070707; border: 0; font: 11px var(--sans); padding: 10px 5px; cursor: pointer; }
.wordmark .wordmark-label { font-size: 14px; color: #b8b0a0; letter-spacing: 3px; }
.autoplay { position: absolute; left: 36px; bottom: 31px; display: flex; align-items: center; justify-content: center; gap: 9px; z-index: 12; color: #ead6b2; background: #15120fdd; border: 1px solid #a58a555e; border-radius: 999px; font-size: 13px; letter-spacing: 1px; padding: 10px 18px; min-height: 46px; touch-action: manipulation; }
.autoplay svg { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
.pause-shape, .autoplay.playing .play-shape { display: none; }
.autoplay.playing .pause-shape { display: block; }
.autoplay:hover { color: #ffe9ba; }
.autoplay:focus-visible { outline: 2px solid #e7cca1; outline-offset: 5px; }
.opening .autoplay { left: 50%; top: calc(46% + 160px); bottom: auto; transform: translateX(-50%); min-width: 168px; min-height: 54px; padding: 14px 24px; background: #ebd4ab; color: #241d12; border-color: #f0debf; font-size: 15px; font-weight: 500; box-shadow: 0 0 38px #b68b3826; }
.opening .autoplay:hover { background: #f4e2c2; color: #241d12; }
.opening .word-star.root .star-label { width: min(300px, calc(100vw - 40px)); max-width: none; }
.opening .word-star.root .star-chinese { letter-spacing: 1.5px; }
.opening:lang(ko) .word-star.root .star-chinese { letter-spacing: 0; }
.opening .scroll-cue { top: calc(46% + 226px); bottom: auto; padding: 6px 16px; min-height: 32px; gap: 0; color: #a59a86; }
.opening .scroll-cue span { font-size: 11px; letter-spacing: 1px; }
.opening .scroll-cue i { display: none; }
.star-pos { color: #bca580; font-size: 11px; font-family: var(--sans); letter-spacing: 0; margin-right: 8px; white-space: nowrap; }
.word-star.active .star-pos { color: #d3b888; font-size: 12px; }
.privacy-open { position: absolute; bottom: 12px; left: 36px; z-index: 12; color: #8d8472; font-size: 9px; padding: 2px 0; }
.in-atlas .autoplay { display: none; }
.consent-prompt { position: absolute; z-index: 25; bottom: 82px; left: 24px; width: min(355px, calc(100vw - 48px)); padding: 17px 19px; background: #11100ff2; border: 1px solid #aa916733; border-radius: 12px; color: #d1c4ac; font-size: 12px; line-height: 1.8; box-shadow: 0 15px 70px #000; }
.consent-prompt p { margin: 0 0 10px; }
.consent-prompt div { display: flex; gap: 18px; }
.consent-prompt button { font-size: 11px; padding: 7px 0; color: #d9bd89; }
.consent-prompt button:last-child { color: #9b9384; }
.privacy-dialog { border: 1px solid #8e79544d; border-radius: 14px; background: #111; color: #d3c6b0; padding: 28px; max-width: min(470px, 90vw); line-height: 1.9; }
.privacy-dialog::backdrop { background: #000a; backdrop-filter: blur(5px); }
.privacy-dialog h2 { font: 22px var(--sans); }
.privacy-dialog p { font-size: 13px; }
.privacy-dialog button { display: block; color: #d8bb83; margin-top: 16px; font-size: 13px; }
:lang(ko) .star-chinese, :lang(ko) .word-star.active .star-chinese { letter-spacing: 0; }
@media(max-width:760px) {
 .universe-header { padding: 15px 18px; }
 .header-actions { gap: 12px; }
 .wordmark>span:not(.wordmark-label) { display: none; }
 .wordmark .wordmark-label { font-size: 13px; letter-spacing: 2px; }
 #language { font-size: 10px; max-width: 82px; }
 .atlas-toggle { font-size: 10px; gap: 5px; }
 .atlas-toggle svg { width: 16px; height: 16px; }
 .word-star.active .star-word { font-size: clamp(27px,8vw,36px); }
 .word-star .star-word { font-size: 21px; }
 .word-star.root .star-word { font-size: 55px; }
 .word-star.root.receded .star-word { font-size: 25px; }
 .word-star.active .star-chinese { font-size: 14px; }
 .scroll-cue { bottom: 88px; }
 .autoplay { left: 50%; transform: translateX(-50%); bottom: 27px; font-size: 12px; white-space: nowrap; }
 .opening .autoplay { top: calc(46% + 132px); font-size: 14px; min-height: 52px; }
 .opening .scroll-cue { top: calc(46% + 198px); }
 .opening .space-controls { bottom: 30px; }
 .privacy-open { left: 18px; bottom: 12px; }
 .step-indicator { bottom: 39px; right: 18px; }
 .return-origin { bottom: 98px; }
 .consent-prompt { left: 18px; bottom: 88px; width: calc(100vw - 36px); }
 .root-tag { letter-spacing: 1.5px; }
 .in-atlas .map-caption { bottom: 35px; }
}

.word-star.label-above .star-label { top: auto; bottom: 12px; }
.word-star.label-above .star-label { transform-origin: 50% 100%; }
.neighbor-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.neighbor-family { position: absolute; top: 0; left: 0; transform: translate3d(var(--x),var(--y),0) translate(-50%,-50%); text-align: center; padding: 16px 22px; pointer-events: auto; transition: color .3s; color: #b9a781; }
.neighbor-family span { font: 23px Georgia,serif; display: block; }
.neighbor-family small { display: block; margin-top: 5px; font-size: 9px; letter-spacing: 1px; }
.neighbor-family:hover { color: #fff0d0; }
.space-controls { position: absolute; right: 35px; bottom: 78px; z-index: 12; display: flex; align-items: center; gap: 4px; color: #a89b81; cursor: default; }
.space-controls button { min-width: 38px; min-height: 40px; font-size: 20px; padding: 8px; }
.space-controls svg { width: 18px; height: 18px; }
#overview-toggle { display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: 1px; margin-right: 7px; }
.space-controls button:hover, #overview-toggle[aria-pressed="true"] { color: #f0d6a0; }
.space-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: 1px; color: #756b58; z-index: 8; white-space: nowrap; pointer-events: none; }
.constellation .word-star .star-word, .constellation .word-star.active .star-word { font-size: 25px; letter-spacing: 0; color: #d8c9af; }
.constellation .word-star.root .star-word { font-size: 36px; color: #f0d6a0; }
.constellation .star-chinese, .constellation .word-star.active .star-chinese { font-size: 11px; margin-top: 5px; letter-spacing: 0; }
.constellation .word-star.past .star-label { opacity: 1; }
.constellation .star-core { width: 5px; height: 5px; left: -2.5px; top: -2.5px; background: #fff0d2; box-shadow: 0 0 7px 3px #e3c58c80, 0 0 24px 7px #b8893530; }
.constellation .word-star .star-label { min-width: 0; }
.constellation .word-star:not(.root) .star-chinese { display: none; }
.constellation .star-label { pointer-events: auto; cursor: pointer; }
.constellation .word-star .star-target { width: 44px; height: 44px; left: -22px; top: -22px; }
.constellation .word-star:hover { z-index: 8; }
.constellation .word-star:not(.root):hover .star-chinese, .constellation .word-star:not(.root):focus-within .star-chinese { display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #080807ed; padding: 5px 8px; border-radius: 4px; white-space: nowrap; }
.constellation .return-origin { bottom: 31px; }
.in-atlas .neighbor-field, .in-atlas #overview-toggle { display: none; }
@media(max-width:760px) {
 .space-controls { right: 12px; bottom: 80px; gap: 0; }
 .space-controls button { min-width: 40px; min-height: 44px; }
 #overview-toggle { margin-right: 2px; font-size: 9px; gap: 6px; }
 .space-hint { bottom: 12px; font-size: 8px; }
 .scroll-cue { bottom: 142px; }
 .constellation .word-star .star-word, .constellation .word-star.active .star-word { font-size: 21px; }
 .constellation .star-chinese { display: none; }
 .constellation .word-star.root .star-chinese { display: block; }
 .constellation .word-star.root .star-word { font-size: 31px; }
 .constellation .return-origin { bottom: 132px; }
 .constellation .word-star .star-target { width: 44px; left: -22px; top: -22px; height: 44px; }
 .atlas-star .star-word { font-size: 22px; }
 .atlas-star .star-chinese { font-size: 9px; max-width: 100px; line-height: 1.4; margin-top: 3px; }
 .atlas-star .star-label { min-width: 80px; }
 .atlas-star .star-target { width: 116px; left: -58px; height: 66px; }
 .atlas-star[data-family="script"] .star-word { font-size: 17px; }
}

@media(max-width:760px){#language,.atlas-toggle{min-height:44px}.privacy-open{min-height:32px;min-width:48px;bottom:2px}.consent-prompt button,.listen-button{min-height:44px}}

/* Study is an intentional full-screen mode; the opening galaxy stays sparse. */
.study-open { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 14px; border: 1px solid #a58a555e; border-radius: 999px; color: #e8d1a6; font-size: 12px; white-space: nowrap; }
.study-open:hover { border-color: #d3b27a; }
.study-open small { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; background: #e8d1a6; border-radius: 50%; color: #211a0e; font-size: 10px; }
.atlas-filters { top: 84px; }
.word-detail-actions { display: flex; align-items: center; justify-content: center; }
.add-review { min-height: 44px; padding: 8px 10px; color: #d9c094; font-size: 11px; }
.family-actions { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.family-actions .return-origin, .constellation .family-actions .return-origin { position: static; transform: none; padding: 12px 0; font-size: 10px; }
.family-review { min-height: 44px; padding: 10px 18px; border: 1px solid #a58a5577; border-radius: 999px; color: #eed6ae; background: #13100c; font-size: 12px; }
.in-atlas .family-actions { display: none; }
.return-origin, .constellation .return-origin { bottom: 84px; }
.study-dialog { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; padding: 0; border: 0; background: #030303f8; color: #e8e0d2; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; cursor: default; }
.study-dialog::backdrop { background: #000b; }
.study-dialog button, .study-dialog select { touch-action: manipulation; }
.study-shell { width: min(760px, 100%); min-height: 100%; margin: auto; padding: 26px 32px 20px; display: flex; flex-direction: column; }
.study-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 40px; }
.study-brand { font-size: 10px; color: #938775; letter-spacing: 3px; }
.study-header-right { display: flex; align-items: center; gap: 12px; }
.study-back, .study-close { color: #c1b39d; min-height: 44px; min-width: 44px; }
.study-back { padding: 8px 0; font-size: 12px; }
.study-close { font-size: 28px; font-weight: 400; }
#study-language, #billing-language { font: 12px var(--sans); color: #c1b39d; background: #080807; border: 0; min-height: 44px; padding: 8px; }
.study-content { flex: 1; }
.study-content > h1 { font: 400 clamp(27px, 4vw, 36px)/1.35 var(--sans); margin: 0 0 14px; letter-spacing: -.3px; }
.study-intro { font-size: 13px; line-height: 1.9; color: #a69b89; margin: 0 0 26px; }
.study-due { padding: 18px 0 26px; border-bottom: 1px solid #b79a622b; }
.study-due > span, .section-caption { color: #bba480; font-size: 11px; letter-spacing: 1px; }
.study-due p { font-size: 15px; line-height: 1.6; margin: 10px 0 14px; }
.study-button { min-height: 48px; padding: 12px 22px; border: 1px solid #b79a625c; border-radius: 999px; font-size: 13px; color: #d8c7ab; line-height: 1.5; }
.study-button.primary { background: #e8d1a6; color: #241d12; border-color: #e8d1a6; }
.study-button:hover { border-color: #e8d1a6; }
.study-button.primary:hover { background: #f0dfbe; }
.pack-list { display: grid; gap: 0; }
.pack-choice { padding: 29px 0; display: flex; align-items: flex-start; text-align: left; gap: 22px; border-bottom: 1px solid #b79a622b; }
.pack-orbit { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #e8d1a6; box-shadow: 0 0 14px 5px #e8d1a61a; margin-top: 14px; }
.pack-copy { flex: 1; min-width: 0; }
.pack-copy > strong { display: block; font: 400 clamp(23px, 4vw, 30px)/1.3 Georgia, serif; color: #eee4d2; }
.pack-copy > span { display: block; margin-top: 7px; color: #c5ae86; font-size: 12px; }
.pack-copy p { color: #a49b8c; font-size: 12px; line-height: 1.8; margin: 13px 0; }
.pack-copy small { color: #968772; font-size: 10px; line-height: 1.8; display: block; }
.pack-arrow { color: #c5ae86; font-size: 20px; margin-top: 9px; }
.pack-choice:hover .pack-copy > strong { color: #ffe6b6; }
.study-note, .study-footer { color: #8f8575; font-size: 11px; line-height: 1.8; }
.study-note { margin: 20px 0; }
.study-footer { padding-top: 30px; text-align: center; }
.study-stat { color: #cab491; font-size: 12px; line-height: 1.9; }
.pack-summary { display: inline-block; color: #d3bd96; font-size: 12px; line-height: 1.8; margin: 10px 18px 0 0; }
.pack-summary + .study-stat { display: inline-block; margin: 10px 0 0; }
.pack-summary ~ .study-actions { margin: 16px 0 0; }
.pack-summary ~ .section-caption { margin-top: 18px; }
.study-constellations button { padding-top: 16px; padding-bottom: 16px; }
.category-count { display: block; color: #c1a879; font-size: 10px; font-style: normal; margin-top: 7px; }
.study-session-size { color: #9d907a; font-size: 11px; margin: 8px 0 20px; line-height: 1.8; }
.locked-category > span { color: #b9a98f; }
.billing-shell { max-width: 640px; }
.billing-shell .study-header { margin-bottom:18px; }
.billing-shell .study-content > h1 { font-size: clamp(26px,4vw,34px); }
.billing-intro { color: #b9ab96; font-size: 13px; line-height: 1.9; margin: 18px 0; }
.billing-category { color: #d3b78d; font-size: 12px; margin: 18px 0; }
.billing-price { font: 68px/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; color: #f0d8af; margin: 30px 0 0; }
.billing-price-label { display: block; font: 14px/1.8 var(--sans); color: #ac9572; margin-bottom: 12px; }
.billing-price-line { display:flex; align-items:baseline; gap:14px; }
.billing-price-amount { display:inline-flex; align-items:baseline; gap:0; }
.billing-price-amount > span { font:inherit; line-height:1; }
.price-figure { font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; }
.membership-offer { display:grid; grid-template-columns:1fr 1.1fr; column-gap:24px; margin:22px 0; }
.membership-offer > .billing-price { grid-column:1; grid-row:1; }
.membership-offer > .billing-year-benefit { grid-column:1; grid-row:2; }
.membership-offer > .billing-renew { grid-column:1; grid-row:3; margin-bottom:0; }
.membership-offer > .offer-deadline { grid-column:2; grid-row:1 / span 3; margin:4px 0 0; }
.offer-launch { font: 14px/1.8 var(--sans); color: #c6b395; }
.membership-offer .billing-price { margin-top: 18px; }
.billing-price s { font-size: .48em; color: #94836b; text-decoration-thickness: 1px; vertical-align: middle; margin-right: 8px; }
.billing-context { margin:14px 0; padding:0 0 10px; border-bottom:1px solid #a18b6133; }
.billing-breadcrumb { color:#d6c5a5; font-size:13px; line-height:1.8; margin:0 0 6px; }
.billing-breadcrumb > span { margin:0 8px; color:#7e715c; }
.billing-module-copy { font-size:13px; line-height:1.8; color:#b6a58c; margin:4px 0; }
.billing-module-copy b { font-weight:400; font-size:24px; font-variant-numeric:lining-nums tabular-nums; color:#e7cf9f; }
.billing-modules { margin-top:12px; font-size:12px; color:#c8b593; }
.billing-modules summary { cursor:pointer; width:fit-content; padding:7px 0; }
.billing-modules > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; margin-top:8px; }
.billing-modules button { text-align:left; padding:12px 0; border-bottom:1px solid #a18b6128; display:flex; flex-direction:column; gap:6px; min-height:60px; }
.billing-modules button[aria-current] { color:#f0d8af; }
.billing-modules button[aria-current] > span::after { content:' ·'; color:#f0d8af; }
.billing-modules small { color:#aa9b85; font-size:11px; }
.billing-modules small b { font-size:18px; font-weight:400; color:#d5bf96; }
.billing-value-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.billing-value-stats > div { display:flex; flex-direction:column; gap:10px; }
.billing-value-stats strong { font:clamp(26px,5.5vw,38px)/1.2 var(--sans); font-variant-numeric:lining-nums tabular-nums; color:#ead2a8; white-space:nowrap; }
.billing-value-stats span { font-size:11px; line-height:1.6; color:#b7a48a; }
@media(max-width:600px){
 .membership-offer { display:block; margin:14px 0; }
 .membership-offer > .offer-deadline { margin-top:16px; }
 .billing-context { margin:8px 0; padding-bottom:5px; }
 .billing-value-stats { margin:16px 0; }
}
.offer-deadline { border-left: 1px solid #998056; padding: 4px 0 4px 16px; margin: 20px 0 24px; color: #cbbb9e; }
.offer-countdown-label { font-size:12px; color:#b7a48a; }
.offer-deadline strong { font: 28px/1.5 var(--sans); font-variant-numeric:lining-nums tabular-nums; color: #ead4ac; white-space:nowrap; }
.offer-deadline p { font: 12px/1.8 var(--sans); margin: 6px 0 0; }
.offer-compact { margin: 12px auto 0; font-size: 13px; line-height: 1.6; color: #d8c39c; }
.offer-compact p { margin: 0; }
.offer-compact s { color: #928672; margin-right: 5px; }
.offer-compact span { font-size: 11px; }
.offer-compact small { display: block; font-size: 11px; margin-top: 3px; font-variant-numeric: tabular-nums; color: #b7a98f; }
.billing-renew { color: #b6a17f; font-size: 12px; margin: 8px 0 26px; }
.billing-year-benefit { color:#e1cda9; font-size:13px; line-height:1.8; margin:14px 0 0; }
.billing-included { color: #ddc49a; font-size: 12px; line-height: 1.8; }
.billing-benefits { color: #b8ad9a; font-size: 12px; line-height: 1.9; margin-bottom: 24px; }
.billing-terms, .billing-preview { color: #958976; font-size: 11px; line-height: 1.9; margin: 17px 0; }
.billing-message { color: #c9ae82; font-size: 12px; line-height: 1.9; }
.billing-period { color: #d1b68b; font-size: 13px; line-height: 1.9; }
.billing-dialog .study-button[disabled] { cursor: default; opacity: .5; }
.billing-link-label, #restore-form label { display: block; font-size: 12px; color: #c5af89; margin: 22px 0 9px; }
.billing-link { width: 100%; min-height: 48px; padding: 13px; border: 1px solid #bba06a66; border-radius: 8px; background: #0b0a08; color: #e1d0b0; font: 12px/1.5 var(--sans); }
.billing-portal-link { display: inline-flex; align-items: center; min-height: 44px; color: #c9ae82; font-size: 12px; line-height: 1.8; text-decoration: underline; text-underline-offset: 4px; }
.study-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 32px; }
.study-constellations { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 26px; }
.study-constellations button { position: relative; padding: 22px 25px 22px 0; text-align: left; border-bottom: 1px solid #b79a622b; min-height: 84px; }
.study-constellations span { display: block; font: 25px/1.3 Georgia, serif; color: #e3d2b4; }
.study-constellations small { display: block; font-size: 11px; color: #9c8d76; margin-top: 6px; line-height: 1.7; }
.study-constellations i { position: absolute; right: 0; top: 26px; font-style: normal; color: #b79a62; }
.study-session-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #ac9b80; font-size: 11px; line-height: 1.7; }
.study-session-head > span:first-child { color: #7f7566; max-width: 48%; }
.study-progress { height: 1px; background: #d2b98126; margin-top: 14px; }
.study-progress i { display: block; height: 1px; background: #d2b981; transition: width .2s ease; }
.study-card { margin: 34px auto 0; width: min(540px, 100%); text-align: center; animation: fade-in .18s ease both; }
.study-star { display: block; width: 7px; height: 7px; margin: 0 auto 19px; background: #fff1d3; border-radius: 50%; box-shadow: 0 0 12px 5px #e5c79135, 0 0 60px 18px #e5c7910a; }
.study-word { margin: 0; font: 400 clamp(34px, 7vw, 54px)/1.2 Georgia, serif; color: #f1e5cf; overflow-wrap: anywhere; }
.study-pos { display: block; color: #ae9368; font-size: 12px; margin-top: 10px; }
.study-answer { min-height: 58px; display: grid; place-items: center; padding: 10px 0; }
.study-meaning { font-size: 17px; line-height: 1.8; color: #e0ceb0; margin: 0; }
.study-recall-hint { color: #8f8575; font-size: 12px; line-height: 1.8; margin: 0; }
.study-example { padding-top: 13px; }
.study-example > span { color: #837968; font-size: 10px; }
.study-example > p[lang] { color: #e0d6c5; font-size: 18px; line-height: 1.7; margin: 9px 0 7px; }
.study-translation { color: #a89b85; font-size: 12px; line-height: 1.8; margin: 0; }
.study-example button { min-height: 44px; color: #b69c74; font-size: 11px; padding: 8px 14px; }
.study-card-controls { min-height: 156px; padding-top: 18px; }
.study-card-controls > .study-button { min-width: 180px; margin-top: 12px; }
.study-rating-help { color: #b2a48e; font-size: 11px; line-height: 1.8; margin: 0 0 12px; }
.study-ratings { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.study-ratings button { border: 1px solid #c6a97350; border-radius: 10px; min-height: 72px; padding: 10px 4px; font-size: 13px; color: #e2cdae; }
.study-ratings button:hover { border-color: #d7b981; background: #c4a66e0d; }
.study-ratings [data-rating="again"] { border-color: #ad817150; color: #d0aba0; }
.study-ratings [data-rating="good"] { border-color: #d0b78a; background: #dec29812; }
.study-ratings small { display: block; color: #8e816c; font-size: 10px; margin-top: 8px; }
.study-retry-hint { font-size: 10px; line-height: 1.8; color: #7f7566; margin: 12px 0 0; }
.study-finish { padding-top: 45px; }
.study-finish > p:first-of-type { font-size: 24px; color: #e7d5b7; }
.study-finish .study-star { margin-left: 0; }
.study-dialog button:focus-visible, .study-dialog select:focus-visible { outline: 1px solid #e8d1a6; outline-offset: 4px; }
.study-content h1:focus-visible { outline: none; }
@media(max-width:760px) {
 .header-actions { gap: 8px; }
 .study-open { font-size: 11px; padding: 8px 10px; }
 .atlas-toggle span { display: none; }
 .atlas-toggle { width: 44px; justify-content: center; padding: 10px; }
 .at-end .family-actions { left: auto; right: 18px; bottom: 38px; transform: none; }
 .at-end .autoplay { left: 18px; bottom: 38px; transform: none; padding: 8px 13px; font-size: 11px; }
 .at-end .space-controls { bottom: 92px; }
 .at-end .step-indicator { bottom: 10px; }
 .at-end .return-origin, .at-end.constellation .return-origin { bottom: 0; padding: 7px 0; min-height: 32px; font-size: 9px; letter-spacing: 0; }
 .at-end .space-hint { display: none; }
 .family-actions .return-origin, .constellation .family-actions .return-origin { min-height: 32px; padding: 6px 0; font-size: 9px; }
 .family-review { font-size: 11px; }
 .study-shell { padding: max(16px, env(safe-area-inset-top)) 22px max(16px, env(safe-area-inset-bottom)); }
 .study-header { margin-bottom: 25px; }
 .study-content > h1 { font-size: 27px; }
 .study-intro { font-size: 12px; margin-bottom: 18px; }
 .pack-choice { padding: 23px 0; gap: 14px; }
 .pack-copy > strong { font-size: 24px; }
 .pack-copy small { font-size: 10px; }
 .study-constellations { gap: 8px 18px; }
 .study-constellations span { font-size: 23px; }
 .study-session-head { font-size: 10px; }
 .study-card { margin-top: 26px; }
 .study-card-controls { padding-top: 12px; }
 .study-ratings { gap: 7px; }
 .study-ratings button { font-size: 12px; min-height: 67px; }
 .study-example > p[lang] { font-size: 16px; }
 .study-rating-help { font-size: 10px; }
 .study-footer { padding-top: 18px; font-size: 10px; }
}
@media(max-height:650px) {
 .study-header { margin-bottom: 14px; }
 .study-card { margin-top: 18px; }
 .study-star { margin-bottom: 10px; }
 .study-word { font-size: 34px; }
 .study-pos { margin-top: 6px; }
 .study-answer { min-height: 48px; padding: 6px 0; }
 .study-example { padding-top: 4px; }
 .study-example > p[lang] { margin-top: 5px; }
 .study-card-controls { padding-top: 6px; min-height: 130px; }
 .study-retry-hint { margin-top: 8px; }
 .study-footer { padding-top: 12px; }
}
.exam-summary{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#d1c29e;margin:28px 0 12px}.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0}.theme-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:25px 23px;border:1px solid #d1bc8028;border-radius:16px;background:linear-gradient(145deg,#d5bd7a09,#ffffff02);transition:border-color .2s,background .2s;min-height:285px}.theme-card:hover{border-color:#d1bc8070;background:#d5bd7a10}.theme-card strong{font-weight:400;font-size:22px;margin:18px 0 7px;color:#e8d7b3}.theme-card>span[lang]{font:13px Georgia,serif;color:#a89b80}.theme-card p{font-size:12px;color:#9f9889;line-height:1.9;margin:18px 0}.theme-card small{font-size:11px;color:#c2b28b;margin-top:auto}.theme-card em{font-style:normal;font-size:9px;color:#6d685c;margin-top:12px;line-height:1.7}.theme-enter{font-size:11px;color:#d4c096;margin-top:20px}.theme-level{font-size:10px;letter-spacing:2px;color:#9a8961}.study-account{font-size:11px;color:#bcaa84;padding:8px}.study-note a{color:#c7b48e;text-decoration:underline;text-underline-offset:4px}.exam-choice .pack-copy>small{display:block;line-height:2}
@media(max-width:600px){.theme-grid{grid-template-columns:1fr;gap:12px}.theme-card{min-height:250px;padding:22px}.theme-card strong{font-size:23px}.exam-summary{font-size:12px;gap:12px}.study-header-right{gap:8px}.study-account{font-size:10px}.wordmark span{display:none}.header-actions{gap:10px}#account-open{font-size:10px}}
/* Exam collection: readable value copy, progress at right, one clear action. */
.study-library { width: min(1100px, 100%); }
.study-library .study-intro { font-size: 16px; line-height: 1.85; }
.study-library .pack-list { grid-template-columns: 1fr; gap: 0; margin-top: 28px; border-top: 1px solid #b79a6238; }
.study-library .pack-choice { display: grid; grid-template-columns: 10px minmax(0, 1fr) 180px; grid-template-areas: "dot copy progress" "dot copy action"; gap: 24px; padding: 34px 0; text-align: left; border: 0; border-bottom: 1px solid #b79a6238; border-radius: 0; background: transparent; }
.study-library .pack-orbit { grid-area: dot; margin-top: 16px; }
.study-library .pack-copy { grid-area: copy; display: block; min-width: 0; }
.study-library .pack-copy > strong { font-size: clamp(29px, 3.3vw, 38px); line-height: 1.2; }
.study-library .pack-copy > span:not(.exam-facts) { font-size: 17px; margin-top: 11px; color: #d4bd95; }
.study-library .pack-copy p { font-size: 17px; line-height: 1.85; color: #c0b8a8; margin: 18px 0; max-width: 650px; }
.study-library .exam-facts { display: grid; gap: 7px; font-size: 16px; line-height: 1.65; color: #c6b58e; }
.exam-facts b { font-weight: 500; color: #eee0c5; }
.exam-level { display: inline-block; margin-left: 16px; color: #b2a78d; font-size: 14px; }
.exam-progress { grid-area: progress; align-self: start; justify-self: end; text-align: right; display: grid; gap: 8px; padding-top: 5px; }
.exam-progress-label { font-size: 14px; color: #b8aa8e; letter-spacing: 1.5px; }
.exam-progress-count { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exam-progress-count strong { font-size: 58px; line-height: 1; font-weight: 400; color: #efdcad; letter-spacing: -2px; }
.exam-progress-count > span { font-size: 19px; color: #a99d86; }
.exam-continue { grid-area: action; align-self: end; justify-self: end; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; line-height: 1.4; color: #e9d3a4; border-bottom: 1px solid #d1b57768; padding: 8px 0; white-space: nowrap; }
.exam-continue > span { font-size: 23px; transition: transform .2s; }
.exam-choice:hover .exam-continue > span { transform: translateX(4px); }
.study-library .study-due { padding: 10px 0 18px; }
.study-library .study-note { margin: 24px 0 16px; font-size: 13px; }
.theme-card p { font-size: 16px; line-height: 1.8; color: #b8b0a0; }
.theme-card small { font-size: 15px; line-height: 1.7; }
.theme-card em { font-size: 12px; line-height: 1.75; color: #9f9580; }
.theme-enter { font-size: 15px; }
.exam-summary { font-size: 16px; line-height: 1.75; }
@media (max-width: 600px) {
 .study-library .study-intro { font-size: 15px; }
 .study-library .pack-choice { grid-template-columns: 8px minmax(0, 1fr); grid-template-areas: "dot copy" ". progress" ". action"; gap: 18px 14px; padding: 28px 0; }
 .study-library .pack-orbit { margin-top: 12px; }
 .study-library .pack-copy > strong { font-size: 30px; }
 .study-library .pack-copy > span:not(.exam-facts) { font-size: 16px; }
 .study-library .pack-copy p { font-size: 16px; margin: 16px 0; }
 .study-library .exam-facts { font-size: 15px; }
 .exam-progress { padding-top: 2px; gap: 6px; }
 .exam-progress-count strong { font-size: 52px; }
 .exam-progress-count > span { font-size: 18px; }
 .exam-continue { font-size: 16px; }
 .exam-level { margin-left: 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .exam-continue > span { transition: none; } }

.study-morphology{font-size:13px;line-height:1.8;color:#c4b186;max-width:560px;margin:10px auto 0;overflow-wrap:anywhere}.study-constellations small{line-height:1.8}.study-constellations [data-explore^=morph-]>span{font-size:25px}

/* Free exploration, training and exam learning have separate entry points. */
.universe-header{gap:24px;align-items:center}
.header-actions{gap:22px}
.header-actions>button,.header-actions>select,#account-open{font-size:13px;letter-spacing:.4px;min-height:44px;white-space:nowrap;color:#c3b69c}
.header-actions .atlas-toggle{width:auto;padding:0;gap:0}
.header-actions .atlas-toggle span{display:inline}
.header-actions .study-open{padding:9px 17px}
.header-actions .training-open{padding:9px 0}
.training-open small{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:7px;border-radius:50%;background:#d4be901f;color:#e6cf9f;font-size:11px}
.atlas-filters{top:86px;gap:34px}
.atlas-filters button{font-size:14px}
.atlas-star .star-label{min-width:120px;max-width:180px;gap:7px}
.atlas-star .star-chinese{max-width:180px;line-height:1.65;font-size:13px;letter-spacing:.4px}
.atlas-pages{position:absolute;bottom:75px;left:50%;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:24px;color:#c6b692;font-size:13px}
.atlas-pages button{min-width:44px;min-height:44px;font-size:20px}
.atlas-pages button:disabled{opacity:.25;cursor:default}
.map-caption b{font-size:20px;font-weight:400;color:#e7d2a9}
.training-summary{padding:30px 0 24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:16px}
.training-summary>span{font-size:15px;color:#c6b89b}
.training-summary>strong{font-size:60px;font-weight:400;color:#ecd5a9;font-variant-numeric:lining-nums tabular-nums;line-height:1.1}
.training-summary>p{width:100%;margin:0;font-size:15px;line-height:1.8;color:#b2a58b}
.training-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0}
.training-groups>button{border:1px solid #a18b5738;border-radius:12px;padding:22px;text-align:left;display:flex;flex-direction:column;gap:12px;min-width:0}
.training-groups>button[aria-pressed=true]{border-color:#dbc18c;background:#d3b6760b}
.training-groups span{font-size:17px;color:#e0d0b2}
.training-groups strong{font-size:38px;font-weight:400;color:#e7d1a6;font-variant-numeric:lining-nums tabular-nums}
.training-groups small{font-size:12px;color:#b4a688}
.training-scope{display:flex;gap:22px;flex-wrap:wrap;margin:26px 0}
.training-scope button{min-height:44px;padding:5px 0;color:#9e927b;font-size:14px}
.training-scope button[aria-pressed=true]{color:#f0dba9;border-bottom:1px solid #ddc18a}
.training-current{padding:20px 0 32px}
.training-current h2,.training-exams h2{font-size:23px;font-weight:400;color:#e1cda8}
.training-families{border-top:1px solid #aa8e552c;padding:20px 0}
.training-families summary{cursor:pointer;min-height:44px;font-size:15px;color:#bdad8f;line-height:2}
.training-exams{margin-top:36px;border-top:1px solid #aa8e552c;padding-top:22px}
.training-exams p{font-size:16px;line-height:1.85;color:#b9ad98}
@media(max-width:980px){.header-actions{gap:14px}.header-actions>button,.header-actions>select,#account-open{font-size:12px}.universe-header{padding:18px 24px}.wordmark>span:not(.wordmark-label){display:none}}
@media(max-width:680px){
 .universe-header{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 16px}
 .wordmark .wordmark-label{display:inline;font-size:13px;line-height:18px}
 .header-actions{width:100%;gap:8px;justify-content:space-between}
 .header-actions>button,.header-actions>select,#account-open{font-size:11px;letter-spacing:0;min-height:44px;padding:4px 0}
 .header-actions .study-open{padding:5px 10px;font-size:11px}
 .header-actions .atlas-toggle{width:auto;padding:0}
 .header-actions .atlas-toggle span{display:inline}
 #language{max-width:73px;padding:3px 0;font-size:11px}
 .training-open small{position:absolute;top:47px;margin-left:-5px;width:14px;min-width:14px;height:14px;font-size:9px}
 .atlas-filters{top:98px;gap:32px}
 .atlas-star .star-label{width:128px;min-width:0;max-width:128px}
 .atlas-star .star-chinese{max-width:128px;font-size:12px;line-height:1.65}
 .atlas-star .star-word{font-size:25px}
 .atlas-pages{bottom:68px}
 .training-groups{gap:10px}
 .training-groups>button{padding:18px 12px}
 .training-groups strong{font-size:30px}
 .training-summary>strong{font-size:52px}
}

@media(max-width:680px){.header-actions>button,.header-actions>select,#account-open{font-size:12px}#language{position:absolute;top:4px;right:16px;font-size:12px;min-height:32px;max-width:90px}.header-actions .study-open{font-size:12px}}

.welcome-intro{position:absolute;top:clamp(108px,17vh,190px);left:50%;width:min(700px,calc(100% - 40px));transform:translate(-50%,-6px);text-align:center;z-index:9;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s,transform .55s,visibility .55s}
.welcome-visible .welcome-intro{opacity:1;visibility:visible;transform:translate(-50%,0)}
.welcome-audience{margin:0 0 8px;font-size:14px;line-height:1.7;letter-spacing:.5px;color:#c0b49f}
.welcome-intro h1{display:flex;align-items:center;justify-content:center;gap:15px;margin:0;font:400 clamp(24px,2.6vw,34px)/1.3 var(--sans);letter-spacing:.3px;color:#ecdaba;white-space:nowrap}
.welcome-intro h1>span{font-size:.7em;color:#9f8962}
.welcome-intro h1 button{padding:0;min-height:44px;color:inherit;font:inherit;letter-spacing:inherit;border-bottom:1px solid #b89a5d40;transition:color .2s,border-color .2s;pointer-events:none}
.welcome-visible .welcome-intro h1 button{pointer-events:auto}
.welcome-intro h1 button:hover,.welcome-intro h1 button:focus-visible{color:#ffe6b8;border-bottom-color:#dfc38b}
.welcome-description{margin:9px 0 0;font-size:16px;line-height:1.7;letter-spacing:.2px;color:#b5a991}
.in-atlas .welcome-intro,.in-pack-preview .welcome-intro{display:none}
@media(max-width:680px){.welcome-audience{font-size:13px;letter-spacing:0;margin-bottom:6px}.welcome-intro h1{font-size:25px;gap:10px}.welcome-description{font-size:15px;margin-top:7px;line-height:1.65}}
@media(max-width:360px){.welcome-intro h1{font-size:23px;gap:9px}}
@media(max-height:620px){.welcome-intro{top:92px}.welcome-description{display:none}.welcome-audience{font-size:12px;line-height:1.6;margin-bottom:3px}.welcome-intro h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){.welcome-intro{transition:none;transform:translateX(-50%)}}

/* The root clue stays part of practice, with body-sized supporting text. */
.word-star{transition:opacity .4s ease}
.star-word,.star-chinese,.star-label{transition-duration:.4s}
.study-intro,.study-stat,.pack-summary,.billing-intro,.billing-benefits{font-size:16px;line-height:1.85;color:#cfc4b1}
.study-note,.study-library .study-note,.study-footer,.study-rating-help,.study-retry-hint,.study-session-head,.study-session-size,.study-recall-hint{font-size:14px;line-height:1.85;color:#bdb3a2}
.study-session-head>span:first-child{color:#c8b99d}
.study-footer{border-top:1px solid #b69d6926;margin-top:24px;padding-top:20px}
.study-word-parts{max-width:600px;margin:16px auto 8px;padding:16px 18px;border:1px solid #d5b87940;border-radius:12px;background:#d5b87909;text-align:left}
.study-word-parts>span{font-size:14px;line-height:1.7;color:#c0b39a}
.study-word-parts .word-part{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.study-morphology{font-size:17px;line-height:1.9;color:#f0d8ab;margin:6px 0 0}
.study-ratings button{font-size:15px;min-height:82px}
.study-ratings small{font-size:14px;color:#c3b394}
.study-example>span,.study-pos,.study-translation{font-size:15px;color:#c5baa7}
.study-translation{line-height:1.85}
.study-back,.study-account,.study-header select{font-size:14px;min-height:44px}
.study-button{font-size:16px;min-height:48px}
.study-content{overflow-wrap:break-word}
.account-progress-note,.account-privacy,.account-progress-details,.account-exams>p{font-size:14px;line-height:1.85;color:#c1b6a3}
.word-star.active .star-chinese{font-size:14px;color:#d2c3aa}
.theme-card p,.theme-card small,.theme-enter,.exam-summary,.billing-terms,.billing-preview,.billing-renew,.billing-year-benefit,.billing-value-stats span{font-size:14px;line-height:1.85;color:#c5b79f}
.theme-card em{font-size:13px;color:#b2a58e}
.learning-overview{padding:22px 0;margin:24px 0;border-block:1px solid #bda36a40}
.learning-overview>p{font-size:15px;line-height:1.8;margin:8px 0;color:#cbbda3}
.learning-overview>strong{font-size:42px;color:#f0d8ab;font-weight:400;font-variant-numeric:tabular-nums}
.learning-overview>strong>span{font-size:18px}
.learning-overview .study-note{max-width:660px}
.learning-overview .study-button{margin-top:12px}
.review-appointment{margin:28px 0;max-width:580px;border-left:2px solid #c9ac76;padding-left:22px}
.review-appointment>span{font-size:16px;color:#c5b99f}
.review-appointment>strong{display:block;font-size:clamp(24px,4vw,34px);line-height:1.6;font-weight:400;color:#f0d8ab;margin:10px 0}
.review-appointment>p{font-size:16px;line-height:1.9;color:#c8bba4}
.atlas-training{display:none;position:absolute;z-index:12;left:50%;transform:translateX(-50%);bottom:95px;padding:10px 22px;border:1px solid #bda36a60;border-radius:30px;color:#efdbb5;font-size:15px;min-height:46px;background:#0c0b08e8}
.in-atlas .atlas-training{display:block}
.next-star{position:absolute;bottom:31px;left:230px;z-index:12;min-height:46px;padding:10px 18px;border:1px solid #bda36a60;border-radius:30px;font-size:14px;color:#f0d8ab;background:#15120fdd;touch-action:manipulation}
.in-pack-preview .next-star,.in-atlas .next-star{display:none}
.welcome-intro h1{gap:12px;white-space:normal;flex-wrap:wrap;font-size:clamp(25px,2.6vw,34px)}
.welcome-intro h1>#welcome-headline{font:inherit;color:inherit}
.welcome-included{margin:8px 0 0;font-size:14px;line-height:1.7;color:#bbae97}
.welcome-included button{color:#dbc7a3;text-decoration:underline;text-underline-offset:4px;min-height:30px;padding:2px 4px;pointer-events:none}
.welcome-visible .welcome-included button{pointer-events:auto}
.billing-currency{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.7;color:#c8bba4;margin-top:20px}
.billing-currency select{min-height:44px;padding:8px 12px;color:#edd9b4;background:#15120d;border:1px solid #bda36a60;border-radius:6px;font:inherit}
.billing-price{font-size:clamp(40px,6vw,60px)}
.billing-price-amount>small{font:16px var(--sans);margin-right:6px}
.billing-exchange,.billing-exchange-source{font-size:14px;line-height:1.85;color:#c5b99f;margin:14px 0}
.billing-exchange-source a{color:#e7ce9e;text-decoration:underline;text-underline-offset:3px}
.billing-exchange-source summary{cursor:pointer;min-height:44px;padding:8px 0}
@media(max-width:680px){
 .header-actions{gap:12px;justify-content:space-between}
 .header-actions>button,.header-actions .study-open,#account-open{font-size:14px}
 .welcome-intro h1{gap:7px;flex-wrap:nowrap;font-size:clamp(20px,5.4vw,27px)}
 .welcome-included{font-size:13px;margin-top:4px}
 .next-star{left:auto;right:18px;bottom:90px;font-size:14px}
 .universe:not(.opening) .autoplay{bottom:26px}
 .study-intro{font-size:16px}
 .study-session-head{font-size:14px}
 .study-card{margin-top:24px}
 .study-morphology{font-size:16px}
 .study-word-parts{padding:13px 15px}
 .study-rating-help,.study-retry-hint,.study-footer{font-size:14px}
 .study-ratings{gap:7px}
 .study-ratings button{font-size:14px;min-height:82px}
 .study-ratings small{font-size:13px}
 .atlas-training{bottom:105px}
 .billing-price{font-size:48px}
}