@font-face{font-family:Rounded;src:url('../assets/fonts/rounded-smile/HakgyoansimDunggeunmisoTTF-B.woff2?v=9bca4dca118f') format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:Rounded;src:url('../assets/fonts/rounded-smile/HakgyoansimDunggeunmisoTTF-R.woff2?v=9bca4dca118f') format('woff2');font-display:swap}
#device-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.device-label{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid #d0d3da80;border-radius:7px;padding:7px 12px;background:#343b4bef;color:#f3f2ec;font-size:15px;line-height:1.1;box-shadow:0 3px 0 #25273270}.device-label::after{content:'';position:absolute;left:calc(50% - 4px);bottom:-5px;width:8px;height:8px;background:inherit;border-right:1px solid #d0d3da80;border-bottom:1px solid #d0d3da80;transform:rotate(45deg)}.device-label::before{content:'';width:6px;height:6px;border:1px solid #acb7c7;border-radius:50%;flex:none}.device-label.current{background:#ffe09a;color:#323746;border-color:#fff1c3;box-shadow:0 3px 0 #67513c80}.device-label.current::before{background:#755922;border-color:#755922}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#262735;font-family:Rounded,system-ui,sans-serif}canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #fff3b0;outline-offset:4px}[hidden]{display:none!important}#loading{position:absolute;inset:0;display:grid;place-items:center;color:#ede5d6;background:#262735}#action{position:absolute;transform:translate(-50%,0);white-space:nowrap;border:1px solid #fff2be90;border-radius:8px;padding:8px 13px;background:#ffdf89;color:#2c3041;box-shadow:0 3px 0 #4b3b3499;line-height:1.2;font-size:15px}#action kbd{font:inherit;font-size:12px;margin-right:8px;border:1px solid #80694388;border-radius:3px;padding:1px 4px}.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}

#progress{position:absolute;left:20px;top:20px;width:282px;border:1px solid #c8ccd64a;border-radius:12px;background:#303441f5;color:#f3eddb;box-shadow:0 4px 0 #11131c33;overflow:hidden}
#mission-toggle{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;border:0;color:inherit;background:none;text-align:left;font-size:16px}#count{margin-left:auto;color:#ffe09a;font-size:14px;font-variant-numeric:tabular-nums}.chevron{font-family:system-ui;transition:transform .15s}#mission-toggle[aria-expanded=false] .chevron{transform:rotate(180deg)}
.segments{display:flex;gap:5px;margin:0 16px 12px}.segments i{height:4px;flex:1;background:#646b7e;border-radius:2px}.segments i.filled{background:#ffdf89}
#mission-body{border-top:1px solid #ffffff19;padding:14px 16px}#mission-copy{margin:0;font-size:15px;line-height:1.65;color:#e2e4e9}#mission-samples{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}#mission-samples:empty{display:none}#mission-samples canvas{width:35px;height:40px;background:#535a68;border-radius:5px}
#label-dialog{padding:0;border:2px solid #566170;border-radius:18px;width:min(810px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;color:#303747;background:#e9e7dc;box-shadow:0 9px 0 #323845,0 28px 90px #10152199;font-family:Rounded,system-ui}#label-dialog::backdrop{background:#151a2bd1}
.device-shell{padding:22px}
#label-dialog header{display:flex;align-items:center;gap:14px;padding-bottom:18px}#label-title{font-size:25px;line-height:1.2;margin:0}#label-count{margin-left:auto;font-size:15px;color:#555d6e;font-variant-numeric:tabular-nums}#label-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid #abb0b3;border-radius:7px;background:#f8f7ef;color:#434958;font:26px/1 system-ui}
.workbench{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(215px,1fr);gap:22px;padding:20px;background:#a2a7b1;border:2px solid #626b7b;border-radius:12px;box-shadow:inset 0 3px 0 #c4c8ce}
.specimen-display{min-width:0;position:relative;background:#eef0e7;border:7px solid #424f61;border-radius:9px;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:15px 0 0;box-shadow:0 3px 0 #737b8a}.specimen-display canvas{width:min(100%,300px);height:auto;aspect-ratio:3/2;touch-action:auto}.specimen-caption{width:100%;min-height:54px;display:flex;align-items:center;gap:12px;justify-content:center;background:#dde3df;border-top:1px solid #b8c4c4;padding:12px 8px}.specimen-caption strong{font-size:19px}.specimen-caption>span{font-size:12px;color:#64737c}
.classification{min-width:0;display:flex;flex-direction:column;gap:12px}.criterion{font-size:15px;line-height:1.7;margin:0 0 3px;color:#30394b;word-break:keep-all}.classification button[data-label]{width:100%;display:flex;align-items:center;gap:12px;min-height:67px;padding:12px 15px;border:2px solid #60697b;border-radius:8px;background:#faf9f1;color:#30394b;font-size:17px;text-align:left;box-shadow:0 3px 0 #757b8a}.classification svg{flex:none;width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.classification i{margin-left:auto;width:17px;height:17px;border:2px solid #9ca4af;border-radius:50%;flex:none}.classification button[aria-pressed=true]{background:#ffdf89;border-color:#796034;box-shadow:0 3px 0 #8d734a}.classification button[aria-pressed=true] i{border-color:#756033;background:#756033;box-shadow:inset 0 0 0 3px #ffdf89}
#sample-next{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding:9px 4px;border:0;background:none;color:#343e52;font-size:15px;text-align:left}#sample-next:disabled{opacity:.4;cursor:default}
.tray-drawer{margin-top:18px;padding:14px;background:#727484;border:2px solid #515867;border-radius:10px;box-shadow:inset 0 3px 0 #9699a6}
#sample-tray{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}#sample-tray button{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #485365;border-radius:7px;background:#bac3c8;padding:3px;overflow:hidden}#sample-tray button[aria-current=true]{border-color:#715628;background:#ffe7a9;box-shadow:0 0 0 2px #efc564}#sample-tray canvas{width:100%;height:auto;aspect-ratio:120/106}#sample-tray .tag{align-self:stretch;text-align:center;padding:5px 0;background:#dce1df;border-radius:3px;color:#636e79;font-size:11px;white-space:nowrap}#sample-tray .tag.assigned{color:#364755;background:#f6f1df}#sample-tray .tag.assigned::before{content:'✓ ';font-family:system-ui}
#label-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px}#label-summary{font-size:14px;line-height:1.6;color:#596371}#label-done{min-width:110px;padding:12px 25px;border:1px solid #9d804b;border-radius:8px;background:#ffdf89;color:#343747;font-size:17px;box-shadow:0 3px 0 #c4ae7c}#label-done:disabled{background:#d8dad5;border-color:#b7bcbf;box-shadow:none;color:#92999c;cursor:default}
@media(max-width:640px){.device-shell{padding:16px}.workbench{gap:14px;padding:14px;grid-template-columns:minmax(0,1fr) minmax(175px,.9fr)}.classification button[data-label]{padding:10px;font-size:15px;gap:7px;min-height:58px}.classification svg{width:24px;height:24px}.criterion{font-size:13px}.specimen-caption strong{font-size:16px}.specimen-caption{flex-direction:column;gap:3px;padding:7px}.tray-drawer{padding:10px}#sample-tray{gap:6px}#sample-tray .tag{font-size:10px}}
@media(max-width:450px){#progress{left:12px;top:12px;width:258px}#label-dialog{width:calc(100vw - 20px)}.workbench{grid-template-columns:1fr}.specimen-display{display:grid;grid-template-columns:1fr 1fr;padding:0}.specimen-display canvas{width:100%}.specimen-caption{align-self:stretch;border:0;background:transparent}.classification{display:grid;grid-template-columns:1fr 1fr;gap:8px}.criterion{grid-column:1/-1}.criterion br{display:none}.classification button[data-label]{font-size:13px;padding:9px 6px;gap:6px}.classification svg{width:19px;height:19px}.classification i{width:13px;height:13px}#sample-next{grid-column:1/-1;margin:0}#sample-tray{grid-template-columns:repeat(3,minmax(0,1fr))}#sample-tray canvas{max-width:68px}#label-count{font-size:13px}}
@media(prefers-reduced-motion:reduce){.chevron{transition:none}}
.device-label[data-status=locked]{color:#adb2bd;background:#272d38f2;border-color:#78818c66}.device-label[data-status=locked]::before{width:7px;height:6px;border-radius:1px;background:#828b98;border:0;box-shadow:0 -3px 0 -1px #272d38,0 -4px 0 0 #828b98}.device-label[data-status=complete]{color:#b8c9c5;background:#37414bf2}.device-label[data-status=complete]::before{width:7px;height:4px;border:0;border-left:2px solid #aebfb9;border-bottom:2px solid #aebfb9;border-radius:0;transform:rotate(-45deg)}

#mission-copy{word-break:keep-all;overflow-wrap:break-word}

/* Device interiors: stable frame, one work scene, fixed action dock. */
#lab-dialog{padding:0;border:1px solid #819098;border-radius:18px;width:min(1060px,calc(100vw - 32px));height:min(780px,calc(100dvh - 32px),calc((100vw - 32px)*.5625 + 190px));max-height:none;max-width:none;overflow:hidden;background:#172834;color:#273b48;box-shadow:0 24px 100px #060e1bd9;font-family:Rounded,system-ui}
#lab-dialog[open]{display:grid;grid-template-rows:64px minmax(0,1fr) 126px}
#lab-dialog::backdrop{background:#101b2cdd;backdrop-filter:blur(3px)}
#lab-dialog header{display:flex;align-items:center;gap:16px;padding:0 24px;background:#f0f1e9;border-bottom:1px solid #9baaaa}#lab-title{font-size:24px;margin:0;line-height:1.2}#lab-version{margin-left:auto;font-size:14px;color:#576974}#lab-close,#drawer-close{display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;background:transparent;color:#435761;font:28px/1 system-ui;border-radius:7px}#lab-close:hover,#drawer-close:hover{background:#dce2dd}
.lab-stage{position:relative;min-height:0;overflow:hidden;background:#172834}.lab-stage>canvas{width:100%;height:100%;object-fit:contain;touch-action:auto}
#lab-dialog footer{background:#f0f1e9;padding:16px 24px;display:flex;flex-direction:column;justify-content:space-between;border-top:1px solid #a5b1b4;gap:10px}.lab-feedback{display:flex;align-items:baseline;gap:14px;min-height:25px}#lab-result{margin:0;font-size:19px;color:#293f4d;font-weight:600;line-height:1.35}#lab-note{margin:0;font-size:14px;color:#5b6b75;line-height:1.45}.lab-controls{display:flex;align-items:center;gap:12px}.lab-controls button{min-height:44px;padding:10px 18px;border:1px solid #9caeb5;border-radius:8px;color:#304855;background:transparent;font:16px Rounded,system-ui}#lab-examples{border-color:transparent;text-align:center}#lab-run{margin-left:auto;min-width:178px;background:#ffdf89;border-color:#b69350;color:#344354;font-weight:600;box-shadow:0 3px 0 #c2a96f}#lab-run:disabled{background:#d4ddd9;border-color:#a7b4b8;box-shadow:none;color:#5d737d;cursor:default}#lab-examples:disabled{opacity:.45;cursor:default}#lab-dialog button:focus-visible{outline:3px solid #b18724;outline-offset:3px}
#lab-drawer{position:absolute;inset:12px 16px;background:#edf0e9;border:1px solid #9aabb1;border-radius:12px;padding:16px 20px;overflow:auto;box-shadow:0 10px 50px #0b152d99}.drawer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.drawer-heading h2{font-size:21px;margin:0}
#train-examples{display:grid;grid-template-columns:1fr 1fr;gap:24px}#train-examples h3{font-size:16px;margin:0 0 12px;color:#566872}#train-examples [data-examples]{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}#train-examples button,#test-examples button{padding:6px;border:1px solid #a8b7bb;border-radius:8px;background:#d9e1de;color:#344957;min-width:0}#train-examples canvas,#test-examples canvas{width:100%;height:auto;aspect-ratio:100/82;max-height:85px;object-fit:contain}#train-examples button span,#test-examples span{display:block;text-align:center;font-size:13px;padding:4px 0}#test-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#test-examples button[aria-pressed=true]{background:#ffebae;border:2px solid #9f7d37}#test-examples button:disabled{opacity:.45;cursor:default}.empty-examples{font-size:15px;color:#647982}
#lab-dialog[data-entering=true]{animation:console-enter .28s ease-out}
@keyframes console-enter{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:700px){#lab-dialog{width:calc(100vw - 20px);height:min(720px,calc(100dvh - 20px),calc((100vw - 20px)*.5625 + 204px))}#lab-dialog[open]{grid-template-rows:58px minmax(0,1fr) 146px}#lab-dialog header,#lab-dialog footer{padding-left:16px;padding-right:16px}#lab-title{font-size:21px}.lab-feedback{display:block}#lab-note{font-size:13px;margin-top:5px}#lab-result{font-size:17px}.lab-controls{gap:7px}.lab-controls button{font-size:14px;padding:9px 10px}#lab-run{min-width:140px}#lab-drawer{inset:8px;padding:12px}#train-examples{gap:14px}}
@media(max-width:450px){#lab-dialog[open]{grid-template-rows:56px minmax(0,1fr) 158px}#lab-dialog{height:min(640px,calc(100dvh - 16px),calc((100vw - 20px)*.5625 + 214px))}#lab-title{font-size:19px}#lab-version{font-size:12px}#lab-run{min-width:120px}.lab-controls{flex-wrap:wrap}.lab-controls button{font-size:13px}#lab-examples{padding-right:4px}#train-examples [data-examples]{grid-template-columns:1fr}#lab-drawer{padding:10px}.drawer-heading h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){#lab-dialog[data-entering=true]{animation:none}#lab-dialog::backdrop{backdrop-filter:none}}

/* Collected objects become examples with the learner's own answers. */
#collection-dialog{padding:0;width:min(720px,calc(100vw - 28px));max-height:calc(100dvh - 28px);border:2px solid #7c8a94;border-radius:16px;background:#edf0e8;color:#304351;overflow:auto;font-family:Rounded,system-ui;box-shadow:0 25px 90px #0b152b99}
#collection-dialog::backdrop{background:#111b2ac9}
#collection-dialog header{display:flex;align-items:center;gap:20px;padding:20px 24px;border-bottom:1px solid #b6c1c3}#collection-title{font-size:24px;margin:0}#collection-dialog header button{margin-left:auto;width:36px;height:36px;border:0;background:transparent;color:#40535f;font:28px system-ui}
.collection-rack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px;padding:20px;border:6px solid #536172;border-radius:10px;background:#7d8797;box-shadow:inset 0 3px 0 #aeb5bf}
.collection-rack>div{min-width:0;border:2px solid #4f5a6c;border-radius:6px;background:#e0e5df;overflow:hidden;animation:rack-arrival .4s both;animation-delay:calc(var(--slot)*.09s)}
.collection-rack canvas{width:100%;height:auto;aspect-ratio:150/120}.collection-rack span{display:block;text-align:center;padding:8px 4px;background:#c6d0cf;font-size:14px;color:#344856}
#collection-dialog p{margin:0 24px;font-size:20px;line-height:1.55;word-break:keep-all}#collection-dialog .collection-next{font-size:16px;margin-top:10px;color:#566a76}#collection-dialog footer{display:flex;justify-content:flex-end;padding:24px}#collection-continue{background:#ffdf89;color:#344354;padding:13px 22px;border:1px solid #b69350;border-radius:8px;font-size:17px;box-shadow:0 3px 0 #c2a96f}
#label-explanation{margin:0 0 18px;font-size:18px;line-height:1.6;color:#324754;word-break:keep-all;min-height:2em}
#label-dialog .specimen-display{overflow:hidden}#attached-label{align-self:stretch;margin:0;padding:10px;text-align:center;color:#423e36;background:#ecd1a4;border-top:2px solid #b6a88c;font-size:18px}#attached-label[data-answer=not-trash]{background:#bed5e6;color:#304753;border-color:#8aabba}
#sample-tray .tag.assigned::before{content:none}#sample-tray .tag.assigned{background:#ecd1a4}#sample-tray button:has(.tag.assigned)[aria-label*="쓰레기 아님"] .tag{background:#bed5e6}
#sample-next{min-height:44px;background:#ffdf89;border:1px solid #ac8d51;padding:10px 14px;border-radius:7px;margin-top:8px}#sample-next:disabled{background:#d4d7d5;border-color:#b0b6ba}
#label-dialog[data-lesson=ready] #label-summary{color:#344856}#label-done{font-size:16px;padding:12px 18px}#label-dialog button:focus-visible,#collection-dialog button:focus-visible{outline:3px solid #7954ad;outline-offset:3px}
@keyframes rack-arrival{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:450px){#collection-dialog header{padding:15px 18px}#collection-title{font-size:21px}.collection-rack{margin:16px;padding:10px;gap:7px}.collection-rack span{font-size:11px;padding:7px 2px}#collection-dialog p{margin-left:18px;margin-right:18px;font-size:18px}#collection-dialog .collection-next{font-size:15px}#collection-dialog footer{padding:20px 18px}#collection-continue{font-size:15px}#label-explanation{font-size:16px;margin-bottom:12px}#attached-label{grid-column:1/-1;font-size:16px}#label-dialog footer{align-items:flex-end}#label-done{font-size:14px;padding:11px 12px;min-width:0}#label-summary{font-size:12px}.device-shell{padding:12px}#label-dialog header{padding-bottom:12px}.tray-drawer{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.collection-rack>div{animation:none}}

.collection-rack canvas{height:120px;object-fit:contain}
#label-dialog .specimen-display canvas{max-width:240px}
#sample-tray canvas{max-height:72px;object-fit:contain}
#attached-label[data-answer=""]{background:#dce3df;border-color:#b4c1c0;color:#697881}
@media(min-width:451px){#label-explanation{height:58px;margin-bottom:10px}.workbench{gap:18px;padding:16px}.specimen-caption{min-height:42px;padding:8px}}
@media(max-width:450px){.collection-rack canvas{height:auto}#label-explanation{height:77px;min-height:0}.specimen-display canvas{max-height:105px;object-fit:contain}#sample-tray canvas{max-height:52px}#label-dialog footer{padding-top:12px}}
/* Keep the primary action dock and specimen aperture still as labels change. */
#label-dialog footer{min-height:65px}
@media(min-width:451px){#label-dialog .specimen-display canvas{max-width:220px}#label-explanation{height:48px}}

/* Finite test run: predictions are collected into two result trays. */
#batch-results{position:absolute;inset:0;overflow:auto;padding:22px;background:#e8ede7;color:#334955}
.result-groups{display:grid;grid-template-columns:1fr 1fr;gap:18px;min-height:100%}.result-groups section{min-width:0;padding:14px;border:2px solid #98abb0;border-radius:10px;background:#d4dde0}.result-groups section:first-child{background:#e4d8c5;border-color:#b9a386}
.result-groups h2{font-size:19px;margin:0 0 14px}.result-groups [data-results]{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-content:start}.result-groups button{position:relative;min-width:0;border:2px solid #a4adae;border-radius:9px;background:#f6f6ee;color:#344957;padding:6px;display:flex;flex-direction:column;align-items:center}.result-groups canvas{width:100%;height:96px;object-fit:contain;touch-action:auto}.result-groups span{font-size:14px;text-align:center;line-height:1.4;word-break:keep-all}.result-groups small{font-size:12px;color:#5a6d78;margin-top:7px;line-height:1.4}.result-groups button[aria-pressed=true]{border-color:#7152a0;background:#f0e5ff;box-shadow:0 0 0 2px #ab90ca}.result-groups button[aria-pressed=true]::after{content:'✓';position:absolute;right:5px;top:3px;color:#7152a0;font:18px system-ui}.result-groups p{color:#647781;font-size:15px}
#lab-dialog[data-batch=done][data-mode=test]{height:min(650px,calc(100dvh - 28px));grid-template-rows:64px minmax(0,1fr) 154px}#lab-dialog[data-batch=done] .lab-feedback{display:block}#lab-dialog[data-batch=done] #lab-note{margin-top:6px}#lab-correct:disabled{opacity:.6;cursor:default}#lab-dialog[data-mode=test] #lab-run{min-width:110px}
#label-dialog .classification{justify-content:center}
@media(max-width:700px){#batch-results{padding:12px}.result-groups{gap:10px}.result-groups section{padding:10px}.result-groups [data-results]{grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:8px}.result-groups h2{font-size:17px}.result-groups span{font-size:12px}.result-groups canvas{height:80px}#lab-dialog[data-batch=done][data-mode=test]{grid-template-rows:58px minmax(0,1fr) 166px}}
@media(max-width:450px){#batch-results{padding:8px}.result-groups section{padding:8px}.result-groups [data-results]{grid-template-columns:1fr}.result-groups canvas{height:76px}#lab-dialog[data-mode=test] #lab-run{min-width:82px}.lab-controls #lab-correct{font-size:12px;padding:9px 7px}#lab-dialog[data-batch=done][data-mode=test]{grid-template-rows:56px minmax(0,1fr) 170px}}



/* One instruction above the scene; feedback and its next action stay together below. */
#lab-dialog[open][data-mode]{height:min(780px,calc(100dvh - 28px),calc((100vw - 28px)*.5625 + 260px));grid-template-rows:auto auto minmax(160px,1fr) auto}
#lab-dialog[open][data-mode][data-batch=done],#lab-dialog[open][data-mode][data-retest=true]{height:min(720px,calc(100dvh - 28px))}
#lab-dialog header{min-height:64px;gap:12px;padding:12px 24px}
#lab-dialog header #lab-examples{margin-left:auto;min-height:38px;padding:8px 12px;border:1px solid #b9c3c4;border-radius:8px;background:transparent;color:#526571;font:15px Rounded,system-ui;white-space:nowrap}
#lab-version{margin-left:auto;white-space:nowrap}#lab-examples:not([hidden])+#lab-version:empty{display:none}
#lab-guidance{margin:0;padding:15px 24px;color:#374d5c;background:#e2e7e1;border-bottom:1px solid #b5c0c1;font-size:19px;line-height:1.5;word-break:keep-all}
#lab-dialog footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 24px;min-height:132px}
#lab-dialog .lab-feedback{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
#lab-dialog #lab-result{font-size:22px;line-height:1.45;font-weight:400;word-break:keep-all}
#lab-dialog #lab-note{font-size:17px;line-height:1.6;margin:0;color:#526674;word-break:keep-all}
#lab-dialog .lab-controls{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:180px}
#lab-dialog .lab-controls button{font-size:17px;min-height:48px;white-space:nowrap;margin:0;padding:12px 18px}
#lab-dialog #lab-correct{order:2}
#lab-dialog[data-selection=true] #lab-correct{order:0;background:#ffdf89;border-color:#b69350;box-shadow:0 3px 0 #c2a96f}
#lab-dialog[data-selection=true] #lab-run{background:transparent;border-color:#a7b4b8;box-shadow:none;font-weight:400}
#label-dialog #label-explanation{height:auto;min-height:0;margin:0 0 16px;font-size:19px;line-height:1.5}
#label-dialog footer,#collection-dialog footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}
#label-dialog footer{min-height:115px;margin-top:18px;padding-top:18px;border-top:1px solid #bdc3bf}
.step-feedback{display:flex;flex-direction:column;gap:7px;min-width:0}
#label-dialog #label-summary{font-size:21px;line-height:1.45;color:#304654}
#label-note{margin:0;font-size:16px;line-height:1.6;color:#526674;word-break:keep-all}
.step-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}
#label-dialog #sample-next,#label-dialog #label-done{margin:0;min-height:48px;padding:12px 16px;font-size:16px;white-space:nowrap}
#collection-dialog footer{padding:22px 24px;border-top:1px solid #b6c1c3;background:#f0f1e9}
#collection-dialog .step-feedback p{margin:0;font-size:21px;line-height:1.5}
#collection-dialog .step-feedback .collection-next{font-size:17px;color:#526674;margin:0}
@media(max-width:700px){
 #lab-dialog header{min-height:58px;padding:12px 16px}#lab-dialog header #lab-examples{font-size:13px;padding:8px}
 #lab-guidance{padding:12px 16px;font-size:17px}
 #lab-dialog footer{grid-template-columns:1fr;gap:14px;padding:20px;min-height:160px}
 #lab-dialog #lab-result{font-size:21px}#lab-dialog #lab-note{font-size:16px}
 #lab-dialog .lab-controls{flex-direction:row;justify-content:flex-end;flex-wrap:wrap;min-width:0}
 #lab-dialog .lab-controls button{font-size:16px}#lab-dialog #lab-correct{order:0}
 #label-dialog footer,#collection-dialog footer{grid-template-columns:1fr;gap:14px}
 #label-dialog #label-summary{font-size:20px}#label-dialog #label-explanation{font-size:17px}
 #collection-dialog footer{padding:20px}#collection-continue{justify-self:end}
}
@media(max-width:450px){
 #lab-dialog header{gap:7px;padding:10px 12px;flex-wrap:wrap}#lab-title{font-size:19px}#lab-dialog header #lab-examples{font-size:12px;min-height:34px}#lab-close{width:32px;height:32px}
 #lab-guidance{font-size:16px;padding:12px 16px}#lab-dialog footer{padding:16px;min-height:170px}
 #lab-dialog #lab-result{font-size:19px}#lab-dialog #lab-note{font-size:15px}#lab-dialog .lab-controls button{font-size:15px;padding:10px 12px}
 #label-dialog .step-actions{flex-wrap:wrap}#label-dialog #label-summary{font-size:19px}#label-dialog #sample-next,#label-dialog #label-done{font-size:14px}
 #collection-dialog .step-feedback p{font-size:19px}#collection-dialog .step-feedback .collection-next{font-size:16px}
}
@media(max-height:520px){#lab-dialog[open][data-mode]{overflow:auto;grid-template-rows:auto auto minmax(180px,1fr) auto}}
#lab-dialog>header{grid-row:1}#lab-guidance{grid-row:2}#lab-dialog>.lab-stage{grid-row:3}#lab-dialog>footer{grid-row:4}
/* Keep the next action reachable when the example tray needs scrolling. */
#label-dialog footer{position:sticky;bottom:0;background:#e9e7dc;z-index:1;padding-bottom:8px}

/* Field pilot: a real-action view, with a stable dock and selectable outcomes. */
#field-dialog{padding:0;width:min(980px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);border:2px solid #a7b3b6;border-radius:20px;background:#f0f0e6;color:#29414d;overflow:auto;box-shadow:0 24px 90px #07152180}
#field-dialog[open]{display:grid;grid-template-rows:auto auto minmax(160px,1fr) auto;height:min(780px,calc(100dvh - 24px))}
#field-dialog::backdrop{background:#111b2bba;backdrop-filter:blur(5px)}
#field-dialog header{grid-row:1;display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid #b3bfc1}
#field-title{font-size:24px;margin:0;flex:1}#field-count{font-size:16px}#field-close{font-size:30px;border:0;background:transparent;color:inherit;width:38px;height:38px;padding:0}
#field-guide{grid-row:2;margin:0;padding:14px 22px;background:#dde5e1;font-size:18px}
#field-dialog .field-stage{grid-row:3;min-height:0;position:relative;overflow:hidden;background:#343742}
#field-scene{width:100%;height:100%;display:block}
#field-dialog footer{grid-row:4;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;min-height:100px;border-top:1px solid #b3bfc1}
#field-feedback{font-size:21px;margin:0 0 8px;line-height:1.45}#field-note{font-size:16px;margin:0;line-height:1.6;color:#536a74}
.field-controls{display:flex;gap:10px;flex-shrink:0}#field-dialog button{cursor:pointer;font:inherit}#field-run,#field-correct{padding:13px 19px;border:1px solid #a0afb4;border-radius:10px;color:#29414d;background:#f5f4eb;min-height:48px}
#field-run{background:#ffdf8b;border-color:#ba9c54;box-shadow:0 3px 0 #c4aa68}#field-correct:not(:disabled){background:#ffdf8b;border-color:#ba9c54}#field-correct:disabled{opacity:.4}
#field-dialog button:focus-visible{outline:3px solid #807bb5;outline-offset:3px}
#field-results{height:100%;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;background:#e8ebe2;box-sizing:border-box}
#field-results section{background:#e4dac0;border:1px solid #bcb59f;border-radius:12px;padding:12px}#field-results section+section{background:#d9e2e3;border-color:#aebdc2}#field-results h2{font-size:18px;margin:0 0 12px}
#field-results section>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#field-results button{display:flex;flex-direction:column;align-items:center;min-width:0;border:2px solid #bac0bd;border-radius:10px;background:#f8f6ed;padding:6px;color:#29414d}#field-results canvas{width:100%;height:80px;object-fit:contain}#field-results span{font-size:14px;line-height:1.5}#field-results button[aria-pressed=true]{border-color:#ad883b;background:#ffe4a0}
@media(max-width:700px){#field-dialog footer{flex-direction:column;align-items:stretch;gap:12px;padding:16px}#field-dialog header{padding:12px 16px}#field-title{font-size:21px}.field-controls{justify-content:flex-end}#field-feedback{font-size:19px}#field-guide{padding:12px 16px;font-size:17px}#field-results section>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:450px){#field-dialog[open]{height:calc(100dvh - 24px)}#field-results{padding:10px;gap:8px}#field-results section{padding:8px}#field-results section>div{grid-template-columns:1fr}#field-results canvas{height:70px}#field-title{font-size:19px}#field-count{font-size:14px}#field-run,#field-correct{padding:10px 12px}#field-results h2{font-size:16px}}
#field-dialog[open][data-status=done]{height:auto;grid-template-rows:auto auto minmax(120px,1fr) auto}
#field-dialog[data-status=done] .field-stage{max-height:52dvh;overflow:auto}
#field-dialog[data-status=done] #field-results{height:auto;min-height:180px;overflow:visible}
#field-dialog[open]:not([data-status=done]){height:min(780px,calc(100dvh - 24px),calc((100vw - 24px)*.5667 + 250px))}
@media(max-width:450px){#field-dialog[open]:not([data-status=done]){height:min(calc(100dvh - 24px),calc((100vw - 24px)*1.158 + 240px))}}
/* Device names describe function; the second line explains the clickable action. */
button.device-label{pointer-events:auto;display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:4px;text-align:left;min-height:44px;font-family:inherit}
button.device-label::before{grid-row:1 / 3;align-self:center}
button.device-label>small{grid-column:2;font-size:11px;font-weight:400;opacity:.85}
button.device-label:not(:disabled):hover{filter:brightness(1.08)}
button.device-label:disabled{cursor:default}
#action{display:flex;align-items:center;gap:7px;min-height:36px;padding:3px 5px;border:0;border-radius:6px;background:transparent;box-shadow:none;font-size:13px;font-weight:600}
#action>span{padding:5px 8px;border-radius:5px;background:#252b34dc;color:#f4f6f8;line-height:1.2}
#action:hover>span{background:#343e4a}
#action kbd{margin:0;display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0;border:2px solid #455367;border-radius:5px;background:#e5edf4;color:#344257;box-shadow:0 3px 0 #455367;font:800 16px/1 system-ui}
#interaction-coach{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);width:max-content;padding:10px 12px 10px 16px;border-radius:12px;background:#23303aee;color:#f4f7fa;box-shadow:0 4px 18px #15202a22;font-size:14px;z-index:2}
#interaction-coach>span{max-width:340px;line-height:1.4;word-break:keep-all}
#interaction-coach button{flex:none;border:1px solid #d5af54;border-radius:7px;min-height:42px;padding:8px 14px;background:#ffdf89;color:#283546;font-weight:700}
@media(max-width:600px){#interaction-coach{gap:8px;padding:9px 10px;font-size:12px;bottom:12px}#interaction-coach>span{max-width:190px}#interaction-coach button{font-size:12px;padding:8px 10px}button.device-label{font-size:13px;padding:7px 9px}button.device-label>small{font-size:10px}}