* {
  box-sizing:border-box
}

html {
  background:var(--paper);
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;
  line-height:1.18;
  -webkit-font-smoothing:antialiased
}

button,a,input {
  -webkit-tap-highlight-color:transparent
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

button {
  border:0;
  background:none
}

button:disabled {
  cursor:default
}

button,a {
  touch-action:manipulation
}

button:focus-visible,a:focus-visible {
  outline:3px solid var(--yellow);
  outline-offset:4px
}

.paper-panel:focus-visible,.yellow-panel:focus-visible {
  outline-color:var(--paper)
}

button:active {
  transform:translateY(1px)
}

h1,h2,h3,p,figure {
  margin:0
}

img {
  display:block;
  max-width:100%
}

button svg {
  pointer-events:none
}

.display {
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase
}

.icon {
  display:block;
  width:24px;
  height:24px;
  flex:none
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  padding:12px 18px;
  background:var(--yellow);
  color:var(--ink);
  z-index:100
}

.skip-link:focus {
  top:10px
}

.app-frame {
  container:app / inline-size;
  position:relative;
  min-height:100dvh;
  background-color:var(--ink);
  background-image:radial-gradient(ellipse at 72% 2%,#05233a 0,transparent 55%),var(--grain);
  isolation:isolate;
  padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom))
}

.preview-note {
  display:none
}

.dialog-open {
  overflow:hidden
}

@media(min-width:760px) {
  body {
    padding:35px 32px 45px
  }
  .preview-note {
    max-width:1100px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:var(--ink);
    font-size:14px
  }
  .preview-note>span {
    display:flex;
    align-items:center;
    gap:12px
  }
  .preview-note b {
    font-family:var(--display);
    font-weight:400;
    font-size:18px
  }
  .preview-note i {
    width:5px;
    height:5px;
    background:var(--ink);
    border-radius:50%
  }
  .preview-note a {
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:4px
  }
  .app-frame {
    max-width:1100px;
    margin:auto;
    border-radius:8px;
    overflow:clip;
    min-height:0;
    box-shadow:0 22px 60px #001b2e15
  }
  .phone-preview .app-frame {
    max-width:414px
  }
  .phone-preview .preview-note {
    max-width:650px
  }
  .phone-preview body {
    padding-top:24px
  }
  .phone-preview .app-frame {
    box-shadow:0 18px 60px #001b2e20
  }
}

@media(max-width:759px) {
  .app-frame {
    min-height:calc(100dvh - 23px);
  }
  html {
    background:var(--ink)
  }
  body {
    padding-top:env(safe-area-inset-top)
  }
  .preview-note {
    display:flex;
    justify-content:center;
    padding:5px 10px;
    background:var(--paper);
    color:var(--ink);
    font-size:11px;
    letter-spacing:.2px
  }
  .preview-note b,.preview-note a,.preview-note i {
    display:none
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}