:root{color-scheme:light;font-family:"FangSong",STFangsong,"Noto Serif SC",Songti SC,serif;color:#24211d;background:#e7e0d0;font-synthesis:none;--paper: #f5f0e4;--paper-deep: #ece3d2;--ink: #24211d;--ink-soft: #6e665c;--line: #cfc4b2;--cinnabar: #a33a32;--cinnabar-deep: #7d2823;--jade: #385b50;--shadow: 0 18px 50px rgb(57 43 28 / 12%);--character-chip-size: 3rem;--character-gap: .55rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background-color:#e7e0d0;background-image:linear-gradient(rgb(107 83 57 / 3%) 1px,transparent 1px),linear-gradient(90deg,rgb(107 83 57 / 3%) 1px,transparent 1px);background-size:24px 24px}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:var(--cinnabar-deep);text-underline-offset:.2em}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-shell{width:min(1500px,calc(100% - 40px));margin:20px auto;padding:clamp(24px,4vw,58px);background:radial-gradient(circle at 12% 8%,rgb(255 255 255 / 58%),transparent 28%),var(--paper);border:1px solid #d5c9b7;box-shadow:var(--shadow);position:relative}.site-shell:before,.site-shell:after{content:"";position:absolute;inset-block:18px;width:1px;background:#a33a3252}.site-shell:before{left:12px}.site-shell:after{right:12px}.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-bottom:clamp(26px,4vw,46px);border-bottom:1px solid var(--line)}.brand-lockup{display:flex;align-items:center;gap:20px}.brand-seal{display:grid;place-items:center;width:62px;height:62px;color:#f8eee0;background:var(--cinnabar);border:2px solid var(--cinnabar-deep);box-shadow:inset 0 0 0 3px #fff3;font-family:STKaiti,KaiTi,serif;font-size:34px;transform:rotate(-2deg)}.eyebrow,.section-kicker{margin:0;color:var(--cinnabar-deep);font-family:Georgia,Times New Roman,serif;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.masthead h1{margin:4px 0 0;font-family:STKaiti,KaiTi,Kaiti SC,serif;font-size:clamp(2.4rem,6vw,5rem);font-weight:500;line-height:.95;letter-spacing:.09em}.masthead-intro{max-width:390px;margin:0 0 5px;color:var(--ink-soft);font-size:clamp(.95rem,2vw,1.1rem);line-height:1.8;text-align:right}.input-deck{display:grid;grid-template-columns:minmax(270px,.85fr) minmax(400px,1.4fr);gap:clamp(26px,4vw,58px);padding:clamp(34px,5vw,64px) 0}.single-search-panel{padding-right:clamp(0px,3vw,42px);border-right:1px solid var(--line)}.section-kicker{display:flex;align-items:center;gap:10px;color:var(--ink-soft);letter-spacing:.09em}.section-kicker span{color:var(--cinnabar)}.single-search-panel h2,.tray-heading h2,.panel-heading h2{margin:8px 0 22px;font-family:STKaiti,KaiTi,serif;font-size:clamp(1.65rem,3vw,2.25rem);font-weight:500}.single-search{display:flex;align-items:stretch;border-bottom:2px solid var(--ink)}.single-search input{width:100%;min-width:0;padding:12px 12px 12px 2px;color:var(--ink);background:transparent;border:0;outline:0;font-family:STKaiti,KaiTi,serif;font-size:1.55rem}.single-search input::placeholder,textarea::placeholder{color:#aaa092}.primary-button,.secondary-button,.replay-button,.character-navigation-button{border:0;transition:background-color .16s ease,color .16s ease,transform .16s ease}.primary-button{display:flex;flex:none;align-items:center;gap:8px;padding:0 16px;color:#fff8ed;background:var(--cinnabar)}.primary-button span:first-child{font-family:STKaiti,KaiTi,serif;font-size:1.25rem}.primary-button:hover,.primary-button:focus-visible{background:var(--cinnabar-deep)}.primary-button:active,.secondary-button:active,.replay-button:active,.character-navigation-button:active{transform:translateY(1px)}.field-hint,.paragraph-actions p,.tray-heading>p,.stroke-explainer{color:var(--ink-soft);font-size:.88rem;line-height:1.65}.practice-book-shelf{margin:10px 0 22px;padding:14px;background:#ece3d294;border:1px solid var(--line)}.practice-book-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}.practice-book-heading strong{font-family:STKaiti,KaiTi,serif;font-size:1.05rem;font-weight:500}.practice-book-heading span{color:var(--ink-soft);font-size:.78rem}.practice-book-list{display:grid;gap:8px}.practice-book-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;padding:12px 14px;color:var(--ink);text-align:left;background:#fffdf6c7;border:1px solid #c9bca8;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.practice-book-card>span{padding:3px 7px;color:var(--cinnabar-deep);background:#a33a3217;border:1px solid rgb(163 58 50 / 28%);font-size:.7rem;letter-spacing:.08em}.practice-book-card strong{font-family:STKaiti,KaiTi,serif;font-size:1.2rem;font-weight:500}.practice-book-card small{color:var(--ink-soft);font-size:.76rem}.practice-book-card:hover,.practice-book-card:focus-visible,.practice-book-card[aria-pressed=true]{background:#fffaf0;border-color:var(--cinnabar);box-shadow:inset 3px 0 0 var(--cinnabar);outline:none}.paragraph-panel label{display:block;margin:8px 0 10px;font-family:STKaiti,KaiTi,serif;font-size:1.35rem}.paragraph-panel textarea{display:block;width:100%;min-height:112px;resize:vertical;padding:16px 18px;color:var(--ink);background:#fffdf6b8;border:1px solid var(--line);border-radius:2px;outline:none;font-family:STKaiti,KaiTi,serif;font-size:1.28rem;line-height:1.7}.paragraph-panel textarea:focus,.single-search:focus-within{border-color:var(--cinnabar);box-shadow:0 3px #a33a321f}.paragraph-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px}.paragraph-actions p{margin:0}.secondary-button{flex:none;padding:10px 16px;color:var(--cinnabar-deep);background:transparent;border:1px solid rgb(163 58 50 / 55%)}.secondary-button:hover,.secondary-button:focus-visible{color:#fff8ed;background:var(--cinnabar)}.character-tray{padding:24px 26px 26px;background:#e9e0cf;border-block:1px solid #cfc1ad}.tray-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:16px}.tray-heading h2{margin:4px 0 0;font-size:1.65rem}.tray-heading>p{margin:0 0 4px;text-align:right}.tray-heading strong{color:var(--cinnabar-deep);font-family:Georgia,serif;font-size:1.3rem}.character-list{display:flex;flex-wrap:wrap;align-content:flex-start;position:relative;gap:var(--character-gap);max-block-size:calc((var(--character-chip-size) * 2) + var(--character-gap));overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-color:var(--cinnabar) #d5c9b7;scrollbar-width:thin}.character-list::-webkit-scrollbar{width:7px}.character-list::-webkit-scrollbar-track{background:#d5c9b7}.character-list::-webkit-scrollbar-thumb{background:var(--cinnabar)}.character-chip{display:grid;place-items:center;width:var(--character-chip-size);height:var(--character-chip-size);padding:0;color:var(--ink);background:#fffdf6b8;border:1px solid #c7baa7;border-radius:2px;font-family:STKaiti,KaiTi,serif;font-size:1.45rem;transition:border-color .15s ease,color .15s ease,background-color .15s ease}.character-chip:hover,.character-chip:focus-visible{color:var(--cinnabar-deep);border-color:var(--cinnabar);outline:none}.character-chip[aria-pressed=true]{color:#fff8ed;background:var(--cinnabar);border-color:var(--cinnabar-deep);box-shadow:inset 0 0 0 2px #fff3}.status-line{min-height:26px;padding:12px 2px 0;color:var(--ink-soft);font-size:.88rem}.status-line[data-type=success]{color:var(--jade)}.status-line[data-type=error]{color:var(--cinnabar-deep)}.study-layout{display:grid;grid-template-columns:minmax(310px,.72fr) minmax(0,1.38fr);gap:clamp(28px,4vw,54px);padding-top:clamp(30px,4vw,48px)}.animation-panel{align-self:start;position:sticky;top:18px}.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.panel-heading h2{margin:5px 0 16px}.loop-label{display:flex;align-items:center;gap:7px;margin-bottom:20px;color:var(--jade);font-size:.78rem;letter-spacing:.05em}.loop-label>span{width:7px;height:7px;background:var(--jade);border-radius:50%;box-shadow:0 0 0 4px #385b501f;animation:breathe 1.8s ease-in-out infinite}@keyframes breathe{50%{opacity:.45;transform:scale(.82)}}.animation-board{aspect-ratio:1;position:relative;overflow:hidden;background:#fbf7ed;border:1px solid #bcae9a;box-shadow:inset 0 0 30px #4e37200d}.board-grid{position:absolute;inset:0;z-index:0;opacity:.72;background:linear-gradient(90deg,transparent calc(50% - .5px),rgb(163 58 50 / 26%) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),rgb(163 58 50 / 26%) 50%,transparent calc(50% + .5px)),linear-gradient(45deg,transparent calc(50% - .5px),rgb(163 58 50 / 16%) 50%,transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - .5px),rgb(163 58 50 / 16%) 50%,transparent calc(50% + .5px));pointer-events:none}.animation-stage{position:absolute;inset:5%;z-index:1;display:grid;place-items:center}.animation-stage>svg{display:block;width:100%;height:100%}.corner-mark{position:absolute;z-index:2;width:24px;height:24px;border-color:var(--cinnabar);pointer-events:none}.corner-mark-top{top:10px;left:10px;border-top:2px solid;border-left:2px solid}.corner-mark-bottom{right:10px;bottom:10px;border-right:2px solid;border-bottom:2px solid}.stage-placeholder,.stage-error{display:grid;justify-items:center;gap:12px;color:var(--ink-soft);text-align:center}.stage-placeholder span{width:22px;height:22px;border:2px solid #cbbfac;border-top-color:var(--cinnabar);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.stage-placeholder p,.stage-error p{margin:0}.stage-error strong{color:#c7baa8;font-family:STKaiti,KaiTi,serif;font-size:clamp(5rem,16vw,10rem);font-weight:400}.animation-meta{display:grid;grid-template-columns:1fr auto;grid-template-areas:"glyph total" "navigation navigation";gap:14px 24px;padding-top:18px}.current-glyph-block{grid-area:glyph}.stroke-total{grid-area:total;text-align:right}.current-glyph-block span,.stroke-total span{display:block;margin-bottom:3px;color:var(--ink-soft);font-size:.76rem;letter-spacing:.08em}.current-glyph-block strong{color:var(--cinnabar-deep);font-family:STKaiti,KaiTi,serif;font-size:2.2rem;font-weight:500}.stroke-total strong{font-family:Georgia,serif;font-size:2.3rem;font-weight:400}.stroke-total small{margin-left:3px;color:var(--ink-soft)}.character-navigation{grid-area:navigation;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:8px}.replay-button,.character-navigation-button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px 18px;white-space:nowrap}.replay-button{color:#f8f1e6;background:var(--ink)}.character-navigation-button{color:var(--ink);background:transparent;border:1px solid #bcae9a;font-size:.84rem}.replay-button:hover:not(:disabled),.replay-button:focus-visible:not(:disabled){background:var(--cinnabar-deep)}.character-navigation-button:hover:not(:disabled),.character-navigation-button:focus-visible:not(:disabled){color:#fff8ed;background:var(--cinnabar);border-color:var(--cinnabar-deep)}.replay-button:disabled,.character-navigation-button:disabled{color:#a9a094;background:#ded6c8;border-color:#d2c8ba}.replay-icon,.navigation-arrow{font-family:Georgia,serif;font-size:1.25rem;line-height:1}.stroke-panel{min-width:0}.stroke-heading{padding-bottom:15px;border-bottom:1px solid var(--line)}.stroke-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px 16px;margin-bottom:17px;color:var(--ink-soft);font-size:.78rem}.stroke-legend span{display:flex;align-items:center;gap:6px}.stroke-legend i{width:16px;height:4px}.legend-ink{background:var(--ink)}.legend-cinnabar{background:var(--cinnabar)}.stroke-explainer{margin:12px 0 20px}.stroke-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(12px,2vw,20px)}.stroke-card{margin:0;background:#fffdf78a;border:1px solid #d4c8b7;transition:transform .16s ease,border-color .16s ease}.stroke-card:hover{border-color:#b8a790;transform:translateY(-2px)}.stroke-visual{aspect-ratio:1;padding:8px;background:#faf6ec;border-bottom:1px solid #ddd2c2}.cumulative-hanzi{display:block;width:100%;height:100%}.practice-grid{fill:none;stroke:#a33a3236;stroke-width:5;stroke-dasharray:18 13}.practice-grid rect{stroke-dasharray:none}.stroke-previous,.stroke-current{stroke:none}.stroke-previous{fill:var(--ink)}.stroke-current{fill:var(--cinnabar)}.stroke-card figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 12px}.stroke-card figcaption strong{font-family:STKaiti,KaiTi,serif;font-size:1rem;font-weight:500}.stroke-card figcaption span{color:var(--ink-soft);font-size:.68rem}.steps-placeholder{grid-column:1 / -1;margin:0;padding:40px 20px;color:var(--ink-soft);border:1px dashed var(--line);text-align:center}footer{display:flex;justify-content:space-between;gap:24px;margin-top:clamp(46px,7vw,80px);padding-top:20px;color:var(--ink-soft);border-top:1px solid var(--line);font-size:.78rem}footer p{margin:0}@media(max-width:980px){.input-deck{grid-template-columns:1fr}.single-search-panel{padding-right:0;padding-bottom:32px;border-right:0;border-bottom:1px solid var(--line)}.study-layout{grid-template-columns:1fr}.animation-panel{position:static;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(230px,.55fr);grid-template-areas:"heading heading" "board meta";gap:0 24px}.animation-panel>.panel-heading{grid-area:heading}.animation-board{grid-area:board}.animation-meta{grid-area:meta;align-content:center}}@media(max-width:680px){:root{--character-chip-size: 2.75rem;--character-gap: .45rem}.site-shell{width:100%;margin:0;padding:22px 20px 34px;border-block:0}.site-shell:before,.site-shell:after{display:none}.masthead{align-items:flex-start;flex-direction:column;gap:16px}.brand-seal{width:48px;height:48px;font-size:27px}.masthead-intro{text-align:left}.input-deck{padding:34px 0}.single-search{flex-wrap:wrap;border-bottom:0}.single-search input{flex-basis:100%;border-bottom:2px solid var(--ink)}.primary-button{width:100%;justify-content:center;padding:11px 16px}.practice-book-heading{align-items:flex-start;flex-direction:column;gap:3px}.practice-book-card{grid-template-columns:auto 1fr}.practice-book-card small{grid-column:1 / -1}.paragraph-actions,.tray-heading,.stroke-heading,footer{align-items:flex-start;flex-direction:column}.secondary-button{width:100%}.character-tray{margin-inline:-20px;padding-inline:20px}.tray-heading>p{text-align:left}.animation-panel{display:block}.animation-board{max-width:470px;margin-inline:auto}.stroke-legend{justify-content:flex-start;margin-bottom:0}.stroke-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.replay-button,.character-navigation-button{padding-inline:8px;font-size:.78rem}}@media(max-width:390px){.stroke-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}