:root{
  --bg:#f4f8fb;
  --panel:#fff;
  --ink:#17324d;
  --muted:#66788a;
  --line:#dbe6ee;
  --blue:#2f80ed;
  --blue-dark:#1f5fae;
  --green:#2fb36d;
  --green-dark:#1e7d4b;
  --shadow:0 18px 45px rgba(28,57,82,.10);
  --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 0%,rgba(47,128,237,.08),transparent 28rem),
    linear-gradient(180deg,#f8fbfd 0%,#eef5f9 100%);
}
button,input,select{font:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{
  outline:3px solid rgba(47,128,237,.28);
  outline-offset:2px;
}

.site-header,.page-shell,.site-footer{
  width:min(1220px,calc(100% - 32px));
  margin-left:auto;margin-right:auto;
}
.site-header{
  padding:24px 0 10px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  color:#fff;font-weight:800;letter-spacing:-1px;
  background:linear-gradient(135deg,var(--blue),#55a9f5);
  box-shadow:0 8px 20px rgba(47,128,237,.28);
}
.brand-name{font-weight:800;font-size:1.12rem}
.brand-tagline{font-size:.78rem;color:var(--muted);margin-top:2px}
.back-link{
  color:var(--blue-dark);text-decoration:none;font-weight:700;
  padding:10px 14px;border-radius:12px;
}
.back-link:hover{background:#eaf3ff}

.page-shell{padding-bottom:36px}
.hero,.mode-strip,.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero{
  margin:18px 0 14px;padding:30px 34px;
  display:flex;justify-content:space-between;gap:28px;align-items:center;
  background:linear-gradient(135deg,#fff 0%,#f6fbff 100%);
}
.eyebrow{
  color:var(--blue-dark);font-size:.78rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
}
.hero h1{
  margin:8px 0 10px;font-size:clamp(2rem,4vw,3.45rem);
  line-height:1.02;letter-spacing:-.04em;
}
.hero p{max-width:820px;margin:0;color:var(--muted);font-size:1.02rem;line-height:1.65}
.hero-badge{
  flex:0 0 auto;padding:10px 16px;border-radius:999px;
  background:#e8f7ef;color:var(--green-dark);font-weight:800;white-space:nowrap;
}
.use-cases{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.use-cases span{
  font-size:.73rem;font-weight:800;padding:7px 10px;border-radius:999px;
  color:#365f83;background:#edf5fb;border:1px solid #dae9f3;
}

.mode-strip{
  margin-bottom:20px;padding:15px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.mode-strip strong{display:block;font-size:.9rem}
.mode-strip p{margin:3px 0 0;color:var(--muted);font-size:.78rem;line-height:1.45}
.segmented{
  display:flex;background:#edf3f7;padding:4px;border-radius:12px;flex:0 0 auto;
}
.segment{
  border:0;background:transparent;color:#617485;font-weight:800;
  padding:9px 13px;border-radius:9px;cursor:pointer;
}
.segment.active{
  background:#fff;color:var(--blue-dark);
  box-shadow:0 3px 10px rgba(33,73,104,.10);
}

.lab-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.72fr);gap:20px}
.lower-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(420px,1fr);gap:20px;margin-top:20px}
.panel{overflow:hidden}
.panel-heading{
  padding:22px 24px 16px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:16px;
}
.panel-heading.compact{padding-bottom:8px}
.panel-heading h2{margin:0;font-size:1.12rem}
.panel-heading p{margin:5px 0 0;color:var(--muted);font-size:.9rem}

.status-pill{
  padding:7px 11px;border-radius:999px;background:#edf4f8;color:#516778;
  font-size:.78rem;font-weight:800;white-space:nowrap;
}
.status-pill.running{background:#fff4d7;color:#8a6519}
.status-pill.complete{background:#e8f7ef;color:var(--green-dark)}

.chamber-stage{padding:0 24px 24px}
.lamp-rig{
  height:130px;position:relative;display:flex;align-items:flex-start;justify-content:center;
  transition:height .25s ease;
}
.lamp{
  position:absolute;z-index:4;top:0;left:50%;transform:translateX(-50%);
  width:90px;height:64px;
}
.lamp-cap{
  width:90px;height:31px;background:linear-gradient(180deg,#41556a,#25384b);
  border-radius:46px 46px 10px 10px;box-shadow:0 6px 15px rgba(19,40,58,.22);
}
.lamp-bulb{
  width:42px;height:23px;margin:-1px auto 0;border-radius:0 0 22px 22px;
  background:#fff3bf;box-shadow:0 8px 24px rgba(255,227,118,.75);
}
.lamp-glow{
  position:absolute;z-index:2;top:39px;left:50%;transform:translateX(-50%);
  width:310px;height:185px;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,229,128,.28),rgba(255,229,128,.02));
  pointer-events:none;transition:.25s ease;
}
.lamp-label{
  position:absolute;z-index:5;top:58px;left:50%;transform:translateX(-50%);
  color:var(--muted);font-size:.7rem;font-weight:800;
}
.distance-guide{
  position:absolute;z-index:6;top:79px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;color:#7a8d9d;font-size:.67rem;
}
.distance-guide span{display:block;width:34px;border-top:1px dashed #9fb0bd}
.distance-guide strong{white-space:nowrap}

.tank-wrap{position:relative}
.tank-label{
  margin:0 0 7px;text-align:center;color:#63798a;font-size:.74rem;font-weight:800;
}
.tank{
  height:390px;border:6px solid #b7d2e1;border-top-width:8px;
  border-radius:18px 18px 28px 28px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#dff5fb 0%,#b9e5ee 60%,#8dc8d2 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65),inset 0 -25px 60px rgba(39,106,124,.12);
}
.water{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.10) 0 2px,transparent 2px 12px),
    linear-gradient(180deg,rgba(133,214,235,.10),rgba(46,145,170,.12));
  transition:.3s ease;
}

.sensor-cluster{
  position:absolute;top:15px;right:15px;display:flex;gap:8px;z-index:8;
}
.sensor{
  min-width:80px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.92);
  border:1px solid rgba(38,90,111,.15);box-shadow:0 8px 18px rgba(45,93,113,.12);
  backdrop-filter:blur(6px);
}
.sensor span{display:block;font-size:.65rem;font-weight:800;color:var(--muted)}
.sensor strong{font-size:1.1rem}
.sensor small{font-size:.62rem;color:var(--muted)}

.bubble-counter{
  position:absolute;top:15px;left:15px;z-index:9;
  min-width:124px;padding:9px 11px;border-radius:12px;
  background:rgba(255,255,255,.94);border:1px solid rgba(38,90,111,.15);
  box-shadow:0 8px 18px rgba(45,93,113,.12);
}
.bubble-counter span{display:block;font-size:.65rem;font-weight:800;color:var(--muted)}
.bubble-counter strong{display:block;font-size:1.35rem;margin-top:1px}
.bubble-counter small{font-size:.62rem;color:var(--muted)}

.substrate{
  position:absolute;left:0;right:0;bottom:0;height:55px;
  background:
    radial-gradient(circle at 15% 30%,#a88565 0 4px,transparent 5px),
    radial-gradient(circle at 45% 70%,#8c735c 0 5px,transparent 6px),
    radial-gradient(circle at 72% 25%,#baa189 0 4px,transparent 5px),
    linear-gradient(180deg,#ccb69d,#9d8067);
}

.elodea{
  position:absolute;left:50%;bottom:35px;width:185px;height:270px;
  transform:translateX(-50%) rotate(-2deg);
  transform-origin:50% 100%;
  animation:sway 4.5s ease-in-out infinite alternate;
}
@keyframes sway{
  from{transform:translateX(-50%) rotate(-3deg)}
  to{transform:translateX(-50%) rotate(2deg)}
}
.main-stem{
  position:absolute;left:89px;bottom:8px;width:8px;height:225px;border-radius:9px;
  background:linear-gradient(90deg,#276e45,#43aa66,#237346);
  transform:rotate(-1deg);box-shadow:inset 1px 0 rgba(255,255,255,.22);
}
.side-stem{
  position:absolute;width:5px;border-radius:8px;background:#398d59;transform-origin:bottom;
}
.side-stem-a{left:92px;bottom:92px;height:85px;transform:rotate(27deg)}
.side-stem-b{left:89px;bottom:55px;height:75px;transform:rotate(-28deg)}
.cut-tip{
  position:absolute;z-index:8;left:82px;top:24px;width:23px;height:23px;
  border-radius:50%;background:#c8e6bd;border:3px solid #2c8551;
  box-shadow:0 0 0 4px rgba(255,255,255,.30);
}
.cut-tip:after{
  content:"";position:absolute;inset:5px;border-radius:50%;background:#93bf81;
}
.cut-tip span{
  position:absolute;left:30px;top:1px;white-space:nowrap;color:#476a59;
  font-size:.62rem;font-weight:800;background:rgba(255,255,255,.76);
  padding:3px 6px;border-radius:6px;
}
.leaf{
  position:absolute;width:44px;height:15px;
  background:linear-gradient(135deg,#5bc677,#2d9856);
  border-radius:80% 15% 80% 15%;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.07);
  transform-origin:100% 50%;
}
.leaf:after{
  content:"";position:absolute;left:5px;right:5px;top:50%;height:1px;
  background:rgba(255,255,255,.27);
}
.l1{left:46px;top:55px;transform:rotate(18deg)}
.l2{left:95px;top:65px;transform:scaleX(-1) rotate(16deg)}
.l3{left:42px;top:78px;transform:rotate(5deg)}
.l4{left:98px;top:88px;transform:scaleX(-1) rotate(4deg)}
.l5{left:35px;top:101px;transform:rotate(-12deg)}
.l6{left:99px;top:112px;transform:scaleX(-1) rotate(-10deg)}
.l7{left:43px;top:126px;transform:rotate(12deg)}
.l8{left:101px;top:137px;transform:scaleX(-1) rotate(12deg)}
.l9{left:31px;top:150px;transform:rotate(-15deg)}
.l10{left:99px;top:160px;transform:scaleX(-1) rotate(-14deg)}
.l11{left:42px;top:178px;transform:rotate(7deg)}
.l12{left:100px;top:187px;transform:scaleX(-1) rotate(7deg)}
.l13{left:32px;top:205px;transform:rotate(-18deg)}
.l14{left:99px;top:215px;transform:scaleX(-1) rotate(-17deg)}
.l15{left:52px;top:229px;transform:rotate(10deg)}
.l16{left:96px;top:238px;transform:scaleX(-1) rotate(10deg)}
.l17{left:108px;top:108px;transform:scale(.82) rotate(46deg)}
.l18{left:112px;top:133px;transform:scale(.76) rotate(53deg)}
.l19{left:18px;top:142px;transform:scale(.78) rotate(-50deg)}
.l20{left:23px;top:165px;transform:scale(.72) rotate(-43deg)}

.bubble,.particle{position:absolute;border-radius:50%;pointer-events:none}
.bubble{
  border:2px solid rgba(255,255,255,.92);background:rgba(255,255,255,.16);
  animation:rise linear forwards;z-index:7;
}
.particle{
  width:7px;height:7px;background:rgba(65,112,125,.42);
  animation:drift linear forwards;
}
@keyframes rise{
  from{transform:translateY(0) scale(.8);opacity:.20}
  15%{opacity:.95}
  to{transform:translateY(-285px) scale(1.12);opacity:0}
}
@keyframes drift{
  from{transform:translate(0,0);opacity:0}
  15%{opacity:.65}
  to{transform:translate(var(--dx),var(--dy));opacity:0}
}

.rate-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px}
.rate-card{
  padding:14px;border:1px solid var(--line);border-radius:14px;background:#fbfdfe;
}
.rate-card span{display:block;font-size:.76rem;font-weight:800;color:var(--muted)}
.rate-card strong{display:block;font-size:1.35rem;margin-top:4px}
.rate-card small{color:var(--muted);font-size:.7rem}
.mini-meter{height:6px;border-radius:999px;background:#e7eef3;margin-top:9px;overflow:hidden}
.mini-meter i{display:block;height:100%;width:0;border-radius:999px;transition:width .25s ease}
#photoMeter{background:var(--green)}
#respMeter{background:#7f8ea3}
.net-card strong{font-size:1rem;margin-top:8px}
.prelab-message{
  margin-top:13px;padding:12px 14px;border-radius:12px;
  background:#f5f9fc;border:1px solid #dfeaf1;color:#526b7d;
  font-size:.78rem;line-height:1.45;
}
.prelab-message strong{color:#355c7c}

.controls-panel{padding-bottom:18px}
.control-group{padding:14px 24px;border-top:1px solid #edf2f5}
.control-group:first-of-type{border-top:none}
.control-group label{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;font-weight:800}
.control-group output{color:var(--blue-dark)}
.control-group input[type=range]{width:100%;margin:12px 0 5px;accent-color:var(--blue)}
.control-group select{
  width:100%;margin-top:10px;padding:11px 12px;border-radius:11px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
}
.range-labels{display:flex;justify-content:space-between;gap:8px;color:#8899a8;font-size:.65rem}
#intensityHint{text-align:center;flex:1}

.prediction-box{margin:10px 24px 0;padding:14px;border-radius:14px;background:#fbfdfe;border:1px solid var(--line)}
.prediction-heading{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.prediction-heading strong{font-size:.85rem}
.prediction-heading span{font-size:.65rem;color:var(--muted)}
.prediction-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:9px}
.prediction-btn{
  border:1px solid #d7e2ea;background:#fff;color:#5e7384;padding:8px 5px;
  border-radius:9px;cursor:pointer;font-weight:800;font-size:.73rem;
}
.prediction-btn.selected{background:#eaf3ff;border-color:#a9cdf6;color:var(--blue-dark)}
.prediction-status{font-size:.66rem;color:#8293a1;margin-top:8px;line-height:1.35}

.button-stack{display:grid;gap:9px;padding:16px 24px 8px}
.button-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.primary-btn,.secondary-btn,.text-btn{
  border:none;cursor:pointer;font-weight:800;border-radius:12px;
}
.primary-btn{
  color:#fff;background:linear-gradient(135deg,var(--blue),#4ba0f1);
  padding:13px 16px;box-shadow:0 8px 18px rgba(47,128,237,.25);
}
.primary-btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.primary-btn:disabled,.secondary-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.secondary-btn{
  padding:11px 12px;color:var(--blue-dark);background:#edf5ff;border:1px solid #d9eaff;
}
.text-btn{background:transparent;color:var(--blue-dark);padding:6px}
.small-btn{padding:9px 12px;font-size:.8rem}
.hint-box{
  margin:13px 24px 0;padding:14px;border-radius:13px;
  background:#f4faf7;border:1px solid #d9eee2;color:#3c604d;
}
.hint-box strong{font-size:.8rem}
.hint-box p{font-size:.76rem;line-height:1.5;margin:4px 0 0}

.procedure-strip{
  margin-top:20px;padding:16px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.procedure-strip div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.procedure-strip span{
  grid-row:1/3;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:#edf5ff;color:var(--blue-dark);font-weight:900;font-size:.76rem;
}
.procedure-strip strong{font-size:.78rem}
.procedure-strip small{color:var(--muted);font-size:.67rem;margin-top:1px}

.summary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.summary-card{padding:17px 20px}
.summary-card span{display:block;font-size:.72rem;font-weight:800;color:var(--muted)}
.summary-card strong{display:block;font-size:1.55rem;margin-top:4px}
.summary-card small{color:#8393a0;font-size:.67rem}

.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.74rem}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:12px;height:4px;border-radius:99px}
.legend-photo{background:var(--green)}
.legend-resp{background:#7f8ea3}
.chart-wrap{padding:0 18px 20px;height:320px}
#rateChart{width:100%;height:100%;display:block}

.table-actions{display:flex;gap:8px;align-items:center}
.table-wrap{padding:0 18px 20px;overflow:auto;max-height:365px}
table{width:100%;border-collapse:collapse;font-size:.74rem;min-width:760px}
th{
  text-align:left;color:#6f8191;font-size:.64rem;text-transform:uppercase;
  letter-spacing:.04em;padding:9px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:10px 9px;border-bottom:1px solid #edf2f5;white-space:nowrap}
tbody tr:hover{background:#f8fbfd}
.empty-row td{text-align:center;color:#8b9baa;padding:28px 12px}

.concept-panel{margin-top:20px;padding:0 24px 22px}
.concept-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 10px}
.concept-head h2{margin:0;font-size:1.12rem}
.concept-head p{margin:5px 0 0;color:var(--muted);font-size:.9rem}
.concept-view{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.equation-card{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fbfdfe}
.equation-label{display:block;color:var(--muted);font-size:.74rem;font-weight:800;margin-bottom:8px}
.equation{font-weight:800;line-height:1.45}
.equation-card p{margin:8px 0 0;color:var(--muted);font-size:.76rem;line-height:1.5}
.concept-note{
  grid-column:1/-1;padding:13px 15px;border-radius:12px;
  background:#fff8df;border:1px solid #f3e2a7;color:#67551d;font-size:.82rem;line-height:1.5;
}

.site-footer{
  margin-bottom:30px;padding:18px 4px;
  display:flex;justify-content:space-between;gap:18px;color:#718494;font-size:.76rem;
}

/* Mode behavior */
.prelab-mode .sensor-only{display:none!important}
.prelab-mode .sensor-only-cell{display:none}
.digital-mode .prelab-only{display:none!important}

@media (max-width:980px){
  .lab-grid,.lower-grid{grid-template-columns:1fr}
  .controls-panel{order:-1}
  .procedure-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .site-header,.hero,.mode-strip,.panel-heading,.concept-head,.site-footer{
    flex-direction:column;align-items:flex-start;
  }
  .hero{padding:24px}
  .hero-badge{align-self:flex-start}
  .segmented{width:100%}
  .segment{flex:1}
  .rate-cards,.summary-row{grid-template-columns:1fr}
  .tank{height:360px}
  .concept-view{grid-template-columns:1fr}
  .concept-note{grid-column:auto}
  .procedure-strip{grid-template-columns:1fr}
  .site-header,.page-shell,.site-footer{width:min(100% - 20px,1220px)}
}

.compact-control{padding-top:11px;padding-bottom:11px}
.power-row{display:flex;justify-content:space-between;align-items:center;gap:14px}
.power-row strong{display:block;font-size:.84rem}
.power-row small{display:block;margin-top:2px;color:var(--muted);font-size:.66rem}
.power-toggle{
  min-width:72px;border:1px solid #d6e2ea;background:#eef3f6;color:#71818d;
  padding:7px 10px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  gap:7px;font-size:.72rem;font-weight:900;cursor:pointer;
}
.power-toggle.on{background:#e8f7ef;border-color:#bee6cf;color:#1e7d4b}
.power-dot{width:9px;height:9px;border-radius:50%;background:#9aa8b3}
.power-toggle.on .power-dot{background:#2fb36d;box-shadow:0 0 0 4px rgba(47,179,109,.10)}