.draft-bar { position: relative; z-index: 20; min-height: 30px; padding: 6px clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #11131a; color: #d6d9e4; border-bottom: 1px solid #343844; font: 700 9px/1.2 var(--mono); letter-spacing: .08em; }
.draft-bar a { color: #c8d3ff; text-decoration: none; }
.draft-bar a:hover { text-decoration: underline; }
.site-header { top: 30px; }
.category-note { margin-top: 19px; color: #d4dcf5; font: 600 11px/1.5 var(--mono); letter-spacing: .02em; }
.scene-caption { position: absolute; z-index: 3; right: clamp(28px, 5vw, 76px); bottom: 24px; width: min(300px, 38vw); display: grid; gap: 4px; color: #dbe2f6; }
.scene-caption strong { font-size: 15px; letter-spacing: -.02em; }
.scene-caption span { color: #bdc7df; font-size: 11px; line-height: 1.45; }
.participation { margin: 22px 0 0; color: #2846dc; font: 800 12px/1.55 var(--mono); }
.cola-copy .lead { margin-top: 17px; }
.holder-note { margin-top: 13px; color: #3a4051; font-size: 12px; font-weight: 750; }
.doc-inline { display: inline-block; margin-top: 14px; color: #1e3fc5; font-size: 12px; font-weight: 800; }
.final-action { flex-wrap: wrap; justify-self: auto; align-self: flex-start; }
.final-action .button-outline { border-color: var(--white); color: var(--white); background: transparent; }
.final-action .button-outline:hover { color: var(--black); background: var(--white); }
.flow-doc-link { display: inline-block; margin-top: 22px; color: #243fae; font-size: 13px; font-weight: 800; }
.example-ribbon { margin-top: 22px !important; padding: 13px 14px; border-left: 2px solid #dfe5ff; background: #1b3db7; color: #fff !important; font-size: 13px !important; line-height: 1.5 !important; }
.persona-build .hero { background: linear-gradient(106deg, var(--black) 0 54%, var(--blue) 54%); }
@media (max-width: 900px) {
  .scene-caption { position: relative; right: auto; bottom: auto; width: min(100%, 570px); margin: 32px auto 26px; padding: 0 8px; }
  .persona-build .hero { background: linear-gradient(155deg, var(--black) 0 49%, var(--blue) 49%); }
}
@media (max-width: 620px) {
  .draft-bar { padding-inline: 16px; font-size: 8px; }
  .persona-build .hero { background: linear-gradient(155deg, var(--black) 0 47%, var(--blue) 47%); }
  .final-action { align-items: flex-start; }
}

/* Documentation concepts share this local prototype stylesheet. */
.docs-lab-header { min-height: 74px; padding: 14px clamp(20px, 5vw, 76px); display: flex; justify-content: space-between; align-items: center; gap: 22px; border-bottom: 1px solid var(--line); }
.docs-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: .09em; text-decoration: none; }
.docs-brand small { display: block; margin-top: 4px; color: #aab8ff; font: 700 9px/1 var(--mono); }
.docs-lab-header nav { display: flex; gap: 20px; font: 700 10px/1.4 var(--mono); text-transform: uppercase; }
.docs-intro { max-width: 1150px; margin: auto; padding: clamp(64px, 9vw, 116px) 24px 55px; }
.docs-intro h1 { max-width: 980px; }
.docs-intro > p:not(.eyebrow) { max-width: 760px; color: #c8cede; font-size: 16px; line-height: 1.65; }
.docs-recommendation { max-width: 800px; margin: 30px 0 24px; padding: 16px 20px; display: grid; gap: 5px; border-left: 3px solid var(--blue); background: #111522; }
.docs-recommendation strong { color: #cfdaff; font-size: 13px; }.docs-recommendation span { color: #c5cada; font-size: 13px; line-height: 1.55; }
.docs-jump { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 12px; font-weight: 800; }
.docs-concept { padding: 72px max(24px, calc((100vw - 1150px) / 2)) 80px; }
.concept-vitepress { background: #e9edf6; color: #171b28; }
.concept-gitbook { background: #f8f8f6; color: #1e2330; }
.concept-heading { max-width: 1150px; margin: 0 auto 26px; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.concept-heading .eyebrow { margin-bottom: 10px; color: #435ab2; }
.concept-heading h2 { margin: 0; font-size: clamp(42px, 6vw, 72px); line-height: .95; letter-spacing: -.055em; }
.concept-heading > p { max-width: 420px; margin: 0 0 6px; color: #515666; font-size: 14px; line-height: 1.6; }
.vitepress-window { max-width: 1150px; min-height: 690px; margin: auto; display: grid; grid-template-columns: 228px minmax(0, 1fr); background: #fff; border: 1px solid #c8cdd9; box-shadow: 0 18px 55px #131c3415; }
.vp-sidebar { padding: 25px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; background: #f4f6fa; border-right: 1px solid #d9dde6; font-size: 12px; }
.vp-logo { margin-bottom: 18px; color: #213fae; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-decoration: none; }.vp-logo span { display: block; margin-top: 4px; color: #72798b; font: 700 8px/1 var(--mono); }
.vp-group { margin: 13px 0 4px; color: #747b8b; font: 700 9px/1.3 var(--mono); letter-spacing: .1em; }
.vp-sidebar > a:not(.vp-logo) { padding: 8px 10px; color: #404758; text-decoration: none; }.vp-sidebar > a.vp-active { color: #1e3fc5; background: #e2e8ff; font-weight: 750; }
.vp-sidebar > span { padding: 4px 9px; color: #72798b; }.vp-sidebar > small { margin: 5px 8px; color: #737a89; font-size: 10px; line-height: 1.45; }
.vp-article { max-width: 820px; padding: clamp(25px, 5vw, 60px); }
.sample-label { margin-bottom: 28px; display: flex; justify-content: space-between; gap: 10px; color: #3d55b6; font: 700 9px/1.3 var(--mono); letter-spacing: .1em; }.sample-label span { color: #73798a; }
.vp-kicker, .gb-kicker { margin: 0 0 10px; color: #68728c; font: 700 9px/1.4 var(--mono); letter-spacing: .1em; }
.vp-article h3 { margin: 0 0 14px; font-size: clamp(36px, 5vw, 54px); line-height: 1; letter-spacing: -.05em; }
.vp-article .vp-lead { margin: 0 0 33px; color: #4e5565; font-size: 17px; line-height: 1.65; }
.vp-article section { margin-top: 30px; scroll-margin-top: 24px; }.vp-article h4 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.03em; }
.vp-article section p, .vp-article li { color: #454b5a; font-size: 13px; line-height: 1.65; }.vp-article section ul { padding-left: 20px; }
.feed-types { margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.feed-types > div { padding: 14px; background: #f5f6fa; border: 1px solid #e0e3ea; }.feed-types b { font-size: 12px; }.feed-types p { margin: 7px 0 0; font-size: 11px !important; }
.quick-path { padding: 14px; background: #f3f5fb; }.quick-path strong { color: #263f9e; }
.concept-footnote { max-width: 1150px; margin: 12px auto 0; color: #616777; font-size: 11px; line-height: 1.5; }
.gitbook-window { max-width: 1150px; margin: auto; background: #fff; border: 1px solid #e1e3e8; box-shadow: 0 18px 55px #131c3410; }
.gb-top { min-height: 68px; padding: 16px 26px; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid #eceef1; }
.gb-brand { color: #1e2835; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-decoration: none; }.gb-brand span { margin-left: 9px; color: #808795; font: 600 10px/1 var(--mono); }
.gb-preview-tag { color: #737a87; font: 700 8px/1.3 var(--mono); letter-spacing: .08em; }
.gb-content { max-width: 890px; margin: auto; padding: clamp(28px, 6vw, 70px); }
.gb-content > h3 { margin: 0 0 10px; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.05em; }.gb-lead { color: #596170; font-size: 15px; }
.gb-entry-cards { margin: 27px 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gb-entry-cards a { min-height: 190px; padding: 17px; display: flex; flex-direction: column; gap: 10px; border: 1px solid #e0e3e8; color: inherit; text-decoration: none; }.gb-entry-cards a:hover { border-color: #8d9cd7; }
.gb-entry-cards span { color: #67728a; font: 700 8px/1.3 var(--mono); letter-spacing: .09em; }.gb-entry-cards b { font-size: 16px; }.gb-entry-cards small { color: #5d6471; font-size: 11px; line-height: 1.5; }.gb-entry-cards strong { margin-top: auto; color: #354fae; font-size: 10px; }
.gb-article { max-width: 680px; margin-top: 32px; padding-top: 25px; border-top: 1px solid #eceef1; scroll-margin-top: 20px; }.gb-article h4 { margin: 0 0 11px; font-size: 24px; letter-spacing: -.035em; }.gb-article > p:not(.gb-kicker), .gb-article li { color: #555d6a; font-size: 13px; line-height: 1.7; }.gb-article ul { padding-left: 20px; }
.gb-note { margin-top: 16px; padding: 16px; background: #f6f7f8; }.gb-note b { font-size: 12px; }.gb-note p { color: #555d6a; font-size: 12px; line-height: 1.65; }
.workflow-note { max-width: 1150px; margin: 22px auto 0; padding: 18px 20px; border-left: 3px solid #8a94ab; background: #fff; }.workflow-note p { margin: 0; color: #515867; font-size: 12px; line-height: 1.6; }.workflow-note p + p { margin-top: 5px; }.workflow-note strong { color: #252b38; }
.concept-gitbook .source-links { max-width: 1150px; margin: 14px auto 0; color: #555d6a; font-size: 11px; }
.docs-plan { padding: 76px max(24px, calc((100vw - 1000px) / 2)); background: #121521; }
.docs-plan .eyebrow { margin-bottom: 14px; }.docs-plan h2, .editorial-checklist h2 { margin: 0 0 25px; font-size: clamp(38px, 5vw, 62px); line-height: .98; letter-spacing: -.05em; }
.docs-plan > ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; counter-reset: plan; border-top: 1px solid #424858; }
.docs-plan > ol li { min-height: 72px; padding: 17px 12px 12px 0; border-bottom: 1px solid #424858; color: #d7dbea; font-size: 13px; }.docs-plan > ol li::before { counter-increment: plan; content: "0" counter(plan) " / "; color: #9aabff; font: 700 9px/1 var(--mono); }
.plan-columns { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }.plan-columns section { border-top: 2px solid #354eaa; padding-top: 15px; }.plan-columns h3 { margin: 0 0 10px; font-size: 18px; }.plan-columns p, .hosting-proposal { color: #bec4d4; font-size: 13px; line-height: 1.65; }
.hosting-proposal { margin: 35px 0 0; padding: 16px; background: #1b1f2b; }.hosting-proposal code { color: #e1e6f5; }
.editorial-checklist { max-width: 1000px; margin: auto; padding: 72px 24px; }.editorial-checklist .eyebrow { color: #adbcff; }.editorial-checklist ul { padding-left: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }.editorial-checklist li, .editorial-checklist > p:last-child { color: #c7ccda; font-size: 13px; line-height: 1.6; }.editorial-checklist > p:last-child { margin-top: 20px; color: #aab2c7; }
@media (max-width: 760px) {
  .docs-lab-header { align-items: flex-start; }.docs-lab-header nav { flex-direction: column; gap: 8px; text-align: right; }
  .concept-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .vitepress-window { grid-template-columns: 1fr; }.vp-sidebar { border-right: 0; border-bottom: 1px solid #d9dde6; }.vp-sidebar > small { max-width: 320px; }
  .gb-entry-cards { grid-template-columns: 1fr; }.gb-entry-cards a { min-height: 140px; }
  .docs-plan > ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .docs-lab-header { padding-inline: 14px; }.docs-intro { padding-inline: 16px; }.docs-concept { padding-inline: 15px; }
  .feed-types, .plan-columns, .editorial-checklist ul { grid-template-columns: 1fr; }
  .sample-label { flex-direction: column; }.vp-article { padding: 23px 19px; }.gb-content { padding: 25px 18px; }
  .docs-plan { padding-inline: 19px; }.docs-plan > ol { grid-template-columns: 1fr; }
  .editorial-checklist { padding-inline: 19px; }.gb-top { padding-inline: 16px; }
}