/* Hack Yourself: photos and credits inside the post column. */
/* Full width with height:auto keeps the width/height attributes' aspect ratio, so space is
   reserved before the image loads. Tall photos get a fixed height instead of a fixed width. */
.hy-photo img{display:block;width:100%;height:auto}
.hy-photo.tall img{width:auto;max-width:100%;height:min(72vh,38rem)}
.hy-photo.is-taped img{display:block;width:100%;height:auto}
.layout:has(.hyf-hud) .prose > .hy-photo.is-taped{
  position:relative;
  width:min(calc(100% - 1.5rem), 22rem);
  max-width:none;
  margin:3rem auto;
  padding:.65rem .65rem 0;
  background:#ece7d8;
  box-shadow:0 22px 45px rgba(0,0,0,.38);
  rotate:-1.4deg;
  transition:rotate .25s ease, translate .25s ease, box-shadow .25s ease;
}
.layout:has(.hyf-hud) .prose > .hy-photo.is-taped.is-taped-r{rotate:1.2deg}
.layout:has(.hyf-hud) .prose > .hy-photo.is-taped:hover{rotate:0deg;translate:0 -3px;box-shadow:0 28px 55px rgba(0,0,0,.45)}
.hy-photo.is-taped figcaption{max-width:none;margin:0;padding:.6rem .25rem .75rem;color:#3b382f;font:.75rem/1.5 var(--mono);text-align:center}
.hy-photo.is-taped figcaption small{display:block;margin-top:.35rem;color:#48443a;font-size:.75rem}
.hy-photo.is-taped::before,
.hy-photo.is-taped::after{content:"";position:absolute;top:-.55rem;width:4.6rem;height:1.15rem;background:rgba(255,255,255,.45);border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 2px rgba(0,0,0,.18);backdrop-filter:blur(1px)}
.hy-photo.is-taped::before{left:-.55rem;rotate:-7deg}
.hy-photo.is-taped::after{right:-.55rem;rotate:6deg}
@media (prefers-reduced-motion:reduce){.hy-photo.is-taped{transition:none}}
.hy-photo figcaption{max-width:46rem;margin-inline:auto;text-wrap:pretty}
.hy-photo figcaption small{display:block;margin-top:.3rem;font-size:.75rem;color:var(--muted)}
.prose .sources{font-size:.85rem}

/* Widescreen layout for this post only (it is the only one with the hero banner).
   The TOC is replaced by the HUD here, so drop its empty column, keep the text at a
   reading measure in the centre, and let widgets, charts and photos use the width. */
.layout:has(.hyf-hud){grid-template-columns:minmax(0,1fr)}
@media (min-width:1001px){.layout:has(.hyf-hud){grid-template-columns:minmax(0,46rem);justify-content:center}}
/* "On this page" floats in the top-right corner only once the 1120px chart blocks
   leave a clear margin (the global floating TOC starts at the same width). */
@media (min-width:1440px){
  .layout:has(.hyf-hud) .toc{position:fixed;top:5.25rem;right:1.25rem;width:13rem;max-height:calc(100dvh - 7rem);padding:.2rem 0 .2rem 1rem;border:0;border-left:1px solid var(--hair);border-radius:0;background:none;backdrop-filter:none;z-index:20}
  .layout:has(.hyf-hud) .toc.min{width:auto;padding:.35rem .65rem;border:1px solid var(--hair);border-radius:6px;background:var(--surface)}
}
.layout:has(.hyf-hud) .prose{
  --hy-read:42rem;
  --hy-wide:min(1320px, calc(100vw - 4rem));
  max-width:none;
}
/* Big blocks around the text are up to 1120px wide, so the prose gets a slightly
   larger size to hold its own next to them. */
@media (min-width:1001px){
  .layout:has(.hyf-hud) .prose{font-size:1.14rem;line-height:1.75}
}
/* No real margin below 1440: keep the TOC in flow so it cannot cover charts. */
@media (min-width:1001px) and (max-width:1439px){
  .layout:has(.hyf-hud) .toc{position:static;order:-1;justify-self:start;width:min(20rem,100%);max-height:none;margin:0 0 1rem;padding:.5rem 0 .5rem 1rem;border:0;border-left:1px solid var(--hair);background:none}
  .layout:has(.hyf-hud) .toc.min{width:auto;padding:.35rem 0 .35rem 1rem;border:0;border-left:1px solid var(--hair);border-radius:0;background:none}
}
/* Text blocks: centred reading column. */
.layout:has(.hyf-hud) .prose > :where(p, ul, ol, blockquote, h2, h3, h4, pre, dl, table, hr){
  max-width:var(--hy-read);
  margin-inline:auto;
}
/* Everything else at the top level (widgets, charts, dividers, photos): wide. */
.layout:has(.hyf-hud) .prose > :not(:where(p, ul, ol, blockquote, h2, h3, h4, pre, dl, table, hr, .hyf-hero, .hyf-hud, .hy-note, script, style)){
  clear:both;
  width:var(--hy-wide);
  max-width:none;
  margin-left:calc((100% - var(--hy-wide)) / 2);
  margin-right:calc((100% - var(--hy-wide)) / 2);
}
/* Room to breathe around the big blocks. */
.layout:has(.hyf-hud) .prose > :is(.toy, .hyc, .hyt, .hyb-dept, .hy-photo, figure){
  margin-top:3.2rem;
  margin-bottom:3.2rem;
}
/* Long read: a narrower measure and more air between blocks than a normal post gets,
   so the eye has a stop every few hundred words instead of a wall of text. */
.layout:has(.hyf-hud) .prose > p + p{margin-top:1.6rem}
.layout:has(.hyf-hud) .prose > p{text-wrap:pretty}
.layout:has(.hyf-hud) .prose h2{margin-top:4.5rem}
.layout:has(.hyf-hud) .prose > h3{margin-top:3.4rem}
.layout:has(.hyf-hud) .prose > :where(ul, ol, pre, blockquote) + p{margin-top:1.7rem}
.layout:has(.hyf-hud) .prose > p + :where(ul, ol, pre){margin-top:1.5rem}

/* Jargon helper: dotted underline, plain-language explanation on hover. Used only for
   words the sentence around them does not already explain. */
abbr.hy-g{text-decoration:none;border-bottom:1px dashed color-mix(in oklab, currentColor 60%, transparent);cursor:help}
abbr.hy-g:hover{color:var(--accent2);border-bottom-color:var(--accent2)}
/* Photos look best a bit narrower than the widgets. */
/* Department headers introduce text, so they line up with the text column. */
.layout:has(.hyf-hud) .prose > .hyb-dept{--hy-wide:min(var(--hy-read), 100%)}

/* From 1240px the HUD sits in the bottom-right corner (about 225px wide). Keep wide
   blocks clear of it on both sides so they stay centred and never slide under it. */
/* Two widths only: the text column, and one wide width for every widget, chart and photo. */
@media (min-width: 1240px){
  .layout:has(.hyf-hud) .prose{--hy-wide:min(1120px, calc(100vw - 2 * 96px))}
}
/* From 1800px the HUD panel is open by default: keep clear of it. */
@media (min-width: 1800px){
  .layout:has(.hyf-hud) .prose{--hy-wide:min(1120px, calc(100vw - 2 * 260px))}
}

@media (max-width: 760px){
  .layout:has(.hyf-hud) .prose{--hy-wide:100%}
  .layout:has(.hyf-hud) .prose > :is(.toy, .hyc, .hyt, .hyb-dept, .hy-photo, figure){margin-top:2.2rem;margin-bottom:2.2rem}
}

/* ---------- Speedrun card (top of the post) ---------- */
.prose > .hy-tldr{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, var(--surface)), var(--surface) 55%);
  border:2px solid var(--accent);border-radius:16px;
  box-shadow:6px 6px 0 var(--shadow), 6px 6px 0 2px var(--accent3);
}
.hy-tldr-bar{display:flex;align-items:center;gap:.8rem;padding:.55rem 1rem;border-bottom:1px solid var(--line);
  background:var(--surface2);font:.75rem var(--mono);color:var(--muted);letter-spacing:.06em}
.hy-tldr-dots{display:flex;gap:.3rem}.hy-tldr-dots i{width:.55rem;height:.55rem;border-radius:50%;background:var(--accent3)}
.hy-tldr-dots i:nth-child(2){background:var(--accent)}.hy-tldr-dots i:nth-child(3){background:var(--accent2)}
.hy-tldr-skip{margin-left:auto;color:var(--accent);animation:hy-blink 1.4s steps(1) infinite}
@keyframes hy-blink{50%{color:var(--accent2)}}
.hy-tldr-body{padding:1.6rem clamp(1.1rem, 3vw, 2.6rem) 1.8rem}
.prose .hy-tldr p{margin:0}
.hy-tldr-kicker{font:600 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.hy-tldr-title{font:700 clamp(1.7rem, 3.4vw, 2.6rem)/1.1 var(--disp);margin:.4rem 0 .7rem!important;color:var(--fg)}
.hy-tldr-lead{color:var(--muted);max-width:52rem}
.hy-tldr-list,.prose .hy-tldr-list{list-style:none;margin:1.4rem 0!important;padding:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr));gap:.8rem}
.hy-tldr-list li{display:flex;gap:.8rem;align-items:flex-start;margin:0;padding:.85rem 1rem;background:var(--code);border:1px solid var(--line);border-radius:10px;line-height:1.55;font-size:.98rem}
.prose .hy-tldr-list li+li{margin-top:0}
.hy-tldr-list b{font:600 .78rem var(--mono);color:var(--accent);padding-top:.2rem;flex:none}
.hy-tldr-try{font:600 .82rem var(--mono);color:var(--muted);margin-top:.4rem!important}
.hy-tldr-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem!important}
.prose a.hy-tldr-btn{display:inline-flex;align-items:center;min-height:28px;padding:.5rem .95rem;border:2px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--bg);
  font:600 .9rem var(--mono);text-decoration:none;box-shadow:3px 3px 0 var(--shadow);transition:translate .12s}
.prose a.hy-tldr-btn:nth-child(2){background:transparent;color:var(--accent)}
.prose a.hy-tldr-btn:nth-child(3){background:transparent;color:var(--accent2);border-color:var(--accent2)}
.prose a.hy-tldr-btn:hover{translate:-2px -2px;color:var(--bg);background:var(--accent)}
.hy-tldr-bye{margin-top:1.4rem!important;padding-top:1.1rem;border-top:1px dashed var(--line);font-size:1.05rem}
.hy-tldr-bye span{font:700 1rem var(--mono);color:var(--accent3)}
.hy-tldr-stay{margin-top:.6rem!important;font:.85rem var(--mono)}
#hy-start{display:block;scroll-margin-top:6rem}

/* ---------- Margin notes ---------- */
.prose > .hy-note{
  --note-c:var(--muted);
  position:relative;font:.86rem/1.55 var(--mono);color:var(--fg);
  background:var(--surface);border:1px dashed var(--note-c);border-radius:10px;
  padding:.7rem .85rem;box-shadow:3px 3px 0 var(--shadow);
  max-width:var(--hy-read, 46rem);margin-inline:auto;
}
.hy-note--quiz{--note-c:var(--accent2)}
.hy-note--achievement{--note-c:var(--accent3)}
.hy-note--term{--note-c:var(--accent)}
.prose .hy-note p{margin:0}
.prose .hy-note p + p, .prose .hy-note .hy-note-body > * + *{margin-top:.4rem}
.hy-note-k{font-size:.75rem!important;letter-spacing:.12em;text-transform:uppercase;color:var(--note-c)}
.hy-note-title{font:700 .95rem/1.3 var(--disp);margin-top:.15rem!important}
.hy-note-q{margin-top:.3rem!important}
.hy-note-opts{display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0 .2rem}
.hy-note-opt{min-height:28px;font:600 .8rem var(--mono);padding:.25rem .6rem;border:1px solid var(--line);border-radius:6px;background:var(--code);color:var(--fg);cursor:pointer;transition:.12s}
.hy-note-opt:hover:not(:disabled){border-color:var(--accent2);color:var(--accent2);translate:0 -1px}
.hy-note-opt:disabled{cursor:default;color:var(--muted)}
.hy-note-opt.is-right{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.hy-note-opt.is-wrong{border-color:var(--accent3);color:var(--accent3);text-decoration:line-through}
.hy-note-a{margin-top:.45rem;padding-top:.45rem;border-top:1px dashed var(--line)}
.hy-note-verdict{font-weight:700;color:var(--accent2)}
.hy-note-verdict:empty{display:none}
/* achievement: a pixel trophy that lights up when it scrolls into view */
.prose > .hy-note.hy-note--achievement{padding-left:3rem}
.hy-note--achievement::before{
  content:"";position:absolute;left:.8rem;top:.85rem;width:1.5rem;height:1.5rem;background:var(--accent3);
  clip-path:polygon(0 0,100% 0,100% 30%,80% 30%,80% 55%,62% 70%,62% 82%,80% 82%,80% 100%,20% 100%,20% 82%,38% 82%,38% 70%,20% 55%,20% 30%,0 30%);
  transition:filter .5s, opacity .5s;
}
.hy-note--achievement.is-locked::before{filter:grayscale(1);opacity:.35}
.hy-note--achievement.is-locked .hy-note-title::after{content:" · locked";font:400 .75rem var(--mono);color:var(--muted)}
.hy-note--achievement.is-unlocked{animation:hy-pop .55s ease-out}
@keyframes hy-pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:none}}

/* Widescreen: notes leave the text column and sit in the left or right margin. */
@media (min-width: 1300px){
  .layout:has(.hyf-hud) .prose{--note-w:clamp(11rem, calc((100vw - 42rem) / 2 - 8rem), 17rem)}
  .layout:has(.hyf-hud) .prose > .hy-note{width:var(--note-w);max-width:none;margin-top:.35rem;margin-bottom:1rem}
  .layout:has(.hyf-hud) .prose > .hy-note--left{float:left;margin-left:calc(-1 * (var(--note-w) + 2.6rem));margin-right:0;rotate:-1.2deg}
  .layout:has(.hyf-hud) .prose > .hy-note--right{float:right;margin-right:calc(-1 * (var(--note-w) + 2.6rem));margin-left:0;rotate:1.2deg}
  .layout:has(.hyf-hud) .prose > .hy-note:hover{rotate:0deg}
}

/* ---------- Photos: some left, some right, some centred ---------- */
@media (min-width: 1100px){
  .layout:has(.hyf-hud) .prose > .hy-photo:is(.side-l, .side-r){
    display:grid;grid-template-columns:minmax(0, 1.75fr) minmax(14rem, 1fr);gap:2.2rem;align-items:end;
  }
  .layout:has(.hyf-hud) .prose > .hy-photo.side-r{grid-template-columns:minmax(14rem, 1fr) minmax(0, 1.75fr)}
  /* The site's lightbox wraps each image in a link, so target the wrapper, not the img. */
  .layout:has(.hyf-hud) .prose > .hy-photo.side-r > :not(figcaption){order:2}
  .layout:has(.hyf-hud) .prose > .hy-photo:is(.side-l, .side-r) > :not(figcaption){display:block;width:100%}
  .layout:has(.hyf-hud) .prose > .hy-photo:is(.side-l, .side-r) figcaption{
    margin:0;text-align:left;font:1.15rem/1.5 var(--disp);color:var(--fg);
    padding-left:1rem;border-left:3px solid var(--accent);
  }
  .layout:has(.hyf-hud) .prose > .hy-photo.side-r figcaption{border-left:0;padding-left:0;padding-right:1rem;border-right:3px solid var(--accent2);text-align:right}
  .layout:has(.hyf-hud) .prose > .hy-photo:is(.side-l, .side-r) figcaption small{font:.75rem/1.45 var(--mono);color:var(--muted);margin-top:.8rem}
}

/* ---------- Stickers: marginalia taped into the margins ---------- */
.prose > .hy-sticker{
  position:relative;max-width:20rem;margin:2.4rem auto;padding:.75rem .95rem .85rem;
  background:#f3e28c;color:#231f12;border:1px dashed rgba(0,0,0,.3);
  box-shadow:2px 3px 0 rgba(0,0,0,.16);
  font:.78rem/1.5 var(--mono);rotate:-1.5deg;
}
.prose > .hy-sticker--right{rotate:1.3deg}
.prose > .hy-sticker::before{
  content:"";position:absolute;top:-.55rem;left:50%;width:4.4rem;height:1.05rem;translate:-50% 0;
  background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.08);rotate:-3deg;
}
.hy-sticker-tag{margin:0;font:700 .75rem/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#594100}
.hy-sticker-body{margin-top:.3rem}
.hy-sticker-body p + p{margin-top:.4rem}

/* Widescreen: stickers leave the text column and sit in the left or right margin. */
@media (min-width: 1300px){
  .layout:has(.hyf-hud) .prose{--stk-w:clamp(9rem, calc((100vw - 42rem) / 2 - 9rem), 12.5rem)}
  .layout:has(.hyf-hud) .prose > .hy-sticker{width:var(--stk-w);max-width:none;margin-top:.6rem;margin-bottom:1.4rem}
  .layout:has(.hyf-hud) .prose > .hy-sticker--left{float:left;margin-left:calc(-1 * (var(--stk-w) + 2.6rem));margin-right:0}
  .layout:has(.hyf-hud) .prose > .hy-sticker--right{float:right;margin-right:calc(-1 * (var(--stk-w) + 2.6rem));margin-left:0}
  .layout:has(.hyf-hud) .prose > .hy-sticker:hover{rotate:0deg}
}

/* ---------- Toast ---------- */
/* Bottom centre, so it never covers the contents panel (top right) or the HUD (bottom right). */
.hy-toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:90;margin:0;padding:.55rem .85rem;max-width:min(22rem, calc(100vw - 2rem));
  font:600 .8rem var(--mono);color:var(--fg);background:var(--surface2);border:1px solid var(--accent3);border-radius:8px;box-shadow:3px 3px 0 var(--shadow);
  translate:0 .6rem;opacity:0;transition:translate .3s, opacity .3s;pointer-events:none}
.hy-toast.is-on{translate:0 0;opacity:1}
@media (max-width: 760px){.hy-toast{display:none}}
@media (prefers-reduced-motion: reduce){.hy-tldr-skip{animation:none}.hy-note--achievement.is-unlocked{animation:none}}

/* ---------- Review pass: calmer, aligned, easier to tap ---------- */
/* Very tall or very bright photos should not take over the screen. */
.layout:has(.hyf-hud) .prose > .hy-photo:not(.tall) img{max-height:min(72vh, 640px);object-fit:cover}
/* The code-rain banner is decoration: keep it behind the line, not on top of it. */
.layout .hyf-hero-canvas{opacity:.55}
/* "The end" box lines up with the text column. */
.article:has(.hyf-hud) .defeated{margin-inline:auto;max-width:42rem}
/* The speedrun card: staying is as easy to click as leaving. */
.prose a.hy-tldr-btn.hy-tldr-read{background:var(--accent2);border-color:var(--accent2);color:var(--bg)}
@media (max-width: 760px){
  /* Thumb-sized targets for chips, quiz options and toy buttons. */
  .layout:has(.hyf-hud) .prose :is(.hy-note-opt, .toy-btn, .hyt button, .hyd button, a.hy-tldr-btn, button.hy-tldr-btn, details.hy-fold > summary, details.hy-primer > summary){min-height:44px}
  .hy-tldr-list li{font-size:.95rem}
}

/* Editor's note closing the essay. */
.layout:has(.hyf-hud) .prose > p.hy-ndlr{margin-top:2.8rem;padding-top:1.2rem;border-top:1px solid var(--line,rgba(127,127,127,.28));color:var(--muted,#8a8a8a);font-size:.9rem;line-height:1.7}
.hy-ndlr abbr{font:600 .75rem var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--accent,inherit);cursor:help}

/* ---------- Data section: the key figures are the source links ---------- */
/* Quiet in the text so the sentence still reads, underlined on hover or keyboard focus. */
.prose a.hy-src{text-decoration:none;text-underline-offset:.18em}
.prose a.hy-src:hover,.prose a.hy-src:focus-visible{text-decoration:underline;text-decoration-style:solid}

/* ---------- The four questions ---------- */
.prose ol.hy-questions{
  list-style:none;
  counter-reset:hy-q;
  margin:2.6rem auto 2.2rem;
  padding:0;
}
.prose ol.hy-questions li{
  position:relative;
  counter-increment:hy-q;
  margin:0;
  padding-left:3.2rem;
  font-size:1.08em;
  line-height:1.5;
}
.prose ol.hy-questions li + li{margin-top:1.6rem}
.prose ol.hy-questions li::before{
  content:counter(hy-q,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.12em;
  font:600 .82rem/1.6 var(--mono);
  letter-spacing:.06em;
  color:var(--accent);
}

/* Share button on the one-minute card: same look as the link buttons. */
.prose button.hy-tldr-btn{display:inline-flex;align-items:center;min-height:28px;padding:.5rem .95rem;border:2px solid var(--accent3);border-radius:8px;background:transparent;color:var(--accent3);font:inherit;font-family:var(--mono);font-size:.85rem;cursor:pointer}
.prose button.hy-tldr-btn:hover{background:var(--accent3);color:var(--bg)}
.prose button.hy-tldr-btn:focus-visible{outline:2px solid var(--accent3);outline-offset:3px}

/* Primer: plain-language meaning of the programming words used in this post. */
.prose .hy-primer{
  margin:2.4rem auto;
  padding:1.1rem 1.3rem 1.2rem;
  border:1px solid var(--line);
  border-left:3px solid var(--accent2);
  border-radius:10px;
  background:color-mix(in oklab,var(--surface) 40%,transparent);
}
.prose .hy-primer .hy-primer-head{
  margin:0 0 .35rem;
  font:600 .75rem/1.4 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent2);
}
.prose .hy-primer .hy-primer-lead{margin:0 0 1.1rem}
.prose .hy-primer .hy-primer-sub{margin:1.4rem 0 .3rem;padding-top:.9rem;border-top:1px dashed var(--line);font:600 .8rem/1.4 var(--mono);color:var(--fg)}
.prose .hy-primer .hy-primer-sub:first-of-type{margin-top:.2rem}
.prose .hy-primer .hy-primer-note{margin:0 0 .8rem;font-size:.88em;color:var(--muted)}
.prose .hy-primer dl{margin:0;display:grid;grid-template-columns:11.5rem minmax(0,1fr);gap:.7rem 1.2rem}
.prose .hy-primer dt{margin:0;padding:0;font:600 .86rem/1.6 var(--mono);color:var(--accent)}
.prose .hy-primer dd{margin:0;padding:0;font-size:.96em;line-height:1.6}
/* Optional blocks: closed by default, opened by readers who want more. */
.prose details.hy-fold{margin:1.8rem 0;padding:.85rem 1.2rem;border:1px dashed var(--line);border-radius:10px}
.prose details.hy-fold > summary,
.prose details.hy-primer > summary{cursor:pointer;list-style:none;display:block;min-height:28px;padding:.2rem 0 .2rem 1.3rem;text-indent:-1.3rem}
.prose details.hy-fold > summary::-webkit-details-marker,
.prose details.hy-primer > summary::-webkit-details-marker{display:none}
.prose details.hy-fold > summary::before,
.prose details.hy-primer > summary::before{content:"+";display:inline-block;width:1.3rem;text-indent:0;font:600 .95rem/1 var(--mono);color:var(--accent2)}
.prose details.hy-fold[open] > summary::before,
.prose details.hy-primer[open] > summary::before{content:"\2212"}
.prose details.hy-fold > summary{font:600 .8rem/1.4 var(--mono);color:var(--fg)}
.prose details.hy-fold[open] > summary,
.prose details.hy-primer[open] > summary{margin-bottom:1rem}
.prose details.hy-primer:not([open]) > summary{margin-bottom:0}
.prose .hy-fold-hint{display:inline-block;margin-left:.5rem;text-indent:0;font:400 .76rem/1.4 var(--mono);letter-spacing:0;text-transform:none;color:var(--muted)}
.prose details > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media(max-width:620px){
  .prose .hy-primer dl{grid-template-columns:1fr;gap:.1rem}
  .prose .hy-primer dd{margin-bottom:.7rem}
}

/* widget text floor: 12px minimum, 16px on form fields under 600px */
main :is(.hyx-title,.hyx-badge,.hyx-menubar span,.hyx-side-head span,.hyx-cur-sub,.hyx-a,.hyx-i,.hyx-note,.hyx-reveal,.hyx-counter,
  .hy-note-body code,.hyr-title,.hyr-badge,.hyr-tab-count,.hyr-hint,.hyr-str,.hyr-sec,.hyr-status,.hyr-btn,.hy-patch span,
  .hyt-group-title,.hyt-status,.hyt-file,.hyt-legend,.hyt-time,.hyt-addr,.hyt-call,.hyt-dir,.hyt .is-plus,.hyt .is-minus,
  .hyt-stagefoot span,.hyt-reg-name,.hyt-delta,.hyt-weights-details>summary,.hyt-weights-table :is(th,td),.hyt-w-zero,.hyt-w-neg,
  .hyp-tag,.hyp-run code,.hyg-stat-k,.hyg-stat small,.hyg-form-label,.hyg-hash,.hyg-dept,.hyg-type,.hyg-diff-hash,.hyg-diff-subject,
  .hyg-diff-head code,.hyg-ref,.hyg-diff-meta span,.hyg-diff-line,.hyg-diff-line .sig,.hys-hint,.hys-col-h,.hys-k,.hys-t,.hys-legend,
  .hys-sub,.hys-n){font-size:.75rem!important}
main :is(.hyg-remember,.hym-remember){display:inline-flex;align-items:center;gap:.4rem;min-height:24px}
@media(max-width:600px){
  main :is(.hyg-input,.hy-tldr-sharetext,.hy-tldr-s input){font-size:16px!important}
}