:root { color-scheme: dark; }
html { scroll-behavior: smooth; scroll-padding-top: 8px; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #fff200; outline-offset: 3px; }
.y2k-page { width: min(1100px, 100%); }
.y2k-layout { grid-template-columns: 180px minmax(0, 1fr) 200px; }
.y2k-welcome { grid-template-columns: minmax(0, 1fr) 210px; gap: 12px; }
.y2k-wordart { font-size: clamp(36px, 7vw, 72px); }
.y2k-wordart span + span { font-size: .47em; }
.y2k-box { scroll-margin-top: 8px; }
.y2k-box-body p:first-child { margin-top: 2px; }
.y2k-burst { border: 0; }
.y2k-globe { border: 0; cursor: pointer; }
.y2k-globe.fast { animation-duration: .25s; }
.controls { display: grid; gap: 6px; }
.controls button { width: 100%; padding: 7px 3px; font-size: 11px; }
.silver-button, .photo-navigation button { border: 3px outset #c0c0c0; background: linear-gradient(#eee, #a5a5b4); color: #000; font: bold 11px/1.3 Verdana, sans-serif; cursor: pointer; }
.silver-button:active, .photo-navigation button:active { border-style: inset; }
.primary { display: inline-block; text-decoration: none; color: #fff !important; padding: 9px 12px; }
.portrait { margin: 0; width: 100%; }
.photo-button { display: block; width: 100%; padding: 0; border: 0; background: #050017; cursor: zoom-in; }
.photo-button img { display: block; width: 100%; height: auto; }
.portrait img { aspect-ratio: 809 / 1280; object-fit: cover; }
.portrait.spinning { animation: photo-spin 1.1s ease-in-out; }
@keyframes photo-spin { to { transform: rotate(360deg); } }
.event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.event { min-width: 0; padding: 5px; border: 1px solid #6154bb; background: linear-gradient(#13032a, #05001b); }
.event .photo-button { border: 3px ridge #ccc; }
.event img { height: 200px; object-fit: contain; }
.event h3 { color: #fff200; font: bold 13px/1.3 Verdana, sans-serif; margin: 8px 0 4px; }
.event p { font-size: 11px; margin: 3px 0; }
.lime { color: #39ff14; }
.pink { color: #ff72df; }
.remote-photo { position: relative; width: 100%; height: 200px; overflow: hidden; border: 3px ridge #ccc; background: #11052b; }
.remote-photo > img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.remote-photo > img.failed { display: none; }
.poster-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; text-align: center; color: #fff200; background: repeating-linear-gradient(45deg, #271253 0 10px, #170b35 10px 20px); }
.poster-fallback strong { font: bold 25px/1.1 'Comic Sans MS', cursive; color: #ff73d3; }
.poster-fallback span { font-size: 10px; }
.sport-quote { color: #00f0ff; text-align: center; font: bold 16px/1.3 'Comic Sans MS', cursive; }
.sports-photos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; align-items: center; }
.sports-photos .photo-button { border: 3px ridge #ccc; }
.sports-photos .headstand { height: 210px; }
.running-game { border: 2px dashed #39ff14; padding: 8px; margin-top: 12px; background: #061a0d; }
.running-game > p:first-child { color: #fff200; font-size: 12px; }
.running-track { height: 56px; position: relative; border-top: 2px solid #fff; border-bottom: 2px solid #fff; background: repeating-linear-gradient(0deg, #8b3832 0 16px, #ffc1aa 17px 18px); overflow: hidden; margin: 10px 0; }
#runner { position: absolute; left: 0; top: 6px; width: 36px; height: 36px; transition: left .2s ease-out; }
#runner img { width: 36px; height: 36px; filter: invert(1); }
.y2k-album .remote-photo { height: 184px; }
.y2k-album .remote-photo img { height: 100%; object-fit: cover; }
@media (max-width: 760px) { .y2k-album .remote-photo { height: 147px; } }
.finish { position: absolute; right: 3px; top: 0; height: 100%; padding-top: 16px; border-left: 4px dashed #fff; font-weight: bold; }
.run-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#distance { color: #39ff14; white-space: nowrap; font: bold 17px/1 'Courier New', monospace; }
#run-message { min-height: 2.9em; margin: 10px 0 0; font-size: 11px; }
.small-link { color: #00f0ff; text-decoration: underline; background: transparent; border: 0; padding: 5px 0; cursor: pointer; }
.album-caption { text-align: center; color: #ff7cdc; font-weight: bold; }
.y2k-album { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.y2k-album img { display: block; width: 100%; height: 172px; object-fit: cover; }
.quote-body { text-align: center; background: radial-gradient(ellipse at center, #360c55, #080019); padding: 16px; }
blockquote { margin: 4px 0 18px; font: bold 22px/1.35 'Comic Sans MS', Georgia, serif; color: #fff200; min-height: 70px; display: grid; place-items: center; }
.guest-content { border: 2px dashed #ff2bd6; margin: 8px; background: #190323; text-align: center; padding: 16px; }
.smile-line { color: #fff200; font: bold 20px/1.2 'Courier New', monospace; }
.y2k-pet { width: 100%; border: 0; background: transparent; }
.big-stat { display: block; margin: 10px 0 4px; color: #39ff14; font: bold 46px/1 'Courier New', monospace; text-shadow: 0 0 10px #39ff14; }
.side-quote { color: #ffcfff; font: italic 16px/1.4 Georgia, serif; }
.y2k-player-controls button { min-height: 28px; color: #000; }
.y2k-window[hidden] { display: none; }
.y2k-window-bar { touch-action: none; }
.y2k-window { transform: none; transition: none; }
.y2k-window.is-open { transform: none; }
.y2k-toast { max-width: 90vw; text-align: center; pointer-events: none; }
body.no-glow * { box-shadow: none !important; text-shadow: none !important; }
#photo-dialog { padding: 0; border: 3px outset #ccc; background: #c0c0c0; max-width: 94vw; max-height: 95svh; color: #000; }
#photo-dialog::backdrop { background: #000d; }
.photo-title { padding: 4px 5px 4px 8px; background: linear-gradient(90deg, navy, #178ae6); display: flex; justify-content: space-between; align-items: center; gap: 14px; color: white; font: bold 12px/1.3 Tahoma, sans-serif; }
.photo-title button { width: 28px; height: 28px; cursor: pointer; color: white; background: #d54827; border: 2px outset #fff; font-size: 20px; }
#large-photo { display: block; width: auto; height: auto; max-width: min(88vw, var(--photo-max, 400px)); max-height: 74svh; margin: 7px auto; object-fit: contain; }
.photo-navigation { display: flex; justify-content: space-between; padding: 4px; gap: 8px; }
.photo-navigation button { padding: 7px; }
body.no-glow .y2k-box, body.no-glow .y2k-globe, body.no-glow .big-stat { box-shadow: none; text-shadow: none; }
body.no-glow .y2k-wordart span { filter: none; animation: none; }
body.no-glow .y2k-tagline { text-shadow: none; }
body.paused *, body.paused *::before { animation-play-state: paused !important; }
body.paused .y2k-spark { display: none; }
@media (max-width: 760px) {
.y2k-layout { grid-template-columns: minmax(0, 1fr); }
.y2k-header { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 2px; }
.y2k-burst { width: 46px; height: 46px; font-size: 9px; }
.y2k-globe { width: 43px; height: 43px; }
.y2k-wordart { font-size: 43px; }
.y2k-wordart span + span { font-size: .36em; letter-spacing: 0; }
.y2k-tagline { font-size: 11px; }
.y2k-clock { font-size: 9px; }
.y2k-topbar { padding: 5px; }
.y2k-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.y2k-nav a { padding: 7px 3px; font-size: 10px; }
.y2k-nav a::before { content: ''; }
.y2k-nav .y2k-new { display: none; }
.y2k-welcome { grid-template-columns: minmax(0, 1fr) 125px; gap: 8px; }
.y2k-welcome p, .y2k-list { font-size: 11px; }
.y2k-welcome .y2k-hello { font-size: 19px; }
.y2k-welcome .primary { font-size: 11px; padding: 8px; }
.y2k-frame { width: 100%; }
.y2k-construction strong { font-size: 9px; text-align: center; }
.event img, .remote-photo { height: 155px; }
.event h3 { font-size: 11px; }
.y2k-album img { height: 135px; }
.y2k-window { top: auto; bottom: 12px; right: auto; left: 12px; width: min(280px, calc(100vw - 24px)); }
.run-controls { flex-wrap: wrap; }
.y2k-layout > aside > :not(nav) { margin: 0; }
.y2k-blinkie { justify-self: center; }
.sports-photos .headstand { height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.y2k-spark { display: none; }
}