@charset "UTF-8";
:root{--bg:#fff9ed;--paper:#fff;--ink:#193b52;--muted:#5b6e78;--teal:#087b7e;--s:#2163ae;--v:#23734b;--o:#a94a11;--c:#806000;--a:#8054a5;--line:#dbe2e1;--soft:#eef5f3;--radius:20px;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);font-size:18px;line-height:1.7}
*{box-sizing:border-box}body{margin:0;background:var(--bg)}a{color:var(--teal)}button,input,select{font:inherit}button,select{cursor:pointer}button{min-height:46px;border:1px solid var(--line);background:white;border-radius:12px;padding:10px 18px;color:var(--ink);font-weight:650}button:hover:not(:disabled),.button:hover{border-color:var(--teal);background:#eef9f5}button:disabled{cursor:default;opacity:.65}button.primary,.button.primary{background:var(--teal);border-color:var(--teal);color:white}button.primary:hover:not(:disabled),.button.primary:hover{background:#06686b;color:white}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 22px;border-radius:12px;border:1px solid var(--line);text-decoration:none;font-weight:700;background:white}.button.secondary{color:var(--teal);border-color:#aacdca}button.selected{background:#e9f5f1;border-color:var(--teal);color:#055e60;box-shadow:inset 0 0 0 1px var(--teal)}:focus-visible{outline:3px solid #d97e13;outline-offset:4px}.skip{position:absolute;top:-100px;left:12px;z-index:99;background:white;padding:15px}.skip:focus{top:8px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px max(24px,calc((100vw - 1400px)/2));border-bottom:1px solid var(--line);background:#fffdf6}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none;color:var(--ink);font-size:24px;font-weight:800;line-height:1.25}.brand>span:first-child{color:var(--teal);font-size:38px}.brand small{display:block;font-size:12px;letter-spacing:2px;color:var(--muted);margin-top:7px;font-weight:500}.top-nav{display:flex;gap:8px}.top-nav a{white-space:nowrap;padding:9px 14px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:700}.top-nav a[aria-current]{background:#dfefea;color:#065e61}.sound-controls{display:flex;align-items:center;gap:9px}.sound-controls button{font-size:14px;min-height:40px;padding:7px 11px}.sound-controls label{font-size:13px}.sound-controls input{width:65px;accent-color:var(--teal)}main{max-width:1400px;margin:auto;padding:42px 32px 64px;min-height:75vh}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(32px,4vw,54px);line-height:1.3;letter-spacing:-1px;margin-bottom:18px}h2{font-size:28px;line-height:1.4;margin-bottom:18px}h3{font-size:22px;margin-bottom:10px}.eyebrow{font-size:15px;letter-spacing:2px;color:var(--teal);font-weight:750;margin-bottom:14px}.lead{font-size:21px;color:var(--muted);max-width:810px}.muted{color:var(--muted)}.small{font-size:15px}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:48px;padding:32px 12px 50px}.hero h1{font-size:clamp(40px,5vw,68px);line-height:1.2}.hero h1 em{color:var(--teal);font-style:normal}.hero img{width:100%;border-radius:36px;max-height:420px;object-fit:contain;background:white}.hero .lead{margin:25px 0 30px}.stats{display:flex;gap:42px;margin-top:38px}.stats strong{display:block;font-size:34px;line-height:1.2}.stats span{font-size:15px;color:var(--muted)}.section-title{margin:20px 0}.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.map-card{display:block;text-decoration:none;background:white;padding:25px;border-radius:var(--radius);border:1px solid var(--line);color:var(--ink)}.map-card:hover{border-color:var(--teal)}.map-card h3{margin:12px 0 8px}.map-card .number{color:var(--teal);font-size:14px;font-weight:700}.map-card p{font-size:16px;color:var(--muted);margin-bottom:0}.route-intro{margin-bottom:32px}.lesson-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:40px}.chapter-nav{position:sticky;top:24px;align-self:start}.chapter-nav p{font-size:14px;letter-spacing:2px;color:var(--muted)}.chapter-nav a{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);padding:11px 12px;border-radius:12px;font-size:17px}.chapter-nav a[aria-current]{background:#dcefe8;color:#085f61;font-weight:750}.chapter-nav .n{font-size:13px;min-width:24px;color:var(--muted)}.chapter-nav .done{color:var(--v)}.concept{font-size:21px;line-height:1.85;max-width:950px;margin-bottom:30px}.concept p{margin-bottom:15px}.concept .definition{font-size:25px;font-weight:700;color:var(--teal);margin-bottom:23px}.example-stage{background:white;border:1px solid var(--line);border-radius:24px;padding:26px 30px}.example-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}.example-toolbar .actions{gap:7px}.example-toolbar button{font-size:15px;padding:8px 12px}.sentence{font-size:clamp(25px,3vw,38px);line-height:1.55;margin-bottom:14px;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans GB",sans-serif;overflow-wrap:anywhere}.sentence-pieces{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:22px 0 10px}.piece{font-size:clamp(24px,2.5vw,34px);background:transparent;border:0;border-bottom:3px solid #dce5e6;padding:9px 10px;border-radius:8px 8px 0 0;line-height:1.4;color:var(--ink);font-weight:600}.piece .label{display:block;font-size:14px;font-weight:600;line-height:1.5;margin-top:12px;letter-spacing:1px}.piece.current{background:#eef6f4;border-bottom-color:var(--teal);box-shadow:inset 0 0 0 1px #99c3be}.piece[data-role=S],.role-S{color:var(--s)}.piece[data-role=V],.role-V{color:var(--v)}.piece[data-role=O],.piece[data-role=IO],.piece[data-role=DO],.role-O,.role-IO,.role-DO{color:var(--o)}.piece[data-role=OC],.piece[data-role=SC],.role-OC,.role-SC{color:var(--c)}.piece[data-role=APP],.piece[data-role=ADV],.role-ATTR,.role-APP,.role-ADV{color:var(--a)}.piece.hidden-label{color:var(--ink)}.punct{font-size:30px}.translation{color:var(--muted);font-size:19px;margin:15px 0 20px}.component-detail{background:#f0f7f4;border-left:4px solid var(--teal);padding:18px 20px;min-height:100px;border-radius:0 12px 12px 0;margin:16px 0 24px}.component-detail p{margin:3px 0}.whole-analysis{border-top:1px dashed var(--line);padding-top:20px}.whole-analysis p{margin-bottom:8px}.inside{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}.inside button{color:var(--a);border-color:#c6b0d8;font-size:16px}.pattern-note{color:var(--v);font-size:17px;font-weight:650}.checkpoint{margin-top:32px;padding:25px 0;border-top:2px solid var(--line)}.checkpoint .sentence{font-size:28px}.choices{display:grid;gap:11px;margin:18px 0}.choice{text-align:left;font-weight:550;display:flex;align-items:center;gap:14px;line-height:1.5;min-height:60px}.choice-letter{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;font-size:14px;border:1px solid currentColor;border-radius:50%;opacity:.8}.choice.correct{border-color:var(--v);background:#ecf8ee;color:#165c35;opacity:1}.choice.wrong{border-color:#b75039;background:#fff0e9;color:#983d2c;opacity:1}.feedback{margin:17px 0;padding:18px 22px;border-radius:14px;background:#eff6f3;min-height:54px}.feedback.error{background:#fff1e8}.feedback p{margin:5px 0}.feedback .why{color:var(--muted)}.teacher-detail{margin:22px 0;font-size:16px;color:var(--muted)}summary{cursor:pointer;font-weight:700;padding:10px 0}.chapter-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:32px}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:15px;margin:16px 0 22px}.legend span{font-weight:650}.lab-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:30px}.filters{display:flex;flex-wrap:wrap;gap:18px;align-items:end;margin-bottom:28px}label{font-weight:650}label select,label input[type=search]{display:block;margin-top:7px}select,input[type=search]{border:1px solid #b8c9c8;border-radius:10px;padding:10px 14px;min-height:46px;color:var(--ink);background:white;max-width:100%}input[type=search]{width:330px}.example-list{max-height:650px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:4px}.example-list button{text-align:left;font-size:17px;font-weight:550;padding:13px 15px}.example-list small{display:block;font-size:13px;color:var(--muted);margin-top:5px}.empty{padding:30px;border:1px dashed var(--line);border-radius:16px}.practice-page{max-width:1050px;margin:auto}.practice-settings{background:white;border:1px solid var(--line);border-radius:24px;padding:28px}.practice-settings h2{font-size:24px}.pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}.pack-grid button{text-align:left;padding:22px}.pack-grid button strong{display:block;font-size:21px}.pack-grid button small{display:block;color:var(--muted);font-weight:400;margin-top:8px}.practice-note{font-size:17px;line-height:1.8;color:var(--muted)}.resume{padding:20px 24px;margin-bottom:22px;border:1px solid #a2c7bb;border-radius:18px;background:#eff7ef;display:flex;align-items:center;justify-content:space-between;gap:15px}.practice-progress{display:flex;align-items:center;gap:20px;margin:18px 0 30px;font-weight:650}.practice-progress progress{flex:1;width:100%;height:12px;accent-color:var(--teal)}.question-sheet{background:white;padding:30px;border:1px solid var(--line);border-radius:24px}.question-type{font-size:15px;color:var(--teal);font-weight:750;margin-bottom:10px}.question-sheet h2{font-size:26px;margin-bottom:24px}.question-sheet .sentence{font-size:clamp(28px,3.5vw,44px);font-weight:550;padding:16px 0}.analysis-rows{display:grid;gap:12px;margin:20px 0}.analysis-row{display:grid;grid-template-columns:minmax(200px,1fr) minmax(190px,.8fr);gap:10px;align-items:center;padding:15px 18px;border:1px solid var(--line);border-radius:14px}.analysis-row .word{font-size:24px;font-weight:650}.analysis-row small{display:block;color:var(--muted);font-size:13px}.analysis-row select{width:100%}.analysis-row.correct{border-color:#8cbd9d;background:#f1f8f0}.analysis-row.wrong{border-color:#dcac97;background:#fff5ed}.row-feedback{grid-column:1/-1;font-size:16px;line-height:1.7;color:var(--muted)}.practice-controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:24px}.practice-controls>div{display:flex;gap:10px;flex-wrap:wrap}.correct-pop{animation:answer-pop .5s ease}.mini-celebration{font-size:20px;color:var(--v);font-weight:800;animation:answer-pop .65s ease}.auto-text{font-size:15px}.pause-button{min-height:38px;font-size:14px;padding:5px 12px;margin-left:10px}.result-award{text-align:center;padding:38px 20px;background:#173b50;color:white;border-radius:26px;margin:28px 0}.result-award h2{color:#ffdc80}.result-stars{display:flex;justify-content:center;gap:9px;margin:20px 0}.result-star{width:65px;height:65px}.star-base{fill:#62798a}.star-gold{fill:#ffcd65}.star-score strong{font-size:50px;color:#ffdc80}.star-score{font-size:20px}.confetti{display:inline-block;font-size:28px;color:#ffdc80;animation:spark 1.1s ease-out}.result-list{display:grid;gap:12px;margin:20px 0}.result-item{padding:18px;border:1px solid var(--line);border-radius:14px;background:white}.result-item summary{font-size:18px}.result-item .sentence{font-size:24px}.result-item .answer-line{font-size:16px;margin:8px 0}.site-footer{max-width:1400px;margin:auto;border-top:1px solid var(--line);padding:25px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;font-size:14px;color:var(--muted)}dialog{max-width:760px;width:calc(100% - 30px);max-height:85vh;overflow:auto;border:0;border-radius:22px;padding:30px;color:var(--ink);line-height:1.85}dialog::backdrop{background:#173b5080}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.dialog-heading h2{margin:0}dialog h3{margin-top:25px}dialog ul{padding-left:22px}
@keyframes answer-pop{50%{transform:scale(1.025)}}@keyframes spark{0%{transform:scale(.6);opacity:0}50%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
@media(min-width:1450px){.hero h1{font-size:68px}}
@media(max-width:1180px){.site-header{flex-wrap:wrap}.sound-controls{margin-left:auto}.top-nav{margin-left:auto}.lesson-layout{grid-template-columns:210px minmax(0,1fr);gap:25px}.piece{font-size:28px}.lab-layout{grid-template-columns:260px minmax(0,1fr)}.hero{gap:25px}.map-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){main{padding:28px 20px 45px}.site-header{padding:15px 20px;gap:14px}.brand{font-size:21px}.top-nav{order:3;width:100%;justify-content:space-between;margin:0}.top-nav a{font-size:16px;padding:9px 8px}.sound-controls{gap:5px;flex-wrap:wrap}.sound-controls button{font-size:12px;padding:5px 8px}.sound-controls label{display:none}.sound-controls input{width:48px}.hero{grid-template-columns:1fr;padding:15px 0 35px}.hero img{max-height:260px;order:2}.hero h1{font-size:44px}.stats{gap:30px;margin-top:25px}.lesson-layout{grid-template-columns:1fr}.chapter-nav{position:static;border-bottom:1px solid var(--line);padding-bottom:15px;display:flex;overflow:auto;gap:6px}.chapter-nav p{display:none}.chapter-nav a{white-space:nowrap;font-size:15px}.chapter-nav .n{min-width:auto}.concept{font-size:19px}.example-stage{padding:20px}.lab-layout{grid-template-columns:1fr}.example-list{max-height:240px;border-bottom:1px solid var(--line)}.filters{gap:15px}.filters label{width:100%}.filters select,input[type=search]{width:100%}.practice-settings,.question-sheet{padding:20px}.pack-grid{grid-template-columns:1fr}.analysis-row{grid-template-columns:1fr}.analysis-row .word{font-size:23px}.resume{flex-wrap:wrap}.site-footer{padding:22px 20px}.map-card{padding:20px}.lead{font-size:19px}.result-star{width:50px;height:50px}.practice-progress{gap:12px}.practice-controls{gap:16px}.practice-controls>div{width:100%}.practice-controls button{flex:1}.checkpoint .choices{grid-template-columns:1fr}}
@media(max-width:430px){.map-grid{grid-template-columns:1fr}.site-header{gap:12px}.brand{font-size:18px}.brand small{font-size:10px}.brand>span:first-child{font-size:26px}.sound-controls{max-width:170px}.hero h1{font-size:39px}.stats{gap:23px}.stats strong{font-size:28px}.stats span{font-size:13px}.piece{font-size:25px;padding:8px}.example-toolbar{align-items:start}.actions .button{width:100%}.sentence{font-size:27px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}