:root{
  /* App chrome — dark. */
  --bg:#0f1115; --panel:#161a21; --line:#252b36; --txt:#e6e8ec; --dim:#9aa3b2;
  --accent:#c8402f; --ad:#1b2029; --link:#7fb4ff;
  /* Article surface — light, and not a style preference.
     201 of 395 guides ship their own stylesheet, and those sheets were written
     when the guide was the entire page: they set things like
     ".body-bold {color:#111}" and "h4 {color:#000}". On a dark surface that
     text is invisible. The decision (design §4) is to keep those sheets rather
     than normalise them, so the surface has to be what they expect. */
  --surface:#ffffff; --surface-txt:#1a1d23; --surface-dim:#5c6470;
  --surface-line:#e2e5ea; --surface-link:#1a5fb4; --surface-alt:#f5f6f8;
  --bar-h:52px; --rail:316px;

  /* Overridden per guide by an inline custom property on the shell, from the
     accent recovered from that guide's own stylesheet. This is how each game
     keeps its identity in navigation the guide never styled — Dying Light's
     orange, Odyssey's gold — without reproducing the legacy drill-down DOM.
     Falls back to the house red for guides that shipped no stylesheet. */
  --guide-accent:var(--accent);

  /* One measure for every full-bleed band — the contents bar, ledger,
     page body — so they share a left edge instead of each finding their own.
     1240 rather than the site's 1200 because the library's tile grid was
     already built on it, and matching the page below is worth more than
     matching a number on a different page. */
  --pg-container:1240px; --pg-gutter:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Lato is the site's typeface (sass/variables-site/_typography.scss). Carried
   here so the library reads as part of primagames.com and not as a separate
   application that happens to share a logo. */
body{margin:0;background:var(--bg);color:var(--txt);
  font:15.5px/1.65 Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
a{color:var(--link)}

/* ---------- top bar ---------- */
.eg-bar{position:sticky;top:0;z-index:30;height:var(--bar-h);background:#11141a;
  border-bottom:1px solid var(--line)}
.eg-bar-inner{max-width:var(--pg-container);margin:0 auto;padding:0 var(--pg-gutter);
  height:100%;display:flex;align-items:center;gap:12px}
/* The guide-reading screen is the one page this app treats as full-bleed
   chrome throughout (design intent from NEW-28) — the bar follows suit here
   rather than centring in a column like every other page does. */
.eg-bar-inner-full{max-width:none}
.eg-bar a.eg-brand{display:flex;align-items:center;flex:none}
.eg-bar a.eg-brand img{height:32px;width:auto;display:block}
.eg-nav{display:flex;align-items:center;gap:16px;flex:none}
.eg-nav a{color:var(--dim);text-decoration:none;font-size:13px;white-space:nowrap}
.eg-nav a:hover{color:var(--txt)}
.eg-nav a:focus-visible{outline:2px solid var(--guide-accent);outline-offset:2px}
.eg-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.eg-search{flex:none}
.eg-search input{background:#1d222b;border:1px solid #303844;border-radius:6px;color:var(--txt);
  font-size:13px;padding:6px 10px;width:180px}
.eg-search input:focus-visible{outline:2px solid var(--guide-accent);outline-offset:2px}
.eg-search input::placeholder{color:var(--dim)}
.eg-bar .eg-bar-guide{color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eg-toc-toggle{display:none;background:#1d222b;border:1px solid #303844;color:var(--txt);
  padding:6px 12px;border-radius:6px;font-size:13px;cursor:pointer}

/* Account state, pinned to the right of the bar. Both states ship in the
   markup and the client hides one, so this styles both. */
.eg-account{margin-left:auto;flex:none;display:flex;align-items:center;font-size:13px}
/* :not([hidden]), not a bare .eg-account-me — an author display declaration of
   the same specificity beats the UA sheet's [hidden] rule, and the chip would
   sit in the bar for every signed-out reader. */
.eg-account-me:not([hidden]){display:flex;align-items:center;gap:10px;min-width:0}
.eg-account a.eg-account-in{color:var(--txt);text-decoration:none;padding:6px 12px;
  border:1px solid #303844;border-radius:6px;background:#1d222b;white-space:nowrap}
.eg-account a.eg-account-in:hover{border-color:var(--guide-accent);color:#fff}
/* The name can be an email, and an email can be long. It gives way before the
   control beside it does. */
.eg-account-name{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:22ch}
.eg-account-my-guides{color:var(--dim);text-decoration:none;white-space:nowrap}
.eg-account-my-guides:hover{color:var(--txt)}
.eg-account-out{background:none;border:0;color:var(--dim);font-size:13px;cursor:pointer;
  padding:6px 0;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.eg-account-out:hover{color:var(--txt)}
.eg-account-out[disabled]{opacity:.5;cursor:default}
.eg-account a:focus-visible,.eg-account button:focus-visible{outline:2px solid var(--guide-accent);
  outline-offset:2px}

/* ---------- sign-in modal ---------- */
.eg-signin{position:relative;background:var(--panel);color:var(--txt);border:1px solid var(--line);
  border-radius:12px;padding:28px 26px;width:min(360px,calc(100vw - 32px));max-width:none}
.eg-signin::backdrop{background:rgba(8,9,12,.72)}
.eg-signin h2{margin:0 0 8px;font-size:20px;font-weight:660;letter-spacing:-.01em}
.eg-signin p{color:var(--dim);font-size:14px;margin:0 0 18px;line-height:1.55}
.eg-signin form{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.eg-signin label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.eg-signin input{background:var(--bg);border:1px solid var(--line);border-radius:8px;
  color:var(--txt);padding:10px 12px;font-size:15px;width:100%;font-family:inherit}
.eg-signin input:focus-visible{outline:2px solid var(--guide-accent);outline-offset:1px}
.eg-signin form button[type=submit]{background:var(--guide-accent);border:0;border-radius:8px;
  color:#fff;padding:11px 16px;font-size:15px;font-weight:640;cursor:pointer;font-family:inherit}
.eg-signin form button[type=submit]:hover{filter:brightness(1.08)}
.eg-signin-alt{font-size:13.5px}
.eg-signin-alt button{background:none;border:0;color:var(--link);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer;font:inherit;padding:0}
.eg-signin-err{color:#ff9b8f;font-size:14px;margin:0 0 16px}
.eg-signin-close{position:absolute;top:14px;right:14px;background:none;border:0;color:var(--dim);
  font-size:22px;line-height:1;cursor:pointer;padding:4px}
.eg-signin-close:hover{color:var(--txt)}
.eg-signin [data-view="sent"] .eg-signin-close{position:static;font-size:15px;color:var(--txt);
  background:#1d222b;border:1px solid #303844;border-radius:6px;padding:8px 14px}
.eg-signin button:focus-visible{outline:2px solid var(--guide-accent);outline-offset:2px}

/* ---------- three-column shell ---------- */
.eg-shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr) var(--rail);
  align-items:start;min-height:calc(100vh - var(--bar-h))}
/* Pages without a guide tree — the homepage, the library index — have no
   sidebars to hold the columns open, so the grid would otherwise squeeze the
   content into the width of a rail.

   This wins over .eg-shell above on source order alone — the two selectors tie
   on specificity — so every narrow-viewport rule below has to exclude the plain
   shell explicitly instead of restating .eg-shell. A bare .eg-shell inside a
   media query ties with this and wins on order, which is exactly what happened:
   the homepage and browse rendered in a 316px column at every width from 901 to
   1400. */
.eg-shell-plain{grid-template-columns:minmax(0,1fr)}
.eg-side{background:var(--panel);border-right:1px solid var(--line);
  position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h));
  display:flex;flex-direction:column;padding:14px 12px}
/* Full column height, matching the left. Sized to its contents the panel ended
   partway down the page with raw background below it, which reads as broken
   layout rather than an empty rail. */
.eg-rail{background:var(--panel);border-left:1px solid var(--line);
  position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h));
  padding:14px 12px}
/* The column itself carries no surface. The reading surface is the card below,
   because for guides that supply their own article background the guide's
   surface has to BE the surface — painting it inside a separate white field
   makes it read as a stripe laid on the page rather than as the page. */
.eg-main{padding:24px 24px 56px;min-width:0;color:var(--surface-txt);
  min-height:calc(100vh - var(--bar-h))}
/* 700px, not wider, and centred in its column.
   Two reasons for the width: 860px ran to ~111 characters a line, well past a
   comfortable measure, and the legacy imagery was generated at 700px wide — so
   at exactly 700 the images align flush with the text instead of sitting inset.
   Centring matters once the right rail drops out below 1400px, where the column
   is 1084px and left-aligned text would hug the edge of a wide white field. */
/* The page, as a sheet: 760px so that after 30px of padding either side the
   content box is exactly 700px. That 700 is not arbitrary — the legacy imagery
   was generated at 700px wide, so images render at native size and sit flush
   with the text rather than being scaled down. It also keeps the measure near
   90 characters; at the earlier 860px it ran to ~111.
   Centring leaves the guide's backdrop art visible down both sides, which is
   roughly what the legacy shell did with #cover. */
.eg-measure{max-width:760px;margin:0 auto;background:var(--surface);
  padding:28px 30px 36px;border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.28),0 12px 32px rgba(0,0,0,.22)}

/* ---------- guide backdrop ----------
   276 of 395 guides ship backdrop art. In the legacy shell it sat on "#cover",
   the wrapper around both the TOC and the article, so it framed the whole page.
   The URL arrives as a custom property set per-guide on the shell; these rules
   stay static. The sidebars go translucent over it so the art actually reads,
   while the article column stays opaque — the guide stylesheets assume a solid
   surface behind the text. */
.eg-has-backdrop{background-image:var(--guide-backdrop);background-size:cover;
  background-position:center top;background-attachment:fixed;background-color:var(--bg)}
.eg-has-backdrop>.eg-side,.eg-has-backdrop>.eg-rail{background:rgba(16,19,25,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ---------- table of contents ---------- */
.eg-side h2{margin:0 0 10px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:600;display:flex;align-items:center;gap:8px}
.eg-side h2::after{content:"";flex:1;height:1px;background:var(--line)}
/* The tree's own box: filter above, fall-through to full text below.
   The button is hidden until something is typed — an empty tree with a
   "search for """ under it is chrome, not an offer. */
.eg-toc-find{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.eg-toc-find input{width:100%;background:#161a21;border:1px solid var(--line);
  border-radius:6px;color:var(--txt);font:inherit;font-size:13px;padding:7px 9px}
.eg-toc-find input::placeholder{color:var(--dim)}
.eg-toc-find input:focus-visible{outline:2px solid var(--guide-accent);outline-offset:1px}
.eg-toc-find-go{text-align:left;background:none;border:0;border-top:1px dashed var(--line);
  color:var(--dim);font:inherit;font-size:12px;line-height:1.35;padding:8px 9px 0;cursor:pointer;
  overflow-wrap:anywhere}
.eg-toc-find-go:hover{color:var(--txt)}
.eg-toc-find-go .eg-find-q{color:var(--txt)}
.eg-toc-find-go:focus-visible{outline:2px solid var(--guide-accent);outline-offset:1px}

.eg-toc{overflow-y:auto;flex:1;margin:0 -4px;padding:0 4px}
.eg-toc ul{list-style:none;margin:0;padding:0}
.eg-toc li ul{margin-left:10px;border-left:1px solid var(--line);padding-left:6px}
.eg-toc a,.eg-toc span.eg-branch{display:block;color:var(--dim);text-decoration:none;
  padding:5px 9px;border-radius:6px;font-size:13.5px;line-height:1.35}
.eg-toc a:hover{background:#1d222b;color:var(--txt)}

/* The current section is the one thing in the tree that must be findable at a
   glance in a list that can run to 1,231 entries — so it carries the guide's
   own accent rather than a generic highlight. */
.eg-toc a[aria-current="page"]{color:#fff;font-weight:600;
  background:color-mix(in srgb, var(--guide-accent) 22%, transparent)}

/* Top-level entries are chapter headings, not links among links. */
.eg-toc>ul>li>a,.eg-toc>ul>li>span.eg-branch{font-weight:650;color:var(--txt);
  margin-top:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.eg-toc>ul>li:first-child>a,.eg-toc>ul>li:first-child>span.eg-branch{margin-top:0}
/* Under a filter the first surviving chapter is rarely the first child, and the
   chapter gap above it reads as a missing entry. */
.eg-toc[data-filtered]>ul>li>a,.eg-toc[data-filtered]>ul>li>span.eg-branch{margin-top:0}
.eg-toc span.eg-branch{cursor:default}

/* Locks on the sections an account opens.
   Drawn from the switch on the nav rather than from the entries themselves, so
   the client unlocks a 1,666-entry tree with one attribute removal instead of
   1,600 DOM writes. The glyph is generated content because per-entry markup is
   what makes this tree 45 KB in the first place — the slash-separated
   alternative text is what a screen reader announces where it is supported, and
   the padlock itself where it is not. Neither dims the label: these entries are reachable,
   and a reader who signs in reads them. */
.eg-toc[data-locks] a[data-locked]{display:flex;align-items:center;gap:6px}
.eg-toc[data-locks] a[data-locked]::after{content:"🔒" / "account required";
  margin-left:auto;font-size:11px;opacity:.55;flex:none}
.eg-toc a:focus-visible,.eg-toc-toggle:focus-visible{outline:2px solid var(--guide-accent);
  outline-offset:1px}

/* ---------- ad slots ---------- */
.eg-slot{background:var(--ad);border:1px dashed #3a4353;border-radius:7px;color:#6b7688;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:flex;
  align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:4px}
.eg-slot i{font-style:normal;font-size:10px;opacity:.7;letter-spacing:.04em}
/* The Connatix render target. Connatix measures this element's box to decide
   how to size the player it builds, then inserts that player as this
   element's PREVIOUS SIBLING rather than as its child — the target itself
   stays empty after render() runs. position:absolute matters more than it
   looks: height:100% alone made the target a normal flex child claiming full
   height in the same flex column as the player Connatix then inserted next
   to it, and default flex-shrink split that one fixed-height box between the
   two competing children — squashing the real player to roughly half its
   intended size. Taking the target out of flow (absolute, sized by inset
   rather than by flex) lets it still report a full-size box to Connatix's
   measurement without claiming any layout space of its own, so the real
   player, the only thing left in flex flow, gets the whole slot. The parent
   needs position:relative for inset:0 to resolve against it rather than the
   page. */
.cnx-target{position:absolute;inset:0}
.eg-slot-video{height:178px;margin-top:14px;flex:none;position:relative}
.eg-slot-display{height:600px;position:sticky;top:calc(var(--bar-h) + 14px)}

/* ---------- article header ----------
   A deliberate band rather than loose text above the guide's surface. The
   accent rule under the title is the seam: it marks where the app's chrome
   stops and the guide's own design begins, in the guide's own colour. */
.eg-head{padding-bottom:16px;margin-bottom:20px;position:relative}
.eg-head::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;
  background:var(--guide-accent);border-radius:2px}
.eg-crumb{font-size:12.5px;color:var(--surface-dim);margin:0 0 8px;line-height:1.5}
.eg-crumb a{color:var(--surface-dim);text-decoration:none}
.eg-crumb a:hover{color:var(--surface-txt);text-decoration:underline}
.eg-main h1{font-size:29px;margin:0;font-weight:660;line-height:1.2;
  color:var(--surface-txt);letter-spacing:-.01em}
.eg-meta{font-size:12.5px;color:var(--surface-dim);margin:8px 0 0}

/* Legacy DOM the per-guide stylesheets were written against — their selectors
   take the form "#content article>section>h2", so the nesting has to match or
   every custom rule silently stops applying. */
/* The article region bleeds to the edges of the sheet. A guide that supplies
   its own surface — Odyssey's marble, for one — should fill the page rather
   than sit as an inset panel with white showing around it. Text keeps its
   alignment via matching padding.

   The bleed is on BOTH #content and its article child, and the article is the
   one that does the work: all 14 legacy sheets that paint a surface target
   "#content article", one level in from the wrapper this rule used to cover
   alone. (#content is kept in the selector because it is what aligns the text;
   whether any sheet also paints there is not something surface-scan checks,
   and it does not matter — the bleed covers both.) Bleeding only the wrapper
   left all 14 inset by the sheet's 30px padding —
   exactly the "panel with white showing around it" this rule exists to
   prevent. The margins and padding cancel, so on the ~380 guides with no
   surface of their own this is invisible: the content box stays 700px and no
   text moves.

   This rule is (0,1,0,1) and a guide's own rules are scoped to
   ".eg-guide-x #content article" — (0,1,1,1), higher, and loaded after. A
   sheet setting its own padding or margin on the article would therefore win
   and drag the text out of the gutter. None does, and that is checked rather
   than assumed: surface-scan.ts reports any box property on the article as a
   conflict, and is the thing to rerun if the corpus is ever reloaded. */
#content,
#content>article{margin-left:-30px;margin-right:-30px;
  padding-left:30px;padding-right:30px}

/* Vertical breathing room, but ONLY for the guides that actually paint a
   surface. Full width alone still reads as a stripe: the texture starts flush
   against the first line's ascender and stops flush against the last
   descender, so the page looks banded rather than printed on. The padding is
   what turns it back into a page.

   It cannot be global. On a guide with no surface there is nothing to pad and
   the space lands as a gap under the header rule — a visible regression on
   ~380 guides to serve 14. CSS cannot ask "does my child paint a background",
   so the 14 are named. Naming them is safe precisely because this corpus is
   frozen: these are migrated legacy sheets, never edited again.
   tools/migrate/src/surface-scan.ts regenerates the list from the sheets, so
   it stays reproducible rather than folklore.

   What the padding actually buys, measured, differs by what the section opens
   with, because padding also stops the first child's margin collapsing out of
   the article:
     opens with a paragraph  26px of surface above the text
     opens with a heading    52px — the 26 here plus the h2's own 26px margin,
                             which without the padding collapses through and
                             out to the header gap instead
   Both read fine because the surface is continuous either way, so the margins
   are left alone rather than zeroed per-child; the asymmetry is recorded here
   so the next person does not read "26px" and find 52.

   This rule is (0,1,1,1) — exactly level with a guide's own
   ".eg-guide-x #content article", which loads later and so wins a tie. A guide
   setting its own padding there would simply take over, which is the right
   outcome and is why this is not fought with !important. surface-scan reports
   any such rule; none exists today.

   No negative margin. An earlier version pulled the block up 6px, which
   collapses through #content when the section is open but cannot when the
   registerwall sets overflow:hidden — so the article sat 6px above its own
   clipping box and the top slice of the surface was cut off for exactly the
   readers being asked to register. */
.eg-guide-assassins-creed-origins-eguide #content>article,
.eg-guide-assassins-creed-osyssey-eguide #content>article,
.eg-guide-darksiders-iii-eguide #content>article,
.eg-guide-elder-scrolls-v-skyrim-special-edition-eguide #content>article,
.eg-guide-fallout-4-eguide #content>article,
.eg-guide-fallout-76-eguide #content>article,
.eg-guide-fallout-76-starter-guide #content>article,
.eg-guide-far-cry-5-eguide #content>article,
.eg-guide-quantum-break-eguide #content>article,
.eg-guide-shadow-of-the-tomb-raider-eguide #content>article,
.eg-guide-super-mario-odyssey-eguide #content>article,
.eg-guide-the-witcher-3-wild-hunt-eguide #content>article,
.eg-guide-the-witcher-3-wild-hunt-the-complete-edition-eguide #content>article,
.eg-guide-uncharted-4-a-thiefs-end-eguide #content>article{
  padding-top:26px;padding-bottom:30px}

/* Four sheets paint their article surface with "background-attachment:fixed":
   both Witcher 3 guides, Shadow of the Tomb Raider and Skyrim. That is left as
   the sheets wrote it. All four pair it with "background-size:cover", and cover
   resolves against the positioning area — which for a fixed background is the
   viewport. Override attachment to "scroll" and the positioning area becomes the
   article box instead: 760px wide by however tall the section runs, often several
   thousand pixels, so cover scales the art by an order of magnitude and the
   column shows one magnified smear of it. Making "scroll" read correctly would
   mean restating background-size and background-repeat too, which is redesigning
   the guide rather than hosting it — the thing keeping the legacy sheets is meant
   to avoid (design §4). Fixed is also what this shell already does with the
   guide's own backdrop art, so the two agree. The cost is that art authored to
   frame a full-width page — the Witcher vignette, say — has its framing fall
   outside the 760px column. That is a crop, not a defect.

   Skyrim's position offset is a different matter, and does get reset. Its sheet
   adds "background-position-y:81px" on top of the shorthand's "top", 81px being
   the height of the legacy site's header: the art was meant to start below the
   chrome. There is no such header here, and because the background is fixed the
   offset is measured down from the top of the viewport, not from the article. So
   it renders as an 81px band of the sheet's own #E1E1E1 fallback pinned across
   the top of the reading column for the entire scroll. Restoring "top" is what
   the rule was written to mean, not a change of look.
   The extra .eg-shell is for specificity: the guide stylesheet loads after this
   one, so matching its "class id type" is not enough to win. */
.eg-shell.eg-guide-elder-scrolls-v-skyrim-special-edition-eguide #content article{
  background-position-y:top}

/* Yo-kai Watch 2 is the one guide that paints its surface through pseudo
   elements rather than a background: "section::before" is a white sheet capped
   at 750px and centred, "section::after" a medallion pattern behind it with no
   cap, both "position:absolute" with all four insets at 0. That pair is one
   design — a white reading column on a patterned page — and it needs a
   containing block to be that.
   It had none. Neither #content, article nor section is positioned by this
   sheet or by any of the 149 legacy ones, so both resolved against the initial
   containing block: measured at 1440px, a 1440x900 rectangle at the top of the
   document. On a 9,463px section page the pattern covered the top tenth, ran
   outside the sheet on both sides, and changed width with the viewport.
   The containing block is the article column rather than the section, and that
   is what restores the legacy page rather than merely containing the overlay.
   At 700px the section is narrower than the guide's own 750px white, so
   pinning the overlays to it would let the white cover the pattern edge to
   edge and the design would be a plain white page. The column is 808px at
   1440, and wider at every width below 1400 where the right rail drops, so the
   white lands centred inside the pattern exactly as it did in 2016 and the
   pattern shows down both margins — which is where the sheet already leaves
   the guide's backdrop visible. Under 900px the sheet goes edge to edge and
   covers it, which is the same trade the backdrop makes there.
   isolation:isolate is the other half. z-index:-1 and -99 paint behind the
   background of the nearest ancestor that establishes a stacking context, and
   with no such ancestor that was the root: both overlays went under
   .eg-measure's white sheet, which is why only the parts hanging outside the
   sheet were ever visible. Making the column that ancestor puts them above the
   column and below everything in it — the pattern in the margins, the sheet
   opaque on top of it, the guide's white behind the sheet where it is
   harmless.
   Scoped to the one guide rather than applied to every column. Five other
   sheets carry negative z-index of their own — Disney Infinity and Smash Bros
   for one bordered heading each, Tomb Raider, Atari Flashback — and every one
   of them is invisible today for exactly the reason above. Giving all guides a
   stacking context here would reveal all five in the same commit, which is a
   different change to a different set of guides.
   The scope class sits on the shell, so this also matches .eg-main-hub on this
   guide's hub page. Nothing there is positioned or negatively stacked — the hub
   has no #content and no sheet — so it contains nothing and costs nothing;
   everything above is about the article page. */
.eg-guide-yo-kai-watch-2-the-definitive-yo-kai-pedia-eguide .eg-main{
  position:relative;isolation:isolate}

#content article>section>h2,
#content article>section>h3{font-size:18px;margin:26px 0 10px;font-weight:620}
#content article>section>h4,
#content article>section>h5,
#content article>section>h6{font-size:15.5px;margin:20px 0 8px;font-weight:620}
#content p{margin:0 0 12px}
#content figure{margin:16px 0}
#content figure img{max-width:100%;height:auto;border-radius:7px;display:block;
  border:1px solid var(--surface-line)}
#content figure.grouped{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#content figure.quarter{max-width:220px}
#content img.inline{display:inline-block;vertical-align:middle;border-radius:3px;
  width:auto;margin:0 2px}
#content a{color:var(--surface-link);text-decoration:none;
  border-bottom:1px dotted rgba(26,95,180,.45)}
#content a:hover{border-bottom-style:solid}

/* Cartographer embed. 4:3 rather than a wide banner because the map centres on
   its own content rectangle: too wide a frame and the map shrinks to the height
   with background either side. Capped against the viewport so a tall frame on a
   narrow screen does not push the pager off the bottom of a long scroll. */
.eg-map{margin:20px 0 8px}
.eg-map iframe{display:block;width:100%;aspect-ratio:4/3;max-height:78vh;
  border:1px solid var(--surface-line);border-radius:7px;background:var(--surface-alt)}
.eg-map-note{margin:8px 0 0;font-size:12.5px;color:var(--surface-dim)}

/* A Cartographer-owned checklist. Its frame is a list of checkboxes rather than
   a map, so it takes a fixed height instead of an aspect ratio: 540px shows
   about 18 items and scrolls inside the frame past that, which the longest of
   these fifteen (37 items) needs. Cartographer paints its own dark panel, hence
   the matching background under it while the iframe loads. */
.eg-checklist-embed{margin:20px 0 8px}
.eg-checklist-embed iframe{display:block;width:100%;height:540px;max-height:78vh;
  border:1px solid var(--surface-line);border-radius:7px;background:#141d26}

/* Checklist. Sits on the article surface, so it uses the light surface tokens
   the guide stylesheets were written against rather than the dark chrome ones.
   Deliberately plain: this is the app's furniture inside someone else's
   article, and the accent is the only colour it borrows. */
.eg-checklist{margin:20px 0 26px;border:1px solid var(--surface-line);
  border-radius:7px;background:var(--surface-alt);padding:14px 16px}
.eg-checklist-head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  justify-content:space-between;margin-bottom:10px}
.eg-checklist-head h2{margin:0;font-size:17px}
.eg-checklist-progress{display:flex;align-items:center;gap:9px;margin:0;
  font-size:12.5px;color:var(--surface-dim);white-space:nowrap}
/* An author "display" beats the UA sheet's [hidden]{display:none} whatever the
   specificity, so the attribute has to be restored by hand — the same patch
   .eg-hero-pause[hidden] and .eg-pip[hidden] already carry. Without it every
   anonymous visitor is shown a progress meter reading "0 of 109". */
.eg-checklist-progress[hidden]{display:none}
.eg-checklist-bar{display:block;width:110px;height:6px;border-radius:3px;
  background:rgba(0,0,0,.12);overflow:hidden}
.eg-checklist-bar i{display:block;height:100%;width:0;background:var(--accent);
  transition:width .18s ease}
.eg-checklist-items{list-style:none;margin:0;padding:0;
  /* 109 items on a 700px column reads as a wall in one file. Two columns at
     tablet width and up, which is where there is room for them. */
  columns:2;column-gap:26px}
.eg-checklist-items li{break-inside:avoid;margin:0 0 2px}
.eg-checklist-items label{display:flex;gap:9px;align-items:flex-start;
  padding:4px 6px;border-radius:5px;font-size:14px;line-height:1.4;cursor:pointer}
.eg-checklist-items label:hover{background:rgba(0,0,0,.04)}
.eg-checklist-items input{margin:2px 0 0;flex:none;accent-color:var(--accent)}
.eg-checklist-items input:disabled{cursor:default}
.eg-checklist-items input:disabled+span{opacity:.65}
.eg-checklist-items li[data-checked=true] span{opacity:.55;text-decoration:line-through}
.eg-checklist-note{margin:11px 0 0;font-size:12.5px;color:var(--surface-dim)}
@media (max-width:620px){.eg-checklist-items{columns:1}}
@media (prefers-reduced-motion:reduce){.eg-checklist-bar i{transition:none}}

/* Callout fallback — for the ~194 guides that ship no stylesheet of their own.
   Deliberately low specificity and free of !important: a guide that styles its
   own "aside.Note" must win, because retaining each guide's look is the whole
   reason those sheets are kept (design §4). An earlier version forced
   "background:none !important" onto callout headings and erased the coloured
   heading bar Dying Light draws, leaving white text on beige. */
.eg-callout{border-left:3px solid var(--accent);background:rgba(200,64,47,.06);
  padding:12px 15px;margin:18px 0;border-radius:0 6px 6px 0}
.eg-callout>h3,.eg-callout>h4{margin:0 0 5px;font-size:14px;
  color:#9e2d1e;text-transform:uppercase;letter-spacing:.05em}
.eg-callout>p:last-child{margin-bottom:0}
.eg-callout-caution,.eg-callout-warning{border-left-color:#b57d12;background:rgba(181,125,18,.07)}
.eg-callout-caution>h3,.eg-callout-warning>h3{color:#8a5f0d}
.eg-callout-tip,.eg-callout-hint{border-left-color:#2f7d54;background:rgba(47,125,84,.07)}
.eg-callout-tip>h3,.eg-callout-hint>h3{color:#256042}

/* Wide print-derived tables scroll inside their own box rather than pushing
   the page sideways. Half the audience is on mobile. */
.eg-table-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--surface-line);
  border-radius:7px}
.eg-table-wrap table{border-collapse:collapse;width:100%;font-size:14px}
.eg-table-wrap th,.eg-table-wrap td{border-bottom:1px solid var(--surface-line);
  padding:8px 11px;text-align:left;vertical-align:top}
.eg-table-wrap thead th{background:var(--surface-alt);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--surface-dim);position:sticky;top:0}
.eg-table-wrap tbody tr:nth-child(even){background:#fafbfc}
.eg-table-wrap tbody tr:last-child td{border-bottom:0}
.eg-table-wrap table[data-sortable] thead th{cursor:pointer;user-select:none}
.eg-table-wrap table[data-sortable] thead th::after{content:"";opacity:.35;margin-left:6px}
.eg-table-wrap table[data-sortable] thead th[aria-sort="ascending"]::after{content:"▲";opacity:.9}
.eg-table-wrap table[data-sortable] thead th[aria-sort="descending"]::after{content:"▼";opacity:.9}

/* ---------- registerwall ----------
   The clip is overflow, never display:none and never a removal. The section
   body stays in the document and stays laid out, because the same HTML is what
   a crawler renders and design §5 requires it to see the guide whole. A mask
   fades the last few lines into the surface so the cut reads as "there is more"
   rather than as a truncated page; browsers without mask-image get a hard edge,
   which says the same thing less prettily.
   The attribute is set by the client, so an unstyled or unscripted page shows
   the section in full — the wall fails open by construction. */
#content[data-gated]{max-height:20em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 58%,transparent 98%);
  mask-image:linear-gradient(#000 58%,transparent 98%)}
.eg-gate{margin:26px 0 8px;padding:26px 28px 28px;border-radius:10px;
  background:var(--surface-alt);border:1px solid var(--surface-line);
  border-top:3px solid var(--guide-accent);color:var(--surface-txt)}
.eg-gate h2{margin:0 0 8px;font-size:21px;line-height:1.25;color:var(--surface-txt)}
.eg-gate p{margin:0;font-size:14.5px;color:var(--surface-dim);max-width:56ch}
/* Set apart from the pitch above it and smaller: the wall's argument is aimed
   at someone with no account, and this line is aimed at the 1.37M people who
   have one already and need telling their purchases came across. Wrong reader
   for the headline, right reader to catch before they bounce.
   Both selectors below are doubled up on .eg-gate deliberately: ".eg-gate p"
   sets margin:0 at a higher specificity than a bare class, so a lone
   .eg-gate-prior or .eg-gate-actions loses its top margin and collapses onto
   the pitch. .eg-gate-actions had been losing its 18px that way since it was
   written. */
.eg-gate .eg-gate-prior{margin-top:12px;padding-top:12px;font-size:13.5px;
  border-top:1px solid var(--surface-line)}
.eg-gate-prior a{color:var(--surface-link);text-decoration:underline}
.eg-gate .eg-gate-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px}
.eg-gate-go{display:inline-block;background:var(--guide-accent);color:#fff;
  text-decoration:none;font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:8px}
.eg-gate-go:hover{filter:brightness(1.08)}
/* The second link is the argument, not the afterthought — it is a whole guide,
   free, and the reason the free set was chosen the way it was. Underlined and
   in the link colour so it reads as the real alternative it is. */
.eg-gate-alt{color:var(--surface-link);font-size:14px;text-decoration:underline}

/* ---------- prev / next ---------- */
.eg-pager{display:flex;gap:12px;margin:32px 0 8px;padding-top:18px;
  border-top:1px solid var(--surface-line)}
.eg-pager a{flex:1;padding:12px 14px;background:var(--surface-alt);
  border:1px solid var(--surface-line);border-radius:8px;text-decoration:none;
  color:var(--surface-txt);font-size:14px}
.eg-pager a:hover{border-color:#c3c9d2}
.eg-pager a span{display:block;font-size:11px;color:var(--surface-dim);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.eg-pager a.eg-next{text-align:right}

/* ---------- guide hub ----------
   The hub is the one page the legacy design made a hero of the backdrop art.
   The art runs the full width behind a header; the cover and title sit in it.
   No floating card, no gradient panel — the art is the decoration, and adding
   more on top of it is just noise. */
/* Solid, so the shell's backdrop does not run behind the chapter list. The art
   belongs to the hero band, which scrims it; anywhere else it is just noise
   under text. */
.eg-main-hub{background:var(--bg);padding:0}

.eg-hub-hero{background-image:linear-gradient(to right, rgba(9,11,15,.96) 0%,
    rgba(9,11,15,.86) 42%, rgba(9,11,15,.35) 100%), var(--guide-backdrop, none);
  background-size:cover,cover;background-position:center,center 28%;
  border-bottom:1px solid var(--line)}
.eg-hub-hero-inner{display:flex;gap:24px;align-items:flex-end;
  max-width:940px;margin:0 auto;padding:52px 24px 34px}
.eg-hub-hero img{width:150px;flex:none;display:block;
  box-shadow:0 6px 22px rgba(0,0,0,.55)}
.eg-hub-title{min-width:0;padding-bottom:4px}
.eg-hub-title h1{margin:0;font-size:32px;line-height:1.14;font-weight:670;
  color:#fff;letter-spacing:-.015em;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.eg-hub-title .eg-sub{color:#c9cfd9;font-size:15px;margin:6px 0 0}

/* A link, weighted. Not a pill with a border on top of a hero image. */
.eg-start{display:inline-block;margin-top:16px;color:var(--guide-accent);
  text-decoration:none;font-weight:650;font-size:15px}
.eg-start:hover{text-decoration:underline;text-underline-offset:3px}
.eg-start:focus-visible{outline:2px solid var(--guide-accent);outline-offset:3px}

.eg-hub-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:44px;align-items:start;max-width:940px;margin:0 auto;padding:30px 24px 48px}
.eg-hub-body-single{grid-template-columns:minmax(0,1fr);max-width:640px;margin-left:0}

/* A contents list, set like one. The chapter number and the section count are
   the two things worth knowing; a border and a tile are not. */
.eg-chapters{list-style:none;counter-reset:ch;margin:0;padding:0}
.eg-chapters li{counter-increment:ch;border-bottom:1px solid var(--line)}
.eg-chapters li:first-child{border-top:1px solid var(--line)}
.eg-chapters a,.eg-ch-empty{display:flex;align-items:baseline;gap:12px;
  padding:11px 4px;text-decoration:none;color:var(--txt);font-size:14.5px}
.eg-chapters a::before,.eg-ch-empty::before{content:counter(ch);flex:none;width:22px;
  color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.eg-chapters a:hover{color:#fff;background:#1a1f27}
.eg-chapters a:hover .eg-ch-title{text-decoration:underline;text-underline-offset:2px}
.eg-chapters a:focus-visible{outline:2px solid var(--guide-accent);outline-offset:-2px}
.eg-ch-title{flex:1;min-width:0}
.eg-ch-count{flex:none;color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums}
.eg-ch-empty{color:var(--dim)}

.eg-blurb{font-size:14px;color:var(--dim);line-height:1.7}
.eg-blurb b,.eg-blurb strong{color:var(--txt);font-weight:640}
.eg-blurb a{color:var(--surface-link)}

/* ---------- library ----------
   Cards on the app's own dark chrome. There is no guide in context here, so a
   white sheet would be a document with nothing on it. */
.eg-library{max-width:var(--pg-container);margin:0 auto;padding:8px var(--pg-gutter) 48px}
.eg-library h1{font-size:30px;margin:0 0 4px;font-weight:660;color:var(--txt)}
.eg-library .eg-lede{color:var(--dim);font-size:13.5px;margin:0 0 24px}
.eg-empty{color:var(--dim);font-size:14px}
/* Denser than the homepage rails. Browse shows 24 at a time, and at the
   homepage's three-across those would run to eight screens of scrolling. */
.eg-library .eg-tiles{grid-template-columns:repeat(4,1fr);gap:18px}

/* ---------- homepage ----------
   An archive, not a storefront: the game art is the decoration and every
   number shown is a real count. No invented panels, no category cards. */
/* The colour is reset explicitly: .eg-main carries the article surface's near
   black text, which on this page's dark chrome is all but invisible. */
.eg-main-home{background:var(--bg);color:var(--txt);padding:0}
.eg-home{max-width:var(--pg-container);margin:0 auto;padding:0 var(--pg-gutter)}

/* The hero is a stack of slides, one per featured guide, each on its own key
   art and scrimmed hard from the left so the text sits on near-solid ground
   while the art still reads on the right. The art arrives as a custom property,
   so these rules stay static however many slides there are.

   Grid rather than absolute positioning: every slide occupies the same cell, so
   the band is as tall as its tallest slide and does not resize mid-rotation —
   a hero that changes height under the cursor moves the whole page. */
.eg-home-hero{position:relative;display:grid;border-bottom:1px solid var(--line)}
.eg-slide{grid-area:1/1;
  background-image:linear-gradient(100deg, rgba(9,11,15,.97) 0%, rgba(9,11,15,.9) 38%,
    rgba(9,11,15,.25) 100%), var(--art,none);
  background-size:cover,cover;background-position:center,center 30%;
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
/* visibility, not just opacity: an invisible slide's links must be out of the
   tab order and out of the accessibility tree, and opacity:0 alone leaves both.
   The server marks slide one, so with scripting off this is the static hero. */
.eg-slide[data-active]{opacity:1;visibility:visible;transition:opacity .6s ease}
.eg-home-hero-inner{display:flex;gap:34px;align-items:flex-end;max-width:var(--pg-container);
  margin:0 auto;padding:74px var(--pg-gutter) 46px}
.eg-home-cover{width:clamp(112px,14vw,186px);flex:none;box-shadow:0 10px 40px rgba(0,0,0,.7)}

/* Held to the container's right edge so the dots line up with the page's own
   measure rather than the viewport's. */
.eg-hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--pg-container);padding:0 var(--pg-gutter);
  display:flex;justify-content:flex-end;gap:9px;pointer-events:none}
.eg-hero-dots button{pointer-events:auto;width:9px;height:9px;padding:0;border-radius:50%;
  border:0;background:rgba(255,255,255,.34);cursor:pointer;
  transition:background .2s ease,transform .2s ease}
.eg-hero-dots button:hover{background:rgba(255,255,255,.7)}
.eg-hero-dots button[aria-current]{background:#fff;transform:scale(1.25)}
.eg-hero-dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* WCAG 2.2.2 — anything that moves on its own for more than five seconds needs
   a way to stop it, and hover and focus are not one: a touch reader has
   neither. Set in the dot row rather than over the art, so the whole control
   group is one target area. */
.eg-hero-pause{width:auto;height:16px;border-radius:3px;padding:0 6px;margin-left:6px;
  align-self:center;font-size:9px;line-height:16px;letter-spacing:.06em;
  /* Opaque, not the dots' translucent white: the glyph inside it is dark, and
     at .34 alpha over key art it is unreadable. */
  background:rgba(255,255,255,.78);color:#0f1115}
.eg-hero-pause:hover{background:#fff}
.eg-hero-pause::before{content:"❚❚"}
.eg-hero-pause[aria-pressed="true"]::before{content:"▶"}
.eg-hero-pause[hidden]{display:none}

/* The client reads the same query and does not auto-advance under it at all;
   the dots still work, so the other guides remain reachable. This kills the
   crossfade for the same reader on the transitions they do ask for. */
/* [data-active] has to be named here too: a media query adds no specificity, so
   a bare .eg-slide loses to .eg-slide[data-active] above and the incoming slide
   would keep fading in. */
@media (prefers-reduced-motion:reduce){
  .eg-slide,.eg-slide[data-active]{transition:none}
  .eg-hero-dots button{transition:none}
}
.eg-home-hero-text{min-width:0;padding-bottom:6px}
/* Serif italic, used once. It is the only voice on the page that is the
   archive's rather than a guide's, and it should not read as a UI label. */
.eg-eyebrow{font:italic 14px/1.5 ui-serif,Georgia,serif;color:#b9c0cc;margin:0 0 10px}
/* Fluid between the two sizes it used to jump between at 900px. 4.2vw puts it
   at 46px around 1100 and 29px around 690, so both ends are the values the
   layout was designed at and everything between is interpolated rather than
   snapped. */
/* .eg-slide-title is the same object as the h1 — the slides after the first
   are alternates for one band, not five competing top-level headings, so only
   the one the server renders active is a heading. */
.eg-home-hero h1,.eg-home-hero .eg-slide-title{margin:0;font-size:clamp(29px,4.2vw,46px);line-height:1.04;font-weight:700;
  letter-spacing:-.025em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.75);max-width:15ch}
.eg-hero-rule{width:72px;height:3px;margin:18px 0 14px;border-radius:2px;
  background:var(--c,var(--accent))}
.eg-facts{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0 0 20px;padding:0;
  color:#c9cfd9;font-size:13.5px;font-variant-numeric:tabular-nums}
.eg-facts b{color:#fff;font-weight:640}
.eg-read{color:#fff;text-decoration:none;font-weight:650;font-size:15px;
  border-bottom:2px solid var(--c,var(--accent));padding-bottom:2px}
.eg-read:hover{border-bottom-color:#fff}

/* Three numbers, set as a colophon. Not badges, not stat cards. */
.eg-ledger{border-bottom:1px solid var(--line);background:#12151b}
.eg-ledger-inner{max-width:var(--pg-container);margin:0 auto;display:grid;
  grid-template-columns:repeat(3,1fr)}
/* Direct children only: a plain ".eg-ledger div" also matched .eg-ledger-inner,
   which applied the gutter twice and pushed the numbers 24px right of every
   other band on the page. */
.eg-ledger-inner>div{padding:22px var(--pg-gutter);border-left:1px solid var(--line)}
.eg-ledger-inner>div:first-child{border-left:0}
.eg-ledger b{display:block;font-size:30px;font-weight:680;letter-spacing:-.02em;
  line-height:1;font-variant-numeric:tabular-nums}
.eg-ledger span{display:block;margin-top:6px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}

.eg-sec{padding:46px 0 0}
.eg-sec-head{display:flex;align-items:baseline;gap:16px;margin:0 0 20px}
.eg-sec-head h2{margin:0;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:660;color:var(--txt)}
.eg-sec-head hr{flex:1;border:0;border-top:1px solid var(--line);margin:0}
.eg-sec-head a{color:var(--dim);text-decoration:none;font-size:12.5px;white-space:nowrap}
.eg-sec-head a:hover{color:var(--txt)}

/* Landscape key art, so the tile is the art rather than a frame around it. The
   guide's own accent is the only added decoration, and only on hover. */
.eg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.eg-tile{text-decoration:none;color:var(--txt);display:block}
.eg-tile-art{display:block;position:relative;aspect-ratio:16/7;overflow:hidden;
  background:#0c0e12;border-radius:8px}
.eg-tile-art img{width:100%;height:100%;object-fit:cover;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.eg-tile:hover .eg-tile-art img{transform:scale(1.04)}
.eg-tile-art-fit{background:#12151b}
.eg-tile-art-fit img{object-fit:contain}
.eg-tile-art::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:var(--c,var(--accent));transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease}
.eg-tile:hover .eg-tile-art::after{transform:scaleX(1)}
.eg-tile:focus-visible{outline:2px solid var(--c,var(--accent));outline-offset:3px}
/* Clamped to two lines, at a fixed height so the meta line below stays on the
   same baseline across a row. A handful of guides carry their full retail
   title — "Mobile Gaming eGuide - Tips, Tricks, and Strategies for Today's
   Hottest Mobile Games" — and left alone one of those sets the row's height. */
.eg-tile b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin:11px 0 3px;height:2.7em;font-size:14px;font-weight:620;line-height:1.35}
.eg-tile small{color:var(--dim);font-size:11.5px;font-variant-numeric:tabular-nums}

/* Counts drawn to scale — navigation and a picture of the archive's shape in
   the same object. */
/* auto-fit, not repeat(12): guideYears() derives the years from the data so a
   later guide appears on its own, and a hardcoded twelve would strand a
   thirteenth year on a second row as one stretched bar. */
.eg-spine{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;
  align-items:end;height:150px}
.eg-spine a{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:8px;
  text-decoration:none;color:var(--dim)}
.eg-spine a:hover{color:var(--txt)}
.eg-spine-bar{background:#242b36;border-top:2px solid #39424f;border-radius:2px 2px 0 0}
.eg-spine a:hover .eg-spine-bar{background:#3a2320;border-top-color:var(--accent)}
.eg-spine a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.eg-spine-n,.eg-spine-yr{font-size:11.5px;text-align:center;font-variant-numeric:tabular-nums}
.eg-spine-yr{padding-top:8px;border-top:1px solid var(--line)}

.eg-chips{display:flex;flex-wrap:wrap;gap:8px}
.eg-chip{display:inline-flex;align-items:baseline;gap:7px;background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;
  color:var(--txt);text-decoration:none}
.eg-chip:hover{border-color:#4a5566;background:#1c2230}
.eg-chip i{font-style:normal;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}

/* The returning-reader band. A panel rather than a rail, because it is prose
   and not a row of tiles, and the accent rule on the left is what stops it
   reading as one more section head on a page that already has five. */
.eg-returning{padding-top:38px}
.eg-returning p:not(.eg-returning-actions){margin:0;color:var(--dim);font-size:14.5px;
  line-height:1.65;max-width:70ch;border-left:3px solid var(--accent);padding-left:16px}
.eg-returning-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin:16px 0 0;padding-left:19px}
/* Shared by the homepage band and the /eguides/moved page, which is why the
   alt link's colour is restated on the sheet below: --dim is a value for the
   dark page, and on white it lands at roughly 2:1. */
.eg-cta{background:var(--accent);color:#fff;text-decoration:none;font-weight:640;
  font-size:14px;padding:10px 18px;border-radius:8px}
.eg-cta:hover{filter:brightness(1.08)}
.eg-cta-alt{color:var(--dim);font-size:13.5px;text-decoration:underline}
.eg-cta-alt:hover{color:var(--txt)}

/* The /eguides/moved explainer, on the white reading sheet. */
.eg-moved h1{margin:0 0 6px;font-size:29px;line-height:1.15;letter-spacing:-.015em;
  color:var(--surface-txt)}
.eg-moved h2{margin:30px 0 8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:660;color:var(--surface-txt)}
.eg-moved p{margin:0 0 12px;color:var(--surface-dim);font-size:15px;line-height:1.7}
/* Doubled up for the same reason as .eg-gate-prior above: ".eg-moved p" out-
   specifies a bare class and would flatten this back to a 12px gap. */
.eg-moved .eg-moved-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:26px}
.eg-moved .eg-cta-alt{color:var(--surface-link)}
.eg-moved .eg-cta-alt:hover{color:var(--surface-txt)}

/* /eguides/help reuses the explainer sheet above and adds one level: h2 is the
   group (SIGNING IN, CODES…), h3 is the question. The question has to read as
   the thing being scanned for, so it is sentence case at body size and bold,
   not another uppercase label — a page of uppercase questions is a page nobody
   scans. */
.eg-help h3{margin:22px 0 6px;font-size:15.5px;font-weight:680;line-height:1.4;
  color:var(--surface-txt)}
.eg-help h2+h3{margin-top:14px}

.eg-close{margin:56px 0 0;border-top:1px solid var(--line);padding:34px 0 64px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.eg-close p{margin:0;color:var(--dim);font-size:13.5px;max-width:56ch}
.eg-close a{background:var(--accent);color:#fff;text-decoration:none;font-weight:640;
  font-size:14px;padding:11px 20px;border-radius:8px;white-space:nowrap}

/* ---------- browse / search forms ---------- */
.eg-browse-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 20px}
.eg-browse-form input[type=search]{flex:1;min-width:180px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:9px 12px;font-size:14px}
.eg-browse-form select{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  color:var(--txt);padding:9px 10px;font-size:14px}
.eg-check{display:flex;align-items:center;gap:7px;color:var(--dim);font-size:13.5px;
  white-space:nowrap;cursor:pointer}
.eg-check input{accent-color:var(--accent);width:15px;height:15px;margin:0}
.eg-browse-form button{background:var(--accent);border:none;border-radius:8px;color:#fff;
  padding:9px 16px;font-size:14px;font-weight:620;cursor:pointer}
.eg-pagination{display:flex;justify-content:space-between;align-items:center;
  margin:24px 0 0;color:var(--dim);font-size:13.5px}
.eg-pagination a{color:var(--link)}

.eg-search-hits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.eg-search-hits a{display:block;padding:12px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--txt)}
.eg-search-hits b{font-size:14.5px;font-weight:640}
.eg-search-hits p{margin:4px 0 0;color:var(--dim);font-size:13.5px;line-height:1.6}
.eg-search-hits mark{background:none;color:var(--txt);font-weight:660}
/* On browse the hits carry a second line of identity — which guide — because
   the query spanned all of them. */
.eg-search-hits i{font-style:normal;color:var(--dim);font-size:12px;margin-left:8px}
.eg-library-hits{margin-top:26px}
.eg-library-hits h2{margin:0 0 6px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:600}

/* ---------- narrower than desktop ----------
   Four regimes, not two. The page used to step at 1400 and 900 only, so every
   width between 901 and 1400 — every tablet in landscape, every small laptop —
   got the full desktop layout at two thirds of the width it was designed for.
   The two rules below are the ones that band actually needed. */

/* The right rail goes first: the ad is worth less than the tree. */
@media (max-width:1400px){
  .eg-shell:not(.eg-shell-plain){grid-template-columns:var(--rail) minmax(0,1fr)}
  .eg-rail{display:none}
}

/* Browse's four-across becomes three. At 901px four tiles are 205px each,
   narrower than the key art is legible at. */
@media (max-width:1100px){
  .eg-library .eg-tiles{grid-template-columns:repeat(3,1fr)}
}

/* The TOC becomes the drawer here rather than at 900, and this is the fix that
   matters most on a tablet.

   The article sheet is 760px so that its content box is exactly 700px, the
   width the legacy imagery was generated at (see .eg-measure). Beside a 316px
   rail, holding that needs 316 + 48 of .eg-main padding + 760 = 1124px of
   viewport. Below that the sheet was silently squeezed and every image in the
   library scaled down — at 1024px the content box was 600px, and the sheet's
   whole reason for its width was gone.

   So the rail collapses into the drawer it already has, and the sheet keeps its
   measure. The drawer loses nothing: the tree is one tap away and, on a guide
   of 1,030 sections, a 316px column was never showing much of it anyway. */
@media (max-width:1124px){
  .eg-shell:not(.eg-shell-plain){grid-template-columns:minmax(0,1fr)}
  .eg-toc-toggle{display:block;margin-left:auto}
  /* The toggle takes the free space at this width; a second auto margin would
     split it and leave the two controls floating apart. */
  .eg-account{margin-left:0}
  .eg-side{position:fixed;inset:var(--bar-h) 0 0 0;height:auto;z-index:25;
    border-right:0;display:none}
  .eg-side[data-open="true"]{display:flex}
}

/* ---------- phone ---------- */
@media (max-width:900px){
  /* Narrowing the shared gutter once keeps every band on one edge at this
     breakpoint too, rather than each rule picking its own inset. */
  :root{--pg-gutter:16px}
  /* The sheet goes edge to edge — a card with margins wastes width that a
     390px screen does not have. */
  .eg-main{padding:0 0 96px}
  .eg-measure{border-radius:0;box-shadow:none;padding:18px 16px 28px}
  #content,
  #content>article{margin-left:-16px;margin-right:-16px;
    padding-left:16px;padding-right:16px}
  /* The hub hero stacks; a 150px cover beside text leaves nothing for either. */
  .eg-hub-hero-inner{flex-direction:column;align-items:flex-start;gap:16px;
    padding:26px 16px 22px}
  .eg-hub-hero img{width:112px}
  .eg-hub-title h1{font-size:25px}
  .eg-hub-body{grid-template-columns:1fr;gap:28px;padding:24px 16px 40px}
  .eg-bare{padding:0}

  /* The bar carries a brand, a guide name, the contents toggle and the account
     at 390px. The name is the part that can be an email, and it is the part
     that says least — the chip's presence already says signed in. */
  .eg-account-name{display:none}
  /* Three more links do not fit beside all of that on a phone; the account
     chip's "Sign out" and the brand link already cover getting somewhere
     else, so the nav is the one thing this width can drop. The search box
     drops for the same reason — it lives on /eguides/browse itself, reachable
     without it. */
  .eg-nav{display:none}
  .eg-search{display:none}

  /* Homepage. The hero stacks — box art beside a headline leaves too little for
     either on a 390px screen. The cover's width and the headline's size are
     fluid above, so neither needs an override here. */
  .eg-home-hero-inner{flex-direction:column;align-items:flex-start;gap:18px;padding:28px 16px 24px}
  .eg-home-hero h1{max-width:none}
  /* Still right-aligned: the read link sits bottom-left once the slide stacks,
     and dots under it would land on top of it. */
  .eg-hero-dots{bottom:10px}
  /* The ledger stacks rather than squeezing three long numbers into a third of
     a phone's width each. */
  .eg-ledger-inner{grid-template-columns:1fr}
  .eg-ledger-inner>div{border-left:0;border-top:1px solid var(--line);padding:15px 16px}
  .eg-ledger-inner>div:first-child{border-top:0}
  .eg-ledger b{font-size:25px}
  .eg-tiles,.eg-library .eg-tiles{grid-template-columns:repeat(2,1fr);gap:14px}
  /* Two rows of six years: twelve columns on a phone gives each bar about
     20px, too narrow to be either readable or tappable. */
  .eg-spine{grid-template-columns:repeat(6,1fr);height:auto;row-gap:20px}
  .eg-spine a{height:110px}
  .eg-close{flex-direction:column;align-items:flex-start;padding:26px 0 48px}

  /* The sidebar's video unit is desktop-only. On mobile the picture-in-picture
     unit carries video, and shipping both would put three units on a 390px
     screen against a spec that allows two (design §7). */
  .eg-side .eg-slot-video{display:none}
}

/* Mobile ad chrome: anchored display plus a dismissible picture-in-picture
   video. Neither enters the article flow. */
.eg-anchor,.eg-pip{display:none}
@media (max-width:900px){
  .eg-anchor{display:flex;position:fixed;left:0;right:0;bottom:0;height:50px;z-index:28;
    border-radius:0;border-left:0;border-right:0;border-bottom:0}
  .eg-pip{display:flex;position:fixed;right:10px;bottom:60px;width:180px;height:101px;z-index:28}
  .eg-pip button{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;
    background:#11141a;border:1px solid #3a4353;color:var(--dim);font-size:13px;line-height:1;
    cursor:pointer;padding:0}
  .eg-pip[hidden]{display:none}
}