:root {
  --night: #090c21;
  --wall: #182541;
  --wall-dark: #10192f;
  --ink: #f5f2df;
  --cyan: #53e8e0;
  --pink: #ff4f9a;
  --lime: #c8ff52;
  --yellow: #ffd45a;
  --violet: #7057ff;
  --pixel: 4px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #e8c5e1; color: var(--ink); font-family: "Courier New", ui-monospace, monospace; image-rendering: pixelated; }
button { font: inherit; }
.lab-control { cursor: pointer; }
.lab-control:focus-visible { outline: 5px solid var(--yellow); outline-offset: 5px; }
.page-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: linear-gradient(145deg, #e95ab1, #ff8ca6 52%, #f8c96e); }
.lab-frame { width: min(1180px, 100%); border: 8px solid #2426a9; background: var(--night); box-shadow: 12px 14px 0 rgba(15, 10, 55, .36); }

.lab-header, .lab-footer { height: 45px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; background: #f3edda; color: #11152f; font-weight: 700; font-size: 12px; }
.lab-header > div { display: flex; align-items: center; gap: 10px; }
.lab-header h1 { margin: 0; font-size: 16px; letter-spacing: .08em; }
.status-light { width: 12px; height: 12px; border: 2px solid #11152f; background: var(--lime); box-shadow: 3px 3px 0 #11152f; }
.music-button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 3px solid #11152f; background: var(--yellow); color: #11152f; cursor: pointer; box-shadow: 3px 3px 0 #11152f; font-size: 11px; font-weight: 700; }
.music-button:hover, .music-button[aria-pressed="true"] { transform: translate(2px,2px); box-shadow: 1px 1px 0 #11152f; background: var(--pink); }
.speaker { font-size: 15px; }

.lab-room { position: relative; min-height: 660px; overflow: hidden; background: var(--wall); border-top: 5px solid #0a0d22; border-bottom: 5px solid #0a0d22; }
.lab-room::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 49%, rgba(255,255,255,.025) 50%, transparent 51%), linear-gradient(rgba(255,255,255,.02) 49%, transparent 50%); background-size: 32px 32px; }
.rain-window { position: absolute; top: 45px; left: 50%; width: 430px; height: 255px; transform: translateX(-50%); border: 14px solid #34223c; background: linear-gradient(#08142e, #102b4a); box-shadow: 8px 9px 0 #090c21; overflow: hidden; }
.object-switch{position:absolute;z-index:15;padding:5px 8px;border:4px solid #090c21;background:var(--cyan);color:#090c21;font-size:9px;font-weight:700;box-shadow:4px 4px 0 #090c21}.object-switch:hover,.object-switch[aria-pressed="true"]{background:var(--pink);transform:translate(2px,2px);box-shadow:2px 2px 0 #090c21}.rain-switch{top:57px;left:calc(50% - 190px)}
.rain-window::before, .rain-window::after { content:""; position:absolute; z-index:2; background:#34223c; }.rain-window::before{width:10px;inset:0 auto 0 50%;transform:translateX(-50%)}.rain-window::after{height:10px;inset:50% 0 auto;transform:translateY(-50%)}
.rain-window i { position: absolute; top: -20px; width: 3px; height: 24px; background: #71bfe0; animation: rain 1.4s linear infinite; }.rain-window i:nth-child(1){left:8%;animation-delay:.1s}.rain-window i:nth-child(2){left:18%;animation-delay:.7s}.rain-window i:nth-child(3){left:31%;animation-delay:.3s}.rain-window i:nth-child(4){left:44%;animation-delay:1s}.rain-window i:nth-child(5){left:55%;animation-delay:.5s}.rain-window i:nth-child(6){left:66%;animation-delay:.9s}.rain-window i:nth-child(7){left:76%;animation-delay:.2s}.rain-window i:nth-child(8){left:84%;animation-delay:.6s}.rain-window i:nth-child(9){left:93%;animation-delay:1.2s}.rain-window i:nth-child(10){left:39%;animation-delay:1.4s}
@keyframes rain { to { transform: translateY(290px); } }
.moon { position: absolute; width: 44px; height: 44px; right: 25px; top: 24px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 8px rgba(255,212,90,.1); }

.pipe { position:absolute; top:0; width:18px; height:190px; background:#596178; border-left:5px solid #2a3048; border-right:4px solid #81889b; }.pipe::after{content:"";position:absolute;bottom:-14px;left:-9px;width:30px;height:18px;background:#596178;border:4px solid #2a3048}.pipe-left{left:58px}.pipe-right{right:58px}
.lamp { position:absolute; top:18px; width:62px; height:38px; padding:0; border:8px solid #2c2942; border-bottom:0; background:var(--yellow); box-shadow:0 20px 0 rgba(255,212,90,.05)}.lamp i{position:absolute;width:8px;height:24px;left:19px;top:-31px;background:#2c2942}.lamp span{position:absolute;left:50%;top:8px;transform:translateX(-50%);color:#11152f;font-size:8px;font-weight:700}.lamp-left{z-index:15;left:235px}.lamp-right{right:235px}.lamp-left:hover{background:var(--cyan);box-shadow:0 20px 0 rgba(83,232,224,.11)}
.shelf { position:absolute; top:88px; width:170px; height:90px; padding:14px 14px 10px; display:flex; align-items:flex-end; gap:12px; border:8px solid #422b35; background:#281d33; box-shadow:7px 7px 0 #0d1026}.shelf-left{left:28px}.shelf-right{right:28px}.bottle{display:block;width:28px;border:5px solid #d7e3dc;border-top-width:8px}.bottle.cyan{height:43px;background:var(--cyan)}.bottle.pink{height:55px;background:var(--pink)}.bottle.lime{height:35px;background:var(--lime)}.book{display:block;width:20px}.b1{height:48px;background:var(--pink)}.b2{height:58px;background:var(--yellow)}.b3{height:40px;background:var(--cyan)}.jar{width:42px;height:48px;border:6px solid #d7e3dc;background:#7f5de0}

.workbench { position:absolute; z-index:3; left:50%; bottom:52px; width:650px; height:122px; transform:translateX(-50%); border:10px solid #301d2e; background:#7a4058; box-shadow:10px 10px 0 #090c21 }.workbench i{position:absolute;bottom:-95px;width:34px;height:90px;background:#422738;border:7px solid #271526}.workbench i:nth-child(1){left:20px}.workbench i:nth-child(2){left:50%;transform:translateX(-50%)}.workbench i:nth-child(3){right:20px}
.terminal { position:absolute; z-index:4; left:95px; bottom:176px; padding:0; border:0; background:transparent }.terminal:hover{transform:translateY(-5px)}.terminal-screen{width:150px;height:108px;border:12px solid #b5ad9c;background:#061c24;box-shadow:7px 7px 0 #090c21}.terminal-screen span{display:block;width:62px;height:8px;margin:39px auto;background:var(--cyan);box-shadow:0 16px 0 var(--pink)}.terminal-base{width:170px;height:24px;margin-left:-10px;background:#9b927f;border:6px solid #4d4650}
.microscope { position:absolute; z-index:4; right:110px; bottom:176px; width:150px; height:150px; padding:0; border:0; background:transparent }.microscope:hover{transform:translateY(-5px)}.scope-eye{position:absolute;right:24px;top:0;width:34px;height:22px;background:#d8d1bd;border:7px solid #42445c}.scope-arm{position:absolute;right:46px;top:19px;width:24px;height:83px;background:#7b84a0;border:7px solid #34384f;transform:rotate(26deg)}.scope-stage{position:absolute;left:25px;bottom:35px;width:92px;height:18px;background:#d8d1bd;border:6px solid #34384f}.scope-base{position:absolute;left:9px;bottom:0;width:130px;height:33px;background:#66718e;border:8px solid #34384f}

.specimen-entry { position:absolute; z-index:9; left:50%; top:166px; width:282px; transform:translateX(-50%); color:var(--ink); text-align:center; text-decoration:none; filter:drop-shadow(8px 9px 0 #090c21) }.entry-tag{display:inline-block;padding:6px 9px;background:#0b102c;border:4px solid var(--cyan);color:var(--cyan);font-size:9px;letter-spacing:.08em}.petri-display{position:relative;display:block;width:250px;height:250px;margin:7px auto;border:10px solid #e7dfc9;border-radius:50%;overflow:hidden;background:#050713;box-shadow:0 0 0 7px #4d36b8}.petri-display img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);image-rendering:auto;filter:saturate(1.14) contrast(1.05)}.scan-line{position:absolute;inset:0;background:linear-gradient(transparent 48%,rgba(83,232,224,.28) 50%,transparent 52%);background-size:100% 18px;mix-blend-mode:screen;pointer-events:none}.specimen-entry strong{display:block;margin-top:5px;padding:7px;background:var(--pink);color:#0b102c;border:5px solid #0b102c;font-size:15px;letter-spacing:.04em}.specimen-entry small{display:inline-block;margin-top:4px;padding:4px 7px;background:var(--lime);color:#0b102c;font-size:9px;font-weight:700}.specimen-entry:hover{transform:translateX(-50%) translateY(-7px)}.specimen-entry:hover .petri-display{box-shadow:0 0 0 7px var(--pink),0 0 0 15px rgba(255,79,154,.16)}
.locked-sample{position:absolute;z-index:5;bottom:175px;width:78px;height:78px;border:7px solid #42445c;background:#11182d;color:#8790a9;box-shadow:6px 6px 0 #090c21}.locked-sample span,.locked-sample b{display:block}.locked-sample span{font-size:9px}.locked-sample b{font-size:11px}.sample-a{left:300px}.sample-b{right:300px}
.floor-grid{position:absolute;inset:auto 0 0;height:125px;background:linear-gradient(90deg,transparent 49%,#222a48 50%,transparent 51%),linear-gradient(transparent 49%,#222a48 50%,transparent 51%),#11162e;background-size:64px 64px;transform:perspective(250px) rotateX(35deg);transform-origin:bottom}.room-hint{position:absolute;z-index:12;left:50%;bottom:13px;transform:translateX(-50%);margin:0;padding:6px 10px;background:#080b1c;color:#d8d1bd;font-size:10px;white-space:nowrap}
.lab-message{position:absolute;z-index:13;left:50%;bottom:47px;transform:translateX(-50%);width:max-content;max-width:90%;padding:7px 10px;border:4px solid #080b1c;background:var(--cyan);color:#080b1c;font-size:9px;font-weight:700;text-align:center;box-shadow:4px 4px 0 #080b1c}
.lab-room.rain-sound .rain-window i{background:#e8fdff;animation-duration:.68s}.lab-room.rain-sound .moon{box-shadow:0 0 0 8px rgba(255,212,90,.2),0 0 26px var(--yellow)}
.lab-room.uv-mode{background:#2c1f55}.lab-room.uv-mode .lamp-left{background:var(--pink);box-shadow:0 22px 0 rgba(255,79,154,.15)}.lab-room.uv-mode .petri-display{box-shadow:0 0 0 7px var(--cyan),0 0 38px rgba(83,232,224,.48)}
.lab-room.focus-mode .petri-display img{transform:scale(1.42);filter:saturate(1.35) contrast(1.12)}.lab-room.focus-mode .scan-line{background-size:100% 9px}
.lab-room[data-groove="1"] .terminal-screen span{width:92px;background:var(--pink);box-shadow:0 16px 0 var(--yellow)}.lab-room[data-groove="2"] .terminal-screen span{width:42px;background:var(--lime);box-shadow:-28px 16px 0 var(--pink),28px 16px 0 var(--cyan)}
.lab-footer a{color:#11152f}.lab-footer span:nth-child(2){letter-spacing:.08em}

@media (max-width: 820px) {
  .page-shell{padding:0}.lab-frame{min-height:100vh;border-width:5px}.lab-header{height:52px}.lab-header h1{font-size:13px}.lab-room{min-height:690px}.music-button{font-size:9px}.rain-window{top:40px;width:76%;height:220px}.lamp{display:block;transform:scale(.72);transform-origin:top center}.lamp-left{left:90px}.lamp-right{right:90px}.shelf{transform:scale(.72);transform-origin:top}.shelf-left{left:-18px}.shelf-right{right:-18px}.terminal{left:15px;bottom:175px;transform:scale(.7);transform-origin:bottom left}.microscope{right:10px;bottom:175px;transform:scale(.7);transform-origin:bottom right}.workbench{width:88%;height:105px}.specimen-entry{top:185px;width:230px}.petri-display{width:200px;height:200px}.locked-sample{display:none}.room-hint{font-size:8px}.lab-footer{height:60px;gap:8px;font-size:8px}.lab-footer span:nth-child(2){display:none}
}
@media (prefers-reduced-motion: reduce) { .rain-window i{animation:none}.specimen-entry,.music-button{transition:none} }