/* Shared visual language: warm gold, cream paper, and dark cocoa text. */
:root{--blue:#54472c;--muted:#98793c;--line:#f2e7d2;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#3f3521;background:#f5f5ef}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body:not(.signed-out){background:radial-gradient(ellipse at 95% 0%,#f1e5cd70,transparent 38%),#f5f5ef;line-height:1.65}
button,input,select{font:inherit}
button,a,input,select,summary{transition:background-color .18s,border-color .18s,box-shadow .18s}
:focus-visible{outline:3px solid #a8752e;outline-offset:4px}
body:not(.signed-out) main{max-width:1184px;padding:0 32px 28px}
.header{max-width:none;position:sticky;top:0;z-index:10;background:#f5f5eff2;backdrop-filter:blur(16px);padding:18px max(32px,calc((100vw - 1120px)/2));gap:24px;border-bottom:1px solid #f0e4cd}
.brand{font-size:24px;letter-spacing:-1px;white-space:nowrap}.brand-icon{background:#54472c;width:36px;height:38px;border-radius:12px 12px 12px 3px;line-height:36px}.brand-cn{font-size:11px;letter-spacing:2px;padding-left:14px;color:var(--muted)}
.site-nav{display:flex;gap:6px;align-items:center}.site-nav a{padding:8px 14px;border-radius:30px;font-size:13px;font-weight:600;color:#94763b;white-space:nowrap}.site-nav a:hover{color:#54472c;background:#f4ebda}.site-nav a:first-child{background:#f4ebda;color:#54472c}
.intro{position:relative;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:40px;min-height:300px;padding:46px 0 40px}
.intro .eyebrow{color:#9d7d3e;letter-spacing:3px;font-size:11px;display:flex;gap:12px;align-items:center}.intro .eyebrow:before{content:"";width:25px;height:1px;background:#bf9e5d}
.intro h1{font-size:clamp(32px,3.6vw,48px);font-weight:650;letter-spacing:-2px;line-height:1.35;margin:16px 0}.intro-copy>p:last-child{color:var(--muted);font-size:15px;max-width:450px;margin-bottom:0}
.hero-art{position:relative;min-height:216px;display:grid;place-items:center;isolation:isolate}.hero-art:before{content:"";position:absolute;width:210px;height:210px;border:1px solid #ebdab9;border-radius:50%;z-index:-1;box-shadow:0 0 0 25px #f4ebd860,0 0 0 50px #f4ebd835}
.hero-note{width:280px;padding:22px 26px;background:#fffef8;border:1px solid #f0e4cb;box-shadow:0 15px 40px #4f42280c;transform:rotate(-5deg);border-radius:5px 18px 18px 18px}.hero-note small{display:block;color:#ac8a45;font-size:10px;letter-spacing:2px}.hero-note strong{display:block;font:italic 35px/1.4 Georgia,serif;color:#584a2e;margin:8px 0}.hero-note p{font-size:12px;color:#a78542;margin:0}.hero-tag{position:absolute;bottom:8px;right:14px;background:#f2e7d1;border:1px solid #e8d6b1;transform:rotate(4deg);padding:10px 18px;border-radius:8px;font-size:12px;letter-spacing:1px;color:#685735}
.account-card,.community-card{border:1px solid #f1e5ce;background:#fffefb;border-radius:22px;padding:30px;margin-bottom:24px;box-shadow:0 5px 22px #41372203}
.account-heading{margin-bottom:18px;gap:20px}.account-heading h2,.community-card h2{font-size:23px;letter-spacing:-.6px;margin-bottom:0}.eyebrow{font-size:10px;letter-spacing:2.3px;margin-bottom:9px}.account-heading .eyebrow{color:#a88643}
#learning-space{scroll-margin-top:100px}#account-status{background:#f7f0e3;color:#6d5b38;border:1px solid #f0e4cc;border-radius:30px;padding:6px 12px;font-size:12px;overflow-wrap:anywhere}
body:not(.signed-out) #member-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.training-select{grid-column:1/-1;max-width:none;display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);padding-top:22px;margin:0 0 22px;font-size:13px;color:#997a3d}.training-select select{min-width:260px;font-weight:600;color:#473c25;background:#fbf8f1}
.ai-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start;align-items:end;border:1px solid #f0e4cb;border-radius:16px;background:#faf5ec;padding:22px;margin:0;min-width:0}
.ai-form>div{grid-column:1/-1;min-width:0}.ai-form strong{font-size:19px}.ai-form label{min-width:0;font-size:12px;color:#876c36}.ai-form .note{font-size:12px;line-height:1.7;margin-top:5px}.ai-form button{grid-column:1/-1;width:100%}
#bank-form{grid-column:1;grid-row:2;background:#faf9f3;border-color:#e5e5d9}#ai-form{grid-column:2;grid-row:2}#member-controls>.note{grid-column:1/-1;font-size:12px;margin:16px 0}
#member-controls>.member-actions{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;margin-top:0}
.auth-form input,.ai-form select,.training-select select{border:1px solid #ead9b6;border-radius:9px;min-height:46px;padding:10px 12px;color:#3f3521;background:#fffefa;max-width:100%}
.primary{background:#54472c;border:1px solid #54472c;border-radius:10px;font-size:14px;padding:13px 20px;min-height:48px;box-shadow:0 3px 7px #483c2512}.primary:hover{background:#413722;border-color:#413722;box-shadow:0 5px 12px #483c251c}.secondary{background:transparent;color:#685736;border:1px solid #ebdbbc;border-radius:10px;font-size:13px;min-height:44px}.secondary:hover{background:#f6eede;border-color:#c8ad76}.primary:disabled,.secondary:disabled{opacity:.48;box-shadow:none}.member-actions{gap:10px}
#refresh-history,#logout{border-color:transparent;color:#a28241}#logout{margin-left:auto}.note{color:#9e7e3f;font-size:13px;line-height:1.8}.badge{background:#f6efe0;color:#705e3a;border:1px solid #f0e3ca;font-size:12px;border-radius:30px;padding:7px 13px;line-height:1.5}
.prep-guide,.abbreviation-guide{line-height:1.85}.guide-intro,.slang-guide>p{font-size:14px;color:#997a3d}.guide-grid,.abbreviation-grid{gap:14px}.guide-grid article,.abbreviation-item{background:#fbf7ef;border:1px solid #f2e7d2;border-radius:14px;padding:22px}.guide-grid article p,.abbreviation-item p{font-size:14px;line-height:1.85;margin:10px 0}.guide-grid h3{color:#5c4d2f;font-size:17px}.guide-grid article>p[lang="en"]{color:#5a4c2f}.guide-grid article>a{display:inline-block;font-size:11px;color:#93753a;margin-top:10px;text-decoration:underline;text-underline-offset:4px}.abbreviation-item h3{font-size:26px;letter-spacing:-.7px;color:#5e4f31}.abbreviation-full{color:#876c36}
.slang-guide>.guide-grid>article:nth-child(-n+2){background:#f6efe2}.slang-guide>.guide-grid>article:nth-child(n+3){background:transparent;border-style:dashed}.slang-guide>.guide-grid>article:nth-child(-n+2) h3{font:italic 23px/1.4 Georgia,serif;color:#605132}
.guide-topic>summary{padding:20px 4px;color:#5c4d30;font-size:14px;list-style:none;display:flex;align-items:center;gap:16px}.guide-topic>summary::-webkit-details-marker{display:none}.guide-topic>summary:after{content:"+";font-size:22px;font-weight:400;margin-left:auto;color:#bb9853}.guide-topic[open]>summary:after{content:"−"}.guide-topic[open]>summary{color:#54472c}.guide-topic>summary:hover{background:#f9f4eb}.guide-topic>.guide-grid{padding-bottom:20px}.guide-tip{background:#f7f1e4;border-color:#b7934a}.guide-quiz details{background:#f6efe2}.guide-quiz summary{color:#605132}
.learning-card{background:#f8f2e5}.learning-card .account-heading h2{color:#5a4b2e}.learning-card .note{max-width:840px}.learning-row{border-color:#eddebf}.learning-delete{font-size:12px;border-radius:8px}.archive-panel{margin-top:28px;padding-top:22px;border-top:1px solid #eddebf}.archive-panel h3{margin:0;font-size:18px;color:#5a4b2e}.archive-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:14px 0;border-bottom:1px solid #f3e9d4}.archive-item{min-width:0;flex:1}.archive-item p{margin:0 0 6px}.archive-restore{flex-shrink:0;font-size:12px;border-radius:8px}.archive-action{margin-top:14px}.archive-button,.knowledge-delete-button{width:100%}.archive-action{display:grid;gap:8px}.knowledge-delete-button{color:#a33c23;border-color:#edc1af}.knowledge-delete-button:hover{background:#fff1ed;border-color:#d98b72}.learning-point summary{color:#5e4f30}.community-grid{gap:24px}.community-card h2{font-size:20px}.record-list li{border-color:#f3e9d4}.record-list strong{color:#5d4e30}
.workspace{grid-template-columns:minmax(0,1fr) 264px;gap:24px;margin:0 0 28px}.practice{background:#fffefb;border-color:#efe2c7;border-radius:22px;box-shadow:0 12px 36px #473c2508}.stats{padding:22px 30px;color:#a28140}.stats strong{color:#594b2e}progress,progress::-webkit-progress-bar{background:#f4ead7}progress::-webkit-progress-value{background:#aa8844}progress::-moz-progress-bar{background:#aa8844}
#exercise{padding:32px}.question-meta{margin-bottom:22px;font-size:12px}h2#sentence{font-size:27px;color:#413722;line-height:1.65;letter-spacing:-.35px}.translation{font-size:14px;color:#ac8944}.blank{color:#6e5c38;border-color:#c3a56a}.option{border-color:#efe3ca;background:#fffefa;border-radius:12px;padding:17px;gap:12px}.option span{font-size:16px}.option:hover{background:#f8f2e6;border-color:#c4a76c}.option:has(input:checked){background:#f6efe1;border-color:#95773b;box-shadow:0 0 0 1px #95773b}.option.correct{border-color:#816734;background:#f8f2e6}.option.incorrect{border-color:#c65245;background:#fff1ef}.option-key{background:#f9f4e9;border-color:#eddec0;color:#ae8b46;font-size:12px}.option:has(input:checked) .option-key{color:#655534;border-color:#d2bb8e}.option input{flex-shrink:0}#fill{border-color:#d8c49d;color:#4c4027;background:#fffefa}#feedback{border-radius:12px}
aside{background:linear-gradient(150deg,#5d4e30,#3c321f);border:1px solid #6d5b38;border-radius:22px;min-height:390px;padding:28px 24px}aside .side-label{color:#d4bf94;font-size:11px}aside h2{color:#f3f4de;font-size:23px}aside p{color:#dfcfb0;font-size:13px}.word-cloud{gap:7px}.word-cloud span{background:#ffffff07;border-color:#ffffff29;color:#efe2c9;font-size:14px;border-radius:8px;padding:5px 10px}.side-bottom{border-color:#ffffff24}.side-bottom strong{color:#ead9b7}.result-mark{background:#f4ebd8;color:#6a5937}.result-stats strong{color:#625232}footer{padding:12px 0 0;color:#b7934b;font-size:11px;letter-spacing:.5px}
/* Keep the private entrance visually connected to the member space. */
.signed-out .login-portal{box-shadow:0 0 140px #b8954e12,inset 0 0 80px #b8954e0c}.signed-out .auth-form input,.signed-out .auth-form .primary{border-radius:9px}.signed-out .login-emblem{color:#cfbf8c}
@media(min-width:901px){.slang-guide details .guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-note{width:320px}.hero-note strong{font-size:34px}.hero-tag{bottom:-10px}}
@media(max-width:900px){.header{padding:16px 28px}.brand-cn{display:none}.intro{grid-template-columns:1.3fr 1fr;gap:20px}.hero-note{width:235px}.hero-tag{right:0}.workspace{grid-template-columns:minmax(0,1fr)}.workspace aside{display:none}.account-card,.community-card{padding:24px}.account-heading{display:flex;flex-wrap:wrap}.site-nav a{padding:8px 10px}}
@media(max-width:650px){html{scroll-padding-top:120px}.header{flex-wrap:wrap;gap:12px;padding:14px 20px}.brand{font-size:22px}.brand-icon{width:30px;height:32px;line-height:30px}.site-nav{width:100%;justify-content:space-between;gap:0}.site-nav a{font-size:12px;padding:6px 10px}body:not(.signed-out) main{padding:0 16px 24px}.intro{display:block;min-height:0;padding:32px 4px}.intro h1{font-size:34px}.intro .eyebrow{font-size:9px}.intro-copy>p:last-child{font-size:13px;max-width:310px}.hero-art{display:none}.account-card,.community-card{padding:20px;border-radius:18px;margin-bottom:18px}.account-heading h2{font-size:21px}.account-heading{gap:10px;margin-bottom:16px}#account-status{margin:0}.training-select{display:grid;gap:8px;padding-top:16px;margin-bottom:16px}.training-select select{min-width:0;width:100%}body:not(.signed-out) #member-controls{display:block}.ai-form{padding:18px;gap:12px}.ai-form label{width:auto}.ai-form>div{width:auto}.ai-form strong{font-size:17px}#ai-form{margin-top:18px}#member-controls>.member-actions{flex-direction:row;flex-wrap:wrap}.member-actions .primary{width:100%}#logout{margin-left:auto}.member-actions{flex-direction:row;flex-wrap:wrap}.member-actions .secondary{flex:1;min-width:0}.prep-guide .badge{margin-top:0}.guide-grid article,.abbreviation-item{padding:18px}.guide-grid article p{font-size:13px}.guide-topic>summary{font-size:13px}.guide-topic>.guide-grid{gap:10px}.learning-card .primary{font-size:13px}.workspace{margin-bottom:18px}#exercise{padding:24px 20px}.stats{padding:18px 20px}h2#sentence{font-size:23px}.option{padding:14px}.option span{font-size:15px}.question-meta{flex-wrap:wrap}.community-grid{gap:0}.record-list li{flex-wrap:wrap}.record-list span{min-width:0}.results{padding:32px 18px}.result-stats{gap:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Golden accents with dark text for readable controls. */
:root{--blue:#936719;--muted:#786b55;--line:#e9dfcc;color:#443724;background:#faf7ef}
body:not(.signed-out){background:radial-gradient(ellipse at 95% 0%,#f3dfa466,transparent 38%),#faf7ef}
body:not(.signed-out) .primary,.brand-icon{background:#dfb64f;border-color:#d2a53e;color:#3e2c0f}
body:not(.signed-out) .primary:hover{background:#ebc66c;border-color:#c39530;color:#35260c}
body:not(.signed-out) .primary:disabled{background:#ecdbb1;border-color:#e2c990;color:#78643c;opacity:1}
.site-nav a:first-child,.site-nav a:hover{background:#f3e8c8;color:#775315}
.hero-tag,#account-status{background:#f8edce;color:#795c23;border-color:#e7d49d}
.hero-note strong{color:#91691f}
body:not(.signed-out) #feedback{background:#fff7de;border-color:#dfc576}body:not(.signed-out) #feedback strong{color:#795615}
body:not(.signed-out) #feedback.wrong{background:#fff1ed;border-color:#edc1af}body:not(.signed-out) #feedback.wrong strong{color:#a33c23}
body.signed-out{background:#17130d;color:#eee5d4}
.signed-out .login-atmosphere{background:radial-gradient(ellipse at 50% 40%,#6a502d66,transparent 58%),radial-gradient(ellipse at 16% 100%,#60451c33,transparent 50%),#17130d}
.signed-out .auth-form input{background:#211b12bb;border-color:#b39b6740;color:#f4e9d3}.signed-out .auth-form input::placeholder{color:#ab9875}.signed-out .auth-form input:autofill{-webkit-text-fill-color:#f4e9d3;box-shadow:0 0 0 1000px #302615 inset}
.signed-out .auth-form .primary{background:#dfb64f;border-color:#e6c374;color:#3e2c0f}.signed-out .auth-form .primary:hover{background:#ebc66c}
.signed-out .login-invitation,.signed-out .login-private,.signed-out .login-colophon,.signed-out .login-access{color:#b8a682}.signed-out .auth-form label{color:#d6c7a7}
