:root {
        color-scheme: dark;
        --ink: #11100d;
        --ink-2: #17262b;
        --paper: #fffaf0;
        --muted: #c8bcab;
        --teal: #4fd7c5;
        --amber: #ffbd54;
        --coral: #f06a4d;
        --green: #94d67a;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        background: var(--ink);
        color: var(--paper);
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
      }

      #root {
        position: relative;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background: var(--ink);
      }

      .clip {
        position: absolute;
        inset: 0;
      }

      #frame-bed {
        z-index: 0;
        background:
          radial-gradient(circle at 82% 18%, rgba(79, 215, 197, 0.36), transparent 430px),
          radial-gradient(circle at 16% 80%, rgba(255, 189, 84, 0.24), transparent 400px),
          linear-gradient(135deg, #11100d 0%, #17262b 58%, #241813 100%);
      }

      #frame-bed::before {
        position: absolute;
        inset: 0;
        content: "";
        background:
          linear-gradient(rgba(255, 250, 240, 0.07) 2px, transparent 2px),
          linear-gradient(90deg, rgba(255, 250, 240, 0.07) 2px, transparent 2px);
        background-size: 72px 72px;
        opacity: 0.48;
      }

      #frame-bed::after {
        position: absolute;
        right: 90px;
        bottom: 72px;
        width: 470px;
        height: 470px;
        border: 4px solid rgba(79, 215, 197, 0.36);
        border-radius: 999px;
        content: "";
      }

      .scene {
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.72fr);
        gap: 76px;
        align-items: center;
        padding: 118px 132px;
        opacity: 0;
      }

      .kicker {
        color: var(--amber);
        font-size: 30px;
        font-weight: 950;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      h1,
      h2 {
        margin: 26px 0 0;
        color: var(--paper);
        font-size: 106px;
        font-weight: 950;
        letter-spacing: 0;
        line-height: 0.94;
      }

      h2 {
        font-size: 84px;
      }

      p {
        max-width: 980px;
        margin: 30px 0 0;
        color: var(--muted);
        font-size: 40px;
        font-weight: 680;
        letter-spacing: 0;
        line-height: 1.24;
      }

      .metric-board,
      .stack-board,
      .curve-board,
      .handoff-board {
        min-height: 620px;
        border: 3px solid rgba(255, 250, 240, 0.18);
        border-radius: 8px;
        padding: 42px;
        background: rgba(17, 16, 13, 0.7);
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.24);
      }

      .metric-board {
        display: grid;
        align-content: center;
        gap: 30px;
      }

      .metric {
        border: 2px solid rgba(79, 215, 197, 0.35);
        border-radius: 8px;
        padding: 28px;
        background: rgba(79, 215, 197, 0.13);
      }

      .metric strong {
        display: block;
        color: var(--teal);
        font-size: 66px;
        line-height: 0.95;
      }

      .metric span {
        display: block;
        margin-top: 14px;
        color: var(--paper);
        font-size: 27px;
        font-weight: 850;
      }

      .stack-board {
        display: grid;
        gap: 24px;
      }

      .stack-row {
        display: grid;
        grid-template-columns: 270px 1fr;
        gap: 24px;
        align-items: center;
        border: 2px solid rgba(255, 250, 240, 0.16);
        border-radius: 8px;
        padding: 24px;
        background: rgba(23, 38, 43, 0.86);
      }

      .stack-row strong {
        color: var(--teal);
        font-size: 34px;
        line-height: 1.02;
      }

      .stack-row span {
        color: var(--muted);
        font-size: 28px;
        font-weight: 720;
        line-height: 1.18;
      }

      .bar-list {
        display: grid;
        gap: 22px;
      }

      .bar-row {
        display: grid;
        grid-template-columns: 270px 1fr 92px;
        gap: 24px;
        align-items: center;
        color: var(--paper);
        font-size: 29px;
        font-weight: 850;
      }

      .bar-track {
        height: 34px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 250, 240, 0.12);
      }

      .bar-fill {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--coral), var(--amber), var(--teal));
      }

      .bar-fill--prompt {
        width: 28%;
      }

      .bar-fill--vector {
        width: 62%;
      }

      .bar-fill--rag {
        width: 55%;
      }

      .bar-fill--skill {
        width: 92%;
      }

      .curve-board {
        position: relative;
        overflow: hidden;
      }

      .curve-line {
        position: absolute;
        left: 70px;
        right: 70px;
        bottom: 120px;
        height: 330px;
        border-bottom: 5px solid rgba(255, 250, 240, 0.28);
        border-left: 5px solid rgba(255, 250, 240, 0.28);
      }

      .curve-line::before,
      .curve-line::after {
        position: absolute;
        left: 70px;
        right: 24px;
        content: "";
        transform-origin: left center;
      }

      .curve-line::before {
        bottom: 54px;
        height: 5px;
        background: rgba(240, 106, 77, 0.86);
        transform: rotate(-6deg);
      }

      .curve-line::after {
        bottom: 68px;
        height: 145px;
        border-top: 7px solid var(--teal);
        border-right: 7px solid var(--teal);
        border-radius: 0 180px 0 0;
        transform: skewX(-16deg);
      }

      .curve-labels {
        position: absolute;
        inset: auto 70px 54px;
        display: flex;
        justify-content: space-between;
        color: var(--muted);
        font-size: 25px;
        font-weight: 850;
      }

      .handoff-board {
        display: grid;
        align-content: center;
        gap: 24px;
      }

      .handoff-item {
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 24px;
        align-items: center;
      }

      .handoff-item span:first-child {
        display: grid;
        width: 72px;
        height: 72px;
        place-items: center;
        border-radius: 999px;
        background: var(--teal);
        color: var(--ink);
        font-size: 32px;
        font-weight: 950;
      }

      .handoff-item span:last-child {
        color: var(--paper);
        font-size: 33px;
        font-weight: 880;
        line-height: 1.15;
      }

      .frame-meta {
        position: absolute;
        z-index: 4;
        top: 48px;
        right: 64px;
        display: flex;
        gap: 16px;
      }

      .frame-meta span {
        border: 2px solid rgba(255, 250, 240, 0.18);
        border-radius: 8px;
        padding: 14px 18px;
        background: rgba(17, 16, 13, 0.46);
        color: var(--muted);
        font-size: 22px;
        font-weight: 900;
      }