---
title: DSR Docs
description: Self-hosted documentation that's truly yours.
order: 10
type: doc
visibility: public
seoTitle: Documentation infrastructure you own
seoDescription: Self-hosted documentation platform for API and product docs. Native OpenAPI, GraphQL, Doxygen, Markdown, PDF, and AI-ready output.
copyright: Copyright (c) 2026 DSR Corporation. All rights reserved.
---
<!-- ============================================================================
     DSR Docs - welcome landing FRAGMENT
     Authored for the in-app welcome engine (sanitizeWelcomeHtml):
       - NO head/body/script/input/button tags (stripped). This is a fragment.
       - style, inline style=, svg, link are allowed; the style block must lead.
       - ALL CSS is scoped under .dsrl so it can't bleed into the app.
       - CRITICAL: never write a literal angle-bracket HTML tag ANYWHERE inside
         the style block, not even in a CSS comment. DOMPurify reads "less-than +
         letter" inside a style block as an mXSS attempt and silently drops the
         ENTIRE style block (the page then renders completely unstyled). Refer to
         tags by name only (body, a, svg) — never with angle brackets.
       - Color switcher: hidden radio inputs + label swatches, themed by
         :checked (.dsrl:has(#acc-teal:checked)). Pure CSS, no JS — the pick
         STICKS on click and survives an outside click. The welcome sanitizer
         allows inert radio/checkbox specifically for this (see welcome-html.ts);
         the script-less/form-less sandboxed iframe keeps them safe.
     ============================================================================ -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=JetBrains+Mono:wght@400;500;700&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0&display=swap" rel="stylesheet">

<style>
  /* the engine drops the welcome fragment into the page body, which keeps the
     browser's default 8px margin — zero it so the landing sits edge-to-edge */
  html, body { margin: 0; }
  .dsrl{
    --accent: #F2762E;
    --accent-rgb: 242,118,46;
    --bg: #15110D;
    --bg-2: #1C1711;
    --panel: #211A13;
    --line: #3A2F23;
    --line-soft: #2B231A;
    --ink: #F4EDE1;
    --ink-dim: #C6BAA8;
    --ink-mute: #8C8073;
    --r: 14px;
    --maxw: 1180px;
    --sec-pad: 72px;
    --strip-gap: 56px;
    --ease: cubic-bezier(.22,.61,.36,1);
    --font-display: "Bricolage Grotesque", serif;
    --font-body: "Hanken Grotesk", sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    position: relative;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* clip (not hidden): clips horizontal overflow WITHOUT turning .dsrl into a
       scroll container, which on mobile intermittently swallowed vertical
       swipes ("scroll works every other time"). */
    overflow-x: clip;
  }
  .dsrl *{ box-sizing:border-box; margin:0; padding:0; }
  /* color switcher: a checked radio re-themes the whole fragment (pure CSS).
     :checked persists on click and survives an outside click — no JS, no reset.
     The welcome sanitizer allows inert radio/checkbox for exactly this. */
  .dsrl:has(#acc-rust:checked)  { --accent:#F2762E; --accent-rgb:242,118,46; }
  .dsrl:has(#acc-amber:checked) { --accent:#F5B53D; --accent-rgb:245,181,61; }
  .dsrl:has(#acc-teal:checked)  { --accent:#3FB6A8; --accent-rgb:63,182,168; }
  .dsrl:has(#acc-indigo:checked){ --accent:#7E8BF0; --accent-rgb:126,139,240; }
  .dsrl:has(#acc-pink:checked)  { --accent:#EC6398; --accent-rgb:236,99,152; }
  .dsrl:has(#acc-green:checked) { --accent:#62C16E; --accent-rgb:98,193,110; }

  /* grain overlay (scoped to the fragment) */
  .dsrl::after{
    content:""; position:absolute; inset:0;
    pointer-events:none; z-index: 50;
    opacity:.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }
  .dsrl ::selection{ background: var(--accent); color:#15110D; }

  .dsrl a{ color:inherit; text-decoration:none; }
  .dsrl img{ max-width:100%; display:block; }

  /* decorative pseudo-UI — not real content, so don't let it be selected:
     the fake browser/window chrome, terminal output, icon-font ligatures
     (which select as their word, e.g. "palette"), and the colour swatches.
     Also stops a touch-drag on the big hero mock from starting a text
     selection instead of scrolling on mobile. Real prose stays selectable. */
  .dsrl .window, .dsrl .term, .dsrl .swatches,
  .dsrl .material-symbols-outlined, .dsrl .cursor{
    -webkit-user-select: none; user-select: none;
  }

  .dsrl .wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 28px; }

  .dsrl .mono{
    font-family: var(--font-mono);
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-mute);
  }
  .dsrl .mono .ac{ color: var(--accent); }

  /* ---------- NAV ---------- */
  .dsrl .nav{
    position: sticky; top:0; z-index: 100;
    backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(21,17,13,.92), rgba(21,17,13,.6));
    border-bottom: 1px solid var(--line-soft);
  }
  .dsrl .nav-inner{ display:flex; align-items:center; justify-content:space-between; height: 70px; }
  .dsrl .brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:-.01em;}
  .dsrl .brand .logo{
    height:28px; width:auto; display:block;
    filter: drop-shadow(0px 1px 10px rgba(var(--accent-rgb), .6)) drop-shadow(0 0 1px rgba(var(--accent-rgb), .9));
  }
  .dsrl .btn{
    font-family:var(--font-body); font-size:.95rem; letter-spacing:.005em;
    padding:11px 22px; border-radius:9px; border:1px solid transparent;
    cursor:pointer; display:inline-flex; align-items:center; gap:9px;
    background: var(--accent); color:#15110D; font-weight:700;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .dsrl .btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(var(--accent-rgb),.5); }
  .dsrl .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
  .dsrl .btn.ghost:hover{ border-color:var(--accent); color:var(--accent); box-shadow:none; }
  @media(max-width:520px){ .dsrl .nav-inner{ height:60px; } }

  /* ---------- HERO ---------- */
  .dsrl .hero{ position:relative; padding: 88px 0 0; }
  .dsrl .hero::before{
    content:""; position:absolute; top:-120px; left:50%; transform:translateX(-50%);
    width:900px; height:560px; pointer-events:none; z-index:0;
    background: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb),.20), transparent 70%);
  }
  .dsrl .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
  @media(max-width:940px){ .dsrl .hero-grid{ grid-template-columns:1fr; gap:48px; } }

  .dsrl .eyebrow{ display:inline-flex; align-items:center; gap:10px; margin-bottom:26px; border:1px solid var(--line); border-radius:100px; padding:7px 14px 7px 10px; }
  .dsrl .eyebrow .pip{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:dsrl-pulse 2.4s infinite;}
  @keyframes dsrl-pulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5);} 50%{opacity:.6; box-shadow:0 0 0 6px rgba(var(--accent-rgb),0);} }

  .dsrl h1.title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(2.9rem, 6.4vw, 5.1rem); line-height: 0.98; letter-spacing: -0.03em; margin-bottom: 26px; }
  .dsrl h1.title .em{ font-style: italic; font-weight:400; color:var(--accent); }
  .dsrl .lede{ font-size: 1.18rem; color: var(--ink-dim); max-width: 30em; line-height:1.55; }
  .dsrl .lede b{ color:var(--ink); font-weight:600; }
  .dsrl .cta-row{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; align-items:center; }

  /* color swatches */
  .dsrl .rebrand{ margin-top:40px; }
  .dsrl .rebrand .lbl{ display:flex; align-items:center; gap:10px; margin-bottom:13px; }
  .dsrl .rebrand .lbl .arrow{ color:var(--accent); }
  .dsrl .swatches{ display:flex; gap:11px; }
  .dsrl .sw{
    width:38px; height:38px; border-radius:10px; border:2px solid transparent; cursor:pointer;
    position:relative; display:block; transition: transform .2s var(--ease); outline:none;
  }
  .dsrl .sw:hover{ transform: translateY(-4px) scale(1.05); }
  /* hide the radios; the labels are the visible swatches */
  .dsrl .sw-in{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; opacity:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  /* selected swatch = the label whose radio is :checked */
  .dsrl .sw-in:checked + .sw{ border-color: var(--ink); }
  .dsrl .sw-in:checked + .sw::after{ content:"\2713"; position:absolute; inset:0; display:grid; place-items:center; color:#15110D; font-size:.8rem; font-weight:800; }
  .dsrl .sw-in:focus-visible + .sw{ outline:2px solid var(--ink); outline-offset:2px; }

  /* hero mock window */
  .dsrl .window{
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    border:1px solid var(--line); border-radius: 16px;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--accent-rgb),.06);
    overflow:hidden;
    transform: perspective(1400px) rotateY(-8deg) rotateX(3deg);
    transition: transform .6s var(--ease);
  }
  .dsrl .window:hover{ transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
  @media(max-width:940px){ .dsrl .window, .dsrl .window:hover{ transform:none; } }
  .dsrl .win-bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--line-soft); background: rgba(0,0,0,.2); }
  .dsrl .win-bar .tl{ width:11px; height:11px; border-radius:50%; background:var(--line); }
  .dsrl .win-bar .tl:first-child{ background: var(--accent); }
  .dsrl .win-url{ margin-left:10px; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-mute); }
  .dsrl .win-body{ display:grid; grid-template-columns: 132px 1fr; min-height: 318px; }
  .dsrl .win-side{ border-right:1px solid var(--line-soft); padding:16px 12px; background:rgba(0,0,0,.12); }
  .dsrl .win-side .mini-brand{ display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:.82rem; margin-bottom:18px;}
  .dsrl .win-side .mini-brand i{ width:9px; height:9px; border-radius:50%; background:var(--accent); display:block;}
  .dsrl .nav-item{ font-size:.74rem; color:var(--ink-mute); padding:7px 9px; border-radius:7px; margin-bottom:3px; }
  .dsrl .nav-item.active{ background: rgba(var(--accent-rgb),.14); color:var(--accent); font-weight:600; }
  .dsrl .win-main{ padding:20px 22px; }
  .dsrl .win-search{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:8px; padding:8px 11px; font-size:.74rem; color:var(--ink-mute); margin-bottom:20px; font-family:var(--font-mono);}
  .dsrl .win-main h4{ font-family:var(--font-display); font-size:1.35rem; font-weight:700; margin-bottom:5px; letter-spacing:-.01em;}
  .dsrl .win-main .uline{ width:46px; height:3px; background:var(--accent); border-radius:3px; margin-bottom:14px;}
  .dsrl .skel{ height:9px; border-radius:5px; background: var(--line-soft); margin-bottom:9px; }
  .dsrl .skel.w1{width:96%} .dsrl .skel.w2{width:82%} .dsrl .skel.w3{width:60%}
  .dsrl .op{ display:flex; align-items:center; gap:10px; margin-top:18px; padding:10px 12px; border:1px solid var(--line-soft); border-radius:9px; }
  .dsrl .verb{ font-family:var(--font-mono); font-size:.66rem; font-weight:700; padding:4px 8px; border-radius:5px; background:var(--accent); color:#15110D;}
  .dsrl .op code{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink-dim);}

  /* ---------- FORMAT STRIP ---------- */
  .dsrl .strip{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:28px 0; margin-top:var(--strip-gap);}
  .dsrl .strip-inner{ display:flex; align-items:center; gap:38px; flex-wrap:wrap; justify-content:center;}
  .dsrl .strip .fmt{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--ink-mute); transition:color .3s; display:flex; align-items:center; gap:10px;}
  .dsrl .strip .fmt:hover{ color:var(--ink); }
  .dsrl .strip .fmt .b{ width:6px; height:6px; border-radius:50%; background:var(--accent);}
  .dsrl .strip .sep{ color:var(--line); }
  @media(max-width:620px){
    .dsrl .strip-inner{ gap:14px 22px; }
    .dsrl .strip .sep{ display:none; }
    .dsrl .strip .fmt{ font-size:1.05rem; }
  }

  /* ---------- SECTIONS ---------- */
  .dsrl .section{ padding: var(--sec-pad) 0; }
  .dsrl #features{ padding-top: var(--strip-gap); }
  .dsrl .sec-head{ max-width: 40em; margin-bottom: 54px; }
  .dsrl .sec-head h2{ font-family:var(--font-display); font-weight:700; font-size: clamp(2rem,4vw,3rem); letter-spacing:-.025em; line-height:1.04; margin:16px 0 0; }
  .dsrl .sec-head h2 .em{ font-style:italic; font-weight:400; color:var(--accent);}

  /* bento */
  .dsrl .bento{ display:grid; grid-template-columns: repeat(6,1fr); gap:18px; }
  .dsrl .card{
    grid-column: span 2;
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    border:1px solid var(--line-soft); border-radius: var(--r);
    padding: 28px; position:relative; overflow:hidden;
    will-change: transform;
    transition: border-color .35s var(--ease), transform .35s var(--ease);
  }
  .dsrl .card:hover{ border-color: rgba(var(--accent-rgb),.5); transform: translateY(-4px); }
  /* idle = dim, hover = full highlight; opacity (not color) so it can't hit the var() transition glitch */
  .dsrl .card-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; opacity:.9; transition:opacity .2s var(--ease); }
  .dsrl .card:hover .card-head{ opacity:1; }
  .dsrl .card .ix{ font-family:var(--font-mono); font-size:.72rem; color:var(--accent); letter-spacing:.1em;}
  .dsrl .card h3{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; letter-spacing:-.01em; margin:0 0 10px; line-height:1.1;}
  .dsrl .card p{ color:var(--ink-dim); font-size:.98rem; }
  .dsrl .card-link{ display:inline-flex; align-items:center; gap:5px; margin-top:16px; font-family:var(--font-mono); font-size:.74rem; font-weight:600; letter-spacing:.02em; color:var(--accent); text-decoration:none; opacity:.85; transition:gap .2s var(--ease), opacity .2s; }
  .dsrl .card-link:hover{ gap:9px; opacity:1; }
  .dsrl .card-link::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; }
  .dsrl .card{ cursor:pointer; }
  .dsrl .card .glow{ position:absolute; right:-60px; top:-60px; width:160px; height:160px; border-radius:50%; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb),.16), transparent 70%); opacity:0; transition:opacity .4s; }
  .dsrl .card:hover .glow{ opacity:1; }
  .dsrl .card.wide{ grid-column: span 3; }
  .dsrl .card.feature{ grid-column: span 3; }
  @media(max-width:880px){ .dsrl .bento{ grid-template-columns:1fr; } .dsrl .card, .dsrl .card.wide, .dsrl .card.feature{ grid-column: span 1; } }

  /* icon */
  .dsrl .ico{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background: rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.25);}
  .dsrl .ico .material-symbols-outlined{
    font-family:"Material Symbols Outlined"; font-size:22px; line-height:1; color:var(--accent);
    font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  }

  /* ---------- DEPLOY BAND ---------- */
  .dsrl .deploy{ background: var(--bg-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
  .dsrl .deploy-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:54px; align-items:center;}
  @media(max-width:880px){ .dsrl .deploy-grid{ grid-template-columns:1fr; gap:36px; } }
  .dsrl .term{ background:#0E0B08; border:1px solid var(--line); border-radius:12px; overflow:hidden; font-family:var(--font-mono); font-size:.86rem; box-shadow: 0 30px 60px -28px rgba(0,0,0,.8); }
  .dsrl .term-bar{ display:flex; gap:7px; padding:12px 14px; border-bottom:1px solid var(--line-soft); }
  .dsrl .term-bar i{ width:10px; height:10px; border-radius:50%; background:var(--line); }
  .dsrl .term-body{ padding:20px 20px 24px; line-height:1.9; }
  .dsrl .term-body .pr{ color:var(--accent); }
  .dsrl .term-body .cm{ color:var(--ink-mute); }
  .dsrl .term-body .ou{ color:var(--ink-dim); }
  .dsrl .term-body .tok{ color:var(--ink); }
  .dsrl .cursor{ display:inline-block; width:9px; height:16px; background:var(--accent); vertical-align:-2px; margin-left:3px; animation:dsrl-blink 1.1s steps(1) infinite;}
  @keyframes dsrl-blink{ 50%{opacity:0;} }

  .dsrl .stat-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:30px; }
  .dsrl .stat .n{ font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--ink); letter-spacing:-.02em; line-height:1; white-space:nowrap;}
  .dsrl .stat .n .ac{ color:var(--accent);}
  .dsrl .stat .k{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.1em; margin-top:8px;}
  .dsrl .deploy h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4vw,2.9rem); letter-spacing:-.025em; line-height:1.05; margin:16px 0 18px;}
  .dsrl .deploy p{ color:var(--ink-dim); font-size:1.08rem; max-width:30em;}

  /* ---------- CLOSING ---------- */
  .dsrl .closing{ text-align:center; position:relative; }
  .dsrl .closing::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:700px; height:400px; pointer-events:none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb),.18), transparent 70%);
  }
  .dsrl .closing h2{ position:relative; font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5.5vw,4.2rem); letter-spacing:-.03em; line-height:1.0; }
  .dsrl .closing h2 .em{ font-style:italic; font-weight:400; color:var(--accent); }
  .dsrl .closing p{ position:relative; color:var(--ink-dim); font-size:1.15rem; max-width:34em; margin:22px auto 0; }
  .dsrl .closing .cta-row{ position:relative; justify-content:center; }

  /* ---------- FOOTER ---------- */
  .dsrl .footer{ border-top:1px solid var(--line-soft); padding:40px 0; }
  .dsrl .foot-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
  .dsrl .foot-inner .brand{ font-size:1rem; }
  .dsrl .foot-inner .brand .logo{ height:22px; }
  .dsrl .foot-inner .copy{ font-size:.86rem; color:var(--ink-mute); }
  .dsrl .foot-links{ display:flex; gap:24px; }
  .dsrl .foot-links a{ font-size:.86rem; color:var(--ink-dim); transition:color .2s;}
  .dsrl .foot-links a:hover{ color:var(--accent); }

  /* hero load anim (pure CSS) */
  .dsrl .ld{ opacity:0; transform:translateY(20px); animation: dsrl-ld .9s var(--ease) forwards; }
  @keyframes dsrl-ld{ to{ opacity:1; transform:none; } }
  .dsrl .ld.l1{animation-delay:.05s} .dsrl .ld.l2{animation-delay:.18s} .dsrl .ld.l3{animation-delay:.31s}
  .dsrl .ld.l4{animation-delay:.44s} .dsrl .ld.l5{animation-delay:.57s} .dsrl .ld.l6{animation-delay:.7s}

  @media (prefers-reduced-motion: reduce){
    .dsrl *{ animation:none !important; transition:none !important; }
    .dsrl .ld{ opacity:1; transform:none; }
  }

  /* Mobile scroll fix: a full-page mix-blend-mode grain overlay and a sticky
     nav with backdrop-filter force the compositor to re-composite every scroll
     frame, which on phones stalls the first swipe (you had to swipe twice).
     Drop both on narrow screens — the visual barely changes. */
  @media (max-width: 640px){
    .dsrl::after{ display:none; }
    .dsrl .nav{
      backdrop-filter:none; -webkit-backdrop-filter:none;
      background: rgba(21,17,13,.96);
    }
  }
</style>

<div class="dsrl">

  <!-- NAV -->
  <div class="nav">
    <div class="wrap nav-inner">
      <div class="brand"><img class="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAdCAYAAADCdc79AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAVZJREFUeAHt1jFOwzAYhuHvN06pIlXKyOihkdwiISEukBPAwABMMLCnN2gkuAEHqDgFY47AyAgngAHEgohJkCIlJTSJaycd+o6Oh0eW7D9AT0k5DvalH0spRHGdo+NkKtjB9wJEwe+CKn/vDJRBCEnEKLkE6N991kFlSH3WQG0hsAmaSv+KKFlAIwYrkYBmlkD6bUF1WQHtucqDZkZB7zcy+LiV8bHPQmhm5NpnECLMKR8Hy/OgK9BfyPppgWxAoAOyCUFbUIZhjGJYbuPeoc5/0Kp6i4Q3cIZhouiw1xMaOcDD6W7oOO5zOpAjkPJ6OaEMcjYhXEjCaECz4rvVCCSE8O4e1Ul4RFinJUjlHl4HcYc8JMZmT6/686kJZCWoCElP09OdBG0glSCTkOuDdpASyBQk73yif3n5VI7npiAm4kQs2gRIHk8U7pts/PxKXwtlWa7w8gMk4VjS8hBvoAAAAABJRU5ErkJggg==" alt="" aria-hidden="true">DSR&nbsp;Docs</div>
    </div>
  </div>

  <!-- HERO -->
  <div class="hero">
    <div class="wrap hero-grid">
      <div class="hero-copy">
        <span class="eyebrow ld l1"><span class="pip"></span><span class="mono">Self-hosted&nbsp;&middot;&nbsp;Git-native&nbsp;&middot;&nbsp;White-label</span></span>
        <h1 class="title ld l2">Your docs.<br>Your brand.<br><span class="em">Your server.</span></h1>
        <p class="lede ld l3">A self-hosted documentation platform for API and product docs — OpenAPI, GraphQL, Doxygen, and Markdown render natively, with native PDF export and AI-ready output built in. It ships ready to rebrand live and stays <b>yours forever</b>: no SaaS lock-in, no rebuild to change a color.</p>
        <div class="cta-row ld l4">
          <a href="/home" class="btn">See what's inside &rarr;</a>
        </div>
        <div class="rebrand ld l5">
          <div class="lbl"><span class="mono">See it in your color <span class="arrow">&rarr;</span></span></div>
          <div class="swatches" role="radiogroup" aria-label="Accent color">
            <input class="sw-in" type="radio" name="dsrl-accent" id="acc-rust" checked>
            <label class="sw c-rust"   for="acc-rust"   title="Rust"   aria-label="Rust"   style="background:#F2762E"></label>
            <input class="sw-in" type="radio" name="dsrl-accent" id="acc-amber">
            <label class="sw c-amber"  for="acc-amber"  title="Amber"  aria-label="Amber"  style="background:#F5B53D"></label>
            <input class="sw-in" type="radio" name="dsrl-accent" id="acc-teal">
            <label class="sw c-teal"   for="acc-teal"   title="Teal"   aria-label="Teal"   style="background:#3FB6A8"></label>
            <input class="sw-in" type="radio" name="dsrl-accent" id="acc-indigo">
            <label class="sw c-indigo" for="acc-indigo" title="Indigo" aria-label="Indigo" style="background:#7E8BF0"></label>
            <input class="sw-in" type="radio" name="dsrl-accent" id="acc-pink">
            <label class="sw c-pink"   for="acc-pink"   title="Pink"   aria-label="Pink"   style="background:#EC6398"></label>
            <input class="sw-in" type="radio" name="dsrl-accent" id="acc-green">
            <label class="sw c-green"  for="acc-green"  title="Green"  aria-label="Green"  style="background:#62C16E"></label>
          </div>
        </div>
      </div>

      <!-- docs mock -->
      <div class="hero-mock ld l6">
        <div class="window">
          <div class="win-bar">
            <span class="tl"></span><span class="tl"></span><span class="tl"></span>
            <span class="win-url">docs.yourdomain.com/docs/api/pets</span>
          </div>
          <div class="win-body">
            <div class="win-side">
              <div class="mini-brand"><i></i>Your&nbsp;Docs</div>
              <div class="nav-item">Getting Started</div>
              <div class="nav-item">Branding</div>
              <div class="nav-item active">API Reference</div>
              <div class="nav-item">GraphQL</div>
              <div class="nav-item">Doxygen</div>
            </div>
            <div class="win-main">
              <div class="win-search"><span>Search the docs&hellip;</span><span>&#8984;K</span></div>
              <h4>List pets</h4>
              <div class="uline"></div>
              <div class="skel w1"></div>
              <div class="skel w2"></div>
              <div class="skel w3"></div>
              <div class="op"><span class="verb">GET</span><code>/v1/pets</code></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- format strip -->
    <div class="wrap">
      <div class="strip" id="formats">
        <div class="strip-inner">
          <span class="mono">Renders natively&nbsp;:</span>
          <span class="fmt"><span class="b"></span>Markdown</span>
          <span class="sep">/</span>
          <span class="fmt"><span class="b"></span>OpenAPI&nbsp;3.x</span>
          <span class="sep">/</span>
          <span class="fmt"><span class="b"></span>GraphQL</span>
          <span class="sep">/</span>
          <span class="fmt"><span class="b"></span>Doxygen&nbsp;C/C++</span>
        </div>
      </div>
    </div>
  </div>

  <!-- FEATURES -->
  <div class="section" id="features">
    <div class="wrap">
      <div class="sec-head">
        <span class="mono"><span class="ac">//</span> Everything, out of the box</span>
        <h2>One container.<br>A <span class="em">complete</span> docs platform.</h2>
      </div>

      <div class="bento">
        <div class="card feature">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">palette</span></div><span class="ix">01 / Branding</span></div>
          <h3>Brand it live. Watch it change as you type.</h3>
          <p>Logos, colors, fonts, code themes, and diagram styles: every visual is editable from the admin panel and hot-applies through CSS variables, no rebuild.</p>
          <a class="card-link" href="/docs/use-cases/ship-a-white-label-developer-portal">Learn more &rarr;</a>
        </div>

        <div class="card feature">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">dns</span></div><span class="ix">02 / Ownership</span></div>
          <h3>Self-hosted &amp; git-native. The content is always yours.</h3>
          <p>Your pages are plain Markdown on a volume you control. Edit them in the in-app editor, or clone the repo, write in your IDE, and push. Same files, both directions.</p>
          <a class="card-link" href="/docs/use-cases/self-hosted-alternative-to-gitbook-and-readme">Learn more &rarr;</a>
        </div>

        <div class="card wide">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">code</span></div><span class="ix">03 / API references</span></div>
          <h3>OpenAPI, GraphQL, <em>and</em> C/C++ in one engine.</h3>
          <p>Drop in a spec and it renders as an interactive, scroll-spy reference with your prose mixed right in. Web REST APIs and embedded C/C++ SDKs, documented side by side.</p>
          <a class="card-link" href="/docs/guides/one-engine">Learn more &rarr;</a>
        </div>

        <div class="card wide">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">speed</span></div><span class="ix">04 / Performance</span></div>
          <h3>900 pages. One scroll. <em>Still instant.</em></h3>
          <p>We benchmarked a 913-page Doxygen reference as a single scrolling document: full text served in ~110&nbsp;ms, interactive in 0.3&nbsp;s, and later content rebuilds never re-parse it. Big SDKs are the point, not the limit.</p>
          <a class="card-link" href="/docs/guides/900-pages-one-scroll">See the numbers &rarr;</a>
        </div>

        <div class="card wide">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">draw</span></div><span class="ix">05 / Authoring</span></div>
          <h3>Write your way: rich editor or raw Markdown.</h3>
          <p>Split-pane WYSIWYG or hand-written Markdown, with live preview as you type. Alerts and callouts, tabbed sections, Mermaid diagrams, and media embeds are built in.</p>
          <a class="card-link" href="/docs/guides/primitives-showcase">Learn more &rarr;</a>
        </div>

        <div class="card">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">search</span></div><span class="ix">06 / Search</span></div>
          <h3>Instant answers, as you type.</h3>
          <p>Full-text search across every page. Readers find what they need before they finish typing.</p>
          <a class="card-link" href="/home">Learn more &rarr;</a>
        </div>

        <div class="card">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">travel_explore</span></div><span class="ix">07 / Discoverability</span></div>
          <h3>Found by Google <em>and</em> by AI.</h3>
          <p>Ships <code>sitemap.xml</code>, <code>robots.txt</code>, and <code>llms.txt</code> out of the box, with per-page SEO metadata on every page you publish.</p>
          <a class="card-link" href="/docs/use-cases/make-your-docs-discoverable-by-ai-assistants">Learn more &rarr;</a>
        </div>

        <div class="card">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">bar_chart</span></div><span class="ix">08 / Analytics</span></div>
          <h3>See who reads the docs.</h3>
          <p>Views over time, top pages, readers and countries — per page or across the site. Self-hosted, with no third-party tracker and no IP address stored.</p>
          <a class="card-link" href="/docs/guides/reader-analytics">Learn more &rarr;</a>
        </div>

        <div class="card">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">history</span></div><span class="ix">09 / Safety net</span></div>
          <h3>Never lose a word.</h3>
          <p>Every save snapshots the previous version. Compare, revert, recover. All backed by an admin audit log of every change.</p>
          <a class="card-link" href="/docs/guides/page-history">Learn more &rarr;</a>
        </div>

        <div class="card wide">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">verified_user</span></div><span class="ix">10 / Access &amp; trust</span></div>
          <h3>Private by default.</h3>
          <p>Passwordless magic-link sign-in, granular viewer / editor / admin roles, and per-page access control, from fully public to invite-only.</p>
          <a class="card-link" href="/docs/use-cases/expose-api-docs-to-external-customers">Learn more &rarr;</a>
        </div>

        <div class="card wide">
          <div class="glow"></div>
          <div class="card-head"><div class="ico"><span class="material-symbols-outlined">fact_check</span></div><span class="ix">11 / Quality</span></div>
          <h3>Spec validation that has your back.</h3>
          <p>Every uploaded API spec gets an advisory completeness check. Missing descriptions, examples, and tags surface as ranked, copy-ready warnings before your readers ever see them.</p>
          <a class="card-link" href="/docs/guides/one-engine">Learn more &rarr;</a>
        </div>
      </div>
    </div>
  </div>

  <!-- DEPLOY -->
  <div class="section deploy" id="deploy">
    <div class="wrap deploy-grid">
      <div>
        <span class="mono"><span class="ac">//</span> Ship it</span>
        <h2>Up and running<br>before your coffee's cold.</h2>
        <p>Spin up a container, point it at a volume, and you have a branded, searchable, API-aware docs site. Brand it, add content, done.</p>
        <div class="stat-row">
          <div class="stat"><div class="n"><span class="ac">instant</span></div><div class="k">rebrand, no rebuild</div></div>
          <div class="stat"><div class="n"><span class="ac">3</span>&nbsp;specs</div><div class="k">OpenAPI &middot; GraphQL &middot; Doxygen</div></div>
          <div class="stat"><div class="n"><span class="ac">0</span>&nbsp;lock-in</div><div class="k">plain markdown on disk</div></div>
        </div>
      </div>
      <div>
        <div class="term">
          <div class="term-bar"><i></i><i></i><i></i></div>
          <div class="term-body">
            <div><span class="cm"># pull &amp; run the engine</span></div>
            <div><span class="pr">$</span> <span class="tok">docker run -d \</span></div>
            <div>&nbsp;&nbsp;<span class="tok">-p 8080:8080 \</span></div>
            <div>&nbsp;&nbsp;<span class="tok">-v ./content:/app/content \</span></div>
            <div>&nbsp;&nbsp;<span class="tok">dsr/docs:latest</span></div>
            <div style="margin-top:10px"><span class="ou">&rarr; seeded content loaded</span></div>
            <div><span class="ou">&rarr; search index built</span></div>
            <div><span class="ou">&rarr; live at docs.yourdomain.com</span> <span class="cursor"></span></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- CLOSING -->
  <div class="section closing">
    <div class="wrap">
      <div>
        <h2>Documentation<br>infrastructure <span class="em">you own.</span></h2>
        <p>Self-hosted. Git-native. Rebranded live, not rebuilt. Built for everything from a README to a 500-endpoint API reference. This is a DSR&nbsp;Docs site.</p>
        <div class="cta-row">
          <a href="mailto:docs@dsr-corporation.com" class="btn">Contact us</a>
          <a href="/home" class="btn ghost">Read the docs</a>
        </div>
      </div>
    </div>
  </div>

  <!-- FOOTER -->
  <div class="footer">
    <div class="wrap foot-inner">
      <div class="brand"><img class="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAdCAYAAADCdc79AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAVZJREFUeAHt1jFOwzAYhuHvN06pIlXKyOihkdwiISEukBPAwABMMLCnN2gkuAEHqDgFY47AyAgngAHEgohJkCIlJTSJaycd+o6Oh0eW7D9AT0k5DvalH0spRHGdo+NkKtjB9wJEwe+CKn/vDJRBCEnEKLkE6N991kFlSH3WQG0hsAmaSv+KKFlAIwYrkYBmlkD6bUF1WQHtucqDZkZB7zcy+LiV8bHPQmhm5NpnECLMKR8Hy/OgK9BfyPppgWxAoAOyCUFbUIZhjGJYbuPeoc5/0Kp6i4Q3cIZhouiw1xMaOcDD6W7oOO5zOpAjkPJ6OaEMcjYhXEjCaECz4rvVCCSE8O4e1Ul4RFinJUjlHl4HcYc8JMZmT6/686kJZCWoCElP09OdBG0glSCTkOuDdpASyBQk73yif3n5VI7npiAm4kQs2gRIHk8U7pts/PxKXwtlWa7w8gMk4VjS8hBvoAAAAABJRU5ErkJggg==" alt="" aria-hidden="true">DSR&nbsp;Docs</div>
      <div class="copy">&copy; 2026 DSR Docs</div>
      <div class="foot-links">
        <a href="/docs/legal/privacy">Privacy</a>
        <a href="mailto:docs@dsr-corporation.com">Support</a>
      </div>
    </div>
  </div>

</div><!-- /.dsrl -->