.brand-hero{min-height:570px;display:grid;grid-template-columns:1.35fr .65fr;gap:58px;align-items:center}.brand-kicker{color:#61e5d2;font-size:12px;font-weight:900;letter-spacing:.19em}.brand-hero h1{font-size:clamp(48px,6.2vw,78px);line-height:1.05;letter-spacing:-.045em;margin:18px 0 24px;max-width:850px}.brand-lead{max-width:790px;color:#b9c0ce;font-size:18px;line-height:1.9}.brand-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.brand-status-card{background:linear-gradient(160deg,#161a23,#11141c);border:1px solid var(--border);border-radius:24px;padding:26px;box-shadow:0 26px 80px rgba(0,0,0,.25)}.brand-status-title{font-size:12px;letter-spacing:.16em;font-weight:900;color:#8e99b7;margin-bottom:18px}.brand-status-card dl{margin:0}.brand-status-card dl div{display:flex;justify-content:space-between;gap:18px;padding:17px 0;border-top:1px solid var(--border)}.brand-status-card dt{color:#94a0bf;font-size:13px}.brand-status-card dd{margin:0;color:#f7f4ef;font-size:13px;font-weight:800;text-align:right}.brand-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:12px 0 64px}.brand-feature-grid article{background:#0f1218;border:1px solid var(--border);border-radius:17px;padding:22px;min-height:180px}.brand-feature-grid article>span{display:block;color:#b694ff;font-size:12px;margin-bottom:32px}.brand-feature-grid h3{margin:0 0 8px;font-size:18px}.brand-feature-grid p{margin:0;color:#929bad;line-height:1.75;font-size:13px}.creator-page{max-width:820px;margin:0 auto;padding:36px 0 70px}.creator-page h2{font-size:clamp(42px,5vw,58px);letter-spacing:-.04em;margin:18px 0 28px}.creator-copy p{color:#c8ced9;line-height:2;font-size:16px;margin:0 0 18px}.creator-card{margin-top:30px;padding:20px;border-radius:16px;background:#11141b;border:1px solid var(--border)}.creator-card div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:8px 0}.creator-card span{color:#91a0c2}.creator-card b{font-weight:600}.bao-support-float{position:fixed;right:24px;bottom:22px;z-index:40;text-decoration:none;color:#e8bd80;background:rgba(43,31,22,.92);border:1px solid rgba(214,170,115,.3);backdrop-filter:blur(12px);padding:12px 16px;border-radius:12px;font-weight:800;font-size:13px;box-shadow:0 14px 40px rgba(0,0,0,.28);transition:.2s}.bao-support-float:hover{transform:translateY(-2px);border-color:rgba(214,170,115,.58);background:rgba(55,38,24,.96)}
.topbar{min-width:0}.topbar>.brand{flex:0 0 auto;white-space:nowrap}.topbar nav{display:flex;flex:1 1 auto;min-width:0;white-space:nowrap}.topbar nav button,.topbar nav>a{flex:0 0 auto;white-space:nowrap;word-break:keep-all;writing-mode:horizontal-tb}.topbar nav>a{display:inline-flex;align-items:center;padding:9px 12px;border-radius:9px;color:var(--muted);text-decoration:none}.topbar nav>a:hover{background:var(--surface2);color:var(--text)}
@media(max-width:900px){.brand-hero{grid-template-columns:1fr;gap:24px;padding-top:30px}.brand-feature-grid{grid-template-columns:1fr 1fr}.topbar{gap:14px}.topbar nav{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start}.topbar nav::-webkit-scrollbar{display:none}}
@media(max-width:560px){.brand-feature-grid{grid-template-columns:1fr}.brand-hero h1{font-size:43px}.brand-lead{font-size:16px}.bao-support-float{right:12px;bottom:12px}.creator-card div{grid-template-columns:1fr;gap:4px}.topbar{height:62px}.topbar>.brand{font-size:18px}.topbar nav{gap:2px}.topbar nav button,.topbar nav>a{padding:8px 9px;font-size:13px}}

/* One local vector mark across navigation, home and support. */
.topbar > .brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.topbar > .brand span{color:var(--text)}
.topbar > .brand .brand-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1}
.topbar > .brand .brand-wordmark strong{color:var(--text);font-size:1em;line-height:1;font-weight:900;letter-spacing:.08em}
.topbar > .brand .brand-wordmark small{color:var(--muted);font-size:10px;line-height:1;font-weight:700;letter-spacing:.12em}
.bao-mark,.bao-support-icon{display:inline-block;flex:none;object-fit:contain;vertical-align:middle}
.bao-support-float{display:inline-flex;align-items:center;gap:8px}
.brand-signature{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.brand-signature>span{font-size:22px;letter-spacing:.08em;font-weight:900}
.brand-signature small{display:block;margin-top:5px;color:var(--muted);font-size:12px;letter-spacing:.06em;font-weight:500}
.brand-hero-copy{min-width:0}
@media(max-width:560px){
  .topbar>.brand{gap:6px;font-size:16px;letter-spacing:.04em}
  .topbar .bao-mark{width:26px;height:26px}
  .brand-signature{margin-bottom:20px}
  .brand-signature>img{width:52px;height:52px}
}
@media(prefers-reduced-motion:reduce){.bao-support-float{transition:none}}

/* Donation is voluntary: show only the floating entry outside the story reader. */
.topbar nav>a[href*="ko-fi.com/roger2486"],
#chat-view aside>a[href*="ko-fi.com/roger2486"],
#about-view a[href*="ko-fi.com/roger2486"]{display:none!important}
body:has(#chat-view.active) .bao-support-float{display:none}

/* Product positioning lives on the About page so the homepage stays a clean entry point. */
.creator-page h2{margin-bottom:18px}
.creator-page h3{font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;margin:12px 0 22px}
.brand-about-lead{margin:0;color:#f2edf8;font-size:clamp(19px,2.2vw,24px);font-weight:800}
.brand-about-product{margin:28px 0 46px;padding:clamp(20px,3vw,28px);border:1px solid rgba(185,151,255,.28);border-radius:20px;background:linear-gradient(135deg,rgba(39,31,56,.9),rgba(19,23,34,.9))}
.brand-about-product p{color:#cbd0dd;line-height:1.9;font-size:16px;margin:0 0 14px}
.brand-about-product p:last-child{margin-bottom:0}
.brand-about-product .brand-about-focus{color:#f7f4ff;font-weight:900;letter-spacing:.04em;font-size:18px}
.brand-creator-kicker{margin-top:8px}