/* Visual upgrades retain the supplied site's branding and learning activities. */
body{margin:0}button,input,textarea{font:inherit}button{touch-action:manipulation}img{max-width:100%}.lab-kicker{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;line-height:1.7;color:#638476}.lab-section-intro{max-width:740px;margin-bottom:26px}.lab-section-intro h3{font-size:clamp(25px,3vw,36px);margin:8px 0 12px;line-height:1.18}.lab-section-intro p{color:var(--muted);line-height:1.75}.model-note{font-size:12px;color:var(--muted);line-height:1.6;margin:14px 0}.source-link{display:inline-block;font-size:12px;text-decoration:underline;color:var(--deep);margin-top:18px}.learning-map-grid{gap:18px}.learning-map-card{overflow:hidden;border-radius:24px;box-shadow:0 12px 32px #0e33230a;transition:transform .25s,box-shadow .25s}.learning-map-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px #0e33231a}.map-visual{height:190px!important;padding:0!important;overflow:hidden;border:0!important;background:#102f30!important}.map-visual img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.learning-map-card:hover img{transform:scale(1.05)}.map-number{color:#fff!important;opacity:.85!important;font-size:29px!important;top:15px!important;right:18px!important;text-shadow:0 2px 10px #0008}.map-copy{padding:22px!important;border:0!important}.map-copy h3{font-family:'DM Sans',sans-serif!important;font-size:18px!important;line-height:1.35;margin-bottom:12px}.map-copy p{font-size:14px!important;line-height:1.65;min-height:92px;padding:0}.map-check{display:none}.hero img{width:100%;height:auto;border-radius:28px;object-fit:cover}.hero .hero-art{background:transparent}.structure-layout{display:grid!important;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)!important;gap:22px!important;align-items:start}.structure-figure{margin:0!important;padding:0!important;border:0!important;overflow:hidden;border-radius:24px}.model-card{background:radial-gradient(ellipse at 43% 40%,#284f4d 0,#102c32 48%,#0a1e28 100%);color:#d9e9e0;min-width:0;position:relative}.model-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:21px 24px 0}.model-heading .lab-kicker{color:#9bbcae}.live-pill{font:700 10px 'DM Sans',sans-serif;letter-spacing:.1em;padding:5px 9px;background:#cce7b615;color:#cce7b6;border:1px solid #cce7b640;border-radius:100px;white-space:nowrap}.cell-viewer{height:440px;position:relative;touch-action:none}.cell-viewer canvas{display:block;width:100%;height:100%}#viewer-loading{position:absolute;left:0;right:0;top:45%;text-align:center;font-size:13px}#viewer-tooltip{position:absolute;pointer-events:none;z-index:2;background:#f4f8ec;color:#15372b;border-radius:8px;padding:6px 10px;font-size:12px;box-shadow:0 4px 20px #0005}.viewer-controls{display:flex;gap:7px;flex-wrap:wrap;padding:0 18px}.viewer-controls button{font-size:11px;min-height:36px;background:#ffffff0c;color:#dcebdc;border:1px solid #ffffff26;border-radius:8px;padding:8px 10px;transition:background .2s}.viewer-controls button:hover,.viewer-controls button[aria-pressed=true]{background:#b7dca927}.model-card #viewer-status{font-size:11px;color:#c2d9c8;padding:15px 22px 0;margin:0}.model-card figcaption{font-size:10px!important;line-height:1.65!important;color:#a3bcb1!important;font-weight:400!important;text-align:left!important;padding:10px 22px 20px;margin:0!important}.structure-interactive{padding:24px!important;min-width:0}.structure-interactive h3{margin:10px 0;font-size:25px}.structure-interactive #structure-info-desc{font-size:13px}.structure-interactive #structure-info{font-size:13px;line-height:1.6;margin-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}#structure-function:empty,#structure-note:empty{display:none}#structure-note{margin-top:8px;font-size:12px}.structure-parts{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.structure-parts .structure-option{position:static!important;transform:none!important;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 9px;min-height:35px;white-space:normal;box-shadow:none;max-width:100%}.structure-parts .structure-option:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--part-color);flex-shrink:0}.structure-parts .structure-option.active{border-color:var(--part-color);background:var(--card);box-shadow:0 0 0 1px var(--part-color)}#structure-progress{font-size:12px}#structure-game h3{font:800 14px 'DM Sans',sans-serif}#structure-game-state{font-size:12px;padding:12px}#structure-game .choice{font-size:13px}#structure-info~.flex button,.structure-interactive>.flex button{font-size:12px;padding:10px 12px}#structure-game-start{font-size:12px}.video-library{display:grid;grid-template-columns:1fr 1fr;gap:22px}.video-lesson{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}.video-lesson video{width:100%;aspect-ratio:16/9;display:block;background:#0c252b;object-fit:contain}.video-copy{padding:22px}.video-copy h3{font-size:26px;margin:7px 0 10px}.video-copy p{font-size:14px;line-height:1.7;color:var(--muted)}.video-copy>small{display:block;font-size:11px;margin-top:14px;color:var(--muted)}details.transcript{border:0;background:transparent;box-shadow:none;margin:15px 0 0;padding:0;border-top:1px solid var(--line);border-radius:0}details.transcript>summary{font-size:12px!important;padding:13px 0!important;background:transparent;box-shadow:none}details.transcript ol{font-size:12px;line-height:1.7;padding-left:20px;list-style:decimal}.classification-home{gap:16px}.classification-card{overflow:hidden;position:relative;transition:transform .2s}.classification-card:hover{transform:translateY(-4px)}.classification-icon{font-size:32px}.classification-subcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.classification-subcard{padding:0!important;text-align:left;overflow:hidden;background:var(--card);border-radius:19px;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}.classification-subcard:hover{transform:translateY(-4px);box-shadow:0 12px 25px #1b4a2b15}.classification-subcard.active{border-color:#4e9f86;box-shadow:0 0 0 2px #4e9f86}.classification-subcard .classification-illustration{width:100%;height:auto!important;aspect-ratio:720/440;object-fit:cover;display:block;border-radius:0!important;background:#132f33;margin:0!important}.classification-copy{padding:18px}.classification-copy strong{font-size:18px}.classification-copy p{font-size:13px;margin-top:7px;line-height:1.6}.classification-copy small{display:block;font-size:10px;color:var(--muted);margin-top:14px}.classification-toolbar{margin-bottom:20px}.classification-toolbar .pill{font-size:12px}.gram-lab{display:grid;grid-template-columns:1fr 1fr;gap:24px}.gram-sample{background:var(--card);border:1px solid var(--line);border-radius:21px;overflow:hidden}.gram-sample header{display:flex;align-items:center;justify-content:space-between;padding:19px 21px;gap:8px}.gram-sample header h3{font-size:22px;margin:0}.gram-sample header span{font-size:11px;background:var(--paper);padding:6px 9px;border-radius:30px;white-space:nowrap}.microscope-field{position:relative;height:220px;background:radial-gradient(ellipse at 45% 36%,#edf0e6,#c8d6ca);overflow:hidden}.microscope-field:after{content:'MODEL PANDANG MIKROSKOP';position:absolute;bottom:12px;left:15px;font-size:8px;font-weight:800;letter-spacing:.15em;color:#34564caa}.sample-cells{--dye:#c5cebf;position:absolute;inset:15px 10px;transition:filter .8s}.sample-cells i{position:absolute;left:calc(15% + var(--x,0%));top:var(--y,20%);width:29px;height:29px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffffff69,transparent 50%),var(--dye);box-shadow:inset -5px -5px 9px #00151b3b,0 3px 5px #00151b18;transition:background 1s,opacity 1s;transform:rotate(var(--rot,0deg))}.sample-cells i:nth-child(1){--x:5%;--y:12%}.sample-cells i:nth-child(2){--x:13%;--y:20%}.sample-cells i:nth-child(3){--x:8%;--y:34%}.sample-cells i:nth-child(4){--x:40%;--y:10%}.sample-cells i:nth-child(5){--x:48%;--y:20%}.sample-cells i:nth-child(6){--x:44%;--y:35%}.sample-cells i:nth-child(7){--x:20%;--y:58%}.sample-cells i:nth-child(8){--x:28%;--y:69%}.sample-cells i:nth-child(9){--x:20%;--y:78%}.sample-cells i:nth-child(10){--x:58%;--y:57%}.sample-cells i:nth-child(11){--x:65%;--y:68%}.sample-cells i:nth-child(12){--x:57%;--y:76%}.sample-cells.rods i{width:43px;height:18px;--rot:-30deg}.sample-cells.rods i:nth-child(even){--rot:24deg}.gram-lab[data-step='0'] .sample-cells,.gram-lab[data-step='1'] .sample-cells,.gram-lab[data-step='2'] [data-gram=positive] .sample-cells,.gram-lab[data-step='3'] [data-gram=positive] .sample-cells{--dye:#8050ae}.gram-lab[data-step='2'] [data-gram=negative] .sample-cells{--dye:#dbe0d3;opacity:.48}.gram-lab[data-step='3'] [data-gram=negative] .sample-cells{--dye:#d56792}.sample-drop{position:absolute;left:48%;top:-40px;width:17px;height:22px;border-radius:90% 10% 70% 50%;background:#9458c7;transform:rotate(-45deg);opacity:0}.dosing .sample-drop{animation:dose 1.2s ease-in}.gram-lab[data-step='1'] .sample-drop{background:#9e743b}.gram-lab[data-step='2'] .sample-drop{background:#d4eef2}.gram-lab[data-step='3'] .sample-drop{background:#dc7098}@keyframes dose{0%{top:-30px;opacity:1}70%{top:85px;opacity:1}100%{top:120px;opacity:0;transform:rotate(-45deg) scale(3)}}.wall-section{padding:18px 22px 0;min-height:116px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}.wall-layer{text-align:center;border-radius:4px;font-size:9px;letter-spacing:.03em;padding:4px;color:#254f43}.wall-layer.thick{height:42px;background:repeating-linear-gradient(0deg,#abc99d 0 3px,#c9ddb7 3px 7px);display:grid;place-items:center}.wall-layer.membrane{background:#70a68e;color:#fff}.wall-layer.outer{background:#9ebcaf;color:#163f36}.wall-layer.thin{background:#c9ddb7;padding:1px}.gram-lab[data-step='0'] .wall-layer.thick,.gram-lab[data-step='1'] .wall-layer.thick,.gram-lab[data-step='2'] .wall-layer.thick,.gram-lab[data-step='3'] .wall-layer.thick{background:repeating-linear-gradient(0deg,#b394cb 0 3px,#d5bee7 3px 7px)}.gram-lab[data-step='2'] .wall-layer.outer{border:1px dashed #9bb2a6;background:transparent}.gram-lab[data-step='3'] .wall-layer.thin{background:#e7b4c4}.gram-sample>p{font-size:12px;line-height:1.7;color:var(--muted);padding:13px 22px 22px}.gram-reagents{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}.gram-reagents .gram-stage{border:1px solid var(--line);border-radius:14px;text-align:left;padding:14px;background:var(--card);color:var(--ink);min-height:105px;position:relative}.gram-stage span{font-size:12px;font-weight:800;color:#63907b}.gram-stage strong,.gram-stage small{display:block}.gram-stage strong{font-size:13px;margin-top:7px}.gram-stage small{font-size:10px;color:var(--muted);margin-top:5px}.gram-stage.active{border-color:#547f62;box-shadow:0 0 0 1px #547f62}.gram-stage.done span:after{content:' ✓'}.gram-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.gram-controls button{font-size:12px;min-height:42px}.gram-explanation{background:#e8f1df;border-left:3px solid #79a861;border-radius:0 15px 15px 0;padding:21px;margin-top:20px;color:#193d2e}.gram-explanation h3{font-size:23px;margin:7px 0}.gram-explanation p{font-size:14px;line-height:1.7}.media-credit{font-size:10px;line-height:1.7;opacity:.7;padding-bottom:25px;padding-top:20px}.media-credit a{text-decoration:underline}.dark .map-copy h3,.dark .map-copy p{color:var(--ink)!important}.dark .classification-copy strong,.dark .classification-copy p{color:var(--ink)}.dark .gram-explanation{background:#243b2d;color:#e5eddf}.dark .gram-explanation .lab-kicker{color:#aed398}.dark .gram-sample header h3{color:var(--ink)}.dark .structure-interactive .structure-option{color:var(--ink)}.dark .video-copy h3{color:var(--ink)}[hidden]{display:none!important}
@media(max-width:1050px){.structure-layout{grid-template-columns:1fr!important}.cell-viewer{height:460px}.structure-interactive{display:block}.structure-parts .structure-option{font-size:12px}.learning-map-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:760px){.video-library{grid-template-columns:1fr}.classification-subcards{grid-template-columns:repeat(2,minmax(0,1fr))}.gram-lab{gap:12px}.gram-sample header{padding:14px 12px;flex-wrap:wrap}.gram-sample header h3{font-size:19px}.gram-sample>p{padding:12px;font-size:11px}.wall-section{padding:14px 10px 0}.sample-cells{transform:scale(.8);transform-origin:center}.gram-reagents{grid-template-columns:repeat(2,1fr)}.map-visual{height:180px!important}.model-heading{padding:18px 16px 0}.cell-viewer{height:380px}.inside{padding:18px!important}.classification-toolbar .pill{font-size:10px;max-width:65%}.model-heading .lab-kicker{font-size:9px}}
@media(max-width:480px){.learning-map-grid{grid-template-columns:1fr!important}.map-copy p{min-height:0}.map-visual{height:215px!important}.classification-subcards{gap:10px}.classification-copy{padding:12px}.classification-copy strong{font-size:15px}.classification-copy p{font-size:12px}.classification-copy small{font-size:9px}.classification-subcard{border-radius:13px}.cell-viewer{height:310px}.model-heading{align-items:start}.live-pill{font-size:8px}.structure-interactive{padding:18px!important}.microscope-field{height:185px}.sample-cells{inset:8px -30px}.wall-layer{font-size:8px}.gram-sample>p{min-height:130px}.gram-controls button{flex:1 1 130px}.lab-section-intro h3{font-size:25px}.section{padding-top:40px;padding-bottom:40px}.wrap{padding-left:14px;padding-right:14px}.hero{padding:25px!important}.classification-toolbar{align-items:start}.gram-sample header span{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal-on-scroll{opacity:1!important;transform:none!important}}
.school-monogram{width:64px;height:64px;flex-shrink:0;background:#e6efc9;border:1px solid #d7e3b4;border-radius:16px;color:#183d2b;display:flex;flex-direction:column;align-items:center;justify-content:center}.school-monogram span{font:bold 27px 'Fraunces',serif}.school-monogram small{font:700 8px 'DM Sans',sans-serif;letter-spacing:.2em}

.video-lesson{position:relative}.video-play{position:absolute;left:14px;top:14px;background:#e9f2de;color:#173b29;border:1px solid #ffffff80;box-shadow:0 4px 15px #0003;font-size:12px;font-weight:700;padding:9px 13px;border-radius:50px;min-height:38px}