@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Space+Grotesk:wght@400;500;700&display=swap";
:root {
    --yc-black: #000000;
    --yc-ink: #2a2215;
    --yc-yellow-core: #fee202;
    --yc-yellow-bright: #ffdf01;
    --yc-gold-shadow: #d0ad31;
    --yc-cream: #fdecd3;
    --yc-offwhite: #fdfaf3;
    --yc-lip-purple: #a878a8;
    --surface-0: rgba(0, 0, 0, .9);
    --surface-1: rgba(42, 34, 21, .84);
    --line-soft: rgba(253, 250, 243, .2);
    --line-strong: rgba(255, 223, 1, .55);
    --fx-fast: .16s;
    --fx-medium: .28s;
    --fx-slow: .52s;
    --fx-glitch: .36s;
    --ease-future: cubic-bezier(.2, .8, .2, 1)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-height: 100dvh;
    color: var(--yc-offwhite);
    font-family: Space Grotesk, sans-serif;
    background: #050302 url(/background.png) center center / cover no-repeat fixed
}

#app {
    width: 100%
}

.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
}

.app-shell {
    --cursor-x: 54%;
    --cursor-y: 32%;
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.1rem 1.1rem 8.2rem
}

.app-shell:before {
    content: none
}

.app-shell:after {
    content: none
}

.ambient-grid,
.ambient-orbs,
.scanline-layer {
    pointer-events: none;
    position: fixed;
    inset: 0
}

.ambient-grid,
.ambient-orbs {
    display: none
}

.scanline-layer {
    z-index: 2;
    opacity: .15;
    mix-blend-mode: screen;
    background: repeating-linear-gradient(to bottom, rgba(253, 250, 243, .09) 0, rgba(253, 250, 243, .09) 1px, transparent 1px, transparent 3px);
    animation: scan-fall 9s linear infinite
}

.boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 9;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    padding: 1rem;
    background: radial-gradient(circle at center, #2a2215db, #000000f7);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    overflow: hidden
}

.boot-overlay:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 223, 1, .18), transparent 35%), repeating-linear-gradient(to right, rgba(253, 250, 243, .07) 0, rgba(253, 250, 243, .07) 1px, transparent 1px, transparent 24px);
    opacity: .5;
    animation: boot-grid-shift 8s linear infinite
}

.boot-halo {
    position: absolute;
    width: min(58vw, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 223, 1, .34), rgba(168, 120, 168, .18), transparent 68%);
    filter: blur(14px);
    animation: boot-halo-pulse 2.2s ease-in-out infinite
}

.boot-core {
    position: relative;
    width: 170px;
    aspect-ratio: 1;
    display: grid;
    place-items: center
}

.boot-ring {
    position: absolute;
    border-radius: 50%
}

.boot-ring--outer {
    inset: -10px;
    border: 2px solid rgba(253, 250, 243, .14);
    border-top-color: #ffdf01eb;
    border-right-color: #d0ad31cc;
    box-shadow: 0 0 24px #ffdf0138;
    animation: boot-spin 2.5s linear infinite
}

.boot-ring--inner {
    inset: 22px;
    border: 1px dashed rgba(168, 120, 168, .9);
    border-bottom-color: #ffdf01d1;
    animation: boot-spin-reverse 1.9s linear infinite
}

.boot-logo {
    position: relative;
    z-index: 1;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    border: 2px solid rgba(255, 223, 1, .58);
    box-shadow: 0 0 0 8px #ffdf0114, 0 0 28px #ffdf0157;
    animation: boot-pulse 1.3s ease-in-out infinite
}

.boot-meter {
    width: min(420px, 78vw);
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(253, 250, 243, .35);
    background: linear-gradient(90deg, #ffdf011a, #a878a81a), #00000080
}

.boot-meter span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ffdf0126, #ffdf01f2 30%, #a878a8e6 52%, #ffdf01f2 72%, #ffdf0126);
    background-size: 220% 100%;
    animation: boot-flow 1.2s linear infinite
}

.boot-dots {
    display: flex;
    align-items: center;
    gap: .42rem
}

.boot-dots span {
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffdf0159;
    box-shadow: 0 0 0 1px #fdfaf31f;
    animation: boot-dot 1s ease-in-out infinite
}

.boot-dots span:nth-child(2) {
    animation-delay: .08s
}

.boot-dots span:nth-child(3) {
    animation-delay: .16s
}

.boot-dots span:nth-child(4) {
    animation-delay: .24s
}

.boot-dots span:nth-child(5) {
    animation-delay: .32s
}

.boot-dots span:nth-child(6) {
    animation-delay: .4s
}

.boot-fade-enter-active,
.boot-fade-leave-active {
    transition: opacity .42s ease
}

.boot-fade-enter-from,
.boot-fade-leave-to {
    opacity: 0
}

.command-bar,
.main-stage,
.deck-dock {
    position: relative;
    z-index: 3
}

.command-bar {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    overflow: hidden;
    padding: .95rem 1.05rem;
    border: 1px solid var(--line-soft);
    border-radius: 17px;
    background: linear-gradient(130deg, #2a2215eb, #000000db);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 44px #0000005c, inset 0 1px #fdfaf31a;
    animation: panel-boot .76s ease-out both
}

.command-bar:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid rgba(255, 223, 1, .22);
    box-shadow: inset 0 0 0 1px #ffdf0114, 0 0 20px #ffdf0124;
    animation: edge-pulse 3.6s ease-in-out infinite
}

.command-bar:after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 24%, rgba(255, 223, 1, .18), transparent 60%);
    transform: translate(-130%);
    animation: holo-sweep 7s ease-in-out infinite
}

.brand-pack {
    display: flex;
    align-items: center;
    gap: .8rem;
    position: relative;
    z-index: 1
}

.brand-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 223, 1, .5);
    box-shadow: 0 0 0 4px #ffdf0114, 0 0 18px #ffdf0140
}

.brand-overline {
    margin: 0;
    font-size: .72rem;
    letter-spacing: .12em;
    color: #fdfaf3bd
}

.brand-pack h1 {
    margin: .18rem 0 0;
    font-family: Orbitron, sans-serif;
    font-size: clamp(1.06rem, 2.2vw, 1.3rem);
    letter-spacing: .06em
}

.status-cluster {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    z-index: 1
}

.social-links {
    display: inline-flex;
    align-items: center;
    gap: .4rem
}

.social-link {
    position: relative;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 11px;
    border: 1px solid rgba(255, 223, 1, .35);
    background: linear-gradient(140deg, #2a2215bf, #000000b3);
    color: var(--yc-offwhite);
    display: grid;
    place-items: center;
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--fx-fast) var(--ease-future), border-color var(--fx-fast) ease, box-shadow var(--fx-fast) ease
}

.social-link:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 223, 1, .26), transparent 68%);
    transform: translate(-130%)
}

.social-link:hover,
.social-link:focus-visible {
    transform: translateY(-1px);
    border-color: #ffdf019e;
    box-shadow: 0 8px 18px #0000005c, 0 0 18px #ffdf0147;
    outline: none
}

.social-link:hover:before,
.social-link:focus-visible:before {
    animation: holo-sweep 1.2s ease
}

.social-link:active {
    transform: translateY(0) scale(.97)
}

.social-link__icon {
    width: 1rem;
    height: 1rem;
    display: inline-grid;
    place-items: center
}

.social-link__icon svg {
    width: 100%;
    height: 100%;
    display: block
}

.clock-panel {
    border: 1px solid rgba(253, 250, 243, .24);
    background: linear-gradient(140deg, #0009, #2a221594);
    border-radius: 12px;
    padding: .44rem .64rem;
    min-width: 172px;
    text-align: right
}

.clock-panel p {
    margin: 0;
    font-size: .7rem;
    color: #fdfaf3b3
}

.clock-panel strong {
    margin: 0;
    font-family: Orbitron, sans-serif;
    font-size: 1rem;
    color: var(--yc-yellow-core)
}

.status-line {
    display: flex;
    gap: .54rem;
    flex-wrap: wrap;
    justify-content: flex-end
}

.status-chip {
    display: inline-flex;
    flex-direction: column;
    gap: .08rem;
    padding: .45rem .62rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 223, 1, .32);
    background: #00000085;
    min-width: 138px
}

.status-chip strong {
    font-size: .72rem;
    color: var(--yc-yellow-core);
    letter-spacing: .06em
}

.status-chip em {
    font-style: normal;
    font-size: .79rem;
    color: var(--yc-offwhite)
}

.main-stage {
    display: grid;
    gap: 1rem;
    margin-top: 1rem
}

.hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: 21px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(120deg, #000000e6, #2a2215e0);
    min-height: 370px;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 1rem;
    padding: 1.35rem;
    box-shadow: 0 24px 48px #00000061;
    animation: panel-boot .9s .12s ease-out both
}

.hero-panel:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 223, 1, .17), transparent 62%);
    transform: translate(-120%);
    animation: hero-sweep 8.5s ease-in-out infinite
}

.hero-panel:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, #000000d6 26%, #2a221575), repeating-linear-gradient(-35deg, rgba(255, 223, 1, .08), rgba(255, 223, 1, .08) 2px, transparent 2px, transparent 14px)
}

.hero-copy,
.hero-console {
    position: relative;
    z-index: 1
}

.hero-copy:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.25rem;
    height: 44px;
    opacity: .5;
    background: repeating-linear-gradient(90deg, rgba(253, 250, 243, .18), rgba(253, 250, 243, .18) 1px, transparent 1px, transparent 11px);
    -webkit-mask-image: linear-gradient(to top, black, transparent);
    mask-image: linear-gradient(to top, black, transparent);
    pointer-events: none
}

.hero-tag {
    margin: 0;
    color: var(--yc-yellow-core);
    letter-spacing: .11em;
    font-size: .76rem
}

.hero-copy h2 {
    margin: .72rem 0;
    max-width: 19ch;
    font-family: Orbitron, sans-serif;
    font-size: clamp(1.55rem, 2.7vw, 2.4rem);
    line-height: 1.08
}

.hero-copy p {
    margin: 0;
    max-width: 60ch;
    color: #fdfaf3eb;
    line-height: 1.45
}

.hero-console {
    padding: .92rem;
    border-radius: 14px;
    border: 1px solid rgba(253, 250, 243, .26);
    background: #000000a3;
    align-self: end;
    box-shadow: inset 0 1px #fdfaf314
}

.hero-console:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 223, 1, .22) 0 1px, transparent 1px), linear-gradient(0deg, rgba(255, 223, 1, .08) 0 1px, transparent 1px);
    background-size: 44px 100%, 100% 22px;
    opacity: .2
}

.console-label {
    margin: 0 0 .5rem;
    color: var(--yc-yellow-core);
    letter-spacing: .08em;
    font-size: .75rem
}

.pulse-line {
    display: grid;
    gap: .34rem;
    padding: .45rem 0;
    border-bottom: 1px solid rgba(253, 250, 243, .12)
}

.pulse-head {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    font-size: .82rem
}

.pulse-head strong {
    color: var(--yc-yellow-core);
    font-family: Orbitron, sans-serif;
    font-size: .82rem
}

.pulse-meter,
.telemetry-meter {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(253, 250, 243, .25);
    background: #0000006b
}

.pulse-meter span,
.telemetry-meter span {
    display: block;
    position: relative;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d0ad31a6, #ffdf01, #a878a8bd)
}

.telemetry-meter span:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(253, 250, 243, .7), transparent 70%);
    transform: translate(-120%);
    animation: beam-sweep 2s linear infinite
}

.ghost-button {
    margin-top: .9rem;
    width: 100%;
    border: 1px solid rgba(168, 120, 168, .55);
    color: var(--yc-offwhite);
    background: linear-gradient(120deg, #a878a847, #00000059);
    border-radius: 10px;
    padding: .65rem .82rem;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: transform var(--fx-fast) var(--ease-future), box-shadow var(--fx-fast) ease
}

.ghost-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px #0000004d
}

.telemetry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem
}

.telemetry-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(120deg, #2a2215d6, #000000db);
    padding: .95rem;
    min-height: 152px;
    display: grid;
    gap: .45rem;
    animation: panel-boot .9s ease-out both
}

.telemetry-card:before,
.telemetry-card:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: #ffdf0194;
    pointer-events: none
}

.telemetry-card:before {
    top: 8px;
    left: 8px;
    border-top: 2px solid;
    border-left: 2px solid
}

.telemetry-card:after {
    right: 8px;
    bottom: 8px;
    border-right: 2px solid;
    border-bottom: 2px solid
}

.telemetry-title {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .08em;
    color: #fdfaf3c7
}

.telemetry-value {
    margin: 0;
    font-family: Orbitron, sans-serif;
    font-size: 1.06rem
}

.telemetry-detail {
    margin: 0;
    color: #fdfaf3e0;
    line-height: 1.38;
    font-size: .9rem
}

.telemetry-meter span {
    width: var(--panel-level)
}

.gallery-section {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(135deg, #2a2215b8, #000000c7);
    padding: 1rem
}

.gallery-frame {
    position: absolute;
    inset: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 223, 1, .22);
    pointer-events: none
}

.gallery-frame:before,
.gallery-frame:after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: #ffdf01b8
}

.gallery-frame:before {
    top: -1px;
    left: -1px;
    border-top: 2px solid;
    border-left: 2px solid
}

.gallery-frame:after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid;
    border-bottom: 2px solid
}

.gallery-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.gallery-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffdf01b3;
    box-shadow: 0 0 6px #ffdf0173;
    animation: particle-float 8s linear infinite
}

.gallery-particles span:nth-child(1) {
    left: 7%;
    top: 80%;
    animation-delay: -1.1s
}

.gallery-particles span:nth-child(2) {
    left: 16%;
    top: 62%;
    animation-delay: -2.2s
}

.gallery-particles span:nth-child(3) {
    left: 22%;
    top: 86%;
    animation-delay: -3.8s
}

.gallery-particles span:nth-child(4) {
    left: 37%;
    top: 78%;
    animation-delay: -1.9s
}

.gallery-particles span:nth-child(5) {
    left: 45%;
    top: 92%;
    animation-delay: -2.8s
}

.gallery-particles span:nth-child(6) {
    left: 54%;
    top: 72%;
    animation-delay: -4.3s
}

.gallery-particles span:nth-child(7) {
    left: 63%;
    top: 86%;
    animation-delay: -3s
}

.gallery-particles span:nth-child(8) {
    left: 72%;
    top: 69%;
    animation-delay: -1.4s
}

.gallery-particles span:nth-child(9) {
    left: 81%;
    top: 84%;
    animation-delay: -5.4s
}

.gallery-particles span:nth-child(10) {
    left: 88%;
    top: 76%;
    animation-delay: -2.7s
}

.gallery-particles span:nth-child(11) {
    left: 28%;
    top: 70%;
    animation-delay: -6.1s
}

.gallery-particles span:nth-child(12) {
    left: 59%;
    top: 90%;
    animation-delay: -.9s
}

.gallery-particles span:nth-child(13) {
    left: 12%;
    top: 68%;
    animation-delay: -4.6s
}

.gallery-particles span:nth-child(14) {
    left: 76%;
    top: 88%;
    animation-delay: -3.1s
}

.section-heading {
    position: relative;
    z-index: 1
}

.section-heading p {
    margin: 0;
    color: var(--yc-yellow-core);
    font-size: .78rem;
    letter-spacing: .09em
}

.section-heading h3 {
    margin: .45rem 0 .85rem;
    font-family: Orbitron, sans-serif;
    font-size: clamp(1rem, 2.1vw, 1.5rem)
}

.focus-console {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: .8rem;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: .6rem;
    background: #00000073;
    margin-bottom: .82rem
}

.focus-media {
    position: relative;
    margin: 0;
    border-radius: 10px;
    overflow: hidden
}

.focus-media img {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block
}

.focus-visuals {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.focus-reticle,
.focus-wave {
    position: absolute;
    inset: 0
}

.focus-reticle {
    background: radial-gradient(circle at center, transparent 18%, rgba(255, 223, 1, .45) 19%, transparent 20%), linear-gradient(#ffdf0152, #ffdf0152) center/1px 100% no-repeat, linear-gradient(90deg, #ffdf0152, #ffdf0152) center/100% 1px no-repeat;
    mix-blend-mode: screen
}

.focus-wave {
    background: repeating-linear-gradient(-45deg, rgba(168, 120, 168, .26), rgba(168, 120, 168, .26) 2px, transparent 2px, transparent 10px);
    opacity: .34;
    animation: wave-slide 4s linear infinite
}

.focus-copy {
    display: grid;
    align-content: center;
    gap: .35rem
}

.focus-copy p,
.focus-copy span,
.focus-copy h4 {
    margin: 0
}

.focus-copy p:first-child {
    font-size: .76rem;
    color: var(--yc-yellow-core);
    letter-spacing: .08em
}

.focus-copy h4 {
    font-family: Orbitron, sans-serif;
    font-size: clamp(1rem, 2vw, 1.25rem)
}

.focus-copy span {
    font-size: .74rem;
    color: #fdfaf3cc
}

.focus-copy p:last-child {
    line-height: 1.42
}

.window-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem
}

.window-card {
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(130deg, #000000c2, #2a2215b8);
    animation: panel-boot .68s ease-out both;
    animation-delay: calc(.16s + (var(--card-index) * 28ms));
    transition: transform var(--fx-medium) var(--ease-future), box-shadow var(--fx-medium) ease, border-color var(--fx-medium) ease;
    outline: none
}

.window-card:hover,
.window-card:focus-visible,
.window-card.is-active {
    transform: translateY(-5px);
    border-color: #ffdf018c;
    box-shadow: 0 14px 28px #00000061, 0 0 0 1px #ffdf014d
}

.window-card--panorama {
    grid-column: span 2
}

.window-head {
    display: grid;
    grid-template-columns: repeat(3, 10px) 1fr;
    align-items: center;
    gap: .4rem;
    padding: .45rem .6rem;
    border-bottom: 1px solid rgba(253, 250, 243, .14);
    background: #00000073
}

.window-head span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--yc-yellow-bright);
    opacity: .84
}

.window-head p {
    margin: 0;
    font-size: .67rem;
    letter-spacing: .08em;
    text-align: right;
    color: #fdfaf3c7
}

.window-media {
    position: relative;
    margin: 0;
    overflow: hidden
}

.window-media img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform var(--fx-medium) var(--ease-future), filter var(--fx-fast) ease
}

.media-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.media-overlay--scan {
    opacity: .28;
    mix-blend-mode: screen;
    background: repeating-linear-gradient(to bottom, rgba(253, 250, 243, .2) 0, rgba(253, 250, 243, .2) 1px, transparent 1px, transparent 4px)
}

.media-overlay--corners {
    opacity: .86;
    background: linear-gradient(#ffdf01bf, #ffdf01bf) left top/18px 2px no-repeat, linear-gradient(#ffdf01bf, #ffdf01bf) left top/2px 18px no-repeat, linear-gradient(#ffdf01bf, #ffdf01bf) right top/18px 2px no-repeat, linear-gradient(#ffdf01bf, #ffdf01bf) right top/2px 18px no-repeat, linear-gradient(#ffdf01bf, #ffdf01bf) left bottom/18px 2px no-repeat, linear-gradient(#ffdf01bf, #ffdf01bf) left bottom/2px 18px no-repeat, linear-gradient(#ffdf01bf, #ffdf01bf) right bottom/18px 2px no-repeat, linear-gradient(#ffdf01bf, #ffdf01bf) right bottom/2px 18px no-repeat
}

.media-overlay--reticle {
    opacity: 0;
    background: radial-gradient(circle at center, transparent 17%, rgba(255, 223, 1, .45) 18%, transparent 19%), linear-gradient(#ffdf014d, #ffdf014d) center/1px 100% no-repeat, linear-gradient(90deg, #ffdf014d, #ffdf014d) center/100% 1px no-repeat;
    transition: opacity var(--fx-fast) ease
}

.window-card:hover .window-media img,
.window-card:focus-visible .window-media img,
.window-card.is-active .window-media img {
    transform: scale(1.05);
    filter: saturate(1.18) contrast(1.08) drop-shadow(1px 0 0 rgba(255, 80, 100, .24)) drop-shadow(-1px 0 0 rgba(80, 220, 255, .24))
}

.window-card:hover .media-overlay--scan,
.window-card:focus-visible .media-overlay--scan,
.window-card.is-active .media-overlay--scan {
    animation: scan-jitter var(--fx-glitch) steps(2, end) 1
}

.window-card:hover .media-overlay--reticle,
.window-card:focus-visible .media-overlay--reticle,
.window-card.is-active .media-overlay--reticle {
    opacity: .75
}

.window-card--panorama .window-media img {
    aspect-ratio: 16 / 9;
    object-position: center
}

.window-copy {
    padding: .68rem
}

.window-copy h4 {
    margin: 0;
    font-size: .92rem
}

.window-copy p {
    margin: .3rem 0 0;
    color: #fdfaf3e6;
    font-size: .84rem;
    line-height: 1.36
}

.archive-section {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: .8rem
}

.archive-core,
.archive-list {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(130deg, #000000bd, #2a2215b3);
    padding: .9rem
}

.archive-core:before,
.archive-list:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(#ffdf012b, #ffdf012b) left 12px top 12px/20px 2px no-repeat, linear-gradient(#ffdf012b, #ffdf012b) left 12px top 12px/2px 20px no-repeat, linear-gradient(#ffdf012b, #ffdf012b) right 12px bottom 12px/20px 2px no-repeat, linear-gradient(#ffdf012b, #ffdf012b) right 12px bottom 12px/2px 20px no-repeat
}

.archive-core {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: .9rem
}

.archive-logo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 2px solid rgba(255, 223, 1, .45)
}

.archive-tag {
    margin: 0;
    color: var(--yc-yellow-core);
    letter-spacing: .1em;
    font-size: .74rem
}

.archive-core h3 {
    margin: .45rem 0;
    font-family: Orbitron, sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.25rem)
}

.archive-core p,
.archive-list li {
    color: #fdfaf3eb;
    line-height: 1.45
}

.archive-list ul {
    margin: .55rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: .52rem
}

.dock-stack {
    position: fixed;
    left: 50%;
    bottom: .8rem;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    z-index: 7
}

.contract-dock {
    position: relative;
    width: auto;
    margin-bottom: -1px
}

.contract-copy {
    position: relative;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid rgba(255, 223, 1, .5);
    background: linear-gradient(122deg, #000000d1, #2a2215db);
    color: var(--yc-yellow-core);
    font-family: Orbitron, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-align: center;
    padding: .42rem .98rem;
    text-transform: none;
    box-shadow: 0 10px 26px #00000057, 0 0 0 1px #ffdf011a inset;
    transition: transform var(--fx-fast) var(--ease-future), border-color var(--fx-fast) ease, box-shadow var(--fx-fast) ease, color var(--fx-fast) ease
}

.contract-copy:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, transparent 34%, rgba(255, 223, 1, .28), transparent 66%);
    transform: translate(-120%);
    animation: contract-sweep 2.8s linear infinite
}

.contract-copy:hover,
.contract-copy:focus-visible {
    border-color: #ffdf01db;
    box-shadow: 0 0 20px #ffdf014d, 0 8px 24px #0000004d, 0 0 0 1px #ffdf0142 inset;
    transform: translateY(-1px);
    outline: none
}

.contract-copy.is-copied {
    color: var(--yc-offwhite);
    border-color: #a878a8e6;
    box-shadow: 0 0 26px #a878a859, 0 8px 24px #0000004d, 0 0 0 1px #a878a833 inset
}

.copy-feedback {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .35rem);
    transform: translate(-50%);
    border-radius: 999px;
    border: 1px solid rgba(255, 223, 1, .72);
    background: linear-gradient(120deg, #000000e0, #2a2215e6);
    color: var(--yc-yellow-bright);
    font-family: Orbitron, sans-serif;
    font-size: .64rem;
    letter-spacing: .14em;
    font-weight: 700;
    padding: .24rem .56rem;
    white-space: nowrap;
    box-shadow: 0 0 16px #ffdf0147, 0 8px 18px #00000047;
    pointer-events: none
}

.copy-flash-enter-active,
.copy-flash-leave-active {
    transition: all var(--fx-fast) var(--ease-future)
}

.copy-flash-enter-from,
.copy-flash-leave-to {
    opacity: 0;
    transform: translate(-50%) translateY(5px) scale(.96)
}

.copy-flash-enter-to,
.copy-flash-leave-from {
    opacity: 1;
    transform: translate(-50%) translateY(0) scale(1)
}

.deck-dock {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 999px;
    border: 1px solid rgba(253, 250, 243, .22);
    background: #000000bd;
    padding: .36rem;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: 0 12px 30px #00000059, inset 0 1px #fdfaf314;
    z-index: 1
}

.dock-links {
    display: flex;
    gap: .35rem
}

.dock-links a {
    text-decoration: none;
    color: var(--yc-offwhite);
    padding: .44rem .74rem;
    border-radius: 999px;
    font-size: .8rem;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    transition: border-color var(--fx-fast) ease, background var(--fx-fast) ease, transform var(--fx-fast) var(--ease-future)
}

.dock-links a span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--yc-yellow-bright);
    box-shadow: 0 0 10px #ffdf0199
}

.dock-links a:hover,
.dock-links a:focus-visible {
    border-color: #ffdf0180;
    background: #ffdf0126;
    transform: translateY(-1px);
    outline: none
}

.social-links--dock {
    padding-left: .15rem;
    border-left: 1px solid rgba(253, 250, 243, .18)
}

.social-link--dock {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px
}

.accent-yellow {
    border-color: #ffdf016b
}

.accent-gold {
    border-color: #d0ad318a
}

.accent-cream {
    border-color: #fdecd361
}

.accent-purple {
    border-color: #a878a88f
}

.accent-ink {
    border-color: #2a2215e0
}

@keyframes panel-boot {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(.99);
        filter: blur(3px)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0)
    }
}

@keyframes hero-sweep {
    0%,
    40%,
    to {
        transform: translate(-120%)
    }
    58%,
    74% {
        transform: translate(120%)
    }
}

@keyframes holo-sweep {
    0% {
        transform: translate(-130%)
    }
    to {
        transform: translate(130%)
    }
}

@keyframes edge-pulse {
    0%,
    to {
        opacity: .55
    }
    50% {
        opacity: .92
    }
}

@keyframes scan-fall {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 0 100px
    }
}

@keyframes orb-drift {
    0% {
        transform: translateZ(0) scale(1)
    }
    to {
        transform: translate3d(0, -16px, 0) scale(1.03)
    }
}

@keyframes beam-sweep {
    0% {
        transform: translate(-120%)
    }
    to {
        transform: translate(120%)
    }
}

@keyframes particle-float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0
    }
    20% {
        opacity: .85
    }
    to {
        transform: translateY(-130px) scale(.7);
        opacity: 0
    }
}

@keyframes wave-slide {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 80px 0
    }
}

@keyframes scan-jitter {
    0%,
    to {
        transform: translate(0);
        opacity: .28
    }
    20% {
        transform: translate(1px);
        opacity: .46
    }
    40% {
        transform: translate(-1px);
        opacity: .32
    }
    60% {
        transform: translate(1px);
        opacity: .44
    }
    80% {
        transform: translate(-1px);
        opacity: .34
    }
}

@keyframes boot-pulse {
    0%,
    to {
        transform: scale(1);
        filter: brightness(1)
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.1)
    }
}

@keyframes boot-spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes boot-spin-reverse {
    0% {
        transform: rotate(360deg)
    }
    to {
        transform: rotate(0)
    }
}

@keyframes boot-flow {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 220% 0
    }
}

@keyframes boot-dot {
    0%,
    to {
        transform: translateY(0);
        background: #ffdf0152
    }
    50% {
        transform: translateY(-5px) scale(1.08);
        background: #ffdf01f2
    }
}

@keyframes boot-grid-shift {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(24px)
    }
}

@keyframes boot-halo-pulse {
    0% {
        transform: scale(.98);
        opacity: .52
    }
    to {
        transform: scale(1.04);
        opacity: .88
    }
}

@keyframes contract-sweep {
    0% {
        transform: translate(-120%)
    }
    to {
        transform: translate(120%)
    }
}

@media(max-width:1180px) {
    .hero-panel {
        grid-template-columns: 1fr;
        min-height: auto
    }
    .telemetry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .window-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .archive-section {
        grid-template-columns: 1fr
    }
    .focus-console {
        grid-template-columns: 220px 1fr
    }
}

@media(max-width:860px) {
    .app-shell {
        padding: .8rem .8rem 7.3rem
    }
    .dock-stack {
        left: 0;
        transform: none;
        width: 100%
    }
    .command-bar {
        flex-direction: column;
        align-items: stretch
    }
    .status-cluster,
    .status-line {
        justify-content: flex-start
    }
    .clock-panel {
        text-align: left;
        min-width: 0;
        width: 100%
    }
    .focus-console {
        grid-template-columns: 1fr
    }
    .focus-media img {
        max-height: 180px
    }
    .window-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .window-card--panorama {
        grid-column: span 2
    }
    .contract-dock {
        width: auto
    }
    .deck-dock {
        width: calc(100% - 1.2rem);
        justify-content: space-between
    }
}

@media(max-width:620px) {
    .telemetry-grid,
    .window-grid {
        grid-template-columns: 1fr
    }
    .window-card--panorama {
        grid-column: span 1
    }
    .archive-core {
        grid-template-columns: 1fr
    }
    .contract-copy {
        font-size: .64rem;
        letter-spacing: .09em;
        padding: .42rem .72rem
    }
    .dock-links {
        gap: .2rem
    }
    .dock-links a {
        font-size: .74rem;
        padding: .42rem .56rem
    }
    .social-link--dock {
        width: 1.8rem;
        height: 1.8rem
    }
}

@media(prefers-reduced-motion:reduce) {
    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
    .ambient-orbs,
    .scanline-layer,
    .gallery-particles,
    .media-overlay--scan,
    .focus-wave {
        display: none
    }
    .window-card:hover .window-media img,
    .window-card:focus-visible .window-media img,
    .window-card.is-active .window-media img {
        transform: none;
        filter: none
    }
    .contract-copy:before {
        animation: none
    }
}