:root {
  color-scheme: dark;
  --ink: #f2f3f5;
  --muted: #9ba3ac;
  --paper: #10171e;
  --panel: #141b22;
  --line: #323c45;
  --accent: #ff8a16;
  --green: #82ff00;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(ellipse at 46% 45%, #1b232d55, transparent 70%), var(--paper); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
button { color: inherit; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.lab-header { height: 72px; display: flex; align-items: center; gap: 6vw; padding: 0 2.75vw; border-bottom: 1px solid #263039; background: #0a0f15; }
.brand { display: inline-flex; align-items: center; min-width: 132px; }
.brand-logo { display: block; width: 124px; height: 46px; border-radius: 8px; object-fit: contain; }
.lab-header nav { display: flex; gap: 40px; align-self: stretch; }
.lab-header nav a { display: flex; align-items: center; gap: 7px; font-size: 16px; color: #b6bcc4; padding: 0 12px; border-bottom: 2px solid transparent; }
.lab-header nav a:hover { color: white; }
.lab-header nav .active { color: #fff; border-color: var(--accent); }
.lab-mark { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #b4bac1; font-size: 14px; white-space: nowrap; }
main { max-width: 1680px; padding: 24px 2.75vw 0; margin: auto; }
.page-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
h1 { margin: 0; font-size: clamp(29px, 3vw, 44px); line-height: 1.35; letter-spacing: 1px; font-weight: 650; }
.page-intro p { margin: 8px 0 0; font-size: 19px; color: #aab1ba; letter-spacing: .4px; }
.quiet-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #56606a; background: #0e151b55; border-radius: 6px; padding: 11px 18px; font-size: 14px; line-height: 20px; transition: background .18s, border-color .18s; }
.quiet-button:hover { background: #27313c; border-color: #aab1ba; }
.page-intro > button { margin-top: 6px; }
.workspace { display: grid; grid-template-columns: minmax(250px, .58fr) 1fr 1fr; gap: 12px; }
.guide-panel, .device-panel { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(130deg, #10161b50, #1b242c35); min-width: 0; }
.guide-panel { padding: 23px 17px 18px; display: flex; flex-direction: column; }
.guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; }
h2, h3 { margin: 0; }
.guide-heading h2 { font-size: 21px; font-weight: 600; white-space: nowrap; }
.text-button { padding: 3px 0; background: none; border: 0; color: #a4acb6; font-size: 12px; line-height: 1.5; }
.text-button:hover { color: var(--accent); }
.exercises { display: flex; flex-direction: column; margin: 17px 0 10px; }
.exercise { display: flex; text-align: left; align-items: flex-start; gap: 11px; width: 100%; padding: 14px 11px; background: transparent; border: 1px solid transparent; border-bottom-color: #303942; position: relative; }
.exercise:last-child { border-bottom-color: transparent; }
.exercise.selected { border-radius: 6px; background: #242c35a3; border-color: #3a424a; }
.exercise.selected::before { content: ''; position: absolute; inset: 3px auto 3px -1px; width: 3px; background: var(--accent); border-radius: 3px; }
.exercise:hover { background: #202932; }
.step-no { border: 1px solid #4a535d; background: linear-gradient(145deg,#46505a,#222831); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 17px; }
.selected .step-no { border-color: var(--accent); background: var(--accent); color: #101820; }
.exercise strong { display: block; font-size: 17px; font-weight: 500; line-height: 1.75; }
.exercise.selected strong { color: var(--accent); }
.exercise small { display: block; color: #a4abb4; font-size: 12px; line-height: 1.8; }
.done-mark { display: none; color: #abd587; font-size: 15px; margin-left: auto; align-self: center; }
.exercise.complete .done-mark { display: block; }
.current-action { padding: 18px 9px 16px; border-top: 1px solid #303942; min-height: 130px; }
.section-label, .key-guide h3 { color: #b4bac2; font-size: 14px; font-weight: 400; }
#guide-text { font-size: 15px; line-height: 1.75; margin: 10px 0 5px; }
#guide-text b { color: var(--accent); font-weight: 500; }
.help-copy { color: #8793a0; font-size: 12px; line-height: 1.8; margin: 0; }
.key-guide { padding: 6px 9px; margin-top: auto; }
.key-guide dl { margin: 12px 0 10px; display: grid; gap: 9px; }
.key-guide dl > div { display: flex; align-items: center; gap: 12px; }
.key-guide dt { width: 29px; height: 29px; border: 1px solid #adb6c0; border-radius: 50%; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; background: linear-gradient(145deg,#3c4650,#0f1419); }
.key-guide .ok-legend { color: var(--accent); border-color: var(--accent); font-size: 13px; }
.key-guide dd { margin: 0; color: #aeb6c0; font-size: 12px; }
.keyboard-note { color: #758290; font-size: 11px; line-height: 1.7; margin: 12px 0; }
.device-panel { display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 17px 16px 12px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 15px 12px; }
.panel-heading h2 { font-size: 18px; font-weight: 500; letter-spacing: .5px; white-space: nowrap; }
.panel-heading h2 > span { color: #d6dde5; margin-right: 4px; font-variant-numeric: tabular-nums; }
.live-dot, .tiny-dot { width: 6px; height: 6px; background: #8ab596; display: inline-block; border-radius: 50%; }
.live-dot { box-shadow: 0 0 8px #89b59755; }
.device { position: relative; width: clamp(247px, 18.8vw, 290px); aspect-ratio: 655 / 1535; flex-shrink: 0; isolation: isolate; }
.device-photo { position: absolute; width: 127.6336%; height: 122.4756%; max-width: none; left: -13.7405%; top: -8.7948%; user-select: none; pointer-events: none; filter: drop-shadow(0 15px 16px #0005); }
.screen { position: absolute; left: 21.2214%; top: 20.7818%; width: 58.168%; height: 24.4951%; background: #020605; border-radius: 4%; overflow: hidden; border: 1px solid #0e2018; box-shadow: 0 0 12px #7dff0010, inset 0 0 18px #27642b1a; container-type: inline-size; }
.screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; background: linear-gradient(126deg,#a6ced607,transparent 40%,#4da77705); box-shadow: inset 0 0 4px #000; }
.screen-body { width: 100%; height: 100%; position: relative; font-family: Arial,"PingFang SC","Microsoft YaHei",sans-serif; font-size: 7.4cqw; line-height: 1.3; color: #f8fff9; transform: rotate(var(--rotation, 0deg)); transition: transform .3s; text-shadow: 0 0 6px #b9ffc524; }
.device-caption { margin: 12px 0 0; font-size: 11px; letter-spacing: .3px; line-height: 1.6; color: #8693a2; text-align: center; min-height: 18px; }
.device-caption .tiny-dot { margin-right: 5px; width: 5px; height: 5px; }
.hardware-key { position: absolute; top: 51.1401%; width: 16.1832%; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; background: transparent; padding: 0; transition: box-shadow .16s, background .16s, transform .16s; }
.key-ok { left: 13.5878%; }
.key-up { left: 32.2137%; }
.key-down { left: 50.9924%; }
.key-back { left: 69.771%; }
.hardware-key:hover { background: #ff971a17; box-shadow: 0 0 0 2px #ff9a42, 0 0 16px #ff930c55; }
.hardware-key:active, .hardware-key.pressed { background: #ff9e3333; transform: scale(.95); box-shadow: 0 0 10px #ffa34288; }
.hardware-key.suggested { border-color: #ffbd74; box-shadow: 0 0 0 3px #ff8a1630, 0 0 18px #ff951955; animation: key-glow 2.3s ease-in-out infinite; }
@keyframes key-glow { 50% { box-shadow: 0 0 0 5px #ff8a1618, 0 0 24px #ff951988; } }
.signal-bars { position: absolute; top: 3%; left: 4%; display: flex; gap: 1.3cqw; align-items: flex-end; height: 6%; }
.signal-bars i { display: block; width: 1.6cqw; background: #4caa8e; }
.signal-bars i:nth-child(1) { height: 35%; }.signal-bars i:nth-child(2) { height: 65%; }.signal-bars i:nth-child(3) { height: 100%; }
.gauge { position: absolute; left: 5%; top: 10%; width: 90%; height: 77%; overflow: visible; }
.gauge path { fill: none; stroke-linecap: butt; stroke-width: 6; }
.gauge .gauge-track { stroke: #183509; }.gauge .gauge-light { stroke: var(--green); filter: drop-shadow(0 0 3px #77ff0055); }
.alarm-label { position: absolute; top: 3%; right: 4%; color: #ff3c4d; font-size: 7.8cqw; font-weight: 700; line-height: 1; text-shadow: 0 0 5px #ff3c4d66; }
.screen-body.is-alarm .flow-value { color: #ff3c4d; text-shadow: 0 0 7px #ff3c4d66; }
.screen-body.is-alarm .gauge-track { stroke: #481017; }
.screen-body.is-alarm .gauge-light { stroke: #ff3c4d; filter: drop-shadow(0 0 3px #ff3c4d77); }
.flow-label { position: absolute; top: 23%; left: 0; width: 100%; text-align: center; font-size: 7cqw; }
.flow-value { position: absolute; top: 36%; left: 3%; width: 94%; text-align: center; font-size: 21cqw; font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.7cqw; }
.flow-value.compact { font-size: 16cqw; top: 39%; }
.flow-unit { position: absolute; top: 64%; left: 0; width: 100%; text-align: center; font-size: 8.1cqw; }
.total-line { position: absolute; bottom: 5%; left: 5%; width: 90%; display: flex; justify-content: space-between; gap: 3%; white-space: nowrap; font-size: 7.1cqw; font-variant-numeric: tabular-nums; }
.total-line.large-total { font-size: 6cqw; }
.lcd-heading { display: flex; justify-content: space-between; gap: 4%; margin: 0 6%; padding: 7% 0 3%; border-bottom: 1px solid #c9d5ca8c; font-size: 7.1cqw; white-space: nowrap; }
.lcd-heading span:last-child { font-size: 6.2cqw; }
.lcd-menu { padding: 3% 4%; display: flex; flex-direction: column; height: 74%; }
.lcd-row { display: flex; justify-content: space-between; align-items: center; gap: 3%; min-height: 31%; border: 1.5px solid transparent; padding: 3% 4%; border-radius: 6px; font-size: 7.1cqw; white-space: nowrap; }
.lcd-row.selected { border-color: var(--green); box-shadow: 0 0 4px #7bff0024; }
.lcd-row.center { justify-content: center; }
.lcd-row.disabled { color: #6c7c73; }
.lcd-row small { font-size: 6.4cqw; }
.english .lcd-row { font-size: 6.3cqw; }
.english .lcd-row small { font-size: 5.9cqw; }
.lcd-number { display: flex; justify-content: center; margin-top: 8%; font-size: var(--number-size,19cqw); line-height: 1.4; font-variant-numeric: tabular-nums; letter-spacing: -.6cqw; }
.lcd-digit { min-width: .55em; text-align: center; }
.lcd-digit.active { background: #b4bab4; color: #020502; text-shadow: none; }
.lcd-number-unit { margin-top: 5%; text-align: center; font-size: 8cqw; }
.lcd-footnote { position: absolute; bottom: 7%; left: 6%; right: 5%; font-size: 7cqw; }
.lcd-info { padding: 9% 7%; font-size: 7cqw; line-height: 1.9; }
.lcd-info p { margin: 0 0 4%; }
.lcd-info .muted { color: #8ba894; font-size: 6.3cqw; }
.zero-value { text-align: center; font-size: 18cqw; margin-top: 8%; font-variant-numeric: tabular-nums; }
.zero-label { text-align: center; margin-top: 8%; }
.saved-strip { display: grid; grid-template-columns: auto 1.2fr 1fr 1fr .8fr; align-items: center; gap: 17px; padding: 12px 20px; margin-top: 12px; border: 1px solid var(--line); border-radius: 9px; background: #ffffff04; }
.saved-label { display: flex; align-items: center; gap: 6px; color: #a2acb7; font-size: 11px; padding-right: 15px; border-right: 1px solid #3b444c; }
.saved-strip > div { display: flex; justify-content: space-between; align-items: center; border: 1px solid #3b444c; border-radius: 5px; padding: 11px 13px; font-size: 13px; gap: 9px; min-width: 0; }
.saved-strip > div > span { color: #9ea8b3; white-space: nowrap; }
.saved-strip strong { font-weight: 400; color: #dce1e7; white-space: nowrap; font-variant-numeric: tabular-nums; }
.simulation-bar { display: flex; align-items: center; gap: 25px; border: 1px solid var(--line); border-radius: 9px; margin-top: 12px; padding: 18px 22px; background: #ffffff02; }
.simulation-bar h2 { font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; padding-right: 20px; border-right: 1px solid #303942; white-space: nowrap; }
.flow-range { flex: 1; min-width: 150px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 26px; }
.flow-range > div:first-child { display: flex; align-items: center; gap: 13px; grid-row: 1 / 3; }
.flow-range label { font-size: 13px; color: #aab2bc; white-space: nowrap; }
.flow-range output { color: #baff42; font-size: 22px; white-space: nowrap; min-width: 104px; font-variant-numeric: tabular-nums; }
.flow-range output small { color: #ccd2d8; font-size: 12px; }
input[type=range] { width: 100%; margin: 0; accent-color: #a6d831; cursor: pointer; height: 22px; }
input[type=range]:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
.range-ticks { display: flex; justify-content: space-between; color: #7c8998; font-size: 11px; }
.pause-button { border-color: #7c5937; min-width: 132px; }
.pause-button > span:first-child { color: var(--accent); font-weight: 700; }
.simulation-bar > p { font-size: 12px; color: #a0a9b4; line-height: 1.6; margin: 0; white-space: nowrap; }
.simulation-bar > p span { color: #788694; }
.output-reading { flex: 0 0 150px; border-left: 1px solid #303942; padding-left: 22px; }
.output-reading > span { color: #aab2bc; font-size: 12px; }
.output-reading > div { color: #baff42; margin-top: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.output-reading strong { font-size: 24px; font-weight: 500; }
.output-reading #output-unit { margin-left: 7px; font-size: 12px; color: #ccd2d8; }
.output-reading > small { display: block; color: #8997a6; font-size: 10px; margin-top: 2px; }
.output-reading.is-alarm > div, .output-reading.is-alarm > small { color: #ff6571; }
.feedback-row { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; font-size: 12px; color: #8c9aa9; padding: 0 5px; min-height: 42px; }
#status { line-height: 1.6; margin: 12px 0; }
#status.success { color: #abd587; }#status.error { color: #ffb17c; }
.reference-notes { border-top: 1px solid #303942; margin-top: 9px; color: #a2aebc; font-size: 13px; }
.reference-notes summary { padding: 19px 3px; cursor: pointer; }
.reference-notes summary > span { float: right; color: #798796; font-size: 11px; }
.notes-content { display: grid; grid-template-columns: 1fr 1.3fr; gap: 50px; padding: 10px 4px 28px; }
.notes-content h3 { color: #c7d0d9; font-size: 15px; font-weight: 500; margin-bottom: 12px; }
.notes-content ul { padding-left: 20px; margin: 0; line-height: 1.9; font-size: 12px; }
.notes-content li { margin-bottom: 9px; }
.notes-content a { display: inline-block; color: #d0ac82; margin-top: 6px; }
.all-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin: 0; font-size: 12px; }
.all-settings > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #29353f; }
.all-settings dd { margin: 0; color: #d8e0e8; }
footer { margin: 0 2.75vw; padding: 24px 4px; border-top: 1px solid #303942; display: flex; justify-content: space-between; font-size: 11px; color: #6c7b8b; gap: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(min-width: 1600px) { .device { width: 310px; } }
@media(max-width: 1250px) {
  .lab-header { gap: 35px; }.lab-header nav { gap: 16px; }
  .workspace { grid-template-columns: 245px 1fr 1fr; }.device-panel { padding: 16px 5px 10px; }
  .panel-heading { padding-left: 10px; padding-right: 10px; }.panel-heading h2 { font-size: 15px; }.panel-heading .text-button { font-size: 10px; }
  .device { width: 250px; }.guide-panel { padding: 20px 11px 14px; }.guide-heading h2 { font-size: 18px; }.exercise strong { font-size: 15px; }.exercise small { font-size: 11px; }
  .saved-strip { padding: 12px; gap: 10px; }.saved-label span { display: none; }.saved-label { padding-right: 8px; }.saved-strip > div { font-size: 11px; padding: 11px 8px; }
  .simulation-bar { gap: 18px; padding: 16px; }.flow-range { gap: 0 13px; }.simulation-bar > p { display: none; }
}
@media(max-width: 950px) {
  .lab-header { gap: 20px; padding: 0 20px; }.lab-mark { display: none; }.lab-header nav { margin-left: auto; gap: 8px; }.lab-header nav a { font-size: 13px; }
  main { padding: 24px 20px 0; }.workspace { grid-template-columns: 1fr 1fr; }
  .guide-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 20px; padding: 16px 20px; }
  .guide-heading { grid-column: 1; padding: 0; }.exercises { grid-column: 1; margin-bottom: 0; margin-top: 12px; }.exercise { padding: 8px; }.exercise strong { font-size: 14px; }.exercise small { font-size: 11px; }
  .current-action { grid-column: 2; grid-row: 1 / 3; border: 0; border-left: 1px solid var(--line); padding: 7px 0 8px 20px; align-self: center; min-height: 0; }
  .key-guide { display: none; }
  .device { width: 280px; }.panel-heading { padding: 0 16px 14px; }.panel-heading h2 { font-size: 16px; }
  .saved-strip { grid-template-columns: 1fr 1fr; padding: 12px; gap: 10px; }.saved-label { display: none; }.saved-strip > div { font-size: 13px; }
  .simulation-bar h2 { display: none; }.notes-content { grid-template-columns: 1fr; gap: 28px; }
}
@media(max-width: 600px) {
  .lab-header { height: 59px; padding: 0 16px; gap: 8px; }.brand { min-width: 0; }.brand-logo { width: 96px; height: 38px; }
  .lab-header nav { gap: 4px; }.lab-header nav a { font-size: 12px; padding: 0 8px; }.lab-header nav a > span { display: none; }
  main { padding: 21px 14px 0; }.page-intro { gap: 10px 5px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }h1 { font-size: clamp(22px, 6.5vw, 26px); letter-spacing: 0; }.page-intro p { font-size: 13px; margin-top: 7px; }
  #reset { border: 0; padding: 8px 0 8px 8px; font-size: 11px; gap: 4px; margin: 0; white-space: nowrap; }#reset svg { width: 15px; height: 15px; }
  .workspace { display: flex; flex-direction: column; gap: 12px; }.guide-panel { order: 0; display: block; padding: 16px 14px 10px; }
  .guide-heading h2 { font-size: 16px; }.exercises { flex-direction: row; margin-top: 12px; gap: 4px; }.exercise { padding: 8px 6px; gap: 5px; align-items: center; border: 0; border-radius: 4px; }
  .exercise.selected { border: 0; }.exercise.selected::before { left: 0; }.step-no { width: 22px; height: 22px; font-size: 12px; }.exercise strong { font-size: 11px; line-height: 1.6; }.exercise small { display: none; }.done-mark { display: none !important; }
  .current-action { border: 0; padding: 10px 0 0; min-height: 0; }.section-label { display: none; }#guide-text { margin: 2px 0; font-size: 13px; }.help-copy { font-size: 11px; }
  .primary-panel { order: 1; flex-direction: row; padding: 9px 15px; min-height: 116px; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(20px); background: #10171ef5; border-color: #41513d; justify-content: space-between; }
  .primary-panel .panel-heading { flex-direction: column; align-items: flex-start; align-self: flex-start; margin-top: 18px; width: auto; padding: 0; gap: 10px; }.primary-panel .panel-heading h2 { font-size: 14px; }.primary-panel .live-dot { display: none; }
  .primary-panel .device-caption { position: absolute; left: 15px; top: 61px; font-size: 9px; text-align: left; max-width: 120px; margin: 0; line-height: 1.8; }
  .primary-panel .device { width: 100px; height: 100px; aspect-ratio: 1; }.primary-panel .device-photo { display: none; }.primary-panel .screen { inset: 0; width: 100%; height: 100%; border: 2px solid #334037; box-shadow: 0 0 10px #70a65120; border-radius: 8px; }
  .settings-panel { order: 2; padding: 16px 12px 10px; }.settings-panel .panel-heading { padding: 0 0 10px; }.settings-panel .panel-heading h2 { font-size: 15px; }.settings-panel .panel-heading .text-button { font-size: 11px; }
  .settings-panel .device { width: 295px; max-width: 98%; }.settings-panel .device-caption { font-size: 10px; }
  .saved-strip { gap: 8px; padding: 10px; }.saved-strip > div { padding: 9px 8px; font-size: 10px; gap: 6px; }.simulation-bar { flex-wrap: wrap; padding: 14px 12px; gap: 12px; }
  .flow-range { width: 100%; flex-basis: 100%; grid-template-columns: auto 1fr; gap: 0 13px; }.flow-range > div:first-child { display: block; }.flow-range label { font-size: 11px; display: block; }.flow-range output { display: block; min-width: 80px; font-size: 20px; }.flow-range output small { font-size: 10px; }
  .pause-button { width: 100%; padding: 8px; font-size: 12px; }.feedback-row { display: block; font-size: 11px; min-height: 42px; }.reference-notes summary { font-size: 11px; }.reference-notes summary span { font-size: 9px; }
  .output-reading { flex: 1 0 100%; border-left: 0; border-top: 1px solid #303942; padding: 10px 0 0; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .output-reading > div { grid-column: 2; grid-row: 1 / 3; margin: 0; }.output-reading > small { grid-column: 1; }
  .all-settings { grid-template-columns: 1fr; }.notes-content ul { font-size: 11px; }.notes-content h3 { font-size: 13px; }footer { margin: 0 14px; padding: 19px 0; font-size: 9px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*, *::before, *::after { animation: none !important; transition: none !important; } }