body.workspace-doc-page {
      color: #e5edf7;
      background: #0b1017;
    }

    .workspace-doc-page .container {
      --container-max: 980px;
      padding-top: 22px;
    }

    .workspace-doc-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 7px 11px;
      border: 1px solid rgba(148, 163, 184, 0.32);
      background: rgba(15, 23, 42, 0.72);
      color: #dbeafe;
      text-decoration: none;
      font-size: 0.88rem;
      line-height: 1.2;
    }

    .workspace-doc-action:hover {
      border-color: rgba(125, 211, 252, 0.64);
      color: #ffffff;
    }

    .workspace-doc-action.primary {
      border-color: #f97316;
      background: #f97316;
      color: #ffffff;
      font-weight: 700;
    }

    .workspace-doc-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 18px;
    }

    .workspace-doc-quick-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 18px;
      padding: 0;
      list-style: none;
    }

    .workspace-doc-quick-links a {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 8px 12px;
      border: 1px solid rgba(148, 163, 184, 0.3);
      background: rgba(15, 23, 42, 0.7);
      color: #e5edf7;
      text-decoration: none;
      font-size: 0.88rem;
      line-height: 1.2;
    }

    .workspace-doc-quick-links a:hover {
      border-color: rgba(125, 211, 252, 0.64);
      color: #ffffff;
    }

    .workspace-doc-hero {
      padding: 34px 0 26px;
    }

    .workspace-doc-kicker {
      display: block;
      margin-bottom: 10px;
      color: #facc15;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .workspace-doc-hero h1 {
      margin: 0;
      color: #ffffff;
      font-size: clamp(1.65rem, 3.2vw, 2.45rem);
      line-height: 1.18;
      letter-spacing: 0;
      max-width: 860px;
    }

    .workspace-doc-summary {
      margin: 18px 0 0;
      max-width: 780px;
      color: rgba(226, 232, 240, 0.9);
      font-size: 1.04rem;
      line-height: 1.72;
    }

    .workspace-doc-note {
      margin-top: 22px;
      padding: 16px 18px;
      border-left: 4px solid #38bdf8;
      background: rgba(14, 165, 233, 0.08);
      color: rgba(226, 232, 240, 0.9);
      line-height: 1.65;
    }

    .workspace-doc-section {
      padding: 24px 0;
      border-top: 1px solid rgba(148, 163, 184, 0.18);
    }

    .workspace-doc-section h2 {
      margin: 0 0 12px;
      color: #ffffff;
      font-size: 1.35rem;
      line-height: 1.25;
    }

    .workspace-doc-section p,
    .workspace-doc-section li {
      color: rgba(203, 213, 225, 0.9);
      line-height: 1.66;
    }

    .workspace-doc-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .workspace-doc-card {
      padding: 16px 18px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      background: rgba(15, 23, 42, 0.58);
    }

    .workspace-doc-card h3 {
      margin: 0;
      color: #f8fafc;
      font-size: 1rem;
      line-height: 1.35;
    }

    .workspace-doc-card p {
      margin: 8px 0 0;
      font-size: 0.94rem;
    }

    .workspace-doc-link-list {
      display: grid;
      gap: 8px;
      padding: 0;
      list-style: none;
    }

    .workspace-doc-link-list a {
      color: #7dd3fc;
      word-break: break-word;
    }

    .workspace-doc-link-note {
      margin: 4px 0 12px;
      color: rgba(203, 213, 225, 0.82);
      font-size: 0.92rem;
      line-height: 1.58;
    }

    .workspace-doc-footer {
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid rgba(148, 163, 184, 0.18);
      color: rgba(203, 213, 225, 0.78);
      font-size: 0.84rem;
      line-height: 1.6;
    }

    .workspace-doc-footer a {
      color: #7dd3fc;
    }

    .workspace-doc-section.workspace-sample-videos {
      margin: 16px 0;
      padding: 24px;
      border: 1px solid rgba(96, 165, 250, 0.22);
      background:
        linear-gradient(135deg, rgba(7, 19, 31, 0.98), rgba(15, 32, 43, 0.96)),
        #07131f;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    }

    .workspace-sample-videos__copy {
      display: grid;
      gap: 10px;
      margin-bottom: 20px;
    }

    .workspace-sample-videos__eyebrow {
      width: fit-content;
      padding: 4px 8px;
      background: rgba(14, 165, 233, 0.12);
      color: #8bd8ff;
      font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
      font-size: 0.68rem;
      font-weight: 500;
      line-height: 1.15;
      text-transform: uppercase;
    }

    .workspace-sample-videos__copy h2 {
      margin: 0;
      font-size: clamp(1.25rem, 2.1vw, 1.9rem);
      font-weight: 620;
    }

    .workspace-sample-videos__copy p {
      margin: 0;
      color: #aabbd0;
      font-size: 0.94rem;
      line-height: 1.6;
    }

    .workspace-sample-videos__carousel {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .workspace-sample-videos__viewport {
      min-width: 0;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline mandatory;
      scrollbar-width: none;
    }

    .workspace-sample-videos__viewport::-webkit-scrollbar {
      display: none;
    }

    .workspace-sample-videos__track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - 12px) / 2);
      gap: 12px;
      align-items: stretch;
    }

    .workspace-sample-video-card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.1fr);
      gap: 14px;
      align-items: start;
      min-width: 0;
      height: 100%;
      padding: 12px;
      border: 1px solid rgba(132, 189, 255, 0.24);
      background: rgba(3, 9, 18, 0.56);
      color: inherit;
      text-decoration: none;
      scroll-snap-align: start;
    }

    .workspace-sample-video-card:hover,
    .workspace-sample-video-card:focus-visible {
      border-color: rgba(147, 197, 253, 0.68);
      background: rgba(8, 24, 41, 0.76);
      outline: none;
    }

    .workspace-sample-video-card__badge {
      position: absolute;
      z-index: 3;
      top: 22px;
      left: 24px;
      padding: 5px 9px;
      border: 1px solid rgba(255, 214, 102, 0.72);
      background: rgba(8, 16, 27, 0.9);
      color: #ffd666;
      font-size: 0.72rem;
      font-weight: 650;
      line-height: 1;
    }

    .workspace-sample-video-card__thumb {
      position: relative;
      display: block;
      aspect-ratio: 16 / 9;
      min-width: 0;
      overflow: hidden;
      background: #0b1623;
    }

    .workspace-sample-video-card__thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .workspace-sample-video-card__thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(2, 6, 13, 0.04), rgba(2, 6, 13, 0.36));
    }

    .workspace-sample-video-card__play {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      width: 48px;
      height: 48px;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(255, 255, 255, 0.84);
      border-radius: 999px;
      background: rgba(2, 8, 15, 0.68);
    }

    .workspace-sample-video-card__play::before {
      content: "";
      position: absolute;
      left: 19px;
      top: 14px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 15px solid #ffffff;
    }

    .workspace-sample-video-card__body {
      display: grid;
      gap: 8px;
      align-content: start;
      min-width: 0;
    }

    .workspace-sample-video-card__body strong {
      color: #7dd3fc;
      font-size: 1.02rem;
      font-weight: 620;
      line-height: 1.3;
    }

    .workspace-sample-video-card__body p {
      margin: 0;
      color: #adbed1;
      font-size: 0.86rem;
      line-height: 1.48;
    }

    .workspace-sample-videos__actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .workspace-sample-videos__dots {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin-right: auto;
    }

    .workspace-sample-videos__dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(150, 177, 207, 0.42);
      cursor: pointer;
      transition: width 180ms ease, background-color 180ms ease;
    }

    .workspace-sample-videos__dot:hover,
    .workspace-sample-videos__dot:focus-visible {
      background: #8bd8ff;
      outline: 2px solid rgba(139, 216, 255, 0.28);
      outline-offset: 3px;
    }

    .workspace-sample-videos__dot.is-active {
      width: 24px;
      background: #38bdf8;
    }

    .workspace-sample-videos__button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 34px;
      padding: 0;
      border: 1px solid rgba(132, 189, 255, 0.38);
      background: rgba(3, 9, 18, 0.72);
      color: #eaf6ff;
      font: inherit;
      font-size: 0.86rem;
      line-height: 1;
      cursor: pointer;
    }

    .workspace-sample-videos__button:hover,
    .workspace-sample-videos__button:focus-visible {
      border-color: rgba(147, 197, 253, 0.72);
      background: rgba(8, 24, 41, 0.86);
      outline: none;
    }

    @media (max-width: 720px) {
      .workspace-doc-grid {
        grid-template-columns: 1fr;
      }

      .workspace-doc-section.workspace-sample-videos {
        padding: 18px;
      }

      .workspace-sample-videos__track {
        grid-auto-columns: 100%;
      }

      .workspace-sample-video-card {
        grid-template-columns: 1fr;
      }
    }