:root { color-scheme: light dark; } body { margin: 0 auto; max-width: 1020px; padding: 24px 16px 48px; font-family: system-ui, sans-serif; line-height: 1.5; } h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; margin-top: 2.5rem; } .up { font-size: 0.85rem; display: block; margin-bottom: 1.5rem; } .lists { margin-top: 2rem; padding-left: 2.2rem; } .lists li { margin-bottom: 0.85rem; } .lists li::marker { font-size: 0.85rem; opacity: 0.55; } .lists .count { font-size: 0.85rem; opacity: 0.6; } .lists .provenance { margin: 0; } .provenance { font-size: 0.85rem; opacity: 0.75; } .shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 32px; margin: 1.5rem 0; } .show { display: flex; align-items: center; gap: 10px; margin: 6px 0; } .show img { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; } .show .name { font-weight: 600; } .instructions { font-size: 0.9rem; margin: 1.5rem 0 0; max-width: 46em; } /* The whole artwork + title area toggles the box, so the hit target is generous without swallowing the two links underneath it. */ .show .pick { width: 18px; height: 18px; margin: 0; flex-shrink: 0; } .show .art { display: flex; } .show .art, .show .name label { cursor: pointer; } /* Rendered twice, above and below the grid, so a long list has the same controls at whichever end you happen to be looking at. */ .picker-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 1.25rem 0; } .opml-button { display: inline-block; margin-top: 12px; padding: 8px 16px; border: 1px solid currentColor; border-radius: 8px; text-decoration: none; color: inherit; background: none; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: 600; cursor: pointer; } .picker-actions .opml-button { margin-top: 0; } .opml-button.secondary { font-weight: 400; opacity: 0.75; } /* Only reachable with scripting on -- the script disables the submit buttons while nothing is ticked. Without it they stay live and an empty submit just bounces back to the list. */ .opml-button[disabled] { opacity: 0.4; cursor: default; } footer { margin-top: 4rem; font-size: 0.85rem; opacity: 0.75; } /* ---- QR ---- Every QR button is hidden until the inline script confirms it has both the encoder and , at which point it adds .qr-ok to . A button that cannot open anything should not be on the page at all. */ .qr { display: none; } .qr-ok .qr { display: inline-flex; align-items: center; } /* The definition itself, never rendered. */ .sprite { display: none; } /* Sized in em so it tracks whatever text it sits beside -- a show's links, or the download buttons, which set a larger font. */ .qr-icon { width: 1.15em; height: 1.15em; } /* Beside a download button the icon is the whole label, so it needs the button's vertical padding but not its horizontal run of empty space. */ .opml-button.qr { padding-left: 10px; padding-right: 10px; } /* A button that reads as one of the links beside it -- used for the per-show and per-page codes, where a bordered button would shout over the show name. */ .linkish { border: 0; padding: 0; margin: 0; background: none; font: inherit; color: LinkText; text-decoration: underline; cursor: pointer; } /* Keeps a download control and its QR button together when the row wraps. */ .combo { display: inline-flex; align-items: center; gap: 6px; } #qrbox { border: 1px solid; border-radius: 12px; padding: 20px; max-width: min(92vw, 360px); color: inherit; background: Canvas; } #qrbox::backdrop { background: rgb(0 0 0 / 0.5); } .qr-title { font-size: 1rem; margin: 0 0 12px; } /* The symbol ships with its own white quiet zone, so it stays scannable in dark mode without the page having to reason about contrast. */ .qr-art svg { display: block; width: 100%; height: auto; border-radius: 4px; } .qr-label { display: block; margin: 16px 0 4px; font-size: 0.8rem; opacity: 0.75; } .qr-link { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid; border-radius: 6px; font: inherit; font-size: 0.8rem; color: inherit; background: none; } .qr-actions { display: flex; gap: 8px; margin-top: 12px; } .qr-actions .opml-button { margin-top: 0; }