@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
.hsk-play-buttons{display:flex;gap:10px}.snake-settings{max-width:1100px;margin:0 auto 60px;padding:32px;display:grid;grid-template-columns:1.3fr 1fr;gap:45px;background:#fffef8f5;border:1px solid #d7e8d9;border-radius:24px;box-shadow:var(--shadow)}.snake-settings h2{font-size:23px}.snake-settings p,.snake-side p{font-size:13px;line-height:1.9;color:#819580}.source-tabs{display:flex;gap:10px;margin:20px 0}.field{display:flex;flex-direction:column;gap:10px;margin:22px 0;font-size:14px}.field select,.field textarea{font:inherit;color:#386f60;border:1px solid #cde1cd;border-radius:12px;padding:13px;background:#fffef9}.field textarea{resize:vertical;line-height:1.9}.snake-error{color:#b5694d;font-size:13px}.snake-play{max-width:1160px;margin:35px auto 60px;background:#fffef8f5;border:1px solid #d7e8d9;border-radius:24px;overflow:hidden}.snake-layout{display:grid;grid-template-columns:minmax(0,792px) 1fr;gap:24px;padding:20px}.board-wrap{position:relative}.board-wrap canvas{display:block;width:100%;border:1px solid #d5e4c9;border-radius:16px}.snake-overlay{position:absolute;inset:0;background:#fffef2da;backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:16px}.snake-overlay[hidden],[hidden]{display:none!important}.snake-overlay p{line-height:2;color:#789174}.snake-side{padding:8px 8px 8px 0}.snake-side h2{font-size:22px}.snake-side h3{font-size:16px;margin-top:28px}.snake-pinyin{display:block;font-size:26px;color:#237c69;margin:18px 0}.snake-answers{display:grid;gap:9px;margin:12px 0}.snake-answers button{font-size:23px}.snake-correct{background:#d6f0d5!important;border-color:#78bb84!important;opacity:1!important}#snake-feedback{min-height:42px}#snake-pause{margin-top:24px}.snake-side .primary{width:100%}
:root{font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;color:#275751;background:#fcfbf4;--teal:#168c82;--deep:#126d67;--gold:#e1a942;--shadow:0 16px 45px #547e6e13}*{box-sizing:border-box}body{margin:0;min-width:1100px;background:radial-gradient(ellipse at 12% 50%,#ddf6ed90,transparent 55%),radial-gradient(ellipse at 85% 60%,#efe6fc70,transparent 60%)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #dbaa4d;outline-offset:4px}button{transition:transform .2s,box-shadow .2s,background .2s}button:not(:disabled):hover{transform:translateY(-2px)}.season-art{position:fixed;inset:72px 0 0;background:url('autumn-garden.png') center top / 100% auto no-repeat;pointer-events:none;z-index:-1;opacity:.9;animation:garden-breathe 18s ease-in-out infinite alternate}.sparkles{position:fixed;inset:120px 0 0;pointer-events:none;overflow:hidden;z-index:0}.sparkles span{position:absolute;color:#eec46b;opacity:.55;font-size:20px;animation:drift 9s ease-in-out infinite}.sparkles span:nth-child(1){left:4%;top:12%}.sparkles span:nth-child(2){left:11%;top:43%;animation-delay:-4s;font-size:13px}.sparkles span:nth-child(3){right:5%;top:22%;animation-delay:-2s}.sparkles span:nth-child(4){right:11%;top:66%;animation-delay:-6s;font-size:14px}.sparkles span:nth-child(5){left:7%;top:78%;animation-delay:-3s;font-size:12px}.sparkles span:nth-child(6){right:3%;top:88%;animation-delay:-7s}header{height:100px;display:flex;align-items:center;gap:55px;padding:0 max(40px,calc((100vw - 1320px)/2));background:#fffdf7e8;backdrop-filter:blur(18px);border-bottom:1px solid #dcebe5;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:13px;white-space:nowrap;font-size:24px;font-weight:800;color:#137e77;letter-spacing:.7px}.brand>span>small{display:block;font-size:10px;font-weight:500;letter-spacing:3px;margin-top:4px;color:#79a49b}.logo{border:1px solid #a8d6c4;width:58px;height:58px;border-radius:50%;background:#fffdf0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:30px;line-height:1;box-shadow:0 4px 15px #bddcca55}.logo small{font-size:8px!important;letter-spacing:2px!important;margin-top:4px!important;color:#c99c39!important}nav{display:flex;gap:32px;margin-left:auto;height:100%;align-items:center}nav a{font-size:15px;font-weight:600;position:relative;color:#6b8780;padding:15px 0}nav a.active{color:#168c82}nav a.active:after{content:'';height:3px;width:22px;background:#3eb5a8;border-radius:4px;position:absolute;bottom:3px;left:calc(50% - 11px)}.header-right{display:flex;gap:18px;align-items:center}.free-tag{font-size:12px;background:#e7f5e8;color:#54896a;border-radius:20px;padding:7px 12px}.quiet{background:transparent;border:0;color:#6b9187;font-size:13px;padding:9px}.welcome{text-align:center;padding:60px 0 38px;position:relative}.season-label{display:inline-block;padding:7px 20px;background:#eff9edc9;border:1px solid #cbe6d5;color:#6c966d;font-size:13px;border-radius:30px;letter-spacing:2px}.welcome h1{font-size:50px;line-height:1.45;font-weight:800;letter-spacing:2px;color:#116f68;margin:22px 0 13px}.welcome em{font-style:normal;color:#2c9c8c}.welcome p{font-size:16px;letter-spacing:1px;color:#7e9690}.welcome-meta{font-size:12px;color:#91a19b;margin-top:24px}.welcome-meta i{font-style:normal;padding:0 14px;color:#bead7b}main{min-height:calc(100vh - 220px);position:relative;z-index:1}.home-games{max-width:1100px;margin:0 auto}.section-heading{display:flex;gap:22px;align-items:center;justify-content:center;text-align:center;margin:2px 0 27px}.section-heading .line{height:1px;width:60px;background:#c7dacf}.section-heading small{font-size:9px;letter-spacing:3px;color:#88a395}.section-heading h2{font-size:24px;color:#23786e;margin:7px 0 0;font-weight:700}.main-game{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:44px;padding:38px 44px;background:linear-gradient(115deg,#f1fcf5ee,#fef8e5ed);border:1px solid #b7dfd0;border-radius:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}.game-entry{transition:transform .35s,box-shadow .35s,border-color .35s}.game-entry:hover{transform:translateY(-5px);box-shadow:0 20px 45px #649a7b26;border-color:#69c5ae}.kicker{display:inline-block;font-size:12px;font-weight:600;letter-spacing:1px;color:#4c9f89;background:#e1f4e9;padding:6px 13px;border-radius:20px}.game-copy h2{font-size:34px;letter-spacing:1px;color:#1b776b;margin:16px 0}.game-copy p{font-size:14px;line-height:2;color:#7c9386;margin:0 0 17px}.chips{display:flex;gap:8px;margin-bottom:25px}.pill{font-size:11px;background:#ffffff9c;border:1px solid #dbe8d6;padding:5px 9px;border-radius:6px;color:#859371}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;border-radius:13px;padding:13px 23px;font-size:14px;font-weight:600;border:1px solid transparent}.primary{background:linear-gradient(120deg,#23a799,#16857b);color:white;box-shadow:0 8px 18px #19988b24}.primary:not(:disabled):hover{box-shadow:0 10px 22px #19988b38}.secondary{border-color:#b9dcd3;background:#f4fcf8;color:#318c7b}.question-preview{background:#fffefa;border:1px solid #e6dfc8;border-radius:21px;padding:22px;box-shadow:0 12px 24px #8e9f6e16;transform:rotate(2deg);text-align:center;animation:float-card 7s ease-in-out infinite}.preview-head{display:flex;justify-content:space-between;font-size:10px;color:#9baf9e}.preview-pinyin{display:block;font-size:12px;margin:20px 0 3px;color:#829e88}.question-preview>strong{font-size:38px;letter-spacing:7px;font-weight:600;color:#376f59}.preview-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.preview-options>span{border:1px solid #e3e7db;background:#fbfcf6;border-radius:8px;font-size:12px;padding:10px;color:#98a18e}.preview-options .right{background:#e6f6e9;border-color:#8bc5a1;color:#529666}.right b{margin-left:15px}.preview-caption{display:block;color:#a8b599;font-size:10px;margin-top:17px}.flash-entry{margin-top:21px;display:flex;align-items:center;gap:30px;padding:27px 35px;background:linear-gradient(115deg,#f4f0fced,#fff9edee);border:1px solid #ded4f2;border-radius:24px;box-shadow:var(--shadow)}.flash-entry h2{font-size:25px;margin:8px 0;color:#7b66a0}.flash-entry p{font-size:14px;margin:0;color:#9a91a9}.lavender{color:#9680b2;background:#eee6f9}.flash-entry .secondary{margin-left:auto;background:#f7f3fe;border-color:#d9ccef;color:#9277b1}.flash-mark{display:flex;padding:12px 10px 7px;gap:2px}.flash-mark>span{display:flex;flex-direction:column;text-align:center;justify-content:center;background:#fffdf5;border:1px solid #e2d8ee;border-radius:10px;width:61px;height:77px;color:#9a88b7;font-size:28px;box-shadow:0 5px 9px #9980bd14;transform:rotate(-11deg)}.flash-mark>span+span{transform:rotate(10deg);margin-left:-4px;color:#af8db3}.flash-mark small{font-size:10px}.home-note{text-align:center;font-size:12px;color:#96a99a;margin:32px 0 52px}footer{margin-top:42px;background:#207971ed;color:#c3e3d7;padding:28px max(40px,calc((100vw - 1200px)/2));display:flex;align-items:center;justify-content:space-between;font-size:11px}.footer-brand{color:#f3fff5;font-size:17px;font-weight:600}.footer-brand small{display:block;font-size:8px;letter-spacing:3px;margin-top:5px;color:#a9d7c7}.practice-intro{max-width:1200px;margin:30px auto 24px}.crumb{font-size:12px;color:#8da79b}.practice-title{display:flex;justify-content:space-between;align-items:center;padding:25px 0}.practice-title h1{font-size:32px;letter-spacing:1px;color:#256f61;margin:14px 0 10px}.practice-title p{font-size:14px;color:#87a08f;margin:0}.version{font-size:13px;line-height:1.9;color:#738c79;background:#fffdf3d9;border:1px solid #e0e4cc;border-radius:14px;padding:13px 20px;text-align:right}.version small{font-size:11px;color:#a5aa8c}.steps{display:flex;align-items:center;justify-content:center;gap:22px;background:#ffffffaa;border:1px solid #dcebe0;border-radius:14px;padding:17px;font-size:13px;color:#a5b4a6}.steps span{display:flex;align-items:center;gap:9px}.steps b{width:25px;height:25px;border-radius:50%;background:#eef1e9;display:grid;place-items:center;font-size:12px}.steps i{height:1px;width:60px;background:#dce7db}.steps .current{color:#238873}.steps .current b{background:#36aa91;color:white}.workspace{display:grid;grid-template-columns:242px 1fr;gap:22px;max-width:1200px;margin:auto;align-items:start}.unit-panel,.word-panel{background:#fffef8ed;border:1px solid #d7e8d9;border-radius:22px;box-shadow:var(--shadow)}.unit-panel{padding:23px 15px;position:sticky;top:120px}.unit-panel h2{font-size:17px;margin:0 10px 8px}.unit-panel h2 span{float:right;font-size:10px;background:#e7f4df;padding:4px 6px;border-radius:6px;color:#7ba16a}.unit-panel>p{font-size:12px;margin:0 10px 14px;color:#a0af98}.unit-list{display:flex;flex-direction:column;gap:5px}.unit{display:flex;gap:12px;text-align:left;align-items:center;border:1px solid transparent;background:transparent;border-radius:11px;padding:9px 12px;color:#798e75;font-size:13px;width:100%}.unit small{display:block;font-size:10px;color:#a8b19b;margin-top:4px}.unit-no{font-size:12px;color:#a8b994}.unit.active{background:#e9f6e6;border-color:#c0ddb9;color:#41834d}.unit-panel .source-note{font-size:10px;line-height:1.8;margin-top:20px}.word-panel{overflow:hidden}.word-heading{display:flex;justify-content:space-between;align-items:center;padding:27px 30px;background:linear-gradient(115deg,#edf9e9,#fffae6);border-bottom:1px solid #e1e9d3}.word-heading small{font-size:10px;letter-spacing:2px;color:#94aa80}.word-heading h2{font-size:25px;margin:7px 0;color:#487a4c}.word-heading p{font-size:12px;margin:0;color:#94a37b}.word-total{font-size:12px;padding:8px 12px;background:#fffef2;border-radius:20px;color:#9e9c64}.word-toolbar{display:flex;justify-content:space-between;padding:19px 28px;font-size:12px;color:#91a07e}.word-toolbar label{display:flex;align-items:center;gap:7px}input[type=checkbox]{accent-color:#28a58d;width:16px;height:16px;cursor:pointer}.word-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:0 25px 26px;gap:12px}.word-card{position:relative;border:1px solid #e5e9dc;border-radius:13px;display:flex;gap:8px;padding:17px 12px;cursor:pointer;background:#fffef9;min-height:121px}.word-card.picked{background:#f8fcf2;border-color:#c3dfb8}.word-card>input{width:13px;height:13px;margin:3px 0 0}.word-text{display:flex;flex-direction:column;max-width:150px;gap:5px}.word-text small{font-size:11px;color:#9ca989}.word-text strong{font-size:23px;font-weight:600;color:#437d50}.word-text>span{font-size:11px;color:#929c82;line-height:1.6}.audio{border:1px solid #c9e5d9;background:#edf9ef;color:#62a17c;display:inline-grid;place-items:center;width:29px;height:29px;border-radius:50%;font-size:17px;padding:0}.word-card .audio{position:absolute;right:9px;top:12px;width:23px;height:23px;font-size:13px}.start-bar{position:sticky;bottom:0;background:#fffef4f5;backdrop-filter:blur(12px);border-top:1px solid #e0e9d5;display:flex;justify-content:space-between;align-items:center;padding:20px 27px;z-index:3}.start-bar strong{font-size:15px;color:#5a8d59}.start-bar small{display:block;font-size:11px;color:#a0ad8c;margin-top:6px}.play-shell{max-width:870px;margin:50px auto 70px;background:#fffef8ed;border:1px solid #d1e4cf;border-radius:27px;box-shadow:var(--shadow);overflow:hidden}.play-top{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;font-size:12px;color:#8aa17d}.progress{height:5px;background:#ecf1e2}.progress>span{display:block;height:100%;background:#58b791;transition:width .3s}.question-body,.flash-body{text-align:center;padding:34px 70px 15px}.question-word{position:relative;margin:22px 0 28px}.question-word small{font-size:16px;color:#95a781;min-height:24px;display:block}.question-word h1{font-size:64px;font-weight:600;color:#327553;letter-spacing:6px;margin:5px 0 13px}.audio.large{width:37px;height:37px;font-size:22px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px}.answers button{display:flex;align-items:center;gap:13px;text-align:left;background:#fffdf4;border:1px solid #e1e5cf;border-radius:13px;padding:17px 15px;font-size:15px;color:#81956f;min-height:70px}.answers b{font:12px Arial;border:1px solid #e1e7d3;padding:5px 7px;border-radius:6px;font-weight:400;color:#a8b191}.answers i{margin-left:auto;font-style:normal}.answers button:disabled{opacity:1;cursor:default}.answers .correct{background:#e3f5e2;border-color:#7fc499;color:#418656}.answers .incorrect{background:#fff0e9;border-color:#e9b49c;color:#bf7b60}.answer-feedback{font-size:13px;min-height:40px;line-height:1.8;margin:21px 0 10px;color:#acb59c}.answer-feedback.good{color:#479467}.answer-feedback.bad{color:#b87e68}.play-note{text-align:center;font-size:11px;color:#a4b294;margin:18px 0 25px}.results{max-width:920px;margin:50px auto;background:#fffef6ed;border:1px solid #d9e5ce;border-radius:28px;padding:40px;text-align:center;box-shadow:var(--shadow)}.result-flower{display:block;font-size:42px;color:#e4ba62;margin-bottom:18px}.results h1{font-size:30px;color:#347953;margin:23px 0}.results>p{color:#8ba080;font-size:14px}.result-stats{display:flex;justify-content:center;margin:35px 0;gap:0}.result-stats>div{width:30%;border-right:1px solid #e0e9d6}.result-stats>div:last-child{border:0}.result-stats strong{display:block;font-size:38px;color:#5aa377}.result-stats small{font-size:17px;color:#a7b999}.result-stats span{display:block;font-size:12px;color:#9ba991;margin-top:8px}.review-list{background:#f9fbf0;border:1px solid #e4ead3;border-radius:15px;padding:20px;text-align:left}.review-list h2{font-size:16px;color:#758c58;margin:0 0 16px}.review-list>div{display:grid;grid-template-columns:100px 140px 1fr 30px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #e4ead8;font-size:13px;color:#98a589}.review-list strong{font-size:19px;color:#6a8b53}.result-actions{display:flex;justify-content:center;gap:14px;margin-top:27px}.big-flash{position:relative;display:block;width:390px;height:270px;border:0;padding:0;background:transparent;margin:27px auto 20px;perspective:1200px}.face{position:absolute;inset:0;border:1px solid #dfd5f0;border-radius:22px;box-shadow:0 15px 32px #a393b61f;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;transition:transform .6s ease;background:linear-gradient(125deg,#f4edff,#fff9ed)}.face small{font-size:17px;color:#a391b6}.face strong{font-size:67px;color:#8e75aa;letter-spacing:5px;margin:16px 10px 25px}.face>span{font-size:12px;color:#b6a8c0}.back{transform:rotateY(180deg);background:linear-gradient(125deg,#ecf9f1,#fff9ed)}.back strong{font-size:27px;letter-spacing:0;color:#739774;max-width:330px}.flipped .front{transform:rotateY(-180deg)}.flipped .back{transform:rotateY(0)}.flash-controls{display:flex;justify-content:center;gap:17px;margin:25px 0 10px}#notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#236f62;color:#fff;padding:13px 23px;border-radius:13px;box-shadow:var(--shadow);font-size:13px;opacity:0;pointer-events:none;z-index:30;transition:opacity .25s}#notice.show{opacity:1}.no-motion *{animation:none!important;transition:none!important}@keyframes drift{0%,100%{transform:translateY(0) rotate(0deg);opacity:.3}50%{transform:translateY(25px) rotate(80deg);opacity:.75}}@keyframes float-card{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-8px) rotate(1deg)}}@keyframes garden-breathe{from{transform:scale(1)}to{transform:scale(1.018)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}@media(max-width:1300px){.home-games{margin:0 100px}.workspace,.practice-intro{margin-left:45px;margin-right:45px}.workspace{grid-template-columns:220px 1fr}.word-grid{gap:9px;padding-left:16px;padding-right:16px}.word-text{max-width:130px}.brand{font-size:21px}header{gap:32px}.header-right{gap:8px}.welcome{padding-top:43px}}
.level-field{display:flex;flex-direction:column;gap:8px;font-size:13px;margin:18px 8px}.level-field select{font:inherit;background:#fffdf6;color:#31725f;border:1px solid #c7ddcb;border-radius:10px;padding:10px;width:100%}.unit-list{max-height:55vh;overflow-y:auto;scrollbar-width:thin}.word-text>span{overflow-wrap:anywhere}.face.back strong{font-size:23px}.answers button span{overflow-wrap:anywhere}.snake-settings .level-field{margin:22px 0}
.word-context{background:#f0f6e9;border:1px solid #d7e4cc;border-radius:13px;padding:12px 18px;margin:0 auto 22px;text-align:center}.word-context small{color:#91a47b;font-size:11px}.word-context p{margin:7px 0 0;font-size:22px;line-height:1.7;color:#457956}.flash-body .word-context{max-width:510px}.question-body .answers span{font-size:14px}