:root {
  color-scheme: light;
  --paper: #e0ddd7;
  --ink: #121214;
  --signal: #c8262d;
  --line: rgba(18, 18, 20, 0.24);
  font-family: Georgia, "Times New Roman", "Noto Serif SC", serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--paper); }
button { color: inherit; font: inherit; }

#experience { position: relative; width: 100%; height: 100%; isolation: isolate; background: var(--paper); }
#experience canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#paper { z-index: 0; }
#bokeh { position: absolute; z-index: 1; inset: 0; pointer-events: none; overflow: hidden; }
#bokeh::before, #bokeh::after, #bokeh i {
  content: ""; position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,254,248,.75), rgba(255,254,248,0) 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
#bokeh::before { width: 15vw; height: 15vw; left: 8%; top: 14%; }
#bokeh::after { width: 10vw; height: 10vw; left: 62%; top: 8%; animation-duration: 34s; animation-delay: -12s; }
#bokeh i { width: 12vw; height: 12vw; left: 38%; top: 58%; animation-duration: 40s; animation-delay: -20s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .5; }
  to { transform: translate3d(6vw, -4vh, 0) scale(1.25); opacity: .85; }
}
#ink { z-index: 2; touch-action: none; }
#vignette { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 58%, rgba(52,48,40,.16) 100%); }
#blackout { position: absolute; z-index: 4; inset: 0; pointer-events: none; background: #0b0b0d; opacity: 0; transition: opacity .24s ease-out; }
#fx { z-index: 5; pointer-events: none; }

#experience.is-fading #blackout { opacity: 1; transition: opacity 7s linear; }
#experience.is-fading .chrome { opacity: 0; transition: opacity 2.5s ease; }
#experience.is-fading #ink, #experience.is-fading #bokeh { opacity: 0; transition: opacity 6s ease; }

.chrome { position: absolute; z-index: 7; color: var(--ink); transition: opacity .8s ease; }
.chrome--top { top: max(18px, env(safe-area-inset-top)); left: 26px; display: grid; gap: 9px; }
.chrome__title { font-style: italic; font-size: 17px; letter-spacing: .02em; }
.chrome--logo { right: 26px; bottom: max(18px, env(safe-area-inset-bottom)); font-style: italic; font-size: 21px; letter-spacing: .04em; }
.chrome--credits { left: 26px; bottom: max(18px, env(safe-area-inset-bottom)); font-size: 12px; font-style: italic; opacity: .68; cursor: pointer; }
.chrome--credits:hover { opacity: 1; }

.scrubber { position: relative; width: min(300px, 34vw); height: 18px; cursor: pointer; }
.scrubber__track { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--line); }
.scrubber__fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--ink); }
.scrubber__dot { position: absolute; top: 9px; left: 0%; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,.25); }

.intro { position: absolute; z-index: 6; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; transition: opacity .8s ease; }
.intro.is-hidden { opacity: 0; pointer-events: none; }
.play { display: inline-flex; align-items: center; gap: 13px; border: 0; background: transparent; cursor: pointer; color: var(--ink); font-size: 26px; font-style: italic; letter-spacing: .05em; }
.play svg { width: 30px; height: 30px; fill: var(--ink); transition: transform .3s ease; }
.play:hover svg { transform: scale(1.18); }
.play:hover { opacity: .75; }
.intro__hint { margin: 0; font-size: 12px; font-style: italic; opacity: .55; letter-spacing: .06em; }

.replay-badge { position: absolute; z-index: 8; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); padding: 7px 15px; border: 1px solid var(--line); border-radius: 99px; background: rgba(224,221,215,.7); backdrop-filter: blur(10px); font-size: 12px; font-style: italic; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.replay-badge.is-visible { opacity: 1; }

.end-url { position: absolute; z-index: 9; inset: 0; display: grid; place-content: center; margin: 0; color: #f2f0ea; font-style: italic; font-size: clamp(20px, 3.4vw, 40px); letter-spacing: .03em; opacity: 0; transition: opacity 2.8s ease; pointer-events: none; }
#experience.is-end .end-url { opacity: 1; }

.end-actions { position: absolute; z-index: 9; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
.mini-button { display: none; width: 40px; height: 40px; border: 1px solid rgba(242,240,234,.4); border-radius: 50%; background: transparent; color: #f2f0ea; font-size: 17px; cursor: pointer; transition: background .25s ease, color .25s ease; }
.mini-button.is-visible { display: block; }
.mini-button:hover { background: #f2f0ea; color: #0b0b0d; }

.about { width: min(560px, calc(100vw - 38px)); padding: 0; border: 0; color: var(--ink); background: transparent; }
.about::backdrop { background: rgba(15,15,13,.42); backdrop-filter: blur(7px); }
.about form { position: relative; padding: clamp(28px, 5vw, 54px); background: #ece9e2; box-shadow: 0 25px 80px rgba(0,0,0,.18); }
.about h2 { margin: 0 0 22px; font: 400 clamp(30px,5vw,52px)/1 Georgia, serif; font-style: italic; }
.about p { font-size: 14px; line-height: 1.8; font-family: Georgia, "Noto Serif SC", serif; }
.about__kicker { letter-spacing: .22em; font-size: 10px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 700; }
.about__close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 24px; cursor: pointer; }
.about__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.about__meta span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 10px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }

@media (max-width: 620px) {
  .chrome--top { left: 18px; }
  .chrome__title { font-size: 15px; }
  .chrome--logo { right: 18px; }
  .chrome--credits { left: 18px; }
  .scrubber { width: 52vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}