:root {
        --deck-padding-x: min(6vw, 80px);
        --deck-padding-y: min(5vw, 68px);
        --deck-padding: var(--deck-padding-x);
        --deck-radius: 18px;
        --deck-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
        --deck-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.08);
        --deck-glow: 0 0 0 10px rgba(9, 152, 168, 0.08);
        --deck-max: 1600px;
      }

      body {
        background: var(--gradient-set-1);
      }

      code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.9em;
        border-radius: 10px;
        padding: 0.08em 0.35em;
        background: rgba(41, 28, 91, 0.06);
        border: 1px solid rgba(41, 28, 91, 0.08);
      }

      /* Deck shell */
      .deck {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: min(4vw, 40px);
      }

      .frame {
        width: min(var(--deck-max), 100%);
        height: auto;
        max-height: calc(100vh - min(8vw, 80px));
        border-radius: var(--deck-radius);
        overflow: hidden;
        background: #fff;
        box-shadow: var(--deck-shadow);
        border: 1px solid var(--clr-border);
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
      }

      .frame::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(900px 500px at 18% 12%, rgba(233, 184, 15, 0.24), transparent 60%),
          radial-gradient(900px 500px at 86% 28%, rgba(9, 152, 168, 0.18), transparent 60%),
          linear-gradient(180deg, rgba(230, 244, 246, 0.75), rgba(255, 255, 255, 0.6));
        z-index: -1;
      }

      .frame::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
        background-size: 120px 1px;
        opacity: 0.35;
        pointer-events: none;
        z-index: -1;
      }

      /* Top bar */
      .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 22px;
        border-bottom: 1px solid var(--clr-border);
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
      }

      .brandline {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
      }

      .brandline__logo {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 100%;
        background: #fff;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.06);
      }

      .brandline__logo img {
        width: 90%;
        height: auto;
      }

      .brandline__meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }

      .brandline__title {
        font-family: Overpass, sans-serif;
        font-weight: 800;
        letter-spacing: 0.01em;
        font-size: 16px;
        color: var(--clr-purple);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .brandline__subtitle {
        font-size: 12px;
        letter-spacing: 0.04em;
        color: var(--clr-text-light);
      }

      .topbar__right {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .chip {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        height: 34px;
        padding-inline: 14px;
        border-radius: 999px;
        background: rgba(9, 152, 168, 0.1);
        color: var(--clr-set-1);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.06em;
        border: 1px solid rgba(9, 152, 168, 0.15);
      }

      .chip::before {
        content: "\e92f";
        font-size: 14px;
        color: var(--clr-set-2);
      }

      .navbtn {
        min-height: 40px !important;
        padding-inline: 16px !important;
        border-radius: 999px !important;
      }

      /* Slides */
      .slides {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
      }

      .slide {
        position: relative;
        padding: var(--deck-padding-y) var(--deck-padding-x);
        display: none;
        grid-template-columns: 1.05fr 0.95fr;
        gap: min(4vw, 56px);
        min-width: 0;
      }

      .slide.is-active {
        display: grid;
      }

      .slide--center {
        grid-template-columns: 1fr;
      }

      .kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(233, 184, 15, 0.22);
        border: 1px solid rgba(233, 184, 15, 0.25);
        font-weight: 900;
        letter-spacing: 0.08em;
        color: var(--clr-purple);
        font-size: 12px;
        width: fit-content;
      }

      .kicker::before {
        content: "\e924";
        color: var(--clr-set-1);
        font-size: 14px;
      }

      .hero-title {
        font-family: Overpass, sans-serif;
        font-weight: 900;
        letter-spacing: 0.01em;
        line-height: 0.95;
        margin: 18px 0 12px;
        font-size: clamp(46px, 5.5vw, 78px);
        color: var(--clr-purple);
      }

      .hero-title em {
        font-style: normal;
        color: var(--clr-set-1);
      }

      .lede {
        font-size: clamp(16px, 1.25vw, 20px);
        line-height: 1.5;
        color: rgba(0, 0, 0, 0.72);
        max-width: 70ch;
        margin: 0 0 18px;
      }

      .lede strong {
        color: var(--clr-purple);
      }

      .cta-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 16px;
      }

      .grid {
        display: grid;
        gap: 16px;
        min-width: 0;
      }

      .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        min-width: 0;
      }

      .split--3 {
        grid-template-columns: repeat(3, 1fr);
      }

      .panel {
        border-radius: 16px;
        padding: 18px 18px 16px;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
        min-width: 0;
      }

      .panel--tint {
        background: linear-gradient(180deg, rgba(233, 184, 15, 0.18), rgba(255, 255, 255, 0.92));
      }

      .panel__title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 8px;
      }

      .panel__title::before {
        content: "\e917";
        color: var(--clr-set-1);
        font-size: 18px;
      }

      .hintline {
        display: flex;
        gap: 10px;
        align-items: baseline;
        color: rgba(0, 0, 0, 0.68);
        font-size: 14px;
        line-height: 1.45;
      }

      .hintline::before {
        content: "\e92c";
        color: var(--clr-set-2);
        font-size: 14px;
      }

      /* Right visual */
      .visual {
        position: relative;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, rgba(9, 152, 168, 0.12), rgba(233, 184, 15, 0.12));
        align-self: stretch;
        min-width: 0;
      }

      .visual__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(1.05) contrast(1.03);
      }

      .visual__cut {
        position: absolute;
        inset: 0;
        clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%, 0 12%);
        background: rgba(41, 28, 91, 0.25);
        mix-blend-mode: multiply;
      }

      .visual__badge {
        position: absolute;
        left: 16px;
        bottom: 16px;
        right: 16px;
        padding: 16px 16px 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(10px);
      }

      .badge__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
      }

      .badge__title h3 {
        margin: 0;
        font-size: 16px;
      }

      .badge__title .tag {
        font-size: 12px;
      }

      .badge__list {
        display: grid;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .badge__list li {
        display: flex;
        gap: 10px;
        align-items: baseline;
        color: rgba(0, 0, 0, 0.7);
        font-size: 14px;
      }

      .badge__list li::before {
        content: "\e91a";
        color: var(--clr-set-1);
        font-size: 14px;
      }

      /* Mermaid diagrams */
      .diagram {
        border-radius: 18px;
        padding: 16px 16px 12px;
        background:
          radial-gradient(900px 360px at 14% 4%, rgba(233, 184, 15, 0.12), transparent 62%),
          radial-gradient(900px 360px at 86% 0%, rgba(9, 152, 168, 0.1), transparent 62%),
          rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
        min-height: 0;
        overflow: hidden;
      }

      .diagram__cap {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
      }

      .diagram__cap strong {
        color: var(--clr-purple);
        font-size: 12px;
        letter-spacing: 0.08em;
      }

      .diagram__cap span {
        color: rgba(0, 0, 0, 0.55);
        font-size: 12px;
      }

      .diagram .mermaid {
        display: grid;
        place-items: center;
        min-height: 0;
      }

      .diagram svg {
        width: 100%;
        height: auto;
        max-height: 100%;
      }

      .diagram--xl {
        padding: 14px 14px 10px;
      }

      .diagram--xl .mermaid svg {
        transform: scale(1.06);
        transform-origin: 50% 0%;
      }

      /* Pills */
      .pillset {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 12px;
      }

      .pill2 {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid rgba(41, 28, 91, 0.12);
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
        font-weight: 800;
        font-size: 12px;
        letter-spacing: 0.06em;
        color: rgba(0, 0, 0, 0.7);
      }

      .pill2::before {
        content: "\e91a";
        color: var(--clr-set-1);
      }

      .pill2--warn::before {
        content: "\e934";
        color: var(--clr-set-2);
      }

      .pill2--ctrl::before {
        content: "\e92f";
        color: var(--clr-purple);
      }

      .mono-card {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        line-height: 1.4;
        border-radius: 16px;
        border: 1px solid rgba(41, 28, 91, 0.08);
        background: rgba(41, 28, 91, 0.045);
        padding: 14px 14px 12px;
        color: rgba(0, 0, 0, 0.78);
      }

      .mono-card strong {
        font-family: Overpass, sans-serif;
        font-size: 12px;
        letter-spacing: 0.08em;
        color: var(--clr-purple);
      }

      /* Big quote */
      .big-quote {
        position: relative;
        padding: min(6vw, 78px);
        border-radius: 22px;
        background:
          radial-gradient(800px 450px at 24% 30%, rgba(233, 184, 15, 0.26), transparent 62%),
          radial-gradient(800px 450px at 80% 18%, rgba(9, 152, 168, 0.2), transparent 62%),
          rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: var(--deck-shadow);
      }

      .big-quote::before {
        content: "\e92e";
        position: absolute;
        top: 22px;
        left: 22px;
        color: rgba(41, 28, 91, 0.18);
        font-size: 34px;
      }

      .big-quote__text {
        font-family: Overpass, sans-serif;
        font-weight: 900;
        letter-spacing: 0.01em;
        line-height: 1.05;
        font-size: clamp(34px, 3.2vw, 48px);
        color: var(--clr-purple);
        margin: 0 0 18px;
      }

      .big-quote__text mark {
        background: rgba(233, 184, 15, 0.22);
        border-radius: 12px;
        padding: 0.05em 0.25em;
      }

      /* Bottom controls */
      .bottombar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.92));
      }

      .progress {
        flex: 1;
        height: 10px;
        border-radius: 999px;
        overflow: hidden;
        background: rgba(41, 28, 91, 0.08);
        border: 1px solid rgba(41, 28, 91, 0.1);
      }

      .progress__bar {
        height: 100%;
        width: 0%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--clr-set-1), var(--clr-set-2));
        box-shadow: var(--deck-glow);
        transition: width 180ms ease;
      }

      .pager {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        letter-spacing: 0.06em;
        color: rgba(0, 0, 0, 0.65);
        font-weight: 800;
      }

      .pager strong {
        color: var(--clr-purple);
      }

      /* Responsive (still 16:9) */
      @media (max-width: 980px) {
        .brandline__subtitle {
          display: none;
        }

        .slide {
          grid-template-columns: 1fr;
        }

        .visual {
          display: none;
        }

        .split {
          grid-template-columns: 1fr;
        }

        .split--3 {
          grid-template-columns: 1fr;
        }
      }