/* Tecertools field-guide surfaces; native classroom interactions retained. */
:root { color-scheme: light; }
button, select, input, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #0f766e; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.demo-indicator { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 60; padding: 8px 14px; background: #fff; color: #334155; border-radius: 999px; font: 12px/1.4 system-ui, sans-serif; box-shadow: 0 2px 10px #0001; pointer-events: none; }
@media (max-width: 600px) { .demo-indicator { top: 72px; font-size: 12px; } }

.inspiration-credit { display:block; margin-top:32px; padding-top:12px; border-top:1px solid #e2e8f0; font:10px/1.5 system-ui,sans-serif; color:#64748b; }
.inspiration-credit a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
figure[hidden] { display:none !important; }

:root { --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --safari-paper:#f5eedc; --safari-ink:#193c36; }
body { background:#f5eedc; color:#193c36; font-family:var(--font-sans); }
.scene-stage[data-background="painted"] .backdrop { inset:0 !important; width:100% !important; min-width:0 !important; transform:none !important; }
.scene-stage[data-background="painted"] .backdrop > svg { display:block; width:100%; height:100%; }
.field-guide-specimen { overflow:visible; }
.field-guide-note { display:block; }
.note-text { font-family:Georgia,"Noto Serif",serif !important; font-weight:500 !important; color:#193c36; line-height:1.2; }
[class~="bg-white"], [class~="bg-white/95"], [class~="bg-white/90"] { background-color:#fbf6e8 !important; }
[class~="text-slate-900"], [class~="text-slate-700"] { color:#193c36 !important; }
[class~="text-slate-600"], [class~="text-slate-500"] { color:#4d655c !important; }
[class~="bg-slate-900"] { background-color:#193c36 !important; }
[class~="border-slate-300"] { border-color:#b8c0a7 !important; }
[class~="rounded-2xl"] { border-radius:14px; border:1px solid #c4c6ab; box-shadow:0 12px 32px #173b3620 !important; }
button[class~="size-11"], label[class~="size-11"] { border-radius:12px; border:1px solid #c4c6ab; box-shadow:none !important; }
h1,h2,h3 { letter-spacing:-.015em; text-wrap:balance; }
:lang(ta) h1,:lang(ta) h2,:lang(ta) button { letter-spacing:normal; }
.demo-indicator { background:#fbf6e8; color:#193c36; border:1px solid #c4c6ab; border-radius:9px; box-shadow:none; }

/* Painted distance, independently moving middle canopy and close foliage. */
.scene-stage .backdrop > .habitat-painting { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.habitat-atmosphere, .habitat-middle, .habitat-near { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.habitat-atmosphere { isolation:isolate; }
.habitat-layer { position:absolute; }
.habitat-layer img { display:block; width:100%; height:auto; user-select:none; }
.canopy { width:32%; top:-5%; transform-origin:0 12%; animation:habitat-canopy-sway 11s ease-in-out infinite alternate; }
.canopy--left { left:-4%; }
.canopy--right { right:-6%; width:27%; top:-7%; transform:scaleX(-1); transform-origin:100% 12%; animation:habitat-canopy-right 14s ease-in-out -6s infinite alternate; }
.canopy--distant { left:-8%; top:8%; width:24%; opacity:.6; filter:blur(1px); animation-duration:19s; animation-delay:-9s; }
.undergrowth { width:20%; bottom:-6%; transform-origin:20% 100%; animation:habitat-fern-sway 8s ease-in-out -2s infinite alternate; }
.undergrowth--left { left:-5%; }
.undergrowth--right { right:-5%; width:17%; transform:scaleX(-1); transform-origin:80% 100%; animation:habitat-fern-right 10s ease-in-out -6s infinite alternate; }
.habitat-atmosphere--savanna .canopy { width:23%; top:-8%; }
.habitat-atmosphere--savanna .canopy--distant { display:none; }
.habitat-atmosphere--savanna .undergrowth { width:15%; bottom:-7%; }
.habitat-atmosphere--prehistoric .canopy { display:none; }
.habitat-atmosphere--reef .undergrowth { width:19%; animation-duration:6s; }
.habitat-mist { position:absolute; top:25%; left:-20%; width:140%; height:30%; background:radial-gradient(ellipse at 45% 60%,#e4f6db20,transparent 65%); animation:habitat-mist-drift 32s ease-in-out infinite alternate; }
.habitat-atmosphere--arctic .habitat-mist { top:50%; background:radial-gradient(ellipse,#eefaff35,transparent 65%); }
.habitat-waterlight { position:absolute; inset:0; background:repeating-linear-gradient(108deg,transparent 0 12%,#e5ffff0a 14%,transparent 19%); mix-blend-mode:screen; animation:habitat-water-light 13s ease-in-out infinite alternate; }
.habitat-starlight { position:absolute; inset:0; background:radial-gradient(circle at 18% 23%,#e2fff5a0 0 1px,transparent 2px),radial-gradient(circle at 74% 18%,#ffedd5b0 0 1px,transparent 2px),radial-gradient(circle at 82% 62%,#e2fff590 0 1px,transparent 2px); animation:habitat-star-glow 8s ease-in-out infinite alternate; }
@keyframes habitat-canopy-sway { from {transform:rotate(-1deg)} to {transform:rotate(1.6deg)} }
@keyframes habitat-canopy-right { from {transform:scaleX(-1) rotate(-1.3deg)} to {transform:scaleX(-1) rotate(1deg)} }
@keyframes habitat-fern-sway { from {transform:rotate(-1.8deg) skewX(-.8deg)} to {transform:rotate(2deg) skewX(.8deg)} }
@keyframes habitat-fern-right { from {transform:scaleX(-1) rotate(-2deg)} to {transform:scaleX(-1) rotate(1.8deg)} }
@keyframes habitat-mist-drift { from {transform:translateX(-3%);opacity:.4} to {transform:translateX(3%);opacity:.8} }
@keyframes habitat-water-light { from {transform:translateX(-2%);opacity:.25} to {transform:translateX(2%);opacity:.65} }
@keyframes habitat-star-glow { from {opacity:.3} to {opacity:.85} }
[data-habitat-paused="true"] .habitat-atmosphere *, [data-frozen="true"] .habitat-atmosphere * { animation-play-state:paused !important; }
@media(max-width:600px) { .canopy {width:45%;top:-2%} .canopy--right {width:38%} .canopy--distant {width:30%} .undergrowth {width:28%} .undergrowth--right {width:24%} }
@media(prefers-reduced-motion:reduce) { .habitat-atmosphere * {animation:none !important;} }
/* The stage must clip world-sized content without becoming a scroll container. */
.relative.h-dvh.w-full.overflow-hidden { overflow:clip; }

/* Living Malaysian forest study: animated SVG parts, never a flattened picture. */
.scene-stage[data-background="living"] .backdrop { inset:0 !important; width:100% !important; }
.living-forest {display:block;width:100%;height:100%;overflow:hidden;}
.living-forest--ambient {position:absolute;inset:0;pointer-events:none;}
.lf-tree {animation:lf-tree-breathe 20s ease-in-out infinite alternate;}
.lf-branch {animation:lf-branch-sway 14s ease-in-out infinite alternate;}
.lf-leaf {animation:lf-leaf-turn 8s ease-in-out infinite alternate;}
.lf-vine {animation:lf-vine-swing 13s ease-in-out infinite alternate;}
.lf-frond {animation:lf-frond-wave 10s ease-in-out infinite alternate;}
.lf-palm {animation:lf-palm-wave 13s ease-in-out infinite alternate;}
.lf-grass {animation:lf-grass-wave 7s ease-in-out infinite alternate;}
.lf-mote {animation:lf-mote-drift 14s linear infinite;}
@keyframes lf-tree-breathe {from{transform:rotate(-.45deg)}to{transform:rotate(.6deg)}}
@keyframes lf-branch-sway {from{transform:rotate(-1.1deg)}to{transform:rotate(1.3deg)}}
@keyframes lf-leaf-turn {from{transform:rotate(-2deg)}to{transform:rotate(2.4deg)}}
@keyframes lf-vine-swing {from{transform:rotate(-1deg)}to{transform:rotate(1.8deg)}}
@keyframes lf-frond-wave {from{transform:rotate(-1.8deg)}to{transform:rotate(2.2deg)}}
@keyframes lf-palm-wave {from{transform:rotate(-1.3deg)}to{transform:rotate(1.9deg)}}
@keyframes lf-grass-wave {from{transform:skewX(-2deg)}to{transform:skewX(2.5deg)}}
@keyframes lf-mote-drift {0%{opacity:0;transform:translate(0,18px)}25%,70%{opacity:.6}100%{opacity:0;transform:translate(24px,-30px)}}
.scene-stage[data-habitat-paused="true"] .living-forest *, .scene-stage[data-frozen="true"] .living-forest * {animation-play-state:paused !important;}
@media(prefers-reduced-motion:reduce){.living-forest *{animation:none !important;}}
.lf-ripple {transform-box:fill-box;transform-origin:center;animation:lf-pond-ripple 9s ease-out infinite;}
@keyframes lf-pond-ripple {0%{transform:scale(.5);opacity:0}20%{opacity:.6}100%{transform:scale(1.5);opacity:0}}
.lf-cloud {animation:lf-cloud-drift 70s ease-in-out infinite alternate;}
@keyframes lf-cloud-drift {from{transform:translateX(-15px)}to{transform:translateX(35px)}}
.lr-soft {animation:lr-current 12s ease-in-out infinite alternate;}
.lr-light {animation:lr-light-shift 22s ease-in-out infinite alternate;}
.lr-bubble {animation:lr-bubble-rise 17s linear infinite;}
@keyframes lr-current {from{transform:rotate(-1.2deg) skewX(-.8deg)}to{transform:rotate(1.8deg) skewX(.8deg)}}
@keyframes lr-light-shift {from{transform:translateX(-8px);opacity:.12}to{transform:translateX(12px);opacity:.21}}
@keyframes lr-bubble-rise {0%{opacity:0;transform:translate(0,15px)}15%,75%{opacity:.45}100%{opacity:0;transform:translate(8px,-135px)}}

/* Reuse the reference reef's exact rising-particle and seaweed animation cycles. */
.lr-original-weed {animation:ease-in-out infinite alternate weed-sway;}
.lr-original-plankton {animation:linear infinite plankton-drift;}
.ls-nebula {animation:ls-nebula-breathe 45s ease-in-out infinite alternate;}
.ls-nebula--right {animation-delay:-22s;animation-duration:56s;}
.ls-star {animation:ls-star-glow 11s ease-in-out infinite alternate;}
.ls-far-stars {animation:ls-star-drift 80s ease-in-out infinite alternate;}
@keyframes ls-nebula-breathe {from{transform:translate(0,0);opacity:.65}to{transform:translate(9px,-6px);opacity:1}}
@keyframes ls-star-glow {from{opacity:.35}to{opacity:.9}}
@keyframes ls-star-drift {from{transform:translate(-3px,0)}to{transform:translate(9px,-4px)}}
.lp-frond {animation:lp-plant-sway 14s ease-in-out infinite alternate;}
@keyframes lp-plant-sway {from{transform:rotate(-1.3deg)}to{transform:rotate(1.8deg)}}

/* Polar shore: slow motion belongs to the sky, water and small grasses. */
.la-aurora {transform-origin:960px 180px;animation:la-sky-breathe 21s ease-in-out infinite alternate;}
.la-floe {animation:la-ice-bob 10s ease-in-out infinite alternate;}
.la-grass {transform-origin:0px 0px;animation:la-grass-sway 12s ease-in-out infinite alternate;}
.la-snow {animation:la-snowfall 30s linear infinite;}
@keyframes la-sky-breathe {from{opacity:.65;transform:translateY(-5px) scaleY(.97)}to{opacity:1;transform:translateY(6px) scaleY(1.04)}}
@keyframes la-ice-bob {from{transform:translate(0,-3px) rotate(-.6deg)}to{transform:translate(6px,3px) rotate(.7deg)}}
@keyframes la-grass-sway {from{transform:rotate(-2deg)}to{transform:rotate(3deg)}}
@keyframes la-snowfall {from{transform:translate(-32px,-220px)}to{transform:translate(67px,440px)}}

.scene-stage[data-background="supplied"] .backdrop {inset:0!important;width:100%!important;}
.supplied-piece {will-change:auto;}
.sa-sway {animation:sa-plant 14s ease-in-out infinite alternate;}
.sa-hang {animation:sa-vine 18s ease-in-out infinite alternate;}
.sa-bob {animation:la-ice-bob 10s ease-in-out infinite alternate;}
.sa-drift {animation:sa-space-drift 21s ease-in-out infinite alternate;}
.sa-breathe {animation:la-sky-breathe 21s ease-in-out infinite alternate;}
.sa-bubble {animation:sa-bubble-rise 18s linear infinite;}
@keyframes sa-plant {from{transform:rotate(-1.1deg)}to{transform:rotate(1.3deg)}}
@keyframes sa-vine {from{transform:rotate(-1.5deg)}to{transform:rotate(2deg)}}
@keyframes sa-space-drift {from{transform:translate(-5px,-4px) rotate(-3deg)}to{transform:translate(7px,5px) rotate(3deg)}}
@keyframes sa-bubble-rise {0%{transform:translate(0,100px);opacity:0}15%{opacity:.4}80%{opacity:.35}100%{transform:translate(28px,-640px);opacity:0}}

/* Keep native Borneo/space backdrop sizing; fill the frame for authored living scenes. */
.scene-stage[data-background="hybrid"] .backdrop:has(> .living-forest) {inset:0!important;width:100%!important;}
.hybrid-details {pointer-events:none;}

/* A common gust cycle links nearby plants, with different bending amplitudes. */
.scene-stage[data-background="hybrid"]:has(.environment-effects[data-environment="forest"], .environment-effects[data-environment="jungle"], .environment-effects[data-environment="savanna"], .environment-effects[data-environment="prehistoric"]) :is(.sa-sway,.sa-hang,.lf-frond,.lf-palm,.lf-grass,.lf-vine,.lf-branch,.lp-frond) {
 animation-name:ef-shared-wind!important;animation-duration:18s!important;animation-delay:0s!important;animation-direction:normal!important;animation-timing-function:cubic-bezier(.77,0,.175,1)!important;
}
.sa-sway,.lf-frond,.lp-frond {--wind-bend:1.3deg;}
.sa-hang,.lf-vine {--wind-bend:1.8deg;}
.lf-branch {--wind-bend:.65deg;}
.lf-grass {--wind-bend:2deg;}
.environment-effects {pointer-events:none;overflow:hidden;}
.environment-effects g {transform-box:view-box;}
.ef-mote {opacity:0;animation:ef-mote-drift 28s linear infinite;}
.ef-leaf-fall {opacity:0;animation:ef-leaf-fall 28s linear infinite;}
.ef-leaf-roll {animation:ef-leaf-roll 12s ease-in-out infinite;}
.ef-water-ring {opacity:0;transform-origin:0px 0px;animation:ef-water-ring 12s ease-out infinite;}
.ef-water-glint {opacity:.15;animation:ef-water-glint 18s ease-in-out infinite alternate;}
.ef-canopy-light {opacity:.035;animation:ef-light-breathe 21s ease-in-out infinite alternate;}
.ef-mist {opacity:0;animation:ef-mist-drift 21s ease-in-out infinite;}
.ef-reef-light {opacity:.035;animation:ef-light-drift 21s ease-in-out infinite alternate;}
.ef-bubble {opacity:0;animation:ef-bubble-rise 28s linear infinite;}
.ef-caustic {opacity:0;animation:ef-caustic-drift 21s ease-in-out infinite;}
.ef-snow-near {opacity:0;animation:ef-snow-drift 28s linear infinite;}
.ef-star {opacity:.25;animation:ef-star-soft 28s ease-in-out infinite alternate;}
.ef-star-distance {animation:ef-star-distance 80s ease-in-out infinite alternate;}
.ef-star-near {animation:ef-star-near 70s ease-in-out infinite alternate;}
@keyframes ef-shared-wind {0%,25%,100%{transform:rotate(-.25deg)}45%{transform:rotate(var(--wind-bend,1.3deg))}62%{transform:rotate(.1deg)}78%{transform:rotate(calc(var(--wind-bend,1.3deg)*.5))}}
@keyframes ef-mote-drift {0%,100%{opacity:0}15%,75%{opacity:.36}0%{transform:translate(-18px,24px)}100%{transform:translate(57px,-53px)}}
@keyframes ef-leaf-fall {0%,14%{opacity:0;transform:translate(0,0)}19%{opacity:.55}53%{opacity:.45}61%,100%{opacity:0;transform:translate(117px,533px)}}
@keyframes ef-leaf-roll {0%,100%{transform:rotate(-22deg)}50%{transform:rotate(34deg) scaleX(.6)}}
@keyframes ef-water-ring {0%{opacity:0;transform:scale(.65)}20%{opacity:.45}100%{opacity:0;transform:scale(1.75)}}
@keyframes ef-water-glint {from{opacity:.12;transform:translateX(-3px)}to{opacity:.48;transform:translateX(5px)}}
@keyframes ef-light-breathe {from{opacity:.025}to{opacity:.055}}
@keyframes ef-mist-drift {0%,100%{opacity:0}25%,65%{opacity:.6}0%{transform:translate(-8px,3px) scale(.9)}100%{transform:translate(23px,-17px) scale(1.12)}}
@keyframes ef-light-drift {from{opacity:.025;transform:translateX(-12px)}to{opacity:.065;transform:translateX(16px)}}
@keyframes ef-bubble-rise {0%,100%{opacity:0}12%,75%{opacity:.42}0%{transform:translate(0,0)}100%{transform:translate(35px,-670px)}}
@keyframes ef-caustic-drift {0%,100%{opacity:0}35%,70%{opacity:.23}0%{transform:translate(-9px,2px) scale(.95)}100%{transform:translate(15px,-3px) scale(1.07)}}
@keyframes ef-snow-drift {0%,100%{opacity:0}15%,80%{opacity:.4}0%{transform:translate(-48px,-165px)}100%{transform:translate(102px,445px)}}
@keyframes ef-star-soft {from{opacity:.2}to{opacity:.65}}
@keyframes ef-star-distance {from{transform:translate(-2px,0)}to{transform:translate(3px,-1px)}}
@keyframes ef-star-near {from{transform:translate(-4px,1px)}to{transform:translate(7px,-3px)}}
/* Explicit gates win over the wind overrides and include native Borneo foliage. */
.scene-stage[data-background="hybrid"][data-habitat-paused="true"] *, .scene-stage[data-background="hybrid"][data-frozen="true"] * {animation-play-state:paused!important;}
@media(prefers-reduced-motion:reduce) {
 .scene-stage[data-background="hybrid"]:has(.environment-effects) * {animation:none!important;}
 .environment-effects :is(.ef-mote,.ef-leaf-fall,.ef-mist,.ef-bubble,.ef-caustic,.ef-snow-near,.ef-water-ring) {display:none;}
 .environment-effects :is(.ef-star,.ef-water-glint) {opacity:.25;}
}
@media(prefers-reduced-motion:reduce) {
 .scene-stage[data-background="hybrid"]:has(.environment-effects[data-environment="forest"],.environment-effects[data-environment="jungle"],.environment-effects[data-environment="savanna"],.environment-effects[data-environment="prehistoric"]) :is(.sa-sway,.sa-hang,.lf-frond,.lf-palm,.lf-grass,.lf-vine,.lf-branch,.lp-frond) {animation:none!important;}
}
.habitat-ambient-shell {position:absolute;inset:0;pointer-events:none;overflow:hidden;}

/* Part groups are driven per animal by animal-life.js (variables are unset for animals it does not drive). */
.creature .part-head{animation:none;transform:rotate(calc(var(--head,0deg)*var(--k,1)))}
.creature .part-tail{animation:none;transform:rotate(calc(var(--tail,0deg)*var(--k,1)))}
.creature .part-ears{animation:none;transform:rotate(calc(var(--ear,0deg)*var(--k,1)))}
.creature .part-wings{animation:none;transform:rotate(calc(var(--wing,0deg)*var(--k,1)))}
.creature .part-wings-far{animation:none;transform:rotate(calc(var(--wing,0deg)*var(--k,1)*-1))}

/* Rigged sprites: HTML layers stacked in one box (see src/rigs.js). Mirrors the runtime's rules for .creature>svg. */
.creature>.rig{position:relative;width:100%;aspect-ratio:240/170;display:block}
.rig>[data-rig-img],.rig [data-rig],.rig [data-rig-img]{position:absolute;inset:0}
.rig img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.rig [data-rig]{will-change:transform}
.creature[data-tier=uncommon]:not(.settled)>.rig{animation:3.2s ease-in-out infinite glow-uncommon}
.creature[data-tier=rare]:not(.settled)>.rig{animation:2.4s ease-in-out infinite glow-rare}
.creature.settled[data-tier=uncommon]>.rig{animation:2s ease-out forwards glow-uncommon-settle}
.creature.settled[data-tier=rare]>.rig{animation:2s ease-out forwards glow-rare-settle}
@media (prefers-reduced-motion:reduce){
.creature[data-tier=uncommon]:not(.settled)>.rig{filter:drop-shadow(0 0 calc(.6 * var(--wu)) #d2faf5cc);animation:none}
.creature[data-tier=rare]:not(.settled)>.rig{filter:drop-shadow(0 0 calc(.8 * var(--wu)) #ffd166e6);animation:none}}
.creature .part-leg-fn{animation:none;transform:rotate(calc(var(--leg-fn,0deg)*var(--k,1)))}
.creature .part-leg-ff{animation:none;transform:rotate(calc(var(--leg-ff,0deg)*var(--k,1)))}
.creature .part-leg-hn{animation:none;transform:rotate(calc(var(--leg-hn,0deg)*var(--k,1)))}
.creature .part-leg-hf{animation:none;transform:rotate(calc(var(--leg-hf,0deg)*var(--k,1)))}
.creature .part-trunk{animation:none;transform:rotate(calc(var(--trunk,0deg)*var(--k,1)))}
.creature .part-reach{animation:none;transform:rotate(calc(var(--reach,0deg)*var(--k,1)))}

/* Vine for the gibbons' rope swing (animal-life.js): a thin green rope with a leafy tuft where it hangs from. */
.vine{position:absolute;left:0;top:0;transform-origin:50% 0;margin-left:-1px;pointer-events:none;border-radius:2px;background:linear-gradient(#6a9a42,#3e6b2a);opacity:0}
.vine::before{content:'';position:absolute;left:50%;top:0;width:calc(3.4 * var(--wu));height:calc(2.3 * var(--wu));margin:calc(-1.5 * var(--wu)) 0 0 calc(-1.7 * var(--wu));border-radius:50% 50% 45% 55%;background:radial-gradient(circle at 35% 40%,#7fb552,#3f7a35 70%);box-shadow:calc(1.2 * var(--wu)) calc(.4 * var(--wu)) 0 calc(-.3 * var(--wu)) #4f8a3c}

/* Limbs for climbing primates (animal-life.js): drawn between the mid-ground trunks, under the climbers (their z-index is 500-525). */
.bough{position:absolute;inset:0;z-index:495;pointer-events:none;overflow:visible}
.bough svg{display:block;width:100%;height:100%;overflow:visible}