/* The approved pages-and-roots mark. Keep each existing wordmark as its text label. */
:root {
  --ficroot-mark-color:#bca2ff;
  --ficroot-mark-height:28px;
  --fr-ink:#f8f7fc;
  --fr-muted:#b5b3c5;
  --fr-surface:#17171f;
  --fr-border:#ffffff18;
  --fr-accent:#bca2ff;
  --fr-gold:#ffd27b;
  --fr-display:'FicRoot Display',Manrope,Arial,sans-serif;
  --fr-ease:cubic-bezier(.2,.7,.2,1);
}
@font-face{font-family:'FicRoot Display';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/home/syne-variable.ttf') format('truetype')}
body .ficroot-wordmark,
body .simple-brand.ficroot-wordmark {
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
  white-space:nowrap;
}
body .ficroot-wordmark::before,
.studio-sidebar .studio-brand::before,
.writer-wordmark::before,
.console-sidebar .wordmark::before,
.auth-wordmark::before,
.account-loading-mark::before,
.account-welcome-emblem::before {
  content:"";
  display:block;
  flex:none;
  width:calc(var(--ficroot-mark-height) * 104 / 120);
  height:var(--ficroot-mark-height);
  background:var(--ficroot-mark-color);
  -webkit-mask:url('/brand-mark.svg?v=20261004-logo1') center / contain no-repeat;
  mask:url('/brand-mark.svg?v=20261004-logo1') center / contain no-repeat;
}
body .simple-footer .ficroot-wordmark {
  --ficroot-mark-height:24px;
  gap:8px;
}
/* A shared grid keeps the mark beside both lines of the studio and auth lockups. */
.studio-sidebar .studio-brand,
.writer-wordmark,
.console-sidebar .wordmark,
.auth-wordmark {
  display:grid;
  grid-template-columns:24.27px max-content;
  column-gap:10px;
  align-items:center;
}
.studio-sidebar .studio-brand::before,
.writer-wordmark::before,
.console-sidebar .wordmark::before,
.auth-wordmark::before {
  grid-column:1;
  grid-row:1 / span 2;
}
.studio-sidebar .studio-brand>span,
.writer-wordmark>span,
.console-sidebar .wordmark>small,
.auth-wordmark>span {
  grid-column:2;
}
/* These badges are already aria-hidden; replace their decorative F with the mark. */
.account-loading-mark,
.account-welcome-emblem {
  --ficroot-mark-height:38px;
  font-size:0;
}
@media(max-width:700px) {
  body .ficroot-wordmark { --ficroot-mark-height:24px; gap:7px; }
  .studio-sidebar .studio-brand { grid-template-columns:20.8px max-content; --ficroot-mark-height:24px; gap:8px; }
}
@media(forced-colors:active) {
  :root { --ficroot-mark-color:CanvasText; }
}

/* Shared public navigation. Chapter-reader chrome keeps the reader's theme. */
html:has(.simple-header) {scroll-padding-top:112px}
body:has(.simple-header)>header.simple-header,
body.reference-home>header.simple-header.home-header {
  box-sizing:border-box;display:flex;align-items:center;gap:32px;position:sticky;top:12px;z-index:40;
  width:calc(100% - 48px);max-width:1488px;min-height:76px;height:auto;margin:14px auto 0;padding:12px 22px;
  border:1px solid #bca2ff24;border-radius:18px;
  background:radial-gradient(ellipse at 0 0,#bca2ff14,transparent 48%),linear-gradient(120deg,#191620f5,#101016f5);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 8px 30px #0003,inset 0 1px #ffffff08;color:var(--fr-ink);
}
body:has(.simple-header)>.simple-header .simple-brand {
  color:var(--fr-ink);font:800 27px/1.1 Manrope,Arial,sans-serif;letter-spacing:-1px;text-transform:lowercase;
  min-height:44px;gap:10px;text-decoration:none;
}
body:has(.simple-header)>.simple-header .simple-brand::before {filter:drop-shadow(0 2px 10px #bca2ff30)}
body:has(.simple-header)>.simple-header>nav {
  display:flex;align-items:center;height:auto;gap:4px;margin:0;padding:4px;border-radius:12px;background:#08080e66;border:1px solid #ffffff08;
}
body:has(.simple-header)>.simple-header>nav a {
  display:flex;align-items:center;justify-content:center;min-height:42px;height:auto;padding:10px 16px;
  border:1px solid transparent;border-radius:8px;font:600 13px/1.4 Manrope,Arial,sans-serif;
  color:var(--fr-muted);text-decoration:none;transition:background .18s var(--fr-ease),color .18s,border-color .18s;
}
body:has(.simple-header)>.simple-header>nav a::after,
body:has(.simple-header)>.simple-header>nav a.active::after {content:none}
body:has(.simple-header)>.simple-header>nav :is(a.active,a[aria-current="page"]) {
  color:#f2eaff;background:linear-gradient(135deg,#bca2ff28,#bca2ff12);border-color:#bca2ff35;box-shadow:inset 0 1px #ffffff0c;
}
body:has(.simple-header)>.simple-header>nav a:hover {color:#fff;background:#bca2ff16}
body:has(.simple-header)>.simple-header .simple-actions {display:flex;align-items:center;margin-left:auto;gap:8px}
body:has(.simple-header)>.simple-header .reader-account-nav {display:flex;align-items:center;gap:12px;margin-left:0;font-size:13px}
body:has(.simple-header)>.simple-header :is(.reader-library-link,.reader-write-link) {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 13px;border-radius:10px;border:1px solid #ffffff16;
  font:600 12px/1.4 Manrope,Arial,sans-serif;background:#ffffff04;color:#eee8f8;text-decoration:none;transition:background .18s,border-color .18s;
}
body:has(.simple-header)>.simple-header .reader-library-link svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}
body:has(.simple-header)>.simple-header :is(.reader-library-link[aria-current="page"],.reader-library-link:hover,.reader-write-link:hover) {color:#e8dcff;background:#bca2ff16;border-color:#bca2ff45}
body:has(.simple-header)>.simple-header :is(.header-search-link,.home-icon-button,.simple-menu) {
  display:grid;place-items:center;flex-shrink:0;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;margin:0;
  background:#ffffff05;color:#dfd5f0;border:1px solid #ffffff16;border-radius:10px;text-decoration:none;transition:background .18s,border-color .18s;
}
body:has(.simple-header)>.simple-header .simple-menu {display:none;font:22px/1 Arial,sans-serif;cursor:pointer}
body:has(.simple-header)>.simple-header :is(.header-search-link,.home-icon-button,.simple-menu):hover {background:#bca2ff16;border-color:#bca2ff55}
body:has(.simple-header)>.simple-header .reader-signin {
  min-height:44px;padding:10px 16px;border-radius:10px;border:1px solid #bca2ff60;background:#bca2ff22;color:#ede3ff;
  font:600 13px/1.4 Manrope,Arial,sans-serif;cursor:pointer;transition:background .18s,border-color .18s;
}
body:has(.simple-header)>.simple-header .reader-signin:hover {background:#bca2ff38;border-color:#bca2ff90}
body:has(.simple-header)>.simple-header .reader-account-menu>summary {display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:50%;outline-offset:4px;border:1px solid #bca2ff55;background:#bca2ff10;padding:3px;cursor:pointer;box-shadow:0 0 0 3px #bca2ff06;transition:box-shadow .18s}
body:has(.simple-header)>.simple-header .reader-account-menu[open]>summary {box-shadow:0 0 0 4px #bca2ff1c}
body:has(.simple-header)>.simple-header .reader-account-menu>summary .reader-avatar {width:36px;height:36px;border:0;font-size:12px}
body:has(.simple-header)>.simple-header .reader-account-menu>div {margin-top:12px;border:1px solid #bca2ff38;border-radius:14px;background:#191620;box-shadow:0 16px 48px #0008;padding:10px;max-width:calc(100vw - 28px)}
body:has(.simple-header)>.simple-header .reader-account-menu>div :is(a,button) {min-height:44px;border-radius:8px;transition:background .16s}
body:has(.simple-header)>.simple-header :is(a,button,summary):focus-visible,
body:has(.simple-header)>#mobile-nav a:focus-visible {outline:2px solid #e2d5ff;outline-offset:3px}
body:has(.simple-header)>.simple-header :is(button,a):active {filter:brightness(1.16)}
body:has(.simple-header)>#mobile-nav {position:relative;inset:auto;z-index:39;width:calc(100% - 32px);max-width:860px;margin:8px auto 0;padding:10px;border:1px solid #bca2ff35;border-radius:14px;background:#191620;box-shadow:0 14px 36px #0005;animation:fr-menu-in .18s var(--fr-ease)}
body:has(.simple-header)>#mobile-nav[hidden] {display:none!important}
body:has(.simple-header)>#mobile-nav a {display:flex;align-items:center;min-height:46px;padding:12px 14px;color:#ddd3eb;border-radius:8px;font:600 14px/1.5 Manrope,Arial,sans-serif;text-decoration:none}
body:has(.simple-header)>#mobile-nav a:hover,
body:has(.simple-header)>#mobile-nav a[aria-current="page"] {background:#bca2ff18;color:#fff}
@keyframes fr-menu-in {from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:1100px) {
  body:has(.simple-header)>header.simple-header,body.reference-home>header.simple-header.home-header {gap:18px;padding-inline:18px}
  body:has(.simple-header)>.simple-header>nav a {padding-inline:12px}
}
@media(max-width:900px) {
  body:has(.simple-header)>.simple-header>nav {display:none}
  body:has(.simple-header)>.simple-header .simple-menu {display:grid}
  body:has(.simple-header)>.simple-header .reader-write-link {display:none}
}
@media(max-width:700px) {
  body:has(.simple-header)>header.simple-header,body.reference-home>header.simple-header.home-header {width:calc(100% - 20px);min-height:64px;margin-top:8px;padding:8px 10px;gap:8px;top:8px;border-radius:14px;flex-wrap:wrap}
  body:has(.simple-header)>.simple-header .simple-brand {font-size:24px;gap:7px}
  body:has(.simple-header)>.simple-header .reader-account-nav {gap:6px;margin-left:auto}
  body:has(.simple-header)>.simple-header .reader-library-link {width:44px;padding:0;font-size:0}
  body:has(.simple-header)>.simple-header .reader-library-link span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  body:has(.simple-header)>.simple-header .reader-signin {padding:8px 10px}
  body:has(.simple-header)>.simple-header .simple-actions:empty,
  body:has(.simple-header)>.simple-header .simple-actions:has(.header-search-link,.home-icon-button) {display:none!important}
  body:has(.simple-header)>.simple-header .reader-account-menu>div {position:fixed;top:82px;right:10px;left:auto;margin:0}
}
@media(prefers-reduced-motion:reduce) {
  body:has(.simple-header)>.simple-header *,body:has(.simple-header)>#mobile-nav {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}