@font-face { font-family: "MK Audiowide"; src: url("/opening/Audiowide-Regular.ttf") format("truetype"); font-display: block; }
:root { --bg: #000; --ink: #e6e6e6; --key: #ff4a1c; --key-dim: rgba(255, 74, 28, .55); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font-family: "MK Audiowide", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.ui { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ui > section { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; transition: opacity .5s ease; }
.ui > section[hidden] { display: none; }
.load { gap: 14px; }
.pct { margin: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: .04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(0, 0, 0, .9); }
.bar { display: block; width: clamp(150px, 14vw, 200px); height: 2px; background: rgba(255, 74, 28, .18); }
.bar > span { display: block; height: 100%; width: 100%; background: var(--key); transform: scaleX(0); transform-origin: left center; transition: transform .2s linear; }
.ask { gap: 30px; pointer-events: auto; opacity: 0; }
.ask.show { opacity: 1; }
.ask-t { margin: 0; font-size: clamp(13px, 1.25vw, 17px); font-weight: 400; line-height: 1.45; text-align: center; letter-spacing: .03em; text-shadow: 0 0 14px rgba(0, 0, 0, 1); }
.ask-b { display: flex; gap: 22px; }
.snd { width: clamp(84px, 9vw, 116px); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 8px;
  font: inherit; font-size: 11px; letter-spacing: .14em; color: #fff; cursor: pointer; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.snd svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.snd.on { background: var(--key); border: 0; }
.snd.off { background: rgba(0, 0, 0, .35); border: 1px solid var(--key-dim); }
.snd:hover { transform: scale(1.06); }
.snd.off:hover { border-color: var(--key); }
.snd:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.snd:active { transform: scale(.97); }
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { .ui > section, .bar > span, .snd { transition: none; } }