body { overflow-x: clip }
.wrap { max-width: 1020px }
.topbar { margin-bottom: 0 }
.brand.big { gap: .65rem }
.brand.big img { width: 48px; height: 34px }
.brand.big span { font-size: 1.6rem }
a:focus-visible { border-radius: 2px }
.top-links { display: flex; gap: 1.5rem; font-size: var(--text-md) }
.top-links a { padding: .5rem 0 }

.hero { position: relative; padding: 5.5rem 0 0 }
.hero::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: -14rem; left: 50%; width: 100vw;
                transform: translateX(-50%);
                background-image: linear-gradient(var(--rule) 1px, transparent 1px),
                                  linear-gradient(90deg, var(--rule) 1px, transparent 1px);
                background-size: 32px 32px; background-position: center -1px;
                mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, var(--ink), transparent 75%) }
.hero h1 { margin: 0; max-width: 11em; font-family: var(--serif); font-weight: 500;
           font-size: clamp(2.4rem, 1.1rem + 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.025em;
           text-wrap: balance }
.hero mark { position: relative; isolation: isolate; color: var(--ink); background: none; padding: 0 .04em }
.hero mark::before { content: ''; position: absolute; z-index: -1; inset: .3em -.14em .06em -.1em;
                     background: repeating-linear-gradient(transparent 0 22%, color-mix(in srgb, var(--highlighter), var(--ink) 5%) 22% 27%),
                                 var(--highlighter);
                     transform: rotate(-1.2deg);
                     -webkit-mask: url("/img/ui/marker.svg") 0 0 / 100% 100% no-repeat;
                     mask: url("/img/ui/marker.svg") 0 0 / 100% 100% no-repeat }
.hero mark[data-stroke="2"]::before { inset: .34em -.2em .02em -.06em; transform: rotate(-2.2deg) }
.hero mark[data-stroke="3"]::before { inset: .27em -.08em .09em -.16em; transform: rotate(-.4deg) scaleY(-1) }
.hero mark[data-stroke="4"]::before { inset: .31em -.18em .03em -.12em; transform: rotate(.5deg) }
.hero mark[data-stroke="5"]::before { inset: .25em -.12em .1em -.08em; transform: rotate(1.6deg) scaleY(-1) }
.lede { max-width: 26em; margin: 1.5rem 0 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.5;
        color: var(--ink-soft); text-wrap: pretty }

.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 1.5rem 3rem; align-items: end;
             margin-top: 1.75rem }
.hero-body .lede, .hero-body .join { margin-top: 0 }
.works { margin: 1.25rem 0 0; font-size: var(--text-md); line-height: 1.5; color: var(--graphite) }
.works a { color: var(--graphite) }
.works a:hover { color: var(--ink) }
.stage { position: relative; margin: 3.25rem 0 0; padding-right: 12rem }
.stage .chips { margin-bottom: 1rem }
.stage .chart { height: 210px; margin: 1.6rem 2.6rem 2.1rem 0 }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1rem }
.tiles.three > div { grid-column: auto }
.since { position: absolute; top: -1.1rem; bottom: 0; right: 0; background: var(--wash);
         border-left: 1.5px dashed var(--highlighter); border-radius: 0 4px 0 0 }
.since em { position: absolute; top: .3rem; left: .5rem; font-style: normal; font-size: var(--text-xs); color: var(--ink-soft);
            white-space: nowrap }
.callout { position: absolute; right: -1rem; bottom: -3rem; width: 23rem;
           box-shadow: 0 2px 4px var(--shadow), 0 40px 80px -24px var(--shadow) }
.callout .chat > p { max-width: 100%; font-size: var(--text-md) }

.preview, .convo { margin: 0; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 8px;
                   overflow: hidden; box-shadow: 0 1px 2px var(--shadow), 0 30px 70px -30px var(--shadow) }
.intro + .preview { margin-top: 2.75rem }
.preview + .bento { margin-top: 1rem }
.convo .window { grid-template-columns: auto minmax(0, 1fr) }
.connected { justify-self: end; font-size: var(--text-xs); color: var(--graphite); white-space: nowrap }
.connected i { display: inline-block; width: 7px; height: 7px; margin-right: .45rem; vertical-align: .05em;
               border-radius: 50%; background: var(--bar) }
.window { display: grid; grid-template-columns: 1fr minmax(0, 20rem) 1fr; align-items: center; gap: 1rem;
          height: 2.4rem; padding: 0 .9rem; background: var(--rule-faint); border-bottom: 1px solid var(--rule) }
.lights { display: flex; gap: 6px }
.lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-strong) }
.address { padding: .15rem .75rem; font-size: var(--text-xs); color: var(--graphite); text-align: center;
           background: var(--paper); border: 1px solid var(--rule); border-radius: 5px;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.board { padding: 1.5rem 1.75rem 1.25rem }
.board-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-bottom: 1.25rem }
.board-head .site { margin-right: auto; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; letter-spacing: -.005em }
.live { font-size: var(--text-md); color: var(--graphite) }
.live b { font-weight: 500; color: var(--ink) }
.live i { display: inline-block; width: 7px; height: 7px; margin-right: .5rem; vertical-align: .08em;
          border-radius: 50%; background: var(--bar) }
.range { padding: .3rem 1.9rem .3rem .7rem; font-size: var(--text-md); border: 1px solid var(--rule-strong); border-radius: 6px;
         background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%),
                           linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
         background-position: calc(100% - 1.05rem) 55%, calc(100% - .75rem) 55%;
         background-size: 5px 5px; background-repeat: no-repeat }

.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 0 0 2rem; background: var(--rule);
         border: 1px solid var(--rule); border-radius: 6px; overflow: hidden }
.tiles > div { padding: .95rem 1.1rem; background: var(--paper) }
.tiles dt { margin-bottom: .3rem; font-size: var(--text-sm); color: var(--graphite) }
.tiles dd { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums }
.tiles dd.change { margin-top: .3rem; font-family: var(--sans); font-size: var(--text-sm); font-weight: 400 }
.tiles dd.change i { font-style: normal; font-size: var(--text-xs); vertical-align: .1em }

.eng { position: relative; margin: 1.1rem 4.6rem 3.2rem 0 }
.eng .area { position: relative; height: 320px; border-bottom: 1px solid var(--rule-strong); container-type: inline-size }
.eng-grid, .marks { position: absolute; inset: 0 }
.gy, .avg-y { position: absolute; left: 0; right: -3.5rem; bottom: var(--y) }
.gy { border-top: 1px solid var(--rule-faint) }
.gx, .avg-x { position: absolute; top: 0; bottom: 0; left: var(--x) }
.gx { border-left: 1px solid var(--rule-faint) }
.avg-x { border-left: 1px dashed var(--graphite) }
.avg-y { border-top: 1px dashed var(--graphite) }
.eng-grid em { position: absolute; font-style: normal; font-size: var(--text-xs); line-height: 1; color: var(--graphite);
               font-variant-numeric: tabular-nums; white-space: nowrap }
.gy em, .avg-y em { right: 0; bottom: 3px }
.gx em, .avg-x em { top: calc(100% + .55rem); left: 0; transform: translateX(-50%) }
.avg-x em, .avg-y em { color: var(--graphite) }
.avg-y em i { font-style: normal }
.eng .corner { line-height: 14px }
.corner.tl { top: 6px; left: 6px } .corner.tr { top: 6px; right: 6px }
.corner.bl { bottom: 6px; left: 6px } .corner.br { bottom: 6px; right: 6px }
.eng .axis { color: var(--graphite) }
.eng .axis.x { top: calc(100% + 1.6rem); left: 50%; transform: translateX(-50%) }
.eng .axis.y { top: 50%; left: calc(100% + 4rem); transform: translate(-50%, -50%) rotate(-90deg) }
.dot { position: absolute; left: var(--x); bottom: var(--y); width: 0; height: 0 }
.dot i { position: absolute; box-sizing: border-box; left: calc(var(--r) * -1); top: calc(var(--r) * -1);
         width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%;
         border: 1px solid var(--bar); background: color-mix(in srgb, var(--bar) 28%, transparent) }
.dot em { display: none; position: absolute; top: -7px; left: calc(var(--r) + 4px); font-style: normal;
          font-size: var(--text-xs); line-height: 14px; color: var(--graphite); white-space: nowrap }
.dot em.left { left: auto; right: calc(var(--r) + 4px) }
.dot.on { z-index: 1 }
.dot.on i { transform: scale(1.3); background-color: var(--bar) }
@container (min-width: 540px) { .dot em { display: block } }
@container (max-width: 539.98px) { .gx.near em { display: none } }

.tip { position: absolute; z-index: 2; padding: .4rem .6rem .45rem; font-size: var(--text-sm); font-weight: 400;
       line-height: 1.3; white-space: nowrap; color: var(--paper); background: var(--ink); border-radius: 5px;
       box-shadow: 0 6px 18px var(--shadow) }
.tip::after { content: ''; position: absolute; border: 5px solid transparent }
.tip > b { font-weight: 600; font-variant-numeric: tabular-nums }
.tip small { display: block; margin-top: .1rem; font-size: var(--text-xs); color: var(--paper-dim) }

.dot .tip { top: calc(var(--r) * 1.3 + 9px); left: 0; transform: translateX(-50%) }
.dot .tip::after { bottom: 100%; left: calc(50% - 5px); border-bottom-color: var(--ink); border-top: 0 }
@container (max-width: 539.98px) {
  .dot .tip { left: auto; right: -1.25rem; transform: none; white-space: normal; width: max-content; max-width: 13rem }
  .dot .tip::after { left: auto; right: calc(1.25rem - 5px) }
  .dot .tip small { display: none }
}

.section { margin-top: 8rem }
.section h2 { margin: 0; max-width: 16em; font-family: var(--serif); font-weight: 500;
              font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.02em;
              text-wrap: balance }
.intro { margin: .9rem 0 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.5; color: var(--graphite); text-wrap: pretty }

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.75rem }
.card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding: 1.5rem; background: var(--paper);
        border: 1px solid var(--rule); border-radius: 8px }
.bento.pairs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.card > h3 { margin: 0 0 .35rem; font-size: var(--text-xl); font-weight: 500 }
.card > p { margin: 0; font-size: var(--text-body); line-height: 1.55; color: var(--ink-soft); text-wrap: pretty }
.art { margin: 0 0 1.5rem; border-radius: 6px }
.card.wide { grid-column: 1 / -1 }
.card.wide > .chat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr;
                     gap: .6rem 1.5rem; align-items: start }
.card.wide > .chat > .view { grid-column: 2; grid-row: 1 / span 4 }
.card.wide > .chat > .ask { justify-self: end }
.card.wide > .chat > .answer { justify-self: start }

.chat { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; background: var(--rule-faint) }
.chat > p, .chat > .answer { max-width: 92%; box-sizing: border-box; margin: 0; padding: .5rem .7rem; font-size: var(--text-sm);
                             line-height: 1.5; border-radius: 8px; text-wrap: pretty }
.chat .ask { align-self: flex-end; color: var(--paper); background: var(--ink); border-bottom-right-radius: 3px }
.chat .answer { align-self: flex-start; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--rule);
                border-bottom-left-radius: 3px }
.answer b { font-weight: 600; color: var(--ink) }

.chat > .view { align-self: stretch; padding: .9rem 1rem .6rem; background: var(--paper); border: 1px solid var(--rule);
                border-radius: 8px }
.view-head { margin: 0 0 .75rem; font-size: var(--text-xs); color: var(--graphite) }
.view-head b { display: block; margin-bottom: .1rem; font-size: var(--text-md); font-weight: 500; color: var(--ink) }
.view .chips { margin: 0 0 .75rem }
.view .chip { padding: .1rem .45rem; font-size: var(--text-xs) }
.view .tiles { grid-template-columns: repeat(6, 1fr); margin: 0 }
.view .tiles > div { grid-column: span 2; padding: .55rem .7rem }
.view .tiles > div:nth-child(n+4) { grid-column: span 3 }
.view .tiles dt { margin-bottom: .15rem; font-size: var(--text-xs) }
.view .tiles dd { font-size: 1.05rem }
.view .tiles dd.change { margin-top: .15rem; font-size: var(--text-xs) }
.chart { position: relative; height: 88px; margin: 1.1rem 2.6rem 2.1rem 0 }
.ticks span { position: absolute; left: 0; right: -2.6rem; border-top: 1px solid var(--rule-faint) }
.ticks span:first-child { border-top-color: var(--rule-strong) }
.ticks em, .bars em { position: absolute; font-style: normal; font-size: var(--text-xs); line-height: 1; color: var(--graphite);
                      font-variant-numeric: tabular-nums; white-space: nowrap }
.ticks em { right: 0; bottom: 3px }
.bars { position: absolute; inset: 0; display: flex }
.bars > span { position: relative; flex: 1; min-width: 0 }
.bars i { position: absolute; bottom: 0; left: 1px; right: 1px; height: var(--h); min-height: 1px; background: var(--bar);
          border-radius: 2px 2px 0 0 }
.bars em { top: calc(100% + .5rem); left: 50%; transform: translateX(-50%) }
.open { margin: 0; font-size: var(--text-xs); color: var(--graphite) }

.calls { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: 0 .1rem; list-style: none;
         font-size: var(--text-xs); line-height: 1.5; color: var(--graphite) }
.calls li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem }
.calls b { padding: .05rem .4rem; font-weight: 500; color: var(--ink); background: var(--wash); border-radius: 4px }
.calls b.other { padding: 0 .35rem; font-weight: 400; color: var(--ink-soft); background: none; border: 1px solid var(--rule-strong) }
.calls.row { flex-direction: row; flex-wrap: wrap; gap: .35rem .9rem }
.calls code { color: var(--ink) }
.calls .rated { align-self: center; font-style: normal }
.ticked li::before { content: ''; flex: none; width: 12px; height: 12px; background: currentColor;
                     -webkit-mask: url("/img/ui/copied.svg") 0 0 / 100% 100% no-repeat;
                     mask: url("/img/ui/copied.svg") 0 0 / 100% 100% no-repeat }
.ticked li.failed::before { width: 10px; height: 10px; margin: 0 1px; color: var(--poor);
                            -webkit-mask-image: url("/img/ui/clear.svg"); mask-image: url("/img/ui/clear.svg") }

.connect { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: start;
           margin-top: 2.75rem }
.connect-steps { display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none }
.connect-steps li { display: flex; align-items: flex-start; gap: 1rem }
.connect-steps .tally { flex: none; margin-top: .1rem }
.connect-steps div { flex: 1; min-width: 0 }
.connect-steps h3 { margin: 0; font-size: 1.1rem; font-weight: 500 }
.connect-steps p { margin: .3rem 0 0; font-size: var(--text-body); line-height: 1.55; color: var(--ink-soft) }
.connect-steps .server { margin-top: .75rem; padding: .7rem .9rem; background: var(--rule-faint); border: 1px solid var(--rule);
                         border-radius: 8px }
.server code { font-size: var(--text-md); color: var(--ink); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all }
.apps h3 { margin: 0 0 .5rem; font-size: var(--text-sm); font-weight: 400; color: var(--graphite) }
.apps ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none }
.apps a { display: inline-flex; align-items: center; height: 2rem; padding: 0 .7rem; font-size: var(--text-md); color: var(--ink);
          --lined: 0; background-color: var(--paper); border: 1px solid var(--rule-strong); border-radius: 5px }
.apps a:hover { background-color: var(--wash); border-color: var(--highlighter) }
.apps .more a { padding: 0 .3rem; color: var(--graphite); --lined: 1; --line-top: calc(50% + .375em + 1.5px);
                background-color: transparent; border-color: transparent }
.apps .more a:hover { color: var(--ink); background-color: transparent; border-color: transparent }

.shot { display: flex; flex-direction: column; padding: 1rem; background: var(--rule-faint) }
.shot > .sheet { flex: 1 }
.sheet { padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
         container-type: inline-size }
.change i { font-style: normal; font-size: var(--text-xs); vertical-align: .1em }
.note { margin: .6rem 0 0; font-size: var(--text-sm); color: var(--graphite) }

.vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--rule);
          border: 1px solid var(--rule); border-radius: 6px; overflow: hidden }
.vitals > div { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .9rem .85rem; background: var(--paper) }
.vitals dt { font-size: var(--text-sm); color: var(--graphite) }
.vitals dd { margin: 0 }
.vitals .value { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums }
.vitals .change { font-size: var(--text-sm) }
.rated { align-self: flex-start; padding: .05rem .35rem; font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
         border-radius: 4px }
.rated.good { color: var(--good); background: var(--good-bg) }
.rated.ni { color: var(--ni); background: var(--ni-bg) }
.rated.poor { color: var(--poor); background: var(--poor-bg) }
.split { display: flex; height: 4px; margin-top: .15rem; border-radius: 2px; overflow: hidden; background: var(--rule-faint) }
.split i { display: block }
.split .good { background: var(--good) }
.split .ni { background: var(--ni-bar) }
.split .poor { background: var(--poor) }
@container (max-width: 459.98px) {
  .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .vitals > div:nth-child(3) { display: none }
  .rated { white-space: normal }
}

.pane-head { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .5rem; font-size: var(--text-md); font-weight: 500;
             color: var(--graphite) }
.pane-head .on { color: var(--ink); text-decoration-line: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px }
.rows { margin: 0; padding: 0; list-style: none }
.rows li { display: flex; align-items: baseline; gap: 1rem; margin: 0 -.4rem; padding: .32rem .4rem;
           font-size: var(--text-body); border-bottom: 1px solid var(--rule-faint) }
.rows li:last-child { border-bottom: 0 }
.rows li.on { background: var(--wash); border-radius: 3px }
.rows span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rows em { font-style: normal; font-size: var(--text-sm); color: var(--graphite); font-variant-numeric: tabular-nums }
.rows b { min-width: 2.5em; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft) }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .5rem; font-size: var(--text-md);
        background: var(--wash); border: 1px solid var(--highlighter); border-radius: 5px }
.chip em { font-style: normal; color: var(--graphite) }
.chip i { font-style: normal; font-size: var(--text-lg); line-height: 1; color: var(--graphite) }

.privacy, .setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center }
.privacy .copy p, .setup .copy > p { max-width: 28em; margin: 1.25rem 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft) }
.privacy .copy p.small { margin-top: .9rem; font-size: var(--text-md); color: var(--graphite) }
.flow { display: flex; flex-direction: column; align-items: center; padding: 1.75rem 1.5rem 1.5rem; text-align: center;
        border: 1px solid var(--rule); border-radius: 8px;
        background: linear-gradient(var(--rule-faint) 1px, transparent 1px) 0 -1px / 24px 24px,
                    linear-gradient(90deg, var(--rule-faint) 1px, transparent 1px) -1px 0 / 24px 24px, var(--paper) }
.inputs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem }
.inputs span, .counted { padding: .35rem .7rem; font-size: var(--text-sm); background: var(--paper);
                         border: 1px solid var(--rule-strong); border-radius: 5px }
.inputs .salt { background: var(--wash); border-color: var(--highlighter) }
.down { position: relative; display: block; width: 1px; height: 1.5rem; margin: .45rem 0 .75rem; background: var(--graphite) }
.down::after { content: ''; position: absolute; top: 100%; left: -4px; border: 4.5px solid transparent;
               border-top: 5px solid var(--graphite); border-bottom: 0 }
.hash { display: flex; flex-direction: column; gap: .2rem; padding: .55rem 1rem; background: var(--paper);
        border: 1px solid var(--rule-strong); border-radius: 6px }
.hash em, .midnight em { font-style: normal; font-size: var(--text-xs); color: var(--graphite) }
.hash code, .code pre, .calls code, .server code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.hash code { font-size: var(--text-md); letter-spacing: .04em }
.counted { font-weight: 500; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) }
.midnight { width: 100%; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px dashed var(--rule-strong) }
.midnight p { margin: .35rem auto 0; max-width: 22em; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft) }
.midnight s { color: var(--graphite); text-decoration-thickness: 1.5px }

.tally { display: flex; justify-content: flex-start; gap: 5px; width: 2.25rem; height: 1.35rem }
.tally i { width: 3px; border-radius: 2px; background: var(--ink); transform: rotate(4deg) }
.tally i:nth-child(2) { transform: rotate(-2deg) translateY(1px) }
.tally i:nth-child(3) { transform: rotate(5deg) translateY(-1px) }
.code { overflow: hidden; background: var(--rule-faint); border: 1px solid var(--rule); border-radius: 8px }
.code-head { display: flex; justify-content: flex-end; gap: 1rem; margin: 0; padding: .6rem 1rem;
             font-size: var(--text-xs); color: var(--graphite); background: var(--paper); border-bottom: 1px solid var(--rule) }
.code-head em { font-style: normal }
.code pre { margin: 0; padding: 1.2rem 1rem 1.3rem; font-size: var(--text-sm); line-height: 1.75; color: var(--ink);
            white-space: pre-wrap; overflow-wrap: anywhere }
.transcript { display: grid; gap: .6rem; padding: 1rem; border-top: 1px dashed var(--rule-strong) }
.transcript > p { margin: .2rem 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft) }
.aside { margin: .9rem 0 0; font-size: var(--text-md); color: var(--graphite) }
.aside a { color: var(--graphite) }
.aside a:hover { color: var(--ink) }

.join { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 29rem; margin: 2.25rem 0 0 }
.join input { flex: 1 1 10rem; height: 2.9rem; padding: 0 .9rem; font-size: 16px }
.join button { height: 2.9rem; padding: 0 1.3rem; font-size: var(--text-lg) }
.join-error { flex-basis: 100%; margin: .15rem 0 0; font-size: var(--text-md); color: var(--poor) }
.details { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0 }
.details label { margin: 1rem 0 .4rem; font-size: var(--text-md); font-weight: 500; color: var(--ink-soft) }
.details label:first-of-type { margin-top: 0 }
.details input { flex: none }
.details .join-error { margin-top: .4rem }
.details button { align-self: flex-start; margin-top: 1.4rem }

.beta { display: flex; flex-direction: column; align-items: center; padding: 4rem 1.5rem 4.25rem; text-align: center;
        border: 1px solid var(--rule); border-radius: 8px;
        background: linear-gradient(var(--rule-faint) 1px, transparent 1px) 0 -1px / 24px 24px,
                    linear-gradient(90deg, var(--rule-faint) 1px, transparent 1px) -1px 0 / 24px 24px, var(--paper) }
.beta h2 { max-width: none }
.beta .intro { max-width: 30em; text-wrap: pretty }
.beta .join { width: 100%; justify-content: center; margin-top: 1.75rem }

.alone { padding-bottom: 6rem }
.alone .lede b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere }
.onward { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 2rem 0 0; font-size: var(--text-lg) }
.onward a { color: var(--ink); --line-colour: var(--pencil) }
.onward a:hover { --line-colour: currentColor }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth }
  .hero mark::before { animation: sweep .7s .3s cubic-bezier(.3, .7, .2, 1) both }
  .dot i { animation: set-down .5s calc(.5s + var(--i) * 40ms) cubic-bezier(.3, 1.4, .5, 1) both }
  .dot em, .tip { animation: appear .4s 1.3s both }
  .since, .callout { animation: appear .4s 1s both }
  .live i { animation: breathe 2.4s ease-in-out infinite }
}
@keyframes sweep { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0) } }
@keyframes set-down { from { opacity: 0; transform: scale(0) } }
@keyframes appear { from { opacity: 0 } }
@keyframes breathe { 50% { opacity: .35 } }

@media (max-width: 760px) {
  .hero { padding-top: 3.5rem }
  .section { margin-top: 5.5rem }
  .privacy, .setup, .bento, .bento.pairs, .hero-body, .connect { grid-template-columns: minmax(0, 1fr) }
  .stage { padding-right: 0 }
  .callout { position: relative; right: auto; bottom: auto; width: auto; margin: -1.25rem 0 0 1.5rem }
  .card.wide > .chat { display: flex }
  .beta { padding: 3rem 1.25rem 3.25rem }
  .board { padding: 1.1rem 1rem 1rem }
  .tiles { grid-template-columns: repeat(6, 1fr) }
  .tiles > div { grid-column: span 2; padding: .8rem .85rem }
  .tiles > div:nth-child(n+4) { grid-column: span 3 }
  .eng { margin-right: 3.4rem }
  .gy, .avg-y { right: -2.2rem }
  .avg-y em i { display: none }
  .eng .axis.y { left: calc(100% + 2.95rem) }
  .eng .area { height: 260px }
}
@media (max-width: 559.98px) {
  .wrap { padding-left: 1rem; padding-right: 1rem }
  .window { grid-template-columns: auto minmax(0, 1fr) }
  .board-head .live { display: none }
  .board .tiles > div:nth-child(n+4) { display: none }
  .tiles dd { font-size: 1.15rem }
  .tiles dt { font-size: var(--text-xs) }
}