:root{color:#24342f;font-synthesis:none;text-rendering:optimizelegibility;background:#fff8dd;font-family:PingFang TC,Noto Sans TC,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,input,textarea,select{font:inherit}a{color:inherit}main{background:radial-gradient(circle at 10% 10%,#ffbbd68c,#0000 24%),radial-gradient(circle at 90% 2%,#91e0d98c,#0000 23%),linear-gradient(#fffaf0 0%,#fff5d6 48%,#efffe8 100%);min-height:100vh;padding:28px clamp(18px,5vw,72px) 38px;position:relative;overflow:hidden}.background-bubbles{pointer-events:none;z-index:0;opacity:.28;position:fixed;inset:0}.background-bubbles span{aspect-ratio:1;animation:12s ease-in-out infinite alternate bubble;animation-delay:calc(var(--i) * -.8s);border:2px solid #438c7b;border-radius:50%;position:absolute}.hero,.gallery-section,.safety-note,.setup-panel,footer{z-index:1;position:relative}.hero{background:#ffffffd1;border:3px solid #263d37;border-radius:42px;grid-template-columns:1.25fr .75fr;align-items:center;gap:30px;max-width:1280px;margin:0 auto;padding:clamp(34px,6vw,78px);display:grid;box-shadow:12px 14px #263d371f}.eyebrow{letter-spacing:.1em;color:#c45a7a;margin:0 0 12px;font-weight:800}.hero h1{letter-spacing:-.07em;white-space:nowrap;margin:0;font-size:clamp(1.9rem,7vw,5.4rem);line-height:.98}.lead{max-width:700px;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.8}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.primary-button,.secondary-button{appearance:none;cursor:pointer;border:2px solid #24342f;border-radius:999px;padding:14px 22px;font-weight:900;text-decoration:none;transition:transform .18s,box-shadow .18s}.primary-button{background:#ffdd62;box-shadow:5px 6px #24342f}.secondary-button{background:#fff}.primary-button:hover,.secondary-button:hover:not(:disabled){transform:translateY(-3px)}.secondary-button:disabled{cursor:not-allowed;opacity:.5}.status-line{color:#58726a;min-height:1.6em;margin-bottom:0}.hero-petri{aspect-ratio:1;background:radial-gradient(circle at 30% 25%,#fff7c6,#d5ffc6 50%,#96d9c4);border:15px solid #fffc;border-radius:50%;outline:3px solid #24342f;justify-self:center;width:min(100%,360px);animation:5s ease-in-out infinite petri-float;position:relative;box-shadow:inset 0 0 30px #24342f33,12px 18px #ff9ebf47}.hero-colony{filter:drop-shadow(0 4px 2px #0000001f);border-radius:50%;position:absolute}.hero-colony:before,.hero-colony:after{content:"";border-radius:inherit;background:inherit;position:absolute}.hero-colony.c1{background:#ff8daf;border-radius:50% 44% 55% 45%;width:27%;height:20%;top:24%;left:16%}.hero-colony.c2{aspect-ratio:1;background:#7b70d9;width:18%;top:18%;right:20%}.hero-colony.c3{aspect-ratio:1;background:#ffcc56;width:23%;bottom:18%;left:37%}.hero-colony.c4{aspect-ratio:1;background:#368a77;width:9%;bottom:30%;right:18%;box-shadow:-45px 24px #368a77,-18px -12px #368a77}.safety-note{background:#fff0f5;border:2px dashed #b65370;border-radius:20px;max-width:1100px;margin:24px auto 0;padding:17px 22px;line-height:1.7}.gallery-section{max-width:1280px;margin:70px auto 0}.section-heading{justify-content:space-between;align-items:end;gap:16px;margin-bottom:26px;display:flex}.section-heading p{color:#c45a7a;letter-spacing:.12em;margin:0;font-weight:900}.section-heading h2{margin:4px 0 0;font-size:clamp(2rem,4vw,3.4rem)}.section-heading>span{background:#fff;border:2px solid #24342f;border-radius:999px;padding:8px 15px;font-weight:800}.gallery-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px;display:grid}.microbe-card{--card-angle:0deg;--float-delay:0s;transform:rotate(var(--card-angle));animation:6s ease-in-out infinite card-float;animation-delay:var(--float-delay);border:3px solid #24342f;border-radius:30px;padding:17px;transition:transform .25s,box-shadow .25s;position:relative;box-shadow:9px 11px #24342f2b}.microbe-card:hover{z-index:2;transform:rotate(0)translateY(-9px)scale(1.015);box-shadow:12px 16px #24342f38}.theme-mint{background:#caffdd}.theme-sunset{background:#ffd5af}.theme-lavender{background:#ddd4ff}.theme-ocean{background:#bfeaff}.theme-candy{background:#ffcde5}.petri-frame{aspect-ratio:1;background:#fffbd7;border:10px solid #ffffffd1;border-radius:50%;outline:3px solid #24342f;overflow:hidden;box-shadow:inset 0 0 24px #24342f38}.petri-frame img{object-fit:cover;width:100%;height:100%;display:block}.demo-colonies{background:radial-gradient(circle,#fffbd2,#bfe8cf);width:100%;height:100%;position:relative}.demo-colonies i{background:#f88ba9;border-radius:50%;display:block;position:absolute;box-shadow:0 3px 7px #00000021}.demo-colonies i:first-child{width:27%;height:23%;top:16%;left:16%}.demo-colonies i:nth-child(2){aspect-ratio:1;background:#7265ca;width:13%;top:22%;right:18%}.demo-colonies i:nth-child(3){aspect-ratio:1;background:#e8b638;width:18%;bottom:16%;left:43%}.demo-colonies i:nth-child(4){aspect-ratio:1;background:#4a9c80;width:7%;bottom:25%;left:22%}.demo-colonies i:nth-child(5){aspect-ratio:1;background:#4a9c80;width:9%;bottom:34%;right:18%}.demo-colonies i:nth-child(6){aspect-ratio:1;background:#f88ba9;width:5%;top:46%;right:36%}.card-copy{padding:22px 7px 4px}.card-label{background:#ffffffa6;border:2px solid #24342f;border-radius:999px;padding:5px 10px;font-size:.78rem;font-weight:900;display:inline-block}.card-copy h2{margin:10px 0 5px;font-size:1.65rem}.discoverer{color:#58665f;margin:0 0 15px;font-weight:800}dl{gap:11px;margin:0;display:grid}dl div{background:#ffffff94;border-radius:15px;padding:10px 12px}dt{color:#8d4960;font-size:.75rem;font-weight:900}dd{margin:4px 0 0;line-height:1.5}.card-footer{color:#55655e;justify-content:space-between;gap:10px;margin-top:15px;font-size:.75rem;font-weight:800;display:flex}.empty-state,.setup-panel{text-align:center;background:#ffffffb3;border:3px dashed #678c80;border-radius:28px;padding:34px}.setup-panel{max-width:900px;margin:46px auto 0}.setup-panel code{word-break:break-word;background:#fff;border-radius:6px;padding:2px 6px}footer{text-align:center;color:#60746c;border-top:2px solid #24342f33;max-width:1280px;margin:60px auto 0;padding-top:22px}@keyframes petri-float{50%{transform:translateY(-10px)rotate(2deg)}}@keyframes card-float{50%{translate:0 -7px}}@keyframes bubble{to{transform:translate(18px,-26px)scale(1.2)}}@media (width<=760px){main{padding-inline:14px}.hero{border-radius:30px;grid-template-columns:1fr;padding:30px 22px}.hero-petri{grid-row:1;width:min(78vw,300px)}.section-heading{flex-direction:column;align-items:start}.microbe-card{transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}