:root {
   --tb-bg: #ffffff;
   --tb-ink: #0a0a0a;
   --tb-muted: #52525b;
   --tb-line: #e4e4e7;
   --tb-raised: #f5f5f4;
   --tb-accent: #15803d;
   --tb-accent-deep: #166534;
   --tb-radius: 4px;
   --tb-wrap: 1120px;
   --tb-gutter: 20px;
   --tb-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --tb-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
}

body {
   margin: 0;
   background: var(--tb-bg);
   color: var(--tb-ink);
   font-family: var(--tb-sans);
   font-size: 17px;
   line-height: 1.6;
}

h1,
h2,
h3 {
   margin: 0;
   font-weight: 600;
   line-height: 1.12;
   letter-spacing: -0.03em;
}

h1 {
   font-size: clamp(2.6rem, 7vw, 4.4rem);
}

h2 {
   font-size: clamp(1.6rem, 3.6vw, 2.3rem);
   letter-spacing: -0.02em;
}

h3 {
   font-size: 1.15rem;
   letter-spacing: -0.01em;
   line-height: 1.3;
}

p {
   margin: 0 0 1.05em;
}

a {
   color: var(--tb-ink);
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
}

a:hover {
   color: var(--tb-accent);
}

a:focus-visible {
   outline: 2px solid var(--tb-accent);
   outline-offset: 2px;
}

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

table {
   border-collapse: collapse;
}

.tb-skip {
   position: absolute;
   left: 12px;
   top: -60px;
   padding: 12px 16px;
   background: var(--tb-ink);
   color: #ffffff;
   z-index: 30;
}
.tb-skip:focus {
   top: 12px;
   color: #ffffff;
}

.tb-wrap {
   max-width: var(--tb-wrap);
   margin: 0 auto;
   padding-left: var(--tb-gutter);
   padding-right: var(--tb-gutter);
}

.tb-head {
   background: var(--tb-bg);
}
.tb-head__bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   min-height: 72px;
}
.tb-head__logo {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   min-height: 44px;
   font-weight: 700;
   font-size: 1.1rem;
   letter-spacing: -0.02em;
   text-decoration: none;
}
.tb-head__mark {
   width: 20px;
   height: 20px;
}
.tb-head__nav {
   display: flex;
   min-width: 0;
   gap: 4px;
   overflow-x: auto;
}
.tb-head__link {
   display: inline-block;
   padding: 12px 12px;
   min-height: 44px;
   font-size: 0.95rem;
   color: var(--tb-muted);
   text-decoration: none;
   white-space: nowrap;
}
.tb-head__link[aria-current="page"] {
   color: var(--tb-ink);
   box-shadow: inset 0 -2px 0 var(--tb-accent);
}

.tb-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 44px;
   padding: 14px 26px;
   border: 1.5px solid var(--tb-ink);
   border-radius: var(--tb-radius);
   background: var(--tb-ink);
   color: #ffffff;
   font: inherit;
   font-size: 0.98rem;
   font-weight: 600;
   line-height: 1.1;
   text-decoration: none;
   cursor: pointer;
   transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.tb-btn:hover {
   background: var(--tb-accent);
   border-color: var(--tb-accent);
   color: #ffffff;
}
.tb-btn:focus-visible {
   outline: 2px solid var(--tb-accent);
   outline-offset: 2px;
}
.tb-btn--line {
   background: transparent;
   color: var(--tb-ink);
}
.tb-btn--line:hover {
   background: transparent;
   color: var(--tb-accent-deep);
}
.tb-btn--head {
   display: none;
   padding: 12px 20px;
}

.tb-crumbs {
   padding-top: 20px;
   font-size: 0.9rem;
   color: var(--tb-muted);
}
.tb-crumbs__link {
   display: inline-block;
   padding: 12px 0;
   min-height: 44px;
   color: var(--tb-muted);
}

.tb-cover {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   min-height: clamp(520px, calc(100vh - 72px), 860px);
   padding-top: 64px;
   padding-bottom: 88px;
}
.tb-cover__title {
   max-width: 15ch;
   font-size: clamp(2.8rem, 8.4vw, 5.6rem);
   letter-spacing: -0.04em;
}
.tb-cover__lede {
   max-width: 38rem;
   margin-top: 28px;
   font-size: 1.2rem;
   color: var(--tb-muted);
}
.tb-cover__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 12px;
}

.tb-meta {
   margin: 28px 0 0;
   font-size: 0.92rem;
   color: var(--tb-muted);
}

.tb-corpus {
   max-width: 720px;
   margin: 0 auto;
   padding-left: var(--tb-gutter);
   padding-right: var(--tb-gutter);
}

.tb-sec {
   padding-top: 96px;
   padding-bottom: 8px;
}
.tb-sec--wide {
   padding-top: 132px;
}
.tb-sec--narrow {
   max-width: 720px;
}
.tb-sec--tight {
   padding-top: 56px;
}

.tb-prose h2 {
   margin-bottom: 24px;
}
.tb-prose h3 {
   margin: 32px 0 10px;
}
.tb-prose ul:not([class]),
.tb-prose ol:not([class]) {
   margin: 0 0 1.2em;
   padding-left: 1.2em;
}
.tb-prose li {
   margin-bottom: 0.45em;
}

.tb-lead {
   font-size: 1.14rem;
}

.tb-table {
   min-width: 0;
   margin: 28px 0 0;
   overflow-x: auto;
}
.tb-table__grid {
   width: 100%;
   min-width: 520px;
   font-size: 0.95rem;
   line-height: 1.45;
}
.tb-table__cap {
   padding-bottom: 14px;
   text-align: left;
   font-weight: 600;
   font-size: 1.02rem;
}
.tb-table__grid th,
.tb-table__grid td {
   padding: 12px 14px 12px 0;
   border-bottom: 1px solid var(--tb-line);
   text-align: left;
   vertical-align: top;
}
.tb-table__grid thead th {
   border-bottom: 2px solid var(--tb-ink);
   font-size: 0.85rem;
   font-weight: 600;
}
.tb-table__grid tbody th {
   font-weight: 600;
}
.tb-table__note {
   margin-top: 12px;
   font-size: 0.9rem;
   font-style: italic;
   color: var(--tb-muted);
}

.tb-method {
   margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: tb-step;
}
.tb-method__item {
   position: relative;
   padding: 0 0 22px 52px;
   counter-increment: tb-step;
}
.tb-method__item::before {
   content: counter(tb-step, decimal-leading-zero);
   position: absolute;
   left: 0;
   top: 1px;
   font-family: var(--tb-mono);
   font-size: 0.9rem;
   color: var(--tb-accent-deep);
}

.tb-time {
   margin: 0;
   padding: 0;
   list-style: none;
}
.tb-time__item {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 4px;
   padding: 20px 0;
   border-top: 1px solid var(--tb-line);
}
.tb-time__year {
   font-size: 1.6rem;
   font-weight: 600;
   letter-spacing: -0.03em;
   line-height: 1.1;
}
.tb-time__text {
   margin: 0;
}
.tb-time__src {
   font-size: 0.88rem;
   color: var(--tb-muted);
}

.tb-gallery {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 40px;
   margin-top: 32px;
}

.tb-shot {
   margin: 0;
}
.tb-shot__img {
   border-radius: var(--tb-radius);
   background: var(--tb-raised);
}
.tb-shot__cap {
   margin-top: 10px;
   font-size: 0.9rem;
   color: var(--tb-muted);
}
.tb-shot--tall {
   max-width: 280px;
}

.tb-games {
   margin: 24px 0 0;
   padding: 0;
   list-style: none;
}
.tb-games__item {
   padding: 18px 0;
   border-top: 1px solid var(--tb-line);
}
.tb-games__link {
   display: inline-block;
   padding: 6px 0;
   min-height: 44px;
   font-size: 1.25rem;
   font-weight: 600;
   letter-spacing: -0.02em;
}
.tb-games__text {
   margin: 0;
   color: var(--tb-muted);
}

.tb-cta {
   margin-top: 132px;
   padding-top: 96px;
   padding-bottom: 120px;
   background: var(--tb-raised);
}
.tb-cta__title {
   max-width: 20ch;
   font-size: clamp(2rem, 5vw, 3.2rem);
}
.tb-cta__note {
   margin-top: 20px;
   color: var(--tb-muted);
}
.tb-cta__mail {
   margin-top: 28px;
}

.tb-hero {
   padding-top: 48px;
   padding-bottom: 24px;
}
.tb-hero__title {
   max-width: 22ch;
}
.tb-hero__lede {
   max-width: 42rem;
   margin-top: 24px;
   font-size: 1.16rem;
   color: var(--tb-muted);
}

.tb-shift {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   row-gap: 0;
}
.tb-shift > * {
   min-width: 0;
}

.tb-answer {
   margin: 36px 0 0;
   padding: 26px 28px;
   border-left: 3px solid var(--tb-accent);
   background: var(--tb-raised);
   font-size: 1.1rem;
}
.tb-answer p:last-child {
   margin-bottom: 0;
}

.tb-nots {
   margin: 0;
   padding: 0;
   list-style: none;
}
.tb-nots__item {
   padding: 14px 0 14px 28px;
   border-top: 1px solid var(--tb-line);
   position: relative;
}
.tb-nots__item::before {
   content: "";
   position: absolute;
   left: 0;
   top: 26px;
   width: 14px;
   height: 2px;
   background: var(--tb-ink);
}

.tb-figures {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 28px 24px;
   margin: 28px 0 0;
}
.tb-figures__num {
   margin: 0;
   font-size: clamp(1.8rem, 4.4vw, 2.6rem);
   font-weight: 600;
   letter-spacing: -0.03em;
   line-height: 1.05;
}
.tb-figures__label {
   margin: 6px 0 0;
   font-size: 0.93rem;
   color: var(--tb-muted);
}

.tb-toc {
   margin: 32px 0 0;
   padding: 0;
   list-style: none;
   columns: 1;
}
.tb-toc__link {
   display: inline-block;
   padding: 10px 0;
   min-height: 44px;
   color: var(--tb-muted);
}

.tb-steps {
   margin: 0;
   padding: 0;
   list-style: none;
}
.tb-steps__step {
   position: relative;
   padding: 0 0 72px 64px;
}
.tb-steps__step::before {
   content: "";
   position: absolute;
   left: 17px;
   top: 44px;
   bottom: 8px;
   width: 2px;
   background: var(--tb-line);
}
.tb-steps__step:last-child::before {
   display: none;
}
.tb-steps__num {
   position: absolute;
   left: 0;
   top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border: 2px solid var(--tb-ink);
   border-radius: var(--tb-radius);
   font-family: var(--tb-mono);
   font-size: 0.85rem;
   font-weight: 600;
}
.tb-steps__src {
   font-size: 0.88rem;
   color: var(--tb-muted);
}

.tb-diagram {
   margin: 28px 0 0;
}
.tb-diagram__svg {
   display: block;
   width: 100%;
   height: auto;
   max-width: 720px;
}
.tb-diagram__cap {
   margin-top: 12px;
   font-size: 0.9rem;
   color: var(--tb-muted);
}

.tb-terms {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 0 40px;
   margin: 24px 0 0;
}
.tb-terms__term {
   padding-top: 18px;
   border-top: 1px solid var(--tb-line);
   font-weight: 600;
}
.tb-terms__def {
   margin: 6px 0 0;
   padding-bottom: 18px;
   color: var(--tb-muted);
}

.tb-zig {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 32px;
   align-items: center;
}
.tb-zig__text,
.tb-zig__media {
   min-width: 0;
}

.tb-worked {
   margin: 24px 0 0;
   padding: 22px 24px;
   overflow-x: auto;
   background: var(--tb-ink);
   color: #e7e5e4;
   border-radius: var(--tb-radius);
   font-family: var(--tb-mono);
   font-size: 0.88rem;
   line-height: 1.7;
   white-space: pre;
}

.tb-errors {
   margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: tb-err;
}
.tb-errors__item {
   position: relative;
   padding: 20px 0 16px 56px;
   border-top: 1px solid var(--tb-line);
   counter-increment: tb-err;
}
.tb-errors__item::before {
   content: counter(tb-err);
   position: absolute;
   left: 0;
   top: 16px;
   font-size: 1.9rem;
   font-weight: 600;
   line-height: 1;
   color: var(--tb-accent-deep);
}
.tb-errors__title {
   margin-bottom: 6px;
}

.tb-facts {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 0;
   margin: 32px 0 0;
}
.tb-facts__row {
   display: grid;
   grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
   gap: 16px;
   padding: 12px 0;
   border-top: 1px solid var(--tb-line);
}
.tb-facts__key {
   font-size: 0.9rem;
   color: var(--tb-muted);
}
.tb-facts__val {
   margin: 0;
}

.tb-store {
   margin-top: 20px;
   font-size: 0.95rem;
}
.tb-store__link {
   display: inline-block;
   padding: 10px 0;
   min-height: 44px;
   font-weight: 600;
}
.tb-store__note {
   display: block;
   color: var(--tb-muted);
}

.tb-compare {
   padding-top: 64px;
}
.tb-compare__grid {
   min-width: 760px;
   font-size: 1.02rem;
}
.tb-compare__notes {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 36px;
   margin-top: 72px;
}
.tb-compare__note {
   min-width: 0;
}

.tb-howto {
   margin: 24px 0 0;
   padding: 0;
   list-style: none;
}
.tb-howto__step {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 18px;
   padding: 28px 0;
   border-top: 1px solid var(--tb-line);
}
.tb-howto__label {
   font-family: var(--tb-mono);
   font-size: 0.85rem;
   color: var(--tb-accent-deep);
}

.tb-cards {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 20px;
   align-items: start;
   margin-top: 32px;
}

.tb-card {
   min-width: 0;
   padding: 26px 24px;
   background: var(--tb-raised);
   border-radius: var(--tb-radius);
}
.tb-card--media {
   padding: 0 0 22px;
   background: transparent;
}
.tb-card__title {
   margin-bottom: 10px;
}
.tb-card__text {
   margin: 0;
}

.tb-split {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 40px;
   padding-top: 32px;
}
.tb-split__side,
.tb-split__main {
   min-width: 0;
}

.tb-myths {
   margin: 24px 0 0;
}
.tb-myths__myth {
   padding-top: 22px;
   border-top: 1px solid var(--tb-line);
   font-weight: 600;
}
.tb-myths__fact {
   margin: 8px 0 0;
   padding-bottom: 8px;
}
.tb-myths__src {
   display: block;
   margin-top: 6px;
   font-size: 0.88rem;
   color: var(--tb-muted);
}

.tb-band {
   padding-top: 88px;
   padding-bottom: 88px;
}
.tb-band__narrow {
   max-width: 760px;
}
.tb-band--raised {
   background: var(--tb-raised);
}
.tb-band--first {
   padding-top: 24px;
}

.tb-bento {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
   margin-top: 32px;
}

.tb-tile {
   min-width: 0;
   padding: 28px 26px;
   background: var(--tb-raised);
   border-radius: var(--tb-radius);
}
.tb-tile--ink {
   background: var(--tb-ink);
   color: #fafaf9;
}
.tb-tile__num {
   margin: 0 0 8px;
   font-size: clamp(1.9rem, 3.4vw, 2.6rem);
   font-weight: 600;
   letter-spacing: -0.04em;
   white-space: nowrap;
   line-height: 1;
}
.tb-tile__quote {
   margin: 0 0 12px;
   font-size: clamp(1.4rem, 3.2vw, 1.9rem);
   font-weight: 600;
   letter-spacing: -0.02em;
   line-height: 1.2;
}
.tb-tile__text {
   margin: 0;
}

.tb-flow {
   padding-top: 72px;
}
.tb-flow__narrow {
   max-width: 760px;
}

.tb-legal {
   max-width: 760px;
   padding-top: 40px;
   padding-bottom: 40px;
}
.tb-legal h2 {
   margin: 44px 0 14px;
   font-size: 1.4rem;
}
.tb-legal ul {
   padding-left: 1.2em;
}

.tb-foot {
   padding-top: 72px;
   padding-bottom: 120px;
   border-top: 2px solid var(--tb-ink);
}
.tb-foot__owner {
   max-width: 34ch;
   margin: 0;
   font-size: clamp(1.3rem, 3vw, 1.8rem);
   font-weight: 600;
   letter-spacing: -0.02em;
   line-height: 1.25;
}
.tb-foot__mail {
   display: inline-block;
   margin-top: 16px;
   padding: 10px 0;
   min-height: 44px;
   font-size: 1.05rem;
}
.tb-foot__links {
   display: flex;
   flex-wrap: wrap;
   gap: 0 24px;
   margin: 32px 0 0;
   padding: 0;
   list-style: none;
}
.tb-foot__links a {
   display: inline-block;
   padding: 12px 0;
   min-height: 44px;
   color: var(--tb-muted);
}
.tb-foot__rev {
   margin: 20px 0 0;
   font-size: 0.88rem;
   color: var(--tb-muted);
}

.tb-consent {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 20;
   padding-top: 18px;
   padding-bottom: 18px;
   background: var(--tb-bg);
   border-top: 2px solid var(--tb-ink);
}
.tb-consent[hidden] {
   display: none;
}
.tb-consent__bar {
   display: flex;
   flex-direction: column;
   gap: 14px;
}
.tb-consent__text {
   margin: 0;
   font-size: 0.93rem;
}
.tb-consent__actions {
   display: flex;
   gap: 10px;
}
.tb-consent__actions .tb-btn {
   flex: 1 1 auto;
   padding: 12px 18px;
}

.tb-reopen {
   margin-top: 12px;
}

[data-reveal].is-waiting {
   opacity: 0;
   transform: translateY(14px);
   transition: opacity 420ms ease, transform 420ms ease;
}
[data-reveal].is-in {
   opacity: 1;
   transform: none;
}

@media (min-width: 560px) {
   .tb-consent__bar {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
   }

   .tb-consent__actions .tb-btn {
      flex: 0 0 auto;
   }

   .tb-gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .tb-toc {
      columns: 2;
   }
}

@media (min-width: 760px) {
   :root {
      --tb-gutter: 32px;
   }

   .tb-btn--head {
      display: inline-flex;
   }

   .tb-terms {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .tb-time__item {
      grid-template-columns: 7rem minmax(0, 1fr);
      gap: 24px;
   }

   .tb-time__src {
      grid-column: 2;
   }

   .tb-figures {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .tb-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .tb-howto__step {
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 32px;
   }

   .tb-compare__notes {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .tb-bento {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .tb-tile--big {
      grid-column: span 2;
      grid-row: span 2;
   }

   .tb-tile--wide {
      grid-column: span 2;
   }
}

@media (min-width: 900px) {
   .tb-shift {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: 24px;
   }

   .tb-shift__a {
      grid-column: 1 / 9;
   }

   .tb-shift__b {
      grid-column: 5 / 13;
   }

   .tb-shift__c {
      grid-column: 2 / 10;
   }

   .tb-shift__d {
      grid-column: 3 / 12;
   }

   .tb-zig {
      grid-template-columns: minmax(0, 1fr) 400px;
      gap: 64px;
   }

   .tb-zig--flip .tb-zig__media {
      order: -1;
   }

   .tb-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .tb-card--span {
      grid-column: span 2;
   }
}

@media (min-width: 1000px) {
   .tb-split {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 72px;
   }

   .tb-split__side {
      position: sticky;
      top: 32px;
      align-self: start;
   }
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   [data-reveal].is-waiting {
      opacity: 1;
      transform: none;
      transition: none;
   }

   .tb-btn {
      transition: none;
   }
}