:root {
      --page: #f4f5f7;
      --surface: #ffffff;
      --surface-2: #fafbfc;
      --surface-soft: #eef0f4;
      --ink: #1c1c1e;
      --muted: #6e6e73;
      --quiet: #8e8e93;
      --faint: #aeb2ba;
      --hairline: #e6e7eb;
      --hairline-soft: #eeeff2;
      --accent: #0a84ff;
      --accent-dark: #0064c8;
      --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    body {
      min-width: 320px;
      margin: 0;
      background: var(--page);
      color: var(--ink);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a {
      font: inherit;
    }

    .site {
      position: relative;
      width: 100%;
      min-height: 100vh;
      margin: 0 auto;
      overflow: hidden;
      background: var(--page);
    }

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

    /* ── Ambient loop motif ───────────────────────────── */
    .site::before {
      position: absolute;
      z-index: 0;
      top: -300px;
      right: -210px;
      width: 820px;
      height: 820px;
      border: 92px solid rgba(10, 132, 255, 0.05);
      border-radius: 50%;
      content: "";
      pointer-events: none;
    }

    .site::after {
      position: absolute;
      z-index: 0;
      top: 96px;
      right: 128px;
      width: 300px;
      height: 300px;
      border: 1px solid rgba(10, 132, 255, 0.12);
      border-radius: 50%;
      content: "";
      pointer-events: none;
    }

    .site-header,
    .hero,
    .principles,
    .lifecycle,
    .access,
    .bigger-picture,
    .site-footer {
      position: relative;
      z-index: 1;
    }

    /* ── Header ───────────────────────────────────────── */
    .site-header {
      display: flex;
      max-width: 1240px;
      min-height: 80px;
      margin: 0 auto;
      align-items: center;
      justify-content: space-between;
      padding: 0 32px;
    }

    .brand {
      display: inline-flex;
      align-items: baseline;
      gap: 9px;
      color: var(--ink);
      text-decoration: none;
    }

    .brand-mark {
      color: transparent;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 27px;
      font-style: italic;
      font-weight: 700;
      letter-spacing: -0.08em;
      line-height: 1;
      -webkit-text-stroke: 1px var(--ink);
    }

    .brand-name {
      font-size: 17px;
      font-weight: 720;
      letter-spacing: -0.02em;
    }

    /* ── Hero ─────────────────────────────────────────── */
    .hero {
      display: grid;
      max-width: 1240px;
      min-height: 640px;
      margin: 0 auto;
      align-items: center;
      gap: 76px;
      padding: 56px 32px 104px;
      grid-template-columns: minmax(0, 0.92fr) minmax(508px, 1.08fr);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 22px;
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 760;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 24px;
      height: 1px;
      background: currentColor;
      content: "";
    }

    h1 {
      max-width: 640px;
      margin: 0;
      font-size: clamp(48px, 5.1vw, 74px);
      font-weight: 740;
      letter-spacing: -0.064em;
      line-height: 0.98;
    }

    .hero-lede {
      max-width: 548px;
      margin: 28px 0 0;
      color: var(--muted);
      font-size: 18.5px;
      line-height: 1.58;
    }

    .hero-lede strong {
      color: var(--ink);
      font-weight: 650;
    }

    .hero-actions {
      display: flex;
      margin-top: 36px;
      align-items: stretch;
      gap: 12px;
    }

    .primary-cta {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 24px;
      border-radius: 12px;
      text-decoration: none;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.01em;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }

    .primary-cta {
      border: 1px solid var(--accent);
      background: var(--accent);
      color: #ffffff;
      box-shadow: 0 1px 2px rgba(10, 132, 255, 0.2), 0 12px 28px rgba(10, 132, 255, 0.24);
    }

    .primary-cta:hover {
      background: var(--accent-dark);
      border-color: var(--accent-dark);
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(10, 132, 255, 0.22), 0 18px 38px rgba(10, 132, 255, 0.28);
    }

    .primary-cta:active {
      transform: translateY(0);
    }

    .primary-cta svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
      transition: transform 0.18s ease;
    }

    .primary-cta:hover svg {
      transform: translateX(2px);
    }

    .hero-facts {
      display: flex;
      margin: 18px 0 0;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--quiet);
      font-size: 12.5px;
      font-weight: 500;
    }

    .hero-facts span:not(:last-child)::after {
      margin-left: 8px;
      color: #c7c7cc;
      content: "·";
    }

    /* ── Queue specimen ───────────────────────────────── */
    .queue-stage {
      position: relative;
    }

    .queue-glow {
      position: absolute;
      z-index: 0;
      inset: 6% 2% -4% 2%;
      border-radius: 40px;
      background: radial-gradient(58% 62% at 52% 38%, rgba(10, 132, 255, 0.13), rgba(10, 132, 255, 0) 72%);
      filter: blur(6px);
      pointer-events: none;
    }

    .queue-stage::after {
      position: absolute;
      z-index: 0;
      right: 9%;
      bottom: -3%;
      left: 9%;
      height: 46px;
      border-radius: 50%;
      background: rgba(31, 34, 46, 0.2);
      filter: blur(30px);
      content: "";
      pointer-events: none;
    }

    .queue-shell {
      position: relative;
      z-index: 1;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.8));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 1px rgba(31, 34, 46, 0.03),
        0 6px 14px rgba(31, 34, 46, 0.05),
        0 20px 40px rgba(31, 34, 46, 0.08),
        0 44px 90px rgba(31, 34, 46, 0.13);
      backdrop-filter: blur(18px);
    }

    .queue-window {
      overflow: hidden;
      border: 1px solid var(--hairline);
      border-radius: 14px;
      background: var(--page);
      box-shadow: 0 1px 2px rgba(31, 34, 46, 0.04);
    }

    .queue-header {
      display: flex;
      min-height: 58px;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      border-bottom: 1px solid var(--hairline);
      background: var(--surface);
    }

    .loop-brand {
      display: inline-flex;
      align-items: baseline;
      gap: 11px;
    }

    .loop-brand .brand-mark {
      color: var(--surface);
      font-size: 24px;
      letter-spacing: -0.03em;
      -webkit-text-stroke-color: var(--muted);
    }

    .loop-brand-word {
      color: var(--ink);
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .queue-header-actions {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .queue-pill {
      display: inline-flex;
      height: 30px;
      align-items: center;
      gap: 5px;
      padding: 0 12px 0 10px;
      border-radius: 7px;
      border: 0;
      background: var(--accent);
      color: #ffffff;
      font-size: 11px;
      font-weight: 600;
      box-shadow: 0 2px 6px rgba(10, 132, 255, 0.28);
    }

    .queue-pill svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2.2;
    }

    .queue-pill.blue {
      background: var(--accent);
    }

    .queue-grid {
      display: grid;
      gap: 13px;
      padding: 16px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zone {
      min-width: 0;
    }

    .zone-title {
      display: flex;
      margin: 0 0 9px;
      align-items: baseline;
      justify-content: flex-start;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .tasks {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .task-swipe-demo {
      position: relative;
      overflow: hidden;
      border-radius: 3px;
    }

    .swipe-demo-underlay {
      display: none;
    }

    .task {
      display: flex;
      min-height: 52px;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 3px;
      color: #1c1c1e;
      font-size: 11px;
      font-weight: 500;
      line-height: 1.25;
    }

    .task-label {
      min-width: 0;
      flex: 1;
    }

    .task.blue-1 {
      background: oklch(0.882 0.07 250);
    }

    .task.blue-2 {
      background: oklch(0.765 0.1 250);
    }

    .task.green-1 {
      background: oklch(0.882 0.07 150);
    }

    .task.green-2 {
      background: oklch(0.765 0.1 150);
    }

    .task.amber-1 {
      background: oklch(0.882 0.07 80);
    }

    .task.violet-1 {
      background: oklch(0.882 0.07 300);
    }

    .task.violet-2 {
      background: oklch(0.765 0.1 300);
    }

    .task.dark {
      background: oklch(0.35 0.06 250);
      color: #ffffff;
    }

    .task-action {
      display: inline-flex;
      width: 21px;
      height: 21px;
      flex: 0 0 21px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: oklch(0.35 0 0);
      color: #ffffff;
      font-size: 11px;
    }

    .task-marker {
      display: none;
    }

    .task.dark .task-action {
      background: #ffffff;
      color: #1c1c1e;
    }

    .task-action svg {
      width: 11px;
      height: 11px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }

    .swipe-demo-row {
      width: 100%;
    }

    .handled .task-label {
      opacity: 0.75;
      text-decoration: line-through;
    }

    .queue-callout {
      position: absolute;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 12px;
      border: 1px solid rgba(31, 34, 46, 0.06);
      border-radius: 999px;
      background: #ffffff;
      color: #3a3a3c;
      font-size: 11px;
      font-weight: 620;
      letter-spacing: 0.005em;
      white-space: nowrap;
      box-shadow: 0 6px 18px rgba(31, 34, 46, 0.14);
    }

    .queue-callout .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }

    .queue-callout::after {
      position: absolute;
      width: 1px;
      height: 15px;
      background: var(--muted);
      content: "";
    }

    .callout-position {
      top: -38px;
      left: 34px;
    }

    .callout-position::after {
      bottom: -10px;
      left: 18px;
      height: 10px;
    }

    .callout-tone {
      right: 24px;
      bottom: -38px;
    }

    .callout-tone .dot {
      background: oklch(0.56 0.09 250);
    }

    .callout-tone::after {
      top: -10px;
      right: 20px;
      height: 10px;
    }

    /* ── Principles ───────────────────────────────────── */
    .principles {
      padding: 112px 32px 118px;
      border-top: 1px solid rgba(31, 34, 46, 0.05);
      background: var(--surface);
    }

    .section-inner {
      max-width: 1180px;
      margin: 0 auto;
    }

    .section-kicker {
      margin: 0 0 15px;
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 760;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h2 {
      max-width: 760px;
      margin: 0;
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 730;
      letter-spacing: -0.048em;
      line-height: 1.06;
    }

    .section-intro {
      max-width: 660px;
      margin: 21px 0 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.62;
    }

    .principle-grid {
      display: grid;
      margin-top: 62px;
      gap: 18px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .principle {
      display: flex;
      min-height: 264px;
      flex-direction: column;
      padding: 22px 24px 26px;
      border: 1px solid var(--hairline);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: 0 1px 2px rgba(31, 34, 46, 0.03);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .principle:hover {
      transform: translateY(-3px);
      border-color: #dcdde2;
      box-shadow: 0 2px 4px rgba(31, 34, 46, 0.04), 0 16px 36px rgba(31, 34, 46, 0.09);
    }

    .principle-visual {
      display: flex;
      height: 92px;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      padding: 0 18px;
      border: 1px solid var(--hairline-soft);
      border-radius: 11px;
      background: linear-gradient(180deg, var(--surface-2), #f4f5f8);
    }

    .action-triad {
      display: flex;
      gap: 11px;
    }

    .action-triad span {
      display: inline-flex;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }

    .action-triad svg,
    .life-task svg {
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }

    .action-triad svg {
      width: 20px;
      height: 20px;
    }

    .action-triad span:first-child svg {
      stroke-width: 2.4;
    }

    .action-triad span:nth-child(1) {
      background: oklch(0.35 0 0);
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(28, 28, 30, 0.22);
    }

    .action-triad span:nth-child(2) {
      background: #5856d6;
      color: #ffffff;
    }

    .action-triad span:nth-child(3) {
      background: #ff9500;
      color: #ffffff;
    }

    .tone-scale {
      display: flex;
      width: 100%;
      gap: 6px;
    }

    .tone-scale span {
      height: 42px;
      flex: 1;
      border-radius: 6px;
    }

    .tone-scale span:nth-child(1) {
      background: oklch(0.95 0.03 250);
    }

    .tone-scale span:nth-child(2) {
      background: oklch(0.86 0.05 250);
    }

    .tone-scale span:nth-child(3) {
      background: oklch(0.72 0.08 250);
    }

    .tone-scale span:nth-child(4) {
      background: oklch(0.55 0.075 250);
    }

    .tone-scale span:nth-child(5) {
      background: oklch(0.35 0.07 250);
    }

    .mini-queue-focus {
      display: grid;
      width: 100%;
      align-items: stretch;
      gap: 7px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mini-zone {
      display: flex;
      min-width: 0;
      flex-direction: column;
      gap: 5px;
      padding: 7px;
      border: 1px solid transparent;
      border-radius: 5px;
      opacity: 0.38;
    }

    .mini-zone.is-today {
      border-color: rgba(10, 132, 255, 0.22);
      background: #ffffff;
      opacity: 1;
      box-shadow: 0 3px 10px rgba(31, 34, 46, 0.08);
    }

    .mini-zone-label {
      overflow: hidden;
      color: var(--muted);
      font-size: 7px;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .mini-zone.is-today .mini-zone-label {
      color: var(--accent-dark);
    }

    .mini-zone-row {
      height: 13px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 2px;
      background: oklch(0.765 0.1 250);
    }

    .mini-zone:not(.is-today) .mini-zone-row {
      background: #cfd3dc;
    }

    .mini-zone-row.short {
      width: 72%;
    }

    .mini-zone-row.done {
      position: relative;
    }

    .mini-zone-row.done::after {
      position: absolute;
      top: 50%;
      right: 7px;
      left: 7px;
      height: 1px;
      background: var(--muted);
      content: "";
    }

    .principle-number {
      color: var(--accent-dark);
      font-size: 11px;
      font-weight: 760;
      letter-spacing: 0.09em;
    }

    .principle h3 {
      margin: 8px 0 8px;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.026em;
      line-height: 1.25;
    }

    .principle p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.56;
    }

    /* ── Lifecycle ────────────────────────────────────── */
    .lifecycle {
      padding: 112px 32px 120px;
      background: #eceef2;
    }

    .lifecycle-layout {
      display: grid;
      margin-top: 58px;
      gap: 18px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .life-step {
      position: relative;
      display: flex;
      min-height: 224px;
      flex-direction: column;
      padding: 24px;
      border: 1px solid rgba(31, 34, 46, 0.06);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: 0 1px 2px rgba(31, 34, 46, 0.04), 0 10px 26px rgba(31, 34, 46, 0.05);
    }

    .life-step:not(:last-child)::after {
      position: absolute;
      z-index: 2;
      top: 50%;
      right: -27px;
      display: flex;
      width: 34px;
      height: 34px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--hairline);
      border-radius: 50%;
      background: var(--surface);
      color: var(--quiet);
      content: "→";
      font-size: 15px;
      transform: translateY(-50%);
      box-shadow: 0 4px 12px rgba(31, 34, 46, 0.1);
    }

    .life-label {
      display: inline-flex;
      align-self: flex-start;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 10px;
      font-weight: 760;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .life-task {
      display: flex;
      min-height: 64px;
      margin: 20px 0 22px;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 3px;
      background: oklch(0.882 0.07 150);
      color: #1c1c1e;
      font-size: 13px;
      font-weight: 500;
    }

    .life-task-head {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 8px;
    }

    .life-task-name {
      min-width: 0;
      flex: 1;
    }

    .life-task-name.done {
      opacity: 0.75;
      text-decoration: line-through;
    }

    .life-task-actions {
      display: inline-flex;
      flex: none;
      align-items: center;
      gap: 4px;
    }

    .life-action {
      display: inline-flex;
      width: 24px;
      height: 24px;
      flex: none;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: oklch(0.35 0 0);
      color: #ffffff;
    }

    .life-action svg {
      width: 13px;
      height: 13px;
    }

    .life-task-meta {
      font-size: 10.5px;
      font-weight: 400;
      opacity: 0.75;
    }

    .life-task-meta-placeholder {
      visibility: hidden;
    }

    .life-task.complete {
      background: oklch(0.765 0.1 150);
    }

    .life-task.returning {
      background: oklch(0.882 0.07 150);
    }

    .life-handled-marker {
      width: 17px;
      height: 17px;
      flex: none;
      opacity: 0.9;
      stroke-width: 2.6 !important;
    }

    .life-task-state {
      flex: none;
      color: #1c1c1e;
      font-size: 10.5px;
      font-weight: 400;
      line-height: 1.2;
      opacity: 0.7;
      text-align: center;
      white-space: nowrap;
    }

    .life-step h3 {
      margin: auto 0 7px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.022em;
    }

    .life-step p {
      margin: 0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.52;
    }

    /* ── Access ───────────────────────────────────────── */
    .access {
      padding: 112px 32px 116px;
      background: var(--ink);
      color: #ffffff;
    }

    .access-inner {
      display: grid;
      max-width: 1180px;
      margin: 0 auto;
      align-items: center;
      gap: 64px;
      grid-template-columns: 1fr 0.92fr;
    }

    .access .section-kicker {
      color: #7dbbff;
    }

    .access h2 {
      max-width: 600px;
    }

    .access-copy {
      max-width: 560px;
      margin: 21px 0 0;
      color: #b9bbc2;
      font-size: 16px;
      line-height: 1.62;
    }

    .access-card {
      padding: 10px 26px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.3);
    }

    .access-mode {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 22px 0;
    }

    .access-mode + .access-mode {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .access-mode-title {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 15px;
      font-weight: 690;
      letter-spacing: -0.01em;
    }

    .access-mode-title::before {
      width: 7px;
      height: 7px;
      flex: none;
      border-radius: 50%;
      background: #81c995;
      box-shadow: 0 0 0 3px rgba(129, 201, 149, 0.18);
      content: "";
    }

    .access-mode.invite-mode .access-mode-title::before {
      background: #6f7178;
      box-shadow: 0 0 0 3px rgba(111, 113, 120, 0.16);
    }

    .access-mode.telegram-mode .access-mode-title::before {
      background: #7dbbff;
      box-shadow: 0 0 0 3px rgba(125, 187, 255, 0.18);
    }

    .access-mode-detail {
      display: block;
      margin-top: 6px;
      padding-left: 16px;
      color: #9fa1a9;
      font-size: 12.5px;
      line-height: 1.4;
    }

    .access-mode-state {
      flex: none;
      color: #81c995;
      font-size: 11px;
      font-weight: 740;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .access-mode-state.invite {
      color: #aeb0b7;
    }

    .access-mode-state.access-link {
      text-decoration: none;
    }

    .access-mode-state.access-link:hover,
    .access-mode-state.access-link:focus-visible {
      color: #b4e3bf;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .access-mode-state.telegram-link {
      color: #7dbbff;
    }

    .access-mode-state.telegram-link:hover,
    .access-mode-state.telegram-link:focus-visible {
      color: #b6d8ff;
    }

    /* ── Bigger picture (deliberately quiet) ──────────── */
    .bigger-picture {
      padding: 92px 32px 96px;
      border-top: 1px solid var(--hairline);
      background: #ffffff;
    }

    .bigger-picture .section-inner {
      max-width: 800px;
    }

    .bigger-picture h2 {
      max-width: none;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.3;
    }

    .bigger-picture-copy {
      max-width: 720px;
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 16.5px;
      line-height: 1.68;
    }

    .bigger-picture-copy strong {
      color: var(--ink);
      font-weight: 660;
    }

    /* ── Footer ───────────────────────────────────────── */
    .site-footer {
      display: flex;
      min-height: 110px;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      padding: 30px max(32px, calc((100% - 1180px) / 2));
      border-top: 1px solid #2d2d31;
      background: var(--ink);
      color: #8f9198;
      font-size: 11.5px;
    }

    .footer-facts {
      max-width: 540px;
      line-height: 1.6;
    }

    .footer-facts span {
      display: block;
    }

    .footer-links {
      display: flex;
      flex: none;
      gap: 20px;
    }

    .footer-links a {
      color: #bfc1c8;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

    /* Deck teaser — a live miniature of the deck's title card, linking to /deck/loop.html */
    .deck-teaser {
      padding: 112px 32px 124px;
      border-top: 1px solid rgba(31, 34, 46, 0.05);
      background: var(--page);
    }

    .deck-teaser-layout {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 64px;
      flex-wrap: wrap;
    }

    .deck-teaser-text {
      flex: 1 1 420px;
      min-width: 0;
    }

    .deck-mini {
      position: relative;
      display: inline-block;
      width: 376px;
      height: 240px;
      flex: 0 0 auto;
      text-decoration: none;
      transition: transform 220ms ease;
    }

    .deck-mini:hover {
      transform: translateY(-6px);
    }

    .dm-peek {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background: #ffffff;
      border: 1px solid var(--hairline);
      border-radius: 11px;
      height: 26px;
    }

    .dm-peek-1 { width: 94%; bottom: -7px; z-index: 1; }
    .dm-peek-2 { width: 87%; bottom: -13px; z-index: 0; }

    .dm-frame {
      position: relative;
      z-index: 2;
      display: block;
      width: 376px;
      height: 240px;
      border-radius: 11px;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid var(--hairline);
      box-shadow:
        0 20px 38px -18px rgba(0, 0, 0, 0.3),
        0 7px 15px -8px rgba(0, 0, 0, 0.14);
      transition: box-shadow 220ms ease;
    }

    .deck-mini:hover .dm-frame {
      box-shadow:
        0 28px 48px -20px rgba(0, 0, 0, 0.36),
        0 10px 20px -9px rgba(0, 0, 0, 0.17);
    }

    .dm-scale {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 940px;
      height: 600px;
      transform: scale(0.4);
      transform-origin: top left;
    }

    .dm-card {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 52px;
      padding: 0 64px;
      box-sizing: border-box;
      text-align: left;
    }

    .dm-txt {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .dm-h1 {
      font-size: 40px;
      font-weight: 700;
      letter-spacing: -0.015em;
      line-height: 1.1;
      color: #1c1b1f;
      margin: 0 0 14px;
    }

    .dm-tagline {
      font-size: 24px;
      color: #6d6a72;
      margin: 0 0 26px;
    }

    .dm-p {
      font-size: 18.5px;
      line-height: 1.5;
      color: #1c1b1f;
      margin: 0 0 12px;
    }

    .dm-url {
      font-size: 18.5px;
      font-weight: 550;
      color: #0a84ff;
    }

    /* the app icon, rendered live from its 1024px HTML source (same as the deck) */
    .dm-logo {
      position: relative;
      width: 190px;
      height: 190px;
      border-radius: 22.5%;
      overflow: hidden;
      flex: 0 0 auto;
      box-shadow:
        0 26px 44px -18px rgba(0, 0, 0, 0.42),
        0 10px 18px -8px rgba(0, 0, 0, 0.22);
    }

    .dm-src {
      position: absolute;
      top: 0;
      left: 0;
      display: grid;
      place-items: center;
      width: 1024px;
      height: 1024px;
      transform: scale(0.185546875);
      transform-origin: top left;
      background:
        radial-gradient(circle at 24% 17%, #d8eaf7 0%, transparent 36%),
        linear-gradient(155deg, #b8d8ef 0%, #92bee0 44%, #537fa3 100%);
      box-shadow:
        inset 4.88px 4.88px 4.88px rgb(255 255 255 / 26%),
        inset -7.31px -9.75px 19.5px rgb(53 56 62 / 7%);
    }

    .dm-src .disc {
      position: absolute;
      inset: 176px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 28% 22%, rgb(255 255 255 / 58%) 0%, transparent 34%),
        linear-gradient(155deg, #ffffff 0%, #f7f7f5 46%, #d9e7ef 100%);
      box-shadow:
        inset 4.88px 4.88px 4.88px rgb(255 255 255 / 60%),
        inset -7.31px -9.75px 17.07px rgb(53 56 62 / 7%),
        0 24.38px 63.39px rgb(53 56 62 / 12%);
    }

    .dm-src .artwork {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      transform: translateY(-55px);
    }

    .dm-src .mark {
      position: relative;
      z-index: 1;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 480px;
      font-style: italic;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1;
      margin-left: -20.8px;
      padding: 0 43.89px;
      color: transparent;
      background: linear-gradient(150deg, #ffffff 0%, #f8fcff 34%, #e2eef5 70%, #bfd6e4 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 16px #35383e;
      filter:
        drop-shadow(0 7.31px 4.88px rgb(53 56 62 / 48%))
        drop-shadow(0 17.07px 17.07px rgb(53 56 62 / 30%))
        drop-shadow(0 31.7px 41.45px rgb(53 56 62 / 15%));
    }

    .dm-src .dot-ph {
      visibility: hidden;
    }

    .dm-src .mark-dot {
      position: absolute;
      z-index: 2;
      top: calc(50% + 55px);
      left: 50%;
      width: 102.4px;
      height: 102.4px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 16px solid #35383e;
      background: radial-gradient(circle at 28% 22%, #c9e2f3 0%, #92bee0 48%, #577f9f 100%);
      box-shadow:
        inset 2.44px 2.44px 2.44px rgb(255 255 255 / 24%),
        0 7.31px 7.31px rgb(53 56 62 / 45%),
        0 17.07px 19.5px rgb(53 56 62 / 28%),
        0 31.7px 41.45px rgb(53 56 62 / 15%);
    }

    @media (max-width: 430px) {
      .deck-mini,
      .dm-frame {
        width: 320px;
        height: 204px;
      }

      .dm-scale {
        transform: scale(0.3404);
      }
    }