@font-face { font-family: "Inter Variable"; src: url("/assets/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { color-scheme: dark; --text: #f2f2f7; --body: #d4d4de; --muted: #a3a3b2; --line: rgb(255 255 255 / .1); --accent: #8e8bff; --ease-out: cubic-bezier(.22, .9, .3, 1); --spring: cubic-bezier(.3, 1.5, .5, 1); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; padding: clamp(16px, 6vh, 72px) 16px; background: #04040f url("/assets/wallpaper.webp") center top / cover no-repeat; color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Inter Variable", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, p, dl, dd, address { margin: 0; }
main { display: grid; place-items: center; }
main:focus { outline: none; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s; }
a:hover { color: #b6b4ff; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 10px 14px; border-radius: 6px; background: var(--text); color: #04040f; }
.skip-link:focus { top: 16px; }

.window { width: min(100%, 560px); border-radius: 14px; overflow: hidden; background: rgb(30 30 40 / .82); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border: 1px solid rgb(255 255 255 / .13); box-shadow: 0 0 0 1px rgb(0 0 0 / .7), 0 28px 70px rgb(2 2 18 / .65); }
.window.doc { width: min(100%, 760px); align-self: start; }
.window.alert { width: min(100%, 380px); }
.titlebar { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; padding-inline: 76px; }
.titlebar p { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lights { position: absolute; left: 14px; top: 14px; display: flex; gap: 8px; }
.lights > * { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .25); }
.lights > :nth-child(2) { background: #febc2e; }
.lights > :nth-child(3) { background: #28c840; }
.close::before, .close::after { content: ""; position: absolute; left: 3px; top: 5.25px; width: 6px; height: 1.5px; border-radius: 1px; background: #4d0000; opacity: 0; rotate: 45deg; transition: opacity .12s; }
.close::after { rotate: -45deg; }
.lights:hover .close::before, .lights:hover .close::after, .close:focus-visible::before, .close:focus-visible::after { opacity: .75; }
.close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }

.about { padding: 18px 40px 34px; text-align: center; }
.app-icon { display: block; margin: 0 auto 14px; filter: drop-shadow(0 10px 18px rgb(8 6 40 / .55)); }
.about h1 { font-size: 26px; font-weight: 700; letter-spacing: -.015em; }
.tagline { margin-top: 4px; color: var(--muted); font-size: 14px; text-wrap: balance; }
.tagline .bit { color: var(--accent); }
.specs { margin-top: 26px; display: grid; grid-template-columns: 1fr 1.7fr; gap: 9px 14px; font-size: 13.5px; text-align: left; }
.specs div { display: contents; }
.specs dt { text-align: right; color: var(--muted); font-weight: 500; }

.win-foot { display: flex; align-items: center; gap: 18px; padding: 13px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.win-foot p { margin-right: auto; }
.win-foot nav { display: flex; gap: 16px; }
.win-foot nav a { color: var(--muted); }
.win-foot nav a:hover, .win-foot nav a[aria-current="page"] { color: var(--text); }
.button { display: inline-block; padding: 5px 16px; border-radius: 7px; background: #5e5ce6; color: #fff; font-size: 13px; font-weight: 500; text-align: center; text-decoration: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); transition: background-color .15s; }
.button:hover { background: #6d6bf0; color: #fff; }

.doc-body { padding: 28px 48px 40px; border-top: 1px solid var(--line); }
.doc-body h1 { font-size: 28px; font-weight: 700; letter-spacing: -.015em; }
.effective { margin: 8px 0 26px; color: var(--muted); font-size: 14px; }
.doc-body p:not(.effective), .doc-body address { max-width: 62ch; color: var(--body); line-height: 1.6; font-style: normal; }
.doc-body section { margin-top: 26px; }
.doc-body h2 { margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.doc-body section p + p { margin-top: 10px; }
.doc-body section p + address { margin-top: 6px; }

.alert-body { padding: 10px 28px 26px; text-align: center; }
.alert-body h1 { margin-top: 10px; font-size: 16px; font-weight: 700; }
.alert-body p { margin: 6px 0 20px; font-size: 13.5px; color: var(--body); }
.alert-body .button { display: block; padding-block: 7px; }

@media (max-width: 560px) {
  body { padding-top: 16px; }
  .about { padding-inline: 22px; }
  .specs { grid-template-columns: 1fr; gap: 2px; text-align: center; }
  .specs dt { text-align: center; margin-top: 10px; }
  .doc-body { padding: 24px 22px 32px; }
  .win-foot { flex-wrap: wrap; row-gap: 12px; }
  .win-foot .button { flex-basis: 100%; padding-block: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .window { transition: opacity .3s ease-out, scale .5s var(--spring), translate .5s var(--ease-out); }
  @starting-style { .window { opacity: 0; scale: .94; translate: 0 14px; } }
  .bits rect { transform-box: fill-box; transform-origin: center; transition: opacity .15s ease-out, scale .45s var(--spring); }
  @starting-style { .bits rect { opacity: 0; scale: 0; } }
  .bits rect:nth-child(1) { transition-delay: .3s; }
  .bits rect:nth-child(2) { transition-delay: .38s; }
  .bits rect:nth-child(3) { transition-delay: .46s; }
  .bits rect:nth-child(4) { transition-delay: .54s; }
  .bits rect:nth-child(5) { transition-delay: .62s; }
  .bits rect:nth-child(6) { transition-delay: .7s; }
  html:active-view-transition .window, html:active-view-transition .bits rect { transition: none; }

  .button { transition: background-color .15s, scale .12s var(--ease-out); }
  .button:active { scale: .96; }

  .window { view-transition-name: window; }
  .lights { view-transition-name: lights; }
  .titlebar p { view-transition-name: window-title; }
  ::view-transition-group(*) { animation-duration: .42s; animation-timing-function: var(--ease-out); }
  ::view-transition-group(window) { overflow: clip; border-radius: 14px; background: rgb(30 30 40 / .92); box-shadow: 0 0 0 1px rgb(0 0 0 / .7), 0 28px 70px rgb(2 2 18 / .65); }
  ::view-transition-old(window), ::view-transition-new(window) { height: 100%; object-fit: none; object-position: 50% 0; mix-blend-mode: normal; }
  ::view-transition-old(window) { animation: fade-out .16s ease-out both; }
  ::view-transition-new(window) { animation: fade-in .26s .14s ease-out both; }
}

@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }