:root{--bg:#f6f7f2;--paper:#fff;--ink:#263d35;--muted:#79827c;--green:#285849;--green-dark:#204b3e;--mint:#eaf2eb;--line:#e7ebe4;--yellow:#f3d781;--error:#b44636;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-size:14px;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}a{color:inherit}button,input,select,textarea{border-radius:8px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #97b9a5;outline-offset:3px}[hidden]{display:none!important}.site-header{max-width:1240px;padding:28px 40px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;display:flex;gap:12px;align-items:center;font-size:18px;font-weight:700;letter-spacing:.04em}.brand-mark{display:grid;place-items:center;width:40px;height:40px;background:var(--green);color:#fff;border-radius:12px 12px 12px 3px;font-size:29px;font-family:Georgia,serif;font-weight:400}.brand-en{display:block;font-size:9px;letter-spacing:.16em;font-weight:500;color:var(--muted);margin-top:0}.quiet-link{text-decoration:none;color:#737e74;font-size:12px}.quiet-link span{margin-left:10px}.layout{max-width:1240px;margin:28px auto 55px;display:grid;grid-template-columns:43% 57%;padding:0 40px;align-items:start}.intro{padding:30px 48px 0 0;position:sticky;top:24px}.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:700;color:var(--green)}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#70a88a;margin-right:8px;vertical-align:middle}h1{font-size:clamp(34px,3.2vw,44px);line-height:1.45;letter-spacing:-.04em;font-weight:650;margin:22px 0 16px}.accent{color:#8cbda1}.intro-copy{color:#7b847c;font-size:14px;line-height:1.9;margin-bottom:26px}.class-meta{display:flex;align-items:center;gap:13px}.date-icon{border:1px solid #d7e0d6;display:grid;place-items:center;color:#688773;width:37px;height:39px;border-radius:8px;font-size:23px}.class-meta strong{display:block;font-size:12px;font-weight:600}.class-meta div>span{font-size:10px;color:var(--muted);display:block;margin-top:3px}.illustration{position:relative;height:250px;margin-top:28px;padding:25px 0 0;max-width:402px}.code-window{background:#e7ece3;border:1px solid #d4dfd3;border-radius:11px;transform:rotate(-3deg);box-shadow:0 12px 25px #36564208;width:95%;overflow:hidden}.window-top{display:flex;align-items:center;gap:5px;padding:13px 16px;border-bottom:1px solid #d7dfd2}.window-top>span{width:6px;height:6px;border-radius:50%;background:#b6c4b4}.window-top>span:nth-child(2){background:#ced8c5}.window-top>span:nth-child(3){background:#8eab95}.window-top>b{font-family:monospace;color:#7f8e7c;font-size:9px;font-weight:400;margin-left:36px}.code-lines{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:24px 18px 31px;font-size:11px}.line-no{font-size:9px;color:#a9b5a4;text-align:right}.code-lines code{white-space:pre;color:#536753}.code-lines em{font-style:normal;color:#37634f}.code-lines i{font-style:normal;color:#929e88}.note-sticker{position:absolute;right:0;bottom:3px;transform:rotate(5deg);padding:15px 20px;background:var(--yellow);color:#72612f;font-size:12px;line-height:1.7;border-radius:2px;box-shadow:0 8px 12px #4b46250b}.note-sticker span{position:absolute;top:-18px;right:18px;color:#6c9668;font-size:39px;font-weight:300}.intro-note{display:flex;gap:12px;align-items:start;margin-top:25px}.intro-note>span{color:#90ab8b;font-size:22px}.intro-note p{margin:3px 0;color:var(--muted);font-size:11px;line-height:1.9}.intro-note strong{font-weight:500;color:#5d7261}.intro-foot{border-top:1px solid #e0e7dc;margin-top:30px;padding-top:20px;font-size:9px;color:#939e91;letter-spacing:.08em;display:flex;justify-content:space-between}.intro-foot span{letter-spacing:0}.form-shell{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 35px #344b3205;padding:27px 32px 20px;min-width:0}.form-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.form-tag{font-size:10px;background:#eef3ec;border-radius:4px;padding:3px 9px;color:#60856b}.save-status{font-size:10px;color:#96a092}.steps{display:flex;margin:27px 0 28px;border-bottom:1px solid var(--line);gap:14px}.step{border:0;padding:0 0 15px;display:flex;align-items:center;gap:6px;position:relative;background:none;color:#a5aca2;font-size:11px;white-space:nowrap;flex:1;border-radius:0;cursor:pointer}.step-number{display:grid;place-items:center;width:21px;height:21px;border:1px solid #e0e5dd;border-radius:50%;font-size:10px;background:#fff}.step.active{color:var(--green);font-weight:600}.step.active:after{content:"";position:absolute;height:2px;background:var(--green);bottom:-1px;left:0;right:0}.step.active .step-number{background:var(--green);border-color:var(--green);color:#fff}.step.done .step-number{background:var(--mint);color:var(--green);border-color:var(--mint)}.step:disabled{cursor:default;opacity:1}.section-kicker{font-size:10px;letter-spacing:.13em;color:#92a68f;margin-bottom:6px}h2{font-size:24px;line-height:1.4;letter-spacing:-.025em;font-weight:600;margin:0 0 10px}.section-desc{color:#8a9487;font-size:12px;margin:0 0 24px;line-height:1.9}.section-desc strong{color:#65816c;font-weight:500}.field{margin-bottom:20px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}label,.field-label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}.required{color:#789980;margin-left:3px}.optional{font-size:10px;color:#a0a69b;font-weight:400;margin-left:6px}input,select,textarea{width:100%;background:#fff;border:1px solid #dfe6dc;padding:11px 13px;color:var(--ink);outline:none;font-size:12px;transition:border-color .2s}input::placeholder,textarea::placeholder{color:#a9b1a4}input:hover,select:hover,textarea:hover{border-color:#b2c6b1}input:focus,select:focus,textarea:focus{border-color:#729c7c;box-shadow:0 0 0 3px #90b0920f}textarea{resize:vertical;min-height:82px;line-height:1.8}.hint{color:#929c8b;font-size:10px;margin:7px 0 0}.pill-options{display:flex;flex-wrap:wrap;gap:8px}.pill{display:block;border:1px solid #e2e8dd;background:#fff;padding:8px 12px;color:#818d7b;font-size:11px;margin:0;font-weight:400;border-radius:7px;cursor:pointer}.pill:has(input:checked){border-color:#759780;background:#eef5ee;color:#356144}.pill input{position:absolute;opacity:0;width:1px;height:1px}.pill:focus-within{outline:2px solid #97b9a5;outline-offset:2px}.tip-box{display:flex;gap:9px;background:#f6f8f3;border-radius:7px;padding:12px 14px;color:#85947b;font-size:11px;line-height:1.8;margin-top:10px}.tip-box strong{font-weight:500;color:#618161}.form-actions{border-top:1px solid var(--line);margin-top:25px;padding-top:21px;display:flex;align-items:center;justify-content:space-between;gap:12px}.primary{border:1px solid var(--green);background:var(--green);color:white;padding:11px 21px;font-size:12px;font-weight:500;display:flex;gap:23px;align-items:center;justify-content:center}.primary:hover{background:var(--green-dark)}.secondary{border:1px solid #dfe6da;padding:10px 14px;background:white;font-size:12px;color:#7e8b76}.secondary:hover{background:#f6f8f4}.step-count{font-size:10px;color:#a1ab99}.privacy-note{color:#a2ac9b;font-size:10px;text-align:center;margin-top:18px}.privacy-note span{margin-right:3px}.site-footer{max-width:1240px;padding:0 40px 26px;margin:auto;display:flex;justify-content:space-between;font-size:10px;color:#a2aa9b;gap:16px}.site-footer a{text-decoration:none}.error{font-size:12px;color:var(--error);line-height:1.8;margin-top:15px;white-space:pre-wrap}.error:empty{display:none}.join-panel{padding:20px 0 30px}.join-panel h2{margin-top:12px}.join-panel p{color:var(--muted);font-size:12px}.join-panel .primary{margin-top:15px;width:100%}.rating-list{display:flex;flex-direction:column;gap:0}.rating-item{padding:16px 0;border-bottom:1px solid var(--line)}.rating-item:first-child{padding-top:0}.rating-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}.rating-heading strong{font-size:12px;font-weight:600}.rating-heading small{font-size:9px;color:#a0ad96;white-space:nowrap}.rating-heading p{margin:3px 0 0;color:#99a28f;font-size:10px}.rating-options{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.rating-options .pill{padding:7px 2px;font-size:10px;text-align:center}.subheading{font-size:13px;font-weight:600;margin:26px 0 12px}.problem-card,.quiz-card,.coding-card{border:1px solid #e1e8dc;border-radius:10px;padding:20px;margin-bottom:16px;background:#fff}.card-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.card-heading strong{font-size:12px}.card-heading>span{font-size:10px;color:#99a68f}.text-button{border:none;background:none;color:#7b8e73;padding:2px;font-size:11px}.text-button.danger{color:#ac7666}.problem-card .field:last-child{margin-bottom:0}.upload-zone{border:1px dashed #afc5a8;border-radius:9px;padding:25px 15px;text-align:center;background:#fafcf7;cursor:pointer;display:block;font-weight:400}.upload-zone.dragover{background:#eaf4e7;border-color:#3f7d43}.upload-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:#7a9a6a;background:#edf4e7;margin:0 auto 10px;font-size:23px}.upload-zone strong{font-size:12px;color:#637c57;font-weight:500}.upload-zone p{font-size:10px;color:#9ca792;margin:7px 0 0}.upload-zone input{position:absolute;width:1px;height:1px;opacity:0;padding:0}.upload-zone:focus-within{outline:3px solid #97b9a5}.file-list{margin-top:10px}.file-row{border:1px solid #e7ecdf;border-radius:7px;display:flex;align-items:center;gap:10px;padding:9px 12px;margin-top:7px;min-width:0}.file-symbol{background:var(--mint);padding:4px;color:#688060;font-size:9px;border-radius:3px}.file-row .file-name{font-size:11px;word-break:break-all;flex:1}.file-row small{color:#99a48f;font-size:10px;white-space:nowrap}.file-row button{flex-shrink:0}.quiz-card h3,.coding-card h3{font-size:13px;margin:0 0 6px;font-weight:600}.quiz-card>p,.coding-card>p{font-size:11px;color:#86977a;line-height:1.9;margin:0 0 13px}pre{margin:12px 0;padding:15px 16px;background:#f3f6ef;border:1px solid #e9eedf;border-radius:7px;overflow:auto;font:11px/1.8 "SFMono-Regular",Consolas,monospace;color:#526c44;white-space:pre;tab-size:4}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.quiz-options .pill{font-size:11px;padding:9px}.confidence-row{display:flex;align-items:center;gap:7px;margin-top:11px;color:#94a186;font-size:10px;flex-wrap:wrap}.confidence-row .pill{padding:4px 9px;font-size:10px}.skip-options{display:flex;gap:8px;margin-top:10px}.skip-options .pill{font-size:10px;padding:5px 9px}.code-input{font-family:"SFMono-Regular",Consolas,monospace;font-size:12px;min-height:260px;white-space:pre;tab-size:4;background:#f9fbf7}.review-summary{background:#f3f7ef;padding:14px 16px;border-radius:8px;margin:20px 0;color:#6d835e;font-size:11px}.consent{display:flex;gap:9px;align-items:start;font-size:11px;color:#849175;font-weight:400;cursor:pointer}.consent input{accent-color:var(--green);width:15px;height:15px;flex-shrink:0;margin:2px 0}.success-panel{text-align:center;padding:44px 5px 35px}.success-icon{display:grid;place-items:center;font-size:31px;background:var(--mint);width:64px;height:64px;border-radius:50%;margin:0 auto 24px;color:var(--green)}.success-panel p{color:#8a9680;font-size:12px}.receipt{font-size:11px;background:#f5f7f1;padding:15px;border-radius:7px;margin:23px 0;color:#6e8560}.success-panel .secondary{margin:auto}.success-panel h2{font-size:26px}.upload-progress{width:100%;margin:10px 0;accent-color:var(--green)}
/* Teacher workspace */
.admin-wrap{max-width:1200px;padding:25px 40px 60px;margin:auto}.admin-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:25px}.admin-heading h1{font-size:30px;margin:0 0 4px}.admin-heading p{font-size:12px;color:var(--muted);margin:0}.admin-controls{display:flex;gap:9px;flex-wrap:wrap}.admin-login{max-width:430px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px}.admin-login .primary{width:100%;margin-top:20px}.admin-login p{font-size:12px;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.stat{background:white;border:1px solid var(--line);padding:21px 24px;border-radius:10px}.stat strong{font-size:27px;font-weight:500}.stat span{color:var(--muted);font-size:11px;display:block;margin-top:4px}.share-bar{display:flex;align-items:center;gap:12px;padding:15px 18px;background:#eaf1e6;border-radius:9px;margin-bottom:20px;font-size:11px;flex-wrap:wrap}.share-bar label{margin:0;font-size:11px;white-space:nowrap}.share-bar input{flex:1;min-width:180px;font-size:11px}.admin-grid{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}.student-list{display:flex;flex-direction:column;gap:8px}.student-item{border:1px solid var(--line);background:#fff;text-align:left;padding:17px;border-radius:9px}.student-item.selected{border-color:#6d9675;background:#edf4ea}.student-item strong{display:block;font-size:14px}.student-item p{font-size:11px;color:#8a9780;margin:5px 0}.student-item small{font-size:10px;color:#a0ab96}.detail-panel{background:#fff;border:1px solid var(--line);padding:28px;border-radius:12px;min-width:0}.detail-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:20px;border-bottom:1px solid var(--line)}.detail-top h2{margin:0}.detail-top p{font-size:11px;color:var(--muted);margin:4px 0 0}.detail-top span{background:var(--mint);padding:5px 8px;font-size:10px;border-radius:4px;color:#6c855f}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:23px 0}.profile-grid label{font-size:10px;color:#99a58e;margin-bottom:3px;font-weight:400}.profile-grid p{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.full-width{grid-column:1/-1}.focus-card{padding:12px 15px;background:#f7f9f3;border-left:3px solid #a1ba83;margin-bottom:9px;border-radius:4px}.focus-card strong{font-size:12px}.focus-card p{font-size:11px;color:#829570;margin:3px 0}.muted{color:#95a18a;font-size:11px}.content-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.admin-rating{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:9px 0;font-size:11px;gap:12px}.badge{font-size:10px;padding:2px 7px;background:#f0f4ea;color:#789165;border-radius:4px}.badge.wrong{background:#faf0e9;color:#af7f5a}.badge.right{background:#edf4e9;color:#6e9256}.empty-state{padding:60px 15px;text-align:center;color:#9aa68f}.teacher-notes{background:#f8f7ef;border:1px solid #eae7d7;border-radius:8px;padding:17px;font-size:12px;color:#8a855f}.detail-panel a.download{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;border:1px solid var(--line);border-radius:7px;padding:12px;margin:8px 0;font-size:11px}.download span{overflow-wrap:anywhere}.download small{white-space:nowrap;color:#879a72}.admin-quiz-answer{font-size:11px;margin:6px 0;color:#75886a}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--green);color:white;font-size:12px;padding:12px 23px;border-radius:9px;box-shadow:0 4px 20px #263d351f;z-index:20}
@media(min-width:1400px){.layout{margin-top:45px}.intro{padding-top:35px}.form-shell{padding:32px 38px 24px}}
@media(max-width:1000px){.site-header{padding:24px}.layout{padding:0 24px;grid-template-columns:40% 60%;gap:0}.intro{padding-right:27px}h1{font-size:34px}.form-shell{padding:24px}.steps{gap:7px}.step{font-size:10px;gap:4px}.intro-foot{display:none}.code-lines{font-size:9px;padding-left:9px;gap:6px}.site-footer{padding:0 24px 24px}.admin-wrap{padding:25px 24px 40px}.admin-grid{grid-template-columns:220px 1fr}}
@media(max-width:760px){.site-header{padding:20px}.brand{font-size:16px}.brand-mark{width:35px;height:35px;font-size:25px}.brand-en{font-size:8px}.quiet-link{font-size:11px}.layout{display:block;padding:0 16px;margin:8px auto 28px}.intro{position:static;padding:12px 12px 28px}.eyebrow{font-size:9px}h1{font-size:32px;line-height:1.35;margin:16px 0 12px}.intro h1 br{display:block}.intro-copy{font-size:12px;margin:0 0 18px}.intro-copy br{display:none}.class-meta strong{font-size:11px}.illustration,.intro-note,.intro-foot{display:none}.form-shell{border-radius:13px;padding:22px 20px 18px}.steps{gap:6px;margin:23px 0}.step{font-size:10px;gap:4px;padding-bottom:13px}.step-number{width:18px;height:18px;font-size:9px}.form-tag,.save-status{font-size:9px}h2{font-size:22px}.section-desc{font-size:11px;margin-bottom:22px}.field-row{gap:12px}.field{margin-bottom:19px}.form-actions{gap:8px}.primary{padding:11px 16px;gap:20px}.secondary{padding:10px 12px}.privacy-note{font-size:9px}.site-footer{padding:0 20px 25px;display:block;font-size:9px}.site-footer>span{display:block;margin:4px 0}.rating-options{gap:4px}.rating-options .pill{font-size:9px}.problem-card,.quiz-card,.coding-card{padding:16px}.quiz-options{grid-template-columns:1fr}.quiz-options .pill{font-size:11px}.problem-card .field-row{grid-template-columns:1fr}.problem-card .field-row .field{margin-bottom:15px}.rating-heading small{font-size:8px}.admin-wrap{padding:15px 16px 40px}.admin-heading{display:block}.admin-controls{margin-top:16px}.stats{gap:8px}.stat{padding:14px 12px}.stat strong{font-size:24px}.stat span{font-size:9px}.admin-grid{grid-template-columns:1fr}.student-list{display:grid;grid-template-columns:1fr 1fr}.student-item{padding:13px}.detail-panel{padding:20px}.detail-top span{font-size:8px}.profile-grid{gap:12px}.admin-login{margin:25px auto;padding:25px}.admin-heading h1{font-size:26px}.share-bar{padding:12px;gap:8px}}
@media(max-width:370px){.form-shell{padding:19px 15px}.steps{gap:4px}.step{font-size:9px}.step-number{width:16px;height:16px}.field-row{grid-template-columns:1fr;gap:0}.brand-en{font-size:7px}.intro h1{font-size:28px}}
@media print{body{background:white}.site-header,.admin-controls,.stats,.share-bar,.student-list,#shared-focus{display:none!important}.admin-wrap{padding:0}.admin-grid{display:block}.detail-panel{padding:0;border:0}.admin-heading h1{font-size:22px}.problem-card,.quiz-card,.teacher-notes{break-inside:avoid}pre{white-space:pre-wrap;overflow-wrap:anywhere}.download{color:#000}}

/* Chinese / English learning prompts */
.bilingual-en{display:block;font-size:11px;font-weight:400;line-height:1.55;color:#74866c;margin-top:4px;letter-spacing:0;overflow-wrap:anywhere}h2 .bilingual-en{font-size:14px;margin-top:7px}.rating-heading .bilingual-en{font-size:11px}.rating-heading p .bilingual-en{font-size:10px}.rating-options .bilingual-en{font-size:9px;margin-top:3px;line-height:1.4}.rating-options .pill{white-space:normal;min-width:0}.bilingual-options .pill{max-width:100%;white-space:normal}.bilingual-options .bilingual-en{font-size:10px}.quiz-card .card-heading>strong,.coding-card .card-heading>strong{min-width:0}.quiz-card .card-heading>span,.coding-card .card-heading>span{flex-shrink:0;text-align:right}.confidence-row>.bilingual-en{display:inline}.confidence-row>.bilingual-options{flex:1}.confidence-row .bilingual-en{font-size:9px}.skip-options .bilingual-en{font-size:9px}.quiz-options .bilingual-en{font-size:10px}.consent .bilingual-en{font-size:10px}.code-input{margin-top:8px}@media(max-width:760px){.rating-heading small{max-width:72px;white-space:normal;text-align:right}.rating-options .bilingual-en{font-size:8px}.form-actions .secondary,.form-actions .primary{font-size:11px;padding:10px 11px;gap:9px}.rating-heading .bilingual-en{font-size:10px}}

.step-copy .bilingual-en{font-size:8px;margin-top:2px;white-space:normal;line-height:1.2}.step-copy{min-width:0}.step{align-items:center}