/* Soft, adult-friendly Q-style interface. Phosphor duotone masks keep their alpha layers. */
:root { --bg:#f8f7fc; --surface:#fff; --ink:#383449; --muted:#777387; --line:#e9e6f1; --soft:#f0ecfb; --accent:#8071cc; --accent-dark:#6456ad; --success:#458d80; font-family:"Segoe UI","Microsoft YaHei",sans-serif; }
body { background:var(--bg); }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid #b3a3f1; outline-offset:4px; }
button { transition:background .18s,transform .18s,box-shadow .18s; }
button:active { transform:translateY(1px); }
input { font-size:16px !important; }
.app-shell { max-width:1060px; padding:26px 32px 112px; }
.ui-icon { display:inline-block; flex:none; width:23px; height:23px; background:currentColor; -webkit-mask:var(--ui-icon) center/contain no-repeat; mask:var(--ui-icon) center/contain no-repeat; vertical-align:middle; }
.little-drop { object-fit:contain; }
.gentle-topbar { display:flex; justify-content:space-between; align-items:center; padding-bottom:24px; }
.brand-logo { display:flex; align-items:center; gap:10px; border:0; background:transparent; padding:0; color:var(--ink); text-align:left; }
.brand-buddy { width:46px; height:48px; }
.brand-logo > span { font-size:20px; font-weight:750; letter-spacing:.03em; }
.brand-logo small { display:block; margin-top:3px; color:var(--muted); font-size:11px; font-weight:400; letter-spacing:0; }
.streak-chip { display:flex; gap:7px; align-items:center; padding:8px 11px; color:#7c6cb4; background:#eeebf7; border:1px solid #e2dced; border-radius:25px; font-size:12px; }
.streak-chip .ui-icon { width:20px; height:20px; }
.home-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(270px,1fr); gap:26px; align-items:start; }
.home-main,.home-side { min-width:0; }
.welcome-banner { min-height:285px; position:relative; display:flex; align-items:center; justify-content:space-between; padding:24px 26px; border-radius:26px; background:#f0edfa; overflow:hidden; }
.welcome-copy { position:relative; z-index:1; }
.soft-kicker { display:flex; align-items:center; gap:7px; color:var(--accent-dark); font-size:12px; font-weight:500; line-height:1.6; }
.soft-kicker > span { width:6px; height:6px; border-radius:50%; background:#9b8bd9; }
.welcome-copy h1 { margin:16px 0 12px; font-size:38px; line-height:1.38; letter-spacing:-.04em; font-weight:750; }
.welcome-copy h1 em { font-style:normal; color:#8071cc; }
.welcome-copy > p { margin:0; color:#787087; font-size:13px; line-height:1.8; }
.buddy-caption { display:inline-flex; gap:6px; align-items:center; margin-top:17px; color:#9385bb; font-size:11px; }
.buddy-caption .ui-icon { width:15px; height:15px; }
.welcome-illustration { width:190px; position:relative; flex:none; align-self:flex-end; margin-right:-18px; margin-bottom:-12px; }
.hero-buddy { width:210px; height:240px; display:block; margin-left:-9px; }
.bubble-word { position:absolute; top:5px; left:69px; z-index:2; padding:9px 18px; color:#8873b7; background:#fff; border-radius:17px 17px 17px 4px; font-size:16px; font-weight:700; transform:rotate(5deg); box-shadow:0 4px 14px #b8accc17; }
.tiny-spark { position:absolute; bottom:40px; left:0; color:#c1a1df; font-size:21px; }
.lesson-feature { margin-top:19px; padding:24px; border:1px solid #e7e1ef; border-radius:25px; background:#fff; box-shadow:0 5px 18px #50416804; }
.feature-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.today-label { display:inline-flex; align-items:center; gap:6px; color:#86774b; font-size:12px; font-weight:500; }
.today-label .ui-icon { width:20px; height:20px; color:#d4a55a; }
.time-pill { color:#8c7bb8; background:#f3effa; padding:5px 9px; border-radius:12px; font-size:11px; }
.feature-title { display:flex; gap:13px; align-items:center; margin-top:21px; }
.topic-orb { display:grid; place-items:center; flex:none; width:51px; height:51px; border-radius:17px; background:#eeebfa; color:#9483d1; }
.topic-orb .ui-icon { width:30px; height:30px; }
.feature-title h2 { margin:0 0 5px; font-size:19px; line-height:1.5; }
.feature-title p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.preview-phrase { margin:19px 0 14px; padding:16px 17px; background:#faf9fc; border:1px solid #f0edf6; border-radius:15px; }
.preview-phrase p { margin:0 0 6px; color:#545061; font-size:19px; font-weight:600; line-height:1.5; }
.preview-phrase span { color:#94909e; font-size:12px; }
.lesson-promise { display:flex; justify-content:space-between; padding:0 4px 16px; gap:6px; color:#9690a4; font-size:11px; }
.lesson-promise span { display:flex; align-items:center; gap:4px; }
.lesson-promise .ui-icon { width:16px; height:16px; }
.primary { min-height:48px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:15px; padding:13px 16px; font-size:14px; color:#fff; background:var(--accent); box-shadow:0 4px 0 #6c5ab3; }
.primary:hover { background:#7664c4; }
.primary .ui-icon { width:20px; height:20px; }
.quiet-action { border:0; background:transparent; color:#9a93aa; font-size:12px; padding:10px 4px; line-height:1.6; }
.lesson-feature > .quiet-action { display:block; margin:11px auto -5px; }
.section-head { margin:24px 0 14px; }
.section-head h2 { font-size:17px; font-weight:700; }
.muted-note { color:#a29aac; font-size:11px; }
.little-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.little-option { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:161px; padding:17px; border:1px solid transparent; border-radius:22px; text-align:left; color:var(--ink); }
.mint { background:#eaf5f0; }.peach { background:#fcf0e5; }.lavender { background:#f0ecfa; }.pink { background:#f9edf1; }.blue { background:#eaf1fb; }
.option-illustration { display:grid; place-items:center; width:39px; height:39px; margin-bottom:12px; border-radius:13px; background:#ffffff99; color:#7bb5aa; }
.peach .option-illustration { color:#ccac7d; }
.option-illustration .ui-icon { width:29px; height:29px; }
.little-option strong { font-size:14px; font-weight:650; }
.little-option > span:not(.option-illustration):not(.ui-icon) { margin-top:6px; color:#969391; font-size:11px; }
.option-arrow { position:absolute; right:15px; bottom:18px; width:16px; height:16px; color:#a5a09e; }
.garden-card,.tiny-journey { padding:22px; background:#fff; border:1px solid var(--line); border-radius:24px; }
.garden-card .section-head,.tiny-journey .section-head { margin:0 0 16px; }
.garden-card .section-head > span { font-size:10px; color:#a69bb5; }
.garden-card > p,.tiny-journey > p { color:#9992a3; font-size:12px; line-height:1.8; margin:16px 0 0; }
.week-garden { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.garden-day { text-align:center; color:#b3afbb; }
.garden-day > div { display:grid; place-items:center; height:40px; border-radius:14px; background:#f6f5f8; }
.garden-day .ui-icon { width:24px; height:24px; color:#d0cadb; }
.garden-day > span { display:block; margin-top:9px; font-size:10px; }
.garden-day.bloomed > div { background:#efe9fa; }.garden-day.bloomed .ui-icon { color:#a485c8; }
.garden-day.is-today > div { border:1px solid #d8c9ed; background:#f7f3fc; }.garden-day.is-today > span { color:#a086c2; }
.tiny-journey { margin-top:18px; }
.tiny-journey > .section-head > .ui-icon { color:#a7bca6; }
.soft-path { display:flex; justify-content:space-between; gap:8px; position:relative; }
.soft-path::before { content:''; position:absolute; top:25px; left:24px; right:24px; height:2px; background:#efecf5; }
.soft-path-stop { position:relative; display:flex; flex:1; flex-direction:column; align-items:center; gap:10px; padding:0; border:0; background:transparent; color:#978ca9; }
.soft-path-stop > span { display:grid; place-items:center; width:47px; height:47px; border:5px solid #fff; border-radius:50%; background:#f0ebf8; color:#b29bcc; }
.soft-path-stop strong { font-size:10px; font-weight:500; }.soft-path-stop.done > span { color:#649e8e; background:#e7f5ee; }
.small-story-link { display:flex; align-items:center; gap:7px; width:100%; margin-top:18px; padding:14px 16px; border:1px dashed #ded6ec; border-radius:16px; color:#91879e; background:transparent; font-size:11px; line-height:1.6; text-align:left; }
.small-story-link > .ui-icon:first-child { width:20px; height:20px; }.small-story-link > .ui-icon:last-child { margin-left:auto; width:16px; height:16px; }
.bottom-nav { background:#fffefef5; padding:10px max(22px,calc((100vw - 830px)/2)) max(12px,env(safe-area-inset-bottom)); box-shadow:0 -5px 20px #5c497905; border-color:#ece8f3; }
.gentle-nav .nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; font-weight:500; color:#b0a7bc; }
.gentle-nav .nav-item .ui-icon { width:26px; height:26px; }
.gentle-nav .nav-item.active { color:var(--accent); }.gentle-nav .nav-item.active .ui-icon { background:var(--accent); }
.gentle-page-head { display:flex; align-items:flex-start; gap:18px; margin:7px 0 25px; }
.gentle-page-head .back { margin-top:8px; flex:none; }
.gentle-page-head h1 { font-size:27px; line-height:1.5; margin:0 0 7px; letter-spacing:-.03em; }
.gentle-page-head p { color:var(--muted); font-size:13px; margin:0; line-height:1.7; }
.gentle-guide { display:flex; gap:13px; align-items:center; padding:12px 18px; border-radius:20px; background:#efebf8; margin-bottom:24px; }
.guide-buddy { width:74px; height:81px; }
.gentle-guide p { font-size:13px; color:#9385a4; line-height:1.8; margin:0; }.gentle-guide strong { font-weight:500; color:#706382; }
.gentle-scene-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gentle-scene-card { display:flex; align-items:center; gap:16px; min-height:170px; border:1px solid #ffffff80; border-radius:24px; padding:25px; text-align:left; color:var(--ink); }
.scene-orb { display:grid; place-items:center; flex:none; width:62px; height:65px; border-radius:20px; background:#fff9; color:#a291c7; }.scene-orb .ui-icon { width:40px; height:40px; }
.mint .scene-orb { color:#79ac9d; }.peach .scene-orb { color:#c19c6a; }.pink .scene-orb { color:#c58e9f; }.blue .scene-orb { color:#89a5ca; }
.scene-small { color:#a198af; font-size:10px; }.gentle-scene-card h2 { margin:7px 0; font-size:18px; }.gentle-scene-card p { margin:0; font-size:12px; color:#8f869a; line-height:1.6; }
.scene-card-footer { display:flex; gap:12px; align-items:center; margin-top:19px; font-size:11px; color:#9d91aa; }.scene-card-footer .ui-icon { width:16px; height:16px; }
.gentle-library-link { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; width:100%; margin-top:23px; padding:15px; color:#94859f; background:#fff; border:1px solid var(--line); border-radius:18px; font-size:12px; }
.mini-lesson-list { display:grid; gap:14px; }
.mini-lesson-card { display:flex; gap:17px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:22px; padding:23px; }
.mini-number { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:14px; color:#afa0cf; background:#f0ecfa; font-size:16px; font-weight:600; }.mini-number.completed { color:#6c9e8e; background:#edf7f1; }
.mini-lesson-card h2 { margin:0 0 8px; font-size:17px; }.mini-lesson-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }.mini-lesson-card > div > span { display:block; color:#b3a9c2; font-size:11px; margin-top:8px; }.mini-lesson-card > .secondary { margin-left:auto; flex:none; }
.secondary { min-height:38px; border:1px solid #e7e0f2; border-radius:12px; color:#857598; background:#fff; font-size:12px; display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.secondary .ui-icon { width:18px; height:18px; }.secondary.selected { color:#7560a7; background:#f0eafa; border-color:#d6c7eb; }
.gentle-advanced { margin-top:23px; padding:17px 20px; border:1px solid var(--line); border-radius:18px; background:#ffffffa6; font-size:12px; color:#95899d; line-height:1.8; }
.gentle-advanced summary { cursor:pointer; }.gentle-advanced p { font-size:12px; line-height:1.8; }.gentle-advanced .secondary { margin:8px 6px 0 0; }.gentle-advanced a { color:var(--accent); }
.easy-shell { max-width:610px; margin:0 auto; }
.easy-header { display:flex; align-items:center; justify-content:space-between; margin:5px 0 24px; font-size:12px; color:#9c91ad; }
.easy-step-track { display:flex; gap:12px; margin-bottom:35px; }.easy-step-track > span { flex:1; color:#b9b0c7; font-size:11px; }.easy-step-track i { display:block; height:6px; border-radius:8px; margin-bottom:8px; background:#eae6f2; }.easy-step-track .active { color:#9880bd; }.easy-step-track .active i { background:#baa4e1; }
.easy-step-heading h1 { font-size:29px; line-height:1.5; margin:12px 0 8px; }.easy-step-heading > p { color:#8e839c; font-size:13px; line-height:1.8; margin:0 0 24px; }
.easy-step-heading .ui-icon { width:19px; height:19px; }
.easy-conversation { display:grid; gap:17px; }.easy-chat-line { display:flex; gap:9px; align-items:flex-start; }.easy-chat-line.mine { flex-direction:row-reverse; padding-left:28px; }.easy-chat-line.customer { padding-right:28px; }
.chat-person { display:grid; place-items:center; flex:none; width:31px; height:31px; margin-top:7px; border-radius:50%; background:#eee8fa; color:#ac91d1; }.customer .chat-person { background:#e9f3ee; color:#94bca9; }.chat-person .ui-icon { width:21px; height:21px; }
.easy-chat-bubble { position:relative; flex:1; min-width:0; padding:16px 17px 14px; background:white; border:1px solid var(--line); border-radius:18px 18px 18px 5px; }.mine .easy-chat-bubble { background:#f0ebfa; border-color:#e8dff4; border-radius:18px 18px 5px 18px; }
.easy-chat-bubble > small { font-size:10px; color:#b0a0bf; }.easy-chat-bubble > p[lang=en] { padding-right:20px; font-size:17px; line-height:1.6; margin:7px 0 4px; font-weight:550; }.easy-chat-bubble .parts-ipa { display:block; color:#968ca3; font-size:12px; line-height:1.7; padding-right:16px; }.easy-chat-bubble .chat-chinese { margin:6px 0 0; color:#8d839b; font-size:12px; line-height:1.8; }
.sentence-audio { display:grid; place-items:center; position:absolute; top:17px; right:11px; width:31px; height:31px; padding:0; border:0; background:#fff9; border-radius:50%; color:#a489ca; }.sentence-audio .ui-icon { width:19px; height:19px; }
.easy-audio-tools { display:flex; align-items:center; justify-content:center; gap:18px; margin:22px 0; }
.easy-next { margin-top:28px; }.easy-footnote { text-align:center; font-size:11px; color:#aaa0b8; margin-top:18px; }
.repeat-card { text-align:center; margin:24px 0 17px; padding:21px 25px 27px; background:#fff; border:1px solid var(--line); border-radius:25px; }
.repeat-buddy { width:105px; height:112px; }.repeat-english { font-size:26px; line-height:1.5; font-weight:650; margin:10px 0; }.repeat-card .parts-ipa { font-size:14px; color:#9b8fab; }.repeat-chinese { color:#8e839c; font-size:14px; line-height:1.8; }.phrase-chunks { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:22px 0; }.phrase-chunks > span { padding:8px 11px; border-radius:11px; color:#9a83b9; background:#f2edfa; font-size:14px; }
.friendly-tip { display:flex; gap:11px; align-items:flex-start; background:#f8f0e5; border-radius:17px; padding:15px 18px; color:#b49876; }.friendly-tip p { margin:0; color:#a4937e; font-size:12px; line-height:1.8; }.friendly-tip .ui-icon { width:21px; height:21px; margin-top:3px; }
.easy-choice-card { padding:20px; background:#fff; border:1px solid var(--line); border-radius:24px; }.easy-choice { display:flex; width:100%; align-items:center; gap:12px; border:1px solid #e9e2f2; background:#fff; border-radius:16px; padding:17px; margin-bottom:13px; text-align:left; color:#776386; }.easy-choice.selected { background:#f0eaf9; border-color:#cdb8e3; }.easy-choice > span { display:grid; place-items:center; flex:none; width:29px; height:29px; border-radius:9px; background:#f4eff9; font-size:12px; }.easy-choice > div { flex:1; min-width:0; }.easy-choice strong { font-size:16px; line-height:1.6; font-weight:550; }.easy-choice .parts-ipa { display:block; font-size:11px; color:#a293b2; }.choice-reassurance { color:#b0a4bc; font-size:12px; text-align:center; margin:21px 0 3px; }.gentle-feedback { padding:16px; background:#edf7f1; border-radius:15px; color:#739986; font-size:13px; }.gentle-feedback p { font-size:13px; line-height:1.7; margin-bottom:0; }
.easy-complete { max-width:570px; margin:15px auto 0; position:relative; text-align:center; }.completed-buddy { display:block; width:205px; height:218px; margin:0 auto 10px; }.easy-complete > .today-label { margin-top:5px; color:#ab92c2; }.easy-complete h1 { font-size:29px; margin:17px 0 12px; }.easy-complete > p { color:#a294ad; font-size:13px; line-height:1.9; }.remember-phrase { text-align:center; padding:22px; margin:23px 0; border:1px solid var(--line); border-radius:21px; background:#fff; }.remember-phrase > p:first-child { margin:0 0 8px; font-size:22px; line-height:1.6; }.remember-phrase .parts-ipa { color:#9d8aaa; }.remember-phrase > span { color:#a192ad; font-size:13px; }.saved-note { display:flex; align-items:center; justify-content:center; gap:6px; color:#90ab99; font-size:11px; margin:0 0 24px; }.saved-note .ui-icon { width:18px; height:18px; }.easy-complete > .quiet-action { margin-top:18px; }.completion-spark { position:absolute; color:#e1b779; font-size:29px; }.completion-spark.one { top:75px; left:calc(50% - 130px); }.completion-spark.two { top:118px; right:calc(50% - 129px); font-size:19px; color:#c3a7e0; }
.word-category-chips { margin:0 0 20px; }.pill { padding:8px 11px; color:#9b8da9; background:#f0eaf8; font-size:11px; border:0; }.pill.active-pill { background:#a68ccc; color:white; }.gentle-word-search { margin-bottom:22px; }
.gentle-word-card { position:relative; padding:23px 27px; background:#fff; border:1px solid var(--line); border-radius:27px; max-width:670px; margin:0 auto; }
.word-card-top { display:flex; justify-content:space-between; color:#ac9bbb; font-size:11px; }.word-illustration { position:relative; display:grid; place-items:center; width:100px; height:100px; border-radius:32px; background:#eaf5f0; color:#8ebcb0; margin:26px auto 18px; }.word-illustration .ui-icon { width:69px; height:69px; }.word-spark { position:absolute; top:5px; right:-9px; color:#d6b786; font-size:22px; }.gentle-word-card h2 { text-align:center; font-size:25px; line-height:1.5; margin:10px 0 5px; }.gentle-word-card > .parts-ipa { text-align:center; color:#9d8bae; font-size:14px; }.word-meaning { text-align:center; margin-top:8px; color:#9b8ba9; font-size:15px; }.word-card-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0; }.gentle-word-card .parts-usage { border-top:1px solid var(--line); padding-top:12px; }.parts-usage summary { color:#a389bb; }.parts-example { background:#f4eff9; }.parts-example .parts-example-en { color:#64586f; font-size:16px; }.parts-ipa { color:#a292b2; }.parts-reading { color:#9d8ba8; }.word-turn { display:flex; justify-content:space-between; gap:6px; align-items:center; margin:21px -2px -5px; border-top:1px solid #f0edf5; padding-top:10px; }.word-turn > span { font-size:10px; color:#b5a9be; }.word-library-links { display:flex; justify-content:center; gap:25px; margin:23px 0 0; }
.gentle-profile { display:flex; align-items:center; gap:19px; }.profile-buddy { width:115px; height:123px; }.gentle-profile h2 { font-size:21px; line-height:1.5; margin:7px 0; }.gentle-profile p { margin:0; color:#a18ead; font-size:12px; line-height:1.8; }.gentle-stats { display:grid; grid-template-columns:repeat(3,1fr); padding:22px 0; margin:19px 0; background:#f0eaf8; border-radius:21px; }.gentle-stats > div { display:flex; flex-direction:column; align-items:center; gap:6px; border-right:1px solid #e2d7ee; }.gentle-stats > div:last-child { border:0; }.gentle-stats strong { font-size:25px; color:#9a7ebe; font-weight:650; }.gentle-stats span { font-size:11px; color:#aa95b7; }
.gentle-history { margin-top:23px; }.gentle-history h2 { margin:3px 0 15px; font-size:17px; }.gentle-history > p { color:#a38daa; font-size:12px; }.gentle-history-row { display:flex; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); color:#ae92c5; }.gentle-history-row:last-child { border:0; }.gentle-history-row > div { flex:1; }.gentle-history-row strong { display:block; font-size:13px; color:#83708f; font-weight:550; }.gentle-history-row span { display:block; margin-top:5px; color:#b09cba; font-size:11px; }.gentle-history-row > .ui-icon:last-child { width:19px; height:19px; color:#9abaac; }
.profile-links { margin:23px 0; background:#fff; border:1px solid var(--line); border-radius:21px; overflow:hidden; }.profile-links > button { display:flex; width:100%; align-items:center; gap:11px; padding:18px 20px; border:0; border-bottom:1px solid #f0ebf5; color:#9a7db0; background:transparent; font-size:13px; text-align:left; }.profile-links > button:last-child { border:0; }.profile-links > button > .ui-icon:last-child { margin-left:auto; width:17px; height:17px; }
.dream-card { display:flex; gap:15px; padding:22px; background:#faf0df; border:1px solid #f3e6cd; border-radius:22px; color:#c4a16b; }.dream-card > .ui-icon { width:37px; height:37px; }.dream-card span { font-size:11px; }.dream-card strong { display:block; font-size:23px; font-weight:650; margin-top:7px; }.dream-card p { font-size:12px; color:#b8a386; line-height:1.8; margin-bottom:0; }
.review-done-note { display:flex; align-items:center; justify-content:center; gap:8px; color:#8aa898; font-size:12px; margin:26px 0; }
/* Existing rich content follows the new visual language. */
.screen-title { font-size:28px; line-height:1.5; letter-spacing:-.03em; }.screen-header { margin:12px 0 13px; }.label,.eyebrow { color:#a58cb8; letter-spacing:.06em; }.card { border-radius:22px; padding:22px; }.card.soft { background:#f1eaf9; border-color:#e8dcf1; }.card p { font-size:13px; line-height:1.8; }.card h3 { font-size:18px; }.card-row { flex-wrap:wrap; }.hero { background:#f0e9f8; border-color:#e5d9f0; border-radius:24px; }.hero-amount { color:#a68abf; }.from-sales .dialogue-bubble { background:#f0e8f8; border-color:#e2d5ef; }.from-buyer .dialogue-bubble { background:#f0f6f2; border-color:#e5eee8; }.dialogue-en { font-size:16px !important; }.dialogue-ipa,.review-ipa { color:#a18aaf !important; }.dialogue-zh { font-size:13px !important; }.dialogue-actions .secondary { font-size:12px; min-height:36px; }.parts-entry,.practice-settings { background:#f2ecf9; border-color:#e9ddf3; }.update-note { color:#b0a0bb; }.option.selected { background:#f0e8f8; border-color:#cbb4de; }.vocab-row .review-actions { flex-wrap:wrap; justify-content:flex-end; }
@media(min-width:900px) { .app-shell { padding-top:35px; }.gentle-page-head { margin-top:20px; }.gentle-word-card { margin-top:25px; }.home-side { padding-top:4px; } }
@media(max-width:820px) { .home-layout { grid-template-columns:minmax(0,1fr); gap:23px; }.home-side { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.tiny-journey { margin-top:0; }.small-story-link { grid-column:1/-1; margin-top:0; }.welcome-illustration { width:215px; }.hero-buddy { width:235px; height:250px; }.gentle-scene-card { padding:21px; } }
@media(max-width:540px) { .app-shell { padding:19px 19px 108px; }.gentle-topbar { padding-bottom:20px; }.brand-logo > span { font-size:18px; }.brand-buddy { width:41px; height:44px; }.brand-logo small { font-size:10px; }.streak-chip { padding:7px 9px; font-size:10px; }.welcome-banner { padding:23px 21px; min-height:257px; border-radius:24px; }.welcome-copy h1 { font-size:30px; margin:14px 0 10px; }.soft-kicker { font-size:10px; }.welcome-copy > p { font-size:11px; }.buddy-caption { font-size:9px; gap:3px; }.welcome-illustration { width:145px; margin-right:-21px; margin-bottom:-5px; }.hero-buddy { width:178px; height:213px; margin-left:-14px; }.bubble-word { top:6px; left:43px; font-size:13px; padding:7px 13px; }.tiny-spark { font-size:17px; }.lesson-feature { padding:20px; border-radius:23px; }.feature-title { margin-top:19px; gap:11px; }.feature-title h2 { font-size:17px; }.feature-title p { font-size:11px; }.feature-meta { gap:4px; }.today-label { font-size:10px; }.time-pill { font-size:10px; }.topic-orb { width:44px; height:45px; border-radius:14px; }.preview-phrase { padding:14px; }.preview-phrase p { font-size:18px; }.lesson-promise { font-size:10px; }.lesson-feature > .quiet-action { font-size:10px; }.primary { font-size:13px; }.section-head h2 { font-size:16px; }.muted-note { font-size:10px; }.little-options { gap:12px; }.little-option { padding:16px 14px; min-height:160px; border-radius:20px; }.little-option strong { font-size:12px; }.little-option > span:not(.option-illustration):not(.ui-icon) { font-size:10px; }.home-side { grid-template-columns:1fr; gap:16px; }.small-story-link { grid-column:auto; }.garden-card,.tiny-journey { padding:21px; }.tiny-journey { display:none; }.gentle-page-head { gap:12px; margin-bottom:20px; }.gentle-page-head h1 { font-size:23px; }.gentle-page-head p { font-size:12px; }.gentle-page-head .back { font-size:11px; }.gentle-guide { padding:10px 13px; gap:8px; }.gentle-guide p { font-size:11px; }.guide-buddy { width:58px; height:67px; }.gentle-scene-grid { grid-template-columns:1fr; gap:13px; }.gentle-scene-card { min-height:145px; padding:21px; }.gentle-scene-card h2 { font-size:17px; }.scene-card-footer { margin-top:14px; }.scene-orb { width:57px; height:61px; }.gentle-library-link { font-size:10px; }.mini-lesson-card { flex-wrap:wrap; padding:19px; gap:12px; }.mini-lesson-card > div { flex:1; min-width:0; }.mini-lesson-card h2 { font-size:15px; }.mini-lesson-card > .secondary { width:100%; margin-top:5px; }.easy-step-heading h1 { font-size:24px; }.easy-step-heading > p { font-size:12px; }.easy-step-track { margin-bottom:25px; }.easy-chat-bubble { padding:13px; }.easy-chat-bubble > p[lang=en] { font-size:16px; }.easy-chat-bubble .parts-ipa { font-size:11px; }.easy-chat-line.mine { padding-left:10px; }.easy-chat-line.customer { padding-right:10px; }.repeat-card { padding:20px; }.repeat-english { font-size:23px; }.repeat-card .parts-ipa { font-size:13px; }.easy-choice-card { padding:17px; }.easy-choice { padding:14px; }.easy-choice strong { font-size:15px; }.easy-choice .parts-ipa { font-size:10px; }.easy-complete h1 { font-size:24px; }.easy-complete > p { font-size:12px; }.remember-phrase > p:first-child { font-size:19px; }.word-category-chips .pill { font-size:10px; padding:7px 9px; }.gentle-word-card { padding:20px; border-radius:23px; }.gentle-word-card h2 { font-size:23px; }.gentle-word-card > .parts-ipa { font-size:12px; }.word-turn > span { font-size:9px; }.word-turn .quiet-action { font-size:10px; }.gentle-profile { gap:10px; }.profile-buddy { width:86px; height:103px; }.gentle-profile h2 { font-size:17px; }.gentle-profile p { font-size:10px; }.gentle-profile .soft-kicker { font-size:9px; }.gentle-stats strong { font-size:23px; }.gentle-stats span { font-size:10px; }.card { padding:18px; }.screen-title { font-size:24px; }.dialogue-line { max-width:100%; }.card-row { gap:9px; }.parts-term-actions { flex-wrap:wrap; justify-content:flex-end; max-width:105px; }.parts-term-actions .secondary { font-size:10px; }.review-row { gap:8px; }.vocab-row > div:first-child { flex:1; }.vocab-row .review-actions { max-width:100px; } }
@media(max-width:359px) { .app-shell { padding-left:14px; padding-right:14px; }.welcome-banner { padding-left:18px; }.welcome-copy h1 { font-size:27px; }.welcome-illustration { width:117px; margin-right:-21px; }.hero-buddy { width:150px; height:195px; }.welcome-copy > p { font-size:10px; }.buddy-caption { font-size:8px; }.lesson-promise { font-size:9px; }.brand-logo small { font-size:9px; }.streak-chip { font-size:9px; }.streak-chip .ui-icon { width:16px; height:16px; }.little-option strong { font-size:11px; }.saved-note { font-size:10px; } }
/* Keep the beginner reading surface clear and its next action always within reach. */
.card,.repeat-card,.lesson-feature { background:var(--color-base-100,#fff); }
.phrase-chunks > span,.garden-day.bloomed > div { background:color-mix(in srgb,var(--color-primary) 55%,white); }
.little-option.mint { background:color-mix(in srgb,var(--color-accent) 21%,white); }
.friendly-tip { background:color-mix(in srgb,var(--color-warning) 16%,white); }
.gentle-feedback { background:color-mix(in srgb,var(--color-success) 15%,white); }
.easy-mode-page .bottom-nav { display:none; }
.easy-mode-page .app-shell { padding-bottom:128px; }
.easy-shell .easy-next { position:fixed; z-index:8; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(610px,calc(100% - 38px)); box-shadow:0 4px 0 #6c5ab3,0 0 0 13px var(--bg); }
.easy-shell .easy-next:active { transform:translate(-50%,1px); }
.easy-shell .easy-footnote { display:none; }
.welcome-copy > p,.feature-title p,.preview-phrase span,.garden-card > p,.tiny-journey > p,.little-option > span:not(.option-illustration):not(.ui-icon) { color:#796d86; }
.lesson-promise,.muted-note,.quiet-action,.streak-chip,.garden-day > span,.word-card-top,.word-turn > span { color:#82738f; }
.parts-ipa,.easy-chat-bubble .parts-ipa,.repeat-card .parts-ipa,.gentle-word-card > .parts-ipa,.easy-choice .parts-ipa { color:#7d6b8b; }
.easy-chat-bubble .chat-chinese,.easy-step-heading > p,.repeat-chinese,.friendly-tip p,.gentle-profile p,.easy-complete > p,.gentle-page-head p { color:#7a6887; }
.gentle-feedback { color:#527765; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

.word-aliases{font-size:12px;color:#7d6b8b;overflow-wrap:anywhere}.parts-course-links{margin-top:16px;text-align:left;font-size:12px;line-height:1.8}.parts-course-links summary{cursor:pointer;color:#6456ad}.parts-course-links ul{padding-left:20px;overflow-wrap:anywhere}.gentle-word-card h2,.parts-example-en{overflow-wrap:anywhere}