*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#30281f;font-family:"PingFang SC","Microsoft YaHei",sans-serif}body{display:flex;align-items:center;justify-content:center}button{font:inherit;cursor:pointer;color:#174f48;border:0;background:none;padding:0}button:focus-visible{outline:none}button:focus-visible::after{content:"";position:absolute;inset:0;background:url("assets/selection-corners-v005.webp") center/100% 100% no-repeat;pointer-events:none;z-index:2}button:disabled{cursor:default}#stage{position:relative;width:1672px;height:941px;flex-shrink:0;overflow:hidden;transform-origin:center;isolation:isolate}#background,#cover>img{position:absolute;inset:0;width:100%;height:100%}[hidden]{display:none!important}.hot{position:absolute;z-index:4;background:transparent}.hot:disabled{pointer-events:none}#wholebox{left:472px;top:512px;width:737px;height:390px}#featherbox{left:844px;top:550px;width:289px;height:139px;z-index:5}#bluebox{left:508px;top:694px;width:320px;height:114px;z-index:5}#leftboard{left:20px;top:548px;width:454px;height:231px}#rightboard{left:1190px;top:546px;width:458px;height:239px}
#instruction{position:absolute;left:414px;top:24px;width:843px;height:75px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:32px;font-weight:650;line-height:1.35;color:#58301d;z-index:6}.label{position:absolute;text-align:center;color:#5a3520;font-size:25px;font-weight:650;z-index:3}.badge{position:absolute;text-align:center;font-size:35px;font-weight:700;color:#15574d;z-index:6;pointer-events:none}.feather{position:absolute;border:0;padding:0;background:transparent;z-index:7;touch-action:none}.feather img{width:100%;height:100%;object-fit:contain;pointer-events:none}.feather.chosen{filter:drop-shadow(0 0 8px #eaae34) drop-shadow(0 0 3px #fff1ac)}.feather:disabled{pointer-events:none}.focus-region{background:url("assets/selection-corners-v005.webp") center/100% 100% no-repeat}#choices{position:absolute;left:542px;top:860px;display:flex;gap:12px;z-index:12}.skin-button{position:relative;isolation:isolate;overflow:hidden;width:246px;height:88px;display:inline-flex;align-items:center;justify-content:center;color:#fff8e6;font-size:26px;font-weight:650}.sprite{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}.sprite img{position:absolute;max-width:none}.skin-button[data-state=selected]{color:#15574d}.skin-button:disabled{color:#e5e7df}#choices .skin-button{width:115px;height:58px;font-size:35px}#feedback{position:absolute;left:410px;top:113px;width:858px;text-align:center;font-size:27px;font-weight:600;color:#733916;z-index:9}#movie{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#211a13;z-index:15}#caption{position:absolute;left:280px;bottom:60px;width:1112px;text-align:center;color:white;text-shadow:0 2px 5px #000;font-size:36px;font-weight:600;z-index:16}#mediaRetry{position:absolute;left:710px;top:690px;z-index:35}
#cover{position:absolute;inset:0;z-index:20}#start{position:absolute;left:563px;top:784px;width:550px;height:136px;background:transparent}#cover p{position:absolute;right:24px;bottom:7px;color:#fff8e9;text-shadow:0 1px 4px #382211;font-size:21px}#tools{position:absolute;left:30px;top:831px;width:365px;height:80px;font-size:29px;font-weight:650;z-index:30;color:#235951}#cover:not([hidden])~#tools{left:25px;top:835px;width:300px}#panel{position:absolute;left:18px;bottom:22px;width:510px;height:850px;z-index:50;overflow:hidden}.panel-skin{position:absolute;inset:0;background:#f6ead5 url('assets/plate-v002.webp') 8% 72%/420% 200%;border:13px solid transparent;border-image:url('assets/plate-v002.webp') 560 1200 150 10 stretch}.panel-content{position:absolute;inset:26px 29px;overflow:auto;scrollbar-width:thin}.panel-content h2{font-size:28px;margin:4px 0 12px;color:#5e3423}.panel-content>.skin-button{width:218px;height:68px;font-size:21px;margin:2px}.panel-content p{font-size:21px;line-height:1.4;color:#563b29;margin:10px 8px}#navigation h3{font-size:22px;margin:18px 8px 4px;color:#69432d}#navigation .skin-button{width:430px;height:62px;margin:2px;font-size:22px}#navigation button[aria-current]{color:#14564c}#paused,#demo{position:absolute;right:24px;top:125px;z-index:45;color:#6f4027;font-size:24px;font-weight:650;text-shadow:0 1px 2px #fff}#paused{top:165px}

.panel-skin{background:none;border:0;isolation:isolate}.panel-skin>.sprite{z-index:0}

#tools{left:19px;top:826px;width:401px;height:93px}.panel-content{inset:34px 44px}#navigation .skin-button{width:395px;height:76px}.panel-content>.skin-button{width:195px;height:72px}#choices .skin-button{height:65px}

/* Restore the approved teacher panel geometry, using the extracted image skin. */
#panel{left:0;top:55px;bottom:auto;width:635px;height:795px;overflow:visible}.panel-content{inset:0;overflow:visible}.panel-content h2{position:absolute;left:104px;top:13px;width:330px;height:67px;text-align:center;font-family:STKaiti,KaiTi,serif;font-size:42px;line-height:67px;margin:0;color:#572713}.panel-content>.skin-button{position:absolute;margin:0;height:63px;font-family:STKaiti,KaiTi,serif;font-size:23px;color:#582a18;overflow:visible;justify-content:flex-end;padding-right:12px;white-space:nowrap}.panel-content>.skin-button>.sprite{display:none}.panel-content>.skin-button:active{filter:brightness(.88)}.panel-content>.skin-button:disabled{color:#9b8674}.panel-content #close{left:449px;top:23px;width:124px;height:48px;justify-content:center;padding:0;font-size:25px}.panel-content #pause{left:45px;top:101px;width:157px;padding-right:24px}.panel-content #mute{left:210px;top:101px;width:196px;padding-right:10px;font-size:21px}.panel-content #replay{left:413px;top:101px;width:182px;padding-right:13px;font-size:21px}.panel-content #current{position:absolute;left:45px;top:179px;width:550px;height:45px;margin:0;display:flex;justify-content:center;align-items:center;font-family:STKaiti,KaiTi,serif;font-size:25px;white-space:nowrap;color:#5a2a17}#progressTitle{position:absolute;left:84px;top:227px;font-family:STKaiti,KaiTi,serif;font-size:26px;color:#fff6dd;margin:0;line-height:43px}#nav-bed{position:absolute;left:48px;top:280px;width:513px;height:484px;isolation:isolate}#nav-bed>.sprite{z-index:0}#navigation{position:absolute;left:49px;top:280px;width:550px;height:483px;overflow-y:auto;overflow-x:hidden;padding-right:35px;scrollbar-width:thin;scrollbar-color:#e7ac58 transparent}#navigation .nav-row{position:relative;isolation:isolate;display:block;width:507px;height:42px;margin:0 0 2px;font-family:STKaiti,KaiTi,serif;color:#572a17;text-align:left;overflow:hidden}.nav-index{position:absolute;left:10px;top:0;width:46px;line-height:42px;text-align:center;font-family:Georgia,serif;font-size:28px;color:#135d53}.nav-title{position:absolute;left:79px;top:0;line-height:42px;font-size:25px;font-weight:600;white-space:nowrap}#navigation .nav-row[aria-current]{color:#003e34}#navigation .nav-row[aria-current] .nav-index{color:#fff}#navigation .nav-row[data-pressed]{filter:brightness(.9)}#tools,#cover:not([hidden])~#tools{left:30px;top:835px;width:253px;height:79px;font-family:STKaiti,KaiTi,serif;font-size:28px;padding-left:58px;color:#572a17}#panel .skin-button .sprite{display:none}

#tools,#cover:not([hidden])~#tools{left:19px;top:826px;width:401px;height:93px;padding-left:0}.label{font-size:22px;line-height:26px}

#panel #replayReason{position:absolute;left:411px;top:164px;width:186px;height:16px;margin:0;font-size:13px;line-height:16px;text-align:center;color:#735338}

#panel .panel-skin{height:780px}

#pinebox{left:520px;top:550px;width:290px;height:139px;z-index:5}#leafbox{left:844px;top:700px;width:299px;height:117px;z-index:5}#math{position:absolute;left:585px;top:111px;width:500px;text-align:center;font-size:30px;color:#573921;z-index:10}.nav-group{margin:10px 0 6px;font-size:22px;color:#5a2a17}#caption{background:linear-gradient(transparent,rgba(0,0,0,.38));padding:18px;border-radius:12px}#instruction{font-size:30px}#demo{background:#fff7df;padding:5px 12px;border-radius:12px}#stage[data-stage="done"] #instruction{font-size:33px}

#end-scene{position:absolute;inset:0}#end-scene img{width:100%;height:100%}#stage[data-stage="done"] #tools{left:31px;top:822px;width:253px;height:88px;color:transparent}#stage[data-stage="done"] #tools .sprite{display:none}

/* v005: same-source image plaques, separated guidance, image-based focus and summary. */
.label,.badge{height:58px;display:flex;align-items:center;justify-content:center;isolation:isolate;pointer-events:none;color:#49311e;font-size:31px;font-weight:750;line-height:1;z-index:9}
.badge{width:242px;gap:22px;padding:0 35px}.badge-value{min-width:28px;font-size:38px;color:#15574d}.label{font-size:30px}
#instruction{top:18px;height:66px;line-height:1.25;font-size:29px}
#feedback,#math{left:419px;top:82px;width:835px;height:30px;line-height:30px;font-size:23px;color:#7c411b;z-index:10}
#choices{left:536px;top:865px;gap:14px}#choices .skin-button{width:140px;height:65px;font-size:37px}
.hot:focus-visible::after{inset:-3px}.feather:focus-visible::after{inset:-12px}
#summary-card{position:absolute;left:246px;top:143px;width:1180px;height:682px;z-index:19;pointer-events:none}
#summary-card>img{position:absolute;inset:0;width:100%;height:100%}.summary-content{position:absolute;inset:55px 80px;color:#533723;text-align:center}.summary-content h1{font-size:51px;color:#216e61;margin:12px 0 40px}.summary-steps{display:flex;justify-content:space-between;gap:20px}.summary-steps p{margin:0;flex:1;font-size:30px}.summary-steps b{display:block;font-size:35px;margin-bottom:20px;color:#23665b}.summary-steps span{font-size:28px}.zero-rule{display:flex;gap:45px;justify-content:center;align-items:center;margin-top:20px}.zero-rule strong{font-size:150px;font-weight:700;color:#1b7668;line-height:1.3}.zero-rule p{font-size:36px;line-height:1.7;text-align:left;margin:0}.zero-rule b{color:#b45b24}.summary-foot{font-size:27px;margin:18px 0 0}.hot:disabled.focus-region{pointer-events:none}
#stage[data-stage="summary"] #instruction{font-size:29px}

/* User's three follow-up fixes: compact teacher entry, native plaque ratio, readable text. */
#table-patch{position:absolute;left:0;top:802px;width:455px;height:139px;background:url("assets/table-patch-v005.webp") 0 -802px/1672px 941px no-repeat;z-index:0;pointer-events:none}
#tools,#cover:not([hidden])~#tools{left:28px;top:846px;width:275px;height:65px;font-size:27px}
.label{height:115px;font-size:32px}.board-name-skin{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-1;pointer-events:none}
#instruction{left:418px;top:8px;width:836px;height:100px;font-size:42px;line-height:1.12;white-space:pre-line;font-weight:750}
#feedback,#math{left:467px;top:118px;width:738px;height:56px;line-height:56px;font-size:28px;background:url("assets/board-nameplate-v005.webp") center/100% 100% no-repeat}
#feedback:empty{display:none}#stage[data-stage="summary"] #instruction{font-size:42px}

/* Guidance shares the large top sign, one message at a time. */
#feedback,#math{display:none!important}


/* v008: complete generated scene plates; fixed native composition, no camera. */
#camera-viewport{position:absolute;inset:0;width:1672px;height:941px;overflow:hidden;z-index:1}
#world{position:absolute;inset:0;width:1672px;height:941px;transform:none!important}
#instruction,#stage[data-stage="summary"] #instruction{left:300px;top:65px;width:1072px;height:112px;font-size:48px;line-height:1.2;white-space:nowrap}
#caption{font-size:44px;white-space:nowrap}
#numbers .badge{padding:0;gap:15px;font-size:32px;line-height:1}
#numbers .badge-value{min-width:0;font-size:38px}
#numbers .badge-value:empty{display:none}
#world .label{font-size:30px;line-height:1}
#world .focus-region{background:none}
#summary-card{top:225px;transform:scale(.86);transform-origin:top center}

/* v009: real object hit areas and program-generated mathematical notation. */
.count-object{position:absolute;z-index:9;touch-action:manipulation}.count-object.counted,.count-object.count-next{background:url("assets/selection-corners-v005.webp") center/100% 100% no-repeat}.count-object.count-next{opacity:.72}.count-mark{position:absolute;right:-24px;top:-22px;font-size:55px;font-weight:800;color:#174f48;text-shadow:2px 2px 0 #fff8df,-2px -2px 0 #fff8df;line-height:1}#zero-model{position:absolute;left:708px;top:522px;width:250px;height:99px;font-size:88px;font-weight:800;line-height:99px;text-align:center;color:#fff6da;z-index:9;isolation:isolate;pointer-events:none}#stage[data-stage="pine-count"] #instruction,#stage[data-stage="feather-count"] #instruction{font-size:44px}

/* v011: the existing plaque shows one numeral only. */
.badge{gap:0}.badge .badge-value{font-size:48px}

/* v014: full-scene media below the unique object and interaction layers. */
#movie.character-scene,#guide{position:absolute;inset:0;width:1672px;height:941px;object-fit:fill;background:transparent;z-index:0;pointer-events:none}
#background{z-index:0}#pines{position:absolute;inset:0;pointer-events:none;z-index:6}#pines img{position:absolute;object-fit:contain}
#stage[data-unified="true"] #zero-model{top:668px}
#stage[data-unified="true"] #instruction{top:57px;height:111px}

/* v015: picture quantity exercises use existing tray and image skins. */
#practice-objects{position:absolute;inset:0;z-index:6;pointer-events:none}#practice-objects img{position:absolute;object-fit:contain}#practice-progress{position:absolute;left:700px;top:350px;width:272px;height:60px;text-align:center;line-height:60px;font-size:29px;font-weight:650;color:#1b655b;z-index:9}#stage[data-scene="practice"] #choices{left:381px;top:740px}#stage[data-scene="practice"] #choices .skin-button{width:140px;height:80px;font-size:42px}

/* v016: opening video has its own lower title plaque. */
#stage[data-stage="welcome"] #instruction{top:260px;height:112px}
