* { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      overflow: hidden;
      font-family: var(--kb-font-sans);
      background: var(--kb-stage-background);
      color: var(--ink);
    }

    .stage {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    .stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent 0 49px, rgba(255,255,255,.035) 50px),
        linear-gradient(0deg, transparent 0 49px, rgba(255,255,255,.025) 50px);
      background-size: 50px 50px;
      mask-image: radial-gradient(circle at center, black, transparent 74%);
      pointer-events: none;
    }

    .deck {
      position: relative;
      width: var(--kb-deck-width);
      height: var(--kb-deck-height);
      aspect-ratio: var(--kb-deck-aspect-ratio);
      border: var(--kb-deck-border);
      border-radius: var(--kb-deck-radius);
      overflow: hidden;
      background: var(--kb-deck-background);
      box-shadow: var(--kb-deck-shadow);
    }

    .deck::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--kb-deck-overlay);
      pointer-events: none;
      z-index: var(--kb-layer-overlay);
    }

    .hud {
      position: absolute;
      z-index: var(--kb-layer-hud);
      inset: var(--kb-deck-header-y) var(--kb-deck-gutter) auto;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: var(--kb-hud-gap);
      color: var(--kb-text-meta);
      font-size: var(--kb-font-size-hud);
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .hud .center { text-align: center; }
    .hud .right { text-align: right; }

    .hud-line {
      position: absolute;
      z-index: var(--kb-layer-rule);
      top: var(--kb-deck-rule-y);
      left: var(--kb-deck-gutter);
      right: var(--kb-deck-gutter);
      height: 1px;
      background: var(--line);
    }

    .progress {
      position: absolute;
      z-index: var(--kb-layer-progress);
      top: var(--kb-deck-rule-y);
      left: var(--kb-deck-gutter);
      height: 2px;
      width: calc((100% - (var(--kb-deck-gutter) * 2)) / var(--slide-count, 30));
      background: var(--blue);
      transform-origin: left center;
      transition: transform var(--kb-motion-progress) var(--kb-motion-ease), background-color var(--kb-motion-color) var(--kb-motion-ease);
    }

    .viewport {
      position: absolute;
      inset: var(--kb-viewport-inset);
      display: grid;
      grid-template-columns: var(--kb-viewport-columns);
      gap: var(--kb-viewport-gap);
      align-items: center;
      z-index: var(--kb-layer-viewport);
    }

    .copy {
      position: relative;
      min-width: 0;
      z-index: var(--kb-layer-copy);
    }

    .slide-copy {
      position: absolute;
      inset: 0 auto auto 0;
      max-width: var(--kb-copy-max-width);
      opacity: 0;
      transform: translateY(24px) scale(.98);
      filter: blur(5px);
      transition: opacity var(--kb-motion-copy-fade) var(--kb-motion-ease), transform var(--kb-motion-copy-move) var(--kb-motion-ease), filter var(--kb-motion-copy-fade) var(--kb-motion-ease);
      pointer-events: none;
    }

    .slide-copy.active {
      position: relative;
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
      pointer-events: auto;
    }

    .slide-copy.exiting {
      opacity: 0;
      transform: translateY(-18px) scale(.985);
      filter: blur(4px);
    }

    .label {
      display: inline-flex;
      gap: var(--kb-label-gap);
      align-items: center;
      color: var(--muted);
      font-size: var(--kb-font-size-label);
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-bottom: var(--kb-label-margin-bottom);
    }

    .label::before {
      content: "";
      width: var(--kb-label-dot-size);
      height: var(--kb-label-dot-size);
      border-radius: 50%;
      background: var(--accent, var(--blue));
      box-shadow: var(--kb-accent-glow);
    }

    h1, h2 {
      margin: 0;
      max-width: var(--kb-copy-title-max-width);
      font-size: var(--kb-font-size-title);
      line-height: var(--kb-title-line-height);
      letter-spacing: var(--kb-title-letter-spacing);
      text-wrap: balance;
      word-break: keep-all;
    }

    h2 { font-size: var(--kb-font-size-title-secondary); }

    .lead {
      margin: var(--kb-body-margin-top) 0 0;
      max-width: var(--kb-copy-body-max-width);
      color: var(--kb-text-body);
      font-size: var(--kb-font-size-body);
      line-height: var(--kb-body-line-height);
      word-break: keep-all;
    }

    .slide-links {
      position: absolute;
      left: calc(100% + var(--kb-link-left-offset));
      top: var(--kb-link-top);
      z-index: var(--kb-layer-links);
      display: flex;
      flex-wrap: wrap;
      gap: var(--kb-link-gap);
      width: var(--kb-link-width);
      margin-top: 0;
    }

    .slide-link {
      display: inline-flex;
      flex-direction: column;
      gap: var(--kb-link-content-gap);
      max-width: 100%;
      padding: var(--kb-link-padding);
      border: var(--kb-link-border);
      border-radius: var(--kb-link-radius);
      color: white;
      background: var(--kb-link-background);
      box-shadow: var(--kb-link-shadow);
      text-decoration: none;
      transition: transform var(--kb-motion-ui) ease, border-color var(--kb-motion-ui) ease, background var(--kb-motion-ui) ease;
    }

    .slide-link:hover {
      transform: translateY(-2px);
      border-color: var(--kb-link-hover-border);
      background: var(--kb-link-hover-background);
    }

    .slide-link:focus-visible {
      outline: 2px solid var(--accent, var(--blue));
      outline-offset: 4px;
    }

    .slide-link span {
      font-size: var(--kb-font-size-link);
      font-weight: 850;
      line-height: 1.35;
      word-break: keep-all;
    }

    .slide-link small {
      color: var(--kb-text-meta);
      font-size: var(--kb-font-size-link-note);
      line-height: 1.35;
      word-break: keep-all;
    }

    .slide-copy.has-link-grid .slide-links {
      top: var(--kb-link-grid-top);
      width: var(--kb-link-grid-width);
      display: grid;
      grid-template-columns: var(--kb-link-grid-columns);
    }

    .slide-copy.has-link-grid .slide-link {
      min-height: var(--kb-link-grid-card-min-height);
      justify-content: center;
    }

    .mini {
      display: grid;
      gap: var(--kb-mini-gap);
      margin-top: var(--kb-mini-margin-top);
      max-width: var(--kb-copy-body-max-width);
    }

    .mini-row {
      display: grid;
      grid-template-columns: var(--kb-row-key-width) 1fr;
      gap: var(--kb-row-gap);
      align-items: center;
      padding: var(--kb-row-padding);
      border-top: 1px solid rgba(255,255,255,.12);
      color: rgba(244,247,251,.74);
      font-size: var(--kb-font-size-row);
      line-height: var(--kb-row-line-height);
      word-break: keep-all;
    }

    .mini-row b {
      color: var(--accent, var(--blue));
      font-size: var(--kb-font-size-label);
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .brick-zone {
      position: relative;
      justify-self: center;
      width: var(--kb-brick-zone-width);
      height: var(--kb-brick-zone-height);
      min-height: var(--kb-brick-zone-min-height);
      perspective: var(--kb-brick-zone-perspective);
      transform: translateX(var(--kb-brick-zone-shift-x)) scale(var(--kb-brick-zone-scale));
      transform-origin: center center;
      transform-style: preserve-3d;
      z-index: var(--kb-layer-brick-zone);
      opacity: 1;
      visibility: visible;
      transition:
        opacity var(--kb-motion-brick-opacity) var(--kb-motion-ease),
        visibility 0s linear 0s;
    }

    .deck.hide-bricks .brick-zone {
      opacity: 0;
      visibility: hidden;
      transition:
        opacity var(--kb-motion-brick-opacity) var(--kb-motion-ease),
        visibility 0s linear var(--kb-motion-brick-opacity);
    }

    .baseplate {
      position: absolute;
      z-index: var(--kb-layer-baseplate);
      left: 50%;
      top: var(--kb-baseplate-top);
      width: var(--kb-baseplate-width);
      height: var(--kb-baseplate-height);
      transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-36deg);
      transform-style: preserve-3d;
      border-radius: var(--kb-baseplate-radius);
      opacity: var(--kb-baseplate-opacity);
      background: var(--kb-baseplate-background);
      box-shadow: var(--kb-baseplate-shadow);
      pointer-events: none;
    }

    #bricks {
      position: absolute;
      inset: 0;
      z-index: var(--kb-layer-bricks);
      transform-style: preserve-3d;
    }

    .baseplate::after {
      content: "";
      position: absolute;
      pointer-events: none;
      inset: var(--kb-baseplate-inner-inset);
      border: 1px dashed rgba(255,255,255,.16);
      border-radius: var(--kb-baseplate-inner-radius);
    }

    .brick {
      --x: 0px;
      --y: 0px;
      --z: 0px;
      --w: var(--kb-brick-width-default);
      --h: var(--kb-brick-height);
      --rot: 0deg;
      --order: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--w);
      height: var(--h);
      border-radius: var(--kb-brick-radius);
      background:
        var(--kb-brick-highlight),
        linear-gradient(135deg, var(--c1), var(--c2));
      transform: translate3d(var(--x), var(--y), var(--z)) rotate(var(--rot)) scale(var(--scale, 1));
      transition:
        transform var(--kb-motion-brick-move) var(--kb-motion-snap) calc(var(--order) * var(--kb-motion-brick-stagger)),
        opacity var(--kb-motion-brick-opacity) var(--kb-motion-ease) calc(var(--order) * var(--kb-motion-brick-stagger)),
        filter var(--kb-motion-brick-filter) var(--kb-motion-ease) calc(var(--order) * var(--kb-motion-brick-stagger));
      box-shadow:
        0 var(--kb-brick-side-depth) 0 var(--side),
        var(--kb-brick-shadow-drop),
        var(--kb-brick-shadow-outline),
        var(--kb-brick-shadow-depth);
      opacity: 1;
      transform-style: preserve-3d;
    }

    .brick::before {
      content: "";
      position: absolute;
      left: var(--kb-brick-stud-inset);
      right: var(--kb-brick-stud-inset);
      top: var(--kb-brick-stud-offset);
      height: var(--kb-brick-stud-height);
      background:
        radial-gradient(circle at 12px 12px, rgba(255,255,255,.52) 0 7px, rgba(0,0,0,.20) 7.5px 8px, transparent 8.5px),
        radial-gradient(circle at calc(100% - 12px) 12px, rgba(255,255,255,.46) 0 7px, rgba(0,0,0,.18) 7.5px 8px, transparent 8.5px);
      background-size: var(--kb-brick-stud-pitch) var(--kb-brick-stud-height), var(--kb-brick-stud-pitch) var(--kb-brick-stud-height);
      background-repeat: repeat-x;
      filter: drop-shadow(0 5px 2px rgba(0,0,0,.16));
    }

    .brick::after {
      content: attr(data-label);
      position: absolute;
      left: 50%;
      top: 50%;
      max-width: calc(100% - var(--kb-brick-label-max-inset));
      min-width: var(--kb-brick-label-min-width);
      padding: var(--kb-brick-label-padding);
      border-radius: var(--kb-control-radius);
      transform: translate(-50%, -50%);
      color: rgba(255,255,255,.98);
      background: var(--kb-surface-brick-label);
      box-shadow: var(--kb-brick-label-shadow);
      backdrop-filter: blur(4px);
      font-size: var(--kb-font-size-brick-label);
      font-weight: 850;
      letter-spacing: .04em;
      text-align: center;
      text-transform: uppercase;
      text-shadow: 0 1px 3px rgba(0,0,0,.44);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brick.ghost {
      opacity: .18;
      filter: blur(2px) saturate(.6);
    }

    .snap-flash {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--kb-flash-width);
      height: var(--kb-flash-height);
      border-radius: 50%;
      background: var(--kb-flash-background);
      transform: translate(-50%, -50%) scale(var(--kb-flash-scale));
      opacity: 0;
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: var(--kb-layer-flash);
    }

    .deck.is-changing .snap-flash,
    .deck.flash-next .snap-flash,
    .deck.flash-prev .snap-flash {
      animation: snapFlash var(--kb-motion-flash) var(--kb-motion-ease);
    }

    .deck.flash-prev .snap-flash {
      animation-name: snapFlashPrev;
    }

    @keyframes snapFlash {
      0% { opacity: 0; transform: translate(-64%, -50%) scale(.46); filter: blur(6px); }
      22% { opacity: .92; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
      100% { opacity: 0; transform: translate(-30%, -50%) scale(1.38); filter: blur(10px); }
    }

    @keyframes snapFlashPrev {
      0% { opacity: 0; transform: translate(-36%, -50%) scale(.46); filter: blur(6px); }
      22% { opacity: .92; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
      100% { opacity: 0; transform: translate(-70%, -50%) scale(1.38); filter: blur(10px); }
    }

    .side-title {
      position: absolute;
      z-index: var(--kb-layer-side-title);
      right: var(--kb-deck-gutter);
      top: var(--kb-side-title-top);
      writing-mode: vertical-rl;
      text-orientation: mixed;
      color: var(--kb-text-meta);
      font-size: var(--kb-font-size-row);
      letter-spacing: .24em;
      font-weight: 800;
    }

    .controls {
      position: absolute;
      z-index: var(--kb-layer-controls);
      left: 50%;
      bottom: var(--kb-control-bottom);
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: var(--kb-control-gap);
      padding: var(--kb-control-padding);
      border: var(--kb-control-border);
      border-radius: var(--kb-control-radius);
      background: var(--kb-surface-control);
      backdrop-filter: blur(16px);
      color: var(--kb-text-body);
      box-shadow: var(--kb-control-shadow);
    }

    .controls button {
      display: grid;
      place-items: center;
      width: var(--kb-control-button-size);
      height: var(--kb-control-button-size);
      border: 0;
      border-radius: 50%;
      color: white;
      background: var(--kb-surface-control-button);
      cursor: pointer;
      transition: background-color var(--kb-motion-ui) ease, transform var(--kb-motion-ui) ease;
    }

    .controls button:hover {
      background: var(--kb-surface-control-hover);
      transform: translateY(-1px);
    }

    .deck.is-changing .controls button,
    .deck.flash-next .controls button,
    .deck.flash-prev .controls button {
      box-shadow: var(--kb-control-glow);
    }

    .controls button:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
    }

    .page-number {
      min-width: var(--kb-page-number-min-width);
      text-align: center;
      font-size: var(--kb-font-size-label);
      letter-spacing: .14em;
    }

    .help {
      position: absolute;
      z-index: var(--kb-layer-footer);
      right: var(--kb-deck-gutter);
      bottom: var(--kb-footer-bottom);
      max-width: var(--kb-footer-max-width);
      color: var(--kb-text-footer);
      font-size: var(--kb-font-size-footer);
      line-height: var(--kb-row-line-height);
      text-align: right;
      word-break: keep-all;
    }

    @media (max-width: 900px) {
      .viewport {
        inset: var(--kb-viewport-inset);
        min-width: 0;
        overflow: hidden;
        grid-template-columns: var(--kb-viewport-columns);
        gap: var(--kb-viewport-gap);
      }
      .copy {
        width: 100%;
        min-width: 0;
        min-height: 0;
        align-self: start;
      }
      .slide-copy, .lead {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }
      h1, h2 {
        line-height: 1.06;
        word-break: normal;
        overflow-wrap: anywhere;
      }
      h1 { font-size: var(--kb-font-size-title); }
      h2 { font-size: var(--kb-font-size-title-secondary); }
      .lead {
        font-size: var(--kb-font-size-body);
        line-height: 1.45;
        word-break: normal;
        overflow-wrap: anywhere;
      }
      .slide-links {
        position: static;
        width: var(--kb-link-width);
        margin-top: var(--kb-mobile-link-margin-top);
      }
      .slide-copy.has-link-grid .slide-links {
        width: var(--kb-link-grid-width);
        grid-template-columns: var(--kb-link-grid-columns);
      }
      .slide-link { padding: var(--kb-link-padding); }
      .brick-zone {
        width: var(--kb-brick-zone-width);
        min-width: 0;
        height: var(--kb-brick-zone-height);
        min-height: var(--kb-brick-zone-min-height);
        transform: translateX(var(--kb-brick-zone-shift-x)) scale(var(--kb-brick-zone-scale));
      }
      .side-title, .mini, .help { display: none; }
      .hud {
        grid-template-columns: 1fr;
        gap: var(--kb-hud-gap);
      }
      .hud .center, .hud .right { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
      }
    }