.lab-page{max-width:1160px;margin:auto;padding:24px 16px;color:#133654;font-family:'Zen Maru Gothic',sans-serif}.lab-page>h1{text-align:center;font-size:28px}.lab-page>.kids-seo-lead{text-align:center;margin:10px 0 20px}.color-lab{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#b7e2f2 url('./assets/workshop.webp') center/cover;box-shadow:0 10px 30px #173b4b24;color:#092955;isolation:isolate;font-weight:900;touch-action:pan-y}.color-lab *{box-sizing:border-box}.color-lab [hidden]{display:none!important}.color-lab button{font:inherit;color:inherit;border:0;background:#fff9ea url('./assets/ivory.webp') center/100% 100%;border-radius:12px;cursor:pointer;padding:9px 18px;line-height:1.5;min-width:0;touch-action:manipulation}.color-lab button:focus-visible{outline:4px solid #007dab;outline-offset:3px}.color-lab button:disabled{opacity:.5;cursor:default}.color-lab button[aria-pressed=true]{box-shadow:inset 0 0 0 3px #087699}.color-lab .yellow-button{background:transparent url('./assets/yellow.webp') center/100% 100%;padding:13px 32px}.lab-base{display:grid;grid-template-rows:49px minmax(0,1fr);height:100%}.lab-top{display:flex;gap:8px;justify-content:center;padding:6px 12px;background:#ffffff55}.lab-top button{font-size:12px;padding:7px 20px}.lab-cover{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 16% 20px;min-height:0}.lab-cover h2{font-size:clamp(28px,4cqw,44px);margin:0;background:#fffbeded;border-radius:18px;padding:2px 30px;line-height:1.5}.lab-cover h2 span{color:#116f8d}.lab-cover>p{font-size:16px;margin:0;background:#e7f7ffdd;border-radius:8px;padding:2px 12px}.lab-choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;flex:1;min-height:0;width:100%}.lab-choices>button{background:transparent;padding:8px;display:grid;grid-template-rows:minmax(0,1fr) 42px;border-radius:18px;gap:8px}.lab-choices strong{background:#fffbed;border-radius:10px;padding:8px;font-size:20px}.mini-board{display:block;min-width:0;min-height:0;border:16px solid transparent;border-image:url('./assets/white-board.webp') 90 65 stretch;background:#fff}.mini-board.black{background:#000;border-image-source:url('./assets/black-board.webp')}.mini-board canvas{display:block;width:100%;height:100%;object-fit:contain}.lab-cover>.yellow-button{font-size:20px;min-height:50px}.lab-play{display:grid;grid-template-columns:minmax(0,1fr) 27%;grid-template-rows:50px minmax(0,1fr) 43px;gap:9px 16px;padding:8px 4% 14px;min-height:0}.lab-heading{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;gap:18px}.lab-heading h2{font-size:24px;margin:0;background:#fff9eae8;padding:3px 20px;border-radius:8px}.lab-modes{display:flex;gap:6px}.lab-modes button{font-size:15px;padding:8px 24px}.lab-modes button[aria-pressed=true]{background-image:url('./assets/yellow.webp')}.experiment-frame{position:relative;min-width:0;min-height:0;border:22px solid transparent;border-image:url('./assets/white-board.webp') 90 65 stretch;background:#fff}.color-lab[data-mode=light] .experiment-frame{background:#000;border-image-source:url('./assets/black-board.webp')}.experiment-board{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;touch-action:none}.color-lab[data-mode=light] .experiment-board{background:#000}.experiment-board canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.circle-hit{position:absolute!important;left:0;top:0;border:0!important;border-radius:50%!important;background:transparent!important;padding:0!important;cursor:grab!important;touch-action:none!important;line-height:1!important;box-shadow:none!important}.circle-hit:active{cursor:grabbing!important}.circle-hit:focus-visible{outline:3px dashed #253645;outline-offset:-5px}.color-lab[data-mode=light] .circle-hit:focus-visible{outline-color:#fff}.experiment-board>p{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:22px;line-height:1.8;margin:0;pointer-events:none;color:#63788d}.color-lab[data-mode=light] .experiment-board>p{color:#c8d4e0}.lab-controls{background:transparent url('./assets/control.webp') center/100% 100%;padding:14px 15px 12px;display:grid;grid-template-rows:30px minmax(0,1fr) 40px 58px;gap:8px;min-height:0}.lab-controls h3{font-size:18px;margin:0;text-align:center;line-height:1.5}.color-buttons{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;min-height:0}.color-buttons button{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;padding:6px;min-height:0}.color-buttons .button-swatch{width:36px;height:36px;flex:0 0 36px;border-radius:50%;border:1px solid #ffffff66}.color-buttons .button-label{display:flex;flex-direction:column;line-height:1.45}.button-label small{font-size:11px}.lab-controls>#clear{font-size:15px;padding:5px 10px}.lab-result{display:flex;align-items:center;justify-content:center;gap:9px;border-top:1px dashed #658da4;padding-top:7px}.lab-result p{font-size:11px;line-height:1.6;margin:0}.lab-swatch{width:36px;height:36px;flex:0 0 36px;display:block;border-radius:50%;border:1px solid #b7c8d0}.lab-caption{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff9eae8;padding:5px 15px;border-radius:9px}.lab-caption p{font-size:13px;line-height:1.5;margin:0}.lab-caption p:last-child{font-size:10px;text-align:right}.lab-dialog{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#0d294e88;backdrop-filter:blur(5px);padding:20px}.lab-notebook{background:#fff9eb url('./assets/notebook.webp') center/100% 100%;width:92%;max-width:1000px;max-height:100%;padding:38px 35px 22px;border-radius:20px;text-align:center;overflow:auto}.lab-notebook>h2{font-size:28px;line-height:1.5;margin:0 0 12px}.lab-notebook p{font-size:17px;line-height:1.8;margin:14px 0}.lab-notebook button{margin:5px;font-size:16px}.science-panels{display:grid;grid-template-columns:1fr 1fr;gap:18px}.science-panels>section{background:#fff;display:grid;grid-template-rows:35px minmax(0,1fr) 52px;padding:10px;border-radius:14px;min-height:0}.science-panels h3{font-size:21px;line-height:1.5;margin:0}.science-panels canvas{width:100%;height:150px;object-fit:contain;display:block}.science-panels p{font-size:13px;margin:0;line-height:1.7}.science-panels .light-note{background:#050505;color:#fff}.lab-steps{display:flex;justify-content:space-around;padding-left:25px;gap:20px;margin:15px 0;font-size:14px}.lab-notebook .keyboard-help{font-size:10px;margin:8px 0}.lab-notebook label{display:block;font-size:17px;margin:18px 0 4px}.lab-notebook input[type=range]{width:70%;accent-color:#21789a}.parent-note{margin:30px auto;max-width:950px;font-weight:500;font-size:14px;line-height:1.9}.parent-note h2{font-size:21px}.color-lab:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0}.color-lab:fullscreen .lab-base{grid-template-rows:64px minmax(0,1fr)}.color-lab:fullscreen .lab-top button{font-size:16px}.color-lab:fullscreen .lab-play{grid-template-rows:64px minmax(0,1fr) 55px;padding:12px 6% 25px}.color-lab:fullscreen .lab-heading h2{font-size:32px}.color-lab:fullscreen .lab-modes button{font-size:20px}.color-lab:fullscreen .lab-controls{grid-template-rows:48px minmax(0,1fr) 62px 90px;padding:30px;gap:18px}.color-lab:fullscreen .lab-controls h3{font-size:26px}.color-lab:fullscreen .color-buttons button{font-size:24px}.color-lab:fullscreen .button-label small{font-size:17px}.color-lab:fullscreen .button-swatch{width:58px;height:58px;flex-basis:58px}.color-lab:fullscreen #clear{font-size:22px}.color-lab:fullscreen .lab-result p{font-size:17px}.color-lab:fullscreen .lab-swatch{width:55px;height:55px;flex-basis:55px}.color-lab:fullscreen .lab-caption p{font-size:20px}.color-lab:fullscreen .lab-caption p:last-child{font-size:15px}.color-lab:fullscreen .lab-cover{gap:22px;padding:20px 18% 40px}.color-lab:fullscreen .lab-cover h2{font-size:55px}.color-lab:fullscreen .lab-choices strong{font-size:25px}.color-lab:fullscreen .lab-choices>button{grid-template-rows:minmax(0,1fr) 55px}.color-lab:fullscreen .lab-cover>.yellow-button{font-size:30px;padding:18px 50px}.color-lab:fullscreen .experiment-frame{border-width:30px}
@media(max-width:680px){.lab-page{padding:16px 12px}.lab-page>h1{font-size:25px}.lab-page>.kids-seo-lead{font-size:13px}.color-lab,.color-lab:fullscreen{aspect-ratio:auto;height:calc(100dvh - 18px);min-height:700px;max-height:860px;border-radius:18px}.lab-base,.color-lab:fullscreen .lab-base{grid-template-rows:74px minmax(0,1fr)}.lab-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:5px}.lab-top button,.color-lab:fullscreen .lab-top button{font-size:11px;padding:5px 3px}.lab-top button:last-child{grid-column:2/4}.lab-cover,.color-lab:fullscreen .lab-cover{padding:20px 12px;gap:14px}.lab-cover h2,.color-lab:fullscreen .lab-cover h2{font-size:29px;padding:6px 12px}.lab-cover>p{font-size:12px}.lab-choices{grid-template-columns:1fr;gap:10px;width:92%}.lab-choices>button,.color-lab:fullscreen .lab-choices>button{grid-template-rows:minmax(0,1fr) 32px;padding:5px;gap:5px}.lab-choices strong,.color-lab:fullscreen .lab-choices strong{font-size:16px;padding:3px}.mini-board{border-width:13px}.lab-cover>.yellow-button,.color-lab:fullscreen .lab-cover>.yellow-button{font-size:17px;padding:12px 28px}.lab-play,.color-lab:fullscreen .lab-play{grid-template-columns:minmax(0,1fr);grid-template-rows:67px minmax(220px,1fr) 205px 55px;padding:7px 12px 12px;gap:7px}.lab-heading{grid-column:1;display:flex;flex-direction:column;gap:5px;justify-content:center}.lab-heading h2,.color-lab:fullscreen .lab-heading h2{font-size:18px;padding:1px 20px}.lab-modes{width:100%;gap:5px}.lab-modes button,.color-lab:fullscreen .lab-modes button{font-size:12px;flex:1;padding:5px}.experiment-frame,.color-lab:fullscreen .experiment-frame{border-width:15px}.experiment-board>p{font-size:17px}.lab-controls,.color-lab:fullscreen .lab-controls{grid-template-columns:1fr 1fr;grid-template-rows:25px 78px 51px;gap:8px;padding:12px 14px}.lab-controls h3,.color-lab:fullscreen .lab-controls h3{grid-column:1/3;font-size:17px}.color-buttons{grid-column:1/3;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;gap:5px}.color-buttons button,.color-lab:fullscreen .color-buttons button{font-size:12px;flex-direction:column;gap:2px;padding:3px}.color-buttons .button-swatch,.color-lab:fullscreen .button-swatch{width:25px;height:25px;flex-basis:25px}.button-label small,.color-lab:fullscreen .button-label small{font-size:10px}.lab-controls>#clear,.color-lab:fullscreen #clear{font-size:13px;padding:5px}.lab-result{border:0;padding:0;gap:6px}.lab-result p,.color-lab:fullscreen .lab-result p{font-size:9px;line-height:1.6}.lab-swatch,.color-lab:fullscreen .lab-swatch{width:25px;height:25px;flex-basis:25px}.lab-caption{grid-column:1;display:block;text-align:center;padding:4px}.lab-caption p,.color-lab:fullscreen .lab-caption p{font-size:11px}.lab-caption p:last-child,.color-lab:fullscreen .lab-caption p:last-child{font-size:10px;text-align:center}.lab-dialog{padding:8px}.lab-notebook{width:100%;padding:24px 15px 15px}.lab-notebook>h2{font-size:22px;margin-bottom:9px}.science-panels{gap:7px;grid-template-columns:1fr}.science-panels>section{grid-template-rows:25px minmax(0,1fr) 42px;padding:6px}.science-panels h3{font-size:17px}.science-panels canvas{height:115px}.science-panels p{font-size:11px;line-height:1.6}.lab-steps{font-size:10px;gap:15px;padding-left:17px;margin:10px 0}.lab-notebook .keyboard-help{font-size:9px}.lab-notebook p{font-size:13px}.lab-notebook button{font-size:13px;margin:3px;padding:8px 14px}.lab-notebook label{font-size:14px}}
@media(max-height:500px) and (orientation:landscape){.color-lab{min-height:360px}.lab-base,.color-lab:fullscreen .lab-base{grid-template-rows:36px minmax(0,1fr)}.lab-top{gap:6px;padding:3px}.lab-top button,.color-lab:fullscreen .lab-top button{font-size:10px;padding:5px 14px}.lab-cover,.color-lab:fullscreen .lab-cover{padding:3px 18% 10px;gap:5px}.lab-cover h2,.color-lab:fullscreen .lab-cover h2{font-size:24px;padding:0 20px}.lab-cover>p{font-size:11px}.lab-choices{gap:12px}.lab-choices>button,.color-lab:fullscreen .lab-choices>button{padding:3px;grid-template-rows:minmax(0,1fr) 28px;gap:2px}.lab-choices strong,.color-lab:fullscreen .lab-choices strong{font-size:14px;padding:3px}.mini-board{border-width:11px}.lab-cover>.yellow-button,.color-lab:fullscreen .lab-cover>.yellow-button{font-size:15px;min-height:30px;padding:6px 30px}.lab-play,.color-lab:fullscreen .lab-play{grid-template-rows:35px minmax(0,1fr) 31px;grid-template-columns:minmax(0,1fr) 27%;gap:5px 10px;padding:3px 4% 8px}.lab-heading h2,.color-lab:fullscreen .lab-heading h2{font-size:19px;padding:2px 12px}.lab-modes button,.color-lab:fullscreen .lab-modes button{font-size:12px;padding:4px 22px}.experiment-frame,.color-lab:fullscreen .experiment-frame{border-width:15px}.lab-controls,.color-lab:fullscreen .lab-controls{grid-template-rows:23px minmax(0,1fr) 28px 32px;gap:4px;padding:8px 10px}.lab-controls h3,.color-lab:fullscreen .lab-controls h3{font-size:14px}.color-buttons{gap:4px}.color-buttons button,.color-lab:fullscreen .color-buttons button{font-size:11px;gap:6px;padding:2px}.button-label small,.color-lab:fullscreen .button-label small{font-size:9px}.color-buttons .button-swatch,.color-lab:fullscreen .button-swatch{width:22px;height:22px;flex-basis:22px}.lab-controls>#clear,.color-lab:fullscreen #clear{font-size:11px;padding:3px}.lab-result{gap:6px;padding-top:2px}.lab-result p,.color-lab:fullscreen .lab-result p{font-size:8px}.lab-swatch,.color-lab:fullscreen .lab-swatch{width:22px;height:22px;flex-basis:22px}.lab-caption{padding:3px 10px}.lab-caption p,.color-lab:fullscreen .lab-caption p{font-size:10px}.lab-caption p:last-child,.color-lab:fullscreen .lab-caption p:last-child{font-size:8px}.experiment-board>p{font-size:17px}.lab-dialog{padding:5px}.lab-notebook{padding:18px 24px 10px}.lab-notebook>h2{font-size:22px;margin-bottom:6px}.science-panels{gap:9px}.science-panels>section{grid-template-rows:25px minmax(0,1fr) 37px;padding:5px}.science-panels h3{font-size:16px}.science-panels canvas{height:95px}.science-panels p{font-size:10px;margin:0;line-height:1.6}.lab-steps{font-size:11px;margin:6px 0}.lab-notebook .keyboard-help{font-size:8px;margin:5px 0}.lab-notebook p{font-size:13px;margin:8px 0}.lab-notebook button{font-size:12px;padding:5px 18px;margin:3px}.lab-notebook label{font-size:13px;margin:10px 0 3px}}

@media(max-height:500px) and (orientation:landscape){.lab-notebook .science-panels p{font-size:10px;line-height:1.6;margin:0}}