is used in a post and several times on the privacy
page and had no rule at all, so a filename or a header name rendered as
ordinary prose in the middle of a sentence. and are styled
with it so the next one that gets written already has somewhere to land. */
.card code,.card kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.88em;background:var(--paper-2);border:var(--border-sm);border-radius:7px;
padding:1px 6px;white-space:nowrap}
.card pre{background:var(--paper-2);border:var(--border-sm);border-radius:12px;
padding:16px 18px;margin:0 0 18px;overflow-x:auto;box-shadow:2px 2px 0 rgba(61,61,74,.12)}
.card pre code{background:none;border:0;padding:0;white-space:pre;font-size:.9rem}
.card blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:4px solid var(--focus);
font-family:'Kalam',cursive;font-size:1.08rem;line-height:1.55}
.card blockquote p{font-weight:400;margin-bottom:8px}
.card blockquote p:last-child{margin-bottom:0}
/* Prev/next between posts, and the "more posts" rail at the foot of one.
.postnav-head was three identical inline style attributes, one per post —
the shape a rule takes just before the fourth post gets a slightly different
copy of it. */
.postnav-head{font-size:1.6rem;margin:38px 0 14px}
.postnav{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;margin-top:8px}
.postnav a{flex:1 1 260px;text-align:left;justify-content:flex-start;
font-size:.95rem;line-height:1.3;padding:14px 18px}
/* The closing callout on the index and at the foot of a post wants air above it
and none of its own below — the .wrap already ends the page. Was an inline
style="margin-top:34px" on the index only, so the post pages sat tighter than
the index for no reason anyone chose. */
.wrap > .stickynote{margin-top:34px;margin-bottom:0}
/* FOOTER — matches index.html character for character.
Twelve links in one 22px-gapped row wrapped into a ragged block with no
grouping and no hit area: the hover was a colour change on the glyphs alone.
They are chips now, on a measure narrow enough to wrap evenly, and the
copyright line and the language picker each get their own row instead of
colliding on one. */
footer{background:#4A4A5E;color:#F4F5FA;padding:44px 28px 32px;text-align:center;
position:relative;z-index:1;border-top:var(--border)}
footer .flinks{display:flex;gap:6px 8px;justify-content:center;flex-wrap:wrap;
max-width:780px;margin:20px auto 16px}
footer .flinks a{color:#F4F5FA;font-weight:800;text-decoration:none;font-size:.92rem;
padding:5px 11px;border-radius:999px;border:2px solid transparent;transition:.15s}
footer .flinks a:hover{color:var(--ink-strong);background:var(--yellow);border-color:var(--yellow)}
footer small{opacity:.75;font-weight:700;display:block}
footer .foot-lang{margin-top:16px}
@media (max-width:920px){
body::before{display:none}
/* Baseline (no JS): the links WRAP onto their own full-width row. Wrapped,
the bar is ~3 rows tall, and pinning that to the top of a phone screen
costs more than it gives — so the baseline scrolls away and only the
enhanced one-row bar stays sticky. Identical to index.html's block. */
nav.topnav{position:static;flex-wrap:wrap;row-gap:10px;padding:13px 18px}
body[data-nav="js"] nav.topnav{position:sticky}
.nav-links{flex-wrap:wrap;justify-content:flex-start;width:100%;order:3;gap:6px 4px}
.nav-links a{padding:7px 11px;font-size:.85rem}
.nav-links a.btn{margin-right:0!important}
/* Enhanced (JS ran): collapse the same links into a real toggle menu. Keyed
off body[data-nav="js"] so the baseline above is what ships if /nav.js
never executes. */
body[data-nav="js"] .nav-toggle{display:inline-flex}
body[data-nav="js"] .nav-links{display:none;flex-direction:column;align-items:stretch;
padding-top:4px;border-top:2px dashed rgba(61,61,74,.25);margin-top:2px}
body[data-nav="js"] .nav-links.open{display:flex}
body[data-nav="js"] .nav-links a{text-align:center;font-size:.95rem;padding:10px 12px}
.pagehead{padding:42px 20px 18px}
.wrap{padding:10px 20px 60px}
.card{padding:23px}
.release-body{padding:20px}
.release-head{padding:13px 20px}
}
@media (max-width:520px){
.nav-links a:not(.btn){padding:5px 8px;font-size:.8rem}
.logo{font-size:1.35rem}
.stickynote{transform:none}
.feat .fic{width:32px;height:32px;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:3px dashed var(--focus);outline-offset:3px}
/* ── LANGUAGE PICKER ────────────────────────────────────────────────────────
One component, two homes: the header and the footer. Anchored to its own
.lang-pick rather than to the nav, so the footer copy inherits nothing it
should not.
NOT A LISTBOX. It is a disclosure button (aria-expanded + aria-controls)
revealing a plain list of links — see the header comment in lang.js for why
the role="listbox"/role="option" it used to declare was a lie. */
/* Read by a screen reader, invisible on screen. Used for the "Language:" prefix
on the picker button, so its accessible name is "Language: English" and still
comes from real text — no aria-label to drift out of sync with what is drawn.
Not display:none and not visibility:hidden: both remove it from the
accessibility tree, which is the one place it needs to exist. */
.sf-vh{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
white-space:nowrap;border:0;
}
.lang-pick{position:relative;display:inline-flex;align-items:center}
.lang-btn{
display:inline-flex;align-items:center;gap:6px;
font:inherit;font-size:.85rem;font-weight:700;
padding:7px 11px;border:2px solid currentColor;border-radius:999px;
background:transparent;color:inherit;cursor:pointer;line-height:1;
}
.lang-btn:hover{background:rgba(0,0,0,.06)}
.lang-btn:focus-visible{outline:3px solid #00B8D4;outline-offset:2px}
.lang-menu{
position:absolute;top:calc(100% + 6px);right:0;z-index:60;margin:0;padding:6px;
list-style:none;min-width:170px;
background:#fff;color:#222;border:2px solid #222;border-radius:12px;
box-shadow:4px 4px 0 rgba(0,0,0,.18);
}
/* The FOOTER menu opens UPWARD — dropping it below the last element on the page
puts it past the bottom of the document, where it either clips or extends the
scroll height for no reason. */
.foot-lang .lang-menu{top:auto;bottom:calc(100% + 6px)}
.lang-menu li{margin:0}
.lang-menu a{
display:block;padding:8px 12px;border-radius:8px;
text-decoration:none;color:inherit;font-size:.9rem;white-space:nowrap;
}
.lang-menu a:hover,.lang-menu a:focus-visible{background:#FFE58A}
.lang-menu a.on{font-weight:800}
.lang-menu a.on::after{content:" ✓"}
@media (max-width:520px){
/* On a phone the header menu would otherwise run off the right edge, because
the picker sits at the end of a wrapped nav row. */
.lang-menu{right:auto;left:0}
.foot-lang{margin-top:10px}
}
/* ── CJK DISPLAY TEXT ────────────────────────────────────────────────────────
*
* Bangers carries NO Chinese or Japanese glyphs. Every display heading asked
* for it anyway, so on zh-CN and ja the browser silently fell through to a
* default system face — thin, light-weight, and still wearing the
* letter-spacing that only makes sense for Latin capitals. The result was a
* hero headline that looked weaker than the body text beneath it, in exactly
* the two languages where the brand voice had to carry itself without the
* comic lettering.
*
* So CJK gets its own display stack: the heaviest system face each platform
* actually ships, at a real bold weight, with the Latin tracking removed.
* Scoped by :lang(), which already carries and lang.js already
* stamps on every switch — so this follows the picker with no extra wiring.
*/
:lang(ja) .display, :lang(ja) .hero h1, :lang(ja) .section h2,
:lang(ja) .card h2, :lang(ja) .card h3, :lang(ja) .postcard h2, :lang(ja) .post h2,
:lang(zh-CN) .display, :lang(zh-CN) .hero h1, :lang(zh-CN) .section h2,
:lang(zh-CN) .card h2, :lang(zh-CN) .card h3, :lang(zh-CN) .postcard h2, :lang(zh-CN) .post h2 {
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
"Noto Sans JP", "Noto Sans SC", "Source Han Sans SC",
"Microsoft YaHei", "PingFang SC", sans-serif;
font-weight: 800;
/* Latin tracking on CJK reads as broken spacing, not as style. */
letter-spacing: 0;
/* NO font-size HERE. The headings size themselves with clamp(); an `em` on
top of that multiplies against the clamped value and collapsed the hero to
body size. A CJK face does read heavier than Bangers at the same size, but
that is paid for with line-height, not by shrinking the headline. */
line-height: 1.4;
}
/* The kicker/eyebrow uppercases and tracks out — both are Latin-only ideas. */
:lang(ja) .kicker, :lang(zh-CN) .kicker {
text-transform: none; letter-spacing: 0;
}
/* ── NAV DROPDOWN ─────────────────────────────────────────────────────────
Opens on click, not hover: a hover menu is unusable on touch and fires by
accident on the way to the button beside it. */
.navdrop{position:relative;display:inline-block}
.navdrop-btn{
font:inherit;font-weight:800;font-size:.92rem;color:var(--ink);
background:none;border:2px solid transparent;border-radius:999px;
padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.navdrop-btn::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.6}
.navdrop-btn:hover{border-color:var(--ink);background:var(--cyan)}
.navdrop-btn[aria-expanded="true"]{border-color:var(--ink);background:var(--cyan)}
.navdrop-menu{
position:absolute;top:calc(100% + 8px);left:0;z-index:60;
list-style:none;margin:0;padding:6px;min-width:196px;
background:#fff;border:var(--border);box-shadow:var(--shadow);border-radius:14px;
}
.navdrop-menu[hidden]{display:none}
.navdrop-menu li{margin:0}
.navdrop-menu a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;
color:var(--ink);font-weight:800;font-size:.9rem}
.navdrop-menu a:hover,.navdrop-menu a:focus-visible{background:var(--yellow)}
/* The extension CTA reads as its own thing, not a second copy of the app one. */
.btn.ext{background:var(--lime)}
.btn.big.lime{background:var(--lime)}
/* Footer: the CTA pair and the support address. */
.foot-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}
.foot-mail{margin:8px 0 0}
.foot-mail a{color:#F4F5FA;font-weight:800;text-decoration:none;border-bottom:2px solid rgba(244,245,250,.4)}
.foot-mail a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}
/* Below the nav's collapse point the dropdown is a plain block — a floating
menu inside an already-open hamburger panel is a menu inside a menu. */
@media (max-width:920px){
.navdrop{display:block;width:100%}
.navdrop-btn{width:100%;justify-content:space-between;text-align:left}
.navdrop-menu{position:static;box-shadow:none;border:0;padding:0 0 0 10px;min-width:0;background:transparent}
}
/* [hidden] IS NOT ENOUGH ON ITS OWN. The UA stylesheet gives it display:none,
but ANY author rule that sets `display` wins — and .btn sets inline-flex, so
a hidden button stayed on screen. This is the fix for the extension CTA
showing before its store link exists. */
[hidden]{display:none!important}