.foundation-tabs{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:0 0 26px}.foundation-tabs a{display:block;text-align:center;text-decoration:none;padding:17px;border:2px solid #cbdac7;border-radius:22px;background:#f2f8f1;color:#4d6546;font-size:21px;font-weight:600}.foundation-tabs a:nth-child(2){background:#eef6e4;border-color:#bad598;color:#476d32}.foundation-tabs a[aria-current=page]{background:#4d6546;color:white;border-color:#4d6546}.foundation-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:25px}.foundation-cards a{display:block;text-decoration:none;padding:35px;border:2px solid #c6d8c1;border-radius:28px;background:#eff6ed;color:#4d6546}.foundation-cards a+ a{background:#ecf6df;border-color:#bfd69c;color:#466d31}.foundation-cards strong{font-size:30px}.foundation-cards p{font-size:18px;line-height:1.8}.foundation-filters{display:flex;gap:18px;flex-wrap:wrap;padding:22px;background:white;border:1px solid #d6e0d3;border-radius:22px}.foundation-filters label{display:flex;align-items:center;gap:9px;font-size:16px}.foundation-filters select,.foundation-actions button,.hanzi-question>button{font:inherit;padding:11px 16px;border:1px solid #c9d5c6;border-radius:16px;background:white;color:#4d6546;cursor:pointer}.foundation-actions{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:24px 0}.foundation-actions button:first-child{background:#34795d;color:white;border-color:#34795d}.foundation-actions button:nth-child(2){background:#fff0c6;border-color:#de9196;color:#a2343b}.hanzi-question{border:1px solid #dae3d8;border-radius:27px;background:white;text-align:center;padding:25px}.hanzi-question>p{font-size:18px;color:#758371}.hanzi-question>strong{font-family:serif;font-size:110px;display:block;margin:18px auto}.hanzi-question>button{display:block;margin:22px auto;background:#f4faf2}.hanzi-answer{display:flex;align-items:center;justify-content:center;gap:25px;flex-wrap:wrap}.hanzi-answer b{font-size:29px;color:#4d6546}.hanzi-answer span{font-size:20px}.foundation-character-cards{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;margin:22px 0}.foundation-character-cards button{font-family:serif;font-size:35px;border:2px solid #c8d8c4;border-radius:27px;background:#eef6ec;color:#4d6546;padding:20px 8px;cursor:pointer}.foundation-character-cards button:nth-child(3n+2){background:#edf6de;border-color:#c0d8a1;color:#4b7132}.foundation-character-cards button:nth-child(3n){background:#fff1c6;border-color:#e48c91;color:#a0383f}#hanzi-stroke-practice{text-align:left;margin-top:24px}#hanzi-stroke-practice .stroke-layout{justify-content:center}.basic-strokes{margin:28px 0;padding:20px;background:white;border:1px solid #d6e0d3;border-radius:22px}.basic-strokes summary{font-size:20px;cursor:pointer}.basic-strokes>p{font-size:16px;color:#758271}#basic-stroke-cards{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;margin:22px 0}#basic-stroke-cards>div{display:flex;flex-direction:column;align-items:center;background:#f5f9f3;border:1px solid #d5e1d2;border-radius:18px;padding:8px;color:#4d6546}#basic-stroke-cards svg{width:75px;height:75px;max-width:100%}#basic-stroke-cards strong{font-size:20px}#basic-stroke-cards span{font-size:16px;margin-top:8px;text-align:center}@media(max-width:650px){.foundation-cards{grid-template-columns:1fr;gap:18px}.foundation-cards a{padding:26px}.foundation-tabs a{font-size:18px;padding:14px}.foundation-filters{gap:13px;padding:17px}.foundation-filters label{font-size:15px}.foundation-filters select{max-width:210px}.foundation-character-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.foundation-character-cards button{font-size:30px;padding:16px 5px}.hanzi-question{padding:20px 12px}.hanzi-question>strong{font-size:90px}#basic-stroke-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.foundation-actions{gap:10px}.foundation-actions button{font-size:16px;padding:11px 14px}}
#hanzi-stroke-practice .game-toolbar{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}#hanzi-stroke-practice .game-toolbar label{font-size:16px;display:flex;flex-direction:column;gap:7px}#hanzi-stroke-practice .game-toolbar select{font:inherit;padding:9px;border:1px solid #c9d5c6;border-radius:10px;background:white;color:#4d6546}#hanzi-stroke-practice .stroke-buttons button{font:inherit;padding:10px 14px;border-radius:12px;border:1px solid #c9d5c6;cursor:pointer}

.foundation-tabs,.foundation-pills{display:flex;gap:12px;flex-wrap:wrap;margin:15px 0}.foundation-tabs button,.foundation-pills button{font:inherit;padding:13px 22px;border:2px solid #cad7c7;border-radius:28px;background:#f3f8f1;color:#4d6546;cursor:pointer}.foundation-tabs button[aria-pressed=true],.foundation-pills button[aria-pressed=true]{background:#608556;color:white}#basic-stroke-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}#basic-stroke-cards>button{display:flex;align-items:center;flex-direction:column;border:2px solid #d2ddcf;border-radius:25px;background:#f3f8f1;color:#4d6546;padding:12px;cursor:pointer}#basic-stroke-cards>button:nth-child(3n){background:#f5edfa}#basic-stroke-cards>button:nth-child(3n+1){background:#f2f7e9}#basic-stroke-cards svg{width:100px;height:100px}#basic-stroke-cards strong{font:24px 'Kaiti SC','STKaiti',serif}#basic-stroke-cards span{font-size:17px;margin-top:8px}#stroke-reading[hidden],#stroke-drawing[hidden]{display:none}@media(max-width:650px){#basic-stroke-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

#stroke-name-quiz[hidden],.stroke-name-actions[hidden]{display:none}.stroke-name-question{max-width:800px;margin:25px auto;text-align:center;background:#fff;border:1px solid #d4ded1;border-radius:26px;padding:25px}.stroke-name-question>svg{width:180px;height:180px;color:#4d6546}.stroke-name-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.stroke-name-options button,.stroke-name-actions button,#stroke-name-restart{font:inherit;font-size:22px;padding:18px;border:2px solid #ccd9c9;border-radius:25px;background:#f1f7ef;color:#4d6546;cursor:pointer}.stroke-name-options button:nth-child(2n){background:#f5eedf}.stroke-name-actions{display:flex;justify-content:center;gap:15px}.stroke-name-actions button{font-size:18px}.stroke-name-question #stroke-name-feedback{min-height:30px;font-size:20px}

.stroke-match-types{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:20px 0}.stroke-match-types button,#stroke-question-play{font:inherit;font-size:20px;border:2px solid #cddac9;border-radius:26px;padding:15px 22px;background:#f1f7ef;color:#4d6546;cursor:pointer}.stroke-match-types button[aria-pressed=true]{background:#608556;color:white}.stroke-name-options ruby{ruby-align:center;line-height:2.5}.stroke-name-options rt{font:16px/1.5 Arial,sans-serif}.stroke-name-options svg{width:130px;height:130px;display:block;margin:auto}#stroke-question-play{display:block;margin:20px auto 28px;background:#fff0ca;border-color:#e38c92;min-height:80px}

.foundation-primary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:0 0 26px}.foundation-primary a{padding:17px;text-align:center}.foundation-primary a:nth-child(3){background:#f5ecfb;border-color:#d7c0e6;color:#74548b}.foundation-primary a[aria-current=page]{background:#4d6546;border-color:#4d6546;color:#fff}.stroke-main-tabs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.stroke-main-tabs button{padding:22px;font-size:23px;border-radius:24px;border:2px solid #c9d8c5;background:#f1f7ef;color:#4d6546}.stroke-main-tabs button[aria-pressed=true]{background:#4d6546;color:#fff}.stroke-match-types{display:grid;grid-template-columns:1fr 1fr;gap:15px}.stroke-match-types button{padding:20px;border-radius:25px;background:#eef7e6;border:2px solid #c3d9ad;color:#456a32}.stroke-match-types button:nth-child(2){background:#fff4d9;color:#a04248;border-color:#e18e93}.stroke-match-types button[aria-pressed=true]{box-shadow:0 0 0 2px #608556;border-color:#608556}.foundation-cards{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:650px){.foundation-primary{gap:7px}.foundation-primary a{font-size:17px;padding:13px 5px}.stroke-main-tabs button{font-size:19px;padding:17px 8px}.stroke-match-types button{font-size:17px;padding:15px 8px}.foundation-cards{grid-template-columns:1fr}}

.foundation-filters,.foundation-pills{justify-content:center;align-items:center}.foundation-filters{flex-direction:column;gap:4px}.foundation-pills{margin:8px 0}.foundation-character-cards{max-width:900px;margin-left:auto;margin-right:auto}#stroke-reading>p{text-align:center}.hanzi-answer{justify-content:center}.stroke-name-actions{justify-content:center}

body[data-comprehensive] #stroke-drawing{display:grid;grid-template-columns:175px minmax(0,1fr);gap:22px;align-items:start}body[data-comprehensive] .foundation-filters{position:sticky;top:12px;padding:14px;gap:20px}body[data-comprehensive] .foundation-pills{flex-direction:column;width:100%;gap:10px}body[data-comprehensive] .foundation-pills button{width:100%;padding:12px 8px}body[data-comprehensive] #hanzi-content{min-width:0}body[data-comprehensive] .foundation-actions{margin:0 0 14px}body[data-comprehensive] .foundation-character-cards{margin:10px 0 18px;gap:8px}body[data-comprehensive] .foundation-character-cards button{font-size:27px;padding:12px 5px}.hanzi-workspace{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;align-items:start}.hanzi-summary{text-align:center;padding:15px 8px;background:#f3f8f1;border:1px solid #d2decf;border-radius:24px}.hanzi-summary>strong{font-family:"Kaiti SC","STKaiti",serif;font-size:78px;display:block}.hanzi-summary .hanzi-answer{display:flex;flex-direction:column;gap:9px}.hanzi-summary button{font:inherit;background:white;border:1px solid #c6d3c3;border-radius:20px;padding:10px}.hanzi-summary p{font-size:14px}.hanzi-workspace #hanzi-stroke-practice{min-width:0}.hanzi-workspace .stroke-layout{grid-template-columns:minmax(220px,1fr) minmax(170px,1fr);gap:12px}.hanzi-workspace .stroke-help>p,.hanzi-workspace .stroke-help>h3:not(.stroke-choose-title){display:none}.hanzi-workspace .stroke-preferences{gap:10px;justify-content:center}.hanzi-workspace .stroke-sequence{max-height:270px;overflow:auto}.hanzi-workspace .stroke-options button{min-height:90px;padding:5px}.stroke-buttons button[hidden]{display:none!important}@media(max-width:1000px){body[data-comprehensive] #stroke-drawing{grid-template-columns:140px minmax(0,1fr);gap:12px}.hanzi-workspace{grid-template-columns:105px minmax(0,1fr);gap:10px}.hanzi-workspace .stroke-layout{grid-template-columns:1fr}.hanzi-workspace .stroke-options{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:650px){body[data-comprehensive] #stroke-drawing{display:block}body[data-comprehensive] .foundation-filters{position:static;gap:3px;margin-bottom:15px}body[data-comprehensive] .foundation-pills{flex-direction:row;justify-content:center}body[data-comprehensive] .foundation-pills button{width:auto}.hanzi-workspace{display:block}.hanzi-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-bottom:15px}.hanzi-summary>strong{font-size:52px}.hanzi-summary>p{display:none}.hanzi-summary .hanzi-answer{flex-direction:row;flex-wrap:wrap;font-size:14px}.hanzi-workspace .stroke-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

body[data-comprehensive] .class-main{padding-top:18px}body[data-comprehensive] .foundation-primary{margin-bottom:12px}body[data-comprehensive] .foundation-primary a{padding:11px}body[data-comprehensive] .pinyin-heading{margin:10px 0 14px}body[data-comprehensive] .foundation-character-cards button{padding:8px 5px}body[data-comprehensive] .stroke-preferences{margin-top:0;margin-bottom:12px}body[data-comprehensive] .stroke-choose-title{margin:0 0 10px}body[data-comprehensive] .hanzi-summary>p{margin:5px 0 10px}body[data-comprehensive] .hanzi-summary>strong{font-size:65px}body[data-comprehensive] .stroke-stage{max-width:270px}body[data-comprehensive] .stroke-target{max-width:270px}

body[data-comprehensive] .hanzi-workspace{display:flex;flex-direction:column;gap:8px}body[data-comprehensive] .hanzi-summary{padding:0;border:0;background:none;align-self:center}body[data-comprehensive] #hanzi-stroke-practice{width:100%}body[data-comprehensive] .stroke-work-area .stroke-color-dots{flex-direction:column}

body[data-comprehensive] .hanzi-workspace .hanzi-summary{align-self:flex-end;margin-top:12px}body[data-comprehensive] #hanzi-next{background:#e6eee4;border:2px solid #a5b99f;padding:12px 24px}

#stroke-name-quiz:not([hidden]){display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:start}#stroke-name-quiz .stroke-match-types{display:flex;flex-direction:column;position:sticky;top:16px;margin:0;gap:14px}#stroke-name-quiz .stroke-match-types button{padding:18px 12px;font-size:18px}#stroke-name-quiz .stroke-name-question{width:100%;box-sizing:border-box;margin:0;min-width:0}@media(max-width:700px){#stroke-name-quiz:not([hidden]){display:block}#stroke-name-quiz .stroke-match-types{position:static;flex-direction:row;margin-bottom:16px}#stroke-name-quiz .stroke-match-types button{flex:1}}

/* Compact, easy-to-tap stroke reading cards. */
#basic-stroke-cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:14px 0}#basic-stroke-cards>button{padding:8px;border-radius:19px}#basic-stroke-cards svg{width:65px;height:65px}#basic-stroke-cards strong{font-size:20px}#basic-stroke-cards span{font-size:15px;margin-top:4px}@media(max-width:650px){#basic-stroke-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#basic-stroke-cards svg{width:56px;height:56px}#basic-stroke-cards strong{font-size:18px}#basic-stroke-cards span{font-size:13px}}
#stroke-name-quiz:not([hidden]){display:flex;flex-direction:column;gap:14px;align-items:center}#stroke-name-quiz .stroke-match-types{position:static;flex-direction:row;justify-content:center;gap:12px;margin:0;flex-wrap:wrap}#stroke-name-quiz .stroke-match-types button{padding:10px 16px;font-size:16px}#stroke-name-quiz .stroke-name-question{max-width:850px}

/* Stroke reading stays compact by default, while families can enlarge every card. */
.stroke-card-size{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:4px auto 10px;color:#5e7159;font-size:15px}.stroke-card-size label{font-weight:600}.stroke-card-size-endpoint{color:#7d8a79;font-size:13px}.stroke-card-size input[type=range]{accent-color:#608556;width:min(290px,58vw);cursor:pointer}#basic-stroke-cards{--stroke-card-min:100px;--stroke-card-icon:66px;--stroke-card-name:21px;--stroke-card-pinyin:16px;--stroke-card-padding:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--stroke-card-min)),1fr));gap:clamp(8px,1.25vw,14px)}#basic-stroke-cards>button{padding:var(--stroke-card-padding);border-radius:clamp(16px,2vw,23px)}#basic-stroke-cards svg{width:var(--stroke-card-icon);height:var(--stroke-card-icon)}#basic-stroke-cards strong{font-size:var(--stroke-card-name)}#basic-stroke-cards span{font-size:var(--stroke-card-pinyin);margin-top:clamp(4px,.6vw,7px)}

/* A full stroke-matching round should fit without making students scroll past the answers. */
#stroke-name-quiz:not([hidden]){gap:9px}#stroke-name-quiz .stroke-match-types{gap:8px}#stroke-name-quiz .stroke-match-types button{padding:8px 13px;font-size:15px;line-height:1.2}#stroke-name-quiz .stroke-name-question{max-width:720px;margin:0;padding:13px 16px;border-radius:20px}#stroke-name-quiz .stroke-name-question>p{margin:0 0 7px;font-size:16px;line-height:1.45}#stroke-name-quiz .stroke-name-question>svg{width:96px;height:96px}#stroke-name-quiz .stroke-name-options{gap:8px}#stroke-name-quiz .stroke-name-options button{min-height:64px;padding:6px 9px;border-radius:16px;font-size:19px;line-height:1.25}#stroke-name-quiz .stroke-name-options svg{width:62px;height:62px}#stroke-name-quiz .stroke-name-options ruby{line-height:1.8}#stroke-name-quiz .stroke-name-options rt{font-size:13px;line-height:1.25}#stroke-name-quiz #stroke-question-play{min-height:46px;margin:7px auto 10px;padding:8px 14px;font-size:16px}#stroke-name-quiz .stroke-name-question #stroke-name-feedback{min-height:22px;margin:7px 0 0;font-size:16px}#stroke-name-quiz .stroke-name-actions{gap:9px;margin-top:7px}#stroke-name-quiz .stroke-name-actions button,#stroke-name-quiz #stroke-name-restart{padding:8px 13px;border-radius:17px;font-size:15px}
@media(max-width:650px){.stroke-card-size{justify-content:flex-start;margin-top:2px;gap:7px}.stroke-card-size input[type=range]{width:min(200px,52vw)}#basic-stroke-cards{gap:8px}#stroke-name-quiz .stroke-match-types{width:100%;gap:7px}#stroke-name-quiz .stroke-match-types button{flex:1;padding:8px 6px;font-size:14px}#stroke-name-quiz .stroke-name-question{width:100%;padding:12px 10px}#stroke-name-quiz .stroke-name-question>svg{width:82px;height:82px}#stroke-name-quiz .stroke-name-options{gap:7px}#stroke-name-quiz .stroke-name-options button{min-height:58px;padding:5px;font-size:17px}#stroke-name-quiz .stroke-name-options svg{width:55px;height:55px}}

/* On a normal laptop screen, matching keeps the complete question visible.
   The content stays generous enough to read; only page chrome tightens while
   this one working view is active. */
@media (min-width:701px) and (min-height:650px){
  body[data-foundation-view="quiz"].pinyin-page .site-masthead{margin-bottom:4px!important;padding-top:8px!important;padding-bottom:8px!important}
  body[data-foundation-view="quiz"].pinyin-page .section-navigation{margin-bottom:8px!important}
  body[data-foundation-view="quiz"].pinyin-page .section-navigation a{padding-top:7px!important;padding-bottom:7px!important;font-size:14px!important}
  body[data-foundation-view="quiz"].pinyin-page .class-main{padding-top:6px!important;padding-bottom:8px!important}
  body[data-foundation-view="quiz"].pinyin-page .foundation-primary{margin-bottom:6px!important}
  body[data-foundation-view="quiz"].pinyin-page .foundation-primary a{padding:7px!important;font-size:16px!important}
  body[data-foundation-view="quiz"].pinyin-page .pinyin-heading{margin-bottom:5px!important}
  body[data-foundation-view="quiz"].pinyin-page .pinyin-heading h1{font-size:24px!important}
  body[data-foundation-view="quiz"].pinyin-page .stroke-main-tabs{gap:10px!important;margin:6px 0 8px!important}
  body[data-foundation-view="quiz"].pinyin-page .stroke-main-tabs button{padding:12px!important;border-radius:18px!important;font-size:19px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz{gap:7px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz .stroke-match-types{gap:6px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz .stroke-match-types button{padding:7px 10px!important;font-size:14px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz .stroke-name-question{max-width:640px!important;padding:9px 12px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz .stroke-name-question>p{margin:0 0 5px!important;font-size:15px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz #stroke-question-play{min-height:40px!important;margin:5px auto 7px!important;padding:6px 12px!important;font-size:15px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz .stroke-name-options{gap:6px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz .stroke-name-options button{min-height:52px!important;padding:4px 8px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz .stroke-name-options svg{width:54px!important;height:54px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz:not([hidden]){display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr);justify-items:center;align-items:start;min-height:clamp(360px,calc(100svh - 285px),540px);gap:10px!important}
  body[data-foundation-view="quiz"].pinyin-page #stroke-name-quiz .stroke-name-question{align-self:center;justify-self:center;margin:0 auto!important}
}