:root {
  --ink:#29243e;
  --muted:#706b7c;
  --coral:#ef7476;
  --coral-dark:#c65c60;
  --violet:#8066d9;
  --purple:#292342;
  --line:#e8e5eb;
  --paper:#fffefa;
  --shadow:0 22px 52px rgba(42,35,72,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Fredoka,"Noto Sans TC",ui-rounded,system-ui,sans-serif;background:radial-gradient(circle at 12% 5%,#ffe7a0 0,transparent 27%),radial-gradient(circle at 94% 24%,#cadbff 0,transparent 25%),radial-gradient(circle at 55% 100%,#f6e4f5 0,transparent 26%),#fdfbf1;background-attachment:fixed}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.54}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.025em}p{line-height:1.65}img{max-width:100%}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #7763d1;outline-offset:3px}
[hidden]{display:none!important}
.card{background:rgba(255,254,250,.92);border:1px solid rgba(255,255,255,.82);border-radius:30px;box-shadow:var(--shadow)}
.eyebrow{color:#8066d9;font-size:.75rem;font-weight:800;letter-spacing:.14em;margin-bottom:10px}.lead{color:var(--muted)}
.primary,.secondary,.quiet{border:0;font-weight:800;transition:transform .15s,box-shadow .15s}.primary{background:var(--coral);color:#fff;border-radius:16px;padding:15px 23px;box-shadow:0 5px 0 var(--coral-dark)}.primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--coral-dark)}.secondary{background:#f0edfa;color:var(--purple);border-radius:16px;padding:15px 22px}.secondary:hover{background:#e7e1fb}.quiet{background:#f3f2f4;color:#6b6577;border-radius:13px;padding:11px 16px}
.site-header{display:none;min-height:76px;padding:12px max(24px,calc((100vw - 1220px)/2));align-items:center;justify-content:space-between;background:rgba(255,254,251,.8);backdrop-filter:blur(18px);border-bottom:1px solid #ffffffc0}.logged-in .site-header{display:flex}.brand{display:flex;gap:10px;align-items:center;font-size:1.03rem;font-weight:900}.brand img{width:46px;height:46px;object-fit:cover;border-radius:50%;box-shadow:0 4px 13px #4b3e6b24}.brand small{display:block;font-size:.72rem;letter-spacing:.1em;color:var(--violet)}.header-user{font-size:.78rem;font-weight:700;color:#656070;background:#f5f1fb;border-radius:999px;padding:9px 14px}
main{max-width:1220px;margin:0 auto;padding:30px 24px;min-height:calc(100vh - 130px)}body:not(.logged-in) main{max-width:none;min-height:calc(100vh - 52px);display:grid;place-items:center;padding:35px 20px}.audio-status{margin:0}.audio-status:not(:empty){position:fixed;bottom:20px;left:50%;z-index:1000;transform:translateX(-50%);max-width:calc(100vw - 25px);padding:11px 16px;border-radius:14px;background:#292342;color:white;font-size:.85rem;box-shadow:0 12px 28px #2923422e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Entry card follows the reference site's compact student check-in layout. */
.login-card{position:relative;width:min(525px,100%);padding:36px 36px 32px;overflow:hidden;background:rgba(255,254,249,.86);backdrop-filter:blur(20px)}.login-card:after{content:"";position:absolute;right:-35px;top:-45px;width:130px;height:130px;background:#f8d9db;border-radius:50%;opacity:.72;pointer-events:none}.login-mascot{display:block;width:94px;height:91px;object-fit:contain;position:relative;z-index:1;margin:0 0 12px}.login-card h1{font-size:clamp(2rem,4vw,2.65rem);line-height:1.18;margin-bottom:10px}.login-card .lead{font-size:.89rem;margin-bottom:22px}.login-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}.login-form label{font-size:.78rem;font-weight:800}.login-form label:nth-of-type(3),.login-form .primary{grid-column:1/-1}.login-form input,.login-form select{display:block;width:100%;margin-top:7px;min-height:50px;padding:11px 13px;background:#fffefa;border:2px solid #e6e2e6;border-radius:15px;color:var(--ink);outline:none}.login-form select:invalid{color:#817b88}.login-form input:focus,.login-form select:focus{border-color:#9279de}.login-form .primary{margin-top:6px}.demo-note{color:#8a8491;font-size:.7rem;line-height:1.5;margin:20px 0 0}
/* Welcome hero */
.hero{position:relative;display:grid;grid-template-columns:1.18fr .82fr;gap:25px;min-height:430px;padding:50px 56px;overflow:hidden;background:linear-gradient(120deg,#fffdf4 0%,#fff9e7 52%,#eef1ff 100%)}.hero:before{content:"";position:absolute;width:250px;height:250px;border-radius:50%;background:#f8dcdd;right:-100px;top:-110px;opacity:.45}.hero-copy,.hero-scene{position:relative;z-index:1}.hero-kicker{display:inline-block;font-size:.7rem;font-weight:900;letter-spacing:.12em;color:#6554a3;background:#eee8fb;border-radius:999px;padding:8px 13px;margin-bottom:20px}.hero .eyebrow{margin:0 0 7px}.hero h1{font-size:clamp(3.15rem,6vw,5.5rem);line-height:.96;margin:0 0 19px;color:var(--purple)}.hero h1 span{color:#8d72dd}.hero-lead{color:#625f70;font-size:1rem;max-width:500px;margin-bottom:22px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-metrics{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;color:#787487;font-size:.82rem}.hero-metrics strong{color:#292342;font-size:1.12rem}.hero-scene{align-self:stretch;min-height:320px;border:1px solid #fff9;border-radius:28px;background:radial-gradient(circle at 49% 50%,#fffbe7 0,#f8efff 72%,#e9eeff 100%);box-shadow:inset 0 1px 0 #fff,0 18px 37px #53518a1a;display:grid;place-items:center;overflow:hidden}.hero-scene img{width:min(72%,290px);max-height:240px;object-fit:contain;filter:drop-shadow(0 16px 15px #63516b25)}.scene-label{position:absolute;top:20px;left:24px;color:#6f668d;font-size:.66rem;font-weight:900;letter-spacing:.13em}.scene-word{position:absolute;font-size:.82rem;font-weight:800;color:#6a568c;background:#ffffffd9;border:1px solid #fff;border-radius:999px;padding:7px 11px;box-shadow:0 6px 14px #514c7722}.scene-word.one{left:8%;top:28%}.scene-word.two{right:8%;top:33%}.scene-word.three{left:10%;bottom:17%}.scene-word.four{right:9%;bottom:13%}
.levels{display:flex;gap:10px;padding:10px;margin-top:18px}.level{flex:1;min-height:48px;border:0;border-radius:14px;background:#f3f1f6;color:#7b7685;font-weight:900}.level.active{background:#fff0bd;color:#5d4a2d}.level small{display:block;font-size:.63rem}.unitbar{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:15px 22px}.unitbar>div{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.unitbar strong{font-size:1rem}.unitbar small{color:#86808d}.pill{font-size:.68rem;color:#4d6d56;background:#e9f6e9;border-radius:999px;padding:6px 10px;font-weight:900}
.tabs{display:flex;gap:7px;margin:24px 0 30px;padding:9px;border-radius:23px;background:#ffffffd9;box-shadow:0 10px 25px #2923420d}.tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:57px;background:transparent;border:0;border-radius:17px;color:#6b667a;font-weight:900;font-size:1.03rem}.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.tabs button:hover{background:#f2f0f5}.tabs button.active{background:var(--purple);color:white;box-shadow:0 5px 0 #1b182f}.tab-panel{scroll-margin-top:22px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 0 24px}.section-head h2{font-size:2.2rem;margin:0 0 4px}.section-head p:last-child{margin:0;color:var(--muted);font-size:.9rem}.search{color:#736d80;font-size:.78rem;font-weight:800;min-width:240px}.search input{display:block;width:100%;padding:12px 14px;margin-top:5px;background:#fff;border:2px solid var(--line);border-radius:14px;outline:none}.search input:focus{border-color:#9279de}
.picture-gallery{background:#fffdfa;border:1px solid #ebe8e8;border-radius:19px;padding:14px 20px;margin-bottom:22px}.picture-gallery summary{font-weight:900;color:#5c5080;cursor:pointer}.picture-gallery img{display:block;max-width:100%;max-height:460px;object-fit:contain;margin:16px auto 0}.picture-gallery img+img{max-height:350px}
/* Word cards mirror the reference's numbered learning cards. */
.word-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.word-card{display:flex;flex-direction:column;align-items:flex-start;min-height:185px;padding:22px;background:#fffefa;border:1px solid #fff;border-radius:23px;text-align:left;color:var(--ink);box-shadow:0 12px 30px #29234212;transition:transform .16s,box-shadow .16s}.word-card:nth-child(4n+1){background:#fff8ee}.word-card:nth-child(4n+2){background:#f7f5ff}.word-card:nth-child(4n+3){background:#f1f8f7}.word-card:hover{transform:translateY(-4px);box-shadow:0 20px 33px #29234222}.word-card .tag{color:#8a78ac;font-size:.66rem;letter-spacing:.12em;font-weight:900}.word-card strong{font-size:1.42rem;line-height:1.22;margin-top:17px;overflow-wrap:anywhere}.word-card .pos{color:#767184;font-size:.78rem;margin:6px 0 14px}.word-open{margin-top:auto;color:#6e5ab5;font-size:.76rem;font-weight:900}.word-open span{font-size:1rem;margin-left:5px}
.phrase-list{display:grid;gap:12px}.phrase{display:flex;align-items:center;gap:18px;padding:19px 24px;background:#fffefa;border:1px solid #fff;border-radius:20px;box-shadow:0 9px 26px #2923420c}.phrase-number{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f3efff;color:#7965b7;font-weight:900;flex:none}.phrase-copy{flex:1;display:grid;gap:4px;min-width:0}.phrase-copy b{font-size:1.11rem;overflow-wrap:anywhere}.phrase-copy small{color:#77717e;font-size:.78rem}.phrase-chinese{color:#514a5e;background:#f7f5f4;border-radius:10px;padding:7px 10px;font-size:.84rem;font-weight:700}.sound{border:0;background:#eaf0ff;color:#5173c4;border-radius:50%;width:43px;height:43px;flex:none}.sound svg,.audio-button svg{width:21px;height:21px;vertical-align:middle}.audio-button{display:inline-flex;align-items:center;gap:7px}
/* Practice mode selection uses the reference's compact pills, with original vector icons. */
.mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.mode{display:flex;align-items:center;justify-content:center;gap:10px;min-height:78px;padding:14px;background:#f1eff1;border:0;border-radius:999px;color:#6d687d;text-align:center;transition:transform .16s,background .16s,box-shadow .16s}.mode:hover{transform:translateY(-2px);background:#e8e4ee}.mode.active{background:var(--purple);color:#fff;box-shadow:0 5px 0 #1b182f}.mode .icon{display:grid;place-items:center;flex:none}.mode-icon{width:27px;height:27px}.mode b{font-size:1rem;white-space:nowrap}.mode small{display:none}.quiz{max-width:880px;margin:24px auto 0;padding:32px}.quiz-top{display:flex;justify-content:space-between;gap:12px;color:#847d90;font-size:.82rem;font-weight:900}.question{font-size:1.65rem;font-weight:900;line-height:1.45;margin:28px 0 21px;overflow-wrap:anywhere}.question small{display:block;font-size:.9rem;color:var(--muted)}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.option{min-height:57px;padding:13px 16px;background:#f9f8fb;border:2px solid #e9e6ed;border-radius:16px;color:#3a354b;text-align:left;font-weight:800}.option:hover{border-color:#967ee2}.answer-input{display:block;width:100%;max-width:480px;min-height:54px;border:2px solid #e7e3eb;border-radius:14px;background:#fff;padding:13px 15px;outline:none}.answer-input:focus{border-color:#9279de}.quiz-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}.feedback{margin-top:20px;padding:13px 16px;border-radius:17px;font-weight:800}.feedback.good{background:#eaf7ef;color:#34694a}.feedback.bad{background:#fff0ed;color:#9e514b}.pangchai-feedback{display:flex;align-items:center;gap:14px}.pangchai-feedback img{width:72px;height:68px;object-fit:contain;flex:none}.review-button{margin-top:15px}.match-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:19px;background:#f0f1fc;border-radius:22px}.match-col{display:grid;gap:11px;align-content:start}.match-col h3{text-align:center;color:#6c6481;font-size:.88rem;margin:0 0 2px}.match-col .option{min-height:77px;text-align:center;background:#fff;box-shadow:0 4px 0 #dfe0eb}.match-col .option:disabled{box-shadow:none}.quiz-complete{text-align:center;padding:20px}.quiz-complete>img{width:165px;height:140px;object-fit:contain}.quiz-complete h2{font-size:2rem}.quiz-complete p{color:var(--muted)}.quiz-complete .secondary{margin-left:8px}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.stat{padding:24px}.stat small{color:var(--muted)}.stat strong{display:block;font-size:2.1rem;margin:10px 0;color:#644db2}.history{margin-top:18px;padding:24px}.history h3{margin-bottom:12px}.history p{color:var(--muted);margin-bottom:0}.history-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:12px 0;border-bottom:1px solid #eee9ed;font-size:.83rem}.history-row:last-child{border-bottom:0}.error-list{display:flex;gap:7px;flex-wrap:wrap}.error-list span{background:#fff1ed;color:#a35049;padding:7px 10px;border-radius:10px;font-size:.8rem}
dialog{border:0;border-radius:25px;max-width:min(560px,92vw);padding:33px;background:#fffefa;color:var(--ink);box-shadow:0 30px 75px #1d172e66}dialog::backdrop{background:#2923429c}.close{float:right;border:0;background:none;font-size:2rem;color:#6e6777}.dialog-word{font-size:2.7rem;margin:15px 0 5px;overflow-wrap:anywhere}.dialog-example{background:#fff7e3;border-radius:15px;padding:17px 19px;line-height:1.7}footer{text-align:center;color:#8a8492;font-size:.73rem;padding:22px}
@media(max-width:980px){.hero{grid-template-columns:1fr .8fr;padding:36px;min-height:400px}.hero h1{font-size:4rem}.word-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){main{padding:19px 16px}.site-header{min-height:67px;padding:10px 16px}.brand{font-size:.85rem}.brand img{width:39px;height:39px}.header-user{font-size:.68rem;padding:7px 9px}.login-card{padding:27px 24px}.login-card h1{font-size:2rem}.login-form{grid-template-columns:1fr}.login-form label:nth-of-type(3),.login-form .primary{grid-column:auto}.hero{grid-template-columns:1fr;gap:20px;padding:29px 25px}.hero h1{font-size:3.6rem}.hero-scene{min-height:260px}.hero-scene img{max-height:200px}.hero-metrics{gap:14px}.levels{gap:5px;padding:7px}.level{font-size:.82rem}.unitbar{padding:12px 15px}.unitbar small{display:none}.tabs{gap:2px;padding:5px}.tabs button{min-height:50px;font-size:.76rem;padding:7px 4px}.section-head{display:block}.section-head h2{font-size:1.9rem}.search{display:block;margin-top:16px;min-width:0}.word-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.word-card{min-height:166px;padding:17px}.word-card strong{font-size:1.17rem}.phrase{gap:10px;padding:14px}.phrase-copy b{font-size:.92rem}.phrase-copy small{font-size:.7rem}.phrase-chinese{display:none}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mode{gap:6px;min-height:66px;padding:9px}.mode-icon{width:21px;height:21px}.mode b{font-size:.81rem}.quiz{padding:20px;margin-top:16px}.question{font-size:1.3rem}.options{grid-template-columns:1fr}.match-board{gap:8px;padding:10px}.match-col .option{min-height:73px;padding:8px 5px;font-size:.86rem;overflow-wrap:anywhere}.cloze-story{padding:17px;font-size:1.03rem;line-height:2.35}.cloze-blank{width:104px}.result-grid{grid-template-columns:1fr}.history-row{grid-template-columns:1fr auto}.history-row span:last-child{grid-column:1/-1}.quiz-complete .secondary{display:block;margin:12px auto 0}.pangchai-feedback img{width:58px;height:56px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* GSA identity and Unit 5 forest accent. */
.primary{background:#287f73;box-shadow:0 5px 0 #165e55}
.primary:hover{background:#246f65;box-shadow:0 7px 0 #165e55}
.brand,.brand small{font-family:Fredoka,"Noto Sans TC",ui-rounded,system-ui,sans-serif;font-weight:800}
.brand small{font-size:.8rem;letter-spacing:.01em}
.login-card{width:min(600px,100%)}
.login-card h1,.login-card .lead{max-width:350px}
.login-mascot{position:absolute;right:25px;top:105px;width:150px;height:110px;margin:0;object-fit:contain}
.dialog-meta{display:grid;gap:8px;margin:8px 0 22px;color:#5d586b;font-size:1rem}
.dialog-meta span:first-child{font-weight:800;color:#666178}
@media(max-width:700px){.login-card h1,.login-card .lead{max-width:none}.login-mascot{position:static;display:block;width:136px;height:114px;margin:0 0 8px auto}.login-card .lead{clear:both}}
/* Transparent horizontal school logo replaces the former mascot-and-text header. */
.site-header{min-height:94px}
.brand{gap:15px}
.brand .brand-logo{display:block;width:248px;height:auto;max-height:76px;object-fit:contain;object-position:left center;border-radius:0;box-shadow:none}
.brand-product{color:#765dc2;font-size:1.08rem;font-weight:800;white-space:nowrap}
.header-user{max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.site-header{min-height:72px}.brand{gap:7px}.brand .brand-logo{width:155px;max-height:50px}.brand-product{font-size:.82rem}.header-user{max-width:95px}}
/* School identity on the login screen, with room for Duke beside the heading. */
.login-logo{display:block;width:min(270px,100%);height:auto;max-height:86px;object-fit:contain;object-position:left center;margin:0 0 18px;position:relative;z-index:1}
.login-mascot{top:174px}
@media(max-width:700px){.login-logo{width:min(245px,100%);margin-bottom:15px}.login-mascot{top:auto}}
/* Keep the shorter heading and Duke animation together on one row. */
.login-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;position:relative;z-index:1}
.login-heading h1{font-size:clamp(1.55rem,3vw,2.02rem);line-height:1.18;margin:0;max-width:none;flex:1;white-space:nowrap}
.login-heading .login-mascot{position:static;width:164px;height:132px;flex:0 0 164px;margin:0}
@media(max-width:700px){.login-heading{gap:4px}.login-heading h1{font-size:clamp(1.12rem,4.6vw,1.48rem)}.login-heading .login-mascot{width:110px;height:102px;flex-basis:110px;margin:0}}
.unitbar{align-items:center;gap:18px;flex-wrap:wrap}
.unit-options{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.unit-choice{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid #ded6e5;border-radius:999px;background:#fff;color:#403758;font-weight:800;cursor:pointer;font-size:.83rem}
.unit-choice:has(input:checked){background:#eadffb;border-color:#9173d7;color:#36245f}
.unit-choice input{accent-color:#765dc2}
.login-form label:nth-of-type(4),.login-error{grid-column:1/-1}
.login-error{margin:0;color:#a53c46;font-size:.78rem;font-weight:800}