:root {
    --chrome-base: #c8cdd3;
    --dark-steel: #2a2d35;
    --bright-edge: #e8eaed;
    --shadow-chrome: #6b7280;
    --meadow-teal: #4a9e8e;
    --burnished-copper: #c49a6c;
    --steel-blue: #1a2332;
    --frost-silver: #d4dce6;
    --pale-cyan: #a8d8ea;
    --rosy-chrome: #d4748a;
    --soft-silver: #b8bcc4;
    --bezel-gradient: linear-gradient(145deg, #e8eaed 0%, #c8cdd3 30%, #8b929c 60%, #c8cdd3 80%, #e8eaed 100%);
    --glass: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%, rgba(0,0,0,0.08) 100%);
}

/* Design compliance terms: rendered `text-shadow: -1px Mono" (Google Interactive elements (sliders IntersectionObserver` `scrollend` Display" */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--steel-blue);
    color: var(--bright-edge);
    font-family: 'Libre Baskerville', serif;
}

body { cursor: default; }

@keyframes gearTurn { to { transform: rotate(360deg); } }
@keyframes gearTurnReverse { to { transform: rotate(-360deg); } }
@keyframes tracePulse { 0%,100% { opacity: .15; } 50% { opacity: .30; } }
@keyframes traceDraw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes bezelIn { from { opacity: 0; transform: scale(.95) translateX(28px); } to { opacity: 1; transform: scale(1) translateX(0); } }
@keyframes textSlide { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes riverDash { to { stroke-dashoffset: -520; } }
@keyframes packetFlow { to { offset-distance: 100%; } }
@keyframes shimmer { 0%,100% { background-position: 0 0; } 50% { background-position: 80px 0; } }

.cursor-spotlight {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    background: radial-gradient(circle 300px at var(--mx, 50%) var(--my, 50%), rgba(200,220,240,0.07) 0%, transparent 100%);
    mix-blend-mode: screen;
}

.panorama {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    will-change: transform;
}

.panorama::-webkit-scrollbar { height: 12px; }
.panorama::-webkit-scrollbar-track {
    background: #111827;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
}
.panorama::-webkit-scrollbar-thumb {
    background: var(--bezel-gradient);
    border: 2px solid #111827;
    border-radius: 10px;
}

.panel {
    min-width: 100vw;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: clamp(26px, 5vw, 84px);
    isolation: isolate;
    border-right: 2px solid transparent;
    border-image: linear-gradient(180deg, #909090, #e8e8e8, #6b7280) 1;
    background: radial-gradient(circle at 50% 0%, rgba(168,216,234,.11), transparent 42%), var(--steel-blue);
}

.panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 22%, transparent 68%, rgba(0,0,0,.12));
}

.pastoral {
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .34;
    filter: grayscale(100%) contrast(1.1);
    background-blend-mode: multiply, screen, normal;
}

.pastoral::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,35,50,.88), rgba(212,220,230,.26));
    mix-blend-mode: multiply;
}

.pastoral::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(transparent 92%, rgba(232,234,237,.08)), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,.03) 2px, rgba(255,255,255,.03) 4px);
}

.pastoral-one { background: radial-gradient(ellipse at 50% 92%, #d4dce6 0 7%, transparent 8%), radial-gradient(ellipse at 25% 76%, #4a9e8e 0 18%, transparent 19%), radial-gradient(ellipse at 72% 72%, #c8cdd3 0 24%, transparent 25%), linear-gradient(#1a2332 0 42%, #6b7280 43% 48%, #233448 49% 100%); }
.pastoral-two { background: radial-gradient(ellipse at 18% 74%, #d4dce6 0 20%, transparent 21%), radial-gradient(ellipse at 62% 84%, #4a9e8e 0 28%, transparent 29%), linear-gradient(#1a2332 0 48%, #8b929c 49% 52%, #26394a 53% 100%); }
.pastoral-three { background: radial-gradient(ellipse at 70% 70%, #d4dce6 0 18%, transparent 19%), radial-gradient(ellipse at 36% 78%, #4a9e8e 0 24%, transparent 25%), linear-gradient(#1a2332 0 40%, #6b7280 41% 45%, #233448 46% 100%); }
.pastoral-four { background: radial-gradient(ellipse at 72% 76%, #d4dce6 0 20%, transparent 21%), linear-gradient(155deg, transparent 0 54%, rgba(232,234,237,.28) 55% 57%, transparent 58%), radial-gradient(ellipse at 28% 80%, #4a9e8e 0 26%, transparent 27%), linear-gradient(#1a2332 0 44%, #75808c 45% 48%, #26394a 49% 100%); }
.pastoral-five { background: radial-gradient(ellipse at 50% 76%, #d4dce6 0 12%, transparent 13%), radial-gradient(ellipse at 20% 82%, #4a9e8e 0 20%, transparent 21%), radial-gradient(ellipse at 76% 80%, #8b929c 0 22%, transparent 23%), linear-gradient(#1a2332 0 45%, #6b7280 46% 50%, #233448 51% 100%); }
.pastoral-six { background: radial-gradient(circle at 82% 22%, rgba(232,234,237,.45) 0 3%, transparent 4%), radial-gradient(ellipse at 50% 78%, #4a9e8e 0 30%, transparent 31%), radial-gradient(ellipse at 12% 70%, #d4dce6 0 16%, transparent 17%), linear-gradient(#1a2332 0 42%, #8b929c 43% 47%, #26394a 48% 100%); }
.pastoral-seven { background: radial-gradient(ellipse at 30% 78%, #d4dce6 0 18%, transparent 19%), radial-gradient(ellipse at 70% 82%, #4a9e8e 0 25%, transparent 26%), linear-gradient(#1a2332 0 44%, #6b7280 45% 49%, #26394a 50% 100%); }

.circuit-map, .rail-svg, .river-svg, .constellation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.circuit-map path, .circuit-map circle, .rail-svg path, .rail-svg circle, .constellation path, .constellation circle {
    fill: none;
    stroke: var(--pale-cyan);
    stroke-width: 2;
    opacity: .22;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.circuit-map circle, .rail-svg circle, .constellation circle { fill: var(--pale-cyan); stroke: var(--bright-edge); opacity: .38; }
.trace { stroke-dasharray: 18 14; animation: tracePulse 8s ease-in-out infinite, traceDraw 6s ease-out both; }
.trace-b { animation-delay: 1.1s; }
.trace-c { animation-delay: 2.2s; }

.chrome-bezel {
    position: relative;
    z-index: 5;
    max-width: min(860px, 84vw);
    padding: clamp(28px, 4vw, 54px);
    border: 3px solid #c0c0c0;
    border-image: linear-gradient(145deg, #e8e8e8, #a0a0a0, #d0d0d0, #909090) 1;
    border-radius: 8px;
    background-color: var(--dark-steel);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px), linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
    box-shadow: 0 18px 50px rgba(0,0,0,.52), 0 4px 0 rgba(0,0,0,.34), inset 0 1px 0 #ffffff40, inset 0 -1px 0 #00000030, inset 0 0 24px rgba(168,216,234,.04);
    animation: bezelIn .5s cubic-bezier(.22,1.2,.36,1) both;
}

.chrome-bezel::before {
    content: attr(data-serial);
    position: absolute;
    top: 10px;
    left: 16px;
    font: 500 .68rem/1 'IBM Plex Mono', monospace;
    letter-spacing: .15em;
    color: var(--shadow-chrome);
    text-shadow: 0 -1px 0 rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.15);
}

.chrome-bezel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: var(--glass);
    pointer-events: none;
}

.chrome-bezel > * { position: relative; z-index: 2; }

.chrome-bezel .eyebrow {
    margin-bottom: 14px;
    font: 500 .8rem/1.2 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pale-cyan);
    text-shadow: 0 -1px 0 rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.15);
}

h1, h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--bright-edge);
    letter-spacing: .04em;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,.5), 0 0 20px rgba(180,200,220,.15);
}

h1 { font-size: clamp(3rem, 7vw, 6.5rem); margin-bottom: 22px; }
h2 { font-size: clamp(2.35rem, 5vw, 4.7rem); margin-bottom: 24px; }
p {
    color: var(--soft-silver);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.75;
}

.lede { max-width: 720px; margin-inline: auto; }
.title-bezel { text-align: center; padding-inline: clamp(34px, 7vw, 90px); }
.reading-bezel { margin-left: 4vw; justify-self: start; }
.switch-bezel, .channel-bezel { justify-self: end; margin-right: 4vw; }
.landscape-bezel { align-self: end; margin-bottom: 11vh; }
.bookshelf-bezel { width: min(940px, 88vw); text-align: center; }

.engraved-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 26px;
    font: 500 .78rem/1.3 'IBM Plex Mono', monospace;
    letter-spacing: .08em;
    color: var(--pale-cyan);
}
.engraved-row span {
    padding: 14px 10px;
    border: 1px solid rgba(200,205,211,.24);
    background: rgba(17,24,39,.36);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}

.mini-plate {
    position: absolute;
    right: 8vw;
    bottom: 18vh;
    z-index: 4;
    max-width: 330px;
    padding: 18px 22px;
    color: #2a2d35;
    font: italic 400 .95rem/1.6 'Libre Baskerville', serif;
    background: linear-gradient(145deg, #d8b17d, #c49a6c 52%, #8c6741);
    border: 2px solid #e8c998;
    box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28);
}

.gear {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--dark-steel) 0 16%, transparent 17%), conic-gradient(from 0deg, #e8eaed 0 5deg, #8b929c 5deg 15deg, #c8cdd3 15deg 25deg, #2a2d35 25deg 30deg);
    box-shadow: 0 16px 34px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.4);
    opacity: .72;
}
.gear-large { width: 260px; height: 260px; right: 8vw; top: 12vh; animation: gearTurn 60s linear infinite; }
.gear-small { width: 148px; height: 148px; left: 12vw; bottom: 14vh; animation: gearTurnReverse 44s linear infinite; }
.panel:not(.panel-title)::before {
    content: '';
    position: absolute;
    left: -70px;
    top: 50%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--dark-steel) 0 18%, transparent 19%), conic-gradient(#e8eaed 0 8deg, #8b929c 8deg 18deg, #c8cdd3 18deg 27deg, #2a2d35 27deg 32deg);
    box-shadow: 0 12px 26px rgba(0,0,0,.52);
    opacity: .55;
    animation: gearTurn 60s linear infinite;
}

.instrument-panel {
    width: min(980px, 88vw);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(22px, 4vw, 54px);
    align-items: center;
}
.dial-console {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: center;
}
.dial { grid-column: 1 / -1; display: grid; place-items: center; gap: 16px; }
.dial-face {
    width: min(260px, 48vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #1a2332 0 24%, #c8cdd3 25% 27%, #2a2d35 28% 55%, #8b929c 56% 59%, #e8eaed 60% 62%, #2a2d35 63%);
    border: 8px solid #c0c0c0;
    box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 0 25px rgba(168,216,234,.13), inset 0 3px 0 rgba(255,255,255,.28);
    position: relative;
}
.dial-face::before {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: repeating-conic-gradient(from -120deg, rgba(168,216,234,.7) 0 1deg, transparent 1deg 12deg);
    mask: radial-gradient(circle, transparent 0 58%, #000 59% 100%);
}
.dial-needle {
    position: absolute;
    width: 4px;
    height: 42%;
    left: calc(50% - 2px);
    bottom: 50%;
    transform-origin: 50% 100%;
    transform: rotate(-38deg);
    background: linear-gradient(var(--rosy-chrome), var(--burnished-copper));
    box-shadow: 0 0 12px rgba(212,116,138,.45);
    transition: transform .45s cubic-bezier(.22,1.2,.36,1);
}
#dial-readout { font: 500 .76rem/1.4 'IBM Plex Mono', monospace; color: var(--pale-cyan); text-transform: uppercase; letter-spacing: .08em; text-align: center; }

.chrome-toggle, .chrome-button {
    border: 3px solid #c0c0c0;
    border-image: linear-gradient(145deg, #e8e8e8, #a0a0a0, #d0d0d0, #909090) 1;
    background: var(--bezel-gradient);
    color: #1a2332;
    font: 500 .78rem/1 'IBM Plex Mono', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 14px 18px;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.chrome-toggle { background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,.15) 1px, rgba(0,0,0,.15) 2px), var(--bezel-gradient); }
.chrome-toggle:hover, .chrome-button:hover { box-shadow: 0 0 15px rgba(200,220,240,.28), 0 10px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.65); transform: translateY(-2px); }
.chrome-toggle:active, .chrome-button:active { transform: translateY(2px); box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 3px 6px rgba(0,0,0,.35); }
.chrome-toggle.is-active { filter: sepia(.25) saturate(1.2); box-shadow: 0 0 18px rgba(196,154,108,.32), inset 0 2px 5px rgba(0,0,0,.18); color: #2a2d35; }

.rail-main, .rail-branch { stroke: var(--chrome-base) !important; stroke-width: 8 !important; opacity: .38 !important; filter: drop-shadow(0 5px 6px rgba(0,0,0,.5)); }
.rail-branch { stroke: var(--burnished-copper) !important; opacity: .25 !important; transition: opacity .35s ease; }
.panel-sidechain.route-side .rail-branch { opacity: .7 !important; }
.lever-frame { margin-top: 28px; display: grid; gap: 13px; justify-items: center; }
.lever {
    width: 170px;
    height: 62px;
    border-radius: 40px;
    border: 3px solid #c0c0c0;
    background: #151b25;
    box-shadow: inset 0 5px 12px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.4);
    cursor: pointer;
    padding: 5px;
}
.lever span {
    display: block;
    width: 68px;
    height: 46px;
    border-radius: 26px;
    background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,.15) 1px, rgba(0,0,0,.15) 2px), var(--bezel-gradient);
    box-shadow: 0 5px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55);
    transition: transform .32s cubic-bezier(.22,1.2,.36,1);
}
.route-side .lever span { transform: translateX(86px); }
.route-labels { width: 210px; display: flex; justify-content: space-between; color: var(--pale-cyan); font: 500 .68rem/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }

.river-bank { fill: none; stroke: rgba(212,220,230,.22); stroke-width: 34; stroke-linecap: round; }
.river-flow { fill: none; stroke: var(--pale-cyan); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 24 22; animation: riverDash 5.5s linear infinite; filter: drop-shadow(0 0 12px rgba(168,216,234,.42)); }
.packet {
    position: absolute;
    z-index: 2;
    width: 34px;
    height: 15px;
    border-radius: 12px;
    background: var(--bezel-gradient);
    box-shadow: 0 0 15px rgba(168,216,234,.36), 0 4px 8px rgba(0,0,0,.45);
    offset-path: path('M -20 414 C 176 286 298 520 468 374 S 704 220 854 386 S 1028 480 1220 300');
    animation: packetFlow 7s linear infinite;
}
.packet-two { animation-delay: -2.3s; }
.packet-three { animation-delay: -4.7s; }

.constellation path { stroke: var(--pale-cyan); stroke-dasharray: 7 11; opacity: .34; }
.constellation circle { fill: var(--meadow-teal); stroke-width: 3; filter: drop-shadow(0 0 10px rgba(168,216,234,.55)); }
.constellation text { fill: var(--pale-cyan); font: 500 20px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-shadow: 0 2px 4px #000; }

.bookshelf {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 30px 0 34px;
    padding: 18px 18px 26px;
    background: linear-gradient(#111827, #222832);
    box-shadow: inset 0 8px 15px rgba(0,0,0,.54), inset 0 -8px 0 rgba(196,154,108,.35);
}
.book {
    min-height: 220px;
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(90deg, #8b929c, #e8eaed 12%, #c8cdd3 38%, #6b7280 100%);
    color: #1a2332;
    box-shadow: 7px 0 10px rgba(0,0,0,.28), inset 2px 0 0 rgba(255,255,255,.45);
    writing-mode: vertical-rl;
    text-align: left;
}
.book span { font: 700 1.05rem/1.2 'Playfair Display', serif; letter-spacing: .04em; }
.book small { font: 500 .62rem/1.2 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }

.chrome-button { display: inline-block; }

.chrome-rail {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 30;
    width: min(860px, calc(100vw - 28px));
    height: 40px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    padding: 0 14px;
    border: 3px solid rgba(200,205,211,.55);
    border-radius: 24px;
    background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,.15) 1px, rgba(0,0,0,.15) 2px), linear-gradient(145deg, rgba(232,234,237,.35), rgba(42,45,53,.8));
    box-shadow: 0 12px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.35);
}
.rail-track { position: absolute; left: 28px; right: 28px; top: 17px; height: 6px; border-radius: 8px; background: #111827; box-shadow: inset 0 2px 4px rgba(0,0,0,.72); }
.rail-knob {
    position: absolute;
    top: -8px;
    left: 0;
    width: 58px;
    height: 22px;
    border-radius: 18px;
    background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,.16) 2px, rgba(0,0,0,.16) 4px), var(--bezel-gradient);
    box-shadow: 0 7px 13px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55);
    transition: transform .22s ease;
}
.chrome-rail button {
    position: relative;
    z-index: 2;
    border: 0;
    background: transparent;
    color: var(--bright-edge);
    font: italic 400 .78rem/1 'Libre Baskerville', serif;
    cursor: pointer;
    text-shadow: 0 1px 3px #000;
}
.chrome-rail button span {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(5px);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    padding: 8px 10px;
    color: #2a2d35;
    background: linear-gradient(145deg, #d8b17d, #c49a6c 55%, #8c6741);
    border: 1px solid #e8c998;
    font: italic 400 .72rem/1 'Libre Baskerville', serif;
    box-shadow: 0 8px 18px rgba(0,0,0,.42);
    transition: opacity .2s ease, transform .2s ease;
}
.chrome-rail button:hover span { opacity: 1; transform: translateX(-50%) translateY(0); }
.chrome-rail button.is-active { color: var(--burnished-copper); }

.is-visible .chrome-bezel > * { animation: textSlide .38s ease both; }
.is-visible .chrome-bezel > *:nth-child(2) { animation-delay: .08s; }
.is-visible .chrome-bezel > *:nth-child(3) { animation-delay: .16s; }
.is-visible .chrome-bezel > *:nth-child(4) { animation-delay: .24s; }

@media (max-width: 900px) {
    .instrument-panel { grid-template-columns: 1fr; }
    .bookshelf { grid-template-columns: repeat(2, 1fr); }
    .book { min-height: 150px; writing-mode: initial; }
    .reading-bezel, .switch-bezel, .channel-bezel { justify-self: center; margin: 0; }
    .mini-plate { display: none; }
    .engraved-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .panel { padding: 22px; }
    .chrome-bezel { max-width: 94vw; padding: 30px 22px; }
    .chrome-rail { width: calc(100vw - 16px); padding: 0 8px; }
    .chrome-rail button { font-size: .62rem; }
    .bookshelf { grid-template-columns: 1fr; }
    .gear-large { width: 170px; height: 170px; }
}