:root {
      --bg: #eaf3f4;
      --card: #fff;
      --ink: #0e2a35;
      --mut: #4f6b75;
      --pri: #0f7f86;
      --on: #fff;
      --ok: #1f8f5f;
      --bad: #c9364a;
      --line: #cfe0e3;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px)
    }

    @media (prefers-color-scheme:dark) {
      :root:not([data-theme="light"]) {
        --bg: #0a1f27;
        --card: #102d38;
        --ink: #e8f4f6;
        --mut: #9bbcc4;
        --pri: #35c2c9;
        --on: #06232a;
        --ok: #4fd39a;
        --bad: #ff7b8c;
        --line: #24475a
      }
    }

    :root[data-theme="dark"] {
      --bg: #0a1f27;
      --card: #102d38;
      --ink: #e8f4f6;
      --mut: #9bbcc4;
      --pri: #35c2c9;
      --on: #06232a;
      --ok: #4fd39a;
      --bad: #ff7b8c;
      --line: #24475a
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background: var(--bg);
      color: var(--ink);
      font: 500 16px/1.45 "DM Sans", system-ui, sans-serif;
      touch-action: manipulation
    }

    main {
      max-width: 440px;
      margin: 0 auto;
      padding: 14px 14px 22px
    }

    [hidden] {
      display: none !important
    }

    h1,
    h2 {
      font-family: "Baloo 2", sans-serif;
      font-weight: 800;
      margin: 0;
      line-height: 1.05
    }

    h1 {
      font-size: 38px
    }

    h2 {
      font-size: 28px
    }

    p {
      margin: 0 0 10px
    }

    .mut {
      color: var(--mut)
    }

    .card {
      background: var(--card);
      border: 2px solid var(--line);
      border-radius: 18px;
      padding: 14px 16px;
      margin-bottom: 10px
    }

    .btn {
      font: 800 20px "Baloo 2", sans-serif;
      background: var(--pri);
      color: var(--on);
      border: 0;
      border-radius: 14px;
      padding: 11px 20px;
      width: 100%;
      cursor: pointer;
      box-shadow: 0 4px 0 rgba(0, 0, 0, .25)
    }

    .btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 rgba(0, 0, 0, .25)
    }

    .btn:focus-visible,
    .k:focus-visible,
    .hb:focus-visible {
      outline: 3px solid var(--ink);
      outline-offset: 2px
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 700;
      margin-bottom: 8px
    }

    .top b {
      font: 800 22px "Baloo 2", sans-serif
    }

    #od {
      font-weight: 700
    }

    #pt {
      font: 800 20px "Baloo 2", sans-serif;
      color: var(--pri)
    }

    #q {
      font-weight: 700;
      margin-bottom: 8px
    }

    #rt {
      display: grid;
      grid-template-columns: 1fr 30px 1fr;
      gap: 8px 4px;
      align-items: center;
      text-align: center;
      font: 800 24px "Baloo 2", sans-serif
    }

    #rt span {
      background: var(--bg);
      border-radius: 12px;
      padding: 8px 6px
    }

    #rt i {
      font-style: normal;
      color: var(--mut)
    }

    #rt .x {
      border: 3px dashed var(--pri);
      background: transparent
    }

    #rt .x.good {
      border: 3px solid var(--ok);
      color: var(--ok)
    }

    #rt .x.bad {
      border: 3px solid var(--bad);
      color: var(--bad)
    }

    #fb {
      min-height: 56px;
      border-radius: 12px;
      padding: 8px 12px;
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 15px
    }

    #fb:empty {
      padding: 0;
      min-height: 0
    }

    #fb.ok {
      background: color-mix(in srgb, var(--ok) 18%, transparent);
      color: var(--ok)
    }

    #fb.bad {
      background: color-mix(in srgb, var(--bad) 18%, transparent);
      color: var(--bad)
    }

    #fb.hint {
      background: var(--card);
      border: 2px dashed var(--pri);
      color: var(--ink)
    }

    .pad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 10px
    }

    .k {
      font: 800 24px "Baloo 2", sans-serif;
      background: var(--card);
      color: var(--ink);
      border: 2px solid var(--line);
      border-radius: 14px;
      height: 52px;
      cursor: pointer
    }

    .k:active {
      background: var(--line)
    }

    .hb {
      background: none;
      border: 0;
      color: var(--pri);
      font: 700 15px "DM Sans", sans-serif;
      text-decoration: underline;
      cursor: pointer;
      padding: 4px
    }

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px
    }

    .st {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .st div {
      background: var(--bg);
      border-radius: 12px;
      padding: 8px;
      text-align: center
    }

    .st b {
      display: block;
      font: 800 26px "Baloo 2", sans-serif;
      color: var(--pri)
    }

    ul {
      margin: 0;
      padding-left: 20px
    }

    li {
      margin-bottom: 6px
    }