:root {
    /* IBM Plex Mono and Space Mono for serial-number storytelling. IBM Plex Mono for titles; IBM Plex Sans sparingly; Space Mono for smaller technical annotations and timestamp-style details. If a softer contrast is needed for short narrative paragraphs. */
    --brass: #C59B5A;
    --mauve: #6B4654;
    --shadow: #140409;
    --amber: #F0B45B;
    --cranberry: #7D1E32;
    --cream: #F4D7A1;
    --black: #080507;
    --burgundy: #2A0712;
    --mono: "IBM Plex Mono", "Space Mono", monospace;
    --space: "Space Mono", "IBM Plex Mono", monospace;
    --sans: "IBM Plex Sans", Inter, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--cream);
    font-family: var(--mono);
    background:
        radial-gradient(circle at 20% 10%, rgba(125, 30, 50, .7), transparent 34rem),
        radial-gradient(circle at 88% 22%, rgba(240, 180, 91, .18), transparent 28rem),
        linear-gradient(140deg, var(--black), var(--shadow) 42%, var(--burgundy));
    overflow-x: hidden;
}

.bokeh-field, .scan-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.bokeh-field { z-index: -3; filter: blur(12px) saturate(1.08); opacity: .8; }
.bokeh-field span {
    position: absolute;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    background: rgba(244, 215, 161, .28);
    box-shadow: 0 0 4rem rgba(244, 215, 161, .18);
    animation: floatBokeh 18s ease-in-out infinite alternate;
}
.bokeh-field span:nth-child(1) { left: 4%; top: 14%; background: rgba(125, 30, 50, .55); }
.bokeh-field span:nth-child(2) { right: 10%; top: 8%; width: 9rem; height: 9rem; background: rgba(240, 180, 91, .34); animation-delay: -4s; }
.bokeh-field span:nth-child(3) { left: 52%; top: 48%; width: 16rem; height: 16rem; background: rgba(107, 70, 84, .35); animation-delay: -7s; }
.bokeh-field span:nth-child(4) { left: 10%; bottom: 8%; width: 8rem; height: 8rem; background: rgba(197, 155, 90, .28); animation-delay: -11s; }
.bokeh-field span:nth-child(5) { right: 18%; bottom: 18%; background: rgba(244, 215, 161, .16); animation-delay: -2s; }
.bokeh-field span:nth-child(6) { left: 36%; top: 2%; width: 6rem; height: 6rem; background: rgba(125, 30, 50, .42); animation-delay: -9s; }

.scan-grid {
    z-index: -2;
    background-image:
        linear-gradient(rgba(244, 215, 161, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 215, 161, .055) 1px, transparent 1px),
        repeating-linear-gradient(0deg, rgba(8, 5, 7, .08), rgba(8, 5, 7, .08) 2px, transparent 2px, transparent 7px);
    background-size: 4rem 4rem, 4rem 4rem, 100% 7px;
    box-shadow: inset 0 0 10rem var(--black);
}

.rack {
    width: min(1180px, calc(100vw - 2rem));
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.hero-rack {
    min-height: 100vh;
    padding: 5rem 0 3rem;
    grid-template-columns: 1fr 16rem;
    grid-template-rows: 1fr 15rem;
    align-items: stretch;
}

.title-module { grid-row: 1 / 3; }
.mini-module.inactive { grid-column: 2; grid-row: 1; align-self: end; min-height: 18rem; }
.mini-module.brass { grid-column: 2; grid-row: 2; }

.module {
    position: relative;
    border: 1px solid rgba(244, 215, 161, .24);
    border-radius: 1.15rem;
    background:
        linear-gradient(145deg, rgba(244, 215, 161, .12), transparent 16%),
        linear-gradient(315deg, rgba(8, 5, 7, .8), rgba(42, 7, 18, .94) 56%, rgba(125, 30, 50, .78));
    box-shadow:
        inset .45rem .45rem .9rem rgba(244, 215, 161, .08),
        inset -.65rem -.75rem 1.1rem rgba(8, 5, 7, .82),
        0 1.5rem 3rem rgba(8, 5, 7, .5);
    padding: 2.7rem 1rem 1rem;
    overflow: hidden;
    transform: translate3d(0, 3rem, 0);
    opacity: .35;
    transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter .9s ease;
}

.module.revealed { transform: translate3d(0, 0, 0); opacity: 1; filter: none; }
.module[data-drawer="left"] { transform: translate3d(-5rem, 2rem, 0); }
.module[data-drawer="right"] { transform: translate3d(5rem, 2rem, 0); }
.module[data-drawer="up"] { transform: translate3d(0, 5rem, 0); }
.module[data-drawer="down"] { transform: translate3d(0, -4rem, 0); }
.module.revealed[data-drawer] { transform: translate3d(0, 0, 0); }

.module::before {
    content: "";
    position: absolute;
    inset: .55rem;
    border: 1px solid rgba(197, 155, 90, .18);
    border-radius: .8rem;
    background-image: linear-gradient(90deg, rgba(244, 215, 161, .04) 1px, transparent 1px);
    background-size: 1.25rem 100%;
    pointer-events: none;
}

.module-chrome {
    position: absolute;
    inset: 0 0 auto;
    height: .55rem;
    background: linear-gradient(90deg, transparent, rgba(244, 215, 161, .35), rgba(107, 70, 84, .6), transparent);
}

.label-strip {
    position: absolute;
    top: .75rem;
    left: 1rem;
    right: 1rem;
    height: 1.45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .65rem;
    color: var(--black);
    background: linear-gradient(180deg, var(--brass), var(--amber));
    border-radius: .3rem;
    font: 700 .68rem/1 var(--space);
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: inset 0 1px rgba(244, 215, 161, .65), inset 0 -2px rgba(20, 4, 9, .24);
}

.inset-well {
    position: relative;
    z-index: 1;
    height: 100%;
    border-radius: .75rem;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 78% 12%, rgba(240, 180, 91, .16), transparent 16rem),
        linear-gradient(180deg, rgba(8, 5, 7, .72), rgba(20, 4, 9, .88));
    border: 1px solid rgba(244, 215, 161, .14);
    box-shadow: inset 0 .6rem 1.4rem rgba(8, 5, 7, .9), inset 0 -.2rem .6rem rgba(197, 155, 90, .12);
}

.title-well {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 10rem);
    padding: clamp(2rem, 6vw, 5rem);
}

.coordinate, .label-strip, .large-code { font-family: var(--space); }
.coordinate { color: var(--amber); letter-spacing: .22em; font-size: .75rem; text-transform: uppercase; }
h1, h2, p { margin: 0; }
h1 {
    color: var(--cream);
    font-size: clamp(4rem, 15vw, 12rem);
    line-height: .82;
    letter-spacing: -.08em;
    text-shadow: .06em .06em 0 var(--cranberry), 0 0 2.5rem rgba(240, 180, 91, .22);
}
h2 { font-size: clamp(1.4rem, 3vw, 3rem); line-height: 1.02; letter-spacing: -.04em; color: var(--cream); }
p { color: rgba(244, 215, 161, .78); line-height: 1.65; font-size: .98rem; }
.dek { max-width: 47rem; margin-top: 1.5rem; font: 400 1.08rem/1.75 var(--sans); }

.status-row, .rail-demo, .seal-line { display: flex; align-items: center; gap: .8rem; }
.status-row { margin-top: 2rem; flex-wrap: wrap; color: var(--amber); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.pilot, .bulb {
    display: inline-block;
    border-radius: 50%;
    background: var(--cranberry);
    box-shadow: inset 0 -.18rem .35rem rgba(8, 5, 7, .65), 0 0 1.2rem currentColor;
}
.pilot { width: .85rem; height: .85rem; color: var(--cranberry); }
.pilot.active { background: var(--amber); color: var(--amber); animation: lampPulse 2.8s ease-in-out infinite; }
.meter { width: 10rem; height: .7rem; padding: .12rem; border-radius: 999px; background: var(--black); border: 1px solid rgba(197, 155, 90, .35); }
.meter i { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cranberry), var(--amber)); }

.screw {
    position: absolute;
    z-index: 2;
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, var(--cream), var(--brass) 35%, var(--mauve) 68%, var(--black));
    box-shadow: 0 1px 0 rgba(244, 215, 161, .18), inset 0 0 0 1px rgba(8, 5, 7, .5);
}
.screw::after { content: ""; position: absolute; left: 18%; right: 18%; top: 46%; height: 1px; background: rgba(8, 5, 7, .8); transform: rotate(-18deg); }
.s1 { left: .7rem; top: .7rem; } .s2 { right: .7rem; top: .7rem; } .s3 { left: .7rem; bottom: .7rem; } .s4 { right: .7rem; bottom: .7rem; }

.large-code { display: block; color: var(--mauve); font-size: 6rem; line-height: .8; font-weight: 700; }
.mini-module p { margin-top: 1rem; font-size: .86rem; }

.console-stack { padding: 1rem 0 7rem; }
.story-rack { grid-template-columns: 1.15fr .85fr; grid-template-rows: 22rem 18rem; margin-top: 2rem; }
.wide { grid-column: 1 / 3; }
.tall { min-height: 28rem; }
.compact { min-height: 18rem; }
.split-well { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: end; }
.drawer-tab {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    z-index: 2;
    writing-mode: vertical-rl;
    color: var(--black);
    background: var(--amber);
    padding: .7rem .25rem;
    border-radius: .25rem;
    font: 700 .68rem/1 var(--space);
    letter-spacing: .18em;
}

.bulb-board { display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; }
.bulb { width: 2.2rem; height: 2.2rem; }
.bulb.amber { background: var(--amber); color: var(--amber); }
.bulb.cream { background: var(--cream); color: var(--cream); margin-left: 3rem; opacity: .72; }
.bulb.wine { background: var(--cranberry); color: var(--cranberry); margin-left: 1rem; }
.tick-panel { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; align-content: center; }
.tick-panel span { height: 9rem; border-left: 1px solid rgba(244, 215, 161, .32); border-right: 1px solid rgba(197, 155, 90, .12); background: repeating-linear-gradient(0deg, transparent, transparent .75rem, rgba(240, 180, 91, .3) .8rem); }
.tick-panel p { grid-column: 1 / -1; }

.mechanics-rack { grid-template-columns: 1fr 1fr; margin-top: 1rem; }
.instrument { min-height: 30rem; }
.notes { min-height: 30rem; }
.rail-demo { margin: 1.5rem 0; }
.rail-button {
    color: var(--black);
    background: linear-gradient(180deg, var(--cream), var(--brass));
    border: 0;
    border-radius: .35rem;
    padding: .85rem 1rem;
    font: 700 .75rem var(--space);
    letter-spacing: .12em;
    box-shadow: inset 0 1px rgba(255,255,255,.4), 0 .7rem 1rem rgba(8,5,7,.35);
    cursor: pointer;
}
.rail-track { flex: 1; min-width: 8rem; height: 1rem; padding: .16rem; border-radius: 99px; background: var(--black); border: 1px solid rgba(197, 155, 90, .35); }
.rail-track span { display: block; width: 28%; height: 100%; border-radius: inherit; background: var(--cranberry); transition: width .5s ease, background .5s ease; }
.rail-demo.open .rail-track span { width: 92%; background: var(--amber); }
.note-grid { display: grid; gap: 1rem; align-content: center; }
.note-grid p { border-bottom: 1px solid rgba(197, 155, 90, .18); padding-bottom: 1rem; }
.note-grid b { color: var(--amber); margin-right: .8rem; }

.final-rack { margin-top: 1rem; }
.seal { min-height: 70vh; }
.seal-well { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.2rem; }
.seal-well p:last-of-type { max-width: 50rem; font-family: var(--sans); }
.seal-line span { width: 5rem; height: .35rem; border-radius: 999px; background: var(--cranberry); box-shadow: 0 0 1rem rgba(125, 30, 50, .9); }
.seal-line span:nth-child(2) { background: var(--amber); box-shadow-color: rgba(240, 180, 91, .75); }
.seal-line span:nth-child(3) { background: var(--brass); }

@keyframes floatBokeh { to { transform: translate3d(2rem, -1.5rem, 0) scale(1.08); } }
@keyframes lampPulse { 0%, 100% { opacity: .72; } 50% { opacity: 1; box-shadow: 0 0 2rem currentColor; } }

@media (max-width: 860px) {
    .hero-rack, .story-rack, .mechanics-rack { grid-template-columns: 1fr; grid-template-rows: auto; }
    .title-module, .mini-module.inactive, .mini-module.brass, .wide { grid-column: auto; grid-row: auto; }
    .title-well { min-height: 60vh; }
    .split-well { grid-template-columns: 1fr; }
    .module[data-drawer] { transform: translate3d(0, 3rem, 0); }
    .module.revealed[data-drawer] { transform: translate3d(0, 0, 0); }
}