/* Docs styles. Everything is scoped under .docs so nothing leaks into style.css.
   The header and footer stay press-styled; the body uses the product look. */

.docs {
  --d-bg: #fbfaff;
  --d-surface: #ffffff;
  --d-alt: #f4f2fb;
  --d-text: #161325;
  --d-soft: #4c4764;
  --d-muted: #6b667f;
  --d-border: #e3dff3;
  --d-accent: #5b4de0;
  --d-accent-2: #c2410c;
  --d-accent-strong: #4a3dc4;
  --d-glow: rgb(91 77 224 / 0.2);
  --d-field-border: #8a85a3;
  --d-g1: #6d5efc;
  --d-g3: #ff7a59;
  --d-grad: linear-gradient(100deg, var(--d-g1) 0%, #b14cff 48%, var(--d-g3) 100%);
  --d-grad-soft: linear-gradient(135deg, #efeaff 0%, #fdeee9 100%);
  --d-violet-tint: #efeaff;
  --d-coral-tint: #ffeee8;
  --d-ink: #0b0a12;
  --d-ok: #166534;
  --d-ok-bg: #e7f7ee;
  --d-warn: #b42318;
  --d-warn-bg: #fef3f2;
  --d-status-bg: #fbfaff;
  --d-shadow-sm: 0 1px 2px rgb(20 12 40 / 0.06);
  --d-shadow-md: 0 8px 24px -10px rgb(60 40 120 / 0.25);
  --d-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --d-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--d-bg);
  color: var(--d-text);
  font-family: var(--d-sans);
  line-height: 1.65;
}
/* Anchored headings clear the sticky site header. */
html { scroll-padding-top: 6rem; }
.docs h1, .docs h2, .docs h3 { font-family: var(--d-sans); color: var(--d-text); }
.docs a { color: var(--d-accent); }
.docs :focus-visible { outline: 3px solid var(--d-accent); outline-offset: 2px; border-radius: 4px; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: #fff; color: var(--ink); padding: 0.6rem 1rem; border: 2px solid var(--accent); border-radius: 6px; font-weight: 700; }
.skip-link:focus { top: 8px; text-decoration: none; }

/* ---- Docs bar (search + version switch) ---- */
.docs-bar { background: var(--d-surface); border-bottom: 1px solid var(--d-border); }
.docs-bar-inner { display: flex; align-items: center; gap: 1rem; max-width: 1180px; margin: 0 auto; padding: 0.7rem 1.5rem; flex-wrap: wrap; }
.docs-bar .bar-title { font-weight: 800; font-size: 0.95rem; color: var(--d-text); text-decoration: none; margin-right: auto; }
.docs-bar .bar-title:hover { text-decoration: none; }
.docs .hb-search { position: relative; flex: 0 1 420px; width: 100%; }
.docs .hb-search input { width: 100%; font: inherit; font-size: 0.95rem; padding: 0.5rem 0.95rem; border: 1px solid var(--d-field-border); border-radius: 99px; background: var(--d-surface); color: var(--d-text); }
.docs .hb-search input:focus { border-color: var(--d-accent); box-shadow: 0 0 0 3px var(--d-glow); outline: none; }
.docs .hb-results { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; background: var(--d-surface); border: 1px solid var(--d-border); border-radius: 14px; box-shadow: var(--d-shadow-md); max-height: 70vh; overflow-y: auto; padding: 0.4rem; }
.docs .hb-results.open { display: block; }
.docs .hb-result { display: block; padding: 0.6rem 0.7rem; border-radius: 10px; text-decoration: none; color: var(--d-text); }
.docs .hb-result:hover, .docs .hb-result:focus-visible, .docs .hb-result.sel { background: var(--d-alt); text-decoration: none; }
.docs .hb-result-ttl { font-weight: 700; font-size: 0.95rem; }
.docs .hb-result-sec { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--d-accent); margin: 0.1rem 0; }
.docs .hb-result-snip { font-size: 0.85rem; color: var(--d-soft); line-height: 1.4; }
.docs .hb-noresult { padding: 0.8rem; color: var(--d-soft); font-size: 0.9rem; }
.version-switch { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--d-soft); }
.version-switch a, .version-switch a:hover { background: var(--d-alt); }
.version-switch a:active { background: var(--d-violet-tint); transform: translateY(1px); }
.version-switch span.cur { padding: 0.2rem 0.7rem; border-radius: 99px; border: 1px solid var(--d-border); text-decoration: none; font-weight: 700; }
.version-switch span.cur { background: var(--d-violet-tint); color: var(--d-accent); border-color: transparent; }

/* ---- Layout ---- */
.doc-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-5); max-width: 1180px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); }
.doc-side-toggle { display: none; font: inherit; font-weight: 700; padding: 0.55rem 1rem; border-radius: 99px; border: 1px solid var(--d-border); background: var(--d-surface); color: var(--d-text); cursor: pointer; margin-bottom: 0.8rem; }
.doc-side-toggle:hover { background: var(--d-alt); }
.doc-side-toggle:active { background: var(--d-violet-tint); transform: translateY(1px); }
.doc-side-toggle:disabled { opacity: 0.45; cursor: default; }
.doc-sidebar { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 112px); overflow-y: auto; padding-right: 0.5rem; }
.doc-sidebar .group { margin-bottom: 0.9rem; }
.doc-sidebar .group-part { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--d-text); margin: 1.4rem 0 0.7rem; padding-top: 0.9rem; border-top: 1px solid var(--d-border); }
.doc-sidebar .group-part:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.doc-sidebar .group-title { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--d-muted); background: none; border: 0; padding: 0.3rem 0.7rem; margin-bottom: 0.2rem; border-radius: 8px; cursor: default; }
.js .doc-sidebar .group-title { cursor: pointer; position: relative; padding-right: 1.6rem; }
.js .doc-sidebar .group-title::after { content: ""; position: absolute; right: 0.75rem; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.js .doc-sidebar .group-title[aria-expanded="true"]::after { margin-top: -2px; transform: rotate(-135deg); }
.js .doc-sidebar .group-title:hover { background: var(--d-alt); color: var(--d-text); }
.js .doc-sidebar .group-title:active { background: var(--d-violet-tint); }
.doc-sidebar .group-links[hidden] { display: none; }
.doc-sidebar a { display: block; padding: 0.32rem 0.7rem; border-radius: 8px; color: var(--d-soft); text-decoration: none; font-size: 0.92rem; line-height: 1.4; }
.doc-sidebar a:hover { background: var(--d-alt); color: var(--d-text); text-decoration: none; }
.doc-sidebar a[aria-current="page"] { background: var(--d-violet-tint); color: var(--d-accent); font-weight: 700; }
.docs .tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--d-accent-2); }

/* ---- Article ---- */
.doc-article { min-width: 0; }
.doc-breadcrumb { font-size: 0.85rem; color: var(--d-muted); margin-bottom: 0.8rem; }
.doc-breadcrumb a { color: var(--d-soft); }
.doc-article h1 { font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: 0; }
.doc-article h1::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; background-image: var(--d-grad); margin-top: 0.8rem; }
.hb-hero h1::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; background-image: var(--d-grad); margin: 0.7rem auto 0; }
.doc-article .lede { font-size: 1.18rem; color: var(--d-soft); margin: 0.9rem 0 0; }
.doc-article h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 2.6rem 0 0.8rem; padding-top: 1.4rem; border-top: 1px solid var(--d-border); }
.doc-article h3 { font-size: 1.15rem; font-weight: 700; margin: 1.6rem 0 0.5rem; }
.doc-article p, .doc-article li { font-size: 1.02rem; }
.doc-article p { margin: 0.9rem 0; }
.doc-article ul, .doc-article ol { margin: 0.6rem 0 0.6rem 1.3rem; }
.doc-article li { margin: 0.35rem 0; }
.doc-article a { text-decoration: underline; text-decoration-color: rgb(91 77 224 / 0.35); text-underline-offset: 2px; }
.doc-article a:hover { text-decoration-color: currentColor; }
.doc-article img { height: auto; border-radius: 10px; }
.doc-article audio { width: 100%; margin-top: 1rem; }

.docs pre { background: var(--d-ink); color: #e7e3ff; border: 1px solid #2a2740; border-radius: 14px; padding: 1.2rem 1.4rem; overflow-x: auto; font-size: 0.88rem; line-height: 1.6; margin: 1.2rem 0; box-shadow: var(--d-shadow-md); }
.docs code { font-family: var(--d-mono); }
.docs :not(pre) > code { background: var(--d-alt); color: var(--d-accent-strong); padding: 0.1rem 0.42rem; border-radius: 6px; font-size: 0.88em; }
.docs table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.95rem; }
.docs th, .docs td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--d-border); vertical-align: top; }
.docs th { font-weight: 700; background: var(--d-alt); }
.table-wrap { overflow-x: auto; }

.at-glance { background: var(--d-surface); border: 1px solid var(--d-border); border-left: 3px solid var(--d-accent); border-radius: 14px; padding: 1.2rem 1.4rem; margin: 1.6rem 0; box-shadow: var(--d-shadow-sm); }
.at-glance .at-title { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-accent); margin-bottom: 0.4rem; }
.at-glance ul { margin: 0 0 0 1.1rem; }
.at-glance li { color: var(--d-soft); font-size: 0.97rem; }

.docs .note, .docs .tip, .docs .warning, .docs .soon-note, .docs .future { border-radius: 12px; padding: 0.9rem 1.1rem; margin: 1.2rem 0; font-size: 0.96rem; border: 1px solid var(--d-border); }
.docs .note b, .docs .tip b, .docs .warning b, .docs .soon-note b, .docs .future b { font-weight: 700; }
.docs .note { background: var(--d-alt); border-left: 4px solid var(--d-field-border); }
.docs .tip { background: var(--d-violet-tint); border-color: transparent; border-left: 4px solid var(--d-accent); }
.docs .tip b { color: var(--d-accent-strong); }
.docs .warning { background: var(--d-warn-bg); border: 1px solid var(--d-warn); border-left-width: 6px; }
.docs .warning b { color: var(--d-warn); font-weight: 800; }
.docs .soon-note, .docs .future { background: var(--d-status-bg); border: 1px dashed var(--d-field-border); color: var(--d-soft); font-weight: 400; }
.docs .soon-note b, .docs .future b { color: var(--d-soft); }
.docs .note p, .docs .tip p, .docs .warning p, .docs .soon-note p, .docs .future p { margin: 0.3rem 0; }

.next-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--d-border); }
.doc-article .next-links a { display: block; padding: 1rem 1.2rem; border: 1px solid var(--d-border); border-radius: 14px; text-decoration: none; color: var(--d-text); background: var(--d-surface); }
.doc-article .next-links a:hover { border-color: var(--d-accent); }
.next-links .dir { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-muted); }
.next-links .ttl { font-weight: 700; color: var(--d-accent); }
.next-links .next { text-align: right; }

/* ---- Home ---- */
.hb-hero { text-align: center; padding: 0.6rem 1rem 0; }
.hb-hero .badge { display: inline-block; padding: 0.35rem 0.9rem; border-radius: 99px; background: var(--d-violet-tint); color: var(--d-accent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.hb-hero h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; margin: 0.6rem 0 0; }
.hb-hero p { color: var(--d-soft); max-width: 620px; margin: 0.6rem auto 0; font-size: 1.02rem; line-height: 1.5; }
.hb-return { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1.2rem; margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--d-soft); }
.hb-return:empty { display: none; }
.hb-return a { font-weight: 700; }
.hb-clear { font: inherit; font-size: 0.82rem; color: var(--d-soft); background: none; border: 1px solid var(--d-field-border); border-radius: 99px; padding: 0.15rem 0.7rem; min-height: 28px; cursor: pointer; }
.hb-clear:hover { border-color: var(--d-accent); color: var(--d-accent-strong); }
.hb-start { margin: 1rem 0 0; }
.hb-start-label { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-accent); margin: 0 0 0.6rem; }
.hb-startgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hb-startcard { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; min-height: 44px; padding: 0.8rem 1.1rem; background: var(--d-surface); border: 1px solid var(--d-accent); border-radius: 14px; text-decoration: none; box-shadow: var(--d-shadow-sm); }
.hb-startcard:hover, .hb-startcard:focus-visible { background: var(--d-violet-tint); box-shadow: var(--d-shadow-md); text-decoration: none; }
.hb-startttl { font-weight: 800; font-size: 1.05rem; color: var(--d-accent-strong); }
.hb-startcard:hover .hb-startttl { text-decoration: underline; }
.hb-startdesc { font-size: 0.88rem; line-height: 1.4; color: var(--d-soft); }
.hb-section { margin: 1.6rem 0; }
.hb-section h2 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-accent); margin: 0 0 1rem; }
.dgrid { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); }
.dcard { display: block; min-height: 44px; position: relative; background: var(--d-surface); border: 1px solid var(--d-border); border-radius: 16px; padding: 1.1rem 1.2rem; box-shadow: var(--d-shadow-sm); color: var(--d-text); text-decoration: none; overflow: hidden; }
.dcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background-image: var(--d-grad); opacity: 0; }
.dcard:hover, .dcard:focus-visible { border-color: transparent; box-shadow: var(--d-shadow-md); text-decoration: none; }
.dcard:hover::before, .dcard:focus-visible::before { opacity: 1; }
.dcard h3 { font-size: 1.1rem; margin: 0 0 0.3rem; color: var(--d-accent-strong); }
.dcard:hover h3, .dcard:focus-visible h3 { text-decoration: underline; }
.dcard p { color: var(--d-soft); font-size: 0.92rem; line-height: 1.45; margin: 0 0 0.5rem; }
.dcard .dcount { display: block; color: var(--d-muted); font-size: 0.8rem; }

/* ---- Demo player ---- */
.hb-demo { border: 1px solid var(--d-border); border-radius: 16px; overflow: hidden; margin: 1.6rem 0; box-shadow: var(--d-shadow-sm); background: var(--d-surface); }
.hb-demo-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--d-border); }
.hb-demo-head .pill { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--d-accent); padding: 0.25rem 0.6rem; border-radius: 99px; }
.hb-demo-head .ttl { font-weight: 700; font-size: 0.98rem; }
.hb-demo-head .illus { margin-left: auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--d-muted); border: 1px dashed var(--d-field-border); padding: 0.2rem 0.55rem; border-radius: 99px; }
.hb-demo-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background:
  radial-gradient(70% 90% at 30% 0%, rgb(109 94 252 / 0.16), transparent 60%),
  radial-gradient(60% 80% at 100% 100%, rgb(255 122 89 / 0.14), transparent 60%), var(--d-alt); }
.hb-demo-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.hb-demo-screen { position: absolute; inset: 8%; background: var(--d-surface); border: 1px solid var(--d-border); border-radius: 12px; box-shadow: var(--d-shadow-md); display: flex; flex-direction: column; overflow: hidden; }
.hb-demo-screen .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--d-border); }
.hb-demo-screen .bar i { width: 10px; height: 10px; border-radius: 99px; background: var(--d-border); }
.hb-demo-screen .bar .ttl { margin-left: 6px; font-size: 0.7rem; font-weight: 700; color: var(--d-soft); }
.hb-demo-screen .label { flex: 1; display: grid; place-items: center; font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.6rem); color: var(--d-soft); }
.hb-demo-hotspot { position: absolute; border: 2px solid var(--d-accent); border-radius: 8px; box-shadow: 0 0 0 4px var(--d-glow); opacity: 0; }
.hb-demo-cursor { position: absolute; width: 22px; height: 22px; margin: -6px 0 0 -6px; pointer-events: none; z-index: 3; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35)); }
.hb-demo-cursor svg { display: block; }
.hb-demo-caption { padding: 0.9rem 1.1rem; font-size: 0.98rem; border-top: 1px solid var(--d-border); min-height: 3.2rem; }
.hb-demo-caption .step-n { font-weight: 800; color: var(--d-accent); margin-right: 0.4rem; }
.hb-demo-controls { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem 1rem; flex-wrap: wrap; }
.hb-demo-controls button { font: inherit; font-size: 0.86rem; font-weight: 700; padding: 0.45rem 0.9rem; border-radius: 99px; border: 1px solid var(--d-field-border); background: var(--d-surface); color: var(--d-text); cursor: pointer; }
.hb-demo-controls button:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent); }
.hb-demo-controls button:active:not(:disabled) { background: var(--d-violet-tint); border-color: var(--d-accent-strong); color: var(--d-accent-strong); transform: translateY(1px); }
.hb-demo-controls button:disabled { opacity: 0.45; cursor: default; }
.hb-demo-controls .play { background: var(--d-accent); color: #fff; border-color: transparent; }
.hb-demo-controls .play:hover:not(:disabled) { color: #fff; background: var(--d-accent-strong); }
.hb-demo-controls .play:active:not(:disabled) { color: #fff; background: var(--d-ink); border-color: transparent; }
.hb-demo-controls .counter { font-size: 0.85rem; color: var(--d-soft); }
.hb-demo-controls .dots { display: flex; gap: 4px; margin-left: auto; }
.hb-demo-controls .dots button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.hb-demo-controls .dots button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--d-field-border); }
.hb-demo-controls .dots button.on::before { background-image: var(--d-grad); }

/* ---- Faux-UI kit for demo page views ---- */
.mk-body { flex: 1; padding: 10px 12px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.mk-head { display: flex; align-items: center; justify-content: space-between; }
.mk-h { font-weight: 800; font-size: 0.95rem; }
.mk-meta { font-size: 0.72rem; color: var(--d-soft); font-weight: 700; }
.mk-sub { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--d-muted); }
.mk-btn, .mk-pill, .mk-field { cursor: default; user-select: none; }
.mk-btn { font-size: 0.72rem; font-weight: 800; color: #fff; background-image: var(--d-grad); padding: 0.3rem 0.62rem; border-radius: 99px; white-space: nowrap; }
.mk-btn.ghost { color: var(--d-accent); background: var(--d-surface); border: 1px solid var(--d-border); background-image: none; }
.mk-l1 { height: 7px; border-radius: 4px; background: var(--d-alt); }
.mk-l2 { height: 6px; border-radius: 4px; background: var(--d-alt); margin-top: 4px; opacity: 0.7; }
.mk-l2.short { width: 55%; }
.mk-grid, .mk-vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-card { border: 1px solid var(--d-border); border-radius: 8px; padding: 6px; }
.mk-cover { height: 32px; border-radius: 5px; background-image: var(--d-grad-soft); margin-bottom: 5px; }
.mk-vcard { border: 1px solid var(--d-border); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mk-ico { width: 32px; height: 32px; border-radius: 50%; background-image: var(--d-grad); }
.mk-tags { display: flex; gap: 3px; }
.mk-tags i { width: 14px; height: 5px; border-radius: 3px; background: var(--d-violet-tint); }
.mk-rows { display: flex; flex-direction: column; gap: 6px; }
.mk-row, .mk-qrow, .mk-srow, .mk-line { display: flex; align-items: center; gap: 8px; border: 1px solid var(--d-border); border-radius: 8px; padding: 7px 9px; }
.mk-rowtext { flex: 1; }
.mk-num { width: 18px; height: 18px; border-radius: 5px; background: var(--d-alt); display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; color: var(--d-soft); }
.mk-pill { font-size: 0.6rem; font-weight: 800; padding: 0.15rem 0.45rem; border-radius: 99px; background: var(--d-alt); color: var(--d-soft); }
.mk-pill.ok { background: var(--d-ok-bg); color: var(--d-ok); }
.mk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
.mk-col { display: flex; flex-direction: column; gap: 6px; }
.mk-wave { width: 26px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--d-g1), var(--d-g3)); opacity: 0.7; }
.mk-drop { border: 1px dashed var(--d-border); border-radius: 8px; padding: 8px; text-align: center; font-size: 0.68rem; color: var(--d-muted); }
.mk-field { border: 1px solid var(--d-border); border-radius: 8px; padding: 7px 9px; font-size: 0.72rem; color: var(--d-soft); }
.mk-wavebig { height: 22px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--d-g1) 0 2px, transparent 2px 6px); opacity: 0.4; }
.mk-script { flex: 1; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.mk-line .mk-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mk-dot.nar { background: var(--d-muted); }
.mk-dot.ch1 { background: var(--d-g1); }
.mk-dot.ch2 { background: var(--d-g3); }
.mk-line.sel { border-color: var(--d-accent); box-shadow: 0 0 0 2px var(--d-glow); }
.mk-vcr { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--d-border); padding-top: 8px; font-size: 0.9rem; color: var(--d-soft); }
.mk-vcr .big { color: var(--d-accent); font-size: 1.1rem; }
.mk-seek { flex: 1; height: 5px; border-radius: 3px; background: var(--d-alt); position: relative; }
.mk-seek i { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 3px; background-image: var(--d-grad); }
.mk-prog { flex: 1; height: 7px; border-radius: 4px; background: var(--d-alt); overflow: hidden; }
.mk-prog i { display: block; height: 100%; background-image: var(--d-grad); }
.mk-pct { font-size: 0.64rem; font-weight: 800; color: var(--d-soft); width: 30px; text-align: right; }
.mk-qctrls { display: flex; gap: 6px; }
.mk-file { font-size: 1rem; }

/* Motion only for people who have not asked for less. */
/* hidden is only used by the mobile sidebar toggle */
.doc-sidebar[hidden] { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .hb-demo-hotspot { transition: all 0.5s cubic-bezier(.4, 0, .2, 1); }
  .hb-demo-cursor { transition: left 0.6s cubic-bezier(.4, 0, .2, 1), top 0.6s cubic-bezier(.4, 0, .2, 1); }
  .hb-demo-cursor.click::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 99px; border: 2px solid var(--d-accent); animation: hbpulse 0.5s ease-out; }
  .dcard { transition: box-shadow 0.18s, border-color 0.18s; }
}
@keyframes hbpulse { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }

@media (max-width: 900px) {
  .doc-shell { grid-template-columns: 1fr; gap: 1rem; }
  .js .doc-side-toggle { display: inline-block; }
  .doc-sidebar { position: static; max-height: 60vh; overflow-y: auto; border-bottom: 1px solid var(--d-border); padding-bottom: 1rem; }
  .js .doc-sidebar[hidden] { display: none; }
  .next-links, .dgrid, .hb-startgrid { grid-template-columns: 1fr; }
  html { scroll-padding-top: 8rem; }
}

/* Phones: the mock needs more height and fewer rows to fit. */
@media (max-width: 600px) {
  .hb-demo-stage { aspect-ratio: 4 / 3; }
  .hb-demo-screen { inset: 4%; }
  .mk-grid .mk-card:nth-child(n+4), .mk-vgrid .mk-vcard:nth-child(n+4), .mk-rows > :nth-child(n+4) { display: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.docs-bar .bar-title { display: inline-flex; align-items: center; gap: 10px; }
.docs-bar .bar-title img { width: 36px; height: 36px; padding: 2px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); display: block; }
.hb-hero-art { display: block; width: 88px; max-width: 60%; height: auto; margin: 0 auto 0.5rem; }