:root {
      --bg: #faf6ef;
      --card: #fff;
      --ink: #1d1b19;
      --gray: #6b655c;
      --gray2: #8d867a;
      --line: #e4dccd;
      --fill: #f5f0e7;
      --fill2: #ebe4d7;
      --blue: #3d4fd6;
      --link: #3d4fd6;
      --yellow: #ffcc00;
      --ai: #ef5f3c;
      --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --spring: cubic-bezier(.2, .9, .1, 1);
      --spd: 1;
      --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
      --gutter: clamp(16px, 4vw, 72px);
      --paper: #faf6ef;
      --ink2: #1d1b19;
      --sun: #ffd966;
      --tomato: #ef5f3c;
      --cobalt: #3d4fd6;
      --mint: #23a58b;
      --edge: 1px solid var(--line);
      --drop: 0 1px 2px rgba(29, 27, 25, .04), 0 12px 28px -14px rgba(29, 27, 25, .18);
      --display: "Bricolage Grotesque", var(--font);
      --line2: #cfc6b6
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0
    }

    body {
      background: var(--bg);
      color: var(--ink);
      font: 400 17px/1.47 var(--font);
      letter-spacing: -.011em;
      -webkit-font-smoothing: antialiased
    }

    button,
    input {
      font: inherit;
      color: inherit;
      letter-spacing: inherit
    }

    button {
      cursor: pointer
    }

    :focus-visible {
      outline: 3px solid rgba(61, 79, 214, .45);
      outline-offset: 2px;
      border-radius: 8px
    }

    .screen {
      display: none
    }

    .screen.on {
      display: block
    }

    .grad {
      background: var(--ai);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .num {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum"
    }

    .icon {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    /* nav */
    .nav {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(250, 246, 239, .9);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--line)
    }

    .nav-in {
      height: 52px;
      padding: 0 var(--gutter);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px
    }

    .brand {
      color: var(--ink);
      text-decoration: none;
      font-weight: 600;
      font-size: 17px;
      display: flex;
      gap: 8px;
      align-items: center
    }

    .brand .logo {
      width: 24px;
      height: 24px;
      display: block;
      object-fit: contain;
      mix-blend-mode: multiply
    }

    .nav .brand {
      opacity: 1
    }

    #top,
    .section {
      scroll-margin-top: 53px
    }

    .nav a,
    .linkbtn {
      color: var(--ink);
      text-decoration: none;
      opacity: .8;
      background: none;
      border: 0;
      padding: 0
    }

    .nav a:hover,
    .linkbtn:hover {
      opacity: 1
    }

    .nav-links {
      display: flex;
      gap: 8px
    }

    /* the buttons in the top bars: Settings, Math refresher, New sentence */
    .navbtn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 36px;
      padding: 0 14px 0 12px;
      border: 1px solid var(--line2);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      transition: background .15s, border-color .15s, transform .15s
    }

    .navbtn .icon {
      width: 16px;
      height: 16px
    }

    .navbtn:hover {
      border-color: var(--ink);
      background: var(--fill)
    }

    .navbtn:active {
      transform: scale(.97)
    }

    /* phones: the two nav buttons shrink to their icons */
    @media(max-width:520px) {
      .nav .navbtn {
        justify-content: center;
        width: 36px;
        padding: 0
      }

      .nav .navbtn span {
        display: none
      }
    }

    /* while stepping, the nav and the step bar read as one header */
    .in-sim .nav {
      border-bottom-color: transparent
    }

    /* ---------- home: paper and ink, word tiles, hard shadows ---------- */
    #setup {
      background: var(--paper);
      color: var(--ink2)
    }

    .top {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(32px, 4vw, 72px);
      align-items: center;
      padding: clamp(28px, 5vw, 64px) var(--gutter) clamp(28px, 4vw, 48px)
    }

    @media(min-width:1100px) {
      .top {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        min-height: min(820px, calc(100vh - 215px))
      }
    }

    .sticker {
      display: inline-block;
      margin-bottom: 22px;
      padding: 6px 12px;
      border: 1px solid rgba(29, 27, 25, .16);
      border-radius: 8px;
      background: var(--sun);
      box-shadow: none;
      font: 700 12px/1.2 var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase;
      transform: rotate(-2.5deg)
    }

    .hero h1 {
      margin: 0;
      font-family: var(--display);
      font-size: clamp(42px, 6vw, 108px);
      font-weight: 800;
      line-height: .98;
      letter-spacing: -.035em
    }

    /* the two words the whole site is about, set as a word tile */
    .hero h1 .blk {
      display: inline-block;
      margin: .06em 0 0;
      padding: .02em .16em .08em;
      border: 2.5px solid var(--ink);
      border-radius: .14em;
      background: var(--tomato);
      color: #fff;
      box-shadow: 5px 5px 0 var(--ink);
      white-space: nowrap;
      transform: rotate(-2deg)
    }

    .hero .sub {
      max-width: 32em;
      margin: 28px 0 0;
      font-size: clamp(17px, 1.5vw, 21px);
      line-height: 1.5;
      color: #3a3a3a
    }

    .ask {
      display: flex;
      gap: 12px;
      max-width: 640px;
      margin-top: 30px
    }

    #inp {
      flex: 1;
      min-width: 0;
      height: 60px;
      padding: 0 18px;
      border: 1.5px solid var(--line2);
      border-radius: 12px;
      outline: 0;
      background: #fff;
      box-shadow: 0 1px 2px rgba(29, 27, 25, .05);
      font-size: 19px;
      font-weight: 600
    }

    #inp:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(61, 79, 214, .18)
    }

    .go {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: none;
      height: 60px;
      padding: 0 24px;
      border: 0;
      border-radius: 12px;
      background: var(--cobalt);
      color: #fff;
      box-shadow: 0 8px 18px -8px rgba(61, 79, 214, .7);
      font: 800 19px/1 var(--display);
      transition: transform .12s, box-shadow .12s
    }

    .go:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 24px -10px rgba(61, 79, 214, .75)
    }

    .go:active {
      transform: translateY(1px);
      box-shadow: 0 2px 6px -2px rgba(61, 79, 214, .6)
    }

    .go .icon {
      width: 20px;
      height: 20px;
      stroke-width: 2.6
    }

    .tryline {
      margin: 20px 0 0;
      font-size: 15px;
      color: #4a4a4a
    }

    .tryword {
      padding: 0;
      border: 0;
      background: none;
      color: var(--ink2);
      font-weight: 600;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-decoration-color: var(--tomato);
      text-underline-offset: 3px
    }

    .tryword:hover {
      background: var(--sun)
    }

    .setline {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 14px;
      margin-top: 26px;
      padding: 0;
      border: 0;
      background: none;
      font: 500 13px/1.5 var(--mono);
      color: #4a4a4a;
      text-align: left
    }

    .setline b {
      padding: 4px 10px;
      border: 1px solid var(--line2);
      border-radius: 8px;
      background: #fff;
      color: var(--ink2);
      font-weight: 700
    }

    .setline:hover b {
      background: var(--fill2)
    }

    .muted {
      color: #77736b
    }

    /* the live stage: your words as tiles, joined by what they listen to */
    .board {
      padding: clamp(16px, 2.2vw, 28px);
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: var(--drop)
    }

    .board-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px dashed var(--line2);
      font: 700 12px/1.4 var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase
    }

    .board-head .dot {
      display: inline-block;
      width: 9px;
      height: 9px;
      margin-right: 8px;
      border-radius: 50%;
      background: var(--tomato)
    }

    .tiles {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 40px 10px;
      min-height: 200px;
      padding: 100px 4px 40px
    }

    .harcs {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      fill: none;
      stroke: var(--cobalt);
      stroke-linecap: round
    }

    .wt {
      position: relative;
      padding: .26em .46em .32em;
      border: 2.5px solid var(--ink);
      border-radius: 10px;
      background: color-mix(in srgb, var(--sun) calc(var(--w, 0) * 100%), #fff);
      color: var(--ink2);
      box-shadow: 4px 4px 0 var(--ink2);
      font: 800 clamp(22px, 2.5vw, 40px)/1 var(--display);
      transform: rotate(var(--r, 0deg));
      transition: background-color .3s, transform .15s
    }

    button.wt:hover {
      transform: rotate(0deg) translateY(-3px)
    }

    .wt.sel {
      background: var(--ink2);
      color: #fff
    }

    .wt.fut {
      opacity: .4
    }

    .wt.guess {
      background: var(--tomato);
      color: #fff;
      transform: rotate(2deg)
    }

    .wt.guess::after {
      content: '↑ its guess';
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      color: var(--ink2);
      font: 700 12px/1 var(--mono);
      white-space: nowrap;
      transform: translateX(-50%)
    }

    .listen {
      min-height: 3.2em;
      margin: 0;
      padding-top: 14px;
      border-top: 1px dashed var(--line2);
      font: 500 13px/1.6 var(--mono)
    }

    .listen span {
      color: #77736b
    }

    .odds {
      margin-top: 14px
    }

    .odds-lbl {
      margin-bottom: 10px;
      font: 700 12px/1.4 var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase
    }

    /* candidate words with their odds (also used in the settings preview) */
    .cands {
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .cand {
      display: grid;
      grid-template-columns: minmax(56px, 100px) minmax(0, 1fr) 42px;
      gap: 10px;
      align-items: center;
      font-size: 14px;
      font-weight: 600
    }

    .cand span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .cand em {
      font: 500 12px/1 var(--mono);
      color: var(--ink);
      text-align: right
    }

    .cbar {
      height: 8px;
      border-radius: 8px;
      background: var(--fill2);
      overflow: hidden;
      border: 0
    }

    .cbar i {
      display: block;
      width: 0;
      height: 100%;
      border-radius: 8px;
      background: #cfc6b6;
      transition: width .6s var(--spring)
    }

    .cand:first-child .cbar i {
      background: var(--tomato)
    }

    .board .cand {
      grid-template-columns: minmax(64px, 130px) minmax(0, 1fr) 46px;
      font: 800 18px/1.1 var(--display)
    }

    .board .cand em {
      font: 700 13px/1 var(--mono);
      color: var(--ink2)
    }

    .board .cbar {
      height: 10px;
      border: 0;
      border-radius: 10px;
      background: var(--fill2)
    }

    .board .cbar i {
      border-radius: 10px;
      background: #d6cdbd
    }

    .board .cand:first-child .cbar i {
      background: var(--tomato)
    }

    /* the twelve steps, as stops along a line */
    .pipe {
      padding: 0 var(--gutter) clamp(40px, 5vw, 72px)
    }

    .pipe h2 {
      margin: 0 0 22px;
      font: 800 clamp(18px, 1.6vw, 24px)/1.2 var(--display)
    }

    .pipe ol {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px 0;
      margin: 0;
      padding: 0;
      list-style: none
    }

    .pipe li {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 0 4px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.25;
      text-align: center
    }

    /* the line back to the stop before */
    .pipe li::before {
      content: '';
      position: absolute;
      top: 23px;
      right: 50%;
      left: -50%;
      height: 2px;
      background: var(--line2)
    }

    .pipe li:first-child::before {
      display: none
    }

    @media(max-width:1100px) {
      .pipe ol {
        grid-template-columns: repeat(6, minmax(0, 1fr))
      }

      .pipe li:nth-child(6n+1)::before {
        display: none
      }
    }

    @media(max-width:560px) {
      .pipe ol {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }

      .pipe li:nth-child(6n+1)::before {
        display: block
      }

      .pipe li:nth-child(4n+1)::before {
        display: none
      }
    }

    .pipe .sq {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--c);
      color: #fff;
      box-shadow: 0 0 0 5px var(--bg)
    }

    .pipe .sq .icon {
      width: 22px;
      height: 22px
    }

    .pipe li small {
      font: 700 11px/1 var(--mono);
      color: var(--gray2)
    }

    /* sections */
    .section {
      padding: clamp(40px, 6vw, 88px) var(--gutter);
      border-top: 1px solid var(--line)
    }

    .section h2 {
      margin: 0 0 14px;
      font: 800 clamp(32px, 4.2vw, 68px)/1 var(--display);
      letter-spacing: -.03em
    }

    .section .lede {
      max-width: 38em;
      margin: 0 0 34px;
      font-size: clamp(16px, 1.3vw, 19px);
      line-height: 1.5;
      color: #3a3a3a
    }

    #try {
      background: #f3ecdf
    }

    .trygrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
      gap: 22px
    }

    .trycard {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      box-shadow: var(--drop)
    }

    .trycard h3 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 4px;
      font: 800 21px/1.2 var(--display)
    }

    .trycard h3::before {
      content: '';
      width: 12px;
      height: 12px;
      border: 0;
      border-radius: 50%;
      background: var(--c)
    }

    .trylink {
      display: block;
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--bg);
      color: var(--ink2);
      font-size: 16px;
      font-weight: 600;
      text-align: left;
      transition: transform .12s, box-shadow .12s
    }

    .trylink:hover {
      background: #fff;
      box-shadow: none;
      transform: none;
      border-color: var(--ink)
    }

    .trylink i {
      font-style: normal;
      font-weight: 500;
      color: #77736b
    }

    .notes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
      gap: 32px
    }

    .notes>div {
      padding-top: 16px;
      border-top: 3px solid var(--c)
    }

    .notes .n {
      font: 700 13px/1 var(--mono)
    }

    .notes h3 {
      margin: 8px 0 10px;
      font: 800 clamp(22px, 2vw, 30px)/1.1 var(--display)
    }

    .notes p {
      margin: 0;
      font-size: 16px;
      line-height: 1.55;
      color: #3a3a3a
    }

    /* the footer closes the page in ink */
    #setup .foot {
      margin-top: 0;
      border-top: 0;
      background: var(--ink2);
      color: #b9b4a8
    }

    #setup .foot .brand,
    #setup .foot-col a,
    #setup .foot-col .linkbtn {
      color: #fff
    }

    #setup .foot .logo {
      padding: 2px;
      border-radius: 6px;
      background: #fff;
      mix-blend-mode: normal
    }

    #setup .foot-col a:hover,
    #setup .foot-col .linkbtn:hover {
      color: var(--sun)
    }

    #setup .foot-col h6,
    #setup .foot-base {
      color: #8d887d
    }

    #setup .foot-base {
      border-top-color: rgba(255, 255, 255, .16)
    }

    #setup .foot kbd {
      background: #2a2a2a;
      color: #fff;
      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .2), 0 0 0 .5px rgba(255, 255, 255, .25)
    }

    .tile {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--c);
      box-shadow: none;
      margin-bottom: 22px;
      border: 0
    }

    .tile .icon {
      width: 26px;
      height: 26px
    }

    .tile.ai {
      background: var(--tomato)
    }

    /* iOS settings */
    .groups {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
      gap: 26px
    }

    /* settings pop-up, with a preview of what the settings do that stays in view while they scroll */
    .modal.wide {
      width: min(960px, 100%);
      background: var(--bg)
    }

    /* phones: give the rows every pixel so no control is cut off */
    @media(max-width:560px) {
      #setBg {
        padding: 8px
      }

      .modal.wide {
        padding: 20px 12px
      }

      .modal.wide .srow {
        padding: 10px 14px
      }

      .modal.wide .seg button {
        padding: 6px 10px
      }

      .modal.wide .slider {
        min-width: 0
      }

      .modal.wide input[type=range] {
        width: 104px
      }
    }

    .set-lede {
      margin: 8px 0 18px;
      font-size: 15px;
      color: var(--gray)
    }

    .set-foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 22px
    }

    .set-note {
      flex: 1;
      font-size: 13px;
      color: var(--gray);
      text-align: center
    }

    .preview {
      position: sticky;
      top: 0;
      z-index: 5;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 18px clamp(20px, 4vw, 56px);
      align-items: center;
      background: #fff;
      border-radius: 14px;
      padding: 18px clamp(16px, 2.4vw, 26px);
      margin-bottom: 22px;
      box-shadow: var(--drop);
      border: 1px solid var(--line)
    }

    @media(max-width:760px) {
      .preview {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px 16px;
        gap: 12px
      }
    }

    .pv-lbl {
      display: block;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      margin-bottom: 6px;
      font: 700 12px/1.4 var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase
    }

    .pv-out {
      font-size: clamp(19px, 2vw, 26px);
      font-weight: 800;
      letter-spacing: -.02em;
      line-height: 1.25;
      font-family: var(--display)
    }

    .pv-out b {
      color: var(--tomato)
    }

    .pv-note {
      font-size: 13px;
      color: var(--gray2);
      margin-top: 6px
    }

    .preview .cands {
      gap: 5px
    }

    .group h5 {
      color: var(--ink);
      margin: 0 0 10px 4px;
      letter-spacing: .04em;
      font: 700 12px/1.4 var(--mono);
      text-transform: uppercase
    }

    .glist {
      background: #fff;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: none
    }

    .srow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 58px;
      padding: 10px 18px;
      position: relative
    }

    .srow+.srow::before {
      content: '';
      position: absolute;
      top: 0;
      left: 18px;
      right: 0;
      height: 1px;
      background: rgba(21, 21, 21, .15)
    }

    .srow .lbl {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px
    }

    .seg {
      display: inline-flex;
      background: #fff;
      border-radius: 9px;
      padding: 2px;
      position: relative;
      border: 1px solid var(--line2)
    }

    .seg button {
      border: 0;
      background: none;
      padding: 6px 14px;
      border-radius: 7px;
      font-size: 14px;
      font-weight: 500;
      transition: background .25s, box-shadow .25s;
      white-space: nowrap
    }

    .seg button.on {
      background: var(--ink);
      box-shadow: none;
      color: #fff
    }

    .stepper {
      display: inline-flex;
      align-items: center;
      background: #fff;
      border-radius: 9px;
      overflow: hidden;
      border: 1px solid var(--line2)
    }

    .stepper button {
      border: 0;
      background: none;
      width: 36px;
      height: 32px;
      font-size: 19px;
      font-weight: 500
    }

    .stepper button:hover {
      background: var(--fill2)
    }

    .stepper input {
      width: 46px;
      padding: 0;
      border: 0;
      outline: 0;
      background: none;
      text-align: center;
      font-weight: 600;
      font-variant-numeric: tabular-nums
    }

    .stepper input:focus {
      background: #fff;
      border-radius: 6px
    }

    .switch {
      width: 51px;
      height: 31px;
      border-radius: 31px;
      background: var(--fill2);
      border: 1px solid var(--line2);
      position: relative;
      transition: background .25s;
      flex: none
    }

    .switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(29, 27, 25, .28);
      transition: transform .3s var(--spring)
    }

    .switch.on {
      background: var(--mint);
      border-color: var(--mint)
    }

    .switch.on::after {
      transform: translateX(20px)
    }

    .slider {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 160px
    }

    .slider span {
      min-width: 30px;
      text-align: right;
      font-weight: 600;
      font-variant-numeric: tabular-nums
    }

    input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      width: 130px;
      height: 6px;
      border-radius: 4px;
      background: linear-gradient(to right, var(--blue) var(--p, 50%), #d9d2c2 var(--p, 50%));
      outline: none
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 4px rgba(29, 27, 25, .22);
      border: 1px solid var(--line2)
    }

    input[type=range]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border: 1px solid var(--line2);
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 4px rgba(29, 27, 25, .22)
    }

    /* footer */
    .foot {
      margin-top: 40px;
      border-top: 1px solid rgba(0, 0, 0, .08);
      background: #fff;
      padding: clamp(32px, 5vw, 56px) var(--gutter) 28px;
      font-size: 14px;
      color: var(--gray)
    }

    .foot-in {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
      gap: 32px clamp(20px, 4vw, 64px)
    }

    @media(max-width:900px) {
      .foot-in {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .foot-about {
        grid-column: 1 / -1
      }
    }

    @media(max-width:560px) {
      .foot-in {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .foot-col:last-child {
        grid-column: 1 / -1
      }
    }

    .foot-about p {
      margin: 12px 0 0;
      max-width: 380px;
      line-height: 1.5
    }

    .foot-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px
    }

    .foot-col h6 {
      margin: 0 0 4px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--gray2)
    }

    .foot-col a,
    .foot-col .linkbtn {
      color: var(--ink);
      text-decoration: none;
      opacity: 1;
      font-size: 14px;
      text-align: left
    }

    .foot-col a:hover,
    .foot-col .linkbtn:hover {
      color: var(--link)
    }

    kbd {
      display: inline-block;
      min-width: 22px;
      padding: 1px 6px;
      border-radius: 6px;
      background: var(--fill);
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .12);
      font: 600 12px/1.6 var(--font);
      color: var(--ink);
      text-align: center
    }

    .foot-base {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 6px 24px;
      margin-top: clamp(28px, 4vw, 44px);
      padding-top: 18px;
      border-top: 1px solid rgba(0, 0, 0, .08);
      font-size: 13px;
      color: var(--gray2)
    }

    /* info and terms */
    .info {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      border: 0;
      background: #fff;
      color: var(--ink);
      font: italic 700 12px/19px Georgia, serif;
      padding: 0;
      flex: none;
      transition: background .2s, color .2s;
      vertical-align: middle;
      box-shadow: 0 0 0 1px var(--line2)
    }

    .info:hover {
      background: var(--ink);
      color: #fff
    }

    .term {
      border: 0;
      background: none;
      padding: 0;
      font: inherit;
      color: inherit;
      border-bottom: 1.5px dotted currentColor;
      cursor: help;
      transition: color .2s
    }

    .term:hover {
      color: var(--blue)
    }

    .pop {
      position: fixed;
      z-index: 90;
      max-width: 320px;
      background: #fff;
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 1px 2px rgba(29, 27, 25, .05), 0 16px 40px -12px rgba(29, 27, 25, .28);
      font-size: 15px;
      line-height: 1.42;
      opacity: 0;
      transform: scale(.92) translateY(6px);
      transform-origin: var(--ox, 50%) top;
      pointer-events: none;
      transition: opacity .2s, transform .3s var(--spring);
      border: 1px solid var(--line)
    }

    .pop.on {
      opacity: 1;
      transform: none;
      pointer-events: auto
    }

    .pop.above {
      transform-origin: var(--ox, 50%) bottom
    }

    .pop b {
      display: block;
      font-size: 16px;
      margin-bottom: 4px;
      font-family: var(--display)
    }

    .pop p {
      margin: 0;
      color: #3a3a3c
    }

    .pop .ex {
      margin-top: 8px;
      padding: 8px 10px;
      background: var(--fill);
      border-radius: 10px;
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      border: 1px dashed var(--line2)
    }

    .pop .poplink {
      margin-top: 10px;
      border: 0;
      background: none;
      padding: 0;
      color: var(--ink);
      font-weight: 700;
      font-size: 15px;
      text-decoration: underline;
      text-decoration-color: var(--tomato);
      text-decoration-thickness: 2px;
      text-underline-offset: 3px
    }

    .pop .poplink:hover {
      text-decoration: underline
    }

    /* ---------- simulation ---------- */
    .simbar {
      position: sticky;
      top: 53px;
      z-index: 30;
      background: rgba(250, 246, 239, .95);
      border-bottom: 1px solid var(--line)
    }

    /* small screens: while stepping, the site nav scrolls away so the step bar keeps the room */
    @media(max-width:600px),
    (max-height:700px) {
      .in-sim .nav {
        position: static
      }

      .in-sim .simbar {
        top: 0
      }
    }

    .simbar-in {
      padding: 4px var(--gutter) 12px
    }

    .sb1 {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      font-size: 14px
    }

    .sb1 .navbtn {
      justify-self: start
    }

    .counter {
      padding: 7px 12px;
      border-radius: 999px;
      background: var(--fill2);
      color: var(--ink);
      font: 600 12px/1 var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap
    }

    /* the sentence so far, as word tiles; the dashed tile is the word being predicted */
    .sentence {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px 8px;
      margin: 12px 0 16px;
      font: 800 clamp(16px, 1.7vw, 22px)/1 var(--display)
    }

    .sentence>span {
      padding: .3em .5em .34em;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: #fff;
      box-shadow: 3px 3px 0 var(--ink)
    }

    .sentence>span:nth-child(3n+1) {
      transform: rotate(-1.2deg)
    }

    .sentence>span:nth-child(3n+2) {
      transform: rotate(.9deg)
    }

    .sentence .gen {
      background: var(--tomato);
      color: #fff
    }

    .sentence .older {
      border-style: dashed;
      background: none;
      box-shadow: none;
      color: var(--gray2);
      cursor: help
    }

    .sentence .slot {
      position: relative;
      min-width: 3em;
      border-style: dashed;
      box-shadow: none;
      color: var(--gray2);
      text-align: center;
      overflow: hidden
    }

    .slot::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .9) 50%, transparent 80%);
      background-size: 200% 100%;
      animation: shimmer 1.6s linear infinite;
      mix-blend-mode: overlay
    }

    @keyframes shimmer {
      from {
        background-position: 150% 0
      }

      to {
        background-position: -50% 0
      }
    }

    .sentence .slot.filled {
      border-style: solid;
      background: var(--tomato);
      color: #fff;
      box-shadow: 3px 3px 0 var(--ink);
      animation: popin .7s var(--spring)
    }

    .slot.filled::after {
      display: none
    }

    @keyframes popin {
      0% {
        transform: scale(.4);
        opacity: 0;
        filter: blur(8px)
      }

      100% {
        transform: none;
        opacity: 1;
        filter: none
      }
    }

    /* the twelve steps as stops on a line: filled once passed, larger where you are */
    .prog {
      display: flex;
      align-items: center;
      max-width: 860px;
      margin: 0 auto
    }

    .pseg {
      position: relative;
      flex: 1;
      display: grid;
      place-items: center;
      height: 44px;
      padding: 0;
      border: 0;
      background: none
    }

    .pseg::before {
      content: '';
      position: absolute;
      top: 50%;
      right: 50%;
      left: -50%;
      height: 2px;
      margin-top: -1px;
      background: var(--line2);
      transition: background .4s
    }

    .pseg:first-child::before {
      display: none
    }

    .pseg.done::before,
    .pseg.cur::before {
      background: var(--c)
    }

    .pseg i {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border: 1.5px solid var(--line2);
      border-radius: 50%;
      background: var(--bg);
      color: var(--gray2);
      transition: width .3s var(--spring), height .3s var(--spring), background .3s, border-color .3s, box-shadow .3s
    }

    .pseg .icon {
      width: 13px;
      height: 13px;
      stroke-width: 2.4
    }

    .pseg.done i {
      border-color: var(--c);
      background: var(--c);
      color: #fff
    }

    .pseg.cur i {
      width: 38px;
      height: 38px;
      border-color: var(--c);
      background: var(--c);
      color: #fff;
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent)
    }

    .pseg.cur .icon {
      width: 18px;
      height: 18px
    }

    .pseg:hover i {
      border-color: var(--c)
    }

    @media(max-width:600px) {
      .pseg {
        height: 36px
      }

      .pseg i {
        width: 20px;
        height: 20px
      }

      .pseg .icon {
        width: 10px;
        height: 10px
      }

      .pseg.cur i {
        width: 30px;
        height: 30px
      }

      .pseg.cur .icon {
        width: 15px;
        height: 15px
      }
    }

    .plabel {
      text-align: center;
      color: var(--gray);
      margin-top: 4px;
      font: 600 12px/1.4 var(--mono)
    }

    .stage {
      padding: 26px var(--gutter) 160px
    }

    .slide {
      display: flex;
      flex-direction: column;
      align-items: center
    }

    .slide.fwd {
      animation: sIn .7s var(--spring)
    }

    .slide.bwd {
      animation: sInB .7s var(--spring)
    }

    @keyframes sIn {
      from {
        opacity: 0;
        transform: translateX(70px) scale(.97);
        filter: blur(8px)
      }
    }

    @keyframes sInB {
      from {
        opacity: 0;
        transform: translateX(-70px) scale(.97);
        filter: blur(8px)
      }
    }

    .s-head {
      text-align: center;
      max-width: 760px
    }

    .s-head>* {
      animation: rise .8s var(--spring) both
    }

    .s-head>:nth-child(2) {
      animation-delay: .05s
    }

    .s-head>:nth-child(3) {
      animation-delay: .1s
    }

    .s-head>:nth-child(4) {
      animation-delay: .16s
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(22px)
      }
    }

    .s-head .tile {
      margin: 0 auto 10px;
      width: 46px;
      height: 46px;
      border-radius: 50%
    }

    .s-head .tile .icon {
      width: 22px;
      height: 22px
    }

    .s-step {
      color: var(--ink);
      font: 700 12px/1.4 var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase
    }

    .s-head h2 {
      font-size: clamp(30px, 4.2vw, 48px);
      line-height: 1.08;
      letter-spacing: -.03em;
      font-weight: 800;
      margin: 2px 0 10px;
      font-family: var(--display)
    }

    .s-sub {
      font-size: clamp(17px, 1.8vw, 19px);
      color: #3a3a3a;
      line-height: 1.42;
      margin: 0 auto;
      max-width: 640px;
      font-weight: 500
    }

    .s-sub .term {
      color: var(--ink)
    }

    .cardwrap {
      margin-top: 24px;
      width: 100%;
      border-radius: 18px;
      animation: rise .9s .18s var(--spring) both
    }

    /* the moment a word is chosen, the card's shadow turns red */
    .cardwrap.glowing .s-card {
      border-color: var(--tomato);
      box-shadow: 0 0 0 4px rgba(239, 95, 60, .2), var(--drop)
    }

    .s-card {
      width: 100%;
      background: #fff;
      border-radius: 18px;
      padding: clamp(18px, 3vw, 34px);
      box-shadow: var(--drop);
      display: flex;
      flex-direction: column;
      gap: 26px;
      align-items: center;
      position: relative;
      border: 1px solid var(--line);
      transition: box-shadow .4s, border-color .4s
    }

    .hint {
      margin-top: 14px;
      color: var(--gray);
      display: flex;
      gap: 6px;
      align-items: center;
      font: 500 12px/1.4 var(--mono)
    }

    .more {
      margin-top: 22px;
      width: 100%;
      max-width: 720px
    }

    .more-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 auto;
      border: 1px solid var(--line2);
      background: #fff;
      color: var(--ink);
      font-size: 15px;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 10px
    }

    .more-btn .plus {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1.5px solid currentColor;
      display: grid;
      place-items: center;
      font-size: 15px;
      line-height: 1;
      transition: transform .4s var(--spring)
    }

    .more.open .plus {
      transform: rotate(45deg)
    }

    .more-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .5s var(--spring)
    }

    .more.open .more-body {
      grid-template-rows: 1fr
    }

    .more-body>div {
      overflow: hidden
    }

    .more-in {
      background: #fff;
      border-radius: 14px;
      padding: 24px 26px;
      margin-top: 12px;
      font-size: 16px;
      color: #3a3a3c;
      border: 1px solid var(--line);
      box-shadow: none
    }

    .more-in p {
      margin: 0 0 12px
    }

    .formula {
      font-family: "Times New Roman", Georgia, serif;
      font-size: 20px;
      background: var(--fill);
      border-radius: 10px;
      padding: 12px 16px;
      margin: 14px 0 4px;
      color: var(--ink);
      line-height: 1.6;
      border: 1px solid var(--line)
    }

    .formula i {
      font-style: italic
    }

    .formula .row {
      display: block
    }

    .lesson-link {
      border: 0;
      background: none;
      padding: 0;
      color: var(--ink);
      font-weight: 700;
      font-size: 16px;
      margin-top: 10px;
      text-decoration: underline;
      text-decoration-color: var(--tomato);
      text-decoration-thickness: 2px;
      text-underline-offset: 3px
    }

    .lesson-link:hover {
      text-decoration: underline;
      background: var(--sun)
    }

    /* matrices */
    .eq {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px 18px;
      width: 100%
    }

    .op {
      font-size: 26px;
      color: var(--gray2);
      font-weight: 300
    }

    .op.word {
      color: var(--ink);
      background: #fff;
      padding: 6px 12px;
      border-radius: 8px;
      font: 700 12px/1.4 var(--mono);
      border: 1px solid var(--line2)
    }

    .mat {
      max-width: 100%;
      min-width: 0
    }

    .mat-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      margin: 0 0 8px 2px
    }

    .mat-label .dim {
      color: var(--gray2);
      font-variant-numeric: tabular-nums;
      font: 500 12px/1 var(--mono)
    }

    .mscroll {
      overflow-x: auto;
      max-width: 100%;
      padding: 3px
    }

    .mt {
      border-collapse: separate;
      border-spacing: 3px;
      font-size: 12px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
      font-family: var(--mono)
    }

    .mt th {
      font-size: 11px;
      font-weight: 500;
      color: var(--gray2);
      padding: 0 4px;
      white-space: nowrap
    }

    .mt th.rl {
      text-align: right;
      color: var(--ink);
      font-weight: 600;
      font-size: 12px
    }

    .mt td {
      min-width: 48px;
      height: 30px;
      padding: 0 7px;
      text-align: right;
      border-radius: 5px;
      background: var(--fill);
      transition: background-color .4s, box-shadow .25s, transform .3s var(--spring)
    }

    .mt td.clk {
      cursor: pointer
    }

    .mt td.clk:hover {
      transform: scale(1.08);
      box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
    }

    .mt td.pend {
      opacity: 0;
      transform: scale(.5)
    }

    .mt td.show {
      animation: cellIn .5s var(--spring)
    }

    @keyframes cellIn {
      from {
        opacity: 0;
        transform: scale(.4)
      }
    }

    .slide.done .mt td.pend {
      opacity: 1;
      transform: none
    }

    .mt td.scan {
      box-shadow: 0 0 0 2.5px var(--yellow), 0 0 16px rgba(255, 204, 0, .75) !important;
      transform: scale(1.06)
    }

    .mt td.hl {
      box-shadow: 0 0 0 2.5px var(--yellow) !important
    }

    .mt td.self {
      box-shadow: 0 0 0 2.5px var(--ink), 0 6px 16px rgba(0, 0, 0, .2) !important;
      transform: scale(1.1)
    }

    .mt td.ninf {
      color: var(--gray2) !important;
      background: repeating-linear-gradient(135deg, var(--fill) 0 5px, #e4e4ea 5px 10px) !important
    }

    .mt td.zap {
      animation: zap .6s var(--spring)
    }

    @keyframes zap {
      0% {
        background: #ff3b30;
        color: #fff;
        transform: scale(1.3)
      }
    }

    .mt td.beacon {
      animation: beacon 1.4s ease-in-out infinite
    }

    @keyframes beacon {

      0%,
      100% {
        box-shadow: 0 0 0 2.5px var(--blue)
      }

      50% {
        box-shadow: 0 0 0 7px rgba(0, 113, 227, .25)
      }
    }

    .coach {
      position: fixed;
      z-index: 80;
      background: var(--ink);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      padding: 9px 14px;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
      animation: rise .5s var(--spring);
      pointer-events: none;
      white-space: nowrap
    }

    .coach::after {
      content: '';
      position: absolute;
      left: var(--ax, 50%);
      bottom: -6px;
      width: 12px;
      height: 12px;
      background: var(--ink);
      transform: translateX(-50%) rotate(45deg);
      border-radius: 2px
    }

    .segc {
      display: inline-flex;
      background: #fff;
      border-radius: 10px;
      padding: 3px;
      gap: 2px;
      border: 1px solid var(--line2)
    }

    .segc button {
      border: 0;
      background: none;
      border-radius: 7px;
      padding: 7px 18px;
      font-size: 15px;
      font-weight: 600;
      color: var(--gray);
      transition: all .3s var(--spring)
    }

    .segc button.on {
      background: var(--ink);
      color: #fff;
      box-shadow: none
    }

    .pane {
      display: none;
      width: 100%
    }

    .pane.on {
      display: block;
      animation: rise .55s var(--spring)
    }

    /* tokens step */
    .toks {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px
    }

    .tok {
      background: #fff;
      border-radius: 10px;
      padding: 12px 20px 10px;
      text-align: center;
      animation: split .8s var(--spring) both;
      animation-delay: calc(var(--i)*.1s*var(--spd));
      border: 2px solid var(--ink);
      box-shadow: 3px 3px 0 var(--ink)
    }

    @keyframes split {
      from {
        opacity: 0;
        transform: translateX(calc((var(--c) - var(--i)) * 40px)) scale(.8)
      }
    }

    .tok b {
      display: block;
      font-size: 24px;
      letter-spacing: -.02em;
      font-family: var(--display);
      font-weight: 800
    }

    .tok span {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--tomato);
      font-variant-numeric: tabular-nums;
      animation: rise .5s var(--spring) both;
      animation-delay: calc((.6s + var(--i)*.12s)*var(--spd));
      font-family: var(--mono)
    }

    .tok em {
      display: block;
      font-style: normal;
      font-size: 11px;
      color: #ff3b30;
      font-weight: 600
    }

    .stats {
      display: flex;
      justify-content: center;
      gap: clamp(24px, 6vw, 70px);
      flex-wrap: wrap
    }

    .stat {
      text-align: center
    }

    .stat b {
      display: block;
      font-size: 40px;
      letter-spacing: -.04em;
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
      font-family: var(--display);
      font-weight: 800
    }

    .stat span {
      font-size: 14px;
      color: var(--gray);
      font-weight: 500
    }

    /* embeddings */
    .two {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      gap: 28px;
      width: 100%;
      align-items: start
    }

    @media(max-width:860px) {
      .two {
        grid-template-columns: minmax(0, 1fr)
      }
    }

    .box {
      background: var(--fill);
      border-radius: 14px;
      padding: 16px;
      width: 100%;
      border: 1px solid var(--line)
    }

    .box h6 {
      font-size: 14px;
      font-weight: 600;
      margin: 0 0 8px;
      color: var(--ink)
    }

    .box svg {
      width: 100%;
      height: auto;
      display: block
    }

    .nn {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%
    }

    .nnr {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      font-size: 14px
    }

    .nnr b {
      font-size: 15px;
      margin-right: 4px
    }

    .pill {
      background: #fff;
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 500;
      box-shadow: 0 0 0 1px var(--line2)
    }

    .pill small {
      color: var(--gray2);
      margin-left: 4px;
      font-variant-numeric: tabular-nums
    }

    .dot {
      animation: fadeIn .8s both
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }
    }

    .me {
      animation: popin .8s var(--spring) both
    }

    /* arcs */
    .arcs {
      position: relative;
      width: 100%;
      padding: 170px 10px 16px;
      background: var(--fill);
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--line)
    }

    .arcs h6 {
      position: absolute;
      top: 16px;
      left: 20px;
      margin: 0;
      font-size: 14px;
      font-weight: 600
    }

    .arcs svg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible
    }

    .arc-toks {
      position: relative;
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: nowrap
    }

    .atk {
      border: 2px solid var(--ink);
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 16px;
      font-weight: 800;
      background: color-mix(in srgb, var(--sun) calc(var(--w, 0) * 100%), #fff);
      color: var(--ink);
      transition: background .5s, transform .3s var(--spring);
      text-align: center;
      box-shadow: 3px 3px 0 var(--ink);
      font-family: var(--display)
    }

    .atk small {
      display: block;
      font-size: 11px;
      font-weight: 600;
      opacity: .75;
      font-variant-numeric: tabular-nums
    }

    .atk.q {
      background: var(--ink);
      color: #fff;
      transform: translateY(-2px)
    }

    .atk.fut {
      opacity: .35
    }

    /* logits */
    .kcard {
      width: 100%;
      background: #fff6d9;
      border-radius: 14px;
      padding: 18px 20px;
      border: 1px solid #f0dfa6;
      box-shadow: none
    }

    .kcard h6 {
      font-size: 14px;
      margin: 0 0 8px;
      font-weight: 600
    }

    .tries {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px
    }

    .try {
      font-size: 13px;
      font-weight: 500;
      padding: 4px 10px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 0 0 1px var(--line2)
    }

    .try.ok {
      color: #0a7a3d
    }

    .try.no {
      color: var(--gray2);
      text-decoration: line-through
    }

    .follow {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px
    }

    .follow .pill {
      font-size: 15px;
      animation: popin .6s var(--spring) both
    }

    .lb {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .lb-row {
      display: grid;
      grid-template-columns: 24px minmax(70px, 130px) minmax(80px, 1fr) 70px 80px 66px;
      gap: 12px;
      align-items: center;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 14px;
      animation: rise .6s var(--spring) both;
      animation-delay: calc(var(--i)*.06s*var(--spd))
    }

    .lb-row.head {
      animation: none;
      font-size: 12px;
      color: var(--gray2);
      font-weight: 500;
      padding-top: 0;
      padding-bottom: 0
    }

    .lb-row.in {
      background: var(--fill)
    }

    .lb-row .w {
      font-weight: 700;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .lb-row .n {
      text-align: right;
      color: var(--gray);
      font-variant-numeric: tabular-nums
    }

    .lb-row .z {
      text-align: right;
      font-weight: 700;
      font-variant-numeric: tabular-nums
    }

    .lbar {
      height: 8px;
      border-radius: 8px;
      background: var(--fill2);
      overflow: hidden;
      border: 0
    }

    .lbar i {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 8px;
      background: #cfc8b8;
      transition: width 1.1s var(--spring)
    }

    .lb-row.in .lbar i {
      background: var(--ai)
    }

    @media(max-width:620px) {
      .lb-row {
        grid-template-columns: 20px 80px minmax(0, 1fr) 56px
      }

      .lb-row .hx {
        display: none
      }
    }

    /* pick */
    .pbars {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .prow {
      display: grid;
      grid-template-columns: 100px minmax(0, 1fr) 64px;
      gap: 14px;
      align-items: center
    }

    .prow .w {
      text-align: right;
      font-weight: 800;
      font-size: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: var(--display)
    }

    .prow .bar {
      height: 12px;
      border-radius: 12px;
      background: var(--fill2);
      overflow: hidden;
      border: 0
    }

    .prow .bar i {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 12px;
      background: var(--c);
      transition: width 1s var(--spring)
    }

    .prow .v {
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      font-size: 15px
    }

    .strip-wrap {
      position: relative;
      width: 100%;
      max-width: 640px;
      padding-top: 44px
    }

    .strip {
      display: flex;
      height: 54px;
      border-radius: 14px;
      overflow: hidden;
      border: 0;
      background: #fff
    }

    .sseg+.sseg {
      border-left: 2px solid #fff
    }

    .sseg {
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      background: var(--c);
      transition: filter .5s, transform .5s var(--spring);
      overflow: hidden;
      white-space: nowrap
    }

    .strip.decided .sseg {
      filter: saturate(.2) opacity(.35)
    }

    .strip.decided .sseg.won {
      filter: none;
      transform: scaleY(1.12)
    }

    .ticks {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--gray2);
      margin-top: 8px;
      font-variant-numeric: tabular-nums
    }

    .knob {
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
      z-index: 2
    }

    .knob b {
      background: var(--ink);
      color: #fff;
      font-size: 13px;
      padding: 4px 10px;
      border-radius: 6px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      font-family: var(--mono)
    }

    .knob i {
      width: 3px;
      height: 70px;
      background: var(--ink);
      border-radius: 3px;
      margin-top: 2px;
      box-shadow: 0 0 0 2px #fff
    }

    .verdict {
      text-align: center;
      opacity: 0;
      transform: translateY(16px) scale(.96);
      transition: all .8s var(--spring)
    }

    .verdict.on {
      opacity: 1;
      transform: none
    }

    .verdict small {
      display: block;
      color: var(--ink);
      font: 700 12px/1.4 var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase
    }

    .verdict .big {
      font-size: clamp(56px, 8vw, 96px);
      font-weight: 800;
      letter-spacing: -.05em;
      line-height: 1.05;
      font-family: var(--display)
    }

    .verdict p {
      margin: 6px 0 0;
      color: var(--gray);
      font-size: 15px
    }

    /* done */
    /* the finished sentence, as word tiles (plain text once it gets long) */
    .final {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px 10px;
      font: 800 clamp(24px, 3.4vw, 48px)/1 var(--display);
      text-align: center
    }

    .final span {
      padding: .26em .46em .32em;
      border: 2.5px solid var(--ink);
      border-radius: 10px;
      background: #fff;
      box-shadow: 4px 4px 0 var(--ink);
      animation: rise .9s var(--spring) both;
      animation-delay: calc(var(--i)*.08s)
    }

    .final span:nth-child(3n+1) {
      transform: rotate(-1.2deg)
    }

    .final span:nth-child(3n+2) {
      transform: rotate(.9deg)
    }

    .final .gen {
      background: var(--tomato);
      color: #fff
    }

    .final.long {
      gap: 0 .3em;
      font-size: clamp(20px, 2.4vw, 32px);
      line-height: 1.4
    }

    .final.long span {
      padding: 0;
      border: 0;
      background: none;
      box-shadow: none;
      transform: none
    }

    .final.long .gen {
      color: var(--tomato)
    }

    .final.long .punct {
      margin-left: -.3em
    }

    .hist {
      width: 100%;
      max-width: 720px;
      display: flex;
      flex-direction: column
    }

    .hrow {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 12px 4px;
      border-bottom: 1px dashed var(--line2);
      font-size: 15px
    }

    .hrow:last-child {
      border: 0
    }

    .hrow .n {
      color: var(--gray2);
      font-weight: 600
    }

    .hrow .ctx {
      color: var(--gray)
    }

    .hrow .ctx b {
      color: var(--ink)
    }

    .hrow .alt {
      font-size: 13px;
      color: var(--gray2);
      font-variant-numeric: tabular-nums;
      text-align: right
    }

    .btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center
    }

    .pillbtn {
      border: 0;
      border-radius: 12px;
      padding: 12px 24px;
      font-size: 17px;
      font-weight: 800;
      background: var(--blue);
      color: #fff;
      transition: transform .12s, box-shadow .12s;
      box-shadow: 0 8px 18px -8px rgba(61, 79, 214, .7);
      font-family: var(--display)
    }

    .pillbtn:hover {
      background: var(--blue);
      transform: translateY(-1px);
      box-shadow: 0 12px 24px -10px rgba(61, 79, 214, .75)
    }

    .pillbtn:active {
      transform: translateY(1px);
      box-shadow: 0 2px 6px -2px rgba(61, 79, 214, .6)
    }

    .pillbtn.gray {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line2);
      box-shadow: none
    }

    .pillbtn.gray:hover {
      background: var(--fill);
      box-shadow: none
    }

    /* floating controls: play, back, where you are, next */
    .dock {
      position: fixed;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      z-index: 35;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(29, 27, 25, .05), 0 14px 34px -10px rgba(29, 27, 25, .28)
    }

    .dbtn {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      transition: background .2s, transform .3s var(--spring)
    }

    .dbtn .icon {
      width: 20px;
      height: 20px
    }

    .dbtn:hover:not(:disabled) {
      background: var(--fill2)
    }

    .dbtn:active:not(:disabled) {
      transform: scale(.92)
    }

    .dbtn:disabled {
      opacity: .3;
      cursor: default
    }

    .dbtn.primary {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: auto;
      padding: 0 14px 0 18px;
      border-radius: 999px;
      background: var(--blue);
      color: #fff;
      font-size: 15px;
      font-weight: 700
    }

    .dbtn.primary:hover:not(:disabled) {
      background: #3243c2
    }

    .dcount {
      min-width: 58px;
      font: 600 13px/1 var(--mono);
      color: var(--gray);
      text-align: center;
      white-space: nowrap
    }

    .dtext {
      height: 38px;
      padding: 0 13px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--ink);
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap
    }

    .dtext:hover:not(:disabled) {
      background: var(--fill2)
    }

    .dtext:disabled {
      opacity: .3;
      cursor: default
    }

    .dsep {
      width: 1px;
      height: 24px;
      margin: 0 4px;
      background: var(--line2)
    }

    @media(max-width:560px) {
      .dock {
        bottom: 12px;
        gap: 0;
        padding: 5px
      }

      .dbtn {
        width: 38px;
        height: 38px
      }

      .dbtn.primary {
        padding: 0 10px
      }

      .dbtn.primary span {
        display: none
      }

      .dcount {
        min-width: 46px;
        font-size: 12px
      }

      .dtext {
        padding: 0 9px;
        font-size: 13px
      }

      .dsep {
        margin: 0 2px
      }
    }

    /* sheets */
    .sheet {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 50;
      width: min(760px, 100%);
      max-height: 58vh;
      overflow: auto;
      background: #fff;
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -16px 44px -18px rgba(29, 27, 25, .3);
      padding: 10px 26px 30px;
      transform: translate(-50%, 105%);
      transition: transform .55s var(--spring);
      visibility: hidden;
      border: 1px solid var(--line);
      border-bottom: 0
    }

    .sheet.open {
      transform: translate(-50%, 0);
      visibility: visible
    }

    .grabber {
      width: 38px;
      height: 5px;
      border-radius: 5px;
      background: var(--line2);
      margin: 0 auto 14px
    }

    .sheet h4 {
      font-size: 20px;
      letter-spacing: -.02em;
      margin: 0 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--display);
      font-weight: 800
    }

    .xbtn {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid var(--line2);
      background: #fff;
      display: grid;
      place-items: center;
      color: var(--ink);
      font-size: 16px;
      font-weight: 600
    }

    .calc-title {
      font-weight: 600;
      margin-bottom: 8px;
      font-size: 16px
    }

    .calc-math {
      font-size: 15px;
      line-height: 1.7;
      font-variant-numeric: tabular-nums;
      color: #3a3a3c;
      word-break: break-word
    }

    .calc-math b {
      color: var(--blue);
      font-size: 17px
    }

    .modal-bg {
      position: fixed;
      inset: 0;
      z-index: 70;
      background: rgba(29, 27, 25, .45);
      display: grid;
      place-items: center;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s
    }

    .modal-bg.on {
      opacity: 1;
      pointer-events: auto
    }

    .modal {
      width: min(760px, 100%);
      max-height: calc(100vh - 32px);
      overflow: auto;
      background: #fff;
      border-radius: 18px;
      padding: 26px clamp(18px, 4vw, 36px) 30px;
      box-shadow: 0 30px 80px -24px rgba(29, 27, 25, .5);
      transform: scale(.94) translateY(20px);
      transition: transform .55s var(--spring);
      border: 1px solid var(--line)
    }

    .modal-bg.on .modal {
      transform: none
    }

    .modal h3 {
      font-size: 28px;
      letter-spacing: -.03em;
      margin: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--display);
      font-weight: 800
    }

    .modal .segc {
      margin: 18px 0 6px
    }

    .lcap {
      font-size: 19px;
      font-weight: 500;
      line-height: 1.45;
      min-height: 84px;
      margin: 16px 0 18px;
      letter-spacing: -.015em
    }

    .lcap b {
      font-weight: 700
    }

    .lviz {
      background: var(--fill);
      border-radius: 14px;
      padding: 26px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      min-height: 250px;
      justify-content: center;
      border: 1px solid var(--line)
    }

    .lrow {
      display: flex;
      gap: 10px;
      align-items: center
    }

    .lname {
      width: 28px;
      text-align: right;
      font-weight: 700;
      color: var(--gray);
      font-size: 18px;
      font-style: italic;
      font-family: Georgia, serif
    }

    .lc {
      width: 58px;
      height: 50px;
      border-radius: 8px;
      background: #fff;
      display: grid;
      place-items: center;
      font-size: 20px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      transition: all .45s var(--spring);
      box-shadow: none;
      border: 1px solid var(--line2)
    }

    .lc.hot {
      background: var(--sun);
      transform: scale(1.08)
    }

    .lc.res {
      background: var(--blue);
      color: #fff
    }

    .lc.ghost {
      color: #c7c7cc;
      background: transparent;
      box-shadow: none;
      border: 1px dashed var(--line2)
    }

    .lc.wide {
      width: 76px
    }

    .lsum {
      font-size: 22px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      opacity: 0;
      transform: translateY(10px);
      transition: all .5s var(--spring)
    }

    .lsum.on {
      opacity: 1;
      transform: none
    }

    .lsum b {
      font-size: 30px;
      color: var(--blue)
    }

    .mgrid {
      display: inline-grid;
      gap: 6px
    }

    .mm {
      display: flex;
      gap: 18px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center
    }

    .mm .lbl {
      text-align: center;
      font-weight: 700;
      font-style: italic;
      font-family: Georgia, serif;
      color: var(--gray);
      margin-bottom: 6px;
      font-size: 18px
    }

    .smcols {
      display: flex;
      gap: 18px;
      justify-content: center;
      flex-wrap: wrap
    }

    .smcol {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 96px
    }

    .smcol .k {
      font-size: 12px;
      color: var(--gray);
      font-weight: 600
    }

    .smbar {
      width: 44px;
      height: 110px;
      border-radius: 8px;
      background: #fff;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      box-shadow: none;
      border: 1px solid var(--line2)
    }

    .smbar i {
      display: block;
      width: 100%;
      height: 0;
      background: var(--ai);
      transition: height .8s var(--spring)
    }

    .lnav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px
    }

    .ldots {
      display: flex;
      gap: 6px
    }

    .ldots i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #d2d2d7;
      transition: all .3s
    }

    .ldots i.on {
      background: var(--ink);
      width: 20px;
      border-radius: 4px
    }

    .wait {
      position: fixed;
      inset: 0;
      z-index: 95;
      display: none;
      place-items: center;
      background: rgba(250, 246, 239, .92);
      backdrop-filter: blur(10px);
      font-size: 17px;
      font-weight: 600
    }

    .wait.on {
      display: grid
    }

    .spin {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 3px solid #d2d2d7;
      border-top-color: var(--blue);
      animation: sp 1s linear infinite;
      margin: 0 auto 12px
    }

    @keyframes sp {
      to {
        transform: rotate(360deg)
      }
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important
      }
    }