:root {
  --ink: #16333f;
  --muted: #607984;
  --teal: #173e4d;
  --blue: #2e7894;
  --red: #e55548;
  --green: #29936f;
  --amber: #d89120;
  --border: #c9dadd;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 12% 4%, rgba(255,255,255,.95), transparent 26rem), linear-gradient(155deg, #eff6f5 0%, #dbe8e9 100%); }
button, input { font: inherit; }
button { touch-action: manipulation; }
.lab-page { width: min(1540px, 100%); margin: 0 auto; padding: 24px clamp(16px,3vw,44px) 28px; }
.lab-header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.brand-mark { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--teal); color: white; font-size: 1.55rem; font-weight: 900; box-shadow: 0 8px 20px rgba(20,57,71,.2); }
.eyebrow { margin: 0 0 2px; color: #e05247; font-size: .8rem; font-weight: 800; letter-spacing: .15em; }
h1 { margin: 0; font-size: clamp(1.45rem,2.4vw,2.35rem); line-height: 1.2; letter-spacing: -.035em; }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.lab-link { padding: 9px 13px; border: 1px solid #bfd0d3; border-radius: 999px; background: rgba(255,255,255,.82); color: #315868; font-size: .82rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.lab-link:hover { background: #e4edef; }
.zoom-control { display: grid; grid-template-columns: 34px 54px 34px; align-items: center; padding: 3px; border: 1px solid #bfd0d3; border-radius: 999px; background: rgba(255,255,255,.8); }
.zoom-control button { height: 30px; border: 0; border-radius: 999px; background: transparent; color: #315868; cursor: pointer; font-size: 1.1rem; font-weight: 850; line-height: 1; }
.zoom-control button:hover { background: #e4edef; }
.zoom-control button:disabled { opacity: .35; cursor: default; }
.zoom-control .zoom-value { font-size: .76rem; font-variant-numeric: tabular-nums; }
.status-pill { display: flex; align-items: center; gap: 9px; border: 1px solid #bfd0d3; background: rgba(255,255,255,.72); padding: 9px 14px; border-radius: 999px; color: #4f6974; font-size: .88rem; }
.status-pill span { width: 9px; height: 9px; border-radius: 50%; background: #78909a; }
.status-pill.closed span { background: var(--green); box-shadow: 0 0 0 5px rgba(41,147,111,.12); }

.experiment-shell { display: grid; grid-template-columns: minmax(0,1fr) 350px; border: 1px solid rgba(106,141,151,.5); border-radius: 26px; overflow: hidden; background: rgba(255,255,255,.8); box-shadow: 0 22px 60px rgba(28,63,74,.13); backdrop-filter: blur(12px); }
.visual-area { min-width: 0; background: #f8fbfa; }
.canvas-wrap { position: relative; min-width: 0; border-bottom: 1px solid #d4e1e2; }
canvas { display: block; width: 100%; height: auto; }
.canvas-tip { position: absolute; left: 18px; bottom: 13px; color: #56717b; background: rgba(255,255,255,.88); border: 1px solid #d2e1e2; border-radius: 999px; padding: 10px 16px; font-size: 1.52rem; font-weight: 750; pointer-events: none; }
.table-wrap { padding: 13px 16px 16px; overflow-x: auto; }
.table-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.table-heading > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.table-heading b { font-size: 1rem; }
.table-heading span { color: #6b828b; font-size: .76rem; }
.current-chip { color: #58717b; font-size: .76rem; background: #e6eff0; border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.current-chip strong { color: #173f4e; margin-left: 5px; font-size: .85rem; font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; min-width: 800px; font-size: .78rem; }
th { text-align: left; padding: 7px 8px; color: #647c85; font-weight: 750; background: #eaf1f2; border-bottom: 1px solid #cfdedf; }
td { padding: 8px; border-bottom: 1px solid #e0eaeb; color: #365662; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
.sample-tag { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: white; font-weight: 900; }

.control-panel { border-left: 1px solid #ccdddf; background: #f6faf9; padding: 18px; display: flex; flex-direction: column; gap: 13px; }
.control-heading { display: flex; justify-content: space-between; align-items: center; font-weight: 850; font-size: 1.08rem; }
.control-heading small { color: #6d838c; font-size: .72rem; font-weight: 650; background: #e7eff0; padding: 5px 8px; border-radius: 999px; }
.mode-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; background: #e4edef; padding: 4px; border-radius: 12px; }
.mode-button { border: 0; border-radius: 9px; background: transparent; color: #617983; min-height: 52px; cursor: pointer; padding: 5px 3px; }
.mode-button b, .mode-button span { display: block; }
.mode-button b { font-size: .82rem; }
.mode-button span { margin-top: 2px; font-size: .65rem; font-weight: 650; }
.mode-button.active { background: white; color: #173f4e; box-shadow: 0 2px 8px rgba(26,65,78,.12); }
.method-card { background: var(--teal); color: white; border-radius: 14px; padding: 12px 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.method-card > span { display: block; color: #bcd0d6; font-size: .7rem; margin-bottom: 5px; }
.method-card strong { display: block; font-size: .86rem; line-height: 1.45; }
.method-card p { margin: 5px 0 0; color: #c4d6db; font-size: .74rem; line-height: 1.5; }
.slider-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; color: #43616c; font-size: .8rem; font-weight: 700; }
.slider-row output { color: #173f4e; font-variant-numeric: tabular-nums; }
.slider-row input { grid-column: 1/-1; width: 100%; accent-color: var(--blue); }
.switch-button { width: 100%; min-height: 53px; border: 0; border-radius: 13px; background: var(--red); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 7px 17px rgba(223,78,68,.23); }
.switch-button.on { background: var(--green); box-shadow: 0 7px 17px rgba(41,147,111,.2); }
.switch-icon { font-size: 1.35rem; }
.switch-button b, .switch-button small { display: block; text-align: left; }
.switch-button b { font-size: .9rem; }
.switch-button small { margin-top: 1px; opacity: .8; font-size: .68rem; }
.heat-button { width: 100%; min-height: 53px; border: 0; border-radius: 13px; background: #d89120; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 7px 17px rgba(216,145,32,.22); }
.heat-button[hidden] { display: none; }
.heat-button.on { background: #e55c36; box-shadow: 0 7px 17px rgba(229,92,54,.24); }
.heat-icon { font-size: 1.35rem; line-height: 1; }
.heat-button b, .heat-button small { display: block; text-align: left; }
.heat-button b { font-size: .9rem; }
.heat-button small { margin-top: 1px; opacity: .86; font-size: .68rem; }
.meter-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.meter-grid div { background: white; border: 1px solid #d1e0e2; border-radius: 10px; padding: 8px 9px; display: flex; justify-content: space-between; align-items: baseline; }
.meter-grid span { color: #69818a; font-size: .74rem; font-weight: 800; }
.meter-grid strong { color: #173f4e; font-size: .8rem; font-variant-numeric: tabular-nums; }
.verify-card { border: 1px solid #d3e2e4; background: white; border-radius: 13px; padding: 10px 12px; }
.verify-card span, .observe-card span { display: block; font-size: .7rem; font-weight: 850; letter-spacing: .08em; color: #667f88; }
.verify-card strong { display: block; color: #2a6f88; font-size: .93rem; margin-top: 4px; }
.verify-card p, .observe-card p { margin: 4px 0 0; font-size: .76rem; line-height: 1.55; color: #5d7580; }
.observe-card { margin-top: auto; background: #fff6e6; border: 1px solid #f0dcae; border-radius: 13px; padding: 10px 12px; }
.observe-card span { color: #b57a12; }
.observe-card p { color: #6f582b; }
.conclusion-strip { margin-top: 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; border: 1px solid rgba(116,148,156,.4); border-radius: 17px; background: rgba(250,253,252,.8); padding: 13px 16px; }
.formula { color: #255368; background: #dfebed; border-radius: 10px; padding: 8px 13px; font: 800 1rem Cambria,"Times New Roman",serif; white-space: nowrap; }
.formula span { color: var(--red); }
.conclusion-strip p { margin: 0; color: #536e79; font-size: .82rem; line-height: 1.5; }
.conclusion-strip p strong { color: #183d4b; }
#resetButton { border: 1px solid #c7d8db; border-radius: 10px; background: white; color: #315868; min-height: 38px; padding: 0 12px; cursor: pointer; font-size: .76rem; font-weight: 750; }

@media (max-width:1080px) {
  .experiment-shell { grid-template-columns: 1fr; }
  .control-panel { border-left: 0; border-top: 1px solid #ccdddf; display: grid; grid-template-columns: 1fr 1fr; }
  .control-heading,.mode-tabs,.method-card,.switch-button,.heat-button,.meter-grid,.verify-card,.observe-card { grid-column: 1/-1; }
  .observe-card { margin-top: 0; }
}
@media (max-width:650px) {
  .lab-link { display: none; }
  .lab-page { padding: 14px 10px 20px; }
  .lab-header { align-items: flex-start; gap: 10px; }
  .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
  .eyebrow { font-size: .67rem; }
  .header-tools { position: absolute; top: 71px; right: 13px; z-index: 2; gap: 5px; }
  .zoom-control { grid-template-columns: 29px 44px 29px; }
  .zoom-control button { height: 27px; }
  .status-pill { padding: 6px 8px; font-size: .69rem; }
  .experiment-shell { border-radius: 18px; }
  .canvas-wrap { padding-top: 22px; }
  .canvas-tip { left: 7px; bottom: 6px; font-size: 1.28rem; padding: 8px 11px; }
  .control-panel { grid-template-columns: 1fr; padding: 14px; }
  .control-heading,.mode-tabs,.method-card,.switch-button,.heat-button,.meter-grid,.verify-card,.observe-card { grid-column: auto; }
  .conclusion-strip { grid-template-columns: 1fr; gap: 8px; padding: 11px; }
  #resetButton { width: 100%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }