:root{--bg:#101116;--card:#181a21;--accent:#b8a6ff;--ink:#f4f0fb;--muted:#a4a3ab;--line:#2c2d34}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}header{height:90px;max-width:1440px;margin:auto;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:13px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:10px}.brand img{height:44px;width:44px;border-radius:50%}.brand span{font-size:9px;color:var(--accent);letter-spacing:3px}nav{display:flex;gap:32px;font-size:13px;color:var(--muted)}nav a:hover,.text-link:hover{color:var(--accent)}main{max-width:1440px;margin:auto}.hero{display:grid;grid-template-columns:1.12fr 1fr;min-height:730px;padding:65px 6% 70px;gap:6%;align-items:center}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--accent);font-weight:700}.hero h1{font-family:Georgia,serif;font-size:clamp(48px,5.6vw,82px);font-weight:400;line-height:1.04;letter-spacing:-3px;margin:28px 0}.hero h1 em{color:var(--accent);font-weight:400}.intro{max-width:360px;color:var(--muted);line-height:1.8;font-size:15px}.actions{display:flex;align-items:center;gap:24px;margin:30px 0 45px}.button{padding:17px 24px;display:inline-flex;gap:40px;align-items:center;font-size:13px;font-weight:700}.gold{background:var(--accent);color:#17171a}.gold:hover{background:#d0c3ff}.text-link{font-size:12px}.tags{display:flex;gap:20px;font-size:9px;letter-spacing:1.3px;color:var(--muted)}.hero-art{position:relative;max-width:460px;justify-self:end;width:100%;padding-bottom:24px}.hero-art:before{content:"";position:absolute;inset:-14px 14px 38px -14px;border:1px solid #7866a6;z-index:-1}.hero-art img{width:100%;max-height:650px;object-fit:cover;object-position:center 35%;display:block}.art-caption{font-size:8px;letter-spacing:2px;position:absolute;bottom:0;color:var(--muted)}.series{padding:65px 6% 85px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}h2{font-family:Georgia,serif;font-size:38px;font-weight:400;margin:14px 0}.badge{font-size:9px;letter-spacing:2px;border:1px solid #65548c;padding:9px 12px;color:var(--accent)}.series-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%}.synopsis{color:var(--muted);line-height:1.9;font-size:14px;max-width:360px;margin-top:0}.chapter{display:flex;gap:20px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}.chapter img{width:76px;height:76px;object-fit:cover;object-position:center 38%}.chapter div{flex:1}.chapter small{font-size:9px;letter-spacing:1.5px;color:var(--accent)}.chapter h3{font-family:Georgia,serif;font-size:23px;font-weight:400;margin:9px 0}.chapter>span{font-size:24px}.chapter:hover h3{color:var(--accent)}.upcoming{display:flex;align-items:center;gap:25px;border-top:1px solid var(--line);padding:18px 0;color:var(--muted)}.upcoming>span{font-family:Georgia,serif;font-size:30px;color:#56565e}.upcoming p{font-size:13px}.upcoming small{display:block;font-size:11px;margin-top:9px}.studio{padding:75px 6%;background:#181a20}.studio h2{font-size:46px;line-height:1.15}.studio>p:not(.eyebrow){color:var(--muted);max-width:550px;line-height:1.8;font-size:14px}.studio .text-link{display:inline-block;margin-top:20px;color:var(--accent)}footer{max-width:1440px;margin:auto;padding:40px 6%;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted)}footer p,footer small{font-size:10px}.reader-tools{position:sticky;top:0;background:#101116f5;z-index:5;padding:14px 5%;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);font-size:12px}.reader-tools button,.reader-tools select{background:var(--card);color:var(--ink);border:1px solid var(--line);padding:10px;border-radius:3px;max-width:45vw}.reader-title{text-align:center;padding:65px 15px}.reader-title h1{font-family:Georgia,serif;font-weight:400;font-size:42px}.reader-title>p:last-of-type{color:var(--muted);font-size:12px}#pages{max-width:800px;margin:auto;background:var(--bg)}#pages img{display:block;width:100%;height:auto}.reader-end{padding:65px 20px;text-align:center}.reader-end .text-link{display:block;margin-top:30px}.reader-end #coming{color:var(--muted);font-size:14px}.progress{position:fixed;bottom:0;left:0;right:0;height:3px;background:#303038;z-index:9}.progress span{display:block;background:var(--accent);height:100%;width:0}.resume{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:12px;cursor:pointer}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 22px;background:var(--accent);color:#111;display:none;font-size:12px;z-index:10}@media(max-width:700px){header{height:74px;padding:0 5%}.brand{font-size:10px;letter-spacing:1px;gap:6px}.brand span{font-size:7px;letter-spacing:1px}nav{gap:15px;font-size:11px}.brand img{width:34px;height:34px}.hero{padding:40px 6% 50px;gap:35px;grid-template-columns:1fr}.hero h1{font-size:58px;letter-spacing:-2px}.hero-art{max-width:360px;justify-self:center}.hero-art img{max-height:500px}.actions{gap:18px;flex-wrap:wrap;margin-bottom:28px}.series{padding:45px 6%}.series-layout{grid-template-columns:1fr;gap:25px}.synopsis{max-width:none}.section-heading h2{font-size:31px}.studio{padding:45px 6%}.studio h2{font-size:36px}footer{flex-direction:column;align-items:flex-start;padding:30px 6%}.reader-tools{padding:10px 12px;gap:8px;font-size:10px}.reader-tools button{max-width:90px}.reader-tools select{max-width:42vw;padding:10px 3px}.reader-title{padding:40px 16px}.reader-title h1{font-size:34px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.series-cover{display:block;width:100%;max-width:280px;aspect-ratio:2/3;object-fit:cover;margin-bottom:24px;border:1px solid var(--line)}

.library-home{padding:55px 6% 80px}.library-intro{max-width:760px}.library-intro h1{font:400 clamp(44px,5.4vw,70px)/1.08 Georgia,serif;letter-spacing:-2px;margin:20px 0}.library-intro h1 em{color:var(--accent)}.library-intro>p:not(.eyebrow){font-size:15px;line-height:1.8;color:var(--muted);max-width:490px}.library-stats{display:flex;gap:22px;margin:25px 0 48px;font-size:9px;letter-spacing:2px;color:var(--accent)}.library-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:22px}.library-heading h2{font-size:29px;margin:0}.library-heading>span{font-size:12px;color:var(--muted)}.series-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.series-card{overflow:hidden;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}.card-art{display:block;position:relative;height:320px;overflow:hidden;background:#191821}.card-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 31%;transition:transform .25s ease}.archmage-art img{object-position:center 43%}.card-art:hover img{transform:scale(1.025)}.card-art:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#101116d9)}.card-label{position:absolute;bottom:20px;left:24px;z-index:1;font-size:9px;font-weight:700;letter-spacing:2px;color:#eee9ff}.card-copy{padding:24px;display:flex;flex-direction:column;flex:1}.card-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:var(--accent)}.card-copy h2{font-size:29px;margin:16px 0 12px}.card-copy h2 a:hover{color:var(--accent)}.card-copy>p{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 24px}.card-actions{display:flex;align-items:center;gap:22px;margin-top:auto;flex-wrap:wrap}.card-actions .button{padding:14px 18px;gap:0}.library-back{display:inline-block;margin-bottom:30px;color:var(--accent)}
@media(max-width:700px){.library-home{padding:35px 6% 45px}.library-intro h1{font-size:48px}.library-stats{gap:16px;margin-bottom:35px;font-size:8px}.library-heading{display:block}.library-heading>span{display:block;margin-top:12px;font-size:11px}.series-grid{grid-template-columns:1fr;gap:25px}.card-art{height:300px}.card-copy{padding:22px}.card-copy h2{font-size:28px}.card-copy>p{font-size:13px}.card-actions{gap:20px}}
@media(prefers-reduced-motion:reduce){.card-art img{transition:none}.card-art:hover img{transform:none}}

/* Studio collection and featured story */
:root {
  --bg: #111016;
  --card: #1b1821;
  --line: #39313d;
  --accent: #b8a6ff;
  --muted: #b8adb9;
}
header {
  height: 72px;
  background: #141119;
}
nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.library-home {
  padding: 22px 5% 76px;
}
.feature {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 510px;
  overflow: hidden;
  border: 1px solid #504268;
  border-radius: 18px;
  background: #211923;
}
.feature-image {
  position: absolute;
  inset: 0 0 0 auto;
  width: 77%;
  height: 100%;
  object-fit: cover;
  object-position: center 37%;
  z-index: -2;
}
.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #17121d 8%, #17121df0 30%, #17121d48 70%, transparent), linear-gradient(0deg, #140e19b0, transparent 65%);
}
.feature-copy {
  padding: clamp(32px, 6vw, 80px);
  max-width: 710px;
}
.feature-copy .eyebrow span,
.feature-meta span {
  padding: 0 .4em;
}
.feature h1 {
  margin: 16px 0;
  font: 400 clamp(56px, 8vw, 116px)/.94 Georgia, serif;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.feature h1 em { color: var(--accent); font-weight: 400; }
.feature-description {
  max-width: 385px;
  font-size: 16px;
  line-height: 1.6;
  color: #e0d8df;
}
.feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 22px;
}
.feature-actions .button, .card-actions .button {
  min-height: 44px;
  border-radius: 7px;
  gap: 12px;
}
.feature-secondary {
  border: 1px solid #8d79c7;
  background: #1b1523c4;
}
.feature-secondary:hover { background: #3e3046; }
.feature-meta {
  font-size: 10px;
  letter-spacing: .14em;
  color: #dbd1ff;
}
.library-heading {
  margin-top: 58px;
  align-items: flex-end;
}
.library-heading h2, .updates h2 {
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: -.035em;
}
.series-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.series-card {
  border-radius: 13px;
  box-shadow: 0 12px 28px #0003;
}
.series-card:hover { border-color: #806baf; }
.card-art { height: auto; aspect-ratio: 4 / 4.6; }
.card-art img { object-position: center 36%; }
.archmage-art img { object-position: center 15%; }
.card-label { left: 14px; bottom: 14px; }
.card-copy { padding: 17px; }
.card-copy h2 { font-size: clamp(20px, 2vw, 28px); line-height: 1.12; }
.card-copy > p { font-size: 13px; line-height: 1.55; }
.card-actions { gap: 10px; }
.card-actions .button { padding: 10px 12px; }
.card-actions .text-link { padding: 10px 0; }
.updates { margin-top: 62px; }
.update-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.update {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.update:hover { border-color: var(--accent); }
.update img { width: 86px; height: 60px; border-radius: 4px; object-fit: cover; }
.update small { display: block; color: var(--accent); font-size: 9px; letter-spacing: .09em; }
.update strong { display: block; font: 400 20px Georgia, serif; margin-top: 6px; }
.update > span { color: var(--accent); padding-right: 7px; }
.studio { border-top: 1px solid var(--line); background: #191520; }
.chapter { border-radius: 6px; }
.chapter img { border-radius: 5px; }
.reader-tools button, .reader-tools select { min-height: 44px; }
@media (max-width: 980px) {
  .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-art { aspect-ratio: 5 / 4; }
}
@media (max-width: 620px) {
  header { height: 62px; }
  nav { gap: 11px; }
  .library-home { padding: 12px 4% 44px; }
  .feature { min-height: 490px; border-radius: 12px; }
  .feature-image { width: 100%; object-position: center 25%; }
  .feature::after { background: linear-gradient(0deg, #17121d 12%, #17121df0 29%, #17121d70 56%, transparent 80%); }
  .feature-copy { padding: 22px 19px; }
  .feature h1 { font-size: clamp(45px, 12vw, 68px); }
  .feature-description { font-size: 14px; }
  .feature-actions { gap: 8px; margin: 16px 0; }
  .feature-actions .button { padding: 11px 12px; }
  .feature-copy .eyebrow { letter-spacing: .1em; font-size: 9px; }
  .library-heading { margin-top: 38px; gap: 8px; }
  .library-heading > span { text-align: right; }
  .series-grid { gap: 10px; }
  .card-art { aspect-ratio: 4 / 4.8; }
  .card-copy { padding: 11px; }
  .card-meta { font-size: 8px; letter-spacing: .03em; gap: 4px; }
  .card-label { font-size: 8px; letter-spacing: .08em; left: 10px; bottom: 10px; }
  .card-copy h2 { margin: 11px 0 8px; }
  .card-copy > p { font-size: 12px; margin-bottom: 13px; }
  .card-actions .button { font-size: 12px; }
  .update-grid { grid-template-columns: 1fr; }
  .updates { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-art img { transition: none; }
}

.feature-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.feature-picker button {
  min-height: 48px;
  padding: 10px 12px;
  background: #1b1721;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}
.feature-picker button span {
  margin-right: 6px;
  color: var(--accent);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.feature-picker button:hover,
.feature-picker button[aria-pressed="true"] {
  background: #302641;
  border-color: #987fd5;
  color: var(--ink);
}
.feature[data-series="heir"] .feature-image { object-position: center 35%; }
.feature[data-series="farmer"] .feature-image { object-position: center 22%; }
.feature[data-series="archmage"] .feature-image { object-position: center 12%; }
.feature h1 {
  font-size: clamp(52px, 7.2vw, 102px);
  overflow-wrap: anywhere;
}
.continue-card {
  margin-top: 18px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: minmax(160px, .6fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  background: linear-gradient(105deg, #302344, #1e1925);
  border: 1px solid #594676;
  border-radius: 10px;
}
.continue-card:hover { border-color: var(--accent); }
.continue-card small {
  display: block;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .14em;
  margin-bottom: 5px;
}
.continue-card strong { font: 400 22px Georgia, serif; }
#continue-title { color: #ded3df; font-size: 14px; }
.continue-card > span:last-child { color: var(--accent); font-size: 23px; }
@media (max-width: 620px) {
  .feature-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .feature-picker button { padding: 7px 8px; font-size: 11px; min-height: 44px; }
  .feature h1 { font-size: clamp(43px, 11vw, 64px); }
  .continue-card { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px; }
  #continue-title { grid-column: 1; grid-row: 2; font-size: 12px; }
  .continue-card > span:last-child { grid-column: 2; grid-row: 1 / 3; }
}

/* Reader controls */
.reader-tools {
  justify-content: center;
  gap: 12px;
  background: #15111a;
  border-bottom-color: #594676;
}
.reader-tools #chapter-select { width: min(28vw, 280px); }
.reader-tools #all-chapters { padding: 10px 0; }
.page-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.page-tools label, #page-total { color: var(--muted); }
.page-tools #page-select { padding: 8px; }
#reader-focus { margin-left: 4px; cursor: pointer; }
#reader-focus[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
.reader-focused > header,
.reader-focused > footer { visibility: hidden; }
.reader-focused #reader { background: #0c0b10; }

@media (max-width: 620px) {
  .reader-tools {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: stretch;
    gap: 5px 8px;
    padding: 7px 10px;
  }
  .reader-tools #chapter-select { width: 100%; max-width: none; }
  .page-tools {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    padding-top: 5px;
  }
  #reader-focus { margin-left: auto; }
}

/* Vellum Gate's dark editorial palette */
:root {
  color-scheme: dark;
  --bg: #10131b;
  --card: #191e2a;
  --ink: #f2f3fa;
  --muted: #b5bdcf;
  --line: #353d50;
  --accent: #b9adff;
}
html { background: var(--bg); }
body { font-family: system-ui, sans-serif; }
header {
  background: var(--bg);
  border-bottom: 3px double #49516a;
}
.brand { color: var(--ink); }
.brand img { filter: none; }
nav { color: var(--ink); }
a:focus-visible, button:focus-visible, select:focus-visible {
  outline-color: var(--accent);
}
.feature-picker { gap: 0; border-block: 1px solid var(--line); }
.feature-picker button {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--muted);
}
.feature-picker button:hover,
.feature-picker button[aria-pressed="true"] {
  background: #23283a;
  border-color: var(--accent);
  color: var(--ink);
}
.feature {
  border: 0;
  border-radius: 8px;
  background: #151825;
  color: #f7f4ff;
}
.feature::after {
  background: linear-gradient(90deg, #151825 9%, #151825eb 30%, #15182540 72%, transparent),
              linear-gradient(0deg, #1518259c, transparent 64%);
}
.feature-copy .eyebrow, .feature-meta { color: #d9d0ff; }
.feature h1 em { color: #f7f4ff; }
.feature-description { color: #e2e5f3; }
.gold, #toast { background: var(--accent); color: #17132b; }
.gold:hover { background: #d0c6ff; }
.feature-secondary { background: #151825af; border-color: #777d9a; color: #fffaf6; }
.feature-secondary:hover { background: #2b3146; }
.feature-actions .button, .card-actions .button { border-radius: 8px; }
.library-heading, .updates { border-top: 3px double #49516a; padding-top: 18px; }
.library-heading .eyebrow, .updates .eyebrow { margin-top: 0; }
.library-heading h2, .updates h2 { margin-top: 6px; }
.series-card, .update, .continue-card {
  border-radius: 8px;
  box-shadow: none;
}
.series-card:hover { border-color: var(--accent); }
.card-art { background: #141824; }
.card-art::after { background: linear-gradient(transparent, #151825d9); }
.card-label { color: #fffaf6; }
.continue-card { background: #1e2332; border-color: #424a64; }
#continue-title { color: var(--muted); }
.studio { background: #171c28; }
.badge { border-color: #645b8c; }
.chapter:hover { background: #202638; }
.reader-tools { background: #11141df7; border-bottom-color: var(--line); }
.reader-tools button, .reader-tools select { background: var(--card); }
.reader-title { border-bottom: 1px solid var(--line); }
.reader-focused #reader { background: #141824; color: #fffaf6; }
.reader-focused .reader-tools { color: var(--ink); }
.reader-focused .reader-title .eyebrow,
.reader-focused .reader-title > p:last-of-type,
.reader-focused .reader-end .eyebrow,
.reader-focused .reader-end #coming,
.reader-focused .resume { color: #d4d9ee; }
.progress { background: #30374b; }
@media (max-width: 620px) {
  .feature::after {
    background: linear-gradient(0deg, #151825 11%, #151825ee 30%, #15182565 58%, transparent 82%);
  }
  .feature-picker button { border-bottom-width: 2px; }
}

.chapter-navigation {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.chapter-navigation .button { min-height: 44px; border-radius: 8px; }
@media (max-width: 620px) {
  .reader-tools #all-chapters,
  .reader-tools select,
  .reader-tools button { min-height: 44px; }
  .reader-tools #all-chapters { display: flex; align-items: center; }
  .reader-tools select, .reader-tools button { font-size: 12px; }
}

.install-bar {
  max-width: 1440px;
  margin: auto;
  padding: 0 5%;
  text-align: right;
}
#install-site {
  background: transparent;
  border: 0;
  color: var(--accent);
  min-height: 44px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 13px;
}
#install-site:hover { text-decoration: underline; }
#install-help {
  width: min(460px, calc(100% - 32px));
  padding: 24px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
}
#install-help::backdrop { background: #080a11bb; }
#install-help h2 { font-size: 26px; margin-top: 0; }
#install-help p { color: var(--muted); line-height: 1.5; }
#install-help button { border: 0; border-radius: 8px; cursor: pointer; }
.reader-focused .install-bar { display: none; }

.series-search { margin-bottom: 18px; }
.series-search label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}
.series-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.series-search input::placeholder { color: var(--muted); }
.series-search input:focus-visible { outline: 2px solid var(--accent); }
#series-search-status { color: var(--muted); font-size: 13px; margin: 8px 0; }
#series-search-status:empty { margin: 0; }
#series-results { margin: 0; padding: 0; list-style: none; }
#series-results a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
#series-results a:hover { color: var(--accent); background: var(--card); }

#search-toggle {
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}
#search-toggle:hover, #search-toggle[aria-expanded="true"] { color: var(--accent); }
#search-panel {
  display: block;
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 5%;
}
.reader-focused #search-panel { display: none; }

.feature { touch-action: pan-y pinch-zoom; }
.feature-navigation {
  position: absolute;
  inset: 12px 12px auto auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 3px;
  border-radius: 8px;
  background: #10131bf0;
  color: var(--ink);
  font-size: 13px;
}
.feature-navigation button {
  width: 44px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.feature-navigation button:hover { color: var(--accent); }

.feature-navigation { gap: 0; }
.feature-navigation button {
  width: 22px;
  background: transparent;
  border: 0;
}
.feature-navigation button::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: auto;
  border-radius: 50%;
  background: var(--muted);
}
.feature-navigation button[aria-pressed="true"]::after {
  width: 12px;
  border-radius: 6px;
  background: var(--accent);
}