@charset "utf-8";
/* ============================================================================
   Y2K PLAYER — pages.css
   The three components assets/site.css does not carry, used by the intent
   landing pages (/slowed-reverb, /sped-up-songs, /nightcore, …).

   Everything below reads ROLE tokens from site.css only — --ink, --ink-quiet,
   --ground-lift, --accent, --seam, --r-card, --w-catch and friends — so these
   surfaces flip with the colour scheme and with the live theme switcher
   exactly like every native component does.

   Declared in @layer lp so it can never outrank site.css by accident. If the
   shell wants these, move the three blocks into site.css @layer components
   verbatim and drop this file plus its <link>; nothing else changes.

   The one transition rule from site.css applies here too: transform, opacity,
   filter and grid-template-rows ONLY — never a colour, border-colour,
   background or box-shadow, because those are fed by role tokens the theme
   switcher rewrites live.
   ==========================================================================*/

@layer lp;

@layer lp {

  /* --------------------------------------------------------------------
     1. .steps — the numbered How-To list. Its markup is mirrored into the
     HowTo JSON-LD on every page that uses it, so what is drawn here is
     exactly what the structured data claims.
     -------------------------------------------------------------------- */
  .steps {
    display: grid;
    gap: .85rem;
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2.35rem 1fr;
    gap: .35rem 1rem;
    align-items: start;
    padding: 1.05rem clamp(1rem, 2.5vw, 1.4rem);
    border-radius: var(--r-card);
    background-color: color-mix(in srgb, var(--ink) 6%, transparent);
    box-shadow: inset 0 0 0 1px var(--seam-hair);
  }
  .steps > li::before {
    content: counter(step);
    grid-row: span 2;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: var(--w-catch);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 2px var(--seam);
  }
  .steps b {
    font-weight: var(--w-catch);
    color: var(--ink);
    letter-spacing: -0.01em;
    align-self: center;
  }
  .steps span {
    color: var(--ink-body);
    text-wrap: pretty;
  }
  @media (max-width: 30rem) {
    .steps > li { grid-template-columns: 2rem 1fr; gap: .35rem .75rem; }
    .steps > li::before { inline-size: 2rem; block-size: 2rem; font-size: .9rem; }
  }

  /* --------------------------------------------------------------------
     2. .datatable — the measured-numbers table. Wide content scrolls inside
     its own box; the page body never scrolls sideways.
     -------------------------------------------------------------------- */
  .datatable {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border-radius: var(--r-card);
    box-shadow: inset 0 0 0 1px var(--seam-hair);
    background-color: color-mix(in srgb, var(--ink) 4%, transparent);
  }
  /* The wrapper is a tab stop (see build_site.name_datatables) because Safari
     does not make a plain scroller focusable and the right-hand columns of
     every measured table were otherwise unreachable by keyboard. The ring
     hugs the rounded box rather than floating off it. */
  .datatable:focus-visible { outline-offset: 0; border-radius: var(--r-card); }
  .datatable table {
    border-collapse: collapse;
    inline-size: 100%;
    min-inline-size: 32rem;
    font-size: .95rem;
    text-align: start;
  }
  .datatable caption {
    caption-side: top;
    text-align: start;
    padding: 1rem clamp(1rem, 2.5vw, 1.4rem) .4rem;
    color: var(--ink-faint);
    font-size: var(--meta);
    font-weight: var(--w-quiet);
  }
  .datatable :is(th, td) {
    text-align: start;
    vertical-align: top;
    padding: .7rem clamp(1rem, 2.5vw, 1.4rem);
    border-block-end: 1px solid var(--seam-hair);
  }
  .datatable thead th {
    color: var(--accent-on);
    font-weight: var(--w-strong);
    font-size: var(--meta);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .datatable tbody th {
    color: var(--ink);
    font-weight: var(--w-catch);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .datatable td { color: var(--ink-body); text-wrap: pretty; }
  .datatable tbody tr:last-child :is(th, td) { border-block-end: 0; }

  /* --------------------------------------------------------------------
     3. .limits — the honest-limits list. Transparency bias: naming the
     downside next to the button is what makes the rest of the page
     credible, so it gets a real surface rather than a footnote.
     -------------------------------------------------------------------- */
  .limits > ul {
    display: grid;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  /* A block li with an absolutely-placed dot: the text stays ONE flow item,
     so a <b> lead-in and the sentence after it share a line. (A grid li turns
     the bare text node into a second grid item and sets it one character
     wide — verified in the browser, not assumed.) */
  .limits > ul > li {
    display: block;
    position: relative;
    padding-block: .8rem;
    padding-inline-start: 1.6rem;
    border-block-start: 1px solid var(--seam-hair);
    color: var(--ink-body);
    text-wrap: pretty;
  }
  .limits > ul > li:first-child { border-block-start: 0; padding-block-start: 0; }
  .limits > ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 1.35em;
    inline-size: .6rem;
    block-size: .6rem;
    border-radius: var(--r-pill);
    background: var(--fresh-on, var(--accent-on));
  }
  .limits > ul > li:first-child::before { inset-block-start: .55em; }
  .limits b { color: var(--ink); font-weight: var(--w-catch); }

  /* The readout row on a landing hero: three measured numbers, spaced for
     their own size rather than for chips. */
  .readouts {
    --cluster-gap: 1.15rem 1.9rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
}


/* ============================================================================
   THE INTENT PAGES — the component vocabulary their markup actually uses.

   Written after finding that 64 of the 95 classes on these 13 pages were
   defined in NO stylesheet they load. They were generated against a design
   system that was replaced, and no stylesheet in git history ever carried
   `.job`, `.stage`, `.catch`, `.readout` or the rest — so the pages had been
   rendering with unstyled chrome and unstyled body components. The copy is
   hand-written per page and good; the markup is a sound vocabulary; only the
   stylesheet was missing.

   NOT in @layer, and compound selectors where a site.css component is being
   modified (`.btn.btn--go`, not `.btn--go`). The block above is layered so it
   can never outrank site.css — but a MODIFIER has to outrank the thing it
   modifies, and a layered single-class selector loses to an unlayered one.
   ========================================================================= */

/* ------------------------------------------------------------- typography */

/* The page title. Same recipe as an h1 on the home page, so a reader arriving
   from search lands somewhere that is recognisably the same site. */
.catch {
  font-family: var(--display); font-weight: var(--w-catch);
  /* 52px is a MEASURED ceiling, not taste. Every hero headline is hand-broken
     with a literal <br> and sits in a 620px column; at 62px five of the twelve
     break to a third line, at 68px ten do. Do not raise this without re-running
     the break test on all twelve. */
  font-size: clamp(30px, 4.1 * var(--u), 52px);
  line-height: .96; letter-spacing: -0.035em;
  text-wrap: balance; margin: 0;
}
/* 30ch, from the original system. 22ch was a fossil of an older --measure. */
.catch--wide { max-width: 30ch; }
.catch--onart { text-shadow: 0 2px 24px rgb(0 0 0 / .55); }

/* A section heading. Smaller than the page title and never competing with it. */
/* Below a bare prose h2 and above an h3 — the ladder was inverted, with this
   at 37.15px over a 33.44px h2. It also lands on <p> in two places, so it sets
   its own family and weight rather than inheriting from a heading. */
.caption {
  font-family: var(--display); font-weight: var(--w-catch);
  font-size: clamp(20px, 2.2 * var(--u), 30px);
  line-height: 1.04; letter-spacing: -0.028em;
  text-wrap: balance; margin: 0;
}
/* Absolute, non-negotiable: this is a sibling <p>, not a child, so `.58em`
   resolved against 15.5px body and rendered at 8.99px. */
.caption__sub { display: block; font-size: 1rem; font-weight: var(--w-quiet);
                color: var(--ink-quiet); letter-spacing: -0.01em; margin-top: 8px; }

/* The line above the title. Identical to the home page's eyebrow — same job,
   different name, and renaming it in twelve pages of hand-written copy would
   be churn for nothing. */
.kicker {
  font-family: var(--display); font-weight: var(--w-strong);
  font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.kicker--quiet { color: var(--ink-faint); }

/* The lede. One step up from body, and the only paragraph that gets to be big. */
/* A deck must not look like a paragraph. It was 16px/400 above a 15.5px/400
   body — half a pixel apart. Display face, heavier, and at least 1.2x the body
   under it. `--quiet` changes COLOUR ONLY, or the rank moves with the tone. */
.sub {
  font-family: var(--display); font-weight: var(--w-strong);
  font-size: clamp(18px, 1.6 * var(--u), 24px);
  line-height: 1.35; letter-spacing: -0.012em;
  color: var(--ink-body);
  max-width: 46ch; margin: 0; text-wrap: pretty;
}
.sub--quiet { color: var(--ink-quiet); }
.sub--onart { text-shadow: 0 1px 18px rgb(0 0 0 / .6); }

/* Matches site.css's `.meta` rather than dropping two steps at once. This is
   the price disclosure beside the buy button; it has to be readable. */
.fineprint { font-size: 0.9rem; line-height: 1.5; color: var(--meta);
             max-width: 46ch; margin: 0; }

/* Long-form body. The only place on the site with running prose, so it carries
   its own rhythm rather than inheriting the landing page's. */
.prose > * + * { margin-top: 1.05em; }
.prose h2 {
  font-family: var(--display); font-weight: var(--w-catch);
  font-size: clamp(23px, 2.7 * var(--u), 36px);
  line-height: 1.06; letter-spacing: -0.026em;
  margin-top: 1.6em; text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--display); font-weight: var(--w-strong);
  font-size: clamp(18px, 1.7 * var(--u), 23px); letter-spacing: -0.018em;
  margin-top: 1.4em;
}
.prose p { color: var(--ink-body); text-wrap: pretty; }
.prose strong, .prose b { color: var(--ink); font-weight: var(--w-strong); }
.prose a { color: var(--accent); text-underline-offset: 3px; }
/* Scoped to UNCLASSED lists. Unscoped, these reached `ol.steps` and
   `.limits > ul > li`, both of which draw their own markers — `.steps > li` was
   computing `list-style-type: decimal` and was saved only by being a grid. */
.prose > ul:not([class]), .prose > ol:not([class]),
.prose > * > ul:not([class]), .prose > * > ol:not([class]) { padding-left: 1.15em; }
.prose ul:not([class]) > li { list-style: disc; margin-top: .5em; color: var(--ink-body); }
.prose ol:not([class]) > li { list-style: decimal; margin-top: .5em; color: var(--ink-body); }

/* ------------------------------------------------------------ layout bits */

/* The column and the paragraph inside it have to agree. site.css caps every
   `p` at `--measure` (62ch), so a 74ch column left each paragraph ending 117px
   short of the heading above it. The column IS the measure here. */
.wrap--prose { width: min(66ch, 100% - var(--bleed) * 2); margin-inline: auto; }
.prose p, .prose li { max-width: none; }
/* reads the token, because mobile.css already relaxes it to 100% on phones */
.measure { max-width: var(--measure, 62ch); }
.measure-prose { max-width: 74ch; }
.mx-auto { margin-inline: auto; }
/* AFTER the stretch fix, deliberately: same specificity, and the closer carries
   `stack stack--sm center`, so source order decides whether it centres. It needs
   align-items too — text-align alone cannot centre a flex child. */
.center { align-items: center; text-align: center; }
.text-center { text-align: center; }
.center .sub, .center .fineprint, .center .cluster { margin-inline: auto; }

/* THE STRETCH FIX — one line, five bugs.
   site.css's `.stack` is `align-items: flex-start`, so every block child
   shrink-wraps to its content. That is the single root cause of: the job grid
   collapsing to one column, the FAQ collapsing, /support's card measuring 473px
   inside its own 722px cap, /404's nested stack collapsing so `mx-auto` had no
   free space to absorb, and `.cluster--center` shrink-wrapping so
   `justify-content: center` did nothing.
   Safe: index.html uses only `.stack` and `.stack--center`, never these. */
.stack--sm, .stack--lg { align-items: stretch; }
/* both the literal AND the variable: `.stack` hard-codes its gap, while `.split`
   and `.grid` read `var(--gap)`, and the markup nests them inside stacks */
.stack--sm { gap: 12px; --gap: 12px; }
.stack--lg { gap: 30px; --gap: 30px; }

.rule { border: 0; border-top: 1px solid var(--seam-hair); margin: 30px 0; }

/* A row of things that wraps: buttons, readouts, chips. */
/* Reads --cluster-gap because `.readouts` (used as `class="cluster readouts"`)
   sets it and expects to win. Hard-coding the gap made that dead. */
.cluster { display: flex; flex-wrap: wrap; align-items: center;
           gap: var(--cluster-gap, 14px);
           list-style: none; padding: 0; margin: 0; }
.cluster--center { justify-content: center; }

.grid {
  display: grid; gap: clamp(14px, 1.8 * var(--u), 26px);
  /* WIDTH 100% IS LOAD-BEARING. `.stack` is `align-items: flex-start`, so a
     block child shrinks to its content: measured, this grid came out 458px
     inside a 1240px wrap and auto-fit gave it ONE column instead of two. */
  width: 100%;
       
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
        list-style: none; padding: 0; margin: 0; }
/* Two, because it is called --2. Left on auto-fit it made three columns in a
   1240px wrap and laid four job cards out as 3 + 1. */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 719px) { .grid--2 { grid-template-columns: minmax(0, 1fr); } }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
/* Rows line up even when one card carries a line more than its neighbour. */
.grid--aligned > li, .grid--aligned > * { display: flex; }
.grid--aligned > li > *, .grid--aligned > * > * { flex: 1; }

.split--art-first > :first-child { order: 2; }
.split--art-first > :last-child { order: 1; }

/* ---------------------------------------------------------- band variants */

.section--tight { min-height: 0; padding-block: clamp(30px, 4 * var(--u), 62px); }
/* .86, not .58. site.css's veil ladder says below 0.60 no text is safe at all,
   and EVERY hero carries this band along with its crumbs, kicker, deck and the
   price line beside the buy button — which was the least readable copy on the
   site. The field still reads through at .86; the copy is legible. */
.band--field   { --veil: .86; }
.band--warm    { --veil: .94; }
.band--lift    { --veil: .96; background-image: linear-gradient(to bottom,
                 var(--ground-lift), transparent 40%); }
.band--deep    { --veil: .99; }
.section--lift { background-image: linear-gradient(to bottom, var(--ground-lift), transparent 45%); }
.section--cool { --spill: 262; }

/* `cv` marks a band whose height is set by its copy rather than by the height
   rule — an argument that is as long as it needs to be. */
.cv        { min-height: 0; }
.cv--tall  { min-height: 0; padding-block: clamp(48px, 7 * var(--u), 104px); }
.cv--short { min-height: 0; padding-block: clamp(22px, 3 * var(--u), 44px); }

/* -------------------------------------------------------------- crumbs */

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
             list-style: none; padding: 0; margin: 0;
             font-size: 13px; color: var(--ink-faint); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { color: var(--ink-quiet); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-faint); }

/* ------------------------------------------------------------ the buttons */

/* Modifiers of site.css's `.btn`, so they must be compound to outrank it. */
.btn.btn--go   { /* the primary — .btn is already the accent gradient */ }
.btn.btn--lg   { padding: 17px 32px; font-size: 18px; }
.btn.btn--lead { padding: 18px 36px; font-size: 19px; }
.btn.btn--ghost {
  background: rgb(255 255 255 / .07);
  color: var(--ink);
  border: 1px solid var(--seam);
  box-shadow: none;
}
.btn.btn--ghost:hover { background: rgb(255 255 255 / .12); }

.chip {
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .06); border: 1px solid var(--seam);
  color: var(--ink); text-decoration: none;
  font-family: var(--display); font-weight: var(--w-strong); font-size: 14.5px;
}
.chip:hover { background: rgb(255 255 255 / .11); border-color: var(--accent-ui); }

/* ------------------------------------------------------------- the readout */

/* A number and what it means. Used in the hero of every intent page. */
.readout {
  display: inline-flex; flex-direction: column; gap: 1px;
  font-family: var(--display); font-weight: var(--w-catch);
  font-size: clamp(19px, 1.8 * var(--u), 25px); letter-spacing: -0.02em;
  color: var(--ink);
}
.readout small {
  font-family: var(--body); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0; color: var(--ink-faint); text-transform: none;
}

/* ---------------------------------------------------------------- the job */

/* The most-used bespoke component on these pages: a link to a related page,
   carrying its own reason to be clicked. Forty-eight of them across twelve
   pages — this IS the site's internal linking, so it has to look worth
   pressing rather than look like a footer link that wandered up the page. */
.job {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(16px, 1.8 * var(--u), 22px);
  border-radius: var(--r-card);
  background: rgb(255 255 255 / .05);
  border: 1px solid var(--seam);
  text-decoration: none; color: var(--ink);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.job:hover {
  background: rgb(255 255 255 / .09);
  border-color: var(--accent-ui);
  transform: translateY(-2px);
}
.job__label {
  font-family: var(--display); font-weight: var(--w-catch);
  font-size: clamp(17px, 1.5 * var(--u), 20px); letter-spacing: -0.018em;
}
.job__note { color: var(--ink-quiet); font-size: 14.5px; line-height: 1.45;
             text-wrap: pretty; }
.job__go   { margin-top: auto; padding-top: 6px; color: var(--accent);
             font-family: var(--display); font-weight: var(--w-strong);
             font-size: 14px; }
.job:hover .job__go { color: var(--accent-on); }

/* --------------------------------------------------------------- the cards */

.card {
  padding: clamp(18px, 2.2 * var(--u), 30px);
  border-radius: var(--r-card);
  background: rgb(255 255 255 / .05);
  border: 1px solid var(--seam);
}
.card--lg { padding: clamp(22px, 3 * var(--u), 40px); }
.card--lit { border-color: var(--accent-ui);
             box-shadow: 0 0 60px -24px var(--glow); }
.card > h2, .card > h3 { margin-top: 0; }

/* A themed screenshot with its name under it. */
.tile { margin: 0; }
.tile img { display: block; width: 100%; height: auto; border-radius: 14px;
            border: 1px solid rgb(255 255 255 / .08);
            box-shadow: 0 24px 54px -28px rgb(0 0 0 / .9); }
.tile__label { display: block; margin-top: 9px;
               font-family: var(--display); font-weight: var(--w-strong);
               font-size: 14px; color: var(--ink-quiet); }

/* -------------------------------------------------------------- the device */

/* An earlier device shell than the home page's `.dev3d`, with one fewer
   wrapper: `.phone__body` holds the <picture> directly, where `.dev3d__body`
   holds a `.dev3d__screen` that holds it. Same object, so the same recipe —
   rim light, glass, the shadow pair — applied one level up. */
.stage { display: flex; justify-content: center; perspective: 1400px;
         perspective-origin: 50% 42%; }
.phone__body {
  position: relative;
  width: min(340px, 78vw, 30svh);
  padding: 7px;
  border-radius: 40px;
  background: linear-gradient(155deg, rgb(255 255 255 / .30), rgb(255 255 255 / .06) 38%,
                                       rgb(255 255 255 / .02) 62%, rgb(255 255 255 / .18));
  box-shadow: 0 60px 120px -50px rgb(0 0 0 / .95),
              0 0 90px -26px oklch(0.62 0.21 var(--spill, var(--hue)) / .45);
}
.phone__body::before {                      /* the rim light */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / .75), rgb(255 255 255 / .10) 42%,
                                       rgb(255 255 255 / .05) 70%, rgb(255 255 255 / .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.phone__body::after {                       /* the raking highlight */
  content: ""; position: absolute; inset: 7px; border-radius: 34px;
  pointer-events: none;
  background: linear-gradient(122deg, rgb(255 255 255 / .16) 0%,
              rgb(255 255 255 / .05) 18%, transparent 40%, transparent 100%);
}
.phone__body picture, .phone__body img {
  display: block; width: 100%; height: auto;
  border-radius: 34px; background: #0a0614;
}
.phone--tilt .phone__body { transform: rotateY(-11deg) rotateX(3deg) rotateZ(-1deg); }
.phone--flat .phone__body { transform: none; }

/* --------------------------------------------------------------- the faq */

/* `.faq__a` is used 166 times and needs almost nothing: site.css's `.faq p`
   already reaches the paragraphs inside it. All it adds is the indent that
   separates an answer from the question above it. */
.faq__a > div > * + * { margin-top: .8em; }
.faq__a ul, .faq__a ol { padding-left: 1.15em; margin-top: .7em; }
.faq__a li { list-style: disc; color: var(--ink-body); margin-top: .35em; }

/* 404 */
.lost { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .job { transition: none; }
  .job:hover { transform: none; }
  .phone--tilt .phone__body { transform: rotateY(-6deg); }
}

@media (max-width: 899px) {
  .phone__body { width: min(260px, 70vw); }
  /* The <br> in every hero headline is a DESKTOP break, set by hand for a 620px
     column. On a phone it fights the natural wrap and buys a fourth line with an
     orphan on it — measured on /slow-down-a-song, /bass-boost and /themes. Let
     the text wrap where it wants to. */
  .catch br { display: none; }
  .catch { font-size: clamp(29px, 8.4vw, 40px); }
  .caption { font-size: clamp(22px, 6.4vw, 30px); }
  .sub, .measure, .measure-prose, .catch--wide { max-width: 100%; }
  .stack--lg { gap: 22px; }
}

/* The tilt wrapper. `.stage` owns the perspective, `.phone` is the element the
   rotation is applied through, `.phone__body` is the shell. */
.phone { display: block; transform-style: preserve-3d; }

/* --------------------------------------------------------- art-backed bands
 * A band whose background is a full-bleed image rather than the live field —
 * used by 404. The art is held down and the copy sits on a floor of ground
 * colour, the same contract every other surface with type over imagery has. */
.band--art { position: relative; overflow: clip; isolation: isolate; }
.band--art::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
              rgb(from var(--ground) r g b / .82) 0%,
              rgb(from var(--ground) r g b / .52) 45%,
              rgb(from var(--ground) r g b / .90) 100%);
}
.band--art > * { position: relative; z-index: 2; }
.band--art--freefall {
  background-image: url("/assets/img/ground-freefall.webp");
  background-size: cover; background-position: center;
}
.band--art-bottom { background-position: center bottom; }