/* Shared production mascot and lightweight experiment surface. */
.pico-image{display:block;width:200px;height:200px;max-width:100%;object-fit:contain;border-radius:25px;mix-blend-mode:multiply}
.welcome .pico-image{width:115px;height:115px}.title-screen .pico-image{width:220px;height:220px}
.asset-fallback{display:grid;place-items:center;min-height:100px;padding:16px;color:#294b73;background:#eaf3fb;border:2px dashed #a8c8e1;border-radius:16px;font-size:1rem;text-align:center}
.experiment-screen{max-width:1260px}.experiment-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 22px}.experiment-title h1{font-size:clamp(1.7rem,3vw,2.5rem);margin:0}.experiment-title .section-kicker{margin-bottom:8px}
.experiment-layout{display:grid;grid-template-columns:148px minmax(0,1fr);gap:22px}.experiment-main{min-width:0}
.learning-steps{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:10px;align-self:start;background:#ffffffc9;border:2px solid #b5d9f4;border-radius:24px}
.learning-steps li{display:flex;align-items:center;gap:9px;padding:12px 8px;border:2px solid transparent;border-radius:16px;color:#50677e;font-size:.9375rem}.learning-steps li>span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#e3edf6;font-weight:800;flex-shrink:0}.learning-steps li[aria-current]{background:#dcedff;border-color:#65b4f0;color:#103873}.learning-steps li[aria-current]>span{background:#0874da;color:white}.learning-steps .step-done{color:#206433}.learning-steps .step-done>span{background:#d9f0d7}
.pico-dialogue{display:flex;align-items:center;gap:20px;background:linear-gradient(white,#eff8ff);border:2px solid #9eccf0;border-radius:25px;padding:14px 20px;margin-bottom:18px;box-shadow:0 4px 0 #bfdcee}
.pico-dialogue .pico{flex-shrink:0}.pico-dialogue .pico-image{width:90px;height:90px;border-radius:15px}.pico-dialogue .pico-emoji{font-size:65px}.pico-dialogue .pico-name{font-size:.75rem;padding:3px 12px}.pico-dialogue p{margin:0;line-height:1.5;font-weight:700;color:#18355f}.pico-hint{border-color:#dfba45;background:#fffbed}.pico-happy,.pico-success{border-color:#84c791;background:#f1fced}
.workbench{border:3px solid #77c5fb;border-radius:26px;padding:24px;background:linear-gradient(#fbfdff,#edf6fc);box-shadow:inset 0 0 0 3px white,0 5px 0 #67a8d5,0 15px 30px #244c7010}.workbench h2{font-size:1.4rem;line-height:1.3;margin:0 0 8px;color:#112e61}.workbench h2:focus{outline:none}.activity-instruction{font-size:.9375rem;color:#425e7c;margin-bottom:20px}.activity-instruction strong{display:inline-block;margin-left:8px;color:#174c78}
.component-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.component-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;padding:14px 8px;background:white;border:2px solid #c4daeb;border-radius:21px;text-align:center;color:#183c69;box-shadow:0 4px 0 #c8dce9}.component-card img{display:block;max-width:100%;width:150px;height:auto;aspect-ratio:1;object-fit:contain;border-radius:15px;user-select:none;pointer-events:none;mix-blend-mode:multiply}.component-card strong{font-size:1.05rem}.component-card>span{font-size:.8125rem;line-height:1.4}.component-card.matched{border-color:#64b87e;background:#f0fbed}.component-card:disabled{cursor:default;opacity:1}.component-card:disabled:hover{transform:none}.component-card.matched>span{color:#25653c}
.label-tray{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}.label-chip{border:2px solid #78b9e9;border-radius:15px;background:linear-gradient(white,#dcefff);box-shadow:0 3px 0 #9ebfd7;padding:12px 24px;font-weight:800;touch-action:none;user-select:none;min-height:50px}.label-chip[aria-pressed=true]{border-color:#c69819;background:#ffed9a;box-shadow:0 3px 0 #c49d33}.label-chip:disabled{background:#e5f2e4;border-color:#a1c3a4;color:#3f6544;cursor:default;box-shadow:none}.drag-label{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-115%);padding:12px 22px;background:#ffdf5e;color:#15395d;border:2px solid #d19d17;box-shadow:0 8px 18px #133c7430;border-radius:14px;font-weight:800}.component-card.drop-hover,.hint-target{outline:4px solid #e1af1c;outline-offset:2px;background:#fff6d0}
.experiment-actions{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:24px 0 30px}.experiment-actions .primary{padding:15px 24px}.hint-button{background:linear-gradient(#ffe88a,#ffd54b);border:2px solid #dcaf35;border-radius:16px;padding:13px 24px;font-weight:800;color:#584111;box-shadow:0 3px 0 #caa235}.primary:disabled{background:#dce6ed;color:#506b7e;border-color:#b7cbd9;box-shadow:none;text-shadow:none;cursor:not-allowed;transform:none}
.observation{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:center;gap:28px;padding:16px 0}.observed{border-color:#daa629;background:#fffbeb}.observation-count{color:#536b82;font-size:.875rem}.explanation{font-size:1.35rem;font-weight:700;line-height:1.5}.observed-all{color:#236738;font-weight:700}.observation .primary{padding:16px;font-size:.9375rem;gap:12px}
.think-panel{display:flex;align-items:center;justify-content:center;gap:28px;padding:12px}.think-panel img{width:150px;max-width:35%;border-radius:20px}.think-panel p{font-size:1.25rem;line-height:1.5;font-weight:700;margin:0}.answer-buttons{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:18px 0 8px}.answer-buttons .nav-button{padding:16px 22px;font-size:1rem}.answer-correct{border-color:#61ac78;background:#e7f6e4;color:#205e32}
.completion{text-align:center}.completion-check{display:grid;place-items:center;width:55px;height:55px;background:#daf1d4;color:#246934;font-size:2rem;border-radius:50%;margin:0 auto 12px}.completion h2{font-size:2rem}.component-summary{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;padding:0;margin:20px 0}.component-summary li{display:flex;align-items:center;gap:12px;padding:12px;background:white;border:1px solid #c5dfcf;border-radius:18px;min-width:0}.component-summary img{width:65px;height:65px;object-fit:contain;border-radius:12px}.component-summary strong,.component-summary span{display:block}.component-summary span{font-size:.875rem;line-height:1.4;color:#496078;margin-top:5px}.completion-actions{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.completion-actions .primary{padding:16px 22px}.experiment-replay{text-align:center;max-width:760px;margin:10px auto 28px;background:white;border:3px solid #84c8f5;border-radius:28px;padding:28px}.experiment-replay>.badge{display:inline-block;margin-bottom:18px}.experiment-replay>.nav-button{margin:12px}.experiment-replay h1{font-size:2rem}
@media(max-width:1050px){.experiment-layout{grid-template-columns:1fr}.learning-steps{flex-direction:row;justify-content:space-between;padding:7px;gap:4px}.learning-steps li{padding:8px;gap:6px}.pico-dialogue .pico-image{width:75px;height:75px}}
@media(max-width:640px){.title-screen .pico-image{width:145px;height:145px}.welcome .pico-image{width:75px;height:75px}.experiment-title{align-items:flex-start;gap:8px}.experiment-title .section-kicker{font-size:.75rem}.experiment-title>.badge{font-size:.75rem;white-space:nowrap;padding:6px 9px}.experiment-title h1{font-size:1.6rem}.experiment-layout{gap:14px}.learning-steps{gap:2px;border-radius:16px;padding:6px 3px}.learning-steps li{flex:1;min-width:0;flex-direction:column;padding:6px 0;gap:6px;font-size:.75rem;border-radius:12px}.learning-steps li>span{width:24px;height:24px}.pico-dialogue{padding:12px;gap:12px;border-radius:20px}.pico-dialogue .pico-image{width:60px;height:60px}.pico-dialogue .pico-emoji{font-size:48px}.pico-dialogue p{font-size:.875rem}.pico-dialogue .pico-name{font-size:.6875rem;padding:3px 8px}.workbench{padding:17px 13px;border-radius:22px}.workbench h2{font-size:1.2rem}.activity-instruction{font-size:.875rem}.activity-instruction strong{margin:8px 0 0}.component-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.component-card{padding:10px 7px;gap:8px;border-radius:16px}.component-card img{width:115px}.component-card strong{font-size:1rem}.label-tray{display:grid;grid-template-columns:1fr 1fr;gap:10px}.label-chip{padding:10px 12px}.experiment-actions{gap:10px}.experiment-actions .primary{padding:14px 16px;gap:8px;font-size:.875rem}.hint-button{padding:13px 16px}.observation{grid-template-columns:1fr;gap:16px}.observation .component-card{max-width:180px;justify-self:center;width:100%}.explanation{font-size:1.15rem}.think-panel{flex-direction:column;gap:14px;padding:8px}.think-panel img{max-width:100%;width:115px}.think-panel p{font-size:1.1rem;text-align:center}.answer-buttons{display:grid;grid-template-columns:1fr;width:100%;gap:12px}.component-summary{grid-template-columns:1fr}.component-summary img{width:50px;height:50px}.completion h2{font-size:1.6rem}.experiment-replay{padding:20px 13px}.completion-actions{flex-direction:column}.completion-actions .nav-button{white-space:normal}}
@media(max-height:550px) and (min-width:641px){.title-screen .pico-image{width:105px;height:105px}.experiment-title{margin-bottom:14px}.experiment-title h1{font-size:1.8rem}.learning-steps li{padding:5px 8px}.pico-dialogue{padding:10px 15px;gap:14px}.pico-dialogue .pico-image{width:55px;height:55px}.pico-dialogue .pico-name{font-size:.6875rem;padding:2px 9px}.workbench{padding:16px}.component-card img{width:110px}.experiment-actions{padding:18px 0}.observation{grid-template-columns:150px 1fr}.component-summary img{width:50px;height:50px}}
@media(prefers-reduced-motion:reduce){.component-card,.label-chip,.drag-label{transition:none!important;animation:none!important}}