:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; color: #d6dcde; background: #20272b; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 40% 43%, #374147 0, #262f34 37%, #1c2327 80%); }
.page-heading { display: flex; justify-content: space-between; align-items: center; max-width: 1080px; margin: auto; padding: 34px 32px 26px; border-bottom: 1px solid #ffffff0d; }
.wordmark { font-size: 23px; font-weight: 800; letter-spacing: 1px; color: #f1f0e9; }
.wordmark span { display: block; font-size: 9px; font-weight: 500; letter-spacing: 3.4px; margin-top: 5px; color: #9aa6aa; }
.page-label { font-size: 12px; letter-spacing: 1px; color: #aab5b9; display: flex; align-items: center; gap: 9px; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #b1c29b; }
main { max-width: 940px; margin: auto; padding: 34px 34px 32px; display: grid; grid-template-columns: 460px 1fr; gap: 64px; align-items: center; }
.instrument-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.stage-caption { color: #92a0a7; font: 9px ui-monospace, monospace; letter-spacing: 2.4px; margin-bottom: 19px; }
.instrument { position: relative; width: 292px; height: 640px; flex-shrink: 0; color: #23251f; background: linear-gradient(90deg, #9c9f94 0, #d4d3c6 3px, #b8bbaf 7px, #d1d2c3 15px, #cdcec0 65%, #b4b7aa 97%, #7d8176); border: 1px solid #9a9e93; box-shadow: 1px 1px 1px #efeee27a inset, -4px 0 1px #81867a inset, 13px 17px 25px #0007, 0 2px 5px #0009; }
.instrument::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, #fff04 4px); }
.instrument::after { content: ""; position: absolute; inset: 0 10px; pointer-events: none; border-left: 1px solid #60685650; border-right: 1px solid #60685650; }
.screw { position: absolute; left: 31px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 27%, #f0f0e7, #bcc0b5 44%, #7a7f74 76%); border: 1px solid #7e8177; box-shadow: 0 1px 2px #0008, 0 0 0 2px #afb1a1; }
.screw::after { content:""; position:absolute; top:9px; left:3px; width:14px; height:3px; background:#4e524b; transform:rotate(-31deg); border-bottom:1px solid #e2e3d3; }
.screw-top { top: 14px; }.screw-bottom { bottom: 17px; }
.identity-plate { position: absolute; top: 65px; left: 31px; right: 29px; height: 57px; padding: 8px 11px; background: linear-gradient(#f8f7f0, #e6e6dd); border-radius: 4px; border: 1px solid #979b92; box-shadow: 0 1px 1px #f1f0e2; }
.model-label { font: 15px Arial, sans-serif; }.model-label strong { font-weight: 500; margin-left: 10px; }
.brand-label { margin-top: 5px; display: flex; align-items: center; gap: 4px; }.brand-label b { font: bold 18px Georgia, serif; letter-spacing: -3px; margin-right: 3px; }.brand-label span { font: 8px Arial; }.brand-label small { margin-left: auto; font: 7px Arial; }
.display-window { position: absolute; top: 146px; left: 10px; right: 10px; height: 73px; background: linear-gradient(#270609, #460c16 48%, #26070e); border-block: 1px solid #201017; box-shadow: 0 2px 4px #0009 inset, 0 1px 0 #f2ecd47d; overflow: hidden; }
.display-window::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(164deg,#ffb1b110,transparent 55%); }
#segment-display { display:block; width:100%; height:100%; padding: 3px 7px; }
.segment { fill:#781d2c; opacity:.16; }.segment.on { fill:#ff6670; opacity:1; filter: drop-shadow(0 0 2.5px #ff2238); }.decimal { fill:#781d2c; opacity:.16; }.decimal.on { fill:#ff6670; opacity:1; filter:drop-shadow(0 0 2px #fa1735); }
.digit.active { animation: digit-blink 1s step-end infinite; }
@keyframes digit-blink { 0%,60%,100% {opacity:1} 61%,99% {opacity:.14} }
.indication-area { position: absolute; top: 242px; left: 32px; right: 29px; display: flex; gap: 15px; }
.status-lights { width: 40px; display: flex; flex-direction: column; gap: 10px; padding-top: 3px; }.status-lights>div { display:flex; justify-content:space-between; align-items:center; font:12px Arial; }
.led { width:13px; height:13px; display:block; background:radial-gradient(circle at 35% 30%,#676b60,#35392f); border-radius:50%; border:1px solid #4a4d43; box-shadow:0 0 1px #eee6; }
.led.red.on { background:#ff4a59; box-shadow:0 0 6px #fd313bbb,inset 0 1px 3px #fff8; }.led.green.on { background:#d4ef56; box-shadow:0 0 6px #c9ee46a0,inset 0 1px 3px #fff8; }.led.blink {animation:digit-blink 1s step-end infinite;}
.readout-plate { position:relative; width:172px; height:97px; border:1px solid #989d90; border-radius:7px; background:linear-gradient(150deg,#faf9f2,#ecece2); padding:10px 12px; font:13px Arial; box-shadow:0 1px 1px #f2f4d8; }
.readout-plate span { display:block; }.readout-plate strong {display:block;text-align:right;font-size:18px;margin-top:4px;}.readout-plate span:last-of-type {margin-top:5px;}.readout-plate em {position:absolute;bottom:8px;right:11px;font:italic 20px cursive;color:#4d5147;transform:rotate(-9deg);}
.keyboard { position:absolute; top:365px; left:32px; right:29px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.panel-key { color:#24271f; background:linear-gradient(147deg,#d9dacc,#c5c8b8); border:1px solid #666e5f; border-radius:3px; box-shadow:0 1px 0 #f4f4e2 inset,1px 2px 1px #828777,0 0 0 1px #e0e0d129; width:100%; height:57px; padding:9px; touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer; }
.panel-key svg {width:37px;height:37px;}.panel-key svg path {fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;}.panel-key.letter-key {font:34px Arial,sans-serif;padding:0;}
.panel-key:hover { background:linear-gradient(147deg,#e7e8d9,#d1d4c4); }.panel-key:focus-visible {outline:2px solid #e7f0cf;outline-offset:3px;}.panel-key.pressed,.panel-key:active {transform:translateY(1px);background:#b6bdab;box-shadow:1px 2px 3px #646b5b inset;}.panel-key.armed {outline:2px solid #647656;outline-offset:2px;}
.module-bottom {position:absolute;top:507px;left:10px;right:29px;height:86px;}.pull-handle {position:absolute;left:0;bottom:0;width:89px;height:60px;border:1px solid #979d8d;box-shadow:0 2px 1px #676d5a,0 1px 0 #f3f4e1 inset;background:linear-gradient(#dbdccb,#b6bdab);border-radius:0 1px 6px 0;}.pull-handle span {position:absolute;top:6px;bottom:6px;right:8px;width:8px;background:linear-gradient(90deg,#a3ab99,#d5d9c6);border-radius:2px;}
.serial-port {position:absolute;right:0;top:-3px;width:47px;height:100px;background:linear-gradient(90deg,#939c90,#d5d9c9,#909789);border:1px solid #727a6d;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:1px 1px 2px #4a5145;}.serial-port svg {height:72px;width:38px;}.port-shell {fill:#373c34;stroke:#899281;stroke-width:2;}.pins circle {fill:#bcc6ab;stroke:#10160d;stroke-width:2;}.port-screw {width:8px;height:8px;border-radius:50%;background:#6f7766;border:1px solid #444b3d;}
.bottom-label {position:absolute;bottom:23px;right:29px;font:7px Arial;letter-spacing:1px;color:#6c7264;}
.reset-key {position:absolute;top:537px;left:128px;width:48px;height:48px;padding:0;border-radius:50%;font:12px "PingFang SC",sans-serif;letter-spacing:1px;touch-action:manipulation;z-index:1;}
.mode-label {display:flex;align-items:center;justify-content:center;gap:8px;color:#d3dbde;margin-top:23px;font-size:11px;min-height:16px;}.mode-divider {color:#606f76;}#current-context {color:#a2b1b8;}#mode-indicator {width:5px;height:5px;background:#a1b883;border-radius:50%;}#mode-indicator.editing {background:#e7b26e;}
.operation-guide {align-self:center; margin-top:20px; min-width:0;}.guide-overline {font-size:10px;letter-spacing:3px;color:#a5b2b8;}#operation-hint {font-size:18px;font-weight:500;line-height:1.8;margin:15px 0 24px;min-height:65px;color:#e4e7e4;}.parameter-info {font-size:12px;line-height:1.8;background:#ffffff04;border-left:2px solid #869875;padding:12px 14px;margin-bottom:26px;color:#afbdbf;}.parameter-info strong {display:block;color:#e0e6e4;font-weight:500;margin-bottom:5px;}
details {border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14;}summary {display:flex;justify-content:space-between;list-style:none;cursor:pointer;font-size:12px;color:#bec9cc;padding:17px 0;}summary::-webkit-details-marker {display:none;}summary span {font-size:15px;font-weight:300;}details[open] summary span {transform:rotate(45deg);}dl {margin:0 0 15px;}dl>div {display:grid;grid-template-columns:58px 1fr;gap:10px;margin-bottom:13px;}dt {font:11px ui-monospace,monospace;color:#d4dcdb;}dd {margin:0;font-size:11px;line-height:1.7;color:#aab9be;}.guide-note {font-size:11px;line-height:1.7;color:#aab9be;}.training-note {font-size:10px;line-height:1.9;color:#85969e;margin:20px 0 0;}footer {display:flex;justify-content:space-between;max-width:1080px;margin:0 auto;padding:20px 32px 30px;border-top:1px solid #ffffff0b;color:#71838d;font-size:9px;letter-spacing:.2px;}
.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 (max-width:800px) {main {grid-template-columns:350px 1fr;gap:20px;padding-inline:20px;}.page-heading {padding-inline:24px;}.operation-guide {margin-top:0;}#operation-hint {font-size:16px;}}
@media (max-width:600px) { .page-heading {padding:22px 20px;}.wordmark {font-size:20px;}.page-label {font-size:10px;letter-spacing:0;}main {display:flex;flex-direction:column;padding:24px 20px 28px;gap:28px;}.instrument-stage {width:100%;}.instrument {width:270px;height:608px;}.identity-plate {top:60px;}.display-window {top:138px;height:69px;}.indication-area {top:229px;gap:12px;}.keyboard {top:352px;}.panel-key {height:53px;}.module-bottom {top:481px;}.operation-guide {width:100%;max-width:360px;}#operation-hint {font-size:16px;min-height:0;margin:12px 0 18px;}.stage-caption {margin-bottom:16px;}footer {padding:18px 20px 25px;font-size:8px;gap:14px;}footer span {white-space:nowrap;}}
@media (prefers-reduced-motion:reduce) {.digit.active,.led.blink {animation:none;}.digit.active::after {content:"";}}
@media (max-width:600px) {.reset-key {top:511px;left:118px;}}