:root { --ink:#443d39; --muted:#9d968e; --paper:#fffdfa; --cream:#f8f2e8; --sand:#c9a877; --sand-dark:#ad8957; --blue:#24618d; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; background:radial-gradient(circle at 10% 15%,#fffdf8 0 3%,transparent 22%),radial-gradient(circle at 84% 82%,#fffaf0 0 5%,transparent 25%),var(--cream); }
button { font:inherit; cursor:pointer; }
#app { width:min(100%, 560px); min-height:100svh; margin:auto; padding:30px 22px 44px; overflow:hidden; position:relative; }
#app::before,#app::after { content:"✦"; position:absolute; color:#f0ca5e; opacity:.55; font-size:26px; animation:twinkle 2.6s ease-in-out infinite alternate; }
#app::before { top:18%; left:4%; } #app::after { right:5%; bottom:13%; animation-delay:1s; }
@keyframes twinkle { to { transform:scale(1.3) rotate(15deg); opacity:.85; } }
.screen { min-height:calc(100svh - 74px); display:flex; flex-direction:column; animation:enter .35s ease both; }
@keyframes enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.hero { justify-content:center; align-items:center; text-align:center; padding:8px 2px 26px; }
.brand-strip { width:100%; display:flex; justify-content:center; align-items:center; gap:12px; margin:2px auto 8px; color:#36566e; }.brand-unit { display:flex; align-items:center; gap:7px; text-align:left; font-size:12px; font-weight:700; line-height:1.35; }.brand-unit img { width:42px; height:42px; border-radius:50%; object-fit:cover; }.brand-unit .school-logo { width:43px; height:43px; border-radius:0; object-fit:contain; }.brand-divider { height:34px; width:1px; background:#d9d0c4; }.hero-content { display:flex; flex:1; width:100%; flex-direction:column; justify-content:center; align-items:center; }
.home-stats { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }.home-stats span,.route-pill { padding:6px 10px; border-radius:999px; background:#f4ebdc; color:#927349; font-size:12px; font-weight:700; }.home-actions { width:min(100%,330px); margin-top:10px; }.home-actions .secondary { width:100%; min-height:45px; font-size:15px; }
.daily-card { width:min(100%,330px); display:grid; grid-template-columns:1fr auto; gap:5px 10px; padding:10px 13px; margin:0 auto 10px; color:#546c61; background:#f0f7f2; border:1px solid #dcebe0; border-radius:15px; text-align:left; font-size:12px; }.daily-card b { color:#3e7b59; }.daily-card i { grid-column:1/-1; height:6px; overflow:hidden; background:#d9eadf; border-radius:999px; }.daily-card em { display:block; height:100%; background:#77ad87; border-radius:inherit; }.daily-card small { grid-column:1/-1; color:#809186; }
.hero .art { width:min(78vw,355px); margin:0 auto 22px; mix-blend-mode:multiply; filter:drop-shadow(0 14px 15px rgba(142,106,66,.10)); animation:float 3.4s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-10px); } }
h1,h2,h3,p { margin:0; } h1 { font-size:clamp(29px,7vw,38px); letter-spacing:.04em; font-weight:750; } h2 { font-size:28px; } h3 { font-size:21px; }
.lead { color:var(--muted); font-size:16px; line-height:1.9; margin:17px auto 28px; max-width:330px; }
.tagline { color:#847b70; font-size:17px; margin-bottom:34px; }
.primary,.secondary { border:none; border-radius:999px; min-height:58px; padding:0 30px; font-weight:700; font-size:20px; transition:.2s transform,.2s box-shadow; }
.primary { color:white; background:linear-gradient(120deg,#bd9562,#d8ba87); box-shadow:0 10px 24px rgba(150,110,59,.18); }
.primary:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(150,110,59,.25); }
.primary:active,.option:active { transform:scale(.98); }.secondary { background:var(--paper); color:var(--ink); border:1px solid #eee4d7; }
.footnote { margin-top:22px; color:#bbb2a8; font-size:14px; }
.top-copy { text-align:center; margin:20px 0 26px; }.top-copy p { color:var(--muted); margin-top:10px; }
.character-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.character { background:rgba(255,255,255,.74); border:1px solid rgba(228,216,199,.72); box-shadow:0 5px 16px rgba(103,78,48,.08); border-radius:24px; padding:8px 8px 18px; text-align:center; transition:.22s transform,.22s box-shadow; }
.character:hover { transform:translateY(-4px); box-shadow:0 12px 24px rgba(103,78,48,.13); }.character img { width:100%; aspect-ratio:4/4.3; object-fit:cover; border-radius:18px; mix-blend-mode:multiply; }
.character h3 { margin:4px 0 7px; font-size:18px; }.pill { display:inline-flex; padding:5px 10px; border-radius:999px; font-size:12px; color:white; background:var(--accent,#c9a877); }.character p { color:#938b83; font-size:13px; line-height:1.45; margin:10px 4px 0; }
.back { background:none; border:none; color:#9d9285; padding:4px 0 12px; text-align:left; font-size:14px; }
.nav-row { display:flex; justify-content:space-between; align-items:center; color:#9d9285; font-size:13px; margin:0 0 10px; }.text-button { border:0; padding:3px 0; color:#897d6e; background:transparent; min-height:auto; font-size:14px; font-weight:700; }
.profile { text-align:center; }.profile-art { width:100%; max-width:372px; max-height:370px; object-fit:cover; border-radius:28px; mix-blend-mode:multiply; margin:-3px auto 8px; }.traits { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:14px 0 17px; }.traits span { color:white; background:var(--accent,#c9a877); padding:7px 14px; border-radius:999px; font-size:14px; }.forecast { color:#a89d90; font-size:15px; }.intro-card,.result-card,.dialogue,.ending { background:rgba(255,255,255,.8); border:1px solid rgba(232,221,204,.8); border-radius:22px; box-shadow:0 7px 17px rgba(97,72,45,.08); }.intro-card { text-align:left; margin:20px 0; padding:18px; line-height:1.75; font-size:15px; }.quote { color:#998e82; font-style:italic; margin:4px 0 22px; }.profile .primary { width:100%; }
.game { padding-top:5px; }.progress-row { display:flex; align-items:center; gap:10px; color:#c1b6a7; margin:6px 0 22px; }.step { width:37px; height:37px; display:grid; place-items:center; border-radius:50%; color:white; font-weight:700; background:var(--sand); }.track { flex:1; height:6px; overflow:hidden; border-radius:999px; background:#eee8df; }.track b { display:block; height:100%; background:var(--sand); border-radius:inherit; transition:width .3s; }.chapter { text-align:center; padding:25px 18px 23px; border-radius:26px; background:linear-gradient(135deg,#fffdf9,#f8efe5); }.chapter .eyebrow { color:#b5aa9e; letter-spacing:.18em; font-size:12px; }.chapter .icon { color:#e5b84a; font-size:28px; margin:8px 0; }.chapter h2 { font-size:29px; }.chapter strong { display:block; color:var(--sand-dark); margin-top:8px; }.scene { color:#a49a8e; line-height:1.75; text-align:center; margin:25px 11px 18px; }.dialogue { padding:20px; line-height:1.7; font-size:18px; margin-bottom:22px; position:relative; }.dialogue::before { content:""; position:absolute; top:-11px; left:50%; width:21px; height:21px; background:rgba(255,255,255,.8); transform:translateX(-50%) rotate(45deg); }.choice-label { color:#b5aa9e; text-align:center; font-size:13px; margin-bottom:12px; }.options { display:grid; gap:12px; }.option { border:1px solid #ece4d8; border-radius:18px; min-height:65px; text-align:left; padding:12px 15px; color:var(--ink); background:rgba(255,255,255,.83); font-weight:600; display:flex; align-items:center; gap:14px; box-shadow:0 3px 10px rgba(93,68,41,.05); }.letter { flex:none; width:33px; height:33px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--sand); }
.route-pill { display:table; margin:-10px auto 14px; background:#eff5f1; color:#4f816f; }.story-route { margin:-8px auto 18px; max-width:360px; color:#83786d; font-size:14px; line-height:1.7; text-align:center; }
.learn-badge { display:inline-block; color:#24618d; background:#e5f0f6; border-radius:999px; padding:7px 12px; font-weight:700; font-size:13px; margin:8px auto 13px; }.study-card { background:linear-gradient(140deg,#f7fbfd,#fffdfa); border:1px solid #dce8ef; border-radius:24px; padding:21px 17px; box-shadow:0 8px 18px rgba(41,86,110,.08); text-align:center; }.study-card h2 { font-size:24px; margin:0 0 6px; }.study-card>p { color:#827a71; line-height:1.65; margin:0 0 16px; }.cpp-code { margin:14px 0 17px; padding:15px; overflow:auto; color:#dbeeff; background:#1f3b4e; border-radius:15px; text-align:left; font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; }.cpp-code .accent { color:#ffd884; }.lesson-options .option { font-size:15px; }.feedback { text-align:center; padding:24px 19px; }.feedback .symbol { font-size:42px; }.feedback h2 { margin:8px 0; }.feedback p { color:#82796f; line-height:1.75; margin:11px 0 20px; }.feedback.good h2 { color:#4f8b68; }.feedback.try h2 { color:#a87950; }
.mission { color:#58806e !important; font-size:13px; margin-bottom:8px !important; }.interaction { display:grid; gap:12px; margin-top:14px; }.binary-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.binary-option,.token,.array-cell,.bug-lines button { border:1px solid #dce5e8; background:#fff; color:#314f62; border-radius:15px; font:700 16px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; cursor:pointer; }.binary-option { min-height:82px; }.answer-field { display:grid; gap:7px; color:#6d6257; text-align:left; font-size:14px; }.answer-field input { width:100%; border:1px solid #9eb8c7; border-radius:13px; padding:14px; color:#21465c; background:white; font:700 20px ui-monospace,SFMono-Regular,Consolas,monospace; outline:none; }.answer-field input:focus { border-color:#c9a877; box-shadow:0 0 0 3px rgba(201,168,119,.18); }.fill-editor { margin:0; }.fill-editor input { min-width:50px; text-align:center; }.interaction>.primary { width:100%; min-height:48px; font-size:17px; }.interaction-label { color:#71675d; margin:0; }.token-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }.token { min-width:62px; min-height:50px; padding:10px 13px; }.mini-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; }.mini-actions .secondary,.mini-actions .primary { min-height:46px; padding:0 12px; font-size:15px; }.array-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.array-cell { min-height:82px; display:grid; gap:5px; place-items:center; }.array-cell small { color:#8b9ba6; }.array-cell b { color:#25628a; }.match-list { display:grid; gap:10px; }.match-list label { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 13px; border:1px solid #dde8ec; border-radius:13px; background:white; text-align:left; }.match-list code { color:#285d7a; font-weight:800; }.match-list select { flex:1; max-width:160px; padding:7px; border:1px solid #b7ccd7; border-radius:8px; color:#31566d; background:#fff; font:inherit; }.bug-lines { display:grid; overflow:hidden; border:1px solid #31566d; border-radius:14px; background:#1f3b4e; }.bug-lines button { display:flex; gap:10px; min-height:39px; padding:9px 12px; border:0; border-bottom:1px solid rgba(255,255,255,.12); border-radius:0; color:#ddedf4; background:transparent; text-align:left; font-size:13px; }.bug-lines button:last-child { border-bottom:0; }.bug-lines button:hover { background:#315d77; }.bug-lines span { color:#86aabe; }
.hint { color:#846f57 !important; background:#fff5db; border-radius:13px; padding:10px 12px; font-size:13px; text-align:left; }.lesson-actions { margin-top:12px; }.lesson-actions .secondary { min-height:42px; font-size:14px; }.practice-card { padding:22px 17px; background:linear-gradient(140deg,#fffdf9,#eef8f6); border:1px solid #d7e7e2; border-radius:24px; text-align:center; box-shadow:0 8px 18px rgba(41,86,110,.08); }.practice-card h2 { font-size:23px; margin:2px 0 9px; }.practice-card>p { color:#81776d; line-height:1.65; }.editor-label { display:block; color:#6d6257; font-size:13px; margin:18px 0 8px; text-align:left; }.code-editor { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:13px; border-radius:14px; background:#1f3b4e; color:#dbeeff; text-align:left; font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; }.code-editor input { min-width:105px; flex:1; padding:6px 8px; color:#fff4ce; background:#31576f; border:1px solid #86aabe; border-radius:6px; font:inherit; outline:none; }.code-editor input:focus { border-color:#ffd884; }.practice-feedback { padding:11px; border-radius:12px; line-height:1.6; text-align:left; font-size:14px; }.practice-feedback.ok { color:#397a59; background:#e6f4eb; }.practice-feedback.bad { color:#9d6d3d; background:#fff1df; }
.result { text-align:center; }.status { color:#a99c8b; background:#f1e9db; padding:8px 15px; border-radius:999px; display:inline-block; margin:5px auto 16px; }.circle { width:170px; height:170px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--sand) calc(var(--score)*1%), #efe9df 0); position:relative; }.circle::after { content:""; position:absolute; inset:13px; border-radius:50%; background:var(--cream); }.circle b { z-index:1; color:var(--sand-dark); font-size:48px; }.match { font-size:25px; margin-bottom:8px; }.result>p { color:#9f968c; margin-bottom:24px; }.result-card { text-align:left; padding:21px; margin:15px 0; }.result-card header { color:#80766b; }.result-card h2 { color:var(--sand-dark); text-align:center; margin:20px 0 2px; }.code { display:block; color:#b8ada0; letter-spacing:.18em; text-align:center; font-size:13px; }.description { text-align:center; color:#877d72; line-height:1.65; margin:19px 0; }.metric { display:grid; grid-template-columns:105px 1fr 40px; gap:8px; align-items:center; color:#887e73; margin:12px 0; font-size:14px; }.bar { height:10px; background:#f3eee6; border-radius:99px; overflow:hidden; }.bar i { display:block; height:100%; width:var(--width); background:var(--sand); border-radius:inherit; }.partner { text-align:center; }.partner img { width:100%; max-height:300px; object-fit:cover; mix-blend-mode:multiply; border-radius:18px; }.partner h3 { margin:0 0 13px; }.partner q { display:block; color:#8c8175; background:#fbf8f2; padding:13px; border-radius:14px; line-height:1.6; }.ending { padding:21px; margin:17px 0 25px; text-align:left; line-height:1.8; }.ending h3 { color:var(--sand-dark); text-align:center; margin:10px 0; }.actions { display:grid; gap:12px; }.actions button { width:100%; }
.report-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:10px 0 20px; text-align:center; }.report-stats div { display:grid; gap:5px; border-right:1px solid #eee6da; }.report-stats div:last-child { border:0; }.report-stats b { color:var(--sand-dark); font-size:25px; }.report-stats span { color:#968b7e; font-size:12px; }.badge-grid { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }.badge { padding:8px 10px; border-radius:12px; background:#f7efe0; color:#7f6541; font-size:13px; font-weight:700; }.empty-note { color:#9c9185; line-height:1.65; }
.mastery-list { margin-top:14px; }.settings-row { display:flex; align-items:center; justify-content:space-between; margin-top:14px; color:#675e55; }.switch { width:48px; height:27px; padding:3px; border:0; border-radius:999px; background:#d8d1c7; }.switch i { display:block; width:21px; height:21px; border-radius:50%; background:white; box-shadow:0 1px 4px rgba(0,0,0,.18); transition:.2s transform; }.switch.on { background:#77ad87; }.switch.on i { transform:translateX(21px); }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
@media (max-width:380px) { #app { padding:22px 15px 32px; }.brand-strip { gap:8px; }.brand-unit { font-size:11px; }.character-grid { gap:10px; }.character { border-radius:18px; }.character h3 { font-size:16px; }.metric { grid-template-columns:93px 1fr 36px; } }