/* Shared across every microsite. Structure and typography stay consistent. */
body{--shell-paper:var(--paper,#f6f3ec);--shell-ink:var(--ink,#283d34);--shell-line:var(--line,#d7d7c8)}
body[data-direction=steam]{--shell-paper:#182521;--shell-ink:#e9e3d5;--shell-line:#48534a}
body[data-direction=journal]{--shell-paper:#e6e9de;--shell-ink:#344339;--shell-line:#b8bda9}
body[data-theme=slayer]{--shell-paper:#171415;--shell-ink:#f1e8de;--shell-line:#514444}
body[data-theme=wood]{--shell-paper:#e5d6bd;--shell-ink:#392e21;--shell-line:#bbaa8b}
body[data-theme=moon]{--shell-paper:#172029;--shell-ink:#e9edf0;--shell-line:#48515b}
body[data-theme=eames]{--shell-paper:#eae5d9;--shell-ink:#302b24;--shell-line:#bbb6a8}
body[data-theme=vangogh]{--shell-paper:#e8e5d9;--shell-ink:#263855;--shell-line:#b2b8bd}
.beyond-header,.beyond-footer{color:var(--shell-ink);background:var(--shell-paper);font:13px/1.5 'DM Sans',Arial,sans-serif;letter-spacing:0}
:root{--beyond-coral:#e5532f;--beyond-ink:#121110}
body{--shell-header-height:64px}
/* One slim bar: brand left, three moves right, and the extension on a computer. Colours come from the world's header tokens. */
.beyond-header{background:var(--shell-header-paper,var(--shell-ink));color:var(--shell-header-ink,var(--shell-paper));position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;width:100%;height:var(--shell-header-height);padding:0 clamp(16px,4vw,56px);border-bottom:1px solid var(--shell-line)}
.beyond-header .beyond-brand,.beyond-footer .beyond-brand{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none;white-space:nowrap}
.beyond-brand .beyond-mark{width:24px;height:24px;flex:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.beyond-brand:hover .beyond-mark{transform:rotate(-8deg) scale(1.05)}
.beyond-brand>.beyond-word{font:normal 400 30px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.6px;padding:0 0 3px;margin:0;color:inherit}
.beyond-header button,.beyond-footer button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.beyond-header a,.beyond-footer a{color:inherit}
.beyond-header nav{display:flex;gap:6px;align-items:center;margin-left:auto}
.beyond-header nav button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border-radius:20px;transition:background-color .15s}
.beyond-header nav button:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.beyond-random-icon{display:inline-block;font-size:18px;line-height:1;transition:transform .3s}
.beyond-random:hover .beyond-random-icon{transform:rotate(90deg)}
.beyond-collection b{font:600 10px/20px 'DM Sans',Arial,sans-serif;min-width:20px;padding:0 5px;text-align:center;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:10px}
.beyond-get{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px 0 7px;border-radius:18px;background:var(--beyond-coral);color:#fff!important;font:600 13px/1 'DM Sans',Arial,sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .15s,transform .1s}
.beyond-get:hover{background:#d24724}.beyond-get:active{transform:scale(.97)}
.beyond-get .beyond-get-mark{width:22px;height:22px;flex:none}
.beyond-get .beyond-get-mark circle{fill:#fff}.beyond-get .beyond-get-mark path{stroke:var(--beyond-coral)}
.beyond-footer{display:block;padding:28px clamp(16px,4vw,56px) 22px;border-top:1px solid var(--shell-line);margin:0;width:100%;max-width:none}
.beyond-footer-main{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:26px}
.beyond-footer-main p{font-size:12px;margin:10px 0 0;color:inherit}
.beyond-footer-notes{border-top:1px solid var(--shell-line);padding-top:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 30px;font-size:11px}
.beyond-footer summary{cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:4px;width:fit-content}
.beyond-footer summary::-webkit-details-marker{display:none}
.beyond-footer summary:after{content:' +';text-decoration:none}
.beyond-footer details[open] summary:after{content:' −'}
.beyond-footer details p{font-size:12px;line-height:1.8;max-width:52ch;margin:15px 0 0;color:inherit}
.beyond-footer details a{display:inline-block;margin-top:10px;text-decoration:underline;text-underline-offset:3px;font-size:12px}
.beyond-footer .world-credits{border:0;padding:0;margin:15px 0 0;display:block;color:inherit}
.beyond-footer .world-credits>span{display:none}.beyond-footer .world-credits>div{display:block}.beyond-footer .world-credits small{display:block;margin-top:10px;font-size:10px}
.beyond-sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.beyond-header :focus-visible,.beyond-footer :focus-visible{outline:2px solid currentColor;outline-offset:3px}
.beyond-header .beyond-get:focus-visible{outline-color:var(--shell-header-ink,var(--shell-paper));outline-offset:3px}
/* The extension needs Chrome on a computer, so the bar drops it on small screens. */
@media(max-width:900px){.beyond-get{display:none}.beyond-header nav{margin-right:-8px}}
@media(max-width:560px){body{--shell-header-height:56px}.beyond-header{gap:8px}.beyond-brand>.beyond-word{font-size:27px}.beyond-brand .beyond-mark{width:22px;height:22px}.beyond-header nav{gap:0}.beyond-header nav button{padding:0 9px;font-size:12px}.beyond-random-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.beyond-random-icon{font-size:20px}.beyond-footer-notes{grid-template-columns:1fr 1fr;gap:20px}.beyond-footer-main{align-items:start}.beyond-footer-main p{max-width:200px}}
@media(prefers-reduced-motion:reduce){.beyond-random-icon,.beyond-brand .beyond-mark,.beyond-get{transition:none}}

/* Collection stays beside the world, with its own scroll and keyboard focus. */
body:has(dialog.collection-drawer[open]){overflow:hidden}
dialog.collection-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(620px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-left:1px solid var(--shell-line);border-radius:0;padding:0 30px 35px;overflow:auto;overscroll-behavior:contain;background:var(--shell-paper);color:var(--shell-ink);box-shadow:-18px 0 60px #0002}
dialog.collection-drawer[open]{animation:collection-enter .24s ease-out}
dialog.collection-drawer::backdrop{background:#10191448;backdrop-filter:none}
.collection-drawer .panel-top{position:sticky;top:0;z-index:10;background:var(--shell-paper);padding:22px 0 18px;border-bottom:1px solid var(--shell-line);margin-bottom:24px}
.collection-drawer h2{font-size:38px;line-height:1.1;letter-spacing:-.025em}
.collection-drawer #panel-content>p{font-size:12px;line-height:1.8}
.collection-drawer .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
.collection-drawer .collection-grid h3{font-size:24px}
.collection-drawer .collection-grid img{height:150px;object-fit:cover}
.collection-drawer .kind-filters{gap:7px}.collection-drawer .kind-filters button{font-size:10px;padding:6px 10px}
.collection-back{border:0;padding:0 0 20px;font-size:12px}
@keyframes collection-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(max-width:600px){dialog.collection-drawer{padding-inline:20px;width:100vw}.collection-drawer .collection-grid{gap:24px 14px}.collection-drawer .collection-grid h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){dialog.collection-drawer[open]{animation:none}}

.collection-drawer>.collection-close{position:sticky;top:14px;z-index:12;display:block;margin:14px 0 0 auto;width:38px;height:38px;padding:0;border:1px solid var(--shell-line);border-radius:50%;background:var(--shell-paper);color:var(--shell-ink);font:24px/1 Arial,sans-serif;cursor:pointer}
#collection-dialog.collection-drawer{padding-inline:0}
#collection-dialog.collection-drawer>.collection-close{margin-right:24px}

/* ——— My collection: one drawer on every page, in Beyond's own colours (not the world's) ——— */
body:has(dialog.bc-drawer[open]){overflow:hidden}
.bc-drawer [hidden]{display:none!important}
dialog.bc-drawer{--bc-paper:#f4efe8;--bc-card:#fffaf3;--bc-ink:#16130f;--bc-body:#3b352f;--bc-muted:#625b52;--bc-line:#dad1c4;--bc-coral:#e5532f;--bc-coral-ink:#b23d1b;position:fixed;inset:0 0 0 auto;width:min(560px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0 0 24px;border:0;border-radius:0;overflow:auto;overscroll-behavior:contain;background:var(--bc-paper);color:var(--bc-ink);font:15px/1.5 'DM Sans',Arial,sans-serif;box-shadow:-24px 0 60px rgba(22,19,15,.22)}
dialog.bc-drawer[open]{animation:bc-in .28s cubic-bezier(.2,.8,.2,1)}
dialog.bc-drawer::backdrop{background:rgba(22,19,15,.38)}
@keyframes bc-in{from{transform:translateX(40px);opacity:0}}
.bc-drawer *{box-sizing:border-box}
.bc-drawer button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.bc-drawer a{color:inherit}
.bc-drawer :focus-visible{outline:2px solid var(--bc-coral-ink);outline-offset:2px}
.bc-top{position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 28px 14px;background:var(--bc-paper)}
.bc-top h2{margin:0;font:400 44px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.02em}
.bc-top p{margin:10px 0 0;max-width:34em;font-size:14px;line-height:1.5;color:var(--bc-muted)}
.bc-drawer .bc-close{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--bc-line);border-radius:50%;font:300 24px/1 Arial,sans-serif;transition:background-color .15s}
.bc-drawer .bc-close:hover{background:var(--bc-card)}
.bc-tabs{display:flex;gap:4px;margin:0 28px;padding:4px;border-radius:24px;background:#e9e2d7;width:max-content;max-width:calc(100% - 56px)}
.bc-tabs [role=tab]{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:19px;font-weight:600;font-size:14px;color:var(--bc-muted);transition:background-color .15s,color .15s}
.bc-tabs [role=tab] span{font-weight:500;font-variant-numeric:tabular-nums;opacity:.8}
.bc-tabs [role=tab][aria-selected=true]{background:var(--bc-card);color:var(--bc-ink);box-shadow:0 2px 8px rgba(22,19,15,.12)}
.bc-panel{padding:18px 28px 0}
.bc-tools{margin-bottom:14px}
.bc-search{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:1px solid var(--bc-line);border-radius:22px;background:var(--bc-card)}
.bc-search:focus-within{border-color:var(--bc-ink)}
.bc-search svg,.bc-glyph{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bc-search input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;color:inherit;outline:none}
.bc-chips,.bc-boards{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.bc-chips button,.bc-boards button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:1px solid var(--bc-line);border-radius:17px;font-size:13px;font-weight:500;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.bc-chips button .bc-glyph{width:15px;height:15px}
.bc-chips button span,.bc-boards button span{color:var(--bc-muted);font-variant-numeric:tabular-nums}
.bc-chips button:hover,.bc-boards button:hover{border-color:var(--bc-ink)}
.bc-chips button[aria-pressed=true],.bc-boards button[aria-pressed=true]{background:var(--bc-ink);border-color:var(--bc-ink);color:var(--bc-paper)}
.bc-chips button[aria-pressed=true] span,.bc-boards button[aria-pressed=true] span{color:#cfc5b8}
.bc-boards-label{align-self:center;margin-right:4px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bc-muted)}
.bc-list{margin:0;padding:0;list-style:none}
.bc-item{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--bc-line)}
.bc-item:first-child{border-top:0}
.bc-pic{position:relative;display:grid;place-items:center;width:104px;height:104px;overflow:hidden;border-radius:12px;background:#e6ded1;color:#6b5f50}
.bc-pic[data-kind=moment]{background:#1f2420;color:#e9e3d8}.bc-pic[data-kind=result]{background:#f3d9cf;color:var(--bc-coral-ink)}.bc-pic[data-kind=buy]{background:#e4e0ee;color:#2d2550}.bc-pic[data-kind=cook]{background:#f0d6c0;color:#682813}.bc-pic[data-kind=page]{background:#16130f;color:#f4efe8}
.bc-pic .bc-glyph{width:28px;height:28px;stroke-width:1.4}
.bc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bc-swatches{display:flex;width:100%;height:100%}.bc-swatches i{flex:1}
.bc-body{min-width:0}
.bc-kind{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bc-coral-ink)}
.bc-drawer .bc-title{margin:6px 0 0;font:400 23px/1.08 'Instrument Serif',Georgia,serif;letter-spacing:-.005em;overflow-wrap:anywhere}
.bc-title a{text-decoration:none}.bc-title a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.bc-note{display:-webkit-box;margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--bc-body);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-from{margin:6px 0 0;font-size:13px;color:var(--bc-muted);overflow-wrap:anywhere}
.bc-from a{text-underline-offset:3px}
.bc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:8px}
.bc-actions a,.bc-actions button{display:inline-flex;align-items:center;gap:4px;min-height:32px;font-size:13px;font-weight:600}
.bc-actions a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.bc-actions button{color:var(--bc-muted);font-weight:500}.bc-actions button:hover{color:var(--bc-coral-ink)}
.bc-empty{padding:28px 24px;border-radius:16px;background:#ebe4d9}
.bc-drawer .bc-empty h3{margin:0;font:400 30px/1.05 'Instrument Serif',Georgia,serif}
.bc-empty p{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--bc-body)}
.bc-empty-small{padding:18px 20px}.bc-empty-small p{margin:0}
.bc-undo{position:sticky;bottom:12px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 28px 0;padding:10px 12px 10px 16px;border-radius:14px;background:var(--bc-ink);color:var(--bc-paper);font-size:14px}
.bc-undo span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-drawer .bc-undo button{flex:none;height:32px;padding:0 14px;border-radius:16px;background:var(--bc-paper);color:var(--bc-ink);font-weight:600;font-size:13px}
.bc-foot{margin:22px 28px 0;padding-top:16px;border-top:1px solid var(--bc-line);font-size:12.5px;color:var(--bc-muted)}
.bc-drawer .bc-foot button{text-decoration:underline;text-underline-offset:3px;font-weight:600;color:var(--bc-ink)}
@media(max-width:560px){.bc-top{padding:20px 16px 12px}.bc-top h2{font-size:38px}.bc-tabs{margin:0 16px;max-width:calc(100% - 32px)}.bc-panel{padding:16px 16px 0}.bc-item{grid-template-columns:80px minmax(0,1fr);gap:14px}.bc-pic{width:80px;height:80px;border-radius:10px}.bc-drawer .bc-title{font-size:21px}.bc-undo,.bc-foot{margin-left:16px;margin-right:16px}}
@media(prefers-reduced-motion:reduce){dialog.bc-drawer[open]{animation:none}.bc-drawer *{transition:none!important}}

.beyond-legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:22px;padding-top:16px;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);font-size:13px}.beyond-legal a{color:inherit;opacity:.75;text-underline-offset:3px}.beyond-legal a:hover{opacity:1}
.beyond-legal .beyond-made{margin-left:auto}
.beyond-fine{flex-basis:100%;font-size:11px;opacity:.6}
/* Sign in with Google: the account button and its small panel */
.beyond-account{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border-radius:20px;font:inherit;color:inherit;background:none;border:1px solid color-mix(in srgb,currentColor 25%,transparent);cursor:pointer}
.beyond-account:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.beyond-account-pic{width:24px;height:24px;border-radius:50%;overflow:hidden;display:inline-grid;place-items:center;background:#e5532f;color:#fff;font-size:13px;font-weight:700}
.beyond-account-pic img{width:100%;height:100%;object-fit:cover}
.beyond-account-pop{position:fixed;z-index:1000;width:min(340px,calc(100vw - 16px));background:#fffdf8;color:#1f1b16;border:1px solid rgba(0,0,0,.12);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.18);padding:16px 18px;font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.beyond-account-pop p{margin:0 0 10px}.bap-name{font-weight:700;font-size:16px}.bap-mail{opacity:.7;margin-top:-6px!important}
.bap-note{font-size:12.5px;opacity:.75}.bap-note a{color:inherit}.bap-google{min-height:44px;margin:6px 0 12px}
.bap-row{display:flex;gap:8px;flex-wrap:wrap}.bap-row button{min-height:40px;padding:0 14px;border-radius:20px;border:1px solid rgba(0,0,0,.18);background:#fff;color:inherit;font:inherit;cursor:pointer}
.bap-row .bap-del{border-color:transparent;background:none;text-decoration:underline;opacity:.75}
@media(max-width:560px){.beyond-account{padding:0 8px;border:0}.beyond-account-name{display:none}}
/* Topics, like boards: coloured chips, a badge on each card, and the cards as a picture-first grid */
.bc-chips .bc-topic{background:var(--topic);border-color:transparent;color:#2a241d}
.bc-chips .bc-topic span[aria-hidden]{font-size:15px;line-height:1}
.bc-chips .bc-topic:hover{border-color:#2a241d}
.bc-chips .bc-topic[aria-pressed=true]{background:#2a241d;color:#fff8ee;border-color:#2a241d}
.bc-badge{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin:0 0 8px;padding:3px 9px;border-radius:12px;background:var(--topic);color:#2a241d;font-size:12px;font-weight:600}
.bc-grid{columns:2 240px;column-gap:18px}
.bc-grid .bc-item{display:flex;flex-direction:column;break-inside:avoid;gap:0;padding:0 0 18px;margin:0 0 18px;border-top:0;border-bottom:1px solid var(--bc-line)}
.bc-grid .bc-pic{width:100%;height:auto;aspect-ratio:4/3;border-radius:16px;margin-bottom:12px}
.bc-grid .bc-pic img{width:100%;height:100%;object-fit:cover}
.bc-grid .bc-item:nth-child(3n+2) .bc-pic{aspect-ratio:1/1}.bc-grid .bc-item:nth-child(5n+4) .bc-pic{aspect-ratio:3/4}
.bc-grid .bc-empty{column-span:all;border:0}
@media(max-width:560px){.bc-grid{columns:1}.bc-grid .bc-pic{width:100%;height:auto}}
/* Beyond on a phone → on a computer: the bar, its sheet, and the computer's reminder card */
.beyond-remind{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:900;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:16px;background:#1f1b16;color:#fff8ee;box-shadow:0 12px 30px rgba(0,0,0,.25);font:14px/1.35 system-ui,-apple-system,sans-serif}
.beyond-remind{transition:transform .28s ease,opacity .28s ease}.beyond-remind.away{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
.beyond-remind p{margin:0;flex:1}.beyond-remind .br-go{flex:none;min-height:40px;padding:0 14px;border-radius:20px;border:0;background:#e5532f;color:#fff;font:inherit;font-weight:600}
.beyond-remind .br-x{flex:none;width:32px;height:32px;border:0;background:none;color:#fff8ee;font-size:20px;opacity:.7}
body.has-remind{padding-bottom:84px}
.beyond-remind-sheet{position:fixed;left:0;right:0;bottom:0;z-index:950;padding:20px 18px calc(18px + env(safe-area-inset-bottom));background:#fffdf8;color:#1f1b16;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.25);font:15px/1.45 system-ui,-apple-system,sans-serif}
.beyond-remind-sheet h3{margin:0 0 6px;font:700 20px/1.25 system-ui,-apple-system,sans-serif;letter-spacing:0;text-transform:none}.beyond-remind-sheet p{margin:0 0 12px}
.beyond-remind-sheet button{display:block;width:100%;min-height:46px;margin:0 0 8px;border-radius:23px;border:1px solid rgba(0,0,0,.15);background:#fff;color:inherit;font:inherit;font-weight:600}
.beyond-remind-sheet .brs-send{background:#e5532f;color:#fff;border-color:#e5532f}.beyond-remind-sheet .brs-close{border:0;background:none;font-weight:400;opacity:.7}
.brs-note{min-height:1.4em;font-size:13.5px;opacity:.8}
.beyond-remind-card{position:fixed;right:18px;bottom:18px;z-index:900;width:min(360px,calc(100vw - 36px));padding:16px 18px;border-radius:16px;background:#fffdf8;color:#1f1b16;border:1px solid rgba(0,0,0,.12);box-shadow:0 18px 40px rgba(0,0,0,.18);font:14.5px/1.45 system-ui,-apple-system,sans-serif}
.brc-k{margin:0 0 6px;font-weight:700}.beyond-remind-card ol{margin:0 0 10px;padding-left:20px}.beyond-remind-card p{margin:0 0 10px}
.brc-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.brc-row a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:20px;background:#e5532f;color:#fff;text-decoration:none;font-weight:600}
.brc-row button{min-height:40px;padding:0 14px;border-radius:20px;border:1px solid rgba(0,0,0,.18);background:#fff;font:inherit;cursor:pointer}

/* Back to the video on YouTube, beside the brand */
.beyond-back{display:inline-flex;align-items:center;gap:5px;margin-left:14px;padding:5px 11px;border-radius:16px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);font-size:13px;font-weight:600;color:inherit;text-decoration:none;white-space:nowrap;opacity:.85}
.beyond-back:hover{opacity:1;background:color-mix(in srgb,currentColor 10%,transparent)}
@media(max-width:560px){.beyond-back{margin-left:8px;padding:4px 9px;font-size:12px}}

/* Phones: the header fits one line (it ran off the screen and pushed the whole page sideways). The back link shrinks to
   an arrow and YouTube's play mark, "My" drops from the collection, and nothing may widen the page. */
.beyond-back-yt{display:none;width:18px;height:13px;border-radius:4px;background:#f00;position:relative}
.beyond-back-yt::after{content:'';position:absolute;left:7px;top:3.5px;border-left:6px solid #fff;border-top:3px solid transparent;border-bottom:3px solid transparent}
@media(max-width:560px){html,body{overflow-x:clip}.beyond-header{gap:6px;padding:0 12px;overflow:hidden}.beyond-brand>.beyond-word{font-size:23px}
 .beyond-back{margin-left:4px;padding:4px 8px;gap:4px}.beyond-back-label{display:none}.beyond-back-yt{display:inline-block}
 .beyond-header nav{min-width:0;margin-right:-4px}.beyond-header nav button{padding:0 7px}.beyond-collection-my{display:none}
 .beyond-collection b{margin-left:2px}}
@media(max-width:380px){.beyond-collection-label{display:none}.beyond-collection::before{content:'♡';font-size:17px;margin-right:3px}}
/* On a narrow phone the reminder bar stacks: the line (with the close button beside it), then the button full width. */
@media(max-width:560px){.beyond-remind{flex-wrap:wrap;gap:8px 10px}.beyond-remind p{flex:1 1 calc(100% - 52px);order:0}.beyond-remind .br-x{order:1}.beyond-remind .br-go{order:2;flex:1 1 100%}body.has-remind{padding-bottom:124px}}