:root{color-scheme:dark;--amber:#ffc36a;--dim:#a97938;--muted:#66645b;font-family:"Courier New",Courier,monospace;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#111210;color:#b7b5a8;min-height:100svh;background-image:radial-gradient(ellipse at 50% 44%,#29271d44,transparent 70%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:8px 0}button:hover,a:hover{color:#ffe3ae}button:focus-visible,a:focus-visible{outline:1px solid var(--amber);outline-offset:5px}button:disabled{opacity:.35;cursor:default}a{text-decoration:none;color:inherit}.station{width:min(1200px,calc(100% - 80px));margin:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:28px 0 24px;gap:23px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:1.5px;padding:0 3px}.wordmark{font-size:19px;letter-spacing:3px;color:#dbd7c5;font-weight:bold}.mark{font-size:23px;font-weight:normal;letter-spacing:0;margin-right:13px;color:#8e8a77}.mark span{color:#cba060}.edition{font-size:12px;letter-spacing:1px;color:#747368;font-weight:normal}.about-button{color:#9a9989;font-size:10px;letter-spacing:1px}.machine{background:linear-gradient(140deg,#35342e,#242520 42%,#2e2d27);border:1px solid #48473d;border-radius:19px;box-shadow:0 30px 70px #0009,inset 0 1px 0 #66634d55;padding:0 23px}.hardware-top{display:flex;justify-content:space-between;padding:19px 8px 16px;font-size:9px;letter-spacing:2px;color:#a5a18c}.hardware-top span:last-child{color:#737263;letter-spacing:1.4px}.bezel{padding:17px;background:linear-gradient(145deg,#191a15,#414034);border-radius:58px / 33px;box-shadow:inset 0 5px 14px #000c,inset 0 -1px 2px #69614b66}.glass{height:clamp(420px,calc(100svh - 280px),790px);border-radius:43px / 25px;position:relative;overflow:hidden;background:#151208;box-shadow:inset 0 0 45px 16px #000,0 0 2px 2px #070805,inset 0 0 100px #a8741c0c;color:var(--amber)}.phosphor{position:absolute;inset:30px 37px 23px;display:flex;flex-direction:column;text-shadow:0 0 3px #ffba5d99,0 0 10px #ff9c2638,1px 0 #ed872a33;filter:blur(.18px);animation:hum 7s linear infinite}.screen-header{padding-bottom:17px;border-bottom:1px solid #d1984755}.system-title{font-size:17px;letter-spacing:2px;font-weight:bold}.signal-star{margin-right:11px;font-size:21px}.revision{font-size:11px;float:right;letter-spacing:1px;padding-top:6px;color:#bf914f}.system-subtitle{margin-top:7px;font-size:10px;letter-spacing:1.5px;color:#c99955}.system-subtitle span{float:right}.telemetry{display:grid;grid-template-columns:1.3fr 1fr;gap:10px 35px;padding:17px 0;font-size:11px;letter-spacing:.5px}.telemetry>div{display:flex;gap:16px}.field-label{color:#9f783f;min-width:62px}.connection{color:#e5b76e}.stream-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.6px;color:#b48846;border-top:1px dashed #aa7e354d;padding:12px 0 9px}.stream-heading span:last-child{font-size:8px;color:#896b3d}.terminal-viewport{flex:1;overflow:hidden;position:relative;min-height:0;padding-top:5px;font-size:clamp(12px,1.55vw,17px);line-height:1.56;letter-spacing:.35px;white-space:pre}.terminal-viewport pre{display:inline;margin:0;font:inherit}.cursor{display:inline;animation:blink 1.1s steps(1) infinite;text-shadow:0 0 8px #ffb845}.screen-footer{border-top:1px solid #a478374d;padding-top:12px;margin-top:13px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.8px;color:#bb8b48;gap:10px}.scanlines,.noise,.roll,.reflection{position:absolute;inset:0;pointer-events:none}.scanlines{z-index:3;background:repeating-linear-gradient(0deg,#0000 0px,#0000 2px,#0004 3px,#0004 4px);opacity:.48}.noise{z-index:2;opacity:.085;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:160px;animation:static .3s steps(3) infinite}.roll{z-index:4;background:linear-gradient(transparent 45%,#ffcb7806 49%,#ffcb780d 50%,transparent 54%);background-size:100% 210%;animation:roll 14s linear infinite}.reflection{z-index:5;border-radius:inherit;background:radial-gradient(ellipse at 48% 0%,#ffdaa008,transparent 60%),radial-gradient(ellipse at center,transparent 55%,#0009 100%);box-shadow:inset 0 0 14px 7px #000a}.hardware-bottom{display:flex;align-items:center;justify-content:space-between;min-height:59px;font-size:8px;letter-spacing:1.4px;color:#9b9884;gap:10px}.hardware-brand{font-size:20px;font-style:italic;letter-spacing:-1px;color:#aaa58e;opacity:.6;font-weight:bold}.hardware-brand span{font-size:9px;vertical-align:super;letter-spacing:0;margin-left:3px}.desk-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#62665b;font-size:8px;letter-spacing:1.3px;padding:0 3px}dialog{background:#191a14;color:#c2b8a0;border:1px solid #65573b;border-radius:3px;max-width:620px;width:calc(100% - 32px);padding:26px 32px;font-size:13px;line-height:1.8;box-shadow:0 20px 100px #000}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;color:#c19754;letter-spacing:1px}.dialog-head button{font-size:9px}dialog h1{font-size:24px;color:var(--amber);font-weight:normal;margin:24px 0 12px}dialog p{margin:16px 0}.dialog-foot{font-size:10px;letter-spacing:1.5px;color:#9f7d43}.dialog-foot span{float:right}.fx-off .scanlines,.fx-off .noise,.fx-off .roll,.fx-off .reflection{display:none}.fx-off .phosphor{filter:none;animation:none;text-shadow:none}.fx-off .cursor{animation:none}.station:fullscreen{width:100%;background:#111210;padding:20px 35px}.station:fullscreen .machine{flex:1;display:flex;flex-direction:column}.station:fullscreen .bezel{flex:1;display:flex}.station:fullscreen .glass{height:auto;flex:1}.station:fullscreen .masthead,.station:fullscreen .desk-footer{flex-shrink:0}@keyframes blink{50%{opacity:0}}@keyframes static{0%{background-position:0 0}33%{background-position:45px -31px}66%{background-position:-24px 53px}}@keyframes roll{from{background-position:0 100%}to{background-position:0 -100%}}@keyframes hum{0%,96%,100%{opacity:1;transform:translateX(0)}96.4%{opacity:.94;transform:translateX(.35px)}96.8%{opacity:1;transform:translateX(-.25px)}97.2%{transform:translateX(0)}}
#afterglow{position:absolute;inset:5px 0 auto;display:block;opacity:0;pointer-events:none;filter:blur(.5px)}.fx-off #afterglow{display:none}
@media(min-width:1600px){.terminal-viewport{font-size:16px}}
@media(max-width:800px){.station{width:calc(100% - 32px);gap:17px;padding:20px 0}.machine{padding:0 12px;border-radius:14px}.hardware-top{font-size:7px;padding:14px 5px;letter-spacing:1px}.bezel{padding:10px;border-radius:35px / 25px}.glass{border-radius:28px / 19px;height:73svh;min-height:460px}.phosphor{inset:24px 22px 20px}.system-title{font-size:13px;letter-spacing:.7px}.revision{font-size:8px}.system-subtitle{font-size:8px;letter-spacing:.4px}.system-subtitle span{display:none}.telemetry{gap:10px 16px;font-size:9px;grid-template-columns:1.4fr 1fr}.telemetry>div{gap:8px}.field-label{min-width:43px}.terminal-viewport{font-size:11px;letter-spacing:0}.hardware-bottom{font-size:7px;min-height:47px;letter-spacing:.5px}.hardware-brand{font-size:17px}.desk-footer{font-size:7px;letter-spacing:.6px;flex-wrap:wrap;gap:4px 15px}.screen-footer{font-size:8px;letter-spacing:0}.footer-right{display:none}}
@media(max-width:480px){.station{width:calc(100% - 16px);padding:14px 0;gap:14px}.masthead{padding:0 9px}.wordmark{font-size:16px}.mark{font-size:19px;margin-right:6px}.machine{padding:0 7px}.hardware-top span:last-child{font-size:6px}.bezel{padding:8px}.phosphor{inset:23px 14px 18px}.glass{min-height:475px}.system-title{font-size:11px;letter-spacing:.2px}.signal-star{margin-right:5px;font-size:16px}.revision{font-size:7px}.telemetry{font-size:8px;gap:10px 8px;letter-spacing:0}.telemetry>div{gap:5px}.field-label{min-width:35px}.terminal-viewport{font-size:clamp(7px,2.08vw,10px);line-height:1.75}.stream-heading{font-size:7px;letter-spacing:.7px}.stream-heading span:last-child{font-size:7px}.hardware-brand{font-size:15px}.desk-footer{padding:0 8px}dialog{padding:20px}.dialog-head{font-size:8px}dialog h1{font-size:21px}}
@media(prefers-reduced-motion:reduce){.phosphor,.noise,.roll,.cursor{animation:none}.noise,.roll{display:none}}

/* Monitor cabinet controls. LEDs indicate the actual toggle state. */
.hardware-top { justify-content: flex-end; }
.hardware-bottom { min-height: 94px; padding: 12px 12px 13px; gap: 24px; }
.hardware-brand { flex-shrink: 0; }
.control-panel { display: flex; align-items: center; gap: 25px; }
.switch-control, .dial-control { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.control-label { font-size: 7px; letter-spacing: 1.1px; color: #a19c86; white-space: nowrap; }
.control-value { display: inline-block; min-width: 55px; color: #757563; margin-left: 5px; }
.control-divider { height: 36px; width: 1px; background: #13140f; box-shadow: 1px 0 #4a483855; margin: 0 2px; }
.hardware-switch { display: flex; align-items: center; gap: 10px; padding: 8px 9px; min-height: 39px; border-radius: 5px; background: #1e201a; border: 1px solid #171913; box-shadow: inset 0 2px 4px #0008, 0 1px #55513a55; }
.switch-face { display: block; width: 30px; height: 17px; border-radius: 2px; background: linear-gradient(#535347, #37382e); border: 1px solid #5c5b4a; box-shadow: 0 3px 2px #0009, inset 0 1px #96947b44; transition: transform .12s, box-shadow .12s; }
.switch-face::after { content: ''; display: block; width: 12px; height: 1px; margin: 7px auto; background: #22251d; box-shadow: 0 1px #72705a55; }
.hardware-switch[aria-pressed="true"] .switch-face { transform: translateY(2px); background: linear-gradient(#35372d, #454638); box-shadow: 0 1px 1px #0009, inset 0 1px 2px #0005; }
.hardware-switch:active .switch-face { transform: translateY(3px); }
.indicator { width: 6px; height: 6px; border-radius: 50%; background: #19231a; border: 1px solid #0e130c; box-shadow: inset 0 1px 2px #0009; }
.indicator-blue { background: #192126; }
.hardware-switch[aria-pressed="true"] .indicator-green { background: #98d871; border-color: #96c469; box-shadow: 0 0 7px #8cce6877, inset 0 1px #daf9bd; }
.hardware-switch[aria-pressed="true"] .indicator-blue { background: #75c7ea; border-color: #6eb8d7; box-shadow: 0 0 7px #70bddc77, inset 0 1px #d0f2ff; }
.hardware-switch:hover .switch-face { border-color: #9a9070; }
.hardware-dial { width: 42px; height: 42px; border-radius: 50%; padding: 4px; position: relative; background: repeating-conic-gradient(from -2deg, #80795a 0deg 2deg, transparent 2deg 40deg), #25261e; border: 1px solid #191b15; box-shadow: inset 0 1px 3px #0009, 0 1px #65604855; }
.dial-cap { display: block; width: 32px; height: 32px; position: relative; border-radius: 50%; background: repeating-conic-gradient(#424337 0deg 7deg, #2d3027 7deg 14deg); border: 1px solid #595947; box-shadow: 1px 3px 4px #000b, inset 0 1px #8c866344; transform: rotate(-60deg); transition: transform .2s ease; }
.dial-cap::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: linear-gradient(135deg, #515145, #30332a); box-shadow: inset 0 1px 2px #b4aa6f33; }
.dial-cap::after { content: ''; position: absolute; top: 5px; left: 14px; width: 2px; height: 8px; background: #d5c38e; box-shadow: 0 0 2px #d5c38e33; border-radius: 1px; }
.hardware-dial[data-position="1"] .dial-cap { transform: rotate(-20deg); }
.hardware-dial[data-position="2"] .dial-cap { transform: rotate(20deg); }
.hardware-dial[data-position="3"] .dial-cap { transform: rotate(60deg); }
.hardware-dial:hover .dial-cap { border-color: #a59567; }
.desk-footer { justify-content: center; gap: 7px; font-size: 9px; letter-spacing: 1px; color: #777a6c; }
.glass { height: clamp(420px, calc(100svh - 310px), 790px); }

/* Palettes apply to the phosphor, including its glow and screen reflections. */
body { --phosphor: 255, 195, 106; --screen-bg: #151208; }
body[data-color="green"] { --phosphor: 150, 235, 139; --screen-bg: #0c140c; }
body[data-color="ice"] { --phosphor: 147, 219, 246; --screen-bg: #0b1218; }
body[data-color="white"] { --phosphor: 224, 228, 213; --screen-bg: #121410; }
.glass { color: rgb(var(--phosphor)); background: var(--screen-bg); box-shadow: inset 0 0 45px 16px #000, 0 0 2px 2px #070805, inset 0 0 100px rgba(var(--phosphor), .03); }
.phosphor { text-shadow: 0 0 3px rgba(var(--phosphor), .6), 0 0 10px rgba(var(--phosphor), .22), 1px 0 rgba(var(--phosphor), .2); }
.screen-header { border-color: rgba(var(--phosphor), .3); }
.revision, .system-subtitle, .connection { color: rgba(var(--phosphor), .8); }
.field-label, .stream-heading { color: rgba(var(--phosphor), .6); }
.stream-heading { border-color: rgba(var(--phosphor), .24); }
.stream-heading span:last-child { color: rgba(var(--phosphor), .48); }
.screen-footer { color: rgba(var(--phosphor), .7); border-color: rgba(var(--phosphor), .24); }
.cursor { text-shadow: 0 0 8px rgba(var(--phosphor), .8); }
.roll { background-image: linear-gradient(transparent 45%, rgba(var(--phosphor), .025) 49%, rgba(var(--phosphor), .05) 50%, transparent 54%); }
.reflection { background: radial-gradient(ellipse at 48% 0%, rgba(var(--phosphor), .03), transparent 60%), radial-gradient(ellipse at center, transparent 55%, #0009 100%); }
body[data-font="console"] .phosphor { font-family: Monaco, "Lucida Console", "DejaVu Sans Mono", monospace; }
body[data-font="technical"] .phosphor { font-family: Menlo, Consolas, "Liberation Mono", monospace; }

@media (max-width: 800px) {
  .hardware-bottom { padding: 12px 6px; min-height: 90px; gap: 12px; }
  .control-panel { gap: 17px; }
  .control-label { font-size: 6px; letter-spacing: .6px; }
  .control-value { min-width: 43px; margin-left: 3px; }
  .glass { height: 70svh; }
}
@media (max-width: 480px) {
  .hardware-bottom { flex-direction: column; gap: 8px; padding: 13px 3px 15px; }
  .hardware-brand { font-size: 16px; align-self: flex-start; margin-left: 10px; }
  .control-panel { width: 100%; justify-content: space-around; gap: 7px; }
  .control-divider { margin: 0; }
  .control-label { font-size: 6px; letter-spacing: .4px; }
  .control-value { display: block; min-width: 0; margin: 3px 0 0; text-align: center; }
  .switch-control { align-self: flex-start; padding-top: 2px; }
  .hardware-switch { gap: 7px; padding: 8px; }
  .switch-face { width: 25px; }
  .desk-footer { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dial-cap, .switch-face { transition: none; }
}

/* A faded inventory sticker, printed on paper rather than glowing phosphor. */
.hardware-identity { display: flex; align-items: center; gap: 25px; flex-shrink: 0; }
.cabinet-sticker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 194px;
  padding: 8px 11px 6px;
  overflow: hidden;
  border: 1px solid #9e905e;
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 0% 95%, #8c622b45, transparent 45%),
    radial-gradient(ellipse at 95% 5%, #f7edbf75, transparent 50%),
    linear-gradient(110deg, #b8aa7d, #d2c598 36%, #c7b987 80%, #b9a977);
  box-shadow: 1px 3px 4px #0007, inset 0 1px #eee3b360, inset -1px -1px 2px #75603955;
  color: #39372a;
  transform: rotate(-3deg);
  text-shadow: none;
}
.cabinet-sticker::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(173deg, transparent 46%, #e8dcb12b 47%, transparent 48%),
    repeating-linear-gradient(9deg, transparent 0 3px, #f5e8b810 3px 4px),
    radial-gradient(ellipse at 100% 100%, #74512638, transparent 27%);
  box-shadow: inset 0 0 7px #66532c32;
}
.sticker-title { font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: .65px; white-space: nowrap; opacity: .9; }
.sticker-barcode {
  display: block;
  width: 100%;
  height: 17px;
  margin-top: 5px;
  opacity: .77;
  background: repeating-linear-gradient(90deg,
    #343328 0 2px, transparent 2px 3px, #343328 3px 4px, transparent 4px 7px,
    #343328 7px 8px, transparent 8px 10px, #343328 10px 14px, transparent 14px 15px,
    #343328 15px 17px, transparent 17px 21px, #343328 21px 22px, transparent 22px 24px,
    #343328 24px 27px, transparent 27px 29px, #343328 29px 30px, transparent 30px 33px,
    #343328 33px 35px, transparent 35px 36px, #343328 36px 37px, transparent 37px 41px);
}
.sticker-serial { margin-top: 3px; font-family: "Courier New", monospace; font-size: 6px; line-height: 1; letter-spacing: 2px; opacity: .75; }
@media (max-width: 1000px) {
  .hardware-identity { flex-direction: column; align-items: flex-start; gap: 7px; }
  .hardware-identity .hardware-brand { font-size: 14px; margin-left: 0; }
  .cabinet-sticker { width: 181px; padding: 7px 9px 5px; }
  .sticker-title { font-size: 9px; }
  .sticker-barcode { height: 14px; }
}
@media (max-width: 680px) {
  .hardware-bottom { flex-direction: column; gap: 17px; padding-top: 18px; padding-bottom: 15px; }
  .hardware-identity { width: 100%; flex-direction: row; align-items: center; gap: 20px; padding-left: 10px; }
  .control-panel { width: 100%; justify-content: space-around; gap: 7px; }
  .control-divider { margin: 0; }
}

/* Series II: an institutional dual-channel instrument, still the same old CRT. */
.hardware-top { justify-content: space-between; align-items: center; }
.instrument-plate { font-size: 7px; letter-spacing: 1.5px; color: #8c8a72; }
.archive-links { font-size: 10px; color: #c19754; display: flex; flex-wrap: wrap; gap: 14px; }
.hardware-brand { position: relative; }
.hardware-brand::after { content: 'SCIENTIFIC SYSTEMS'; display: block; font-style: normal; font-size: 5px; letter-spacing: 1.25px; margin-top: 4px; }
.terminal-viewport { tab-size: 4; }
.stream-heading span:last-child { letter-spacing: 1px; }
.control-panel { position: relative; }
.control-panel::before { content: 'DISPLAY ADJUSTMENT'; position: absolute; right: 0; top: -12px; font-size: 5px; letter-spacing: 1.7px; color: #686a58; }
@media (max-width: 800px) {
  .instrument-plate { font-size: 6px; letter-spacing: .7px; }
  .system-subtitle { font-size: 7px; }
  .telemetry { grid-template-columns: 1.5fr 1fr; }
}
@media (max-width: 480px) {
  .instrument-plate { font-size: 5px; letter-spacing: .3px; }
  .hardware-top span:last-child { font-size: 5px; letter-spacing: .4px; }
  .telemetry { font-size: 7px; }
  .stream-heading { font-size: 6px; }
  .stream-heading span:last-child { font-size: 6px; letter-spacing: .2px; }
  .control-panel::before { display: none; }
}

.sticker-title { font-size: 8.5px; letter-spacing: .35px; }
.connection { font-variant-numeric: tabular-nums; white-space: nowrap; }
#probes, #weather-status { font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) {
  .sticker-title { font-size: 8px; letter-spacing: .2px; }
}
@media (max-width: 480px) {
  .telemetry { gap: 10px 5px; }
  #weather-status { font-size: 6px; letter-spacing: -.15px; }
}
