@font-face{font-family:Lexend;src:url('./fonts/lexend.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--paper:oklch(97% .009 95);--ink:oklch(28% .025 157);--muted:oklch(49% .022 155);--green:oklch(43% .065 157);--green-light:oklch(91% .025 153);--peach:oklch(92% .055 75);--border:oklch(86% .017 95);--white:oklch(99% .005 95);--warning:oklch(45% .11 52);--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Lexend,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;font-size:15px;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button{border:0}button:disabled{cursor:default;opacity:.6}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--green);outline-offset:4px}h1,h2,h3,p{margin:0}h1{font-size:2.3rem;line-height:1.35;font-weight:650;letter-spacing:-.04em}h2{font-size:1.3rem;line-height:1.45;font-weight:600}h3{font-size:1rem;font-weight:550}p{line-height:1.85}button{transition:background .15s,transform .15s}button:active{transform:translateY(1px)}.topbar{height:96px;max-width:1248px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0 48px;border-bottom:1px solid var(--border)}.brand{display:flex;gap:12px;align-items:center}.brand-key{width:43px;height:43px;background:var(--green);color:var(--paper);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;box-shadow:0 3px 0 oklch(30% .05 157)}.brand-key span{color:var(--peach)}.brand b{font-size:25px;line-height:1.1;font-weight:550;letter-spacing:-1px}.brand-period{color:var(--green)}.brand small{font-size:11px;display:block;letter-spacing:2px;margin-top:4px}.topbar nav{display:flex;gap:32px;align-items:center}.topbar nav a{padding:12px 0;color:var(--muted)}.topbar nav a[aria-current=page]{color:var(--green);box-shadow:0 2px 0 var(--green);font-weight:600}.parent-link{color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center}.parent-link span{font-size:22px}.main{max-width:1248px;padding:52px 48px 32px;margin:auto}.welcome{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:32px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:500;margin-bottom:12px}.lead{color:var(--muted);font-size:15px;margin-top:16px}.edition{font-size:9px;writing-mode:vertical-rl;letter-spacing:2px;color:var(--muted)}.home-grid{display:grid;grid-template-columns:2.25fr 1fr;gap:32px}.today-lesson{background:var(--peach);border-radius:20px;display:flex;position:relative;overflow:hidden;min-height:330px;padding:32px 36px}.today-copy{z-index:1;flex:1}.pill{display:inline-block;font-size:11px;background:oklch(96% .035 75);padding:5px 10px;border-radius:6px;color:oklch(43% .055 70)}.lesson-counter{font-size:11px;color:oklch(47% .05 70);margin:22px 0 8px;letter-spacing:1px}.today-copy h2{font-size:27px;letter-spacing:-.02em}.today-copy p:not(.lesson-counter){font-size:13px;color:oklch(43% .04 70);margin-top:12px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:32px;border-radius:9px;padding:13px 20px;font-size:14px;min-height:48px;font-weight:500}.primary{background:var(--green);color:var(--paper)}.primary:hover{background:oklch(35% .06 157)}.secondary{background:transparent;border:1px solid var(--border)}.secondary:hover{background:var(--green-light)}.primary span{font-size:22px;line-height:1}.today-copy .primary{margin:24px 0 12px}.quiet{font-size:11px;color:var(--muted);display:block}.key-friends{width:265px;flex-shrink:0;position:relative;align-self:center;height:240px;margin-left:-10px}.friend{position:absolute;width:112px;height:124px;border:2px solid oklch(44% .035 70);border-radius:20px;background:oklch(96% .03 85);box-shadow:0 9px 0 oklch(80% .055 75);display:flex;align-items:center;justify-content:center;transform:rotate(-12deg);top:48px;left:12px}.friend-j{transform:rotate(12deg);top:24px;left:135px;background:var(--green-light);box-shadow:0 9px 0 oklch(73% .035 153)}.friend b{font-size:56px;font-weight:450;position:absolute;top:2px}.friend .eyes{font-size:42px;letter-spacing:9px;position:absolute;top:49px;left:39px;line-height:1}.friend i{position:absolute;bottom:17px;width:19px;height:8px;border-bottom:2px solid var(--ink);border-radius:50%}.friend-caption{position:absolute;bottom:6px;font-size:11px;left:40px;color:oklch(48% .05 70);transform:rotate(-3deg)}.orbit{position:absolute;color:oklch(59% .08 72)}.orbit-one{font-size:35px;top:5px;left:72px}.orbit-two{font-size:26px;bottom:33px;right:18px}.daily-note{padding:14px 0 0 8px;display:flex;flex-direction:column}.note-head{display:flex;justify-content:space-between;align-items:center}.note-head>span:last-child{font-size:26px;color:oklch(58% .09 75)}.daily-note h2{font-size:18px;margin:14px 0 10px}.daily-note>p{color:var(--muted);font-size:13px}.week-dots{display:flex;justify-content:space-between;gap:6px;margin:24px 0}.day{text-align:center}.day small{display:block;font-size:10px;color:var(--muted);margin-bottom:9px}.day i{width:27px;height:27px;display:block;border:1px solid var(--border);border-radius:50%;font-style:normal;line-height:25px}.day.today i{border-color:var(--green);color:var(--green);font-size:24px}.day.practiced i{background:var(--green);color:var(--paper)}.note-bottom{display:flex;align-items:center;gap:5px;margin-top:auto;border-top:1px solid var(--border);padding-top:20px}.tiny-key,kbd{font-family:Lexend,sans-serif;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-bottom-width:3px;background:var(--white);border-radius:6px;min-width:30px;height:34px;padding:0 6px}.note-bottom p{margin-left:12px;color:var(--muted);font-size:11px}.journey{margin-top:44px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.section-heading a,.section-heading>span{font-size:12px;color:var(--muted)}.stage-path{display:grid;grid-template-columns:repeat(4,1fr)}.path-stage{padding:20px 20px 16px 0;border-top:1px solid var(--border)}.path-stage.current{border-top-color:var(--green)}.stage-number{font-size:12px;color:var(--muted);display:block;margin-bottom:14px}.path-stage.current .stage-number{color:var(--green);font-weight:600}.path-stage h3{font-size:16px}.path-stage p{font-size:12px;color:var(--muted);margin:7px 0 14px}.path-stage small{font-size:10px;color:var(--muted)}.home-tip{display:flex;align-items:center;gap:18px;border-top:1px solid var(--border);padding-top:22px;margin-top:16px;font-size:11px;color:var(--muted)}.home-tip>span:first-child{color:var(--green);white-space:nowrap}.completed-note{margin-left:auto;white-space:nowrap}.footer{max-width:1152px;margin:8px auto 0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 28px;border-top:1px solid var(--border);font-size:10px;color:var(--muted)}#offline-status{display:flex;align-items:center;gap:7px}.status-dot{width:6px;height:6px;background:oklch(65% .08 75);border-radius:50%}.status-dot.ready{background:var(--green)}.text-button{padding:6px 0;background:none;font-size:12px;color:var(--green)}.text-button:hover{text-decoration:underline}.page-title{margin-bottom:40px}.course-stage{display:grid;grid-template-columns:225px 1fr;gap:48px;margin-bottom:48px}.stage-intro{padding-top:16px}.stage-intro p{font-size:13px;color:var(--muted);margin-top:10px}.lesson-row{width:100%;display:flex;align-items:center;text-align:left;background:transparent;padding:16px 12px;gap:20px;border-top:1px solid var(--border);border-radius:0}.lesson-row:last-child{border-bottom:1px solid var(--border)}.lesson-row:hover{background:var(--green-light)}.lesson-row.recommended{background:oklch(93% .022 153)}.lesson-index{font-size:11px;color:var(--muted)}.lesson-name{flex:1}.lesson-name b{font-size:14px;font-weight:500;display:block}.lesson-name small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.lesson-keys{display:flex;gap:4px}.lesson-keys kbd{font-size:11px;min-width:26px;height:29px}.lesson-state{font-size:10px;color:var(--green);min-width:70px;text-align:right}.parent-layout{display:grid;grid-template-columns:1.8fr 1fr;gap:64px}.parent-section{border-top:1px solid var(--border);padding:24px 0 32px}.parent-section>p{font-size:13px;color:var(--muted);margin:12px 0 18px}.stats-line{display:flex;gap:64px;margin:24px 0}.stats-line strong{display:block;font-weight:450;font-size:32px;line-height:1.4}.stats-line span{color:var(--muted);font-size:11px}.fine-print{font-size:11px!important;color:var(--muted);line-height:1.8}.parent-section h3{margin-top:24px}.weak-keys{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap}.weak-keys>span{text-align:center}.weak-keys small{display:block;font-size:10px;color:var(--muted);margin-top:6px}.empty-note{padding:20px;background:var(--green-light);border-radius:8px;font-size:13px;margin-top:16px;color:var(--muted)}.observation-options{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.observation-options button{border:1px solid var(--border);background:transparent;border-radius:6px;padding:9px 12px;font-size:12px}.observation-options button[aria-pressed=true]{background:var(--green-light);border-color:var(--green)}.history-row{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--border)}.history-row b{font-weight:500;font-size:13px}.history-row small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.history-row>span:last-child{text-align:right}.settings-section{padding:24px;background:oklch(94% .014 95);margin-bottom:20px;border-radius:12px}.settings-section h2{font-size:17px;margin-bottom:16px}.settings-section p{font-size:12px;color:var(--muted);margin:12px 0}.settings-section>label:not(.file-button){font-size:12px;display:block;margin-bottom:8px}.settings-section select{width:100%;padding:10px;background:var(--white);border:1px solid var(--border);border-radius:6px;color:var(--ink)}.check-label{margin-top:18px;display:flex!important;gap:8px;align-items:center}.check-label input{accent-color:var(--green);width:16px;height:16px}.full-width{width:100%}.file-button{display:block;text-align:center;font-size:12px;padding:12px;cursor:pointer;color:var(--green)}.file-button input{display:block;width:100%;margin-top:10px;font-size:10px}.small-note{background:transparent;border:1px solid var(--border)}.training-main{max-width:1000px;margin:auto;padding:24px 40px}.training-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);gap:16px}.back-link{color:var(--green)}.step-track{display:flex;gap:6px;margin:18px 0 24px}.step-track span{height:4px;flex:1;background:var(--border);border-radius:4px}.step-track .filled{background:var(--green)}.exercise{text-align:center}.exercise-heading h1{font-size:26px}.exercise-heading p:not(.eyebrow){font-size:13px;color:var(--muted);margin:12px auto 0;max-width:660px}.letter-pair{display:flex;justify-content:center;align-items:center;gap:32px;margin-top:16px;font-size:70px;line-height:1.25;font-weight:450;color:var(--green)}.letter-pair .pair-line{font-size:26px;color:var(--muted)}.pair-caption{font-size:11px;color:var(--muted);margin:6px 0 12px}.input-label{font-size:11px;display:block;margin:18px 0 8px;color:var(--muted)}#key-input{display:block;resize:none;width:min(100%,560px);margin:auto;padding:12px 18px;border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--green);font-size:18px;text-align:center;height:53px;line-height:26px;overflow:hidden}#key-input::placeholder{font-size:13px;color:var(--muted)}#key-input:focus{outline:2px solid var(--green);outline-offset:2px}.exercise-message{min-height:26px;font-size:12px;margin:12px 0 0;color:var(--muted)}.warning{color:var(--warning)!important}.success{color:var(--green)}#step-actions{margin-top:10px;min-height:0}#step-actions:empty{display:none}#step-actions .primary{min-height:42px;padding:9px 24px;font-size:13px}.target-text{font-size:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:760px;margin:28px auto 8px;line-height:1.45}.target-char{display:inline-block;min-width:25px;padding:3px;border-radius:4px;color:oklch(55% .025 157);border-bottom:2px solid transparent}.target-char.typed{color:var(--green);background:var(--green-light)}.target-char.current-char{color:var(--ink);background:var(--peach);border-bottom-color:var(--warning)}.newline-char{color:var(--muted);font-size:24px}.keyboard{max-width:790px;margin:24px auto 0;background:oklch(92% .012 95);border:1px solid var(--border);border-radius:12px;padding:12px 14px 14px}.keyboard-caption{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);padding:0 2px 9px}.key-row{display:flex;gap:5px;justify-content:center;margin-bottom:5px}.key-row:last-child{margin-bottom:0}.key{font-size:13px;display:flex;align-items:center;justify-content:center;flex:1;max-width:57px;min-width:0;height:34px;background:var(--white);border:1px solid var(--border);border-bottom-width:3px;border-radius:5px;position:relative}.key.home-key::after{content:'';position:absolute;bottom:4px;height:2px;width:11px;border-radius:2px;background:var(--muted)}.key.target-key{background:var(--green);color:var(--paper);border-color:oklch(34% .06 157)}.key.home-key.target-key::after{background:var(--paper)}.key.wide-key{max-width:80px;flex:1.4}.row-1{padding:0 32px}.row-2{padding-left:22px}.row-3{padding-left:0}.bottom-row{padding:0 45px}.key.modifier{font-size:8px;max-width:55px}.key.space-key{max-width:none;flex:5;font-size:10px}.finger-guide{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:12px}.finger-label{font-size:11px;color:var(--muted);min-width:66px}.finger-hand{display:flex;align-items:end;gap:4px;height:29px}.finger{height:20px;width:9px;border:1px solid oklch(69% .025 153);border-radius:5px 5px 2px 2px}.finger-1,.finger-3,.finger-5,.finger-7{height:26px}.finger-2,.finger-6{height:29px}.finger-4{height:15px;margin:0 6px}.finger.active{background:var(--green);border-color:var(--green)}.exercise-foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;margin-top:16px}.operation-demo{min-height:220px;display:flex;align-items:center;justify-content:center;gap:20px}.cursor-demo{font-size:60px;color:var(--green)}.scroll-demo{height:240px;overflow-y:auto;max-width:560px;margin:20px auto 0;border:1px solid var(--border);background:var(--white);border-radius:12px;overscroll-behavior:contain}.scroll-start{height:230px;padding:45px 20px}.scroll-start>span{font-size:45px;color:var(--green)}.scroll-start p,.scroll-middle{font-size:13px;color:var(--muted)}.scroll-middle{height:260px;display:flex;flex-direction:column;gap:50px;justify-content:center}.scroll-end{height:160px;padding:16px}.scroll-end p{font-size:13px;margin-bottom:16px}.finish-page{text-align:center;padding:24px 0 48px}.finish-stamp{width:74px;height:74px;line-height:74px;background:var(--green-light);color:var(--green);border-radius:50%;margin:0 auto 24px;font-size:36px}.finish-page h1{font-size:34px}.finish-keys{display:flex;gap:12px;justify-content:center;margin:32px 0}.finish-keys kbd{min-width:56px;height:62px;font-size:26px;background:var(--peach)}.finish-keys>span{font-size:13px;color:var(--muted)}.finish-note{font-size:13px;color:var(--muted);margin:20px 0}.finish-actions{display:flex;gap:12px;justify-content:center;margin-bottom:20px}.finished-project{max-width:420px;text-align:left;background:var(--peach);border-radius:12px;padding:28px;margin:28px auto}.finished-project pre{white-space:pre-wrap;font:22px/1.7 Lexend,sans-serif;margin:8px 0}.boot{padding:100px 32px;max-width:750px;margin:auto}.boot h1{font-size:28px}.boot p{margin:18px 0;color:var(--muted)}.save-warning{padding:14px 24px;background:var(--peach);color:var(--warning);font-size:13px;text-align:center}.save-warning button{padding:5px 12px;background:var(--white);border-radius:4px;margin-left:12px}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,10px);background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:8px;font-size:13px;max-width:min(90vw,600px);opacity:0;pointer-events:none;z-index:20;transition:opacity .2s,transform .2s}#toast.visible{opacity:1;transform:translate(-50%,0)}.skip-link{position:fixed;top:-100px;left:16px;background:var(--green);color:var(--paper);padding:12px;z-index:10}.skip-link:focus{top:12px}
@media(min-width:1400px){.main{padding-top:64px}.today-lesson{min-height:355px;padding:36px 40px}.home-grid{gap:40px}.key-friends{width:275px}.welcome{margin-bottom:40px}}
@media(max-width:1050px){.topbar{padding:0 28px}.main{padding:36px 28px}.footer{margin-left:28px;margin-right:28px}.key-friends{width:190px;transform:scale(.8);transform-origin:center right;margin-left:-60px}.home-grid{grid-template-columns:2.2fr 1fr;gap:24px}.today-lesson{padding:28px}.course-stage{grid-template-columns:160px 1fr;gap:24px}.parent-layout{gap:32px}.stats-line{gap:40px}.edition{display:none}.today-copy h2{font-size:23px}}
@media(max-width:760px){h1{font-size:28px}.topbar{height:80px;padding:0 20px;gap:16px}.brand small{display:none}.brand b{font-size:20px}.brand-key{width:34px;height:34px;font-size:25px}.topbar nav{gap:16px;font-size:12px}.parent-link{font-size:0;gap:0}.parent-link span{font-size:24px}.main{padding:28px 20px}.welcome{margin-bottom:24px}.lead{font-size:13px}.home-grid{grid-template-columns:1fr}.today-lesson{min-height:310px}.key-friends{width:230px;margin-left:-30px;transform:scale(.85)}.daily-note{padding:16px 0}.daily-note h2{margin-top:4px}.week-dots{max-width:350px;width:100%;margin:16px 0}.note-bottom{display:none}.stage-path{grid-template-columns:repeat(2,1fr);gap:12px}.home-tip{align-items:start;flex-wrap:wrap;gap:8px}.completed-note{display:none}.footer{margin:8px 20px 0;font-size:9px;align-items:start}.course-stage{grid-template-columns:1fr;gap:16px}.lesson-keys{display:none}.parent-layout{grid-template-columns:1fr;gap:24px}.page-title{margin-bottom:28px}.training-main{padding:20px 16px}.training-top{font-size:11px}.exercise-heading h1{font-size:23px}.exercise-heading p:not(.eyebrow){font-size:12px}.keyboard{padding:9px 6px}.key-row{gap:3px}.key{height:30px;font-size:11px}.row-1{padding:0 12px}.row-2{padding-left:8px}.bottom-row{padding:0 12px}.target-text{font-size:25px;gap:2px}.target-char{min-width:21px}.letter-pair{font-size:60px}.finish-page h1{font-size:28px}.finish-actions{flex-direction:column;align-items:center}.footer>span:last-child{max-width:45%;text-align:right}.home-tip p{font-size:11px}.section-heading h2{font-size:17px}.section-heading a{font-size:11px}.lesson-row{gap:12px;padding:16px 8px}}
@media(max-width:420px){.key-friends{position:absolute;right:-25px;top:40px;transform:scale(.65);transform-origin:top right;opacity:.65}.today-copy{max-width:225px}.today-lesson{padding:24px}.brand-key{display:none}.lesson-name b{font-size:13px}.target-text{font-size:22px}.key.modifier{font-size:6px}.welcome h1{font-size:25px}.training-top>span{max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Use the same centered shell at every viewport size, including narrow app panels. */
html{scrollbar-gutter:stable both-edges}
#app{min-height:100svh;display:flex;flex-direction:column}
.topbar,.main{width:100%;margin-inline:auto}
.topbar{flex-shrink:0}
.main{flex:1}
.training-main{width:100%;flex:1;margin-inline:auto}
.footer{width:calc(100% - 96px);max-width:1152px;margin-inline:auto}
.welcome{justify-content:center;text-align:center;margin-inline:auto}
.welcome>div{min-width:0}
.edition{display:none}
.today-copy{text-align:center;min-width:0}
.home-grid{grid-template-columns:minmax(0,2.25fr) minmax(0,1fr)}
.today-lesson{min-width:0;align-items:center}
.daily-note{min-width:0}
.page-title{text-align:center;max-width:760px;margin-inline:auto}
.course-stage,.parent-layout{min-width:0}
.parent-layout{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
.parent-layout>*,.lesson-name{min-width:0}
@media(max-width:1050px){.footer{width:calc(100% - 56px)}.home-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
@media(max-width:850px){
  .home-grid{grid-template-columns:minmax(0,1fr);max-width:660px;margin-inline:auto}
  .daily-note{padding:20px 4px 0;text-align:center;align-items:center}
  .note-head{width:100%;justify-content:center;gap:14px}
  .note-head .eyebrow{margin:0}
  .daily-note h2{margin-top:12px}
  .week-dots{max-width:340px;width:100%}
  .note-bottom{display:none}
  .today-lesson{justify-content:center}
}
@media(max-width:760px){
  .footer{width:calc(100% - 40px)}
  .parent-layout{grid-template-columns:minmax(0,1fr)}
  .parent-link{font-size:11px;gap:5px}
  .topbar nav{gap:20px}
  .today-lesson{display:flex;flex-direction:column;padding:16px 24px 28px;gap:0;min-height:0}
  .today-copy{width:100%;max-width:none}
  .today-copy .lesson-counter{margin-top:14px}
  .today-copy .primary{margin-top:20px}
  .key-friends{position:relative;inset:auto;order:-1;width:265px;height:152px;margin:-16px auto 0;transform:scale(.65);transform-origin:center;opacity:1;flex-shrink:0}
  .friend-caption{display:none}
  .orbit-two{bottom:-18px}
  .welcome .lead{max-width:32em;margin-inline:auto}
  .home-tip{justify-content:center;text-align:center}
  .section-heading{flex-wrap:wrap}
}
@media(max-width:420px){
  .topbar{padding-inline:16px;gap:12px}
  .topbar nav{gap:14px}
  .parent-link{font-size:10px;gap:4px}
  .parent-link span{display:none}
  .key-friends{position:relative;inset:auto;transform:scale(.6);margin:-20px auto 0}
  .today-copy{max-width:none}
  .today-lesson{padding:12px 20px 24px}
  .welcome h1{font-size:24px}
  .welcome .lead{font-size:12px}
}
@media(max-height:800px){
  .is-training .topbar{height:70px}
  .training-main{padding-top:16px;padding-bottom:12px}
  .step-track{margin:12px 0 16px}
  .exercise-heading .eyebrow{margin-bottom:6px}
  .exercise-heading h1{font-size:23px}
  .exercise-heading p:not(.eyebrow){margin-top:8px}
  .letter-pair{font-size:54px;margin-top:12px}
  .input-label{margin-top:10px}
  .keyboard{margin-top:16px;padding-block:8px}
  .key{height:28px}
  .finger-guide{margin-top:8px}
  .is-training .footer{padding-block:14px}
}

.english-entry{padding:28px;background:var(--green-light);border-radius:16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.english-entry h2{font-size:21px;margin-bottom:16px}
.english-entry-sample{font-size:16px;line-height:1.9;margin-bottom:16px;color:var(--green)}
.english-entry .primary{margin:22px 0 12px;gap:20px}
.english-entry>a{font-size:12px;color:var(--green)}
.hero-passage{font-size:23px;line-height:1.8;color:var(--green);max-width:260px;flex:1;padding:20px;transform:rotate(-3deg)}
.english-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.english-path>button{padding:22px 0;text-align:left;background:none;border-top:1px solid var(--border)}
.english-path>button:hover{border-top-color:var(--green)}
.english-path p{font-size:12px;color:var(--muted);margin:8px 0}
.path-example{display:block;font-size:18px;color:var(--green);margin:14px 0}
.english-path small{font-size:11px;color:var(--muted)}
.home-tip a,.library-tip a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.level-tabs{display:flex;justify-content:center;gap:8px;margin:0 auto 36px}
.level-tabs button{display:flex;gap:12px;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:8px;padding:12px 24px;font-size:14px}
.level-tabs button span{font-size:10px;color:var(--muted)}
.level-tabs button[aria-selected=true]{color:var(--paper);background:var(--green);border-color:var(--green)}
.level-tabs button[aria-selected=true] span{color:var(--green-light)}
.english-library{max-width:900px;margin:auto;display:flex;flex-direction:column;gap:28px}
.reading-card{padding:28px 32px;background:var(--white);border:1px solid var(--border);border-radius:12px}
.reading-card-title{display:flex;align-items:center;justify-content:space-between;gap:20px}
.reading-card-title h2{font-size:23px;margin-bottom:4px}
.reading-card-title>div>span{font-size:13px;color:var(--muted)}
.reading-count{font-size:11px;color:var(--muted);white-space:nowrap}
.reading-preview{font-size:18px;line-height:1.9;margin-top:24px;color:var(--ink)}
.reading-meaning{font-size:12px;line-height:1.9;color:var(--muted);margin-top:14px}
.reading-card-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.reading-card-footer>span{font-size:11px;color:var(--muted)}
.library-tip{text-align:center;font-size:12px;color:var(--muted);margin:28px 0 0}
.reading-progress{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted);padding:18px 0;margin-bottom:24px;border-bottom:1px solid var(--border)}
.passage-exercise .exercise-heading h1{font-size:29px}
.reading-sheet{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:28px 32px;margin:28px auto 18px;max-width:900px;text-align:left}
.reading-text{font-family:Lexend,sans-serif;font-size:24px;line-height:2.05;letter-spacing:.015em;color:oklch(49% .02 157)}
.reading-word{display:inline-block;white-space:nowrap}
.reading-char{border-radius:2px;border-bottom:2px solid transparent}
.reading-char.typed{color:var(--green);background:oklch(94% .02 153)}
.reading-char.current-char{color:var(--ink);background:var(--peach);border-bottom-color:var(--green)}
.translation{max-width:900px;text-align:left;margin:0 auto 20px;font-size:13px;color:var(--muted)}
.translation summary{cursor:pointer;color:var(--green);padding:8px 0}
.translation>p{margin:10px 0;line-height:1.9}
.vocabulary{display:flex;gap:8px;flex-wrap:wrap}
.vocabulary span{background:var(--green-light);border-radius:5px;padding:4px 9px;font-size:11px}
#key-input.passage-input{width:min(100%,900px);max-width:900px;height:88px;text-align:left;font-size:17px;padding:14px 18px;overflow:auto;line-height:1.7}
.passage-exercise .input-label{text-align:left;max-width:900px;margin-inline:auto;font-size:11px}
.reading-results{display:flex;justify-content:center;gap:64px;margin:28px auto}
.reading-results strong{display:block;font-size:30px;font-weight:500;color:var(--green)}
.reading-results span{font-size:11px;color:var(--muted)}
.completed-passage{max-width:760px;margin:0 auto;padding:24px 28px;background:var(--white);border:1px solid var(--border);border-radius:12px;text-align:left;font-size:20px;line-height:1.9}
.english-finish>.reading-meaning{max-width:720px;margin-inline:auto;text-align:left}
.next-reading{margin:32px auto 24px;max-width:500px;padding:24px;background:var(--green-light);border-radius:12px}
.next-reading>p:not(.eyebrow){color:var(--muted);font-size:12px;margin:8px 0 18px}
@media(max-width:850px){.english-entry{align-items:center;text-align:center}.english-entry-sample{font-size:19px}.hero-passage{max-width:450px;transform:none;text-align:center}.english-path{gap:18px}}
@media(max-width:760px){.english-path{grid-template-columns:1fr;gap:0}.english-path>button{display:grid;grid-template-columns:32px 1fr;column-gap:12px;padding:20px 0}.english-path .stage-number{grid-row:1/5;margin-top:4px}.english-path p,.english-path .path-example,.english-path small{grid-column:2}.english-path .path-example{margin:4px 0 10px}.hero-passage{font-size:20px;order:-1}.level-tabs{gap:5px}.level-tabs button{padding:10px 14px;font-size:12px;gap:8px}.reading-card{padding:22px}.reading-preview{font-size:16px}.reading-card-footer{gap:16px}.reading-card-footer>span{max-width:150px}.reading-card-footer .primary{gap:12px;padding:12px 16px;white-space:nowrap}.reading-card-title h2{font-size:20px}.reading-sheet{padding:20px;margin-top:20px}.reading-text{font-size:21px;line-height:2}.reading-results{gap:32px}.reading-results strong{font-size:25px}.reading-progress{font-size:10px}.completed-passage{font-size:17px}.reading-card-title .eyebrow{letter-spacing:1px}.passage-exercise .exercise-heading h1{font-size:26px}}
@media(max-width:420px){.topbar nav{gap:10px;font-size:10px}.topbar{gap:10px}.topbar .brand b{font-size:17px}.parent-link{font-size:9px}.level-tabs button{padding:10px;font-size:11px}.level-tabs button span{display:none}.reading-card{padding:20px 16px}.reading-count{font-size:10px}.reading-text{font-size:19px}.reading-sheet{padding:16px}.welcome h1{font-size:23px}.reading-results{gap:24px}.reading-results strong{font-size:23px}}