:root {
      --bg: #0a0d0b;
      --panel: #0d120f;
      --white: #f4f8f3;
      --muted: #809086;
      --green: #6cff83;
      --line: rgba(244, 248, 243, .14);
      --line-strong: rgba(244, 248, 243, .22);
      --header-height: 36px;
    }

    * { box-sizing: border-box; }

    html,
    body {
      width: 100%;
      height: 100%;
      min-height: 100%;
      margin: 0;
      overflow: hidden;
      background: var(--bg);
      overscroll-behavior: none;
    }

    body {
      color: var(--white);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    button {
      font: inherit;
    }

    .lab-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 50;
      height: var(--header-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 0 clamp(12px, 2.4vw, 34px);
      border-bottom: 1px solid var(--line);
      background: rgba(10, 13, 11, .92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo,
        Consolas, monospace;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .lab-title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lab-brand {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 12px;
    }

    .lab-back {
      flex: 0 0 auto;
      padding: 6px 7px;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 8px;
      letter-spacing: .08em;
      text-decoration: none;
      transition: color .16s ease, border-color .16s ease, background .16s ease;
    }

    .lab-back:hover,
    .lab-back:focus-visible {
      border-color: rgba(108, 255, 131, .52);
      color: var(--green);
      background: rgba(108, 255, 131, .055);
      outline: none;
    }

    .lab-title span {
      color: var(--green);
    }

    .lab-header-state {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      color: var(--muted);
      font-weight: 600;
    }

    .lab-header-state [data-current-name] {
      max-width: 34vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lab-header-state [data-current-index] {
      color: var(--white);
      white-space: nowrap;
    }

    .page {
      height: 100svh;
      min-height: 100%;
      display: grid;
      place-items: center;
      padding:
        calc(var(--header-height) + 12px)
        clamp(76px, 8vw, 122px)
        14px
        clamp(12px, 3vw, 42px);
    }

    .feed-shell {
      position: relative;
      width: min(940px, 100%);
      height: min(820px, calc(100svh - var(--header-height) - 26px));
      min-height: 500px;
      isolation: isolate;
    }

    .experiments {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .experiment {
      position: absolute;
      inset: 0;
      min-width: 0;
      min-height: 0;
      opacity: 0;
      transform: translate3d(0, 8%, 0) scale(.985);
      transform-origin: 50% 50%;
      pointer-events: none;
      z-index: 0;
      transition:
        opacity .24s ease,
        transform .38s cubic-bezier(.2, .75, .25, 1);
      will-change: opacity, transform;
    }

    .experiment.is-before {
      transform: translate3d(0, -8%, 0) scale(.985);
    }

    .experiment.is-active {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      pointer-events: auto;
      z-index: 2;
    }

    .experiment > * {
      display: block;
      width: 100%;
      height: 100%;
    }

    .feed-nav {
      position: fixed;
      z-index: 80;
      top: calc(50% + var(--header-height) / 2);
      right: clamp(10px, 2.2vw, 32px);
      translate: 0 -50%;
      width: 48px;
      display: grid;
      justify-items: center;
      gap: 9px;
      padding: 8px 5px;
      border: 1px solid var(--line);
      background: rgba(13, 18, 15, .82);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      pointer-events: auto;
      touch-action: manipulation;
    }

    .feed-arrow,
    .feed-dot {
      appearance: none;
      border: 0;
      color: var(--white);
      background: transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .feed-arrow {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line-strong);
      font: 500 21px/1 ui-monospace, SFMono-Regular, Menlo,
        Consolas, monospace;
      transition:
        color .16s ease,
        border-color .16s ease,
        background .16s ease,
        opacity .16s ease;
      touch-action: manipulation;
    }

    .feed-arrow:hover:not(:disabled),
    .feed-arrow:focus-visible {
      color: var(--green);
      border-color: rgba(108, 255, 131, .52);
      background: rgba(108, 255, 131, .055);
      outline: none;
    }

    .feed-arrow:active:not(:disabled) {
      translate: 0 1px;
    }

    .feed-arrow:disabled {
      opacity: .25;
      cursor: default;
    }

    .feed-position {
      display: flex;
      align-items: baseline;
      gap: 3px;
      color: var(--muted);
      font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo,
        Consolas, monospace;
      letter-spacing: .05em;
    }

    .feed-position strong {
      color: var(--white);
      font-size: 11px;
    }

    .feed-dots {
      display: grid;
      gap: 7px;
      padding: 2px 0;
    }

    .feed-dot {
      width: 7px;
      height: 7px;
      padding: 0;
      border: 1px solid rgba(244, 248, 243, .36);
      transition:
        height .18s ease,
        border-color .18s ease,
        background .18s ease;
    }

    .feed-dot:hover,
    .feed-dot:focus-visible {
      border-color: var(--green);
      outline: none;
    }

    .feed-dot.is-active {
      height: 18px;
      border-color: var(--green);
      background: var(--green);
    }

    .feed-key-hint {
      color: var(--muted);
      font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo,
        Consolas, monospace;
      letter-spacing: .08em;
    }

    .feed-announcer {
      position: fixed;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }

    @media (max-width: 700px) {
      .page {
        padding:
          calc(var(--header-height) + 8px)
          8px
          8px;
      }

      .feed-shell {
        width: 100%;
        height: calc(100svh - var(--header-height) - 16px);
        min-height: 470px;
      }

      .feed-nav {
        right: 8px;
        width: 44px;
        padding-inline: 4px;
        background: rgba(10, 13, 11, .74);
      }

      .feed-arrow {
        width: 34px;
        height: 34px;
      }

      .lab-header-state [data-current-name] {
        display: none;
      }
    }

    @media (max-width: 420px) {
      .lab-header {
        padding-inline: 10px;
        letter-spacing: .08em;
      }

      .feed-nav {
        right: 6px;
      }

      .feed-key-hint {
        display: none;
      }

      .lab-back {
        padding: 5px;
        font-size: 0;
      }

      .lab-back::first-letter {
        font-size: 13px;
      }

      .lab-brand { gap: 8px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .experiment,
      .feed-dot,
      .feed-arrow {
        transition: none;
      }
    }