/* StattoBotto server dashboard. Colours and fonts come from the server config as --official-* variables. */
*{box-sizing:border-box}
body.official-body{margin:0;background:var(--official-background);color:var(--official-text);font:15px/1.5 var(--official-font-body)}
a{color:var(--official-accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
.official-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.official-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
/* Page: one column as wide as the server's site.layout.width, under a dark header (render.py _shell). */
.official-page{max-width:var(--official-width);margin:0 auto;padding:0 0 24px}
/* The header, tabs and section links are one sticky bar. It sits above the page, below the profile popup (a <dialog>,
   which is in the top layer). --official-sticky-h is measured by the page script; 190px is the no-script fallback. */
html{scroll-padding-top:var(--official-sticky-h,190px)}
.official-sticky{position:sticky;top:0;z-index:50;background:var(--official-sidebar)}
.official-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:1fr auto;gap:0 16px;
background:var(--official-sidebar);color:var(--official-sidebar-text);border-radius:0 0 0 0;padding:12px 18px 0}
.official-top p{margin:0}
.official-top-left{grid-row:1/3;grid-column:1;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:14px;font-size:11px;min-width:0}
.official-top-brand,.official-top-updated{color:var(--official-sidebar-text);opacity:.92}
.official-top-brand a,.official-top-brand a:visited,.official-top-brand a:hover{color:inherit}
.official-top-center{grid-row:1;grid-column:2;display:flex;flex-direction:column;align-items:center;min-width:0}
.official-header-art{display:flex;justify-content:center}
.official-header-art picture,.official-top-brandmark picture{display:contents}
.official-header-art img{display:block;max-width:min(480px,100%);max-height:128px;width:auto;height:auto}
.official-header-art-wide img{max-width:min(720px,100%);max-height:240px}
/* Solid header art: shown larger, over a blurred copy of itself across the whole header. A cut-out wordmark has neither. */
.official-header-art-tall img{max-height:160px}
.official-top.official-top-blurred{position:relative;isolation:isolate}
.official-top-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit}
.official-top-backdrop div{position:absolute;inset:-40px;background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(24px) brightness(.42)}
.official-top-blurred .official-tab{--official-sidebar-text:#fff}   /* tab shapes (templates.py) colour the tabs with this */
.official-top-blurred .official-tab:not([aria-current="page"]){color:#fff;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.5)}
.official-top-blurred .official-tab:not([aria-current="page"]):hover{background:rgba(0,0,0,.65)}
body[data-template="gallery"] .official-top-blurred .official-tab[aria-current="page"],body[data-template="broadsheet"] .official-top-blurred .official-tab[aria-current="page"]{color:#fff;border-bottom-color:#fff}
.official-top-blurred .official-top-brand,.official-top-blurred .official-top-updated,.official-top-blurred .official-period-range{color:#fff;opacity:1;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.official-top-title{font:700 34px/1.2 var(--official-font-heading);color:var(--official-lime);text-align:center}
.official-top-sub{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--official-sidebar-text);text-align:center}
.official-top-right{grid-row:1/3;grid-column:3;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;padding-bottom:10px;min-width:0}
.official-tabs{grid-row:2;grid-column:2;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px 0 0}
.official-tab{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:3px 16px;border:1px solid color-mix(in srgb,var(--official-sidebar-text) 55%,transparent);border-bottom:0;border-radius:4px 4px 0 0;
color:var(--official-sidebar-text);font-size:13px;font-weight:700;white-space:nowrap}
.official-tab:hover{background:color-mix(in srgb,var(--official-sidebar-text) 12%,transparent);text-decoration:none}
/* The tab of the page shown is filled, on every page (render.py marks it with aria-current). */
.official-tab[aria-current="page"]{background:var(--official-teal);border-color:var(--official-teal);color:var(--official-on-teal)}
.official-period-box{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:100%}
.official-period-control{display:inline-flex;white-space:nowrap;align-items:center;gap:6px;min-height:34px;padding:0 10px;border-radius:999px;background:var(--official-panel);color:var(--official-text);font-size:13px;font-weight:700;cursor:pointer;max-width:100%}
.official-period-icon{color:var(--official-lime-ink);flex:none}
.official-period-label{display:none}
.official-period-select{-webkit-appearance:none;appearance:none;border:0;color:var(--official-accent-ink);font:inherit;font-weight:700;padding:4px 20px 4px 2px;cursor:pointer;flex:none;
background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23777' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") right 2px center/12px no-repeat}
.official-period-select:focus-visible{outline:2px solid var(--official-accent);outline-offset:2px}
.official-period-range{font-size:11px;color:var(--official-sidebar-muted);text-align:right}
.official-period-links{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px}
.official-period-links a{color:var(--official-sidebar-text)}
.official-support{margin-top:auto;display:inline-flex;align-items:center;gap:4px;padding:9px 12px;border-radius:7px;background:var(--official-support-colour,var(--official-lime));color:var(--official-support-text,var(--official-on-lime));font:700 11px/1.1 Arial,sans-serif;box-shadow:0 3px 0 var(--official-support-shadow,color-mix(in srgb,var(--official-lime) 60%,#000))}
.official-support:hover{text-decoration:none;filter:brightness(1.05)}
/* The row of links under the header: the page's sections (or the Personal stats ranks). */
.official-section-links{display:flex;flex-wrap:wrap;justify-content:center;padding:6px 12px;background:var(--official-panel);border-bottom:2px solid var(--official-lime)}
.official-section-links a{padding:3px 14px;border-left:1px solid var(--official-line);font-size:13px;font-weight:700;color:var(--official-accent-ink)}
.official-section-links a:first-child{border-left:0}
.official-main{display:flex;flex-direction:column;gap:28px;padding:18px 0 32px}
.official-page-body{display:flex;flex-direction:column;gap:28px}
.official-banner{border:1px dashed var(--official-accent);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--official-accent-ink)}
.official-footer{margin:8px 0 22px;text-align:center;font-size:12px;letter-spacing:.02em;color:var(--official-text)}
.official-footer a{color:inherit}
.official-brand-mark{display:inline-block;vertical-align:-3px;margin-right:6px;flex:none}
.official-footer-brand{font-weight:700;white-space:nowrap}
.official-footer-brand .official-brand-mark{width:16px;height:13px;vertical-align:-2px;margin-right:4px}
.official-footer-cta{margin-left:2px;padding:2px 9px;border:1px solid currentColor;border-radius:999px;font-weight:700}
/* Phones: the "Get stats" pill sits on its own line under "Stats by StattoBotto.com" and never wraps inside itself. */
@media (max-width:480px){.official-footer-cta{display:block;width:max-content;max-width:100%;margin:8px auto 0;white-space:nowrap}.official-footer-sep{display:none}}
/* Framed pages (site.layout.frame): the content sits in one panel with a deep shadow, as on the old Alice pages. */
.official-framed .official-main{margin-top:10px;padding:18px 12px 32px;border-radius:0 0 14px 14px;background:var(--official-background);box-shadow:0 16px 45px rgba(0,0,0,.3)}
/* Sections: the heading and its note centred above the panel. */
.official-section{display:flex;flex-direction:column;gap:12px;min-width:0;scroll-margin-top:12px}
.official-section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 12px;text-align:center}   /* title and note on one line, wrapping only when narrow */
.official-h1{margin:0;font:700 34px/1.2 var(--official-font-heading)}
/* Headings use the lime colour itself, as the old pages did (large bold text). */
.official-h2{margin:0;font:700 22px/1.3 var(--official-font-heading);color:var(--official-lime)}
.official-headings-text .official-h2{color:var(--official-text)}
.official-section-head .official-sub{max-width:760px;margin:0}
.official-period-pill{display:inline-block;margin-left:6px;padding:1px 9px;border:1px solid var(--official-lime);border-radius:999px;font:700 11px/18px var(--official-font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--official-lime-ink);vertical-align:4px}
.official-h3{margin:0;font-size:14px;font-weight:700;color:var(--official-text)}
.official-sub{margin:4px 0 0;font-size:13px;color:var(--official-muted)}
.official-label{font-size:13px;color:var(--official-muted)}
.official-strong{font-size:13px;font-weight:700;color:var(--official-text)}
.official-text{color:var(--official-text)}
.official-muted{color:var(--official-muted)}
.official-soft{color:var(--official-muted)}
.official-lime{color:var(--official-lime-ink)}
.official-right{text-align:right}
.official-center{text-align:center}
.official-panel{background:var(--official-panel);border:1px solid var(--official-line);border-radius:14px;padding:22px;min-width:0;box-shadow:0 1px 3px color-mix(in srgb,var(--official-text) 8%,transparent)}
.official-stack{display:flex;flex-direction:column;gap:14px}
.official-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.official-empty{margin:0;text-align:center;color:var(--official-muted)}
/* Number tiles: Active chatters, Messages posted, Days tracked. */
.official-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.official-tile{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:100px;padding:18px 20px;border-radius:12px;border-top:3px solid var(--official-lime)}
.official-tile-value{font:700 28px/1.2 var(--official-font-heading)}
.official-tile-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.official-tiles-dark .official-tile{background:var(--official-sidebar);align-items:center;text-align:center;box-shadow:0 2px 4px color-mix(in srgb,#000 25%,transparent)}
.official-tiles-dark .official-tile-value{color:var(--official-lime)}
.official-tiles-dark .official-tile-label{color:var(--official-sidebar-text)}
.official-tiles-light .official-tile{background:var(--official-panel);border:1px solid var(--official-line);border-top:3px solid var(--official-lime)}
.official-tiles-light .official-tile-value{color:var(--official-text);font-size:32px}
.official-tiles-light .official-tile-label{color:var(--official-muted)}
/* Hourly Stats: share of messages by hour, with a percent scale. */
.official-chart-meta{font-size:13px}
.official-peak{font-size:13px;font-weight:700;color:var(--official-lime-ink)}
.official-hourly{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:230px auto;gap:8px 8px}
.official-hourly-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:12px;color:var(--official-muted);margin:-8px 0}
.official-hourly-plot{position:relative;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));grid-template-rows:100%;gap:6px;align-items:end;padding:0 4px}
.official-gridline{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--official-line)}
.official-hour{position:relative;grid-row:1;background:var(--official-accent);border-radius:3px 3px 0 0;min-height:1px}
.official-hour-peak{background:var(--official-lime)}
.official-hourly-x{grid-column:2;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:6px;padding:0 4px;font-size:12px;color:var(--official-muted)}
.official-hourly-x span{white-space:nowrap;justify-self:center}
/* Tables: User Stats and Chat Partners. */
.official-panel.official-table-panel{padding:0;overflow:hidden}
.official-table{width:100%;border-collapse:collapse;font-size:14px}
.official-table th{padding:14px 12px;background:color-mix(in srgb,var(--official-line) 55%,var(--official-panel));border-bottom:2px solid var(--official-lime);font-weight:700;font-size:13px;color:var(--official-text);text-align:left}
.official-table th.official-right{text-align:right}
.official-table th.official-center{text-align:center}
.official-table td{padding:12px;border-top:1px solid var(--official-line);vertical-align:middle}
.official-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--official-line) 32%,var(--official-panel))}
.official-table-note{padding:10px 16px 14px;margin:0;text-align:center}
.official-rank-cell{width:56px}
.official-rank-badge{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 6px;border:1px solid var(--official-line);border-radius:6px;background:var(--official-background);font-size:12px;font-weight:700;color:var(--official-text)}
.official-rank-gold{background:color-mix(in srgb,var(--official-lime) 22%,var(--official-panel));border-color:var(--official-lime)}
.official-rank-silver{background:color-mix(in srgb,#9aa7b4 22%,var(--official-panel));border-color:#9aa7b4}
.official-rank-bronze{background:color-mix(in srgb,var(--official-accent) 14%,var(--official-panel));border-color:color-mix(in srgb,var(--official-accent) 45%,var(--official-panel))}
.official-name-cell{font-weight:700;min-width:0}
.official-name-cell .official-member-link,.official-pair-names .official-member-link{color:var(--official-accent-ink);border-bottom:0}
.official-who{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.official-count{display:flex;align-items:center;gap:10px}
.official-count .official-track{flex:1;min-width:80px}
.official-count strong{font-size:13px;min-width:52px;text-align:right}
.official-users .official-count-cell{width:26%}
.official-quote-time{text-align:center;font-size:12px;font-weight:700;color:var(--official-text)}
.official-quote-cell{text-align:center}
.official-quote{display:block;font:italic 13px/1.4 Georgia,'Times New Roman',serif;color:var(--official-text);overflow-wrap:anywhere}
.official-pairs-table .official-bar-cell{width:28%}
.official-pair-names{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;overflow-wrap:anywhere}
.official-avatar{width:30px;height:30px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--official-background)}
.official-avatar-accent{background:var(--official-accent);color:var(--official-on-accent)}
.official-avatar-lime{background:var(--official-lime);color:var(--official-on-lime)}
.official-avatar-teal{background:var(--official-teal);color:var(--official-on-teal)}
.official-track{height:9px;border-radius:5px;background:color-mix(in srgb,var(--official-line) 75%,var(--official-panel))}
.official-track-thin{height:7px}
.official-avatar-image{display:block;object-fit:cover;background:var(--official-line)}
.official-card-head .official-avatar{width:40px;height:40px;font-size:15px}
.official-fill{height:100%;border-radius:inherit}
.official-fill-accent{background:var(--official-accent)}
.official-fill-teal{background:var(--official-teal)}
.official-fill-lime{background:var(--official-lime)}
/* Ranked lists (Active Day Counts, message lengths, custom statistics, ...): a rank badge, the name, the count, a bar. */
.official-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
.official-duo-flat{gap:24px}
.official-meter{display:flex;flex-direction:column;gap:6px;font-size:14px;padding:8px 10px;margin:0 -10px;border-radius:8px}
.official-meter:nth-child(even of .official-meter){background:color-mix(in srgb,var(--official-line) 30%,var(--official-panel))}
.official-meter .official-row{flex-wrap:nowrap;align-items:flex-start}
.official-meter .official-row>.official-num{font-size:13px;text-align:right;white-space:normal}
.official-rank{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:28px;height:26px;padding:0 5px;margin-right:2px;border:1px solid var(--official-line);border-radius:6px;background:var(--official-background);font-size:12px;font-weight:700;color:var(--official-text)}
.official-meter .official-member-link{color:var(--official-accent-ink);border-bottom:0;font-weight:700}
.official-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--official-line);font-size:14px;overflow-wrap:anywhere}
.official-line>.official-who{min-width:0}
.official-pair{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--official-background);font-size:14px}
.official-pair-n{flex:none;text-align:right;font-size:13px;white-space:nowrap}
.official-emoji-missing{width:32px;height:32px;border-radius:8px;border:1px dashed var(--official-muted)}
.official-emoji-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.official-emoji{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:10px;background:var(--official-background);font-size:12px}
/* Big Numbers (sections/highlights.py). */
.official-moments{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.official-moment{display:flex;flex-direction:column;gap:8px;padding:18px;border-top:3px solid var(--official-lime)}
.official-kicker{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.official-moment-0 .official-kicker{color:var(--official-teal-ink)}
.official-moment-1 .official-kicker{color:var(--official-lime-ink)}
.official-moment-2 .official-kicker{color:var(--official-accent-ink)}
.official-moment-name{font:700 17px var(--official-font-heading);overflow-wrap:anywhere}
.official-moment-name .official-member-link{border-bottom-color:var(--official-line)}
.official-moment-shared{margin-left:6px;padding:1px 7px;border-radius:999px;border:1px solid currentColor;font-size:10px;letter-spacing:.04em}
.official-moment-example{font-size:13px}
.official-moment-runner{padding-top:8px;border-top:1px solid var(--official-line);overflow-wrap:anywhere}
.official-moment-people{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;overflow-wrap:anywhere}
.official-chips{display:flex;flex-wrap:wrap;gap:8px}
.official-chip{padding:6px 12px;border-radius:999px;border:1px solid var(--official-line);font-size:13px}
.official-member-link{color:inherit;text-decoration:none;border-bottom:1px dotted var(--official-muted)}
.official-member-link:hover,.official-member-link:focus-visible{color:var(--official-accent-ink);border-bottom-color:var(--official-accent);text-decoration:none}
/* Word stats, short messages, custom statistics (sections/). */
.official-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.official-word{overflow-wrap:anywhere}
.official-word-cell{gap:0;min-width:0;white-space:normal;font-weight:500}
/* Personal stats (sections/members.py): search, then one card per member. */
.official-members-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 18px}
.official-members-head .official-sub{margin:0}
.official-search{flex:1 1 360px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 12px}
.official-search>.official-label{font-size:15px;font-weight:700;color:var(--official-accent-ink)}
.official-search-field{position:relative;flex:1 1 220px;max-width:420px;min-width:0;display:block}
.official-input{box-sizing:border-box;width:100%;padding:9px 38px 9px 12px;border:1px solid var(--official-line);border-radius:10px;background:var(--official-panel);color:var(--official-text);font:inherit;font-size:16px}
.official-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.official-input:focus{outline:2px solid var(--official-accent);outline-offset:1px}
.official-search-clear{position:absolute;top:50%;right:6px;width:30px;height:30px;margin:-15px 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--official-muted);font-family:inherit;font-size:22px;line-height:1;cursor:pointer}
.official-search-clear[hidden]{display:none}
.official-search-clear:hover{color:var(--official-text);background:var(--official-line)}
.official-search-clear:focus-visible{outline:2px solid var(--official-accent);outline-offset:1px}
.official-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.official-card{display:flex;flex-direction:column;gap:12px;scroll-margin-top:24px}
.official-card[hidden],.official-card-extra:not(:target){display:none}
.official-card:target{outline:2px solid var(--official-accent);outline-offset:2px}
.official-card-name{margin:0;font-size:18px;font-weight:700;color:var(--official-lime-ink);overflow-wrap:anywhere}
.official-aka{margin:2px 0 0;overflow-wrap:anywhere}
.official-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0;font-size:13px}
.official-facts dt{color:var(--official-muted);font-size:12px}
.official-facts dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media (max-width:480px){.official-cards{grid-template-columns:1fr}}
.official-cards-full{grid-template-columns:minmax(0,1fr)}
.official-card-head{display:flex;align-items:center;gap:12px;margin:-22px -22px 0;padding:12px 22px;border-bottom:1px solid var(--official-line);border-radius:14px 14px 0 0;background:color-mix(in srgb,var(--official-line) 35%,var(--official-panel))}
.official-card-head .official-who{white-space:normal;min-width:0}
.official-card-rank{flex:none;min-width:36px;padding:6px 8px;border-radius:8px;background:var(--official-accent);color:var(--official-on-accent);font-weight:700;font-size:13px;text-align:center}
.official-cards-full .official-facts{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.official-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0}
.official-metric{border:1px solid var(--official-line);border-radius:6px;padding:8px 10px;min-width:0;background:color-mix(in srgb,var(--official-line) 18%,var(--official-panel))}
.official-metric dt{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--official-muted)}
.official-metric dd{margin:2px 0 0;font:700 15px/1.3 var(--official-font-heading);color:var(--official-accent-ink)}
.official-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.official-chart{margin:0;border:1px solid var(--official-line);border-radius:6px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.official-plot{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;align-items:end;height:80px;border-bottom:1px solid var(--official-line)}
.official-col{height:100%;display:flex;flex-direction:column-reverse}
.official-seg{display:block;width:100%;flex:none}
.official-col .official-seg:last-child{border-radius:3px 3px 0 0}
.official-part-0{background:var(--official-sidebar)}
.official-part-1{background:var(--official-lime)}
.official-part-2{background:var(--official-accent)}
.official-part-3{background:var(--official-teal)}
.official-ticks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);font-size:11px;color:var(--official-muted);font-variant-numeric:tabular-nums}
.official-ticks-7{text-align:center}
.official-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;margin:0}
.official-key{display:inline-flex;align-items:center;gap:6px;color:var(--official-text)}
.official-swatch{width:10px;height:10px;border-radius:3px;display:inline-block}
.official-card-lower{display:flex;flex-direction:column;gap:16px}
.official-card-part p{margin:0}
.official-card-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0}
.official-card-bar>*{min-width:0}
.official-card-bar>.official-h3{white-space:nowrap}
.official-card-partners{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;flex:1 1 auto}
.official-card-partners .official-chips{flex:1 1 0;min-width:0;gap:6px}
.official-card-bar>*+*{margin-left:14px;padding-left:14px;border-left:1px solid var(--official-line)}
.official-card-bar .official-card-channel{margin-left:auto;font-size:13px;color:var(--official-muted);white-space:nowrap}
.official-card-bar .official-card-channel strong{color:var(--official-text);font-weight:600}
@media (max-width:640px){.official-card-bar>*,.official-card-partners .official-chips{flex:1 0 100%}.official-card-bar>*+*{margin-left:0;padding-left:0;border-left:0}.official-card-partners{order:1}.official-card-bar .official-card-channel{order:2;white-space:normal;overflow-wrap:anywhere}.official-card-bar>.official-h3{order:3;padding-top:8px;border-top:1px solid var(--official-line)}}
.official-card-part .official-h3{color:var(--official-lime-ink)}
.official-recent{border-collapse:collapse;font-size:13px}
.official-recent-full{width:100%}
.official-recent td{padding:6px 20px 6px 8px;border-top:1px solid var(--official-line);vertical-align:top;white-space:nowrap}
.official-recent tr:nth-child(even){background:color-mix(in srgb,var(--official-line) 30%,var(--official-panel))}
.official-recent td.official-recent-text{white-space:normal;overflow-wrap:anywhere;width:100%}
@media (max-width:1180px){.official-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.official-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.official-panel.official-card{padding:16px}.official-card-head{margin:-16px -16px 0;padding:10px 16px}}
/* On phones each latest message sits under its time and channel. */
@media (max-width:640px){.official-recent-full,.official-recent-full tbody{display:block}.official-recent-full tr{display:grid;grid-template-columns:auto minmax(0,1fr);border-top:1px solid var(--official-line)}.official-recent-full td{border-top:0}.official-recent-full td.official-recent-text{grid-column:1/-1;padding-top:0;width:auto}}
/* Per-server header: logo (sections/header.py). */
.official-mark{width:36px;height:36px;border-radius:10px;background:var(--official-accent);color:var(--official-on-accent);display:flex;align-items:center;justify-content:center;font:700 17px var(--official-font-heading)}
.official-mark-image{object-fit:contain;background:none;padding:0}
.official-mark-placeholder{width:auto;height:32px;max-width:100%;border-radius:0;background:none;display:block;object-fit:contain}
/* Time of Day Stats (sections/time_of_day.py). columns: four columns with a shaded head (old Alice page);
   cards: a 2x2 grid of white cards with an icon (old MLB page). */
.official-tod{display:grid;gap:14px}
.official-tod-columns{grid-template-columns:repeat(4,minmax(0,1fr))}
.official-tod-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1180px){.official-tod-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.official-tod-columns,.official-tod-cards{grid-template-columns:minmax(0,1fr)}}
.official-tod-slice{min-width:0;background:var(--official-panel);border:1px solid var(--official-line);overflow:hidden}
.official-tod p{margin:0}
.official-tod-title{margin:0}
.official-tod-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.official-tod-row{display:grid;align-items:center;min-width:0}
.official-tod-main{min-width:0}
.official-tod-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.official-tod-name{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}
.official-tod-name .official-member-link{color:inherit;border-bottom:0;overflow:hidden;text-overflow:ellipsis}
.official-tod-count{flex:none;font-weight:700}
.official-tod-track{border-radius:999px;overflow:hidden}
.official-tod-fill{height:100%;border-radius:999px}
.official-tod-columns .official-tod-slice{border-radius:16px;box-shadow:0 3px 10px color-mix(in srgb,var(--official-text) 6%,transparent)}
.official-tod-columns .official-tod-head{padding:12px 12px 10px;text-align:center;background:color-mix(in srgb,var(--official-line) 55%,var(--official-panel))}
.official-tod-columns .official-tod-title{font:700 18px/1.2 var(--official-font-heading);color:var(--official-accent-ink)}
.official-tod-columns .official-tod-hours{margin-top:4px;font-size:12px;font-weight:700;color:var(--official-lime-ink)}
.official-tod-columns .official-tod-total{margin-top:5px;font-size:11px;font-weight:600;color:var(--official-accent-ink)}
.official-tod-columns .official-tod-list{padding:6px 0}
.official-tod-columns .official-tod-row{grid-template-columns:36px minmax(0,1fr);gap:10px;padding:9px 12px;border-bottom:1px solid color-mix(in srgb,var(--official-line) 60%,var(--official-panel))}
.official-tod-columns .official-tod-row:last-child{border-bottom:0}
.official-tod-columns .official-tod-rank{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--official-line);border-radius:8px;background:color-mix(in srgb,var(--official-line) 30%,var(--official-panel));font-size:13px;font-weight:700;color:var(--official-muted)}
.official-tod-columns .official-tod-row:first-child .official-tod-rank{border-color:color-mix(in srgb,var(--official-lime) 70%,var(--official-panel));background:color-mix(in srgb,var(--official-lime) 25%,var(--official-panel));color:color-mix(in srgb,var(--official-lime) 50%,var(--official-text))}
.official-tod-columns .official-tod-name{font-size:14px;color:var(--official-accent-ink)}
.official-tod-columns .official-tod-count{font-size:13px;color:var(--official-muted)}
.official-tod-columns .official-tod-track{height:8px;margin-top:6px;background:color-mix(in srgb,var(--official-line) 75%,var(--official-panel))}
.official-tod-columns .official-tod-fill{background:var(--official-teal)}
.official-tod-cards .official-tod-slice{padding:15px;border-radius:12px;box-shadow:0 3px 12px color-mix(in srgb,var(--official-sidebar) 5%,transparent)}
.official-tod-cards .official-tod-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--official-line) 70%,var(--official-panel))}
.official-tod-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--official-teal) 13%,var(--official-panel));font-size:20px}
.official-tod-cards .official-tod-title{font-size:15px;line-height:1.3;color:var(--official-sidebar)}
.official-tod-cards .official-tod-hours{margin-top:2px;font-size:11px;color:var(--official-muted)}
.official-tod-cards .official-tod-list{gap:9px}
.official-tod-cards .official-tod-row{grid-template-columns:23px minmax(0,1fr);gap:8px;align-items:start}
.official-tod-cards .official-tod-rank{padding-top:2px;text-align:center;font-size:11px;font-weight:700;color:color-mix(in srgb,var(--official-lime) 55%,#000)}
.official-tod-cards .official-tod-name{font-size:12px;color:var(--official-sidebar)}
.official-tod-cards .official-tod-count{font-size:12px;color:var(--official-text)}
.official-tod-cards .official-tod-track{height:6px;margin-top:4px;background:color-mix(in srgb,var(--official-line) 70%,var(--official-panel))}
.official-tod-cards .official-tod-fill{background:var(--official-accent)}
.official-tod-cards .official-tod-row:first-child .official-tod-fill{background:var(--official-lime)}
/* The cards look keeps the old MLB heading: left-aligned, header colour. */
.official-section:has(.official-tod-cards) .official-section-head{text-align:left;justify-content:flex-start}
.official-section:has(.official-tod-cards) .official-h2{font-size:21px;color:var(--official-sidebar)}
/* Term catalogues, Community Link Showcase, role icons, booster pill and the Server Boosters page (sections/). */
.official-term-art{width:32px;height:32px;flex:none;border-radius:6px;object-fit:cover;background:var(--official-line)}
.official-term-logo{object-fit:contain;padding:2px;background:#f4f2ec}
.official-term-letter{display:flex;align-items:center;justify-content:center;background:var(--official-accent);color:var(--official-on-accent);font:700 15px/1 Arial,sans-serif}
.official-term-name{display:flex;flex-direction:column;min-width:0;white-space:normal;line-height:1.25}
.official-term-note{font-size:12px;font-weight:400}
.official-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.official-showcase-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:12px}
.official-showcase-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--official-line);border-radius:13px;background:var(--official-panel);box-shadow:0 2px 8px color-mix(in srgb,var(--official-text) 6%,transparent)}
.official-showcase-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px;background:color-mix(in srgb,var(--official-lime) 14%,var(--official-panel));border-bottom:2px solid var(--official-lime)}
.official-showcase-title{margin:0;font-size:14px;font-weight:700;line-height:1.3;color:var(--official-accent-ink)}
.official-showcase-count{margin:0;font-size:11px;line-height:1.3;white-space:nowrap;color:var(--official-muted)}
.official-showcase-list{flex:1 1 auto;margin:0;padding:0;list-style:none}
.official-showcase-row{border-top:1px solid color-mix(in srgb,var(--official-line) 60%,var(--official-panel))}
.official-showcase-row:first-child{border-top:0}
.official-showcase-item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:0 10px;min-height:56px;padding:8px 12px;color:inherit;text-decoration:none}
.official-showcase-item.official-showcase-image{grid-template-columns:48px minmax(0,1fr) auto}
.official-showcase-item:hover,.official-showcase-item:focus-visible{background:color-mix(in srgb,var(--official-lime) 14%,var(--official-panel))}
.official-showcase-badge{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--official-lime) 14%,var(--official-panel));color:var(--official-accent-ink);font-size:14px;font-weight:700;line-height:1}
.official-showcase-thumb{position:relative;display:block;width:48px;height:48px;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--official-lime) 14%,var(--official-panel)) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375432f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E") center/26px no-repeat}
.official-showcase-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--official-panel)}
.official-showcase-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.official-showcase-host{font-size:13px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;color:var(--official-accent-ink)}
.official-showcase-path,.official-showcase-meta{font-size:11px;line-height:1.35;overflow-wrap:anywhere;color:var(--official-muted)}
.official-showcase-by{font-weight:700}
.official-showcase-go{font-size:15px;font-weight:700;line-height:1;color:var(--official-lime)}
.official-showcase-empty{margin:0;padding:22px 12px;font-size:12px;line-height:1.45;text-align:center;color:var(--official-muted)}
@media (max-width:760px){.official-showcase-cards{grid-template-columns:minmax(0,1fr)}}
.official-role-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:0;vertical-align:-3px;flex:none;font-size:15px;line-height:1}
img.official-role-icon{object-fit:contain}
.official-role-missing{border-radius:4px;border:1px dashed var(--official-muted)}
.official-booster{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border:1px solid var(--official-booster);border-radius:999px;background:color-mix(in srgb,var(--official-booster) 10%,transparent);color:var(--official-booster);font-size:11px;font-weight:700;line-height:18px;white-space:nowrap;vertical-align:1px;flex:none}
.official-booster-mark{color:var(--official-booster)}
/* Server Boosters page (sections/roles.py), from the owner's reference design (Oct 31 2026): a cream panel with the
   site's accent ribbons in the corners and the Server Boosters badge, glassy tiles, a gold-framed thank-you banner, then
   dark accent cards with gold edges. Every colour is mixed from the site's own tokens: burgundy and tan on
   r/AliceInChains, teal and gold on r/MLBTheShow. */
.official-boosters{--bz-serif:'Source Serif 4',Georgia,serif;
--bz-red:var(--official-accent);--bz-red:oklch(from var(--official-accent) calc(l * .92) calc(c * 1.6) h);
--bz-gold:var(--official-lime);--bz-gold:oklch(from var(--official-lime) calc(l + .04) calc(c * 1.25) calc(h - 6));
--bz-gold-hi:color-mix(in srgb,var(--bz-gold) 40%,#fff8d8);--bz-gold-lo:color-mix(in srgb,var(--bz-gold) 70%,#5a3000);
--bz-ink:color-mix(in srgb,var(--official-accent) 20%,color-mix(in srgb,var(--official-sidebar) 45%,#000));
--bz-deep:color-mix(in srgb,var(--bz-red) 56%,#000);--bz-deeper:color-mix(in srgb,var(--bz-red) 26%,#000);
--bz-cream:color-mix(in srgb,var(--official-accent) 5%,color-mix(in srgb,var(--official-lime) 5%,color-mix(in srgb,var(--official-background) 25%,var(--official-panel))));
--bz-line:color-mix(in srgb,var(--bz-gold) 62%,#fff);--bz-glow:color-mix(in srgb,var(--bz-gold) 70%,transparent);
--u:clamp(.8px,calc(100cqw / 1182),1px);container-type:inline-size;
position:relative;overflow:hidden;isolation:isolate;padding:.4% 1.48% 3.5%;border-radius:calc(16*var(--u));
background:linear-gradient(180deg,var(--bz-cream),color-mix(in srgb,var(--bz-gold) 5%,var(--bz-cream)));
box-shadow:0 calc(4*var(--u)) calc(18*var(--u)) color-mix(in srgb,var(--official-sidebar) 12%,transparent)}
.official-boosters h2,.official-boosters h3,.official-boosters p{margin:0}
.official-boost-s1{stop-color:color-mix(in srgb,var(--bz-red) 88%,#fff)}
.official-boost-s2{stop-color:color-mix(in srgb,var(--bz-red) 55%,#000)}
.official-boost-g1{stop-color:var(--bz-gold-hi)}.official-boost-g2{stop-color:var(--bz-gold)}.official-boost-g3{stop-color:var(--bz-gold-lo)}
/* Decoration: the accent ribbon in the top right corner, the waves along the bottom, a faint Discord mark, the badge. */
.official-boost-corner,.official-boost-waves,.official-boost-mark,.official-boost-badge{position:absolute;z-index:-1;pointer-events:none}
.official-boost-corner{top:0;right:0;width:calc(420*var(--u));height:calc(210*var(--u))}
.official-boost-corner .c1{fill:color-mix(in srgb,var(--bz-red) 80%,#000)}
.official-boost-corner .c2{fill:color-mix(in srgb,var(--bz-red) 62%,#000)}
.official-boost-corner .c3{fill:color-mix(in srgb,var(--bz-red) 48%,#000)}
.official-boost-corner .cl{stroke:var(--bz-gold);stroke-width:3;fill:none}
.official-boost-waves{left:0;right:0;bottom:0;width:100%;height:calc(190*var(--u))}
.official-boost-waves .w0{fill:color-mix(in srgb,var(--official-lime) 16%,var(--bz-cream))}
.official-boost-waves .w1{fill:color-mix(in srgb,var(--bz-red) 78%,#000)}
.official-boost-waves .w2{fill:color-mix(in srgb,var(--bz-red) 52%,#000)}
.official-boost-waves .w3{fill:none;stroke:color-mix(in srgb,var(--bz-red) 70%,#ff8aa0);stroke-width:2;opacity:.55;vector-effect:non-scaling-stroke}
.official-boost-waves .wl{fill:none;stroke:var(--bz-gold);stroke-width:2.5;vector-effect:non-scaling-stroke}
.official-boost-mark{right:calc(128*var(--u));bottom:calc(56*var(--u));fill:color-mix(in srgb,var(--official-lime) 36%,var(--bz-cream))}
.official-boost-badge{z-index:2;top:calc(4*var(--u));right:calc(28*var(--u));filter:drop-shadow(0 calc(4*var(--u)) calc(8*var(--u)) rgba(0,0,0,.3))}
.official-boost-laurel path{stroke:none}.official-boost-laurel path[fill="none"]{stroke:url(#obg-gold)}
.official-boost-inner{stroke:var(--bz-gold-hi);stroke-width:1.5;opacity:.7}
.official-boost-logo{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.official-boost-fold{fill:color-mix(in srgb,var(--bz-gold-lo) 70%,#000)}
.official-boost-tail{fill:var(--bz-gold-lo);stroke:color-mix(in srgb,var(--bz-gold-lo) 80%,#000);stroke-width:.6}
.official-boost-ribbon{stroke:var(--bz-gold-lo);stroke-width:1;filter:drop-shadow(0 calc(2*var(--u)) calc(2*var(--u)) rgba(0,0,0,.35))}
/* A fixed size in the badge's own units: the badge scales as a whole, and Safari ignores textLength on a textPath, so
   a larger phone size ran past the ends of the arc and lost the first and last S */
.official-boost-badge-text{font:800 16px var(--bz-serif);fill:#1c0e0a}
/* Title */
.official-boost-head{position:relative;display:flex;align-items:flex-start;gap:calc(20*var(--u));margin:0 calc(250*var(--u)) 0 calc(21*var(--u));padding-bottom:calc(14*var(--u))}
.official-boost-head::after{content:"";position:absolute;left:calc(24*var(--u));right:-90px;bottom:0;height:calc(2*var(--u));
background:linear-gradient(90deg,transparent,var(--bz-gold) 18%,var(--bz-gold) 70%,transparent)}
.official-boost-ruby{flex:none;margin-top:calc(4*var(--u));filter:drop-shadow(0 calc(2*var(--u)) calc(3*var(--u)) rgba(0,0,0,.25))}
.official-boost-ruby .r0{fill:var(--bz-red)}.official-boost-ruby .r1{fill:color-mix(in srgb,var(--bz-red) 55%,#fff)}
.official-boost-ruby .r2{fill:color-mix(in srgb,var(--bz-red) 55%,#000)}.official-boost-ruby .r3{fill:color-mix(in srgb,var(--bz-red) 80%,#000)}
.official-boost-ruby .r4{fill:color-mix(in srgb,var(--bz-red) 85%,#fff)}.official-boost-ruby .r5{fill:none;stroke:var(--bz-gold);stroke-width:1.6;stroke-linejoin:round}
.official-boosters .official-boost-title{font:800 calc(58*var(--u))/calc(52*var(--u)) var(--bz-serif);color:var(--bz-ink);letter-spacing:-.02em}
.official-boost-title span{color:var(--bz-red)}
.official-boost-sub{margin-top:calc(2*var(--u))!important;font-size:calc(18.6*var(--u));line-height:1.25;color:var(--bz-ink)}
/* Tiles */
.official-boost-stats{position:relative;z-index:1;display:grid;grid-template-columns:295fr 283fr 506fr;gap:calc(15*var(--u));margin:calc(16*var(--u)) calc(55*var(--u)) calc(20*var(--u)) calc(13*var(--u))}
.official-boost-stat{display:flex;align-items:center;gap:calc(18*var(--u));min-width:0;height:calc(105*var(--u));box-sizing:border-box;padding:0 calc(16*var(--u));
border:calc(1.5*var(--u)) solid var(--bz-line);border-radius:calc(12*var(--u));
background:linear-gradient(180deg,color-mix(in srgb,var(--official-panel) 92%,#fff),color-mix(in srgb,var(--bz-gold) 7%,var(--official-panel)));
box-shadow:inset 0 1px 0 #fff,0 0 0 1px color-mix(in srgb,var(--bz-gold) 18%,transparent),0 calc(4*var(--u)) calc(12*var(--u)) color-mix(in srgb,var(--official-sidebar) 10%,transparent)}
.official-boost-icon{display:grid;place-items:center;flex:none;width:calc(65*var(--u));height:calc(65*var(--u));border-radius:50%;color:color-mix(in srgb,var(--bz-red) 80%,#000);
background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--bz-gold) 18%,#fff),color-mix(in srgb,var(--bz-gold) 50%,#fff) 70%,color-mix(in srgb,var(--bz-gold) 62%,#fff));
box-shadow:0 calc(2*var(--u)) calc(5*var(--u)) color-mix(in srgb,var(--bz-gold) 40%,transparent)}
.official-boost-stat-text{flex:1;min-width:0}
.official-boost-stat-label{white-space:nowrap;font-size:calc(13*var(--u));font-weight:700;line-height:calc(15*var(--u));text-transform:uppercase;color:var(--bz-ink)}
.official-boost-stat .official-big{display:block;margin-top:calc(2*var(--u));font:800 calc(40*var(--u))/1 var(--bz-serif);color:var(--bz-red)}
.official-boost-word{color:var(--bz-ink)}
.official-boost-stat-foot{display:flex;align-items:center;justify-content:space-between;gap:calc(30*var(--u));margin-top:calc(2*var(--u))}
.official-boost-stat-note{font-size:calc(13.5*var(--u));color:var(--bz-ink);white-space:nowrap}
.official-boost-tier{display:flex;gap:calc(6*var(--u));margin:-8px calc(5*var(--u)) 0 0}
.official-boost-tier i{flex:none;width:calc(56*var(--u));height:calc(13*var(--u));border-radius:calc(7*var(--u));background:color-mix(in srgb,var(--bz-gold) 22%,var(--official-panel));
box-shadow:inset 0 1px calc(2*var(--u)) color-mix(in srgb,var(--bz-gold) 30%,transparent)}
.official-boost-tier i.on{background:linear-gradient(180deg,color-mix(in srgb,var(--bz-red) 85%,#fff),color-mix(in srgb,var(--bz-red) 70%,#000));box-shadow:none}
/* Thank-you banner */
.official-boost-thanks{position:relative;z-index:1;display:flex;align-items:center;height:calc(96*var(--u));box-sizing:border-box;margin:0 calc(4*var(--u)) calc(19*var(--u));padding:0 calc(26*var(--u)) 0 calc(11*var(--u));
border:calc(3*var(--u)) solid var(--bz-gold);border-radius:calc(14*var(--u));
background:linear-gradient(90deg,color-mix(in srgb,var(--bz-gold) 30%,var(--official-panel)),color-mix(in srgb,var(--bz-gold) 10%,var(--official-panel)) 40%,color-mix(in srgb,var(--bz-gold) 22%,var(--official-panel)));
box-shadow:0 0 0 1px var(--bz-gold-hi),0 0 calc(16*var(--u)) color-mix(in srgb,var(--bz-gold) 55%,transparent),inset 0 1px 0 #fff}
.official-boost-sparkles{flex:none;fill:#fff;filter:drop-shadow(0 0 calc(3*var(--u)) var(--bz-gold));margin-right:-4px}
.official-boost-heart{flex:none;filter:drop-shadow(0 calc(3*var(--u)) calc(4*var(--u)) color-mix(in srgb,var(--bz-red) 45%,transparent))}
.official-boost-shine{fill:rgba(255,255,255,.55)}
.official-boost-rule{flex:none;width:calc(2*var(--u));height:calc(56*var(--u));margin:0 calc(28*var(--u)) 0 calc(25*var(--u));background:linear-gradient(180deg,transparent,var(--bz-red) 25%,var(--bz-red) 75%,transparent)}
.official-boost-thanks-text{flex:1;min-width:0}
.official-boosters .official-boost-thanks h3{font:800 calc(32*var(--u))/.95 var(--bz-serif);color:var(--bz-red);letter-spacing:-.01em}
.official-boost-thanks p{margin-top:0!important;font-size:calc(15.3*var(--u));line-height:1.3;color:var(--bz-ink)}
.official-boost-crown{flex:none;margin-left:calc(16*var(--u));filter:drop-shadow(0 0 calc(10*var(--u)) color-mix(in srgb,var(--bz-gold) 70%,transparent))}
/* Meet Our Boosters */
.official-boost-directory{position:relative;z-index:1}
.official-boost-dir-head{display:flex;align-items:center;gap:calc(26*var(--u));margin:0 calc(3*var(--u)) calc(16*var(--u)) calc(12*var(--u))}
.official-boost-group{flex:none;color:var(--bz-red);display:grid}
.official-boost-dir-title{flex:1;min-width:0}
.official-boosters .official-boost-dir-head h3{font:800 calc(32*var(--u))/1 var(--bz-serif);color:var(--bz-ink);letter-spacing:-.01em}
.official-boost-dir-head p{margin-top:calc(2*var(--u))!important;font-size:calc(15.5*var(--u));color:var(--bz-ink)}
.official-boost-count{display:inline-flex;align-items:center;gap:calc(12*var(--u));height:calc(40*var(--u));box-sizing:border-box;padding:0 calc(21*var(--u)) 0 calc(19*var(--u));border:calc(2*var(--u)) solid var(--bz-gold);border-radius:calc(20*var(--u));
background:linear-gradient(180deg,color-mix(in srgb,var(--bz-red) 85%,#fff),color-mix(in srgb,var(--bz-red) 62%,#000));
color:#fff;font-size:calc(17*var(--u));font-weight:700;white-space:nowrap;box-shadow:0 0 calc(10*var(--u)) color-mix(in srgb,var(--bz-gold) 50%,transparent),0 calc(3*var(--u)) calc(8*var(--u)) rgba(0,0,0,.25)}
.official-boost-count .official-gem{width:calc(16*var(--u));height:calc(16*var(--u));color:var(--bz-gold)}
.official-boost-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(15*var(--u)) calc(10*var(--u))}
.official-boost-card{display:flex;align-items:center;gap:calc(19*var(--u));min-width:0;height:calc(108*var(--u));box-sizing:border-box;padding:0 calc(13*var(--u)) 0 calc(16*var(--u));border:calc(2*var(--u)) solid transparent;border-radius:calc(11*var(--u));color:#fff;
background:linear-gradient(170deg,var(--bz-deep),var(--bz-deeper) 75%) padding-box,linear-gradient(180deg,var(--bz-gold-hi),var(--bz-gold) 45%,var(--bz-gold-lo)) border-box;
box-shadow:0 0 calc(8*var(--u)) color-mix(in srgb,var(--bz-gold) 45%,transparent),0 calc(4*var(--u)) calc(12*var(--u)) rgba(0,0,0,.28)}
.official-boost-pic{position:relative;flex:none;display:grid}
.official-boost-card .official-avatar{width:calc(78*var(--u));height:calc(78*var(--u));box-sizing:border-box;font-size:calc(28*var(--u));border:calc(3*var(--u)) solid var(--bz-gold);box-shadow:0 0 calc(6*var(--u)) color-mix(in srgb,var(--bz-gold) 60%,transparent)}
.official-boost-king{position:absolute;top:-15px;right:calc(4*var(--u));display:grid;place-items:center;width:calc(30*var(--u));height:calc(30*var(--u));box-sizing:border-box;border:calc(2*var(--u)) solid var(--bz-gold);border-radius:50%;
background:linear-gradient(180deg,color-mix(in srgb,var(--bz-red) 80%,#fff),color-mix(in srgb,var(--bz-red) 60%,#000));color:var(--bz-gold-hi)}
.official-boost-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}
.official-boost-name{max-width:100%;font:800 calc(22*var(--u))/calc(26*var(--u)) var(--bz-serif);color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.official-boost-card .official-boost-pill{gap:calc(6*var(--u));margin-top:calc(4*var(--u));padding:0 calc(11*var(--u));border:calc(1.5*var(--u)) solid var(--bz-gold);background:rgba(0,0,0,.18);color:var(--bz-gold-hi);font-size:calc(12.2*var(--u));line-height:calc(21*var(--u))}
.official-boost-pill .official-gem{color:var(--bz-gold)}
.official-boost-since{white-space:nowrap;display:flex;align-items:center;gap:calc(9*var(--u));margin-top:calc(9*var(--u));font-size:calc(12*var(--u));color:color-mix(in srgb,var(--bz-red) 15%,#e4dcdc)}
.official-boost-since svg{flex:none;color:color-mix(in srgb,var(--bz-gold) 30%,#fff)}
.official-boost-profile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3*var(--u));flex:none;width:calc(91*var(--u));height:calc(79*var(--u));box-sizing:border-box;
border:calc(1.5*var(--u)) solid var(--bz-gold);border-radius:calc(11*var(--u));color:#fff;font-size:calc(14*var(--u));text-align:center;text-decoration:none;
background:linear-gradient(180deg,color-mix(in srgb,var(--bz-red) 78%,#fff),color-mix(in srgb,var(--bz-red) 62%,#000) 60%,color-mix(in srgb,var(--bz-red) 45%,#000));
box-shadow:0 0 calc(10*var(--u)) color-mix(in srgb,var(--bz-gold) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
/* Shine: glossy highlights, gold glows and sparkles, as in the reference. */
.official-boost-icon{position:relative;color:var(--bz-red);background:radial-gradient(circle at 38% 30%,#fffaf0 0,color-mix(in srgb,var(--bz-gold) 30%,#fff) 38%,color-mix(in srgb,var(--bz-gold) 62%,#fff) 78%,color-mix(in srgb,var(--bz-gold) 80%,#fff));
box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold) 35%,#fff),0 calc(3*var(--u)) calc(8*var(--u)) color-mix(in srgb,var(--bz-gold) 45%,transparent),inset 0 -4px calc(8*var(--u)) color-mix(in srgb,var(--bz-gold) 35%,transparent)}
.official-boost-icon svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
.official-boost-stat{border-color:var(--bz-line);box-shadow:inset 0 1px 0 #fff,inset 0 0 calc(12*var(--u)) color-mix(in srgb,var(--bz-gold) 12%,transparent),0 0 0 1px color-mix(in srgb,var(--bz-gold) 28%,transparent),0 calc(4*var(--u)) calc(14*var(--u)) color-mix(in srgb,var(--bz-gold) 22%,transparent)}
.official-boost-head::after{height:calc(2*var(--u));box-shadow:0 0 calc(6*var(--u)) var(--bz-glow)}
.official-boost-ruby{filter:drop-shadow(0 0 calc(5*var(--u)) color-mix(in srgb,var(--bz-red) 35%,transparent)) drop-shadow(0 calc(2*var(--u)) calc(2*var(--u)) rgba(0,0,0,.25))}
.official-boost-thanks{border-color:var(--bz-gold);background:radial-gradient(60% 90% at 50% 105%,color-mix(in srgb,var(--bz-gold) 30%,#fffaf0),transparent 70%),linear-gradient(90deg,color-mix(in srgb,var(--official-lime) 26%,var(--official-panel)),color-mix(in srgb,var(--official-lime) 7%,var(--official-panel)) 40%,color-mix(in srgb,var(--official-lime) 18%,var(--official-panel)));
box-shadow:0 0 0 1px var(--bz-gold-hi),0 0 calc(18*var(--u)) var(--bz-glow),0 calc(10*var(--u)) calc(22*var(--u)) -6px var(--bz-glow),inset 0 1px 0 #fff,inset 0 0 calc(18*var(--u)) color-mix(in srgb,var(--bz-gold) 25%,transparent)}
.official-boost-heart{filter:drop-shadow(0 0 calc(4*var(--u)) #fffbe6) drop-shadow(0 0 calc(10*var(--u)) rgba(255,238,180,.95)) drop-shadow(0 calc(3*var(--u)) calc(2*var(--u)) color-mix(in srgb,var(--bz-red) 30%,transparent))}
.official-boost-h1{stop-color:color-mix(in srgb,var(--bz-red) 80%,#ffd8c8)}.official-boost-h2{stop-color:color-mix(in srgb,var(--bz-red) 92%,#fff)}.official-boost-h3{stop-color:color-mix(in srgb,var(--bz-red) 62%,#000)}
.official-boost-sparkles,.official-boost-glints{fill:#fff;filter:drop-shadow(0 0 calc(2*var(--u)) #fff) drop-shadow(0 0 calc(5*var(--u)) var(--bz-gold))}
.official-boost-glints{position:absolute;z-index:1;right:calc(140*var(--u));top:calc(6*var(--u));pointer-events:none}
.official-boost-crown{filter:drop-shadow(0 0 calc(8*var(--u)) color-mix(in srgb,var(--official-lime) 45%,#fff8e0))}
.official-boost-k1{stop-color:color-mix(in srgb,var(--official-lime) 72%,#fff)}.official-boost-k2{stop-color:color-mix(in srgb,var(--official-lime) 92%,#6a4300)}
.official-boost-crown-base{fill:#fff3c4;filter:drop-shadow(0 0 calc(2*var(--u)) #fff6d0) drop-shadow(0 0 calc(5*var(--u)) var(--bz-gold)) drop-shadow(0 0 calc(9*var(--u)) var(--bz-glow))}
.official-boost-badge{filter:drop-shadow(0 0 calc(10*var(--u)) var(--bz-glow)) drop-shadow(0 calc(4*var(--u)) calc(6*var(--u)) rgba(0,0,0,.3))}
.official-boost-count{background:linear-gradient(180deg,color-mix(in srgb,var(--bz-red) 70%,#fff) 0,var(--bz-red) 45%,color-mix(in srgb,var(--bz-red) 55%,#000));
box-shadow:0 0 calc(12*var(--u)) var(--bz-glow),inset 0 1px 0 rgba(255,255,255,.45),0 calc(3*var(--u)) calc(8*var(--u)) rgba(0,0,0,.25)}
.official-boost-count .official-gem{color:var(--bz-gold-hi);filter:drop-shadow(0 0 calc(4*var(--u)) var(--bz-gold))}
.official-boost-card{position:relative;background:radial-gradient(70% 90% at 35% 30%,color-mix(in srgb,var(--bz-red) 62%,#000),transparent 70%) padding-box,linear-gradient(170deg,var(--bz-deep),var(--bz-deeper) 80%) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--bz-gold) 55%,#fff8e0),var(--bz-gold) 30%,var(--bz-gold-lo) 72%,color-mix(in srgb,var(--bz-gold) 85%,#fff)) border-box;
box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold) 40%,transparent),0 0 calc(14*var(--u)) var(--bz-glow),0 calc(6*var(--u)) calc(14*var(--u)) rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.official-boost-card .official-avatar{border-color:var(--bz-gold);box-shadow:0 0 0 1px var(--bz-gold-hi),0 0 calc(10*var(--u)) var(--bz-glow)}
.official-boost-king{border-color:var(--bz-gold-hi);color:#ffe27a;color:color-mix(in srgb,var(--bz-gold) 35%,#fff3a0);
background:radial-gradient(circle at 40% 30%,color-mix(in srgb,var(--bz-red) 70%,#fff),var(--bz-red) 55%,color-mix(in srgb,var(--bz-red) 60%,#000));box-shadow:0 0 calc(8*var(--u)) var(--bz-glow),0 calc(2*var(--u)) calc(3*var(--u)) rgba(0,0,0,.4)}
.official-boost-king svg{filter:drop-shadow(0 0 calc(2*var(--u)) color-mix(in srgb,var(--bz-gold) 80%,transparent))}
.official-boost-card .official-boost-pill{border-color:var(--bz-gold);color:color-mix(in srgb,var(--bz-gold) 40%,#fff3a0);background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.3));box-shadow:0 0 calc(6*var(--u)) color-mix(in srgb,var(--bz-gold) 45%,transparent),inset 0 0 calc(6*var(--u)) color-mix(in srgb,var(--bz-gold) 25%,transparent)}
.official-boost-pill .official-gem{color:color-mix(in srgb,var(--bz-gold) 60%,#fff3a0);filter:drop-shadow(0 0 calc(3*var(--u)) var(--bz-gold))}
.official-boost-since{color:#f1e9e9}.official-boost-since svg{color:#fff}
.official-boost-profile{position:relative;overflow:hidden;border-color:var(--bz-gold-hi);
background:radial-gradient(90% 60% at 50% 0,color-mix(in srgb,var(--bz-red) 55%,#fff),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--bz-red) 90%,#fff),var(--bz-red) 40%,color-mix(in srgb,var(--bz-red) 50%,#000));
box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold) 60%,transparent),0 0 calc(14*var(--u)) var(--bz-glow),0 0 calc(4*var(--u)) var(--bz-gold),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -6px calc(10*var(--u)) rgba(0,0,0,.25)}
.official-boost-icon{background:radial-gradient(circle at 38% 30%,#fffaf0 0,color-mix(in srgb,var(--bz-gold) 22%,#fff4e6) 40%,color-mix(in srgb,var(--bz-gold) 48%,#ffe9d0) 80%,color-mix(in srgb,var(--bz-gold) 62%,#f5d5b0))}
/* Light flares: hot spots with thin rays where the gold catches the light (the badge star, the title rule, the
   banner's edge, base and crown tip, the wave lines), plus a glint on each card's and button's lower corner. */












.official-boost-card::after{content:"";position:absolute;right:-12px;bottom:-10px;width:calc(56*var(--u));height:calc(20*var(--u));pointer-events:none;
background:radial-gradient(closest-side,#fff 0 12%,rgba(255,244,205,.85) 30%,color-mix(in srgb,var(--bz-gold) 45%,transparent) 60%,transparent)}
.official-boost-profile{background:radial-gradient(90% 60% at 50% 0,color-mix(in srgb,var(--bz-red) 55%,#fff),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--bz-red) 90%,#fff),var(--bz-red) 40%,color-mix(in srgb,var(--bz-red) 50%,#000));
box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold) 60%,transparent),0 0 calc(18*var(--u)) var(--bz-glow),0 0 calc(5*var(--u)) var(--bz-gold),0 calc(4*var(--u)) calc(14*var(--u)) -2px var(--bz-glow),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 color-mix(in srgb,var(--bz-gold) 70%,#fff4c8),inset 0 -8px calc(10*var(--u)) -4px color-mix(in srgb,var(--bz-gold) 40%,transparent)}
/* Metallic gold: bright along the top, bronze underneath, on the rings, tiles and banner. */
.official-boost-pic{padding:calc(3*var(--u));border-radius:50%;background:linear-gradient(160deg,#fff4c8,var(--bz-gold) 35%,var(--bz-gold-lo) 70%,var(--bz-gold));box-shadow:0 0 calc(10*var(--u)) var(--bz-glow)}
.official-boost-card .official-avatar{width:calc(72*var(--u));height:calc(72*var(--u));border:0;box-shadow:none}
.official-boost-stat{border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--bz-gold) 3%,var(--official-panel)),color-mix(in srgb,var(--bz-gold) 15%,var(--official-panel))) padding-box,linear-gradient(180deg,#fff6dc,var(--bz-line) 45%,color-mix(in srgb,var(--bz-gold) 75%,#fff)) border-box}
.official-boost-thanks{border-color:transparent;background:radial-gradient(60% 90% at 50% 105%,color-mix(in srgb,var(--bz-gold) 30%,#fffaf0),transparent 70%) padding-box,linear-gradient(90deg,color-mix(in srgb,var(--official-lime) 26%,var(--official-panel)),color-mix(in srgb,var(--official-lime) 7%,var(--official-panel)) 40%,color-mix(in srgb,var(--official-lime) 18%,var(--official-panel))) padding-box,linear-gradient(180deg,#fff2c0,var(--bz-gold) 35%,var(--bz-gold-lo) 80%,var(--bz-gold)) border-box}
.official-boost-tier i.on{box-shadow:inset 0 calc(2*var(--u)) 1px rgba(255,255,255,.4),0 1px calc(3*var(--u)) color-mix(in srgb,var(--bz-red) 40%,transparent)}
.official-boost-crown path{filter:none}
/* Glowing gold lines on the corner ribbon and the waves. */
.official-boost-waves .wl,.official-boost-corner .cl{filter:drop-shadow(0 0 calc(2*var(--u)) #fff3c0) drop-shadow(0 0 calc(6*var(--u)) var(--bz-gold))}
.official-boost-laurel{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.official-boost-icon{color:color-mix(in srgb,var(--bz-red) 80%,#2a0d00)}
.official-boost-card::after{display:none}
.official-boost-rule{width:calc(3*var(--u));background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bz-red) 55%,#000) 30%,color-mix(in srgb,var(--bz-red) 55%,#000) 70%,transparent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
/* Depth: a dark bronze rim outside each gold edge and a champagne line inside it. */
.official-boost-card{box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold-lo) 70%,#000),inset 0 0 0 1px rgba(255,236,190,.2),inset 0 0 calc(26*var(--u)) rgba(0,0,0,.4),0 0 calc(8*var(--u)) color-mix(in srgb,var(--bz-gold) 45%,transparent),0 calc(3*var(--u)) calc(4*var(--u)) rgba(0,0,0,.25),0 calc(10*var(--u)) calc(18*var(--u)) -6px rgba(0,0,0,.4);
transition:transform .2s ease,box-shadow .2s ease}
.official-boost-stat,.official-boost-thanks{box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold) 30%,transparent),inset 0 0 0 1px rgba(255,255,255,.75),inset 0 0 calc(14*var(--u)) color-mix(in srgb,var(--bz-gold) 14%,transparent),0 0 calc(12*var(--u)) color-mix(in srgb,var(--bz-gold) 30%,transparent),0 calc(5*var(--u)) calc(12*var(--u)) color-mix(in srgb,var(--official-sidebar) 12%,transparent)}
.official-boost-thanks{box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold) 40%,transparent),inset 0 0 0 1px rgba(255,255,255,.7),inset 0 0 calc(18*var(--u)) color-mix(in srgb,var(--bz-gold) 18%,transparent),0 0 calc(12*var(--u)) color-mix(in srgb,var(--bz-gold) 40%,transparent),0 calc(8*var(--u)) calc(18*var(--u)) -8px var(--bz-glow)}
/* The supporters pill: deep accent, a metallic rim, and a faceted gold diamond. */
.official-boost-count{font-weight:600;border:calc(2*var(--u)) solid transparent;background:linear-gradient(90deg,transparent 55%,rgba(0,0,0,.28)) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--bz-red) 75%,#fff) 0,var(--bz-red) 42%,color-mix(in srgb,var(--bz-red) 48%,#000)) padding-box,linear-gradient(180deg,#fff2c0,var(--bz-gold) 40%,var(--bz-gold-lo) 80%,var(--bz-gold)) border-box;
box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold-lo) 80%,#000),inset 0 1px 0 rgba(255,255,255,.4),0 0 calc(14*var(--u)) var(--bz-glow),0 calc(4*var(--u)) calc(10*var(--u)) rgba(0,0,0,.25)}
.official-boost-count-gem{flex:none;filter:drop-shadow(0 0 calc(4*var(--u)) var(--bz-gold))}
.official-boost-count-gem-in{fill:color-mix(in srgb,var(--bz-red) 55%,#000)}
/* View Profile: a glossy accent tile with a metallic rim, a glass sheen across the top and a warm glow. */
.official-boost-profile{gap:calc(4*var(--u));font-size:calc(13.5*var(--u));border:calc(2*var(--u)) solid transparent;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
background:linear-gradient(155deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.06) 38%,transparent 39%) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--bz-red) 82%,#fff),var(--bz-red) 38%,color-mix(in srgb,var(--bz-red) 42%,#000)) padding-box,linear-gradient(180deg,#fff4c8,var(--bz-gold) 35%,var(--bz-gold-lo) 70%,#fff0b8) border-box;
box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold-lo) 80%,#000),0 0 calc(9*var(--u)) color-mix(in srgb,var(--bz-gold) 55%,transparent),0 calc(4*var(--u)) calc(8*var(--u)) -2px color-mix(in srgb,var(--bz-gold) 80%,#fff2c0),0 calc(6*var(--u)) calc(12*var(--u)) -4px rgba(0,0,0,.5),inset 0 -6px calc(10*var(--u)) -4px color-mix(in srgb,var(--bz-gold) 45%,transparent)}
.official-boost-profile strong{font-weight:600;text-shadow:0 1px calc(2*var(--u)) rgba(0,0,0,.45)}
.official-boost-profile svg:last-child{transition:transform .2s ease}
@media (hover:hover){
.official-boost-card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold-lo) 80%,#000),inset 0 0 0 1px rgba(255,236,190,.35),inset 0 0 calc(22*var(--u)) rgba(0,0,0,.3),0 0 calc(22*var(--u)) var(--bz-glow),0 calc(12*var(--u)) calc(20*var(--u)) -6px rgba(0,0,0,.45)}
.official-boost-profile:hover{transform:translateY(-2px);filter:brightness(1.12);border-color:transparent;box-shadow:0 0 0 1px color-mix(in srgb,var(--bz-gold-lo) 80%,#000),0 0 calc(24*var(--u)) var(--bz-glow),0 0 calc(6*var(--u)) var(--bz-gold-hi),0 calc(8*var(--u)) calc(14*var(--u)) -4px rgba(0,0,0,.5)}
.official-boost-profile:hover svg:last-child{transform:translateX(calc(4*var(--u)))}}
.official-boost-profile:focus-visible{outline:calc(3*var(--u)) solid var(--bz-gold-hi);outline-offset:calc(3*var(--u))}
@media (prefers-reduced-motion:reduce){.official-boost-card,.official-boost-profile,.official-boost-profile svg{transition:none}
.official-boost-card:hover,.official-boost-profile:hover,.official-boost-profile:hover svg:last-child{transform:none}}
.official-boost-name{margin-top:-3px}
/* Narrower panels: two tile and card columns; phones stack tiles and cards in one column at the drawn sizes. */
@container (max-width:960px){.official-boost-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-right:180px}.official-boost-stat-level{grid-column:1/-1}
.official-boost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.official-boosters{--u:1px;padding:14px 12px 96px}
.official-boost-corner{width:190px;height:95px}.official-boost-badge{width:118px;height:89px;top:2px;right:4px}
.official-boost-head{margin:0 112px 0 0;gap:10px}.official-boost-head::after{left:0;right:-100px}
.official-boost-ruby{width:30px;height:33px}.official-boosters .official-boost-title{font-size:32px;line-height:35px}.official-boost-sub{font-size:15px}
.official-boost-stats{grid-template-columns:minmax(0,1fr);gap:10px;margin:14px 0 16px}
.official-boost-stat{height:auto;padding:12px 14px;gap:14px}.official-boost-icon{width:52px;height:52px}.official-boost-icon svg{width:24px;height:24px}
.official-boost-stat .official-big{font-size:34px}.official-boost-stat-foot{flex-wrap:wrap;gap:6px 14px}.official-boost-tier i{width:40px}
.official-boost-thanks{height:auto;margin:0 0 20px;padding:14px 12px}.official-boost-sparkles{display:none}
.official-boost-heart{width:38px;height:34px}.official-boost-rule{height:64px;margin:0 12px}
.official-boosters .official-boost-thanks h3{font-size:22px}.official-boost-glints{display:none}.official-boost-card .official-avatar{width:58px;height:58px}.official-boost-head>div{min-width:0}.official-boost-thanks p{font-size:14px}.official-boost-crown{display:none}
.official-boost-dir-head{flex-wrap:wrap;gap:8px 14px;margin:0 0 16px}.official-boost-dir-title{flex:1 1 200px}.official-boost-count{margin-left:52px}.official-boost-group svg{width:38px;height:32px}
.official-boosters .official-boost-dir-head h3{font-size:26px}.official-boost-dir-head p{font-size:14px}.official-boost-count{height:36px;font-size:15px;padding:0 18px}
.official-boost-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.official-boost-card{flex-wrap:wrap;gap:10px 14px;height:auto;padding:14px 12px 12px}
.official-boost-king{width:26px;height:26px;top:-11px;right:-2px}
.official-boost-name{font-size:19px}.official-boost-since{font-size:12px;gap:6px}
.official-boost-profile{flex:1 1 100%;flex-direction:row;gap:8px;width:auto;height:40px;font-size:14px}
.official-boost-mark{right:40px;bottom:46px;width:70px;height:54px}}
/* In User Stats the Booster pill sits on its own line under the name, as on the old pages. */
.official-users .official-who{display:block}
.official-users .official-who .official-role-icon{margin-left:6px}
.official-users .official-who .official-booster{display:flex;width:max-content;margin-top:4px}
/* Narrow columns (Time of day): the Booster pill shows its gem only, so the name keeps its room. */
.official-tod-row .official-booster{padding:1px 5px}
.official-tod-row .official-booster>span{display:none}
/* Narrower screens: the header stacks (art, tabs, then Last updated and the period menu), tables become cards. */
@media (max-width:1100px){
.official-page{padding:0 10px 24px}
}
@media (max-width:760px){
.official-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;padding:8px 10px 0;gap:6px 8px}
.official-top-center{grid-row:1;grid-column:1/3}
.official-tabs{grid-row:2;grid-column:1/3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:2px 0 0}
.official-tab{padding:4px 2px;font-size:11px;white-space:normal;text-align:center;line-height:1.2}
.official-top-left{grid-row:3;grid-column:1;padding:6px 0 10px;justify-content:flex-end}
.official-top-brand{display:none}
.official-top-right{grid-row:3;grid-column:2;padding:6px 0 10px;gap:6px}
.official-period-label{display:none}
.official-period-range{display:none}
.official-header-art img{max-height:90px}
.official-tiles{gap:8px}
.official-tile{min-height:72px;padding:10px 6px}
.official-tile-value{font-size:19px}
.official-tiles-light .official-tile-value{font-size:20px}
.official-tile-label{font-size:9px;letter-spacing:.06em}
.official-panel{padding:14px}
.official-duo,.official-trio{grid-template-columns:minmax(0,1fr)}
.official-hourly{grid-template-columns:30px minmax(0,1fr);grid-template-rows:130px auto}
.official-hourly-plot,.official-hourly-x{gap:2px;padding:0}
.official-hourly-x{font-size:9px}
.official-hourly-x span:nth-child(even){visibility:hidden}
.official-h2{font-size:19px}
/* Tables as stacked rows: rank and name on top, then each value under its label. */
.official-table thead{display:none}
.official-table,.official-table tbody{display:block}
.official-table tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;padding:12px;border-top:1px solid var(--official-line)}
.official-table td{display:block;padding:0;border:0}
.official-table td[data-label],.official-table td.official-bar-cell{grid-column:1/-1}
.official-users td[data-label]::before{content:attr(data-label);display:block;font:700 10px var(--official-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--official-muted);text-align:center;margin-bottom:2px}
.official-rank-cell{width:auto}
.official-users .official-count-cell{width:auto}
.official-pairs-table tr{grid-template-columns:auto minmax(0,1fr) auto auto}
.official-pairs-table td.official-bar-cell{grid-column:1/3;align-self:center}
.official-pairs-table td[data-label]{grid-column:auto;font-size:12px}
.official-pairs-table td[data-label]::before{content:attr(data-label) " ";color:var(--official-muted);font-weight:400}
.official-moments{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
.official-section-links a{padding:3px 9px;font-size:12px}
}
/* Box score look (site.layout.look "boxscore", the old r/MLBTheShow pages): compact tables, quiet rank numbers,
   headings inside their panels, the peak's share above its bar, a teal rule under the header. */
.official-look-boxscore .official-section-links{background:var(--official-background);border-bottom:3px solid var(--official-accent);padding:3px 8px 2px}
.official-look-boxscore .official-section-links a{font-size:12px;font-weight:600;color:var(--official-sidebar)}
.official-look-boxscore .official-section-boxed .official-section-head{padding:18px 12px}
.official-look-boxscore .official-section-boxed .official-h2{font-size:18.7px}
.official-look-boxscore .official-table{font-size:12px;line-height:1.45}
.official-look-boxscore .official-table th{padding:9px 10px;background:color-mix(in srgb,var(--official-teal) 13%,var(--official-panel));border-bottom:1px solid color-mix(in srgb,var(--official-line) 70%,var(--official-panel));font-size:12px}
.official-look-boxscore .official-table td{padding:8px 10px;border-top:0;border-bottom:1px solid color-mix(in srgb,var(--official-line) 70%,var(--official-panel))}
.official-look-boxscore .official-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--official-background) 45%,var(--official-panel))}
.official-look-boxscore .official-users .official-quote-cell{text-align:left}
.official-look-boxscore .official-users .official-quote{font:12px/1.45 var(--official-font-body)}
.official-look-boxscore .official-users .official-quote-time{font-weight:400;text-align:left}
.official-look-boxscore .official-users .official-name-cell{font-weight:700;font-size:12px}
.official-look-boxscore .official-rank-badge{min-width:22px;height:20px;border-color:transparent;background:none;font-size:11px}
.official-look-boxscore .official-rank-gold{background:color-mix(in srgb,var(--official-lime) 22%,var(--official-panel));border-color:var(--official-lime)}
.official-look-boxscore .official-rank-silver{background:color-mix(in srgb,#9aa7b4 22%,var(--official-panel));border-color:#9aa7b4}
.official-look-boxscore .official-rank-bronze{background:color-mix(in srgb,#d08a5a 18%,var(--official-panel));border-color:#d08a5a}
.official-look-boxscore .official-chart-meta .official-strong{font-weight:400}
.official-look-boxscore .official-hourly-x,.official-look-boxscore .official-hourly-y{font-size:13px}
.official-look-boxscore .official-count strong{font-size:12px}
.official-look-boxscore .official-track{height:7px}
.official-hour-share{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);padding-bottom:3px;font-size:12px;font-weight:700;color:var(--official-lime-ink);white-space:nowrap}
@media (min-width:761px){.official-look-boxscore .official-hourly-plot{gap:10px}}
.official-hourly-x span:last-child{justify-self:end}
/* Big Numbers (sections/highlights.py) as on the old pages: the number and its unit, the old sentence, notes. */
.official-bign-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;grid-auto-flow:row dense}
.official-bign-card-wide{grid-column:1/-1}
.official-bign-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px 16px;border:1px solid var(--official-line);border-top:3px solid var(--official-lime);border-radius:13px;background:var(--official-panel);box-shadow:0 2px 8px color-mix(in srgb,var(--official-sidebar) 7%,transparent);font-size:13px;line-height:1.45;color:var(--official-text)}
.official-bign-card p{margin:0}
.official-bign-figure{display:flex;align-items:baseline;gap:6px}
.official-bign-number{font:800 30px/1.1 var(--official-font-body);color:var(--official-accent-ink)}
.official-look-boxscore .official-bign-number{color:var(--official-sidebar)}
.official-bign-unit{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--official-muted)}
.official-bign-headline{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.official-bign-name,.official-bign-name .official-member-link{font-weight:700;color:var(--official-accent-ink);border-bottom:0}
.official-bign-note{padding-top:6px;border-top:1px solid color-mix(in srgb,var(--official-line) 60%,var(--official-panel));font-size:12px;color:var(--official-muted)}
.official-bign-label{font-size:12px;color:var(--official-muted)}
.official-bign-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.official-bign-chip{padding:3px 9px;border:1px solid var(--official-line);border-radius:999px;background:color-mix(in srgb,var(--official-line) 30%,var(--official-panel));font-size:12px;font-weight:700;color:var(--official-accent-ink)}
.official-bign-chip .official-member-link{color:inherit;border-bottom:0}
.official-bign-quote{margin:0;padding:10px 12px;border-left:3px solid var(--official-lime);border-radius:0 9px 9px 0;background:color-mix(in srgb,var(--official-line) 30%,var(--official-panel))}
.official-bign-quote footer{margin-top:2px;font-size:11px;color:var(--official-muted)}
.official-bign-speaker{font-weight:700;color:var(--official-accent-ink)}
/* Names and words come from the chat, so nothing in a big-number card may be wider than the card (a 117 px sideways scroll at 390 px came from an unbroken name in a chip). */
.official-bign-card{overflow-wrap:anywhere}
.official-bign-card>*,.official-bign-figure>*{min-width:0}
.official-bign-figure{flex-wrap:wrap}
.official-bign-chips{min-width:0}
.official-bign-chip{min-width:0;max-width:100%;box-sizing:border-box}
.official-bign-chip .official-member-link{overflow-wrap:anywhere}
/* The same for the shortest-message table, the message-length rows and the member chips. */
.official-short-table td{min-width:0;overflow-wrap:anywhere}
.official-short-table td.official-short-when{overflow-wrap:normal}
.official-len-head{flex-wrap:wrap}
.official-len-head>span{min-width:0;overflow-wrap:anywhere}
.official-len-top{min-width:0}
.official-len-name{min-width:0;overflow-wrap:anywhere}
.official-len-diff{overflow-wrap:anywhere}
.official-chip{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
@media (max-width:900px){.official-bign-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.official-bign-grid{grid-template-columns:minmax(0,1fr)}}
/* Box score Detailed info: each section is one white box with a shaded heading bar. */
.official-box{border:1px solid var(--official-line);border-radius:13px;background:var(--official-panel);box-shadow:0 3px 12px color-mix(in srgb,var(--official-sidebar) 5%,transparent);overflow:hidden}
.official-box>.official-section-head{padding:15px 18px 12px;text-align:left;justify-content:flex-start;background:color-mix(in srgb,var(--official-background) 45%,var(--official-panel))}
.official-box>.official-section-head .official-h2{font-size:19px;color:var(--official-sidebar)}
.official-box>.official-section-head .official-sub{margin:0;max-width:none}
.official-box-body{padding:14px 16px 16px}
.official-box-body>.official-panel{border:0;box-shadow:none;padding:0;background:none}
/* Two sections side by side in equal-height boxes (site.layout.pairs); they stack on phones. */
.official-section-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.official-section-pair>.official-section{height:100%}
.official-section-pair>.official-section>.official-box{flex:1;display:flex;flex-direction:column}
.official-section-pair .official-box-body{flex:1}
.official-section-pair>.official-section>.official-panel{flex:1}
/* The shorter list of a pair spreads its rows over the height of the taller one (Alice has 7 channels, MLB 10). */
@media (min-width:768px){.official-section-pair .official-stack{flex:1}.official-section-pair .official-stack>.official-meter{flex:1;justify-content:center}.official-section-pair .official-stack>.official-line{flex:1;align-items:center}.official-section-pair .official-emoji-grid{flex:1}.official-section-pair .official-emoji{justify-content:center}}
@media (max-width:767px){.official-section-pair{grid-template-columns:minmax(0,1fr)}.official-section-pair>.official-section{height:auto}}
/* Short Line Writers as a table (box score look). */
.official-short-table .official-short-writer{width:46%}
.official-short-table .official-short-writer .official-who{font-weight:700;color:var(--official-sidebar)}
.official-short-table .official-count{margin-top:6px}
.official-short-table tbody tr:first-child{background:color-mix(in srgb,var(--official-lime) 14%,var(--official-panel))}
.official-short-when{color:var(--official-muted);white-space:nowrap}
.official-short-quote .official-quote{font:italic 12px/1.45 var(--official-font-body)}
.official-bign-quote p{font-style:italic}
/* Active Day Counts (render._days) as on the old pages: two lists side by side. */
.official-day-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:760px){.official-day-columns{grid-template-columns:minmax(0,1fr)}}
.official-day-column{display:flex;flex-direction:column;gap:8px;min-width:0}
.official-day-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.official-day-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;padding:7px 10px;border:1px solid transparent;border-radius:9px}
.official-day-row:nth-child(even){background:color-mix(in srgb,var(--official-line) 22%,var(--official-panel))}
.official-day-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.official-day-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;min-width:0}
.official-day-who{display:flex;flex-direction:column;min-width:0}
.official-day-name{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:12px;font-weight:700;overflow-wrap:anywhere}
.official-day-name .official-member-link{color:inherit;border-bottom:0}
.official-day-days{font-size:11px;font-weight:700}
.official-day-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;text-align:right}
.official-day-count{font-size:12px}
.official-day-share{font-size:11px;color:var(--official-muted)}
.official-day-pill{padding:1px 8px;border:1px solid var(--official-line);border-radius:999px;font-size:10px;color:var(--official-muted);background:var(--official-panel);white-space:nowrap}
.official-day-under{font-size:10px;color:var(--official-muted)}
.official-day-rank{padding-top:1px;text-align:center;font-size:11px;font-weight:700;color:var(--official-muted)}
.official-look-boxscore .official-day-column .official-h3{font-size:14px;color:var(--official-sidebar)}
.official-look-boxscore .official-day-name,.official-look-boxscore .official-day-days{color:var(--official-sidebar)}
.official-look-boxscore .official-day-first{border-color:var(--official-lime);background:color-mix(in srgb,var(--official-lime) 14%,var(--official-panel))}
/* Classic (old r/AliceInChains): one panel per list, round rank badges, accent names. */
.official-day-classic .official-day-column{padding:12px;border:1px solid var(--official-line);border-radius:12px;background:var(--official-panel)}
.official-day-classic .official-h3{font-size:12px;color:var(--official-text)}
.official-day-classic .official-day-rank{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--official-line);border-radius:50%;background:color-mix(in srgb,var(--official-line) 30%,var(--official-panel))}
.official-day-classic .official-day-first .official-day-rank{border-color:var(--official-lime);background:color-mix(in srgb,var(--official-lime) 25%,var(--official-panel))}
.official-day-classic .official-day-name{font-size:12px;color:var(--official-accent-ink)}
.official-day-classic .official-day-days{font-weight:400;font-size:11px;color:var(--official-muted)}
.official-day-classic .official-day-top{flex-wrap:nowrap}
.official-box-body>.official-table-panel{margin:-14px -16px -16px}
.official-short-table .official-rank-badge{width:22px;min-width:22px;height:22px;padding:0;border:1px solid var(--official-line);border-radius:50%;background:color-mix(in srgb,var(--official-line) 30%,var(--official-panel));font-size:10px}
.official-short-table tbody tr:first-child .official-rank-badge{border-color:var(--official-lime);background:color-mix(in srgb,var(--official-lime) 30%,var(--official-panel))}
/* Custom Statistics cards (sections/custom_stats.py card/row), term catalogue cards and Longest Messages. */
.official-cstat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
@media (max-width:760px){.official-cstat-grid{grid-template-columns:minmax(0,1fr)}}
.official-cstat-pair{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
@media (max-width:760px){.official-cstat-pair{grid-template-columns:minmax(0,1fr)}}
.official-cstat{display:flex;flex-direction:column;min-width:0;border:1px solid var(--official-line);border-radius:13px;background:var(--official-panel);overflow:hidden}
.official-cstat p{margin:0}
.official-cstat-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
.official-cstat-title{margin:0;font-size:14px;font-weight:700;line-height:1.3}
.official-cstat-topic{font-size:11px;color:var(--official-muted)}
.official-cstat-summary{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.official-cstat-total{font-size:20px;font-weight:700;line-height:1.1}
.official-cstat-total-label{font-size:10px;line-height:1.3;color:var(--official-muted);max-width:90px}
.official-cstat-method{font-size:11px;line-height:1.45;color:var(--official-muted)}
.official-cstat-list{list-style:none;margin:0;padding:0}
.official-cstat-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:0 10px;align-items:center;padding:7px 12px}
.official-cstat-body{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.official-cstat-primary{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0;flex:0 1 auto}
.official-cstat-name{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:13px;font-weight:700;overflow-wrap:anywhere}
.official-cstat-name .official-member-link{color:inherit;border-bottom:0}
.official-cstat-tag{padding:1px 7px;border-radius:8px;background:color-mix(in srgb,var(--official-teal) 13%,var(--official-panel));font-size:10px;font-weight:600;line-height:15px}
.official-cstat-secondary{font-size:11px;color:var(--official-muted);overflow-wrap:anywhere;flex:1 1 auto;min-width:0}
.official-cstat-bar{flex:0 0 100%;height:5px;margin-top:3px;border-radius:3px;background:color-mix(in srgb,var(--official-line) 70%,var(--official-panel));overflow:hidden}
.official-cstat-fill{display:block;height:100%;background:var(--official-accent)}
.official-cstat-count{font-size:15px;font-weight:700;text-align:right}
/* Box score (old r/MLBTheShow): shaded head with the total on the right, the method under it, round rank badges. */
.official-look-boxscore .official-cstat{border-radius:10px;border-color:color-mix(in srgb,var(--official-line) 70%,var(--official-panel))}
.official-look-boxscore .official-cstat-head{padding:10px 12px;background:color-mix(in srgb,var(--official-teal) 13%,var(--official-panel))}
.official-look-boxscore .official-cstat-title,.official-look-boxscore .official-cstat-total,.official-look-boxscore .official-cstat-count{color:var(--official-sidebar)}
.official-look-boxscore .official-cstat-method{padding:7px 12px}
.official-look-boxscore .official-cstat-row:nth-child(odd){background:color-mix(in srgb,var(--official-background) 45%,var(--official-panel))}
.official-look-boxscore .official-cstat-rank{display:grid;place-items:center;width:26px;height:26px;border:1px solid color-mix(in srgb,var(--official-lime) 50%,var(--official-panel));border-radius:50%;background:color-mix(in srgb,var(--official-lime) 12%,var(--official-panel));font-size:12px;font-weight:700;color:var(--official-sidebar)}
/* Classic (old r/AliceInChains): a banner title, topic and total as lines, the method last, "1." ranks, gold bars. */
.official-look-classic .official-cstat{border-radius:13px;box-shadow:0 2px 8px color-mix(in srgb,var(--official-sidebar) 5%,transparent)}
.official-look-classic .official-cstat-head,.official-look-classic .official-cstat-head>div{display:contents}
.official-look-classic .official-cstat-title{order:0;padding:9px 12px;border-bottom:2px solid var(--official-lime);background:color-mix(in srgb,var(--official-line) 55%,var(--official-panel));color:var(--official-accent-ink);text-align:center}
.official-look-classic .official-cstat-topic{order:1;padding:4px 12px 0;font-size:12px}
.official-look-classic .official-cstat-summary{order:2;display:block;padding:4px 12px 0;text-align:left;font-size:12px;font-weight:700;color:var(--official-muted)}
.official-look-classic .official-cstat-total,.official-look-classic .official-cstat-total-label{display:inline;font-size:12px;font-weight:700;color:inherit;max-width:none}
.official-look-classic .official-cstat-total::after{content:" "}
.official-look-classic .official-cstat-list{order:3;padding:0 12px}
.official-look-classic .official-cstat-method{order:4;padding:2px 12px 10px}
.official-look-classic .official-cstat-row{grid-template-columns:24px minmax(0,1fr) auto;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--official-line) 50%,var(--official-panel))}
.official-look-classic .official-cstat-rank{text-align:right;font-size:13px;color:var(--official-muted)}
.official-look-classic .official-cstat-rank::after{content:"."}
.official-look-classic .official-cstat-name{font-size:14px;color:var(--official-accent-ink)}
.official-look-classic .official-cstat-bar{height:6px;border-radius:999px}
.official-look-classic .official-cstat-fill{background:var(--official-lime);border-radius:999px}
.official-look-classic .official-cstat-count{font-size:14px}
/* Term catalogues (sections/terms.py) as their own section: one list per category, wide lists span the section. */
.official-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.official-term-column{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px;border:1px solid var(--official-line);border-radius:12px;background:var(--official-panel)}
.official-term-wide{grid-column:1/-1}
.official-terms-cols-1{grid-template-columns:minmax(0,1fr)}
.official-terms-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.official-terms-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.official-terms-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.official-terms-cols-2,.official-terms-cols-3{grid-template-columns:minmax(0,1fr)}}
.official-term-cat-note{font-weight:400;color:var(--official-muted)}
.official-term-list{list-style:none;margin:0;padding:0}
.official-term-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--official-line) 50%,var(--official-panel))}
.official-term-row:last-child{border-bottom:0}
/* A list shorter than the one beside it: bigger artwork (--official-term-art, from terms.fill_art) and rows spread
   over the matched height; stacked on phones, artwork is at most 48px. */
.official-term-list-fill{flex:1;display:flex;flex-direction:column}
.official-term-list-fill .official-term-row{flex:1 0 auto}
.official-term-list-fill .official-term-art{width:var(--official-term-art);height:var(--official-term-art);border-radius:10px}
@media (max-width:640px){.official-term-list-fill .official-term-art{width:min(var(--official-term-art),48px);height:min(var(--official-term-art),48px);border-radius:8px}}
.official-term-rank{flex:none;min-width:20px;text-align:right;font-size:12px;color:var(--official-muted)}
.official-term-body{flex:1;min-width:0}
.official-term-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.official-term-name{font-size:13px;font-weight:700}
.official-term-count{flex:none;font-size:13px;font-weight:700}
.official-term-secondary{display:block;font-size:11px;color:var(--official-muted);overflow-wrap:anywhere}
.official-term-bar{height:5px;margin-top:4px;border-radius:999px;background:color-mix(in srgb,var(--official-line) 70%,var(--official-panel));overflow:hidden}
.official-term-fill{display:block;height:100%;background:var(--official-lime)}
.official-look-boxscore .official-term-fill{background:var(--official-accent)}
.official-look-boxscore .official-term-name,.official-look-boxscore .official-term-count{color:var(--official-sidebar)}
.official-look-classic .official-term-name{color:var(--official-accent-ink)}
/* Average Message Length (render._lengths) as on the old pages. */
.official-panel.official-len-panel{padding:0;overflow:hidden}
.official-len-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px;border-bottom:2px solid var(--official-lime);background:color-mix(in srgb,var(--official-line) 55%,var(--official-panel));font-size:12px;font-weight:700;color:var(--official-accent-ink)}
.official-len-head strong{font-size:20px}
.official-len-head span:last-child{font-size:11px;font-weight:400}
.official-len-note{margin:0;padding:8px 12px 4px;text-align:center;font-size:11px;color:var(--official-muted)}
.official-len-list{list-style:none;margin:0;padding:0}
.official-len-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;padding:8px 10px;border-bottom:1px solid color-mix(in srgb,var(--official-line) 50%,var(--official-panel))}
.official-len-row:nth-child(even){background:color-mix(in srgb,var(--official-line) 22%,var(--official-panel))}
.official-len-rank{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--official-line);border-radius:50%;font-size:11px;color:var(--official-muted)}
.official-len-row:first-child .official-len-rank{border-color:var(--official-lime);background:color-mix(in srgb,var(--official-lime) 25%,var(--official-panel))}
.official-len-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.official-len-top{display:flex;justify-content:space-between;gap:8px}
.official-len-name{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:12px;font-weight:700;color:var(--official-accent-ink)}
.official-len-name .official-member-link{color:inherit;border-bottom:0}
.official-len-value{flex:none;font-size:10px;color:var(--official-muted)}
.official-len-value strong{font-size:11px;color:var(--official-text)}
.official-len-diff{font-size:10px;color:var(--official-muted)}
.official-look-classic .official-cstat-title{text-align:left}
.official-look-boxscore .official-cstat-head{border-bottom:2px solid var(--official-lime)}
/* Word Stats (sections/words.py) and Short Message Leaders as the old pages' tables. */
.official-words{display:flex;flex-direction:column;gap:14px}
.official-words-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:760px){.official-words-pairs{grid-template-columns:minmax(0,1fr)}}
.official-words-block{min-width:0;border:1px solid var(--official-line);border-radius:12px;background:var(--official-panel);overflow:hidden}
.official-words-block>.official-h3{padding:10px 12px;font-size:13px}
.official-words-note{font-weight:400;font-size:11px;color:var(--official-muted)}
.official-words-table{font-size:12px}
.official-words-table th{padding:8px 10px;font-size:11px}
.official-words-table td{padding:7px 10px;overflow-wrap:anywhere}
.official-words-table .official-member-link{color:inherit;border-bottom:0}
.official-look-classic .official-words-block>.official-h3{border-bottom:2px solid var(--official-lime);background:color-mix(in srgb,var(--official-line) 55%,var(--official-panel));color:var(--official-accent-ink)}
.official-short-classic .official-quote{font:italic 12px/1.4 Georgia,'Times New Roman',serif}
/* Personal stats cards (sections/members.py) as on the old pages. */
.official-panel.official-card{padding:0;gap:0;border-radius:10px;overflow:hidden}
.official-card-head{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;margin:0;padding:7px 11px;border-radius:0;border-bottom:1px solid var(--official-line);background:color-mix(in srgb,var(--official-line) 30%,var(--official-panel))}
.official-card-rank{display:grid;place-items:center;width:32px;height:32px;min-width:0;padding:0;border-radius:8px;background:var(--official-lime);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--official-lime) 80%,#000);color:var(--official-sidebar);font-size:13px;font-weight:800}
.official-card-identity{min-width:0}
.official-card-identity .official-who{flex-wrap:wrap;gap:2px 6px}
.official-card-name{margin:0;font-size:17px;font-weight:700;color:var(--official-lime-ink)}
.official-aka{margin:2px 0 0;font-size:12.5px;color:var(--official-muted)}
.official-profile-link{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border:1px solid var(--official-line);border-radius:999px;background:var(--official-panel);color:var(--official-text);font-size:11px}
.official-profile-link:hover{text-decoration:none;border-color:var(--official-accent)}
.official-card-headline{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 12px;font-size:11px;color:var(--official-muted);text-align:right}
.official-card-headline strong{color:var(--official-accent-ink)}
.official-card .official-metrics{gap:5px;padding:7px 10px}
.official-card .official-metric{padding:5px 7px;border-radius:6px}
.official-card .official-metric dt{font-size:11px;letter-spacing:.035em}
.official-card .official-metric dd{font:700 14px/1.25 var(--official-font-body)}
.official-card .official-charts{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:6px 10px 8px}
.official-card .official-chart{padding:7px;border-radius:7px;gap:4px;background:color-mix(in srgb,var(--official-line) 18%,var(--official-panel))}
.official-card .official-chart .official-h3{font-size:13px;color:var(--official-accent-ink)}
.official-card .official-plot{height:56px}
.official-card .official-part-0{background:color-mix(in srgb,var(--official-accent) 65%,#000)}
.official-card .official-part-1{background:var(--official-teal)}
.official-card .official-part-2{background:color-mix(in srgb,var(--official-teal) 60%,var(--official-lime))}
.official-card .official-part-3{background:var(--official-lime)}
.official-card-lower{padding:6px 10px 10px;gap:8px}
.official-card-part .official-h3{font-size:12px;color:var(--official-accent-ink)}
.official-card .official-chip{padding:2px 8px;font-size:11px}
.official-recent th{padding:4px 16px 4px 8px;font-weight:400;text-align:left;white-space:nowrap;border-top:1px solid var(--official-line);vertical-align:top}
.official-recent td{padding:4px 8px}
@media (max-width:760px){.official-card-head{grid-template-columns:32px minmax(0,1fr)}.official-card-headline{grid-column:1/-1;justify-content:flex-start;text-align:left}.official-card .official-charts{grid-template-columns:minmax(0,1fr)}}
.official-card-joined{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--official-line);border-radius:999px}
.official-card:not(:first-child) .official-card-rank,.official-cards>.official-card~.official-card .official-card-rank{background:var(--official-accent);box-shadow:none;color:var(--official-on-accent)}
.official-look-boxscore .official-cards>.official-card~.official-card .official-card-rank{background:var(--official-sidebar);color:var(--official-sidebar-text)}
.official-look-boxscore .official-card-name{color:var(--official-sidebar)}
.official-look-boxscore .official-card-head{background:var(--official-panel)}
.official-look-boxscore .official-card .official-part-0{background:color-mix(in srgb,var(--official-sidebar) 70%,var(--official-accent))}
.official-look-boxscore .official-card .official-part-1{background:var(--official-accent)}
.official-look-boxscore .official-card .official-part-2{background:var(--official-teal)}
.official-look-boxscore .official-card .official-part-3{background:color-mix(in srgb,var(--official-teal) 45%,#fff)}
.official-look-boxscore .official-card .official-chart{background:var(--official-panel)}
.official-look-boxscore .official-card .official-chart .official-h3,.official-look-boxscore .official-card-part .official-h3{color:var(--official-sidebar)}
.official-look-boxscore .official-card-part:first-child{padding:8px;border:1px solid var(--official-line);border-radius:7px}
.official-look-boxscore .official-members-head{background:none;border:0;box-shadow:none;padding:0}
.official-look-boxscore .official-search>.official-label{color:var(--official-sidebar);font-size:13px}
.official-card .official-ticks{font-size:9px}
.official-look-boxscore .official-recent-title{text-transform:lowercase}
.official-look-boxscore .official-recent-title::first-letter{text-transform:uppercase}
/* Phones: the Reporting Period menu sits in the top-right corner over the art, as on the old pages. */
@media (max-width:760px){.official-top{position:relative;padding-top:44px}.official-period-box{position:absolute;top:6px;right:8px}.official-period-control{min-height:30px}}
/* Phones: a long name, many badges or a long headline wrap inside the card head instead of widening the page. */
@media (max-width:480px){.official-card-head{grid-template-columns:32px minmax(0,1fr)}.official-card-head>.official-card-headline{grid-column:1 / -1;justify-content:flex-start;text-align:left}.official-card-identity,.official-card-name{min-width:0;overflow-wrap:anywhere}.official-card-identity .official-who{min-width:0}}

/* Sticky bar on phones: compact. Smaller art, one slim row for Last Updated and the menu, links scroll sideways inside the bar. */
@media (max-width:760px){
html{scroll-padding-top:var(--official-sticky-h,150px)}
.official-top{position:static;padding:6px 10px 0;gap:4px 8px}
.official-header-art img{max-height:38px}
.official-top-title{font-size:22px}
.official-top-sub{font-size:10px}
.official-top-left{padding:4px 0 6px;font-size:10px}
.official-top-right{flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:nowrap;padding:4px 0 6px;gap:6px}
.official-period-box{position:static}
.official-period-control{min-height:28px;padding:0 8px;font-size:12px}
.official-support{margin-top:0;padding:6px 8px}
.official-support-label{display:none}
.official-tab{padding:3px 2px}
.official-section-links{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:4px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.official-section-links a,.official-look-boxscore .official-section-links a{flex:1 0 auto;white-space:nowrap;text-align:center;padding:3px 3px;font-size:10.5px;letter-spacing:0}
/* Phone banner: one fixed, slimmer size (no shrink on scroll). Art, tab row and the Last Updated / menu row are all tighter. */
.official-top{padding:4px 10px 0;gap:3px 8px}
.official-header-art img{max-height:26px}
.official-tabs{gap:3px;padding:0}
.official-tab{padding:2px 2px;font-size:10.5px;line-height:1.15}
.official-top-left{padding:2px 0 4px}
.official-top-right{padding:2px 0 4px}
.official-period-control{min-height:26px}
.official-support{padding:4px 7px}
}
/* Classic look Big Numbers: column count follows the number of small cards; cards in a row share one height. */
.official-bign-cols-1{grid-template-columns:minmax(0,1fr)}
.official-bign-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.official-bign-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.official-bign-grid{align-items:stretch}
@media (max-width:1100px){.official-bign-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.official-bign-grid.official-bign-cols-2,.official-bign-grid.official-bign-cols-4{grid-template-columns:minmax(0,1fr)}}
/* Classic look phone: the four page tabs on one line (narrower than 370px they wrap as before). */
@media (min-width:370px) and (max-width:760px){
.official-look-classic .official-tabs{display:flex;flex-wrap:nowrap;gap:2px}
.official-look-classic .official-tab{flex:1 1 auto;min-width:0;white-space:nowrap;padding:3px 2px;font-size:10px;letter-spacing:-.015em}
}
/* Box score look: every section card has the same header band, and its text never wraps. */
.official-look-boxscore .official-cstat-head{box-sizing:border-box;height:58px;overflow:hidden}
.official-look-boxscore .official-cstat-head>div,.official-look-boxscore .official-cstat-summary{min-width:0}
.official-look-boxscore .official-cstat-title,.official-look-boxscore .official-cstat-topic{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.official-look-boxscore .official-cstat-total,.official-look-boxscore .official-cstat-total-label{white-space:nowrap;max-width:none}
@media (min-width:901px){.official-look-boxscore .official-cstat-method{box-sizing:border-box;min-height:46px}}
.official-look-boxscore .official-tiles-light .official-tile{border-top-color:var(--official-accent)}
/* Recent Activity: the bar divider sits centred in the gap between the time column and the message text below */
.official-recent th{box-sizing:border-box;width:124px;min-width:124px}
.official-card-bar>.official-recent-title{box-sizing:content-box;min-width:106px}
@media (max-width:640px){.official-card-bar>.official-recent-title{min-width:0}}
/* Word tables on phones: the word sample (and Most Used's "Last used by"/"At") take a full row instead of the narrow first column */
@media (max-width:760px){.official-words-table td:nth-child(n+3){grid-column:1/-1}.official-words-table td:nth-child(n+3):not(:last-child),.official-words-table td:nth-child(4){color:var(--official-muted)}.official-words-table td:nth-child(3):last-child{color:inherit;line-height:1.5}}
/* Box score look Word Stats in the site's colours: a tinted heading band with a gold rule, bold counts, words in the accent colour */
.official-look-boxscore .official-words-block>.official-h3{border-bottom:2px solid var(--official-lime);background:color-mix(in srgb,var(--official-teal) 13%,var(--official-panel));color:var(--official-sidebar)}
.official-look-boxscore .official-words-table td:first-child{font-weight:700;color:var(--official-sidebar)}
.official-look-boxscore .official-word{font-weight:700;color:var(--official-accent)}
.official-word-n{color:var(--official-muted)}
/* Box score look on phones: stacked rows without the desktop cell rules; Short Line Writers is rank, then the writer,
   time and quote in one column beside it */
@media (max-width:760px){
.official-look-boxscore .official-words-table td,.official-look-boxscore .official-short-table td{padding:0;border-bottom:0}
.official-look-boxscore .official-words-table tr{gap:3px 10px;padding:9px 12px}
.official-short-boxscore tr{gap:3px 10px;padding:10px 12px}
.official-short-boxscore td.official-short-writer{width:auto}
.official-short-boxscore td.official-short-when,.official-short-boxscore td.official-short-quote{grid-column:2}
.official-short-boxscore td.official-short-when{font-size:11px}
}
/* Word Stats on phones, both looks: Short Message Leaders/Short Line Writers and the ranked word tables as the Custom
   Statistics list: rank (short table only), name or word and count on one line, a bar for the row's share (--share)
   under it, then the quote and time, "last used by" and time, or the word sample in small type */
@media (max-width:760px){
.official-body .official-short-classic tbody tr,.official-body .official-words-ranked tbody tr{grid-template-columns:24px minmax(0,1fr) auto;gap:3px 10px;align-items:baseline;padding:8px 12px;background:none;border-top:0;border-bottom:1px solid color-mix(in srgb,var(--official-line) 50%,var(--official-panel))}
.official-body .official-words-ranked tbody tr{grid-template-columns:minmax(0,1fr) auto}
.official-body .official-short-classic tbody tr::after,.official-body .official-words-ranked tbody tr::after{content:"";grid-row:2;height:6px;border-radius:999px;background:linear-gradient(to right,var(--official-lime) var(--share,0%),color-mix(in srgb,var(--official-line) 70%,var(--official-panel)) var(--share,0%))}
.official-body .official-short-classic tbody tr::after{grid-column:2/-1}
.official-body .official-words-ranked tbody tr::after{grid-column:1/-1}
.official-body .official-short-classic td,.official-body .official-words-ranked td{padding:0;border:0;width:auto;min-width:0}
.official-body .official-short-classic td:nth-child(1){grid-row:1;grid-column:1;text-align:right;font-size:13px;color:var(--official-muted)}
.official-body .official-short-classic td:nth-child(1)::after{content:"."}
.official-body .official-short-classic td:nth-child(2),.official-body .official-words-ranked td:nth-child(2){grid-row:1;grid-column:2;font-size:14px;font-weight:700;color:var(--official-accent-ink)}
.official-body .official-words-ranked td:nth-child(2){grid-column:1}
.official-body .official-short-classic td:nth-child(3),.official-body .official-words-ranked td:nth-child(1){grid-row:1;grid-column:3;font-size:14px;font-weight:700;text-align:right;color:var(--official-text)}
.official-body .official-words-ranked td:nth-child(1){grid-column:2}
.official-body .official-short-classic .official-member-link,.official-body .official-words-ranked td:nth-child(2) .official-member-link{color:inherit;border-bottom:0}
.official-body .official-short-classic td:nth-child(5){grid-row:3;grid-column:2}
.official-body .official-short-classic td:nth-child(4),.official-body .official-words-ranked td:nth-child(4){grid-row:3;grid-column:3;font-size:11px;color:var(--official-muted);text-align:right;white-space:nowrap}
.official-body .official-words-ranked td:nth-child(4){grid-column:2}
.official-body .official-words-ranked td:nth-child(3){grid-row:3;grid-column:1;font-size:12px;line-height:1.45;color:var(--official-muted)}
.official-body .official-words-ranked td:nth-child(3):last-child{grid-column:1/-1}
.official-look-boxscore .official-short-classic tbody tr::after,.official-look-boxscore .official-words-ranked tbody tr::after{background:linear-gradient(to right,var(--official-accent) var(--share,0%),color-mix(in srgb,var(--official-line) 70%,var(--official-panel)) var(--share,0%))}
.official-look-boxscore .official-short-classic td:nth-child(2),.official-look-boxscore .official-words-ranked td:nth-child(2),.official-look-boxscore .official-short-classic td:nth-child(3),.official-look-boxscore .official-words-ranked td:nth-child(1){color:var(--official-sidebar)}
.official-look-boxscore .official-words-ranked td:nth-child(2) .official-word{color:var(--official-accent)}
}
/* Main page on phones, both looks: Top Chatters/User Stats and Top 20 Chat Partners as the Custom Statistics list.
   Top Chatters: rank, name and badges, and the count on one line, the bar under it, then the quote (kept at reading
   size) with its time small on the right. Chat Partners: rank, the pair and the reply count, the bar, then the score. */
@media (max-width:760px){
.official-body .official-users tbody tr,.official-body .official-pairs-table tbody tr{grid-template-columns:30px minmax(0,1fr) auto;gap:5px 10px;align-items:center;padding:10px 12px}
.official-body .official-users tbody td,.official-body .official-pairs-table tbody td{padding:0;border:0;width:auto;min-width:0;text-align:left}
.official-body .official-users td[data-label]::before,.official-body .official-pairs-table td[data-label="Replies"]::before{content:none}
.official-body .official-users td.official-rank-cell,.official-body .official-pairs-table td.official-rank-cell{grid-row:1;grid-column:1;align-self:start}
.official-body .official-users td.official-name-cell,.official-body .official-pairs-table td.official-name-cell{grid-row:1;grid-column:2;align-self:start;min-height:26px;display:flex;flex-direction:column;justify-content:center;font-size:14px}
.official-body .official-users td.official-count-cell,.official-body .official-users .official-count{display:contents}
.official-body .official-users .official-count strong,.official-body .official-pairs-table td[data-label="Replies"]{grid-row:1;grid-column:3;align-self:start;line-height:26px;font-size:14px;font-weight:700;text-align:right;color:var(--official-text)}
.official-body .official-users .official-track,.official-body .official-pairs-table td.official-bar-cell{grid-row:2;grid-column:2/-1;align-self:center;margin:0}
.official-body .official-pairs-table td.official-bar-cell .official-track{margin:0}
.official-body .official-users td.official-quote-cell{grid-row:3;grid-column:2;align-self:start}
.official-body .official-users td.official-quote-cell .official-quote{font-size:14px;line-height:1.4}
.official-body .official-users td.official-quote-time{grid-row:3;grid-column:3;align-self:start;padding-top:2px;font-size:11px;font-weight:400;color:var(--official-muted);text-align:right;white-space:nowrap}
.official-body .official-pairs-table td[data-label="Score"]{grid-row:3;grid-column:2/-1;font-size:11px;color:var(--official-muted)}
.official-body .official-users .official-who .official-booster{margin-top:3px}
}
/* Active Day Counts on phones, both looks: the name and its day count take the full width, then the bar, then the
   date line with the status pill or share after it (beside it if it fits), instead of the pill squeezing the name */
@media (max-width:760px){
.official-body .official-day-main{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px}
.official-body .official-day-top{display:contents}
.official-body .official-day-who{flex:0 0 100%;order:1;min-width:0}
.official-body .official-day-main>.official-track{flex:0 0 100%;order:2;margin:0}
.official-body .official-day-under{order:3;margin:0}
.official-body .official-day-side{order:4;margin-left:auto}
}
/* Personal stats cards on phones: the six stats three to a row with short labels ("Lines/day"), and each recent
   message beside its date instead of under it */
.official-metric-short{display:none}
@media (max-width:640px){
.official-body .official-card .official-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.official-body .official-card .official-metric{padding:5px 6px}
.official-body .official-card .official-metric dt{font-size:10px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.official-body .official-metric-long{display:none}
.official-body .official-metric-short{display:inline}
.official-body .official-recent-full tr{grid-template-columns:auto minmax(0,1fr);align-items:baseline}
.official-body .official-recent-full th{width:auto;min-width:0;padding:5px 8px 5px 6px;font-size:11px;color:var(--official-muted);border-top:0}
.official-body .official-recent-full td.official-recent-text{grid-column:2;padding:5px 6px 5px 0}
.official-body .official-card .official-charts{gap:6px}
.official-body .official-card .official-chart{padding:6px 8px}
.official-body .official-card .official-plot{height:42px}
.official-body .official-card .official-chart>figcaption{margin-bottom:4px}
}
/* Server Boosters on phones: the three stat tiles side by side as small tiles (icon, label, number, tier bars) */
@media (max-width:640px){
.official-boosters .official-boost-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.official-boosters .official-boost-stat,.official-boosters .official-boost-stat-level{grid-column:auto;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:10px 6px;text-align:center}
.official-boosters .official-boost-icon{width:36px;height:36px}.official-boosters .official-boost-icon svg{width:18px;height:18px}
.official-boosters .official-boost-stat-label{white-space:normal;font-size:10px;line-height:12px}
.official-boosters .official-boost-stat .official-big{font-size:26px}
.official-boosters .official-boost-stat-note{display:none}
.official-boosters .official-boost-stat-foot{justify-content:center}
.official-boosters .official-boost-stat-level .official-big{font-size:22px;white-space:nowrap}
.official-boosters .official-boost-stat-level .official-boost-word{font-size:16px}
.official-boosters .official-boost-stat-foot{margin-top:6px}
.official-boosters .official-boost-tier{gap:3px;margin:0}
.official-boosters .official-boost-tier i{width:14px;height:6px}
}

/* Contrast guardrails (theme.py derives --official-edge, -muted and the *-ink colours from the site's own palette, moving only
   lightness): boxes keep a 3:1 edge against what is behind them, and every heading, label and pill reads at 4.5:1. */
.official-panel,.official-tiles-light .official-tile{border-color:var(--official-edge)}
.official-boosters{--bz-ink:var(--official-text);--bz-line:var(--official-edge);--bz-red-ink:var(--official-accent-ink)}
.official-boost-title span,.official-boost-stat .official-big,.official-boosters .official-boost-thanks h3,.official-boost-group{color:var(--bz-red-ink)}
.official-boost-stat,.official-boost-thanks{border-color:var(--official-edge)}
.official-boost-card{color:var(--official-text);border-color:var(--official-edge);
background:linear-gradient(170deg,color-mix(in srgb,var(--official-accent-ink) 6%,var(--official-panel)),color-mix(in srgb,var(--official-accent-ink) 14%,var(--official-panel)));
box-shadow:0 calc(3*var(--u)) calc(10*var(--u)) color-mix(in srgb,var(--official-text) 14%,transparent)}
.official-boost-name{color:var(--official-text)}
.official-boost-card .official-boost-pill{border-color:var(--official-accent-ink);background:transparent;color:var(--official-accent-ink)}
.official-boost-pill .official-gem,.official-boost-since svg{color:var(--official-accent-ink)}
.official-boost-since{color:var(--official-muted)}
.official-boost-card .official-avatar{border-color:var(--official-edge);box-shadow:none}
.official-boost-card .official-boost-profile{color:var(--official-panel);background:var(--official-accent-ink);border-color:var(--official-accent-ink);box-shadow:none}
.official-boost-count{background:var(--official-accent-ink);color:var(--official-panel);border-color:var(--official-accent-ink);box-shadow:none}
.official-boost-count .official-gem{color:var(--official-panel)}
/* Headings, names and rank numbers that used a raw palette fill as text colour: use the readable ink derived from it. */
.official-h2,.official-showcase-go{color:var(--official-lime-ink)}
.official-headings-text .official-h2{color:var(--official-text)}
.official-section:has(.official-tod-cards) .official-h2,.official-box>.official-section-head .official-h2,
.official-tod-cards .official-tod-title,.official-tod-cards .official-tod-name{color:var(--official-sidebar-ink)}
.official-tod-cards .official-tod-rank,.official-tod-columns .official-tod-row:first-child .official-tod-rank,
.official-day-first .official-day-rank,.official-len-row:first-child .official-len-rank{color:var(--official-text)}
.official-top-title,.official-tiles-dark .official-tile-value{color:var(--official-lime-on-side)}
.official-card:first-child .official-card-rank{color:var(--official-on-lime)}
.official-showcase-title,.official-showcase-host,.official-showcase-badge,.official-look-classic .official-cstat-title,.official-look-classic .official-words-block>.official-h3{color:var(--official-accent-ink)}
/* Booster card: the text column shrinks and the "Boosting since" date wraps, so nothing runs under the View Profile button. */
.official-boost-body{min-width:0;flex:1 1 0}
.official-boost-since{white-space:normal;align-items:flex-start;min-width:0;max-width:100%;overflow-wrap:anywhere;line-height:1.25}
.official-boost-card{height:auto;min-height:calc(108*var(--u));padding-top:calc(8*var(--u));padding-bottom:calc(8*var(--u))}

/* A selected wide banner fills the phone header instead of inheriting the compact logo's height cap.
   Keep its full aspect ratio; the more-specific selector also wins over optional effects. */
@media (max-width:760px){
.official-top .official-header-art-wide{width:100%;min-width:0}
.official-top .official-header-art-wide img{width:100%;height:auto;max-width:100%!important;max-height:none!important;object-fit:contain}
}

/* Equal-width phone navigation for every server and saved tab shape.
   Fit and spacing only: preserve chosen pill, underline or block styling and colours. */
@media (max-width:760px){
html body .official-top .official-tabs{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:minmax(0,1fr);gap:4px!important;width:100%;padding:2px 0 0!important}
html body .official-top .official-tab{min-width:0;min-height:28px!important;padding:4px 2px!important;margin:0!important;font-size:10px!important;letter-spacing:0!important;white-space:normal!important;overflow-wrap:anywhere;line-height:1.2!important;text-align:center}
}