@font-face {
  font-family: "NB International";
  src: url("assets/fonts/nb-international-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "NB Akademie Pro";
  src: url("assets/fonts/nb-akademie-pro-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "NB Akademie Pro", "Helvetica Neue", sans-serif;
  font-synthesis: none;
  --sky-top: #040b20;
  --sky-middle: #02050d;
  --sky-bottom: #000000;
  --heading-ink: #ffffff;
  --title-blend: normal;
  --footer-ink: #ffffff;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--sky-top); scrollbar-width: none; overscroll-behavior-y: none; overflow-anchor: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  min-height: 800svh;
  padding: max(22px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  background: transparent;
}
#sky {
  position: fixed;
  inset: calc(-1 * env(safe-area-inset-top, 0px)) 0 calc(-1 * env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  /* Extend solid endpoint colours behind Safari's status/home areas. The
     centre gradient still fills the viewport while the toolbars move. */
  background: linear-gradient(180deg,
    var(--sky-top) 0px, var(--sky-top) env(safe-area-inset-top, 0px),
    var(--sky-middle) 55%,
    var(--sky-bottom) calc(100% - env(safe-area-inset-bottom, 0px)), var(--sky-bottom) 100%);
}
/* Safari samples the page background for its toolbar tint. */
#sky { background-color: var(--sky-top); }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--star-visibility, 0); }
main { flex: 1; position: relative; }
h1, footer, .music-caption, .quanta-caption, .supercut-caption { font-family: "NB International", "Helvetica Neue", sans-serif; }
h1 { position: fixed; top: max(22px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); margin: 0; font-size: 25px; line-height: .96; font-weight: 400; letter-spacing: -.65px; color: var(--heading-ink); mix-blend-mode: var(--title-blend); }
footer { position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--footer-ink); font-size: 13px; line-height: 16px; }
.email { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.email, #clock-button { opacity: .6; }
.email:hover { text-decoration: underline; text-underline-offset: 4px; }
button { appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; color: inherit; }
button:focus:not(:focus-visible) { outline: none; }
#intro-close, #music-close, #close-panel { display: inline-grid; place-items: center; }
.close-symbol {
  display: block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("assets/xmark.png?v=2") center / contain no-repeat;
  mask: url("assets/xmark.png?v=2") center / contain no-repeat;
  pointer-events: none;
}
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 2px; }
#intro-close:focus-visible, #music-close:focus-visible, #close-panel:focus-visible {
  outline: 1px solid #ffffff80;
  outline-offset: -2px;
  border-radius: 6px;
}
#intro-note:focus, #music-detail:focus { outline: none; }
#clock-button { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 0; margin: -8px 0; white-space: nowrap; }
#time-panel {
  position: fixed;
  isolation: isolate;
  overflow: hidden;
  bottom: max(62px, calc(env(safe-area-inset-bottom) + 62px));
  right: max(24px, env(safe-area-inset-right));
  width: min(350px, calc(100vw - 40px));
  padding: 20px;
  color: #f8f8ff;
  background: linear-gradient(150deg, #080f25, #02040b);
  border: 1px solid #ffffff24;
  border-radius: 12px;
  box-shadow: 0 12px 50px #0003;
  font-size: 13px;
}
#time-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#time-panel .panel-heading, #time-slider { position: relative; z-index: 1; }
#time-panel .panel-heading { text-shadow: 0 1px 8px #02040b; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h2 { margin: 0; font-size: 16px; font-weight: 400; }
#close-panel { border: 0; background: none; font-size: 24px; line-height: 1; padding: 3px 5px; margin-right: -5px; }
#time-slider { width: 100%; margin: 20px 0 2px; accent-color: #f0d58d; cursor: ew-resize; }
.smooth-border { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; fill: none; stroke: var(--smooth-border, #ffffff24); stroke-width: 2px; }
/* The clip keeps the outer half of the stroke outside the surface. */
#intro-trigger.smooth-corners, #intro-note.smooth-corners, #time-panel.smooth-corners { border: 0; border-radius: 0; }
#intro-trigger.smooth-corners:focus-visible { outline-offset: -5px; }
@media (max-width: 520px) {
  body { padding: max(20px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom)); }
  footer { left: 20px; right: 20px; }
  h1 { top: max(20px, env(safe-area-inset-top)); left: 20px; }
  #time-panel { right: 20px; }
}

.external-arrow { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; }

/* Safari samples 4px inside the viewport and only tracks solid background
   colours on surfaces thicker than 10px. Keep these 12px edge bands separate
   from the full-viewport gradient, whose sampled colour Safari can cache.
   They must paint after the star canvas but before the content: even a
   transparent canvas can otherwise become Safari's full-screen sample. */
#sky-top-edge, #sky-bottom-edge {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}
#sky-top-edge { top: 0; height: max(12px, env(safe-area-inset-top)); background-color: var(--sky-top); }
#sky-bottom-edge { bottom: 0; height: max(12px, env(safe-area-inset-bottom)); background-color: var(--sky-bottom); }