*{box-sizing:border-box} :root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#243e49;background:#f7fcf6;font-synthesis:none;--teal:#148b91;--ink:#243e49}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.48}button:focus-visible,a:focus-visible{outline:3px solid #08798d;outline-offset:4px}button{border:1.5px solid #bdcfd5;border-radius:10px;background:#fff;padding:9px 15px;min-height:44px}button:hover:not(:disabled){filter:brightness(.97)}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:#ffffffdf;position:relative;z-index:30;border-bottom:1px solid #dfe9e9}.navigation,.tool-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.navigation a{font-size:14px;color:#436374;text-decoration:none;white-space:nowrap;padding-right:8px}.tool-actions button{font-size:14px;padding:7px 12px;background:transparent;border-color:transparent;min-height:40px}.tool-actions button[aria-pressed=true]{background:#d1edf0;color:#006975;border-color:#88bec4}.mode-toggle{background:#e8f8ed;border-color:#91cda9;color:#20613b;font-weight:700}.race-heading{text-align:center;padding:16px 0 12px}.race-heading h1{margin:0;font-family:KaiTi,STKaiti,serif;color:#305531;font-size:clamp(32px,3.2vw,48px);line-height:1.1;letter-spacing:4px}.race-heading h1 span{color:#54783c;margin-left:12px}.race-heading p{margin:9px 0 0;font-size:15px;color:#5b7465}main{max-width:1920px;margin:auto}.race-course{position:relative;height:clamp(270px,33vh,380px);overflow:hidden;background:#a7cf83 url('../assets/lesson23/landscape.png') center 42%/cover;margin:0 24px;border-radius:16px 16px 3px 3px;isolation:isolate;border:1px solid #a4c793}.race-course:after{content:"";position:absolute;inset:28% 0 0;background:linear-gradient(#d7ebb22b,#c5e99960);z-index:-1}.start-label,.finish-label{position:absolute;top:12px;color:#405e3c;font-weight:700;background:#ffffffd6;border-radius:18px;padding:5px 15px;font-size:15px}.start-label{left:28px}.finish-label{right:22px}.finish-line{position:absolute;right:55px;top:48px;bottom:8px;width:16px;opacity:.7;background:repeating-conic-gradient(#fef9e6 0% 25%,#607959 0% 50%) 0/16px 16px}#lanes{position:absolute;inset:52px 22px 6px 22px}.lane{position:relative;height:25%;border-bottom:2px solid #f5f2d9a6}.lane:before{content:attr(data-lane);position:absolute;left:5px;bottom:8px;font-size:19px;font-weight:800;color:#48734588}.lane:last-child{border-bottom:0}.travel{position:absolute;inset:0 36px 0 40px}.runner{position:absolute;bottom:0;left:0;transition:left .5s ease,transform .5s ease;width:72px;height:72px;z-index:2}.animal{background-image:url('../assets/lesson23/animals.png');background-size:200% 200%;background-repeat:no-repeat;width:100%;height:100%;filter:drop-shadow(0 3px 1px #36552c22)}.animal[data-animal="0"]{background-position:0 0}.animal[data-animal="1"]{background-position:100% 0}.animal[data-animal="2"]{background-position:0 100%}.animal[data-animal="3"]{background-position:100% 100%}.runner.running .animal{animation:hop .2s ease-in-out 3 alternate}.runner .distance{position:absolute;left:-28px;bottom:5px;font-size:12px;background:#fffdf3ed;padding:2px 6px;border-radius:10px;color:#3d603d}.player-panels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px 24px 20px}.player{--accent:#df7194;--tint:#fff0f5;border:2px solid var(--accent);background:var(--tint);border-radius:15px;padding:10px 16px 12px;position:relative;overflow:hidden}.player[data-player="1"]{--accent:#5e9bd8;--tint:#eff7ff}.player[data-player="2"]{--accent:#39ada4;--tint:#eafaf4}.player[data-player="3"]{--accent:#d8ab40;--tint:#fff9e9}.player-title{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700;color:var(--ink)}.player-title .progress{font-size:14px;color:#5b6d75}.bond{position:relative;width:220px;height:130px;margin:7px auto}.bond svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.bond path{fill:none;stroke:#55616b;stroke-width:2.3}.number{display:flex;align-items:center;justify-content:center;width:49px;height:45px;background:#fffaf0;border:2px solid #647580;font-size:29px;line-height:1;font-weight:600;position:absolute;border-radius:8px;padding:0;min-height:0}.whole{left:50%;top:0;transform:translateX(-50%);border-radius:50%;width:54px;height:54px;background:#fff8d7}.part{bottom:0}.part.left{left:13%}.part.right{right:13%}.number.missing{background:white;border-color:var(--accent,#209faa);border-width:2.5px}.number.missing:empty:after{content:"?";color:#a0aeb1;font-weight:400}.number.missing.active{box-shadow:0 0 0 4px #1a98ad25;background:#effcff}.number.wrong{border-color:#c45d50;background:#fff0ed}.player-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.player-keypad button{font-size:23px;min-height:43px;padding:3px 4px;border:1px solid #c4ced2;border-bottom-width:3px;background:#ffffffd9;user-select:none}.player-keypad button[data-key=clear]{font-size:16px}.player-keypad button[data-key=submit]{font-size:17px;background:var(--accent);color:#fff;border-color:transparent;font-weight:700}.player-feedback{margin:8px 0 0;text-align:center;font-size:13px;min-height:20px;color:#547069}.player-feedback.error{color:#a44631}.score-pop{position:absolute;top:55px;right:18px;color:#38884a;font-size:34px;font-weight:800;pointer-events:none;animation:score-pop .6s ease both}.practice-heading{height:112px;display:flex;align-items:center;justify-content:center;gap:18px}.practice-heading h1{font:700 52px KaiTi,STKaiti,serif;letter-spacing:8px;margin:0;color:#263e50}.practice-heading>span{font-size:42px;color:#659a54}.practice-heading>span:last-child{color:#ec7a89}body[data-mode=practice]{background:#f0f2ff}.practice-layout{padding:0 28px 24px;display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:30px}.choice-row{display:flex;align-items:center;gap:18px;margin-bottom:14px}.choice-label{font-size:16px;white-space:nowrap;color:#5a6983}.total-choices{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;flex:1;padding:5px;background:#e3e8fb;border-radius:14px;border:1px solid #c2cde4}.total-choices button{font-family:Georgia,serif;font-size:27px;background:transparent;border-color:transparent;padding:6px;min-width:0}.total-choices button[aria-pressed=true]{background:#27b3c1;color:white;border-color:#168b9a;box-shadow:0 2px 0 #168b9a}.type-choices{display:flex;gap:12px;margin-bottom:23px}.type-choices button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;font-size:18px;background:#f8f9ff;border-color:#c4cee1;padding:7px}.type-choices button[aria-pressed=true]{border:2px solid #246884;background:#d4f0ff;box-shadow:inset 0 0 0 2px #fff}.type-choices svg{width:30px;height:30px}.split-workspace{position:relative;background:#ffffff36;border:1px solid #c3cde4;border-radius:20px;padding:23px 16px 16px;margin-top:30px}.activity-label{font-family:KaiTi,STKaiti,serif;font-size:26px;line-height:1;margin:0;color:white;background:#ea707e;border:2px solid #fff;border-radius:16px;padding:10px 22px;display:inline-block;box-shadow:0 0 0 1px #dd6d7a}.split-workspace .activity-label{position:absolute;top:-24px;left:22px}.drag-hint{font-size:14px;color:#5e7190;margin:5px 0 17px}.buckets{display:grid;grid-template-columns:1fr 1fr;gap:18px}.bucket{border:2px dashed #8b9ab6;border-radius:14px;min-height:340px;position:relative;display:flex;align-items:center;justify-content:center;padding:32px 12px 22px;transition:background .15s,border-color .15s}.bucket.drop-target{background:#dcf3f8;border-color:#148b91}.bucket-label{position:absolute;left:14px;top:9px;font-size:14px;color:#6b7d97}.token-area{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:13px;max-width:330px;width:100%}.token{width:62px;height:65px;min-height:0;background:none;border:0;padding:2px;cursor:grab;touch-action:none;user-select:none;border-radius:12px}.token svg{display:block;width:100%;height:100%;pointer-events:none}.token:hover{background:#fff8}.token.dragging{opacity:.15}.drag-ghost{position:fixed;width:66px;height:66px;z-index:60;pointer-events:none;filter:drop-shadow(0 7px 3px #31445830)}.drag-ghost svg{width:100%;height:100%}.practice-answer{padding-top:6px;text-align:center}.practice-answer>p:first-of-type{font-size:14px;color:#667791;margin:15px 0 0}.practice-bond{width:240px;height:148px;margin:13px auto 18px}.practice-bond .number{width:58px;height:53px;font-size:32px}.practice-bond .whole{width:62px;height:62px}.practice-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.practice-keypad button{font-size:24px;min-height:46px;background:#ffffffbc;border-bottom-width:3px;padding:5px}.practice-keypad button[data-key=clear]{font-size:17px}.record-button{margin-top:12px;width:100%;font-size:19px;background:#168f94;border-color:#087f82;color:white;font-weight:700;min-height:50px}.practice-feedback{line-height:1.6;font-size:15px;min-height:50px;margin:10px 0;color:#5d7290}.practice-feedback.success{color:#23784d}.practice-feedback.error{color:#a34638}.records-button{background:transparent;border-color:transparent;color:#3d648a;font-size:15px}.records-button span{display:inline-block;padding:0 7px;border-radius:15px;background:#dbe6f8}.practice-records{margin:0 28px 28px;padding:20px 24px;background:#fff9;border-top:2px solid #c3d0e8;border-radius:14px}.practice-records h2{font-size:20px;margin:0 0 8px}.practice-records p{font-size:14px;color:#647491}.record-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0;border-top:1px solid #d7dfed}.record-row strong{font-size:21px}.record-row svg{width:28px;height:28px}.record-row small{color:#567491}.record-row button{margin-left:auto;font-size:14px;min-height:38px}.empty-records{padding:20px 0;color:#738098}#annotation-layer{position:fixed;inset:0;width:100%;height:100%;z-index:25;pointer-events:none;touch-action:none}#annotation-layer.enabled{pointer-events:auto;cursor:crosshair}#annotation-layer path{stroke:#dd4e57;stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round}#pen-hint{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);background:#25434aec;color:white;padding:9px 18px;border-radius:25px;z-index:26;white-space:nowrap;pointer-events:none;font-size:14px}#toast{position:fixed;left:50%;top:90px;transform:translateX(-50%);background:#25434af2;color:white;border-radius:12px;padding:14px 24px;z-index:100;box-shadow:0 5px 25px #30495022;text-align:center;max-width:85vw}dialog{color:var(--ink);border:1px solid #bcd5df;border-radius:25px;padding:32px 36px;box-shadow:0 18px 90px #233f5055;max-width:min(560px,92vw);background:#f7fdff}dialog::backdrop{background:#203c5460;backdrop-filter:blur(2px)}dialog h2{font-size:28px;margin:10px 0 18px}dialog p,dialog li{font-size:17px;line-height:1.8}dialog ol{padding-left:25px}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:28px}.dialog-done{background:var(--teal);color:white;border:0;display:block;margin:22px auto 0;min-width:140px}#winner-dialog{text-align:center;width:440px;padding-top:14px}#winner-animal{width:165px;height:165px;margin:auto}#winner-dialog .winner-overline{font-size:15px;color:#588674;letter-spacing:3px;margin:0}#winner-title{color:#22737b;margin:12px 0}#winner-dialog>p:last-of-type{font-size:15px;margin:0 0 23px}#replay-button{background:#23a3a5;color:white;border-color:#168c95;font-size:21px;font-weight:700;padding:13px 38px;display:block;margin:auto}#winner-practice{display:block;margin:12px auto 0;font-size:14px;border:0;background:transparent}.celebrate .animal{animation:hop .6s ease infinite alternate}@keyframes hop{to{transform:translateY(-8px) rotate(3deg)}}@keyframes score-pop{0%{opacity:0;transform:translateY(12px)}40%{opacity:1}100%{opacity:0;transform:translateY(-25px)}}@media(min-width:1700px){.runner{width:85px;height:85px}.player{padding:12px 26px}.player-keypad button{min-height:50px}.bond{height:142px}.token{width:75px;height:78px}.token-area{max-width:420px}.bucket{min-height:410px}.practice-layout{grid-template-columns:minmax(0,1fr) 360px}.practice-keypad button{min-height:56px}.practice-heading{height:138px}}@media(max-width:1100px){.toolbar{padding:9px 14px;gap:8px}.tool-actions{gap:0}.tool-actions button{padding:6px 8px;font-size:13px}.navigation a{font-size:12px}.mode-toggle{font-size:14px;padding:8px}.player-panels{padding:12px 14px;gap:8px}.player{padding:10px 9px}.player-title{font-size:14px}.bond{width:185px}.race-course{margin:0 14px}.practice-layout{padding:0 16px 20px;gap:20px;grid-template-columns:minmax(0,1fr) 265px}.choice-row{gap:10px}.choice-label{display:none}.token{width:52px;height:55px}.token-area{gap:8px}.bucket{min-height:340px;padding-left:6px;padding-right:6px}.type-choices{gap:6px}.type-choices button{font-size:15px;gap:4px}.type-choices svg{width:25px;height:25px}.buckets{gap:12px}.practice-bond{width:220px}.practice-keypad button{min-height:44px}}@media(max-width:760px){.toolbar{flex-wrap:wrap;justify-content:center}.navigation{width:100%;justify-content:space-between}.tool-actions{width:100%;justify-content:space-between}.tool-actions button{font-size:12px;padding:4px 6px;min-height:36px}.race-heading{padding:15px 10px 12px}.race-heading h1{font-size:30px;letter-spacing:1px}.race-heading h1 span{margin-left:5px}.race-heading p{font-size:12px}.race-course{height:265px;margin:0 10px}.runner{width:58px;height:58px}.runner .distance{font-size:10px;left:-24px}.player-panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 10px}.player{padding:9px}.player-title{font-size:14px}.bond{width:160px;height:119px}.number{width:43px;height:42px;font-size:26px}.whole{width:48px;height:48px}.player-keypad button{min-height:46px;font-size:22px}.player-keypad button[data-key=clear],.player-keypad button[data-key=submit]{font-size:15px}.player-feedback{font-size:12px}.practice-heading{height:91px}.practice-heading h1{font-size:40px}.practice-layout{grid-template-columns:1fr;gap:20px;padding:0 12px 20px}.total-choices{gap:2px}.total-choices button{font-size:23px;padding:5px 2px;min-height:46px}.type-choices{margin-bottom:35px}.type-choices button{font-size:14px;flex-direction:column;padding:6px 3px;gap:3px}.split-workspace{padding:24px 9px 9px}.bucket{min-height:240px;padding-top:35px}.buckets{gap:10px}.token{width:47px;height:50px}.token-area{gap:5px}.drag-hint{font-size:12px;margin-bottom:12px}.practice-answer{max-width:390px;justify-self:center;width:100%;padding:8px 15px}.practice-keypad button{min-height:49px}.practice-records{margin:0 12px 20px;padding:16px}.practice-feedback{min-height:0}.record-row strong{font-size:18px}.start-label,.finish-label{font-size:12px}.start-label{left:16px}.finish-label{right:14px}.finish-line{right:30px}.travel{left:25px;right:12px}#lanes{left:10px;right:12px}.player-title .progress{font-size:12px}#pen-hint{font-size:11px;width:90%;white-space:normal;text-align:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}}
/* The generated atlas intentionally has wide transparent gutters. */
.runner .animal{position:absolute;left:-50%;top:-54%;width:200%;height:200%}
.winner-portrait{width:180px;height:170px;position:relative;margin:0 auto 6px}
#winner-animal{position:absolute;width:360px;height:360px;left:-90px;top:-98px}
body{min-height:100vh}.token-area{max-width:245px}
@media(min-width:1700px){.token-area{max-width:280px}}
@media(min-width:761px) and (max-height:900px){.race-heading{padding:10px 0 9px}.race-heading h1{font-size:36px}.race-heading p{margin-top:5px;font-size:13px}.race-course{height:230px}.runner{width:56px;height:56px}#lanes{top:42px}.finish-line{top:42px}.player-panels{padding-top:10px;gap:10px}.player{padding-top:8px;padding-bottom:7px}.bond{height:115px;margin:5px auto}.player-keypad{gap:5px}.player-keypad button{min-height:42px}.player-feedback{margin-top:6px}.practice-heading{height:85px}.bucket{min-height:310px}}
.player-keypad button{touch-action:none}
.practice-bond{width:240px;height:148px}
.activity-label{background:#d95569}
.practice-answer>p:first-of-type{color:#596982}
.dialog-done{background:#117c82}
#winner-dialog .winner-overline{color:#477263}
.player{--button:#ae3f67}.player[data-player="1"]{--button:#306fa4}.player[data-player="2"]{--button:#107e70}.player[data-player="3"]{--button:#8c6109}
.player-keypad button[data-key=submit]{background:var(--button)}
#winner-dialog::backdrop{background:#eaf4f726;backdrop-filter:none}
#pen-button{touch-action:none}