/* ==========================================================================
   ANTIPHONUS 3.0 — fresh start, new format (PC-first).
   Naming convention: ap- = real component, BEM. No inherited 2.0 styles.
   ========================================================================== */

:root{
  --ap-color-bg:     #ffffff;
  --ap-color-ink:    #31394c;
  --ap-color-mid:    #7a7f84;
  --ap-color-dim:    #ededed;

  --ap-iconbar-w: 84px;
  --ap-topbar-h:  36px;
  /* space between the true viewport top and the (fixed) topbar itself */
  --ap-topbar-pad-top: 24px;
  /* space between the bottom of the (fixed) topbar and the page content
     below it — added on wherever --ap-topbar-h is used for clearance */
  --ap-topbar-gap: 10px;
  --ap-radius: 3px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ap-color-bg);
  color:var(--ap-color-ink);
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
  /* deter casual copy/save of the site's text and art — paired with
     no-copy.js blocking the right-click menu and image drag */
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}
img{max-width:100%;display:block;-webkit-user-drag:none;user-drag:none;}
a{color:inherit;}

/* ==========================================================================
   ICON BAR — fixed vertical nav, left edge, icons only
   ========================================================================== */
.ap-iconbar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--ap-iconbar-w);
  display:flex;flex-direction:column;align-items:center;
  /* icons as a group sit right under the top bar, not centered */
  justify-content:flex-start;
  padding-top:calc(var(--ap-topbar-pad-top) + var(--ap-topbar-h) + var(--ap-topbar-gap) + 20px);
  gap:32px;
  background:var(--ap-color-bg);
  z-index:10;
}
.ap-iconbar__item{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  color:var(--ap-color-mid);
  transition:color .15s ease;
}
.ap-iconbar__item svg{width:22px;height:22px;}
.ap-iconbar__item:hover{color:var(--ap-color-ink);}
.ap-iconbar__item.is-active{color:var(--ap-color-ink);}
/* selected item shows the solid/filled icon instead of the outline one */
.ap-iconbar__icon-solid{display:none;}
.ap-iconbar__item.is-active .ap-iconbar__icon-outline{display:none;}
.ap-iconbar__item.is-active .ap-iconbar__icon-solid{display:block;}

/* ==========================================================================
   TOP BAR — fixed, full width: logo + tagline left, profile right
   ========================================================================== */
.ap-topbar{
  position:fixed;
  top:var(--ap-topbar-pad-top);left:0;right:0;
  height:var(--ap-topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:0 28px;
  background:var(--ap-color-bg);
  z-index:20;
}
/* the topbar's own box only covers its own height — this fills the
   --ap-topbar-pad-top gap above it too, so the white background reaches
   all the way to the true top of the screen instead of leaving a strip
   scrolling content can show through */
.ap-topbar::before{
  content:"";
  position:fixed;
  top:0;left:0;right:0;
  height:var(--ap-topbar-pad-top);
  background:var(--ap-color-bg);
  z-index:20;
}
/* 4 small square dots, left of the logo — the dots' box is exactly
   the icon bar's width, pulled flush to the topbar's own left edge
   (cancelling the topbar's own padding), so the dots land centered on
   the same vertical line as the icon bar's icons below on desktop. */
.ap-topbar__dots{
  flex:none;
  width:var(--ap-iconbar-w);
  margin-left:-28px;
  display:grid;grid-template-columns:repeat(2,5px);grid-template-rows:repeat(2,5px);
  justify-content:center;align-content:center;
  gap:3px;
}
.ap-topbar__dots span{background:var(--ap-color-ink);}

.ap-topbar__brand{
  display:flex;align-items:baseline;gap:16px;
  flex:1 1 auto;
  min-width:0;
}
.ap-topbar__logo{
  font-weight:700;font-size:1.1rem;letter-spacing:.04em;font-variant:small-caps;
  white-space:nowrap;
  flex:none;
}
/* 3 stacked horizontal lines, right of the logo */
.ap-topbar__lines{
  flex:none;align-self:center;
  display:inline-flex;flex-direction:column;justify-content:center;
  gap:3px;
}
.ap-topbar__lines span{width:18px;height:2px;background:var(--ap-color-ink);}
/* rule trailing off after the breadcrumbs, filling the rest of the row */
.ap-topbar__rule{
  flex:1 1 auto;
  height:1px;
  min-width:24px;
  margin-left:4px;
  background:var(--ap-color-dim);
}
.ap-topbar__profile{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:none;
  color:var(--ap-color-mid);
  transition:color .15s ease;
}
.ap-topbar__profile svg{width:24px;height:24px;}
.ap-topbar__profile:hover,
.ap-topbar__profile.is-active{color:var(--ap-color-ink);}
/* solid/outline pair, same pattern as the icon bar below it — solid
   shows only once you're actually on the about page */
.ap-topbar__profile-icon-solid{display:none;}
.ap-topbar__profile.is-active .ap-topbar__profile-icon-outline{display:none;}
.ap-topbar__profile.is-active .ap-topbar__profile-icon-solid{display:block;}

@media (max-width:720px){
  .ap-topbar{padding:0 16px;gap:12px;}
  .ap-topbar__logo{font-size:.9rem;}
  .ap-topbar__dots,
  .ap-topbar__lines,
  .ap-topbar__rule{display:none;}
}

/* content clears the fixed bars */
.ap-main{margin-left:var(--ap-iconbar-w);padding-top:calc(var(--ap-topbar-pad-top) + var(--ap-topbar-h) + var(--ap-topbar-gap));}
@media (max-width:720px){
  .ap-main{margin-left:0;padding-bottom:var(--ap-iconbar-w);}
}

/* ==========================================================================
   BREADCRUMBS — one shared include (_includes/breadcrumbs.html), sitting
   inline in the topbar (_includes/topbar.html) where the tagline used to
   be, not a separate bar and not hand-written per page. Trail starts
   after "The Fool" (the logo already covers home), current page
   highlighted.
   ========================================================================== */
.ap-crumbs[hidden]{display:none;}
.ap-crumbs{
  display:flex;align-items:center;
  align-self:center;
  gap:6px;
  /* shrink (not grow) — sized to its own content, so the trailing
     .ap-topbar__rule line starts right after it instead of wherever
     a flex-grown box happened to end */
  flex:0 1 auto;
  min-width:0;
}
.ap-crumbs__trail{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:baseline;
  gap:6px;
  font-size:.75rem;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.ap-crumbs__link{
  color:var(--ap-color-mid);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.ap-crumbs__link:hover{border-color:var(--ap-color-mid);color:var(--ap-color-ink);}
.ap-crumbs__sep{flex:none;color:var(--ap-color-mid);}
.ap-crumbs__current{
  display:inline-block;
  padding:1px 6px;
  font-weight:600;
}

/* ==========================================================================
   HOME — left: hero + copy. right: vault tag-switcher.
   ========================================================================== */
.ap-home{
  display:grid;
  /* right column: at least 300px, growing to 30% of the row once 30%
     would exceed that — a floor, not a tier, so it's the same width
     no matter which vault panel is open (nothing here reacts to
     content, only to viewport width). Left column takes the rest. */
  grid-template-columns:1fr minmax(300px, 30%);
  gap:56px;
  padding:16px 48px 64px 24px;
}
/* desktop: the home page fits in the viewport, no page scroll.
   home-fit.js tries normal layout, then .is-compact, then — only if
   even that doesn't fit — shrinks the hero image itself to free up
   the room desc needs (text never shrinks, only the image does). */
@media (min-width:721px){
  /* explicit 1fr row (not just a height on the container) — the
     single implicit row otherwise sizes to its tallest item's own
     content, so the columns' bottom edge would creep up or down with
     whatever panel/tab is showing instead of always reaching the
     bottom of the viewport. */
  .ap-home{height:calc(100vh - var(--ap-topbar-pad-top) - var(--ap-topbar-h) - var(--ap-topbar-gap));grid-template-rows:1fr;overflow:hidden;}
}

/* text size and desc-line visibility scale with the right column's own
   rendered width (a CSS container query) — so, like the width itself,
   they depend only on how much room the column has, never on which
   vault panel/tab happens to be open. */
.ap-home__right{container-type:inline-size;container-name:ap-right;}
@container ap-right (max-width:360px){
  .ap-home__vault-title{font-size:1.4rem;}
  .ap-home__folder{width:64px;}
  .ap-home__folder svg{width:44px;height:44px;}
  .ap-home__char-title{font-size:.85rem;}
  .ap-home__char-desc{font-size:.7rem;}
  .ap-home__contact-card-label{font-size:.8rem;}
  .ap-home__contact-card-sub{font-size:.68rem;}
}
@container ap-right (max-width:320px){
  .ap-home__contact-card-sub{display:none;}
}

/* shared "highlighted" look — black fill, rounded corners, white text;
   used for the hero pull-quote and the vault tags alike */
.ap-blackbox{
  background:var(--ap-color-ink);
  color:var(--ap-color-bg);
  border-radius:var(--ap-radius);
  border:none;
  font:inherit;
  cursor:pointer;
}

/* --- left column ---
   Normal state: title/subtitle/highlight sit in flow below the image.
   When home-fit.js measures that this would overflow the no-scroll
   desktop viewport, it adds .is-compact to .ap-home, which moves that
   same content to overlay the image's bottom-left corner instead —
   only when there genuinely isn't room for it below. */
.ap-home__left{position:relative;display:flex;flex-direction:column;}
.ap-home__hero{position:relative;flex:none;}
.ap-home__hero-img{
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--ap-radius);
  background:var(--ap-color-dim);
}
.is-compact .ap-home__hero{margin-bottom:16px;}
.ap-home__highlight,
.ap-home__tag{
  display:inline-block;
  padding:2px 4px;
  font-size:.6rem;
  font-variant:small-caps;
  letter-spacing:.03em;
  line-height:1.5;
}
.ap-home__highlight{margin:0 0 16px;}

/* fake "now playing" widget — always pinned to the bottom of the hero
   image, no card/background of its own — just the title, a highlighted
   "chip" subtitle (same treatment as .ap-home__highlight), and a play
   button + waveform row, sitting directly on the photo */
.ap-home__player{position:absolute;left:20px;right:20px;bottom:20px;}
.ap-home__player-title-row{
  display:flex;align-items:baseline;flex-wrap:nowrap;
  gap:14px;
  margin-bottom:14px;
}
.ap-home__player-title{
  margin:0;flex:none;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:clamp(1.8rem,7vw,2.6rem);font-weight:800;letter-spacing:.02em;
  color:var(--ap-color-ink);
  white-space:nowrap;
}
.ap-home__player-artist{
  margin:0;
  color:var(--ap-color-mid);font-style:italic;
  font-size:clamp(.65rem,2.2vw,.9rem);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}

.ap-home__player-row{display:flex;align-items:center;gap:14px;}
.ap-home__player-btn{
  flex:none;
  display:flex;align-items:center;justify-content:center;
  padding:0;border:none;background:none;
  width:22px;height:22px;
  color:var(--ap-color-ink);
  cursor:pointer;
}
.ap-home__player-btn svg{width:100%;height:100%;}
.ap-home__player-btn--play{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--ap-color-ink);
  color:var(--ap-color-bg);
}
.ap-home__player-btn--play svg{width:20px;height:20px;}
/* default = playing, so the button shows the pause icon (click it to
   pause) — .hidden doesn't work reliably on <svg>, so this swaps them
   the same way the reader-page sidebar toggle icon does: two icons,
   one display:none at a time */
.ap-home__player-icon-play{display:none;}
.ap-home__player.is-paused .ap-home__player-icon-play{display:block;}
.ap-home__player.is-paused .ap-home__player-icon-pause{display:none;}

/* waveform — a row of bars of varying height, gently breathing while
   "playing", frozen when paused */
.ap-home__player-wave{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:3px;
  height:24px;
}
.ap-home__player-wave span{
  flex:1 1 auto;
  min-width:2px;max-width:3px;
  border-radius:2px;
  background:var(--ap-color-ink);
  animation:ap-home-player-wave 1.2s ease-in-out infinite;
}
/* stagger each bar's animation so they don't all pulse in lockstep —
   nth-child cycles through a handful of offsets rather than needing a
   delay value authored per bar */
.ap-home__player-wave span:nth-child(3n){animation-delay:-.1s;}
.ap-home__player-wave span:nth-child(3n+1){animation-delay:-.3s;}
.ap-home__player-wave span:nth-child(3n+2){animation-delay:-.5s;}
.ap-home__player-wave span:nth-child(5n){animation-delay:-.7s;}
.ap-home__player.is-paused .ap-home__player-wave span{animation-play-state:paused;}
@keyframes ap-home-player-wave{
  0%,100%{transform:scaleY(.7);}
  50%{transform:scaleY(1);}
}
/* desc sits at its own natural (content) width and height, top-aligned;
   the bar fills whatever width is left over beside it — however much
   or little that is — and stretches all the way down to the bottom of
   the column (which reaches the bottom of the viewport on desktop,
   .ap-home's own padding giving it breathing room there). */
.ap-home__below-row{
  flex:1 1 auto;
  display:flex;align-items:flex-start;
  gap:36px;
}
.ap-home__desc{
  flex:0 1 auto;
  margin:0;
  color:var(--ap-color-ink);
  font-size:.9rem;
  line-height:1.6;
}
.ap-home__desc-link{
  display:inline-block;
  white-space:nowrap;
  color:var(--ap-color-ink);
  text-decoration:none;
}
/* the arrow stays part of the clickable link but isn't underlined —
   only the "LINK/链接" text carries the border-bottom */
.ap-home__desc-link-text{
  border-bottom:1px solid var(--ap-color-mid);
  transition:border-color .15s ease;
}
.ap-home__desc-link:hover .ap-home__desc-link-text{border-color:var(--ap-color-ink);}
.ap-home__bar{
  flex:1 1 auto;
  align-self:stretch;
  border-radius:var(--ap-radius);
  background:var(--ap-color-ink);
}

/* --- right column --- */
.ap-home__vault-heading-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;
  margin:0 0 16px;
}
.ap-home__vault-title{margin:0;font-size:2rem;line-height:1.1;font-weight:800;letter-spacing:.02em;text-transform:uppercase;}
.ap-home__vault-title-small{font-size:.85rem;font-weight:600;}
.ap-home__reset{
  flex:none;
  background:none;border:none;padding:0;
  font:inherit;font-size:.75rem;
  font-variant:small-caps;
  color:var(--ap-color-mid);
  text-decoration:underline;
  cursor:pointer;
}
.ap-home__reset:hover{color:var(--ap-color-ink);}
/* tags — hidden while browsing the folder grid (__default panel);
   shown once a folder's been opened, so you can jump straight to
   another section without going back to the grid first */
.ap-home__tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
.ap-home__tags[hidden]{display:none;}
.ap-home__tag{
  background:none;
  color:var(--ap-color-ink);
  border:1px solid var(--ap-color-ink);
  transition:background-color .15s ease, color .15s ease;
}
.ap-home__tag:hover{background:var(--ap-color-dim);}
.ap-home__tag.is-active{
  background:var(--ap-color-ink);
  color:var(--ap-color-bg);
}
/* right column is a flex column so the panel area can grow to reach
   the same bottom edge as the (usually taller) left column.
   min-height:0 on both levels overrides the browser's default
   "don't shrink below content" behavior for grid/flex items — without
   it, a tall panel (e.g. novel, with its stats + progress bar) pushes
   .ap-home__right past the fixed 1fr row track instead of scrolling
   inside it, so the column's bottom edge crept down per-tab. */
.ap-home__right{display:flex;flex-direction:column;min-height:0;}
/* fills the column's full allotted height regardless of how little a
   given panel's content needs — otherwise a short panel (e.g. World's
   "In development...") just trails off into blank page instead of
   reading as one bounded "vault" block */
.ap-home__panels{
  flex:1 1 auto;display:flex;min-height:0;
  background:transparent;
}
.ap-home__panel{
  flex:1 1 auto;display:flex;flex-direction:column;
  min-height:0;
  color:var(--ap-color-mid);font-size:.9rem;line-height:1.6;
}
.ap-home__panel[hidden]{display:none;}
.ap-home__default-hint{margin:0 0 20px;color:var(--ap-color-mid);font-size:.85rem;}

.ap-home__coming-soon{margin:0;color:var(--ap-color-mid);}
.ap-home__dots span{
  display:inline-block;
  animation:ap-dot-pulse 1.8s infinite ease-in-out both;
}
.ap-home__dots span:nth-child(1){animation-delay:0s;}
.ap-home__dots span:nth-child(2){animation-delay:.3s;}
.ap-home__dots span:nth-child(3){animation-delay:.6s;}
@keyframes ap-dot-pulse{
  0%, 80%, 100%{opacity:.2;}
  40%{opacity:1;}
}
/* folders — only shown in the __default panel; each is icon + label,
   click to open that section's panel */
.ap-home__folders{display:flex;flex-wrap:wrap;gap:2px;}
.ap-home__folder{
  display:flex;flex-direction:column;align-items:center;
  gap:8px;
  width:100px;
  padding:10px 4px;
  background:none;border:none;border-radius:var(--ap-radius);
  color:var(--ap-color-ink);
  cursor:pointer;
  transition:background-color .1s ease;
}
/* like a real desktop file browser — hovering (or selecting) highlights
   the whole icon+label+count cell, not just the icon */
.ap-home__folder:hover,
.ap-home__folder.is-active{background:var(--ap-color-dim);}
.ap-home__folder svg{width:72px;height:72px;color:var(--ap-color-ink);transition:color .15s ease;}
.ap-home__folder:hover svg,
.ap-home__folder.is-active svg{color:var(--ap-color-mid);}
.ap-home__folder-label{font-size:.7rem;font-weight:600;font-variant:small-caps;}
.ap-home__folder-count{margin-top:-4px;font-size:.65rem;color:var(--ap-color-mid);}

.ap-home__about-line{margin:0 0 12px;font-size:.95rem;color:var(--ap-color-ink);}
.ap-home__about-legal{margin:0 0 24px;font-size:.75rem;line-height:1.6;color:var(--ap-color-mid);}

/* "Genre ----- action, horror, thriller" style leader row */
.ap-home__leader{
  display:flex;align-items:baseline;gap:10px;
  margin:0 0 16px;
  font-size:.85rem;
}
.ap-home__leader>span:first-child{flex:none;font-weight:600;font-variant:small-caps;}
.ap-home__leader>span:last-child{flex:none;color:var(--ap-color-mid);}
.ap-home__leader-line{flex:1 1 auto;border-bottom:1px dashed var(--ap-color-dim);margin-bottom:5px;}

/* blocky "loading bar" style progress meter, segments matching the
   tech-dashboard aesthetic elsewhere on the site */
.ap-home__progress{display:flex;align-items:center;gap:10px;margin:0 0 24px;}
.ap-home__progress-bar{
  display:flex;gap:2px;
  flex:1 1 auto;
  padding:3px;
  border:1px solid var(--ap-color-ink);
  border-radius:var(--ap-radius);
}
.ap-home__progress-seg{flex:1 1 0;height:10px;background:var(--ap-color-bg);border:1px solid var(--ap-color-dim);}
.ap-home__progress-seg.is-filled{background:var(--ap-color-ink);border-color:var(--ap-color-ink);}
.ap-home__progress-pct{
  flex:none;
  font-size:.75rem;font-weight:600;color:var(--ap-color-ink);
  font-variant:small-caps;
}

/* whole card is now the link (was a plain div with a trailing "[ > ]"
   button) — hover fills the row gray, same as the reader sidebar's
   folder-hover, and a play circle fades in over the thumbnail */
.ap-home__contact-card{
  display:flex;align-items:center;
  gap:16px;
  padding:8px 10px;
  margin:0 -10px;
  border-radius:var(--ap-radius);
  /* white by default so its (also-dim) thumbnail stays visible when
     the card sits inside .ap-home__panels' dim fill */
  background:var(--ap-color-bg);
  color:inherit;
  text-decoration:none;
  transition:background-color .15s ease;
}
.ap-home__contact-card:hover{background:var(--ap-color-dim);}
.ap-home__contact-card-img{
  position:relative;
  flex:none;width:56px;height:56px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-dim);
  overflow:hidden;
}
.ap-home__contact-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.ap-home__contact-card-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .15s ease;
}
.ap-home__contact-card:hover .ap-home__contact-card-play{opacity:1;}
.ap-home__contact-card-play svg{width:22px;height:22px;}
.ap-home__contact-card-text{
  flex:1 1 auto;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;
  text-align:left;
}
.ap-home__contact-card-label{font-size:.9rem;font-weight:600;color:var(--ap-color-ink);font-variant:small-caps;}
.ap-home__contact-card-sub{font-size:.75rem;color:var(--ap-color-mid);}

/* dark variant — only the title gets the highlighted "chip" treatment
   now, the rest of the card (image, sub text) stays exactly like a
   plain contact-card. */
.ap-home__contact-card--dark .ap-home__contact-card-label{
  display:inline-block;
  line-height:1.1;
  background:var(--ap-color-ink);
  color:var(--ap-color-bg);
  padding:1px 6px;
  border-radius:var(--ap-radius);
}

/* shared text-only "[ ... ]" button — char cards and contact cards
   alike: no border/fill by default, small caps, hover inverts to a
   solid highlight with flipped text color */
.ap-home__link-btn{
  display:inline-block;
  padding:4px 8px;
  font-size:.75rem;
  font-variant:small-caps;
  color:var(--ap-color-ink);
  text-decoration:none;
  border-radius:var(--ap-radius);
  transition:background-color .15s ease, color .15s ease;
}
.ap-home__link-btn:hover{
  background:var(--ap-color-ink);
  color:var(--ap-color-bg);
}

/* characters tab: two character cards side by side, then two
   contact-card-style rows (fanart/fanfic) below, full width, outside
   the split */
.ap-home__char-split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:28px;
}
/* whole card is the link now (was image+title+desc+separate button) —
   bordered box with inner padding, and the same play-circle-on-hover
   treatment as the contact cards */
.ap-home__char-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:14px;
  border:1px solid var(--ap-color-dim);
  border-radius:var(--ap-radius);
  /* white by default so the card and its (also-dim) image placeholder
     stay visible against .ap-home__panels' dim fill — hover still
     lands on dim, just now as a visible white-to-dim transition
     instead of dim-on-dim */
  background:var(--ap-color-bg);
  color:inherit;
  text-decoration:none;
  transition:background-color .15s ease;
}
.ap-home__char-card:hover{background:var(--ap-color-dim);}
.ap-home__char-img{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--ap-radius);
  background:var(--ap-color-dim);
  overflow:hidden;
  margin-bottom:12px;
}
.ap-home__char-card:hover .ap-home__contact-card-play{opacity:1;}
.ap-home__char-title{margin:0 0 2px;font-size:1rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ap-color-ink);}
.ap-home__char-desc{margin:0 0 10px;font-size:.8rem;color:var(--ap-color-mid);}

.ap-home__char-extra{display:flex;flex-direction:column;gap:16px;}

@media (max-width:720px){
  .ap-home{grid-template-columns:1fr;padding:24px;gap:36px;}
  .ap-home__panels{flex:none;}
  /* mobile always uses normal stacked flow below the image and scrolls
     the page — home-fit.js doesn't run below 721px, but this is a
     belt-and-suspenders override in case .is-compact is ever present.
     .ap-home__player stays pinned to the image at every width. */
  .is-compact .ap-home__hero{margin-bottom:0;}
}

@media (max-width:720px){
  :root{--ap-iconbar-w:56px;}
  .ap-iconbar{flex-direction:row;top:auto;bottom:0;left:0;right:0;width:auto;height:56px;padding-top:0;gap:0;justify-content:space-evenly;}
}

/* ==========================================================================
   ABOUT — tech-dashboard "profile card": no cell borders, monospace
   //LABEL_ fields. 2 rows, each its own column split via a 10-col
   track (50/50, then 30/70). Fixed content (not tab-driven like
   home), so a plain fr-sized grid is enough to make it fit with no
   scroll on desktop — no JS needed here.
   ========================================================================== */
.ap-about{
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  grid-template-rows:1fr 1.6fr;
  margin:24px 32px 32px calc(24px + 4px);
  font-family:ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
}
@media (min-width:721px){
  .ap-about{height:calc(100vh - var(--ap-topbar-pad-top) - var(--ap-topbar-h) - var(--ap-topbar-gap) - 56px);overflow:hidden;}
}
.ap-about__cell{
  position:relative;
  padding:16px 20px;
  min-width:0;min-height:0;
}

/* row A — 50/50: portrait art, then name + bio */
.ap-about__cell--art{grid-column:1/6;grid-row:1;}
.ap-about__cell--intro{grid-column:6/11;grid-row:1;display:flex;flex-direction:column;}

/* corner-bracket image frame */
.ap-about__frame{position:relative;width:100%;height:100%;min-height:100px;}
.ap-about__frame-img{width:100%;height:100%;background:var(--ap-color-dim);}
.ap-about__corner{position:absolute;width:14px;height:14px;border:2.5px solid var(--ap-color-ink);}
.ap-about__corner--tl{top:6px;left:6px;border-right:none;border-bottom:none;}
.ap-about__corner--br{bottom:6px;right:6px;border-left:none;border-top:none;}
.ap-about__frame-caption{
  position:absolute;right:24px;bottom:14px;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:1.3rem;font-weight:800;
  font-variant:small-caps;
  letter-spacing:.02em;
  color:var(--ap-color-ink);
  text-align:right;
}

.ap-about__intro-title{
  margin:0 0 8px;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:1.4rem;font-weight:800;letter-spacing:.02em;
  font-variant:small-caps;
}
.ap-about__intro-mark{
  color:var(--ap-color-ink);
  font-weight:800;
  margin-right:2px;
}
.ap-about__intro-bio{
  margin:0;flex:1 1 auto;
  max-width:60ch;
  font-size:.85rem;line-height:1.7;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--ap-color-mid);
}
.ap-about__intro-bio a{color:var(--ap-color-ink);text-decoration:underline;}
.ap-about__timeline{display:flex;align-items:center;gap:10px;font-size:.7rem;color:var(--ap-color-mid);}
.ap-about__timeline-line{flex:1 1 auto;height:1px;background:var(--ap-color-dim);}

/* row B — 30/70, fills the rest of the page's height: one full-height
   image, then everything else stacked on the right — contact links
   (each a plain "label ----- value" leader row) starting flush with
   the top of the image, closing note + barcode pushed down to the
   bottom via margin-top:auto */
.ap-about__cell--tall{grid-column:1/4;grid-row:2;}
.ap-about__tall-img{width:100%;height:100%;background:var(--ap-color-dim);}
.ap-about__cell--links{grid-column:4/11;grid-row:2;display:flex;flex-direction:column;}
.ap-about__leader-list{display:flex;flex-direction:column;gap:8px;}
.ap-about__leader{
  display:flex;align-items:baseline;gap:10px;
  font-size:1rem;letter-spacing:.03em;
}
.ap-about__leader>span:first-child{flex:none;font-weight:600;color:var(--ap-color-ink);font-variant:small-caps;}
.ap-about__leader-line{flex:1 1 auto;border-bottom:1px dashed var(--ap-color-dim);margin-bottom:4px;}
/* values (ids, handles, website names) read better without small caps
   at this size — labels above keep it, values opt back out — and run
   a touch smaller than the label/dashes either side of them */
.ap-about__leader-value{
  flex:none;
  font-variant:normal;
  font-size:.85rem;
  color:var(--ap-color-mid);
}
a.ap-about__leader-value,
button.ap-about__leader-value{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--ap-color-ink);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .15s ease;
}
button.ap-about__leader-value{
  background:none;border:none;border-bottom:1px solid transparent;
  padding:0;margin:0;
  font-family:inherit;
  cursor:pointer;
}
a.ap-about__leader-value:hover,
button.ap-about__leader-value:hover{border-color:var(--ap-color-ink);}
.ap-about__ext-icon{
  align-self:center;
  width:.7em;height:.7em;
  flex:none;
}
/* the whole value (text + icon) is the click target — clicking
   anywhere on it copies; the icon itself is just along for the ride,
   always dark like the text rather than needing a hover to darken */
.ap-about__copy-icon-default,
.ap-about__copy-icon-done{
  display:inline-flex;align-items:center;
  width:.7em;height:.7em;
  color:var(--ap-color-ink);
  flex:none;
}
.ap-about__copy-icon-done{display:none;}
.ap-about__copy-btn.is-copied .ap-about__copy-icon-default{display:none;}
.ap-about__copy-btn.is-copied .ap-about__copy-icon-done{display:inline-flex;}
.ap-about__copy-icon-default svg,
.ap-about__copy-icon-done svg{display:block;width:100%;height:100%;}

.ap-about__contact-note{
  margin:16px 0 0;
  max-width:60ch;
  font-size:.75rem;line-height:1.6;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--ap-color-mid);
}

.ap-about__closing{
  display:flex;flex-direction:column;
  margin-top:auto;
}
.ap-about__closing-label{
  align-self:flex-start;
  margin:0 0 10px;
  padding:2px 4px;
  font-size:.65rem;
  font-variant:small-caps;
  letter-spacing:.03em;
}
.ap-about__barcode{
  width:100%;height:32px;
  background-image:repeating-linear-gradient(90deg,
    var(--ap-color-ink) 0, var(--ap-color-ink) 2px,
    transparent 2px, transparent 4px,
    var(--ap-color-ink) 4px, var(--ap-color-ink) 7px,
    transparent 7px, transparent 9px,
    var(--ap-color-ink) 9px, var(--ap-color-ink) 10px,
    transparent 10px, transparent 14px,
    var(--ap-color-ink) 14px, var(--ap-color-ink) 17px,
    transparent 17px, transparent 18px);
  background-size:18px 100%;
}

@media (max-width:720px){
  .ap-about{
    grid-template-columns:1fr;
    grid-template-rows:none;
    height:auto;overflow:visible;
    margin:16px;
  }
  /* desktop rows pin every cell to an explicit grid-row for the 3-row
     split; without resetting that here, cells sharing a row number
     would stack on top of each other instead of flowing in order */
  .ap-about__cell{grid-column:1/-1;grid-row:auto;}
  .ap-about__cell--tall{min-height:220px;}
}

/* ==========================================================================
   SINGLE CHARACTER PAGE — one shared layout (_layouts/character.html),
   every character page is this exact structure with different front-
   matter data. 3 columns, 20/50/30.
   ========================================================================== */
.ap-char{
  display:grid;
  grid-template-columns:2fr 5fr 3fr;
  grid-template-areas:"left mid right";
  gap:28px;
  padding:16px 24px 48px;
}
/* full desktop width only — no-scroll, fixed-height 3-across layout */
@media (min-width:1001px){
  .ap-char{height:calc(100vh - var(--ap-topbar-pad-top) - var(--ap-topbar-h) - var(--ap-topbar-gap));overflow:hidden;}
}
/* thin, but not mobile-narrow: left/right sit side by side (50/50),
   middle drops below both and the page scrolls normally — the fixed-
   height 3-column math doesn't work once middle isn't beside them */
@media (min-width:721px) and (max-width:1000px){
  .ap-char{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "left right"
      "mid mid";
    height:auto;overflow:visible;
  }
}
.ap-char__col{min-width:0;min-height:0;display:flex;flex-direction:column;}
.ap-char__col--left{grid-area:left;}
.ap-char__col--mid{grid-area:mid;}
.ap-char__col--right{grid-area:right;}

/* --- left: headshot + data sheet — both full width of the column, so
   the image's own edges are the data rows' edges too --- */
.ap-char__col--left{overflow:hidden;}
.ap-char__headshot{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  margin:0 0 16px;
  background:var(--ap-color-dim);
  border-radius:var(--ap-radius);
  overflow:hidden;
}
/* name + one-liner sit on the image itself, bottom-left, over a dark
   scrim so they stay legible once a real photo replaces the placeholder */
.ap-char__headshot-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:32px 14px 14px;
  text-align:left;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent);
}
.ap-char__name{
  margin:0 0 4px;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:1.4rem;font-weight:800;letter-spacing:.02em;
  color:var(--ap-color-bg);
  text-align:left;
}
.ap-char__one-liner{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:.78rem;font-style:italic;
  color:var(--ap-color-bg);
  opacity:.85;
}
.ap-char__data{font-family:ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;}
.ap-char__data-group{margin-bottom:12px;}
.ap-char__data-group:last-child{margin-bottom:0;}
.ap-char__leader{
  display:flex;align-items:baseline;gap:8px;
  font-size:.72rem;letter-spacing:.03em;
  margin-bottom:4px;
}
.ap-char__leader>span:first-child{flex:none;font-weight:600;font-variant:small-caps;color:var(--ap-color-ink);}
.ap-char__leader>span:last-child{flex:none;color:var(--ap-color-mid);}
.ap-char__leader-line{flex:1 1 auto;border-bottom:1px dashed var(--ap-color-dim);margin-bottom:3px;}

/* --- middle: two tab-switched sections — background/personality/
   likes&dislikes/trivia, then key traits/ability. Each has its own
   scrollable panel area (a plain tab bar drives which panel shows,
   same pattern for both groups via character-panel-tabs.js). --- */
.ap-char__col--mid{overflow:hidden;}
.ap-char__tabs{flex:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.ap-char__tab{
  padding:3px 10px;
  border:none;border-radius:var(--ap-radius);
  font:inherit;font-size:.72rem;font-variant:small-caps;font-weight:600;
  background:var(--ap-color-dim);color:var(--ap-color-ink);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.ap-char__tab.is-active{background:var(--ap-color-ink);color:var(--ap-color-bg);}
/* solid bar, only under the first tab group */
.ap-char__solid-bar{flex:none;height:3px;background:var(--ap-color-ink);margin-bottom:16px;border-radius:var(--ap-radius);}
.ap-char__subtitle{
  margin:0 0 6px;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:.92rem;font-weight:800;
}
.ap-char__body{
  margin:0;
  font-size:.78rem;line-height:1.6;
  color:var(--ap-color-mid);
  /* front-matter fields are plain YAML block text (blank lines between
     paragraphs, "- " bullet lines) — preserve that instead of HTML
     collapsing it all onto one line */
  white-space:pre-line;
}
.ap-char__divider{flex:none;height:1px;background:var(--ap-color-dim);margin:16px 0;}

.ap-char__panel{display:none;}
.ap-char__panel.is-active{display:block;}

/* background/personality/likes&dislikes/trivia panel area — pinned to
   30% of the middle column's own vertical space, traits gets the rest */
.ap-char__bio-wrap{
  flex:0 0 30%;
  min-height:0;
  overflow-y:auto;
  padding-right:10px;
  scrollbar-width:thin;
  scrollbar-color:var(--ap-color-ink) var(--ap-color-dim);
}
.ap-char__bio-wrap::-webkit-scrollbar{width:8px;}
.ap-char__bio-wrap::-webkit-scrollbar-track{background:var(--ap-color-dim);}
.ap-char__bio-wrap::-webkit-scrollbar-thumb{background:var(--ap-color-ink);border-radius:var(--ap-radius);}
/* the 30% split only means something against the fixed column height
   the desktop no-scroll layout has — the thin tier's column is auto-
   height (page scrolls), so pin it to 30% of the viewport height
   instead, growing further if content needs more room. Must come
   after the base rule above so source order lets it win. */
@media (min-width:721px) and (max-width:1000px){
  .ap-char__bio-wrap{flex:none;min-height:30vh;max-height:40vh;}
}
.ap-char__likes-dislikes{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
/* same look as the regular subtitles, just smaller */
.ap-char__subtitle--sm{font-size:.75rem;}

/* ability tab panel: image left, ability name + desc right */
.ap-char__ability{display:flex;gap:16px;}
.ap-char__ability-img{flex:none;width:35%;aspect-ratio:3/4;border-radius:var(--ap-radius);background:var(--ap-color-dim);}
.ap-char__ability-text{flex:1 1 auto;min-width:0;}

/* the scroll and the fixed height live on the wrapper, not on the
   column-count element itself — a multicol box with a constrained
   height of its own tries to add MORE columns sideways to fit,
   producing horizontal scroll instead of the intended vertical one */
.ap-char__traits-wrap{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  /* breathing room between the cards and the scrollbar track */
  padding-right:10px;
  /* container query below keys off this element's own rendered width,
     so column-count reacts to the actual space available regardless
     of viewport size */
  container-type:inline-size;
  container-name:ap-traits;
  /* custom scrollbar: solid color, barely-rounded, always rendered
     (not the native overlay style that hides itself until scrolled) */
  scrollbar-width:thin;
  scrollbar-color:var(--ap-color-ink) var(--ap-color-dim);
}
.ap-char__traits-wrap::-webkit-scrollbar{width:8px;}
.ap-char__traits-wrap::-webkit-scrollbar-track{background:var(--ap-color-dim);}
.ap-char__traits-wrap::-webkit-scrollbar-thumb{background:var(--ap-color-ink);border-radius:var(--ap-radius);}
/* explicit column-count (not column-width) — column-width's "stretch
   to fill" behavior turned out unreliable at these widths, silently
   leaving columns narrower than the wrapper; column-count always
   divides the full available width evenly among N columns instead */
.ap-char__traits{
  column-count:1;
  column-gap:14px;
  width:100%;
}
@container ap-traits (min-width:240px){
  .ap-char__traits{column-count:2;}
}
@container ap-traits (min-width:380px){
  .ap-char__traits{column-count:3;}
}
.ap-char__trait-card{
  break-inside:avoid;
  display:inline-block;width:100%;
  margin-bottom:14px;
  padding:0;
  background:none;
  border-radius:var(--ap-radius);
  overflow:hidden;
  border:1px solid var(--ap-color-dim);
  font:inherit;text-align:left;
  cursor:pointer;
}
.ap-char__trait-img{width:100%;aspect-ratio:1/1;background:var(--ap-color-dim);}
.ap-char__trait-desc{
  margin:10px 10px 10px;
  font-size:.72rem;line-height:1.5;
  color:var(--ap-color-mid);
}

/* --- key trait click-through modal: full image left, desc right --- */
.ap-char__modal{
  position:fixed;inset:0;
  z-index:50;
  display:flex;align-items:center;justify-content:center;
}
.ap-char__modal[hidden]{display:none;}
.ap-char__modal-backdrop{
  position:absolute;inset:0;
  background:rgba(49,57,76,.6);
}
.ap-char__modal-panel{
  position:relative;
  display:flex;
  width:min(720px, 90vw);
  max-height:80vh;
  background:var(--ap-color-bg);
  border-radius:var(--ap-radius);
  overflow:hidden;
}
.ap-char__modal-close{
  position:absolute;top:8px;right:8px;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ap-color-bg);border:none;border-radius:var(--ap-radius);
  font-size:1.2rem;line-height:1;color:var(--ap-color-ink);
  cursor:pointer;
}
.ap-char__modal-img{flex:1 1 50%;background:var(--ap-color-dim);}
.ap-char__modal-text{flex:1 1 50%;padding:28px 24px;}
.ap-char__modal-text .ap-char__trait-desc{margin:0;font-size:.85rem;line-height:1.7;}
@media (max-width:720px){
  .ap-char__modal-panel{flex-direction:column;max-height:85vh;overflow-y:auto;}
  .ap-char__modal-img{aspect-ratio:1/1;}
}

/* --- right: image reference --- */
.ap-char__col--right{overflow:hidden;}
.ap-char__ref-tabs{flex:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.ap-char__ref-tab{
  padding:3px 8px;
  border:none;border-radius:var(--ap-radius);
  font:inherit;font-size:.7rem;font-variant:small-caps;
  background:var(--ap-color-dim);color:var(--ap-color-ink);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.ap-char__ref-tab.is-active{background:var(--ap-color-ink);color:var(--ap-color-bg);}
.ap-char__ref-panels{
  flex:1 1 auto;
  min-height:0;
  position:relative;
  margin-bottom:12px;
}
.ap-char__ref-img{
  display:none;
  width:100%;height:100%;
  background:var(--ap-color-dim);
  border-radius:var(--ap-radius);
}
.ap-char__ref-img.is-active{display:block;}
.ap-char__ref-more{
  flex:none;
  align-self:flex-start;
  display:inline-block;
  padding:6px 12px;
  font-size:.75rem;font-variant:small-caps;font-weight:600;
  text-decoration:none;
}

@media (max-width:720px){
  .ap-char{
    grid-template-columns:1fr;
    grid-template-areas:"left" "mid" "right";
    height:auto;overflow:visible;padding:16px;gap:32px;
  }
  .ap-char__likes-dislikes{grid-template-columns:1fr;gap:16px;}
  .ap-char__ability{flex-direction:column;}
  .ap-char__ability-img{width:100%;}
  /* same reasoning as the thin tier above — 30% of an auto-height
     column is meaningless, use the viewport height instead */
  .ap-char__bio-wrap{flex:none;min-height:30vh;max-height:40vh;}
  .ap-char__ref-panels{aspect-ratio:3/4;}
  /* full-width would make this quite tall on a narrow phone screen —
     cap it at half the viewport height instead, width follows from
     the 3:4 ratio (still defined on the base rule), centered */
  .ap-char__headshot{width:auto;height:50vh;margin:0 auto 12px;}
  /* .ap-char__col--mid is auto-height here, so flex:1 1 auto on the
     wrap never gets a bound to scroll within — it just grows and the
     whole gallery renders inline instead of scrolling. Give it an
     explicit cap so it stays its own scrollable box on mobile too. */
  .ap-char__traits-wrap{flex:none;max-height:45vh;}
}

/* ==========================================================================
   ALL CHARACTERS — /characters/all/. 60/40, no page scroll on desktop.
   ========================================================================== */
.ap-all-char{
  display:grid;
  grid-template-columns:35fr 65fr;
  gap:40px;
  padding:16px 24px;
}
@media (min-width:721px){
  .ap-all-char{height:calc(100vh - var(--ap-topbar-pad-top) - var(--ap-topbar-h) - var(--ap-topbar-gap));overflow:hidden;}
}
.ap-all-char__col{display:flex;flex-direction:column;min-width:0;min-height:0;}

/* --- left --- */
.ap-all-char__title{
  margin:0 0 10px;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:1.4rem;font-weight:800;letter-spacing:.02em;
}
.ap-all-char__openworld{
  flex:none;
  margin:0 0 20px;
  font-size:.78rem;line-height:1.6;
  color:var(--ap-color-mid);
}
/* thick diagonal hazard-stripe bar, pinned to the bottom of the column */
.ap-all-char__caution-bar{
  flex:none;
  height:16px;
  margin-top:auto;
  border-radius:var(--ap-radius);
  background-image:repeating-linear-gradient(45deg,
    var(--ap-color-ink) 0 10px,
    transparent 10px 20px);
}

/* --- right --- */
.ap-all-char__subtitle{
  flex:none;
  margin:0 0 12px;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:1.05rem;font-weight:800;
}
.ap-all-char__list-wrap{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;
  padding-right:10px;
  border-top:1px solid var(--ap-color-ink);
  border-bottom:1px solid var(--ap-color-ink);
  /* custom scrollbar: solid color, barely-rounded, always rendered */
  scrollbar-width:thin;
  scrollbar-color:var(--ap-color-ink) var(--ap-color-dim);
}
.ap-all-char__list-wrap::-webkit-scrollbar{width:8px;}
.ap-all-char__list-wrap::-webkit-scrollbar-track{background:var(--ap-color-dim);}
.ap-all-char__list-wrap::-webkit-scrollbar-thumb{background:var(--ap-color-ink);border-radius:var(--ap-radius);}
/* rectangular panel, 40/60 split: image left, info right */
/* the 2fr/3fr split is fr-based — flexible with the list's own width,
   but identical for every panel. Height is set per-panel by
   all-char-panel-height.js as the average of what the image (3:4 at
   this column's width) and the text side each naturally want, so a
   tall image doesn't unilaterally dictate the row; overflow:hidden
   trims whichever side ends up taller than that averaged height. */
.ap-all-char__panel{
  display:grid;
  grid-template-columns:1fr 4fr;
  gap:14px;
  padding:14px 10px 28px;
  margin:0 -10px;
  border-radius:var(--ap-radius);
  overflow:hidden;
  color:inherit;text-decoration:none;
  transition:background-color .15s ease;
}
.ap-all-char__panel:hover{background:var(--ap-color-dim);}
/* height comes from the panel's averaged height (set by JS); width is
   derived FROM that height via aspect-ratio, not stretched to fill the
   full column — otherwise the averaging would visibly squash the true
   3:4 vertical shape down toward square */
.ap-all-char__panel-img{width:auto;height:100%;aspect-ratio:3/4;border-radius:var(--ap-radius);background:var(--ap-color-dim);}
.ap-all-char__panel-text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;}
.ap-all-char__panel-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;}
.ap-all-char__panel-name{font-size:.95rem;font-weight:800;}
.ap-all-char__panel-sub{font-size:.72rem;color:var(--ap-color-mid);}
.ap-all-char__panel-id{
  display:inline-block;
  padding:1px 6px;
  font-family:ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  font-size:.65rem;
}
.ap-all-char__panel-alias{font-size:.72rem;color:var(--ap-color-mid);}
.ap-all-char__panel-desc{
  margin:2px 0 0;
  font-size:.78rem;line-height:1.5;
  color:var(--ap-color-mid);
}
.ap-all-char__count{
  flex:none;
  display:flex;align-items:baseline;gap:10px;
  margin-top:12px;
  font-size:.78rem;
}
.ap-all-char__count>span:first-child{flex:none;font-weight:600;font-variant:small-caps;}
.ap-all-char__count>span:last-child{flex:none;color:var(--ap-color-mid);}
.ap-all-char__count-line{flex:1 1 auto;border-bottom:1px dashed var(--ap-color-dim);margin-bottom:4px;}

@media (max-width:720px){
  .ap-all-char{grid-template-columns:1fr;height:auto;overflow:visible;gap:32px;padding:16px;}
  .ap-all-char__list-wrap{max-height:45vh;}
}

/* ==========================================================================
   GALLERY / FANART — one shared layout (_layouts/gallery.html), driven
   entirely by front matter (data_key, image_dir, show_credit, etc.) and
   _data/gallery.yml / _data/fanart.yml. No page scroll on desktop; the
   image grid is its own scrollable area, masonry via column-count.
   ========================================================================== */
.ap-gallery{
  display:flex;flex-direction:column;
  padding:16px 24px 48px;
}
@media (min-width:721px){
  .ap-gallery{height:calc(100vh - var(--ap-topbar-pad-top) - var(--ap-topbar-h) - var(--ap-topbar-gap));overflow:hidden;}
}
.ap-gallery__head{
  flex:none;
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;
}
.ap-gallery__title{
  margin:0;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:1.6rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
}
.ap-gallery__highlight{
  display:inline-block;
  padding:3px 8px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-ink);
  color:var(--ap-color-bg);
  font-size:.75rem;font-variant:small-caps;font-weight:600;
  text-transform:none;
}
.ap-gallery__cross-link{
  flex:none;
  display:inline-block;
  padding:6px 14px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-ink);
  color:var(--ap-color-bg);
  font-size:.8rem;font-weight:600;font-variant:small-caps;
  text-decoration:none;
}
.ap-gallery__body{
  flex:none;
  margin:10px 0 0;
  font-size:.85rem;line-height:1.6;
  color:var(--ap-color-mid);
}
.ap-gallery__body a{color:var(--ap-color-ink);text-decoration:underline;}
.ap-gallery__bar{flex:none;height:1px;background:var(--ap-color-dim);margin:16px 0;}

.ap-gallery__tabs{flex:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.ap-gallery__tab{
  padding:2px 9px;
  background:none;
  color:var(--ap-color-ink);
  border:1px solid var(--ap-color-ink);
  border-radius:var(--ap-radius);
  font:inherit;font-size:.7rem;font-variant:small-caps;letter-spacing:.03em;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.ap-gallery__tab:hover{background:var(--ap-color-dim);}
.ap-gallery__tab.is-active{background:var(--ap-color-ink);color:var(--ap-color-bg);}

/* the scrollable grid itself — no border, custom scrollbar to match
   every other scrollable box on the site */
.ap-gallery__grid-wrap{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;
  padding-right:10px;
  container-type:inline-size;
  container-name:ap-gallery-grid;
  scrollbar-width:thin;
  scrollbar-color:var(--ap-color-ink) var(--ap-color-dim);
}
.ap-gallery__grid-wrap::-webkit-scrollbar{width:8px;}
.ap-gallery__grid-wrap::-webkit-scrollbar-track{background:var(--ap-color-dim);}
.ap-gallery__grid-wrap::-webkit-scrollbar-thumb{background:var(--ap-color-ink);border-radius:var(--ap-radius);}

.ap-gallery__grid{column-count:3;column-gap:12px;width:100%;}
@container ap-gallery-grid (min-width:480px){.ap-gallery__grid{column-count:4;}}
@container ap-gallery-grid (min-width:680px){.ap-gallery__grid{column-count:5;}}
@container ap-gallery-grid (min-width:900px){.ap-gallery__grid{column-count:6;}}

/* thumbnails keep the source image's own ratio — no cropping */
.ap-gallery__item{
  position:relative;
  display:block;width:100%;
  break-inside:avoid;
  margin-bottom:12px;
  padding:0;border:none;background:none;
  border-radius:var(--ap-radius);
  overflow:hidden;
  cursor:pointer;
}
.ap-gallery__item.is-hidden{display:none;}
.ap-gallery__item img{width:100%;height:auto;display:block;}
.ap-gallery__item-tags{
  position:absolute;left:6px;bottom:6px;
  display:flex;flex-wrap:wrap;gap:4px;
}
.ap-gallery__item-tag{
  padding:1px 6px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-ink);
  color:var(--ap-color-bg);
  font-size:.62rem;font-variant:small-caps;
}
.ap-gallery__item-artist{
  position:absolute;right:6px;bottom:6px;
  padding:1px 6px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-ink);
  color:var(--ap-color-bg);
  font-size:.62rem;font-variant:small-caps;
}

/* --- lightbox: image only, or image + credit when the item has an
   artist. Click anywhere (backdrop or the image itself) closes it;
   only the credit link inside is exempt. --- */
.ap-gallery__modal{
  position:fixed;inset:0;
  z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:32px;
  background:rgba(0,0,0,.8);
  cursor:pointer;
}
.ap-gallery__modal[hidden]{display:none;}
.ap-gallery__modal-inner{
  display:flex;align-items:center;gap:20px;
  max-width:100%;max-height:100%;
}
.ap-gallery__modal-img{
  display:block;
  max-width:100%;max-height:calc(100vh - 64px);
  border-radius:var(--ap-radius);
  cursor:default;
}
.ap-gallery__modal-credit{
  flex:none;
  padding:20px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-bg);
  cursor:default;
}
.ap-gallery__modal-artist{display:block;margin-bottom:8px;font-weight:700;}
.ap-gallery__modal-artist-link{
  color:var(--ap-color-ink);
  font-size:.85rem;
  text-decoration:underline;
}

@media (max-width:720px){
  .ap-gallery{height:auto;overflow:visible;padding:16px;}
  .ap-gallery__head{flex-direction:column;align-items:flex-start;gap:10px;}
  .ap-gallery__grid-wrap{max-height:55vh;}
  .ap-gallery__modal-inner{flex-direction:column;max-height:90vh;overflow-y:auto;}
}

/* chapter listing on /story/chapters/ — same links the reader-page
   sidebar builds, just inline in the normal site chrome */
.ap-chapter-list{display:flex;flex-direction:column;max-width:420px;}
.ap-chapter-list__stage{
  margin:16px 0 4px;
  color:var(--ap-color-mid);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
}
.ap-chapter-list__link{
  padding:6px 0;
  color:var(--ap-color-ink);
  text-decoration:none;
  border-bottom:1px solid var(--ap-color-dim);
}
.ap-chapter-list__link:hover{color:var(--ap-color-mid);}

/* ==========================================================================
   WRITINGS (Fanfic) — /fan-work/fanfic/, a scrollable no-border list of
   linked fanfic entries (each opens its own reader page in a new tab).
   ========================================================================== */
.ap-writings{
  display:flex;flex-direction:column;
  padding:16px 24px 48px;
}
@media (min-width:721px){
  .ap-writings{height:calc(100vh - var(--ap-topbar-pad-top) - var(--ap-topbar-h) - var(--ap-topbar-gap));overflow:hidden;}
}
.ap-writings__head{flex:none;}
.ap-writings__title{
  margin:0;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;
  font-size:1.6rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
}
.ap-writings__highlight{
  display:inline-block;
  padding:3px 8px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-ink);
  color:var(--ap-color-bg);
  font-size:.75rem;font-variant:small-caps;font-weight:600;
  text-transform:none;
}
.ap-writings__body{
  flex:none;
  margin:10px 0 0;
  font-size:.85rem;line-height:1.6;
  color:var(--ap-color-mid);
}
.ap-writings__bar{flex:none;height:1px;background:var(--ap-color-dim);margin:16px 0;}

/* the scrollable list itself — no border, same custom scrollbar as
   every other scrollable box on the site */
.ap-writings__list-wrap{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;
  padding-right:10px;
  scrollbar-width:thin;
  scrollbar-color:var(--ap-color-ink) var(--ap-color-dim);
}
.ap-writings__list-wrap::-webkit-scrollbar{width:8px;}
.ap-writings__list-wrap::-webkit-scrollbar-track{background:var(--ap-color-dim);}
.ap-writings__list-wrap::-webkit-scrollbar-thumb{background:var(--ap-color-ink);border-radius:var(--ap-radius);}

.ap-writings__list{display:flex;flex-direction:column;gap:2px;}
.ap-writings__item{
  position:relative;
  display:flex;gap:12px;
  padding:12px 10px;
  border-radius:var(--ap-radius);
  color:var(--ap-color-ink);
}
.ap-writings__item:hover{background:var(--ap-color-dim);}
.ap-writings__item-icon{width:22px;height:22px;flex:none;margin-top:2px;color:var(--ap-color-mid);}
.ap-writings__item-body{flex:1 1 auto;min-width:0;}
.ap-writings__item-title{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-size:.95rem;font-weight:700;
}
.ap-writings__item-title-link{color:var(--ap-color-ink);text-decoration:none;}
.ap-writings__item-title-link:hover{text-decoration:underline;}
/* "stretched link" — the title's own click target expands to cover the
   whole row, so clicking anywhere in the item opens it, not just the
   title text itself. The pseudo-element must stay position:static on
   its host (the link) so `inset:0` resolves against the outer
   position:relative .ap-writings__item, not the link's own tiny box. */
.ap-writings__item-title-link::after{content:"";position:absolute;inset:0;z-index:0;}
.ap-writings__item-by{position:relative;z-index:1;font-size:.78rem;font-weight:400;color:var(--ap-color-mid);}
a.ap-writings__item-by{text-decoration:none;}
a.ap-writings__item-by:hover{text-decoration:underline;}
.ap-writings__item-lock{width:13px;height:13px;flex:none;color:var(--ap-color-mid);}

/* content rating badge — AO3-style (General/Teen/Mature/Explicit), just
   the first letter here since the row is already tight */
.ap-writings__item-rating{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:none;
  border-radius:50%;
  font-size:.6rem;font-weight:700;
  color:var(--ap-color-bg);
  background:var(--ap-color-mid);
}
.ap-writings__item-rating--mature{background:#c07a2e;}
.ap-writings__item-rating--explicit{background:#b3442f;}
.ap-writings__item-desc{
  margin:4px 0 0;
  font-size:.82rem;line-height:1.5;
  color:var(--ap-color-mid);
}
.ap-writings__item-counts{
  display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:6px;
  font-size:.7rem;color:var(--ap-color-mid);
}
.ap-writings__item-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.ap-writings__item-tag{
  padding:1px 7px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-dim);
  color:var(--ap-color-ink);
  font-size:.65rem;font-variant:small-caps;
}

@media (max-width:720px){
  .ap-writings{height:auto;overflow:visible;padding:16px;}
}

/* ==========================================================================
   NOVEL READER PAGE — _layouts/page.html, a standalone document (own tab,
   no topbar/iconbar/breadcrumbs). Own :root overrides for dark/warm modes
   since this is always the only content on the page.
   ========================================================================== */
html[data-mode="dark"]{
  --ap-color-bg:#1b1c22;
  --ap-color-ink:#e9e7e0;
  --ap-color-mid:#9a9fa8;
  --ap-color-dim:#2a2b33;
}
html[data-mode="warm"]{
  --ap-color-bg:#f6efe0;
  --ap-color-ink:#3a2f22;
  --ap-color-mid:#8c7a5f;
  --ap-color-dim:#ecdfc4;
}

:root{
  --ap-page-sidebar-w: 260px;
  --ap-page-header-h: 44px;
}

.ap-page-body{
  background:var(--ap-color-bg);
  color:var(--ap-color-ink);
  transition:background .15s ease,color .15s ease;
}

/* --- floating header: sidebar toggle | font size | mode --- */
.ap-page-header{
  position:fixed;top:16px;right:16px;z-index:30;
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;
  background:var(--ap-color-dim);
  border-radius:var(--ap-radius);
}
.ap-page-header__btn{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  padding:0;border:none;background:none;
  color:var(--ap-color-ink);
  cursor:pointer;
}
.ap-page-header__btn svg{width:18px;height:18px;}
.ap-page-header__btn-icon-solid{display:none;}
/* sidebar open (not collapsed) — swap the toggle icon to its filled state */
html:not(.is-sidebar-collapsed) .ap-page-header__btn-icon-outline{display:none;}
html:not(.is-sidebar-collapsed) .ap-page-header__btn-icon-solid{display:block;}
.ap-page-header__back{
  display:flex;align-items:center;gap:5px;
  padding:5px 9px 5px 6px;
  border-radius:var(--ap-radius);
  color:var(--ap-color-ink);
  font:inherit;font-size:.72rem;font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.ap-page-header__back:hover{background:var(--ap-color-bg);}
.ap-page-header__back svg{width:15px;height:15px;flex:none;}
.ap-page-header__rule{width:1px;align-self:stretch;background:var(--ap-color-dim);}
.ap-page-header__group{display:flex;align-items:center;gap:2px;}
.ap-page-header__opt{
  padding:4px 8px;
  border:none;background:none;
  border-radius:var(--ap-radius);
  color:var(--ap-color-mid);
  font:inherit;font-size:.72rem;
  cursor:pointer;
}
.ap-page-header__opt--font:nth-of-type(1){font-size:.62rem;}
.ap-page-header__opt--font:nth-of-type(3){font-size:.85rem;}
.ap-page-header__opt.is-active{background:var(--ap-color-ink);color:var(--ap-color-bg);}

/* --- sidebar: fixed IDE-style panel on desktop --- */
.ap-page-sidebar{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--ap-page-sidebar-w);
  overflow-y:auto;
  background:var(--ap-color-bg);
  padding:20px 0 20px;
  z-index:25;
  transition:transform .2s ease;
  scrollbar-width:thin;
  scrollbar-color:var(--ap-color-ink) var(--ap-color-dim);
}
.ap-page-sidebar::-webkit-scrollbar{width:8px;}
.ap-page-sidebar::-webkit-scrollbar-track{background:var(--ap-color-dim);}
.ap-page-sidebar::-webkit-scrollbar-thumb{background:var(--ap-color-ink);border-radius:var(--ap-radius);}
.ap-page-sidebar__head{
  padding:0 20px 14px;
  font-weight:700;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.04em;
}
.ap-page-sidebar__nav{display:flex;flex-direction:column;}

/* IDE-style file row — used for prologue chapters (top level) and for
   chapters nested inside a stage folder. Indent is a MARGIN, not padding,
   so the hover fill sits inset — starting just before the icon — instead
   of running full-bleed to the sidebar's edges. */
.ap-page-sidebar__file{
  display:flex;align-items:center;gap:7px;
  /* matches a folder-nested file's indent (12px folder-body + 22px file)
     even though prologue files sit outside any folder */
  margin:1px 10px 1px 34px;
  padding:4px 8px;
  border-radius:var(--ap-radius);
  color:var(--ap-color-ink);
  text-decoration:none;
  font-size:.82rem;
}
.ap-page-sidebar__file:hover{background:var(--ap-color-dim);}
.ap-page-sidebar__file.is-active{font-weight:700;}
.ap-page-sidebar__file-icon{width:14px;height:14px;flex:none;color:var(--ap-color-mid);}
.ap-page-sidebar__file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* IDE-style collapsible folder — one per stage */
.ap-page-sidebar__folder{margin-top:2px;}
.ap-page-sidebar__folder-btn{
  display:flex;align-items:center;gap:5px;
  margin:0 10px 0 8px;
  padding:6px 8px;
  border-radius:var(--ap-radius);
  border:none;background:none;
  color:var(--ap-color-mid);
  font:inherit;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.05em;
  text-align:left;
  cursor:pointer;
}
.ap-page-sidebar__folder-btn:hover{color:var(--ap-color-ink);background:var(--ap-color-dim);}
.ap-page-sidebar__chevron{width:12px;height:12px;flex:none;transition:transform .12s ease;}
.ap-page-sidebar__folder.is-open .ap-page-sidebar__chevron{transform:rotate(90deg);}
.ap-page-sidebar__folder-icon{width:14px;height:14px;flex:none;}
.ap-page-sidebar__folder-body{position:relative;display:flex;flex-direction:column;padding-left:12px;}
.ap-page-sidebar__folder-body[hidden]{display:none;}
/* indent guide — a thin vertical line under the folder's nested files,
   roughly aligned with the folder icon above it */
.ap-page-sidebar__folder-body::before{
  content:"";
  position:absolute;
  top:0;bottom:6px;left:19px;
  width:1px;
  background:var(--ap-color-dim);
}
/* the folder-body above already adds 12px, so its files only need the
   remaining 22px to land at the same 34px total as a top-level file */
.ap-page-sidebar__folder-body .ap-page-sidebar__file{margin-left:22px;}

/* mobile-only overlay backdrop — shown purely via CSS (no JS toggling,
   so it's correct on the very first paint, never flashed in late) */
.ap-page-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  z-index:20;
}

/* collapsed: slide the sidebar fully offscreen, header stays put */
html.is-sidebar-collapsed .ap-page-sidebar{transform:translateX(-100%);}

/* --- main reading column --- */
.ap-page-main{
  margin-left:var(--ap-page-sidebar-w);
  min-height:100vh;
  padding:80px 24px 80px;
  transition:margin-left .2s ease;
}
html.is-sidebar-collapsed .ap-page-main{margin-left:0;}

.ap-page{
  max-width:680px;
  margin:0 auto;
}
.ap-page__title{
  margin:0 0 10px;
  font-size:2rem;
}
.ap-page__rating{
  display:inline-block;
  vertical-align:middle;
  margin-left:8px;
  padding:2px 8px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-mid);
  color:var(--ap-color-bg);
  font-size:.55rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.ap-page__rating--mature{background:#c07a2e;}
.ap-page__rating--explicit{background:#b3442f;}
.ap-page__byline{
  margin:0 0 12px;
  font-size:.82rem;
  color:var(--ap-color-mid);
}
.ap-page__byline a{color:var(--ap-color-mid);text-decoration:underline;}
.ap-page__quote{
  margin:0 0 32px;
  padding-left:16px;
  border-left:2px solid var(--ap-color-dim);
  color:var(--ap-color-mid);
  font-style:italic;
}
.ap-page__body{
  font-size:var(--ap-page-font-size, 1.05rem);
  line-height:var(--ap-page-line-h, 1.85);
}
.ap-page__body p{margin:0 0 1.4em;}

/* password gate — shown instead of .ap-page__body until unlocked */
.ap-page__lock{
  max-width:320px;
  margin:8px 0;
  padding:18px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-dim);
}
.ap-page__lock-msg{margin:0 0 12px;font-size:.85rem;color:var(--ap-color-mid);}
.ap-page__lock-row{display:flex;gap:8px;}
.ap-page__lock-input{
  flex:1 1 auto;min-width:0;
  padding:8px 10px;
  border:none;border-radius:var(--ap-radius);
  background:var(--ap-color-bg);
  color:var(--ap-color-ink);
  font:inherit;font-size:.85rem;
}
.ap-page__lock-btn{flex:none;padding:8px 16px;font-size:.8rem;}
.ap-page__lock-error{margin:10px 0 0;font-size:.78rem;color:#b3442f;}

/* larger type reads better with a little more air between lines, not
   just bigger letters — matches the old reader's per-size ratios */
html[data-page-font-size="small"]{--ap-page-font-size:.9rem;--ap-page-line-h:1.75;}
html[data-page-font-size="medium"]{--ap-page-font-size:1.05rem;--ap-page-line-h:1.85;}
html[data-page-font-size="large"]{--ap-page-font-size:1.25rem;--ap-page-line-h:2;}

/* --- prev / next chapter nav, bottom of the reading column --- */
.ap-page-nav__bar{height:1px;background:var(--ap-color-dim);margin:48px 0 24px;}
.ap-page-nav{display:flex;justify-content:space-between;gap:16px;}
.ap-page-nav__link{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:4px;
  padding:10px 14px;
  border-radius:var(--ap-radius);
  background:var(--ap-color-dim);
  color:var(--ap-color-ink);
  text-decoration:none;
}
.ap-page-nav__link.is-disabled{visibility:hidden;}
.ap-page-nav__link--next{align-items:flex-end;text-align:right;}
.ap-page-nav__label{
  font-size:.62rem;
  color:var(--ap-color-mid);
  text-transform:uppercase;letter-spacing:.05em;
}
.ap-page-nav__title{
  font-size:.85rem;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}

@media (max-width:720px){
  .ap-page-sidebar{transform:translateX(-100%);z-index:40;}
  html:not(.is-sidebar-collapsed) .ap-page-sidebar{transform:translateX(0);}
  html:not(.is-sidebar-collapsed) .ap-page-backdrop{display:block;}
  .ap-page-main{margin-left:0;padding:96px 18px 60px;}
  .ap-page-header{left:16px;right:16px;flex-wrap:wrap;}
}

/* ==========================================================================
   SIMPLE PAGE — a plain title (+ optional subtitle) and some content
   below, no grid. Used by /gallery/ and /fan-work/.
   ========================================================================== */
.ap-simple-page{
  padding:16px 24px 48px;
  max-width:640px;
}
.ap-simple-page__title{
  margin:0 0 4px;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:1.6rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
}
.ap-simple-page__subtitle{
  margin:0 0 24px;
  color:var(--ap-color-mid);
  font-size:.9rem;
}
.ap-simple-page .ap-home__char-extra{margin-top:20px;}