:root { --vx-background: #000; --vx-color-1: #fff; --vx-color-2: #ff2bd6; --vx-color-3: #39ff14; --vx-color-4: #000080; }
html { scroll-behavior: smooth; scroll-padding-top: 10px; }
button, a, input { -webkit-tap-highlight-color: #ff2bd666; }
button { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #fff200; outline-offset: 3px; }
.y2k-page { width: min(1120px, 100%); }
.y2k-layout { grid-template-columns: 180px minmax(0, 1fr) 200px; }
.y2k-header { min-height: 158px; }
.y2k-wordart { font-size: clamp(34px, 5.5vw, 60px); }
.y2k-wordart span { animation: y2k-hue 6s linear infinite; }
.y2k-wordart span + span { font-size: .44em; }
.y2k-burst { border: 0; padding: 0; }
.y2k-box { scroll-margin-top: 8px; }
.y2k-welcome { grid-template-columns: minmax(0, 1fr) 245px; gap: 14px; }
.y2k-welcome p { margin: 0 0 12px; }
.y2k-welcome .y2k-hello { margin: 5px 0 12px; font-size: 26px; }
.y2k-welcome .y2k-list { margin: 14px 0; }
.y2k-welcome .y2k-list li { margin: 4px 0; }
.y2k-frame { margin: 5px 0; width: 100%; }
.y2k-frame:hover { transform: scale(1.02); }
.photo { display: block; padding: 3px; border: 3px outset #c0c0c0; background: #c0c0c0; cursor: zoom-in; width: 100%; max-width: 100%; }
.photo:hover { border-color: #ff2bd6; box-shadow: 0 0 12px #ff2bd6; }
.photo img { display: block; width: 100%; height: auto; color: #000; font: 12px Verdana, sans-serif; }
.portrait .photo { padding: 0; border: 0; }
.primary { display: inline-block; text-decoration: none; margin: 8px 0 6px; padding: 11px 10px; }
.primary:visited { color: #fff; }
.status-strip { border-top: 1px dashed #ff2bd6; padding: 7px 9px; font-size: 11px; color: #0ff; }
.status-strip span { float: right; color: #ff2bd6; }
.center { text-align: center; }
.lime { color: #39ff14; }
.pink { color: #ff2bd6; }
.small-button { border: 2px outset silver; background: linear-gradient(#fff, #aaa); color: #000; padding: 5px 6px; cursor: pointer; }
.y2k-button { text-decoration: none; display: inline-block; }
#vibe { width: 100%; padding: 8px 2px; font-size: 12px; }
#vibe-status { font-size: 11px; }
.y2k-pet { margin: auto; border: 0; padding: 8px; background: transparent; color: inherit; }
.y2k-construction { min-height: 38px; margin-bottom: 6px; text-align: center; }
.event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.event { min-width: 0; }
.event h3 { margin: 8px 0 5px; font-size: 14px; line-height: 1.25; color: #fff200; }
.event p { margin: 5px 0; font-size: 12px; }
.event > .photo { height: 240px; background: #090017; }
.event > .photo img { height: 100%; object-fit: contain; }
.event:first-child .photo img { max-width: 297px; margin: auto; }
.wide-event { grid-column: 1 / -1; display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 10px; align-items: center; border-top: 1px dashed #7a1cff; padding-top: 12px; }
.wide-event > .photo { height: auto; }
.wide-event > .photo img { height: auto; }
.sport-photos { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 9px; }
.run-game { margin-top: 12px; padding: 8px; border: 2px inset #aaa; background: #14002a; }
.run-game > p:first-child { color: #fff200; margin-top: 2px; }
.run-track { position: relative; height: 65px; border-bottom: 3px dashed #fff; background: repeating-linear-gradient(0deg, #780a42 0 19px, #f19db3 19px 20px); overflow: hidden; }
#runner { position: absolute; left: 0; bottom: 5px; transition: left .22s ease-out; }
#runner img, .finish img { display: block; filter: invert(1); }
.finish { position: absolute; right: 0; bottom: 5px; font-size: 32px; }
progress { display: block; width: 100%; height: 14px; accent-color: #39ff14; margin: 8px 0; }
.run-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#distance { color: #39ff14; font: bold 18px 'Courier New', monospace; white-space: nowrap; }
#run-message { font-size: 11px; min-height: 30px; margin-bottom: 0; }
.merch-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; align-items: start; }
.album-title { color: #ff2bd6; font: bold 20px/1.2 var(--y2k-comic); margin: 4px 0 10px; }
.life-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.life-photos figure { margin: 0; min-width: 0; }
.life-photos .photo { height: 265px; background: #050016; }
.life-photos img { object-fit: contain; height: 100%; }
.life-photos figcaption { text-align: center; color: #0ff; font: 12px/1.4 var(--y2k-comic); padding: 7px 0; }
#quote { color: #fff200; font: bold 18px/1.4 var(--y2k-comic); margin: 4px 0 15px; overflow-wrap: anywhere; }
#quote-button { font-size: 11px; padding: 7px; width: 100%; }
.quote-footer { color: #ff2bd6; text-align: center; font-size: 11px; }
.y2k-badges { gap: 4px; }
.y2k-badge { width: 84px; }
.y2k-poll label { padding: 5px 0; }
.guest-content { text-align: center; margin: 8px; border: 2px dashed #ff2bd6; background: #21001a; padding: 20px 8px; }
.guest-content a { padding: 10px; }
.guest-smiles { color: #fff200; font: bold 22px var(--y2k-comic); margin-bottom: 0; }
.text-button { background: transparent; border: 0; padding: 0; font: inherit; color: #33ccff; text-decoration: underline; cursor: pointer; }
.y2k-window { transition: none; }
.y2k-window[hidden] { display: none; }
.y2k-window-bar { touch-action: none; }
.y2k-window-body p { margin: 0; }
.y2k-toast { max-width: 90vw; text-align: center; pointer-events: none; }
#lightbox { padding: 0; border: 4px ridge #c0c0c0; background: #c0c0c0; color: #000; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
#lightbox::backdrop { background: #000e; }
.lightbox-bar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; padding: 5px; display: flex; align-items: center; justify-content: space-between; gap: 15px; font: bold 11px Verdana, sans-serif; }
.lightbox-bar button, .lightbox-controls button { cursor: pointer; border: 2px outset #fff; background: #c0c0c0; color: #000; padding: 6px; }
#large-photo { display: block; margin: 5px auto; width: auto; height: auto; max-width: min(82vw, var(--photo-max, 600px)); max-height: calc(100dvh - 150px); object-fit: contain; }
.lightbox-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px; font-size: 12px; }
body.giga .y2k-box { box-shadow: 0 0 16px #ff2bd6, inset 0 0 20px #7a1cff55; border-color: #ff2bd6; }
body.giga .y2k-header { box-shadow: 0 0 35px #ff2bd6; }
body.giga .y2k-globe { animation-duration: 1s; }
body.giga .y2k-burst { animation-duration: 2s; }
body.giga .y2k-wordart span { animation-duration: 2s; }
body.motion-paused, body.motion-paused *, body.motion-paused::before { animation-play-state: paused !important; }
body.motion-paused .y2k-new { visibility: visible; }
@media (max-width: 1050px) and (min-width: 761px) {
.y2k-layout { grid-template-columns: 160px minmax(0, 1fr) 180px; }
.y2k-welcome { grid-template-columns: minmax(0, 1fr) 180px; gap: 8px; }
.y2k-badge { width: 74px; }
.wide-event { grid-template-columns: 180px minmax(0, 1fr); }
.primary { font-size: 11px; }
}
@media (max-width: 760px) {
.y2k-page { padding: 4px; }
.y2k-topbar { min-height: 24px; }
.y2k-clock { font-size: 9px; }
.y2k-header { min-height: 126px; grid-template-columns: 43px minmax(0, 1fr) 43px; }
.y2k-burst { width: 43px; height: 43px; font-size: 8px; }
.y2k-globe { width: 40px; height: 40px; }
.y2k-wordart { font-size: clamp(25px, 7.3vw, 46px); }
.y2k-wordart span { -webkit-text-stroke: .6px #fff; }
.y2k-wordart span + span { font-size: .45em; letter-spacing: 0; }
.y2k-tagline { font-size: 11px; }
.y2k-layout { grid-template-columns: minmax(0, 1fr); }
.y2k-nav { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.y2k-nav a { padding: 8px 3px; font-size: 10px; min-height: 32px; }
.y2k-nav a::before { content: ''; }
.y2k-nav .y2k-new { font-size: 7px; margin-left: 1px; }
.y2k-welcome { grid-template-columns: minmax(0, 1fr) 125px; gap: 8px; font-size: 12px; }
.y2k-welcome .y2k-hello { font-size: 22px; }
.y2k-welcome p { margin-bottom: 8px; }
.portrait { width: 125px; }
.y2k-frame figcaption { font-size: 9px; }
.y2k-welcome .y2k-list { font-size: 11px; margin: 7px 0; }
.primary { padding: 10px 6px; font-size: 11px; }
.y2k-construction strong { font-size: 10px; }
.status-strip { font-size: 10px; }
.status-strip span { display: none; }
.event > .photo { height: 190px; }
.wide-event { grid-template-columns: 44% minmax(0, 1fr); }
.wide-event > .photo { height: auto; }
.event h3 { font-size: 13px; }
.sport-photos { grid-template-columns: 35% minmax(0, 1fr); }
.life-photos .photo { height: 200px; }
.y2k-badges { gap: 6px; }
.y2k-window { top: auto; bottom: 12px; width: 260px; left: 12px; right: auto; }
#run-button { font-size: 12px; padding: 7px; }
#distance { font-size: 16px; }
.guest-content a { font-size: 12px; }
.y2k-layout > aside > :not(nav) { order: 2; }
.y2k-player-controls button { min-height: 34px; }
#quote { min-height: 45px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.y2k-new { visibility: visible; }
.y2k-spark { display: none; }
}