*{box-sizing:border-box} :root{--paper:#f3efe5;--ink:#262923;--muted:#74776c;--orange:#ed681d;--line:#ccc9bc;--soft:#e5e2d6;--mono:Consolas,'Courier New',monospace} body{margin:0;background:var(--paper);color:var(--ink);font-family:'Microsoft YaHei','PingFang SC',Arial,sans-serif}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button{border-radius:0}.page{max-width:1320px;margin:auto;padding:0 48px}.masthead{height:74px;display:flex;align-items:center;border-bottom:1px solid var(--ink);gap:20px;font-size:12px}.back{text-decoration:none;color:var(--ink);font-weight:bold}.edition{flex:1;text-align:center;letter-spacing:.07em;color:var(--muted)}.info-button{background:none;border:0;padding:10px 0 10px 14px}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:38px 0 35px}.eyebrow{font:11px var(--mono);letter-spacing:.16em;margin:0 0 14px}.eyebrow span{margin-left:14px;letter-spacing:.05em;color:var(--muted)}h1{font-size:clamp(40px,5vw,68px);line-height:1.16;margin:0;font-weight:800;letter-spacing:-.055em}.sun-mark{display:inline-block;color:var(--orange);font-size:1.13em;vertical-align:-.04em;margin-left:19px;font-weight:normal;line-height:1}.instruction{font-size:15px;line-height:1.8;margin:0;padding-left:22px;border-left:2px solid var(--orange);min-width:220px}.instruction-no{display:block;color:var(--orange);font:11px var(--mono);letter-spacing:.18em;margin-bottom:10px}.machine{border:2px solid var(--ink);background:#f9f7ee;box-shadow:5px 5px 0 #d8d6c9}.machine-strip{display:flex;justify-content:space-between;background:var(--ink);color:#eeeede;padding:12px 20px;font-size:11px;letter-spacing:.08em}.machine-strip>span:last-child{font:11px var(--mono);color:#b6b8ac}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);display:inline-block;margin-right:8px}.equipment{display:grid;grid-template-columns:210px minmax(210px,1fr) 210px;padding:26px 26px 21px;gap:26px}.terminal-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.terminal-label h2{margin:0;font-size:19px}.terminal-label>span{font:10px var(--mono);color:var(--muted)}.grid-frame{background:#deded1;border:1px solid #9b9f91;padding:17px;position:relative;box-shadow:inset 1px 1px 0 #fdfdf6,inset -1px -1px 0 #bfc3b4}.pixel-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;aspect-ratio:1}.pixel{width:100%;aspect-ratio:1;min-width:0;padding:0;background:#bbbfb1;border:0;position:relative;box-shadow:inset 0 0 0 1px #00000005;touch-action:none}.pixel.on{background:var(--ink)}.sender .pixel:hover{background:#aaad9f}.sender .pixel.on:hover{background:#42483b}.pixel.current{outline:3px solid var(--orange);outline-offset:1px;z-index:1}.pixel.error::after{content:'';position:absolute;width:5px;height:5px;background:var(--orange);right:1px;top:1px}.receiver .pixel.on{background:var(--orange);box-shadow:0 0 10px #ed681d35}.receiver .pixel.unknown{background:#c8ccbf;box-shadow:inset 0 0 0 1px #bdc2b4}.grid-screw{position:absolute;width:5px;height:5px;border:1px solid #7b8171;border-radius:50%;top:5px}.grid-screw.a{left:5px}.grid-screw.b{right:5px}.grid-note{font-size:10px;color:var(--muted);margin:10px 0 12px;min-height:15px}.presets{display:flex;gap:4px}.presets button{border:1px solid var(--line);background:transparent;flex:1;font-size:11px;padding:7px 0}.presets button.selected{background:var(--ink);color:#fff;border-color:var(--ink)}.received-stamp{font:10px var(--mono);border:1px dashed var(--line);padding:8px 0;text-align:center;color:#858879;letter-spacing:.1em}.received-stamp.complete{border-color:var(--orange);color:var(--orange)}.channel{min-width:0;display:flex;flex-direction:column}.slot-status{display:flex;justify-content:space-between;gap:10px;font-size:11px;align-items:center;min-height:24px}.slot-status span:last-child{font:11px var(--mono);color:var(--muted)}.optical-stage{height:190px;position:relative;margin-top:6px;isolation:isolate}.rail{position:absolute;left:9%;right:9%;top:56%;height:1px;background:repeating-linear-gradient(90deg,#ccc9bc 0,#ccc9bc 4px,transparent 4px,transparent 8px)}.beam{position:absolute;top:51.5%;height:9%;z-index:1;opacity:0;pointer-events:none}.beam-left{left:10%;width:40%;background:linear-gradient(90deg,#ffad4c90,#ffc27a60);box-shadow:0 0 15px #ffb76745}.beam-right{left:50%;right:10%;background:linear-gradient(90deg,#ffc27a60,#ffad4c90);box-shadow:0 0 15px #ffb76745}.emitter,.detector{position:absolute;top:calc(56% - 23px);width:46px;height:46px;border-radius:50%;background:#42473c;border:5px solid #d8dacd;box-shadow:0 0 0 1px #a5a999;z-index:3}.emitter{left:0}.detector{right:0;display:flex;align-items:center;justify-content:center}.lamp{position:absolute;inset:8px;border-radius:50%;background:#787c6c;transition:background 100ms}.emitter.lit .lamp{background:#ff9b37;box-shadow:0 0 15px #ff9b37aa}.emitter>span,.detector>span{position:absolute;white-space:nowrap;top:49px;font-size:10px;left:50%;transform:translateX(-50%);color:var(--muted)}.sensor-lines{width:17px;height:23px;background:repeating-linear-gradient(90deg,#777e69 0,#777e69 2px,#343a30 2px,#343a30 4px)}.detector.lit .sensor-lines{background:repeating-linear-gradient(90deg,#ff9d45 0,#ff9d45 2px,#b46934 2px,#b46934 4px)}.blocker-track{position:absolute;top:0;bottom:0;left:50%;width:6px;transform:translateX(-50%);background:#e7e6da;border-left:1px solid #d1d1c3;border-right:1px solid #d1d1c3}.blocker{position:absolute;top:18%;left:50%;transform:translate(-50%,-50%);width:62px;height:32%;background:#292d26;color:#f0f0df;z-index:4;cursor:grab;display:flex;align-items:center;flex-direction:column;justify-content:center;box-shadow:3px 3px 0 #00000020;touch-action:none;user-select:none;border:1px solid #171a14}.blocker:active{cursor:grabbing}.grip{width:21px;height:7px;background:repeating-linear-gradient(0deg,#6b7061 0,#6b7061 1px,transparent 1px,transparent 3px);margin-bottom:5px}.blocker-title{font-size:10px}.drag-mark{font-size:9px;color:#a9ae9d;margin-top:4px}.beam-caption{position:absolute;bottom:2px;width:100%;display:flex;justify-content:space-between;font:11px var(--mono)}.beam-caption span{border-bottom:2px solid #c5c7ba;padding-bottom:5px;min-width:55px;text-align:center}.channel-controls{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:10px;gap:8px}.channel-controls>span{color:var(--muted)}.channel-controls i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#687c50;margin-right:5px}.channel-controls button{background:none;border:1px solid #aaaF9d;padding:6px 8px;font-size:11px;white-space:nowrap}.signal-story{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.6;min-height:34px}.transport{display:flex;align-items:center;gap:14px;padding:17px 26px;background:#eeeee2;border-top:1px solid #c4c8b8}.send-button{display:flex;align-items:center;justify-content:space-between;gap:36px;border:1px solid var(--orange);background:var(--orange);color:white;font-weight:bold;padding:13px 17px;min-width:174px;font-size:14px}.send-button:hover{background:#d95b13}.send-button span:last-child{font-size:21px;font-weight:normal;line-height:1}.playback{display:flex;gap:5px}.playback button{background:transparent;border:1px solid #aeb39f;padding:12px 10px;font-size:11px;white-space:nowrap}.speed-label{display:flex;gap:8px;align-items:center;font-size:10px;color:var(--muted);margin-left:auto}.speed-label select{border:0;border-bottom:1px solid #999f8d;background:transparent;padding:7px 3px;color:var(--ink);font-size:11px;max-width:140px}.receipt{display:flex;padding:20px 26px;align-items:center;justify-content:space-between;border-top:1px dashed #b7bbaa;gap:20px;background:#fffcf1}.receipt[hidden]{display:none}.receipt-kicker{font-size:10px;display:block;color:var(--muted);margin-bottom:7px}.receipt strong{font-size:18px}.receipt p{font-size:11px;line-height:1.8;margin:7px 0 0;color:var(--muted)}.previous{font-size:10px;color:var(--muted);max-width:140px;line-height:1.8;flex-shrink:0}.previous .mini-grid{display:grid;grid-template-columns:repeat(6,5px);gap:2px;margin-top:7px}.mini-grid span{width:5px;height:5px;background:#dbded1}.mini-grid span.on{background:#686e5b}.timeline{margin:27px 0 0;padding:20px 0 0;border-top:1px solid var(--ink)}.timeline-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.timeline-heading h2{font-size:15px;letter-spacing:.02em;margin:0}.timeline-heading>span{font-size:10px;color:var(--muted)}.timeline-heading b{font-weight:normal;margin-left:18px}.waveform-wrap{display:flex;gap:17px;margin-top:18px;align-items:center}.wave-labels{display:flex;flex-direction:column;gap:31px;font-size:10px;flex-shrink:0;color:var(--muted);width:25px}.wave-labels span:first-child{color:var(--orange)}#waveform{display:block;flex:1;min-width:0;width:100%;height:85px;background:#ebeadd}.timeline-footer{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted);margin-top:10px}.footer{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted);border-top:1px solid var(--line);padding:20px 0;margin-top:28px}dialog{width:min(560px,calc(100% - 32px));border:2px solid var(--ink);background:var(--paper);padding:35px;max-height:85vh;color:var(--ink)}dialog::backdrop{background:#22251ad0;backdrop-filter:blur(4px)}dialog h2{font-size:27px;margin:0 0 25px}dialog h3{font-size:15px;margin:25px 0 10px}dialog p{font-size:13px;line-height:1.9}dialog p.eyebrow{font:10px var(--mono)}dialog .boundary{background:#e8e7da;padding:14px}dialog .smallprint{font-size:10px;color:var(--muted)}.source-link{color:#a54816;font-size:12px}.close-info{position:absolute;top:10px;right:14px;font-size:25px;border:0;background:none;padding:3px 7px}.flash-result{animation:stamp .25s ease-out}@keyframes stamp{from{transform:scale(1.035);opacity:.4}to{transform:scale(1);opacity:1}}
@media(min-width:1200px){.equipment{grid-template-columns:230px minmax(260px,1fr) 230px;gap:38px;padding:28px 38px}.optical-stage{height:216px}.signal-story{margin-top:14px}.transport{padding-left:38px;padding-right:38px}}
@media(max-width:1000px){.page{padding:0 28px}.equipment{grid-template-columns:170px minmax(190px,1fr) 170px;gap:20px;padding:24px 20px}.grid-frame{padding:13px}.optical-stage{height:150px}.blocker{height:32%;width:55px}.grip{display:none}.blocker-title{font-size:10px}.drag-mark{font-size:9px;margin-top:3px}.transport{padding:16px 20px}.speed-label{flex-direction:column;align-items:flex-start;gap:0}.send-button{min-width:154px;gap:20px}.playback button{padding:12px 8px}}
@media(max-width:760px){.page{padding:0 19px}.masthead{height:58px}.edition{font-size:9px;letter-spacing:0}.intro{padding:27px 0 25px;gap:12px}.eyebrow{font-size:9px;letter-spacing:.1em;margin-bottom:12px}.eyebrow span{display:block;margin:7px 0 0;font-size:10px}.instruction{font-size:11px;min-width:auto;padding-left:12px}.instruction-no{font-size:9px;margin-bottom:5px}h1{font-size:42px}.sun-mark{margin-left:10px}.equipment{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:19px 19px 14px;gap:16px 34px}.terminal{max-width:230px;width:100%}.sender{grid-column:1;grid-row:1;justify-self:end}.receiver{grid-column:2;grid-row:1}.channel{grid-column:1/-1;grid-row:2;border-top:1px solid var(--line);padding-top:13px}.terminal-label{margin-bottom:10px}.terminal-label h2{font-size:17px}.terminal-label>span{font-size:9px}.grid-frame{padding:14px}.pixel-grid{gap:4px}.grid-note{font-size:9px;line-height:1.5;margin:7px 0 9px;min-height:14px}.presets button{font-size:10px;padding:6px 0}.received-stamp{font-size:9px;padding:7px 0}.optical-stage{height:148px;margin:0 14px}.blocker{height:32%;width:62px}.beam-caption{bottom:1px;font-size:10px}.emitter,.detector{width:38px;height:38px;top:calc(56% - 19px);border-width:4px}.lamp{inset:6px}.emitter>span,.detector>span{top:40px;font-size:9px}.channel-controls{margin-top:8px}.signal-story{margin-top:8px;min-height:18px;font-size:10px}.transport{flex-wrap:wrap;padding:15px 19px;gap:10px}.send-button{flex:1;min-width:135px;font-size:13px;padding:12px 13px}.playback{gap:4px}.playback button{font-size:10px;padding:12px 8px}.speed-label{width:100%;margin:0;flex-direction:row;align-items:center;justify-content:flex-end;gap:10px}.speed-label select{padding:3px;font-size:10px}.receipt{padding:17px 19px;gap:15px}.receipt strong{font-size:16px}.receipt p{font-size:10px}.previous{max-width:92px;font-size:9px}.timeline{margin-top:24px;padding-top:17px}.timeline-heading{align-items:flex-start}.timeline-heading h2{font-size:13px;white-space:nowrap}.timeline-heading>span{font-size:9px;text-align:right}.timeline-heading b{display:block;margin:5px 0 0}.timeline-footer{font-size:9px}.footer{font-size:9px;line-height:1.8;padding:15px 0}.footer>span:last-child{text-align:right}.waveform-wrap{gap:10px;margin-top:13px}.wave-labels{font-size:9px;width:22px}dialog{padding:28px 23px}dialog h2{font-size:25px}}
@media(max-width:390px){.page{padding:0 13px}.intro{gap:8px}h1{font-size:36px}.sun-mark{margin-left:6px}.instruction{font-size:10px;padding-left:10px}.edition{font-size:8px}.equipment{padding:17px 15px 13px;gap:15px 24px}.pixel-grid{gap:3px}.grid-frame{padding:12px}.transport{padding:13px 15px}.playback button{padding:11px 6px}.send-button{min-width:121px;gap:10px;font-size:12px}.received-stamp{font-size:8px;letter-spacing:0}.timeline-heading h2{font-size:12px}}
@media(max-width:760px){.masthead{height:52px}.intro{padding-top:16px;padding-bottom:16px}.equipment{padding-top:14px;padding-bottom:10px;row-gap:12px}.channel{padding-top:9px}.optical-stage{height:138px}.presets button,.channel-controls button,.playback button,.send-button,.info-button{min-height:44px}.close-info{min-width:44px;min-height:44px;top:5px;right:7px}.channel-controls{margin-top:5px}.signal-story{margin-top:5px}.transport{padding-top:11px;padding-bottom:11px}.speed-label select{min-height:44px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Shared exhibit navigation and title hierarchy; scene styling stays individual. */
.page > .masthead {height:72px;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.05em}
.page > .masthead .back {display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12px;font-weight:500;letter-spacing:.05em}
.page > .masthead .back > span {font-size:22px;font-weight:400}
.page > .masthead > button {margin-left:auto;min-height:44px;font-size:12px;letter-spacing:.05em}
.intro .eyebrow {font-size:12px;line-height:1.6;letter-spacing:1.5px;margin:0 0 10px}
@media(max-width:760px){.page > .masthead {height:56px;min-height:56px} .intro .eyebrow {font-size:11px;margin-bottom:8px}}


.page > .masthead .back{white-space:nowrap;letter-spacing:0} @media(max-width:760px){.page > .masthead{gap:8px} .page > .masthead .back{gap:5px} .page > .masthead > button{font-size:11px;padding-left:0;padding-right:0;white-space:nowrap}}