:root{--ink:#183f37;--green:#126c60;--cream:#f6f4eb;--muted:#63766d;--line:#d8dfd3;--orange:#c96f3d}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}.wrap{max-width:1200px;margin:auto;padding-left:28px;padding-right:28px}header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:var(--green);text-underline-offset:4px}.home{font-size:14px;text-decoration:none;font-weight:bold}.intro{display:flex;align-items:center;justify-content:space-between;padding:36px 0 26px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--green)}h1{font-size:clamp(34px,5vw,62px);line-height:1.06;letter-spacing:-3px;margin:14px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--green)}.subtitle{font-size:16px;line-height:1.5;margin:0;color:var(--muted)}button{border:1px solid #baccc0;background:#fffdf5;color:var(--ink);border-radius:8px;padding:11px 15px;min-height:44px;cursor:pointer;font-weight:700;font-size:13px;touch-action:manipulation}button:hover{background:#e3eddf}button:focus-visible,a:focus-visible{outline:3px solid #d9913c;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#0d5148}.intro-actions{display:flex;gap:8px}.dashboard{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 18px;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}.dashboard>div{background:#fbfaf4;padding:17px 24px}.dashboard span{display:block;font-size:10px;letter-spacing:1.2px;color:var(--muted);margin-bottom:7px}.dashboard strong{font-size:29px;font-weight:500}.dashboard b{font-weight:500}.dashboard small{font-size:16px;color:var(--muted)}.lab{border:1px solid #c8d6c8;border-radius:15px;overflow:hidden;background:#fbfaf4;box-shadow:0 8px 24px #17392b08}.lab-heading{display:flex;justify-content:space-between;gap:10px;padding:16px 22px;font-size:12px}.lab-heading i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#509c78;margin-right:7px}.scene{height:310px;position:relative;background:#dae6d5}canvas{display:block;width:100%;height:100%;touch-action:manipulation}.scene-note{position:absolute;top:10px;right:14px;color:#526c5b;font-size:9px;letter-spacing:1.4px;pointer-events:none}.welcome{position:absolute;inset:0;padding:35px 40px;background:#f9f7ed url('assets/peroxisome-patrol-cover.png') center/cover;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}.welcome:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f7f5ebfa 0%,#f7f5ebd9 35%,transparent 75%)}.welcome>*{position:relative;max-width:370px}.welcome h2{font-size:34px;letter-spacing:-1px;margin:6px 0}.welcome p{line-height:1.5;margin:8px 0 16px}.welcome span{font-size:11px;margin-top:12px;color:var(--muted)}.message{padding:12px 22px;font-size:12px;background:#edf0e4;color:#3c5b48;min-height:42px}.stations{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px}.station{border:1px solid var(--line);border-radius:10px;padding:16px;background:#fffdf7}.station.selected{border:2px solid var(--green);padding:15px}.station-top{display:flex;align-items:center;justify-content:space-between}.station h3{font-size:14px;margin:0}.select{padding:4px 8px;min-height:32px;font-size:11px}.meter-label{font-size:11px;display:flex;justify-content:space-between;margin:15px 0 6px}.meter{height:7px;border-radius:9px;background:#e7eadf;overflow:hidden}.meter>i{display:block;height:100%;width:0;background:#57a490;transition:width .1s}.meter.hot>i{background:#d76b4a}.job{font-size:11px;color:var(--muted);margin:10px 0;min-height:14px}.station-actions{display:flex;gap:6px;flex-wrap:wrap}.station-actions button{flex:1;padding:9px 6px;font-size:11px}.upgrade{width:100%;margin-top:7px;min-height:34px;font-size:11px;padding:7px}.toolbar{display:flex;align-items:center;gap:8px;padding:0 18px 16px}.toolbar p{margin:0 auto 0 0;font-size:12px}.toolbar span{display:block;color:var(--muted);font-size:10px;margin-top:5px}.lesson{margin:30px 0 44px}.lesson>div{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.lesson h3{font-size:15px}.lesson article p{font-size:13px;line-height:1.65;color:var(--muted)}.limits{font-size:11px;color:var(--muted);line-height:1.6}.lesson>a{font-size:11px}.about{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:25px;padding:28px 0}.about-star{font-size:44px;color:var(--orange)}.about p{font-size:12px;line-height:1.8;flex:1}.device-note{font-size:9px;line-height:1.9;color:var(--muted)}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:100px;font-size:10px;color:var(--muted)}footer img{width:110px}dialog{border:1px solid var(--line);border-radius:16px;background:var(--cream);color:var(--ink);max-width:580px;width:calc(100% - 32px);padding:30px;max-height:85dvh;overflow:auto;box-shadow:0 25px 90px #0003}dialog::backdrop{background:#143a32aa}dialog h2{font-size:30px;margin:12px 0}dialog p,dialog li{font-size:14px;line-height:1.6}dialog li{margin-bottom:10px}.close{float:right;font-size:24px;padding:4px 12px}.hidden{display:none!important}@media(max-width:700px){.wrap{padding-left:16px;padding-right:16px}header{height:68px}.intro{padding-top:24px;gap:12px;align-items:flex-start;flex-direction:column}h1{letter-spacing:-1.5px}.intro-actions{align-self:flex-end}.dashboard>div{padding:12px 8px}.dashboard strong{font-size:23px}.dashboard span{font-size:8px;letter-spacing:.4px}.dashboard small{font-size:12px}.scene{height:260px}.welcome{padding:22px}.welcome h2{font-size:29px}.welcome>*{max-width:270px}.welcome:before{background:linear-gradient(90deg,#f7f5ebfa,#f7f5ebbd)}.stations{grid-template-columns:1fr;padding:12px}.station{padding:12px}.station.selected{padding:11px}.station-actions{flex-wrap:nowrap}.station .upgrade{margin-top:6px}.meter-label{margin-top:9px}.job{margin:7px 0}.toolbar{flex-wrap:wrap;padding:0 12px 12px}.toolbar p{flex-basis:100%;margin-bottom:6px}.lesson>div{grid-template-columns:1fr;gap:0}.lesson{margin-bottom:24px}.about{flex-wrap:wrap;gap:12px}.about p{flex-basis:75%}.device-note{margin-left:48px}footer{flex-wrap:wrap;padding-top:24px;padding-bottom:24px;gap:16px}.lab-heading{padding:13px 12px;font-size:10px}}