:root {
  color-scheme: dark;
  --fg: #d8e8fa;
  --dim: #8992b0;
  --hairline: rgba(176, 205, 255, .18);
  --accent: #a6e6ff;
  --panel: rgba(12, 17, 37, .76);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; }
html { background: #040713; }
body { position: fixed; inset: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); -webkit-font-smoothing: antialiased; user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #b2eaff; outline-offset: 4px; }
.universe { position: fixed; inset: 0; background: radial-gradient(ellipse 32% 45% at 52% 53%, rgba(36, 41, 91, .44), transparent 80%), radial-gradient(ellipse 37% 45% at 35% 66%, rgba(12, 65, 91, .25), transparent 70%), radial-gradient(ellipse 37% 54% at 72% 32%, rgba(64, 28, 107, .26), transparent 74%), linear-gradient(130deg, #060918 2%, #040713 45%, #080819 100%); }
#universeCanvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.grain { position: fixed; inset: 0; opacity: .14; pointer-events: none; background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".86" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" opacity=".18" filter="url(%23n)"/%3E%3C/svg%3E'); }
.header { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: clamp(22px, 3.6vw, 45px) clamp(22px, 4.2vw, 68px); pointer-events: none; z-index: 10; }
.brand { display: flex; gap: 14px; align-items: center; font-size: 13px; font-weight: 650; letter-spacing: .36em; text-decoration: none; color: #dce5fb; pointer-events: auto; }
.brand-point { color: #a3c8ff; margin-left: 3px; }
.brand-mark { position: relative; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; }
.brand-mark i { position: absolute; width: 26px; height: 10px; border: 1px solid rgba(174, 220, 255, .75); border-radius: 50%; transform: rotate(-35deg); }
.brand-mark i:nth-child(2) { transform: rotate(35deg); border-color: rgba(205, 181, 255, .76); }
.brand-mark i:nth-child(3) { width: 5px; height: 5px; background: #dff4ff; border: none; border-radius: 50%; box-shadow: 0 0 12px #7dcfff; }
.header-right { display: flex; align-items: center; gap: 9px; font: 10px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .18em; color: #8e99b5; white-space: nowrap; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #92ecde; box-shadow: 0 0 13px #74d6c9; }
.coordinate { position: fixed; top: 46%; font: 10px/2 ui-monospace, Consolas, monospace; letter-spacing: .2em; color: rgba(151, 171, 216, .43); z-index: 2; pointer-events: none; }
.coordinate-left { left: clamp(20px, 4.2vw, 68px); }
.coordinate-right { right: clamp(20px, 4.2vw, 68px); text-align: right; }
.intro { position: fixed; left: 0; right: 0; top: 17%; display: flex; align-items: center; flex-direction: column; text-align: center; z-index: 4; pointer-events: none; transition: opacity 1.65s ease, transform 2s ease; }
.intro.is-gone { opacity: 0; transform: translateY(-24px); }
.intro-kicker { font: 10px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .48em; color: #98c0d7; margin: 0 0 21px; }
.intro h1 { font-family: Didot, 'Bodoni MT', Georgia, serif; font-size: clamp(52px, 10vw, 125px); font-weight: 400; letter-spacing: .27em; text-indent: .27em; margin: 0; line-height: 1; color: #e4f0ff; text-shadow: 0 0 33px rgba(140, 183, 255, .40), 0 0 110px rgba(95, 90, 210, .36); }
.intro-subtitle { font-size: clamp(11px, 1.6vw, 16px); font-weight: 300; margin: 22px 0 0; color: #ccd7fa; letter-spacing: .65em; text-indent: .65em; }
.intro-description { margin: 27px 0 0; font-size: 12px; color: #8093b2; letter-spacing: .11em; }
.intro-line { margin-top: 33px; width: 1px; height: 37px; background: linear-gradient(180deg, #a4c5ed, transparent); }
.upper-label { position: fixed; top: 22%; left: clamp(22px, 4.2vw, 68px); z-index: 3; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .9s ease, transform .9s ease; pointer-events: none; }
body.has-begun .upper-label { opacity: 1; transform: none; }
.caption-index { font: 10px/1 ui-monospace, Consolas, monospace; color: #92bee2; letter-spacing: .25em; }
.caption-title { font-family: Georgia, serif; font-size: 21px; letter-spacing: .1em; font-weight: 400; }
.caption-desc { font: 9px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .22em; color: #697b9c; }
.message-wrap { position: fixed; left: 0; right: 0; bottom: clamp(160px, 20vh, 220px); min-height: 40px; display: grid; place-items: center; pointer-events: none; z-index: 5; padding: 0 20px; text-align: center; }
.message { color: #c2dfff; text-shadow: 0 0 24px rgba(141, 181, 255, .75); letter-spacing: .16em; font-size: clamp(12px, 1.6vw, 18px); margin: 0; opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s ease; line-height: 1.6; }
.message.is-visible { opacity: 1; transform: translateY(0); }
.gesture-hint { position: fixed; bottom: clamp(115px, 13vh, 143px); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; font: 11px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .1em; color: #8496b4; z-index: 6; white-space: nowrap; pointer-events: none; transition: opacity 1s ease; }
.gesture-hint.is-hidden { opacity: 0; }
.gesture-symbol { color: #a4c7f5; font-size: 17px; }
.dock { position: fixed; bottom: clamp(34px, 5.2vh, 66px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; padding: 8px 10px; z-index: 15; border: 1px solid var(--hairline); border-radius: 18px; background: var(--panel); box-shadow: 0 18px 60px rgba(0,0,0,.25), 0 0 75px rgba(90, 123, 211, .055), inset 0 1px rgba(255,255,255,.055); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.mode-switch { display: flex; gap: 2px; align-items: center; }
.mode-btn { white-space: nowrap; border: 1px solid transparent; background: transparent; border-radius: 11px; padding: 12px 14px; font-size: 12px; color: #8491ab; letter-spacing: .06em; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.mode-btn:hover, .icon-btn:hover { color: #f0f8ff; background: rgba(139, 180, 252, .09); }
.mode-btn.is-active { border-color: rgba(160, 203, 255, .22); background: rgba(110, 161, 230, .13); color: #d9eeff; }
.mode-number { font: 9px ui-monospace, Consolas, monospace; color: #7a94b9; margin-right: 6px; }
.dock-divider { width: 1px; height: 25px; background: var(--hairline); margin: 0 4px; }
.icon-btn { display: inline-grid; place-items: center; width: 39px; height: 39px; border: 0; background: transparent; border-radius: 11px; cursor: pointer; color: #9dabca; transition: color .2s ease, background .2s ease; }
.icon-btn svg { width: 19px; height: 19px; }
.sound-on-icon, .play-icon { display: none; }
body.sound-enabled .sound-on-icon { display: block; }
body.sound-enabled .sound-off-icon { display: none; }
body.is-paused .play-icon { display: block; }
body.is-paused .pause-icon { display: none; }
.bottom-note { position: fixed; bottom: 17px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; color: rgba(150, 164, 202, .34); white-space: nowrap; font: 9px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .23em; z-index: 2; pointer-events: none; }
.note-divider { color: rgba(160, 192, 228, .22); }
.no-script { position: fixed; inset: auto 0 10%; z-index: 20; text-align: center; padding: 20px; background: #11162c; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 720px) {
  .header { padding: 22px 20px; }
  .header-right { font-size: 8px; letter-spacing: .06em; }
  .brand { font-size: 11px; gap: 8px; }
  .coordinate { display: none; }
  .intro { top: 19%; }
  .intro h1 { font-size: clamp(48px, 14vw, 72px); letter-spacing: .16em; text-indent: .16em; }
  .intro-kicker { font-size: 9px; letter-spacing: .26em; }
  .intro-subtitle { margin-top: 16px; }
  .intro-description { margin-top: 19px; font-size: 11px; }
  .upper-label { top: 18%; left: 22px; }
  .caption-title { font-size: 19px; }
  .message-wrap { bottom: 175px; }
  .gesture-hint { bottom: 117px; font-size: 10px; }
  .dock { bottom: max(40px, calc(24px + env(safe-area-inset-bottom))); width: max-content; max-width: calc(100vw - 24px); gap: 2px; padding: 6px; border-radius: 15px; }
  .mode-btn { padding: 10px 9px; font-size: 11px; }
  .mode-number { margin-right: 3px; font-size: 8px; }
  .dock-divider { margin: 0 2px; }
  .icon-btn { width: 33px; height: 34px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .bottom-note { bottom: max(14px, env(safe-area-inset-bottom)); font-size: 8px; letter-spacing: .07em; gap: 9px; }
}
@media (max-width: 360px) {
  .header-right { display: none; }
  .mode-number { display: none; }
  .dock { max-width: 98vw; }
  .mode-btn { padding: 10px 10px; }
  .bottom-note { letter-spacing: 0; }
}
@media (max-height: 530px) {
  .intro { top: 10%; }
  .intro-kicker, .intro-description, .intro-line, .coordinate { display: none; }
  .intro h1 { font-size: 47px; }
  .intro-subtitle { margin-top: 7px; }
  .upper-label { top: 16%; }
  .gesture-hint { bottom: 95px; }
  .message-wrap { bottom: 120px; }
  .dock { bottom: 23px; }
  .bottom-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}