*{box-sizing:border-box}
html{background:#000;color:#f2f2f2;-webkit-text-size-adjust:100%}
body{overflow-x:clip;margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:64px 28px 88px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
main{width:100%;max-width:540px}
.ribbon{display:block;width:240px;height:240px;margin:0 auto 40px;overflow:visible}
h1{--ink:#f2f2f2;margin:0 0 30px;color:var(--ink);font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.045em;text-wrap:balance}
p{--ink:#a6a6a6;margin:0 0 22px;color:var(--ink);font-size:18px;line-height:1.65;letter-spacing:-.012em;text-wrap:pretty}
p:first-of-type{--ink:#f2f2f2;text-wrap:balance}
p:last-child{margin-bottom:0}
/* Words rise in; a few letters decode through a glyph first.
   The glyph is painted over the real letter, so nothing reflows. */
.w{display:inline-block}
.g{position:relative}
.g.on{color:transparent}
.g.on::after{content:attr(data-g) / "";position:absolute;inset:0 auto auto 50%;transform:translateX(-50%);color:var(--ink);opacity:.55;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:400;letter-spacing:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
::selection{background:#fff;color:#000}
@media(max-width:600px){
  body{padding:36px 28px 56px}
  .ribbon{width:200px;height:200px;margin-bottom:28px}
  h1{font-size:25px;margin-bottom:26px}
  p{font-size:17px;line-height:1.65;margin-bottom:22px}
}
@media(max-height:700px) and (min-width:601px){
  body{padding-top:28px;padding-bottom:48px}
  .ribbon{width:180px;height:180px;margin-bottom:28px}
}
/* With scripts on, hold the copy until main.js has its reveal in place, so the
   finished text never flashes first. Without scripts the copy simply shows. */
@media (scripting: enabled){
  html:not(.text-ready) .wordmark,
  html:not(.text-ready) main > p{opacity:0}
}