/* Generated by make_pages.py -- do not edit.

   THE WORD LIST IS THE PANE'S WORD LIST. Everything from `ul` down to
   `li.rare .w` is ported from taskpane.css, values included, so the list on
   /rhymes/heart is the list the app draws for `heart`. It is not "inspired
   by" it -- if one of those numbers changes there, change it here too, or
   the two surfaces start telling the reader they are different products.

   WHAT IS DELIBERATELY NOT PORTED: input.pick and the 6px gap it sits in.
   There is no checkbox here because there is nothing to gather into, and its
   absence is the one visible mark of the difference that matters -- on this
   page a click on a word GOES to that word; in the pane it SELECTS it. */
:root { --bg:#fff; --fg:#201f1e; --muted:#605e5c; --faint:#a8a5a2;
        --accent:#2b579a; --field:#faf9f8; --line:rgba(128,128,128,.25); }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1f1f1f; --fg:#f3f2f1; --muted:#a19f9d; --faint:#807d7a;
          --accent:#8ab4f8; --field:#2b2b2b; } }
* { margin:0; padding:0; box-sizing:border-box; }
/* taskpane.css's own type, not a document's: 14px/1.45. A 16px/1.7 body was
   what the first draft used and it made the same list read looser and larger
   than the app draws it one click later. */
body { background:var(--bg); color:var(--fg); padding:20px 12px 60px;
       font:14px/1.45 -apple-system,"Segoe UI",system-ui,sans-serif; }
/* web.css lifts the whole scale ~10% below 768px, because "a phone is
   smaller, held closer, and has no panel chrome around it". Same lift here,
   same breakpoint, for the same reason. */
@media (max-width: 767px) {
  body { font-size:15.5px; }
  h3 { font-size:12px; }
}
/* 640px, the width of the website's results box (web.css pins it at
   min(640px, 100% - 24px)). Matching it is what makes a column here the same
   physical width as a column there. */
nav, main, footer { max-width:640px; margin:0 auto; }
nav { display:flex; align-items:center; justify-content:space-between;
      margin-bottom:24px; }
nav img { height:30px; width:auto; display:block; }
nav .up { font-size:14px; }
/* The same brightness lift taskpane.css puts on #panemark, and for the same
   reason: the wordmark is a two-tone PNG with "Rhyme" in near-black navy, so
   on a dark ground that half vanishes and the logo reads as half-missing.
   Drop this here the same day a properly reversed asset exists there. */
@media (prefers-color-scheme: dark) { nav img { filter:brightness(1.9); } }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:26px; line-height:1.25; margin-bottom:10px; }
h2 { font-size:18px; margin:26px 0 4px; padding-top:12px;
     border-top:1px solid var(--line); }
h2 .n { color:var(--muted); font-weight:400; font-size:14px; }
/* taskpane.css's h2, to the pixel -- this is the pane's syllable heading. */
h3 { font-size:11px; font-weight:600; letter-spacing:.06em;
     text-transform:uppercase; color:var(--muted); margin:16px 0 6px; }
.lede { color:var(--muted); margin-bottom:8px; }

/* ---- ported from taskpane.css ---- */
ul { list-style:none; margin:0; padding:0; columns:2; column-gap:14px; }
/* The pane steps 2-3-4-5-6 on viewport width, which is right in Word where
   the panel IS the window. web.css caps the website at 4 for a 640px box;
   this page is that same box, so it caps at 4 too. Below 664px the box is
   the window and the pane's own 470/624 steps fit it. */
@media (min-width: 470px) { ul { columns:3; } }
@media (min-width: 624px) { ul { columns:4; } }
li { break-inside:avoid; padding:1px 0; }
.w { overflow-wrap:anywhere; color:inherit; }
.w:hover { text-decoration:underline; }
li.common { font-weight:700; }
li.rare .w { color:var(--faint); }
/* ---- end port ---- */

.az { margin:10px 0 14px; font-size:18px; letter-spacing:.12em; }
.cta { margin-top:32px; padding:14px 16px; background:var(--field);
       border-radius:10px; font-size:15px; color:var(--muted); }
.cta a { font-weight:600; }
footer { margin-top:40px; padding-top:14px; border-top:1px solid var(--line);
         font-size:13px; color:var(--muted); }