.trust-doc{max-width:760px;margin:0 auto;padding:8px 20px 0;font-size:1.06rem;line-height:1.75}
.trust-doc h2{font-family:var(--serif);font-size:1.5rem;margin:32px 0 12px;letter-spacing:-.01em}
.trust-doc p{margin:0 0 16px;color:var(--fg)}
.trust-doc a{color:var(--emerald-ink);text-decoration:underline;text-underline-offset:2px}
.trust-edit{max-width:760px;margin:20px auto 0;padding:0 20px}
.trust-nav{max-width:760px;margin:30px auto 0;padding:18px 20px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px}
.trust-nav a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600}
.trust-nav a:hover{color:var(--emerald-ink)}
.corr-list{max-width:760px;margin:0 auto;padding:0 20px}
.corr-item{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
.corr-item:first-child{border-top:0}
.corr-date{font-family:var(--mono);font-size:.8rem;color:var(--muted);white-space:nowrap;min-width:92px;padding-top:2px}
.corr-body{flex:1;min-width:0}.corr-body b{font-size:1.05rem}.corr-body p{margin:6px 0 0;color:var(--muted);line-height:1.6}
.corr-link{display:inline-block;margin-top:8px;font-size:.85rem;color:var(--emerald-ink);font-weight:600}

.bp-ban{position:relative;width:100%;height:clamp(180px,30vw,340px);overflow:hidden}
.bp-ban img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bp-ban-fallback{position:absolute;inset:0;background:linear-gradient(128deg,#3A1220 0%,#232323 38%,#1B1B1B 62%,#313131 86%,#2D2D2D 100%)}
.bp-ban-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.10),rgba(18,18,18,.55))}
.bp-head{display:flex;align-items:flex-start;gap:20px;margin-top:-56px;position:relative;z-index:2;flex-wrap:wrap}
.bp-avwrap{flex:none}
.bp-av{display:grid;place-items:center;width:124px;height:124px;border-radius:50%;background:#fff;border:5px solid var(--bg);box-shadow:0 12px 34px rgba(18,18,18,.24);overflow:hidden}
.bp-av img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:50%}
.bp-av.icon img{width:60%;height:60%;object-fit:contain;border-radius:0}
.bp-meta{flex:1;min-width:230px;padding-top:64px}
.bp-name{font-family:var(--serif);font-size:clamp(1.6rem,4.4vw,2.35rem);margin:0;letter-spacing:-.02em;line-height:1.15;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bp-vtick{display:inline-flex;color:rgb(var(--rb-verify))}
.bp-vtick svg{width:26px;height:26px;display:block}
.bp-sub{margin:6px 0 0;color:var(--muted);font-size:.94rem}
.bp-sub a{color:var(--emerald-ink);font-weight:600;text-decoration:none}
.bp-about{margin:10px 0 0;font-size:.95rem;line-height:1.65;max-width:620px}
.bp-cta{flex:none;align-self:center;margin-top:64px}
.bp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:22px 0 24px}
.bp-kpi{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--card);box-shadow:var(--raise)}
.bp-kpi b{display:block;font-family:var(--mono);font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}
.bp-kpi span{display:block;margin-top:3px;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
@media(max-width:640px){
  .bp-head{margin-top:-44px;gap:14px}
  .bp-av{width:96px;height:96px;border-width:4px}.bp-av.icon img{width:56%;height:56%}
  .bp-meta{padding-top:0;min-width:100%;margin-top:6px}
  .bp-cta{margin-top:4px;width:100%;justify-content:center}
  .bp-name{font-size:1.55rem}.bp-vtick svg{width:21px;height:21px}
  .bp-kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .bp-kpi{padding:12px 14px}.bp-kpi b{font-size:1.25rem}
}
.bp-sum{margin-bottom:22px}
.bp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.bp-chip{font-size:.8rem;font-weight:700;padding:5px 12px;border-radius:999px}
.bp-chip.pos{background:color-mix(in srgb,#0E9F6E 13%,transparent);color:#0B7A55}
.bp-chip.neg{background:color-mix(in srgb,#E8730B 15%,transparent);color:#A85408}
.bp-table-wrap{margin-bottom:8px}
.bp-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);background:var(--card);box-shadow:var(--raise)}
.bp-table th,.bp-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.bp-table th:last-child,.bp-table td:last-child{border-right:0}
.bp-table tbody tr:last-child td{border-bottom:0}
.bp-table th{background:var(--navy,#252525);color:#fff;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:0;border-right-color:rgba(255,255,255,.16)}
.bp-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--fg) 3%,transparent)}
@media(max-width:760px){
  .bp-table,.bp-table tbody,.bp-table tr,.bp-table td{display:block;width:100%}
  .bp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bp-table{border:0;background:0;box-shadow:none}
  .bp-table tr{border:1px solid var(--line);background:var(--card);box-shadow:var(--raise);margin-bottom:10px;padding:12px 14px}
  .bp-table tbody tr:nth-child(even) td{background:transparent}
  .bp-table td{border:0;padding:5px 0;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .bp-table td.bp-param{font-family:var(--serif);font-size:1.06rem;font-weight:700;padding:0 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line);display:block}
  .bp-table td[data-label]::before{content:attr(data-label);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;flex:none}
  .bp-table td.bp-score{font-size:1.2rem}
  .bp-star{font-size:1.05rem}
}
.bp-score{font-family:var(--mono);font-weight:700;font-size:1.1rem;white-space:nowrap}
.bp-score small{color:var(--muted);font-weight:400;font-size:.75rem}
.bp-n{font-family:var(--mono);color:var(--muted);font-size:.88rem}
.bp-star{color:var(--line);font-size:1rem;letter-spacing:1px}
.bp-star.on{color:#F5A623}.bp-star.half{color:#F5A623;opacity:.55}
.bp-nostar{color:var(--muted);font-size:.82rem}
.bp-note{font-size:.8rem;color:var(--muted);margin:10px 0 0;line-height:1.6}
.bp-reviews{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.bp-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.bp-reviews{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bp-rcard{position:relative;overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--tone) 9%,var(--card)),var(--card) 62%);border:1px solid color-mix(in srgb,var(--tone) 26%,var(--line));border-radius:18px;padding:18px;--tone:#747474}
.bp-rcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--tone),transparent 78%)}
.bp-rcard:nth-child(6n+1){--tone:rgb(var(--rb-red-solid))}.bp-rcard:nth-child(6n+2){--tone:#2B2B2F}.bp-rcard:nth-child(6n+3){--tone:#8A8A8E}
.bp-rcard:nth-child(6n+4){--tone:#A7141E}.bp-rcard:nth-child(6n+5){--tone:#4A4A4F}.bp-rcard:nth-child(6n+6){--tone:#6B6B70}
.bp-rtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.bp-tag{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);color:var(--tone);border:1px solid color-mix(in srgb,var(--tone) 34%,var(--line));border-radius:999px;padding:2px 8px}
.bp-rago{margin-left:auto;font-size:.76rem;color:var(--muted)}
.bp-rchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.bp-rchip{font-family:var(--mono);font-size:.7rem;color:var(--muted);background:color-mix(in srgb,var(--fg) 5%,transparent);border-radius:5px;padding:3px 8px}
.bp-rtext{margin:0;font-size:.95rem;line-height:1.6}
.bp-block{margin:0 auto 44px}
.bp-shead{margin-bottom:20px}
.bp-shead .sec-h{margin:0}
.bp-sdesc{margin:6px 0 0;color:var(--muted);font-size:.9rem;line-height:1.55}
.bp-sum{margin-bottom:40px!important}
.bp-table-wrap{margin-top:2px}
.bp-note{margin-top:16px!important;padding-top:14px;border-top:1px solid var(--line)}
.bp-reviews{margin-top:2px}
.bp-rcard{transition:transform .18s var(--ease),box-shadow .22s var(--ease)}
.bp-rcard:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(37,37,37,.13)}
.bp-kpi{transition:transform .18s var(--ease),box-shadow .22s var(--ease)}
.bp-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,37,37,.12)}
.bp-table tbody tr{transition:background .15s}
.bp-table tbody tr:hover td{background:color-mix(in srgb,var(--emerald) 5%,transparent)}
.bp-av{transition:transform .3s var(--ease)}
.bp-av:hover{transform:scale(1.04)}
.bp-back a{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:1px solid var(--line);border-radius:999px;background:var(--card);transition:border-color .18s,transform .18s var(--ease)}
.bp-back a:hover{border-color:color-mix(in srgb,var(--emerald) 45%,var(--line));transform:translateY(-2px)}
.bp-back a .ic{transform:rotate(180deg)}
@media(max-width:760px){.bp-block{margin-bottom:34px}.bp-sum{margin-bottom:30px!important}.bp-shead{margin-bottom:16px}}
.bp-more{display:flex;align-items:center;justify-content:center;gap:10px;padding:22px 0;color:var(--muted);font-size:.88rem}
.bp-more.done{display:none}
.bp-spin{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--emerald);border-radius:50%;animation:bpspin .7s linear infinite}
@keyframes bpspin{to{transform:rotate(360deg)}}
.bp-back{margin:26px auto 40px;text-align:center}
.bp-back a{color:var(--emerald-ink);font-weight:700;text-decoration:none}
@media(max-width:620px){.bp-headwrap{margin-top:-40px}.bp-dp{width:82px;height:82px}.bp-dp img{width:60px;height:60px}.bp-cta{width:100%;justify-content:center}}

.bp-story{margin:0 0 6px}
.bp-story::after{content:"";display:block;clear:both}
.bp-story p{margin:0 0 16px;font-size:1.02rem;line-height:1.75;max-width:70ch}
.bpx{float:right;clear:right;width:min(340px,42%);margin:.2em 0 1.4em 2em;font-size:.9rem}
.bpx-top{float:none;width:auto;margin:0 0 20px}
.ibx{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);table-layout:fixed;box-shadow:var(--raise)}
.ibx-cap{caption-side:top;padding:13px 14px 11px;background:color-mix(in srgb,var(--navy,#252525) 7%,var(--card));border-bottom:1px solid var(--line);text-align:center}
.ibx-cap b{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.3;font-weight:600;overflow-wrap:anywhere}
.ibx-cap span{display:block;margin-top:3px;font-size:.76rem;color:var(--muted);line-height:1.4}
.ibx th,.ibx td{padding:8px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--line);overflow-wrap:anywhere}
.ibx tbody tr:first-child th,.ibx tbody tr:first-child td{border-top:0}
.ibx th[scope="row"]{width:40%;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.ibx td{line-height:1.55}
.ibx td a{color:var(--emerald-ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--emerald) 38%,transparent)}
.ibx td a:hover{border-bottom-color:var(--emerald)}
.ibx .ibx-ext::after{content:"↗";font-size:.76em;margin-left:.2em;opacity:.7;border:0}
.ibx-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ibx-list li{margin:0}
.ibx tr.is-head th{width:auto;background:color-mix(in srgb,var(--navy,#252525) 7%,var(--card));text-align:center;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-ink,#A01018);padding:7px 12px}
.ibx tr.is-wide td{text-align:center}
.ibx-media td{padding:14px 14px 10px;text-align:center}
.ibx-media figure{margin:0;display:grid;justify-items:center;gap:7px}
.ibx-media img{max-width:min(100%,210px);height:auto;display:block;border-radius:8px;box-shadow:0 8px 22px rgba(37,37,37,.16)}
.ibx-media figcaption{font-size:.73rem;color:var(--muted);line-height:1.45;max-width:32ch}
.ibx-rate td{padding:10px 12px 12px;text-align:center}
.ibx-rate-in{display:flex;align-items:baseline;justify-content:center;gap:.4em;flex-wrap:wrap;line-height:1}
.ibx-stars{font-size:1.1rem;letter-spacing:.04em;color:var(--line)}
.ibx-star.on{color:#F5A623}.ibx-star.half{color:#F5A623;opacity:.55}
.ibx-rate-in b{font-family:var(--mono);font-weight:700;font-size:1.1rem}
.ibx-rate-in i{font-style:normal;font-size:.75rem;color:var(--muted)}
.ibx-rate-k{display:block;margin-top:5px;font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ibx-verdict td{padding:10px 14px 12px;text-align:center}
.ibx-verdict q{font-family:var(--serif);font-style:italic;font-size:.95rem;line-height:1.45}
.ibx-blank{color:var(--muted);font-size:.85em}
@media(max-width:760px){
  .bpx{float:none;width:auto;margin:0 0 20px;font-size:.95rem}
  .ibx th[scope="row"]{width:42%;font-size:.65rem}
  .ibx th,.ibx td{padding:8px 10px}
}

:root{
  --ink:#111111; --surface:#FFFFFF; --emerald:#252525; --brass:#D6101E;
  --mist:#E3E3E3; --alert:#D6101E;
  --bg:var(--surface); --fg:var(--ink); --card:#FFFFFF; --line:var(--mist);
  --muted:#616161; --raise:0 1px 2px rgba(17,17,17,.05),0 8px 24px rgba(17,17,17,.06);--inkb:#252525;--inksh:rgba(37,37,37,.92);
  --emerald-ink:#1F1F1F; --brass-ink:#E60017;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Geist","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px; --r-lg:22px; --header-h:60px; --nav-h:60px; --logo-h:44px; --logo-maxw:260px;
  --maxw:1120px; --content:760px; --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"]{
  --bg:#0C0C0C; --fg:#F4F4F4; --card:#171717; --line:#282828;
  --muted:#A0A0A0; --raise:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);--inkb:#151515;--inksh:rgba(0,0,0,.75);
  --emerald-ink:#989898; --brass-ink:#FF3B47;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-top:var(--header-h);overflow-x:clip;max-width:100%}
@media (max-width:1023px){body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:560;line-height:1.1;letter-spacing:-.02em;margin:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.content{max-width:var(--content);margin:0 auto;padding:0 20px}
:focus-visible{outline:2.5px solid var(--emerald);outline-offset:2px;border-radius:6px}

.hdr{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:60;display:flex;align-items:center;gap:10px;padding:0 14px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line);transform:translateZ(0);-webkit-transform:translate3d(0,0,0);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
.hdr .left,.hdr .right{display:flex;align-items:center;gap:8px}
.hdr .left{min-width:0;flex:0 1 auto;overflow:hidden}
.hdr .right{margin-left:auto;flex:0 0 auto}
.hdr-nav{display:none}
@media (min-width:1024px){
  .hdr .left{flex:0 0 auto}
  .hdr-nav{display:flex;align-items:center;gap:2px;margin-left:10px;margin-right:12px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
  .hdr-nav::-webkit-scrollbar{display:none}
  .hdr-nav a{padding:8px 8px;border-radius:4px;font-size:.86rem;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;flex:0 0 auto;transition:color .15s var(--ease),background .15s}
  @media (min-width:1024px) and (max-width:1359px){.hdr-nav a{padding:7px 5px;font-size:.77rem;letter-spacing:-.012em}.hdr-nav{margin-left:4px;margin-right:8px}.hdr .right{gap:5px}.pub-btn{padding:0 13px;font-size:.88rem}}
  @media (min-width:1360px) and (max-width:1479px){.hdr-nav a{padding:8px 7px;font-size:.83rem}.hdr-nav{margin-left:8px}}
  .hdr-nav a:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
  .hdr-nav a.on{color:var(--brass-ink);background:transparent;font-weight:700}
}
.iconbtn{display:grid;place-items:center;width:42px;height:42px;border-radius:4px;background:transparent;border:1px solid transparent;color:var(--fg);cursor:pointer;transition:background .18s var(--ease),transform .12s var(--ease)}
.iconbtn:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.iconbtn:active{transform:scale(.94)}
.ic{width:21px;height:21px;display:block}
.brand{display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:4px;min-width:0}
.brand-logo{display:inline-flex;align-items:center;min-width:0;
  height:min(var(--logo-h),calc(var(--header-h) - 10px));max-width:min(var(--logo-maxw),100%)}
.brand-logo img{height:100%;width:auto;max-width:100%;display:block;object-fit:contain;object-position:left center}
.brand-logo .bl-dark{display:none}
html[data-theme="dark"] .brand-logo .bl-light{display:none}
html[data-theme="dark"] .brand-logo .bl-dark{display:block}
/* The drawer is dark in both themes, so it always wants the lockup drawn for
   a dark ground. In light mode it used to show the dark-ink lockup and the
   logo simply disappeared into the panel. */
html[data-theme]:root aside.drawer .brand-logo .bl-light{display:none}
html[data-theme]:root aside.drawer .brand-logo .bl-dark{display:block}
.pub-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:4px;background:linear-gradient(135deg,#252525,#313131,rgb(var(--rb-red-solid)),#252525);background-size:300% 300%;animation:fabShift 6s ease-in-out infinite;color:#fff;font-weight:600;font-size:.95rem;border:0;cursor:pointer;box-shadow:0 4px 14px rgba(37,37,37,.28);transition:transform .12s var(--ease),box-shadow .18s var(--ease),filter .18s}
@media (prefers-reduced-motion:reduce){.pub-btn{animation:none;background:var(--emerald)}}
.pub-btn:hover{filter:brightness(1.05);box-shadow:0 6px 20px rgba(37,37,37,.36)}
.pub-btn:active{transform:translateY(1px) scale(.99)}
.pub-btn .ic{width:18px;height:18px}
@media (max-width:560px){.pub-btn .txt{display:none}.pub-btn{padding:0 12px}}
@media (max-width:480px){.hdr{padding:0 8px}.hdr .left,.hdr .right{gap:2px}.iconbtn{width:38px;height:38px;border-radius:4px}.pub-btn{padding:0;width:38px;justify-content:center}}
@media (max-width:1023px){.pub-btn{display:none}}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1rem;color:#fff;background:linear-gradient(135deg,var(--emerald),#0a4d39);border:2px solid color-mix(in srgb,var(--brass) 60%,transparent);overflow:hidden;flex:0 0 auto;text-decoration:none}
.avatar-guest{background:color-mix(in srgb,var(--fg) 8%,transparent);border-color:var(--line);color:var(--muted)}
.avatar-guest .ic{width:20px;height:20px}
.avatar img{width:100%;height:100%;object-fit:cover}

.lang-wrap{position:relative}
.bell-desktop{display:none}
@media (min-width:1024px){.bell-desktop{display:grid}}
.lang-menu{position:absolute;right:0;top:48px;min-width:180px;max-height:340px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:0;box-shadow:var(--raise);padding:6px;display:none;z-index:70}
.lang-menu.open{display:block;animation:pop .16s var(--ease)}
.lang-menu button{display:flex;width:100%;align-items:center;gap:8px;padding:9px 11px;border:0;border-radius:4px;background:transparent;color:var(--fg);font:inherit;font-size:.92rem;cursor:pointer;text-align:left}
.lang-menu button:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.lang-menu button.active{color:var(--emerald-ink);font-weight:700}
.lang-menu button.active .ic{color:var(--emerald-ink)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

.scrim{position:fixed;inset:0;background:rgba(12,12,12,.46);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .24s var(--ease),visibility .24s;z-index:90}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(86vw,330px);z-index:100;background:var(--bg);border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .3s var(--ease);display:flex;flex-direction:column;padding:16px 14px;overflow:auto}
.drawer.open{transform:none}
.drawer .d-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.drawer nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.drawer nav a{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:4px;font-size:1rem;font-weight:500;color:var(--fg);transition:background .15s var(--ease)}
.drawer nav a .ic{width:19px;height:19px;flex:0 0 auto;color:var(--muted)}
.drawer nav a[aria-current="page"] .ic{color:var(--emerald-ink)}
.drawer nav a:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.drawer nav a[aria-current="page"]{background:color-mix(in srgb,var(--emerald) 12%,transparent);color:var(--emerald-ink);font-weight:600}
.drawer .d-acc{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.d-acc summary{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:4px;cursor:pointer;font-weight:600;color:var(--fg);list-style:none}
.d-acc summary::-webkit-details-marker{display:none}
.d-acc summary .ic{width:19px;height:19px;color:var(--muted)}
.d-acc-arr{margin-left:auto}
.d-acc-arr .ic{transition:transform .2s var(--ease)}
.d-acc[open] .d-acc-arr .ic{transform:rotate(90deg)}
.d-acc-links{display:flex;flex-direction:column;padding:2px 6px 6px}
.d-acc-links a{padding:10px 14px 10px 40px;border-radius:4px;color:var(--muted);text-decoration:none;font-size:.94rem}
.d-acc-links a:hover{background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg)}
.d-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.drawer .who{display:flex;align-items:center;gap:10px;padding:8px 4px 12px}
.drawer .who .nm{font-weight:600;font-size:.95rem}
.drawer .who .hd{font-family:var(--mono);font-size:.78rem;color:var(--emerald-ink)}
.drawer .socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.drawer .socials a{font-size:.85rem;color:var(--muted);padding:6px 10px;border:1px solid var(--line);border-radius:999px}
.drawer .handle{font-family:var(--mono);font-size:.82rem;color:var(--emerald-ink)}

.bnav{position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:none;grid-template-columns:repeat(5,1fr);align-items:center;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-top:1px solid var(--line);transform:translateZ(0);-webkit-transform:translate3d(0,0,0);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
@media (max-width:1023px){.bnav{display:grid}}
.bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;color:var(--muted);font-size:.66rem;font-weight:600}
.bnav a .ic{width:22px;height:22px}
/* Where you are is the one place the brand red earns its keep, and the
   drawer and the top bar already say it that way. */
.bnav a[aria-current="page"]{color:var(--brass-ink)}
.bnav .fabwrap{position:relative;height:100%;align-self:stretch}
.bnav .fab{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%!important;display:grid;place-items:center;color:#fff;box-shadow:0 8px 22px rgba(37,37,37,.4);border:4px solid var(--bg);transition:transform .14s var(--ease);background:linear-gradient(135deg,#252525,#313131,rgb(var(--rb-red-solid)),#252525);background-size:300% 300%;animation:fabShift 6s ease-in-out infinite}
@keyframes fabShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion:reduce){.bnav .fab{animation:none;background:var(--emerald)}}
.bnav .fab .ic{width:26px;height:26px}
.bnav .fab:hover{filter:brightness(1.06)}
.bnav .fab:active{transform:translate(-50%,-50%) scale(.94)}

.hero-full{position:relative;width:100vw;max-width:100%;margin-left:calc(50% - 50vw);min-height:calc(100dvh - var(--header-h));display:flex;align-items:center;overflow:hidden;color:#fff;background:var(--ink)}
.hero-full .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-full .hero-bg img{width:100%;height:100%;object-fit:cover;animation:heroKen 24s ease-in-out infinite alternate;transform-origin:center}
@keyframes heroKen{from{transform:scale(1)}to{transform:scale(1.1)}}
.hero-full .hero-blob{position:absolute;border-radius:50%;filter:blur(80px);z-index:1;animation:blobMove 18s ease-in-out infinite alternate;pointer-events:none}
.hero-full .hb1{width:420px;height:420px;background:var(--brass);opacity:.3;top:-100px;right:-80px}
.hero-full .hb2{width:340px;height:340px;background:#747474;opacity:.28;bottom:-80px;left:-60px;animation-delay:-9s}
@keyframes blobMove{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.18)}}
.hero-full .hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,18,18,.35) 0%,rgba(18,18,18,.45) 45%,rgba(18,18,18,.82) 100%)}
.hero-full .hero-content{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:40px 20px;width:100%;isolation:isolate}
/* The headline sits on whatever photograph the owner uploads that week, so
   it cannot rely on the picture being dark. This is a soft wash under the
   words only, on the content rather than on the scrim, because the aurora
   layer restyles the scrim at a specificity a plain rule cannot reach. */
.hero-full .hero-content::before{content:"";position:absolute;z-index:-1;
  left:-6vw;right:-6vw;top:-4%;bottom:-8%;pointer-events:none;
  background:radial-gradient(70% 62% at 26% 52%, rgba(10,10,10,.68) 0%, rgba(10,10,10,.34) 52%, rgba(10,10,10,0) 78%)}
@media(max-width:760px){
  .hero-full .hero-content::before{left:-12vw;right:-12vw;
    background:radial-gradient(86% 66% at 46% 50%, rgba(10,10,10,.76) 0%, rgba(10,10,10,.44) 56%, rgba(10,10,10,0) 82%)}
}
.hero-full .eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(6px);opacity:0;animation:heroUp .7s var(--ease) .05s forwards}
.hero-full .eyebrow .ic{color:var(--brass)}
.hero-full h1{color:#fff;font-size:clamp(2.4rem,7vw,4.4rem);margin:20px 0 0;max-width:16ch;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.hero-full h1 .hl{display:inline-block;opacity:0;transform:translateY(22px);animation:heroUp .8s var(--ease) forwards}
.hero-full h1 .hl2{animation-delay:.16s}
.hero-full h1 em{font-style:italic;color:#FF6B73}
.type-swap{font-style:italic;color:#FF6B73}
.type-caret{display:inline-block;width:3px;height:.9em;margin-left:2px;background:#FF6B73;vertical-align:-2px;animation:caretBlink .9s step-end infinite;border-radius:2px}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}}
.hero-full p.lede{color:rgba(255,255,255,.92);font-size:clamp(1.05rem,2.4vw,1.3rem);max-width:54ch;margin:18px 0 0;line-height:1.55;opacity:0;animation:heroUp .8s var(--ease) .34s forwards}
.hero-full .hero-cta{margin-top:30px;opacity:0;animation:heroUp .8s var(--ease) .48s forwards}
@keyframes heroUp{to{opacity:1;transform:none}}
.hero-full .btn-ghost{background:var(--brass);color:#fff;border-color:var(--brass)}
.hero-full .btn-ghost:hover{filter:brightness(1.1)}
.hero-full .btn-primary,.cta-band .btn-primary,.search-hero .btn-primary{border-color:rgba(255,255,255,.34);box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.hero-full .btn-primary:hover,.cta-band .btn-primary:hover{border-color:rgba(255,255,255,.55)}
.hero-scroll-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:3;color:rgba(255,255,255,.75);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--mono);animation:cueBob 1.8s ease-in-out infinite}
.hero-scroll-cue .ic{width:20px;height:20px;transform:rotate(180deg)}
@keyframes cueBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media(max-width:760px){.hero-full{min-height:calc(100dvh - var(--header-h))}.hero-full .hero-content{padding:24px 18px}}
@media (prefers-reduced-motion:reduce){.hero-full .hero-bg img,.hero-full .hero-blob{animation:none}.hero-full .eyebrow,.hero-full h1 .hl,.hero-full p.lede,.hero-full .hero-cta{animation:none;opacity:1;transform:none}}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--emerald-ink);padding:6px 12px;border:1px solid color-mix(in srgb,var(--emerald) 30%,var(--line));border-radius:999px}
.eyebrow .ic{width:14px;height:14px;color:var(--brass-ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-cta .btn{flex:1 1 auto;min-width:200px;justify-content:center;height:52px;border-radius:0}
@media(max-width:560px){.hero-cta{flex-direction:column}.hero-cta .btn{width:100%;min-width:0}}
.btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 22px;border-radius:4px;font-weight:600;font-size:1rem;cursor:pointer;border:1px solid transparent;transition:transform .12s var(--ease),filter .18s,background .18s}
.btn-primary{background:var(--emerald);color:#fff;border:1px solid color-mix(in srgb,#989898 45%,var(--emerald));box-shadow:0 6px 18px rgba(37,37,37,.28)}
.btn-primary:hover{filter:brightness(1.15);border-color:color-mix(in srgb,#989898 70%,var(--emerald))}
.btn-primary[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:var(--brass);color:#fff;border-color:var(--brass);box-shadow:0 6px 18px rgb(var(--rb-red-solid) / .28)}
.btn-ghost:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.full{width:100%;justify-content:center}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:36px 0 6px}
.stats .stat{min-width:0}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px;box-shadow:var(--raise)}
.stat .v{font-size:clamp(1.9rem,4.4vw,2.6rem);font-weight:600;line-height:1;color:var(--fg)}
.stat .v small{font-size:.5em;color:var(--brass-ink);margin-left:2px;vertical-align:.3em}
.stat .k{margin-top:8px;font-size:.82rem;color:var(--muted);font-weight:500}

section.block{padding:30px 0}
.s-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.s-head h2{font-size:clamp(1.4rem,3.4vw,2rem)}
.s-head a.more{font-size:.9rem;color:var(--emerald-ink);font-weight:600;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;box-shadow:var(--raise);display:flex;align-items:flex-end;color:#fff;background:var(--mist);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(37,37,37,.22)}
.card .card-img{position:absolute;inset:0;z-index:0;margin:0;width:100%;aspect-ratio:auto;background:#252525}
.card .card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.card:hover .card-img img{transform:scale(1.07)}
.card .card-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,18,18,0) 32%,rgba(18,18,18,.6) 72%,rgba(18,18,18,.93) 100%)}
.card .card-body{position:relative;z-index:2;padding:20px;width:100%}
.card h3{font-size:1.18rem;margin-bottom:6px;color:#fff}
.card p{color:rgba(255,255,255,.86);font-size:.92rem;margin:0}
.card .tag{display:inline-block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:3px 10px;margin-bottom:10px;backdrop-filter:blur(4px)}
.card.alert .tag{background:color-mix(in srgb,var(--alert) 55%,transparent);border-color:var(--alert)}
.about-banner{width:100%;border-radius:var(--r-lg);overflow:hidden;margin-bottom:24px;aspect-ratio:16/6;box-shadow:var(--raise)}
.about-banner img{width:100%;height:100%;object-fit:cover;display:block}
.about-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:64vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--ink);margin-bottom:26px}
.about-hero .ah-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.about-hero .ah-bg img{width:100%;height:100%;object-fit:cover;animation:heroKen 26s ease-in-out infinite alternate;transform-origin:center}
.about-hero .ah-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,18,18,.28) 0%,rgba(18,18,18,.48) 48%,rgba(18,18,18,.94) 100%)}
.about-hero .ah-inner{position:relative;z-index:2;max-width:var(--content);width:100%;margin:0 auto;padding:120px 20px 54px}
.about-hero .ah-kicker{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:6px 13px;backdrop-filter:blur(6px);opacity:0;animation:ahUp .7s var(--ease) .05s forwards}
.about-hero .ah-kicker .ic{width:14px;height:14px;color:#FF6B73}
.about-hero .ah-title{font-size:clamp(2.3rem,7vw,4.4rem);line-height:1.03;margin:18px 0 0;text-shadow:0 2px 28px rgba(0,0,0,.34)}
.about-hero .ah-title span{display:block;opacity:0;transform:translateY(20px);animation:ahUp .8s var(--ease) forwards}
.about-hero .ah-title .ah-l1{animation-delay:.16s}
.about-hero .ah-title .ah-l2{color:#FF6B73;font-style:italic;animation-delay:.3s}
.about-hero .ah-lede{color:rgba(255,255,255,.92);font-size:clamp(1.02rem,2.3vw,1.24rem);max-width:60ch;margin:18px 0 0;line-height:1.55;opacity:0;animation:ahUp .8s var(--ease) .44s forwards}
@keyframes ahUp{to{opacity:1;transform:none}}
@media(max-width:760px){.about-hero{min-height:56vh}.about-hero .ah-inner{padding:96px 18px 40px}}
@media (prefers-reduced-motion:reduce){.about-hero .ah-bg img{animation:none}.about-hero .ah-kicker,.about-hero .ah-title span,.about-hero .ah-lede{animation:none;opacity:1;transform:none}}
/* ---- MY CONTRIBUTIONS ---- */
.dg-card{position:relative;border-radius:0;padding:22px 24px;margin:0 0 22px;color:var(--fg);
  background:linear-gradient(128deg,color-mix(in srgb,rgb(var(--rb-red-solid)) 9%,var(--card)) 0%,var(--card) 46%,color-mix(in srgb,#959595 11%,var(--card)) 100%);
  border:1px solid color-mix(in srgb,#959595 22%,var(--line));box-shadow:var(--raise)}
.dg-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,rgb(var(--rb-red-solid)),#A7141E 52%,#2B2B2F)}
.dg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dg-badge{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--rb-blue-ink));background:color-mix(in srgb,rgb(var(--rb-blue-ink)) 14%,rgb(var(--rb-bg)));padding:4px 11px;border-radius:999px}
.dg-badge .ic{width:13px;height:13px}
.dg-sub{font-size:.85rem;color:var(--muted);font-style:italic}
.dg-date{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--muted);white-space:nowrap}
.dg-lede{margin:0 0 14px;font-size:1.06rem;line-height:1.6;font-weight:600}
.dg-points{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.dg-points li{display:flex;gap:10px;align-items:baseline;font-size:.95rem;line-height:1.55}
.dg-points li b{flex:0 0 auto;min-width:104px;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.dg-points li span{flex:1;min-width:0}
@media(max-width:560px){.dg-points li{flex-direction:column;gap:2px}.dg-points li b{min-width:0}.dg-date{margin-left:0;width:100%}}
.dg-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted);line-height:1.55}
.au-search{position:relative;display:flex;align-items:center;max-width:520px;margin:14px 0 6px}
.au-search input{width:100%;height:50px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:inherit;padding:0 44px 0 46px;font:inherit;font-size:.98rem;transition:border-color .15s,box-shadow .15s}
.au-search input:focus{outline:0;border-color:color-mix(in srgb,var(--emerald) 46%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--emerald) 12%,transparent)}
.au-search input::-webkit-search-cancel-button{display:none}
.au-si{position:absolute;left:15px;display:grid;place-items:center;color:var(--muted);pointer-events:none}
.au-si .ic{width:18px;height:18px}
.au-clear{position:absolute;right:12px;background:0;border:0;font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer;padding:4px 6px}
.au-count{font-size:.84rem;color:var(--muted);margin:0 0 4px;min-height:20px}
.au-empty{text-align:center;padding:32px 20px;color:var(--muted)}
.au-empty h3{margin:10px 0 6px;color:var(--fg)}
.author-tile.au-hidden{display:none}
.about-intro{max-width:760px}
.about-intro p{margin:14px 0;line-height:1.78;font-size:1.03rem}
.about-intro .sec-h{margin-bottom:6px}
.sec-h .ic{flex:none;width:19px;height:19px;color:var(--muted);position:relative;top:1px}
.about-faq .sec-h{margin-bottom:4px}
.about-faq{margin-top:34px;max-width:760px}
.faq-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;box-shadow:0 1px 2px rgba(37,37,37,.04)}
.faq-item[open]{border-color:color-mix(in srgb,var(--emerald) 34%,var(--line))}
.faq-item summary{cursor:pointer;padding:15px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--muted);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 18px 16px;color:var(--muted);line-height:1.65}
.art-index-hero{min-height:40vh!important}
.art-index-hero .ah-inner{padding:96px 20px 34px}
.inf-sentinel{display:flex;justify-content:center;padding:26px 0 8px;min-height:44px}
.inf-spin{width:26px;height:26px;border-radius:50%;border:3px solid color-mix(in srgb,var(--fg) 18%,transparent);border-top-color:var(--emerald);animation:spin 1s linear infinite;opacity:0;transition:opacity .2s}
.inf-sentinel.on .inf-spin{opacity:1}
.inf-new{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.inf-new.inf-in{opacity:1;transform:none}
.mp-hero{min-height:40vh!important}
.mp-hero .ah-inner{padding:96px 20px 34px}
.mp-toolbar{display:flex;justify-content:flex-end;margin:18px 0 6px}
.mp-sec{margin-top:28px}
.mp-sec .sec-h{display:flex;align-items:center;gap:8px}
.mp-count{font-size:.8rem;background:color-mix(in srgb,var(--emerald) 12%,transparent);color:var(--emerald-ink);border-radius:999px;padding:2px 9px;font-weight:700}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:14px}
@media(max-width:560px){.mp-grid{grid-template-columns:1fr}}
.mp-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:0;overflow:hidden;box-shadow:var(--raise)}
.mp-card.mp-simple{padding:0}
.mp-thumb{aspect-ratio:16/9;background:color-mix(in srgb,var(--fg) 6%,transparent);position:relative;overflow:hidden;display:grid;place-items:center}
.mp-thumb img{width:100%;height:100%;object-fit:cover}
.mp-noimg .ic{width:30px;height:30px;color:var(--muted)}
.mp-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.mp-top{display:flex;align-items:center;justify-content:space-between}
.mp-date{font-size:.74rem;color:var(--muted);font-family:var(--mono)}
.mp-title{font-size:1.02rem;margin:0;line-height:1.3}
.mp-dek{font-size:.86rem;color:var(--muted);margin:0;line-height:1.45}
.mp-meta{font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:4px}
.mp-meta .ic{width:13px;height:13px;vertical-align:-2px}
.mp-actions{display:flex;gap:8px;margin-top:6px}
.btn.sm{height:36px;padding:0 13px;font-size:.85rem;border-radius:4px}
.mp-note{font-size:.76rem;color:var(--muted);margin-top:4px;padding:7px 10px;border-radius:4px;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.mp-note.warn{background:color-mix(in srgb,var(--brass) 12%,transparent);color:var(--brass-ink)}
.mp-empty{margin-top:20px}
.sp{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.sp-live{background:color-mix(in srgb,#12B76A 16%,transparent);color:#0a7a47}
.sp-pending{background:color-mix(in srgb,#747474 16%,transparent);color:#565656}
.sp-rej{background:color-mix(in srgb,var(--brass) 16%,transparent);color:var(--brass-ink)}
.mp-edit-modal{position:fixed;inset:0;z-index:420;background:rgba(10,10,10,.72);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:18px}
.mp-edit-modal.open{display:flex}
.mp-edit-sheet{background:var(--card);border-radius:0;max-width:520px;width:100%;padding:22px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5);max-height:92vh;overflow:auto}
.mp-edit-sheet h3{margin:0 0 14px}
/* ---- BANKERPEDIA 30 ---- */
.b30-hero{position:relative;width:100vw;max-width:100%;margin-left:calc(50% - 50vw);overflow:hidden;background:#0F0F0F;color:#fff;text-align:center;min-height:calc(100dvh - var(--header-h));display:flex;align-items:center;justify-content:center}
.b30-hero-ol{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% -10%,#313131 0%,#252525 42%,#0F0F0F 100%)}
.b30-mesh,.b30-rays{z-index:1}
.b30-hero-in{position:relative;z-index:2;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.b30-mesh{position:absolute;inset:0;pointer-events:none}
.b30-mesh .bm{position:absolute;border-radius:50%;filter:blur(95px);opacity:.42;animation:blobMove 16s ease-in-out infinite alternate}
.b30-mesh .bm1{width:520px;height:520px;background:#6F6F6F;top:-160px;left:-120px}
.b30-mesh .bm2{width:440px;height:440px;background:rgb(var(--rb-red-solid));opacity:.2;bottom:-180px;right:-100px;animation-delay:-6s}
.b30-mesh .bm3{width:360px;height:360px;background:#8F8F8F;opacity:.18;top:32%;left:62%;animation-delay:-11s}
.b30-rays{position:absolute;inset:-40%;background:conic-gradient(from 180deg at 50% 30%,transparent 0deg,rgba(143,143,143,.08) 18deg,transparent 40deg,transparent 140deg,rgb(var(--rb-red-solid) / .07) 165deg,transparent 190deg,transparent 320deg,rgba(255,255,255,.05) 340deg,transparent 360deg);animation:b30spin 46s linear infinite;pointer-events:none}
@keyframes b30spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.b30-rays,.b30-mesh .bm{animation:none}}
.b30-hero-in{position:relative;z-index:1;max-width:880px;margin:auto;padding:56px 20px 48px;width:100%}
.b30-eyebrow{background:rgb(var(--rb-red-solid) / .12);border-color:rgba(255,107,115,.45);color:#FF8B92;letter-spacing:.14em}
.b30-eyebrow .ic{color:#FF6B73}
.b30-title{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.5vw,18px);margin:26px 0 0;flex-wrap:nowrap}
.b30-logo{width:clamp(180px,44vw,340px);height:auto;display:block;flex:0 1 auto;min-width:0;filter:drop-shadow(0 6px 24px rgba(0,0,0,.45))}
.b30-30{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,5.2vw,3.1rem);line-height:1;color:rgb(var(--rb-red-solid));flex:0 0 auto;text-shadow:0 0 44px rgb(var(--rb-red-solid) / .5),0 4px 14px rgba(0,0,0,.4);opacity:0;transform:translateY(14px) scale(.92);animation:heroUp .7s var(--ease) .15s forwards}
.b30-type-line{min-height:1.6em;margin:16px auto 0;font-weight:700;font-size:clamp(.95rem,2.6vw,1.15rem);color:#FF6B73;opacity:0;animation:heroUp .7s var(--ease) .5s forwards}
.b30-caret{background:#FF6B73;height:1em;vertical-align:-2px}
.b30-sub{font-size:clamp(1.05rem,3vw,1.5rem);font-weight:600;color:rgba(255,255,255,.95);margin:16px 0 0;opacity:0;animation:heroUp .7s var(--ease) .3s forwards}
.b30-trust{color:rgba(255,255,255,.74);max-width:52ch;margin:14px auto 0;line-height:1.6;opacity:0;animation:heroUp .7s var(--ease) .42s forwards}
.b30-counters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:660px;margin:30px auto 0;opacity:0;animation:heroUp .7s var(--ease) .54s forwards}
.b30-counter{position:relative;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:0;padding:18px 10px;backdrop-filter:blur(10px);overflow:hidden}
.b30-counter::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,rgb(var(--rb-red-solid)),transparent);opacity:.7}
.bc-num{font-family:var(--mono);font-weight:700;font-size:clamp(1.35rem,4vw,2.1rem);color:#FF6B73}
.bc-lbl{font-size:.72rem;color:rgba(255,255,255,.66);margin-top:5px;letter-spacing:.06em;text-transform:uppercase}
.b30-fine{font-size:.73rem;color:rgba(255,255,255,.5);margin:22px auto 0;max-width:62ch;font-family:var(--mono);opacity:0;animation:heroUp .7s var(--ease) .66s forwards}
.b30-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media(max-width:1023px){.b30-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.b30-grid{grid-template-columns:1fr}}
.b30-card{position:relative;overflow:hidden;background:linear-gradient(128deg,color-mix(in srgb,rgb(var(--rb-red-solid)) 9%,var(--card)) 0%,var(--card) 46%,color-mix(in srgb,#959595 11%,var(--card)) 100%);border:1px solid color-mix(in srgb,#959595 22%,var(--line));border-radius:0;padding:20px;display:flex;flex-direction:column;gap:14px;color:var(--fg);box-shadow:var(--raise);transition:transform .2s var(--ease),box-shadow .22s,border-color .2s}
.b30-card::after{content:"";position:absolute;top:-70%;left:-30%;width:60%;height:240%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.18) 55%,transparent 100%);transform:rotate(8deg) translateX(-140%);transition:transform .8s var(--ease);pointer-events:none}
.b30-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(37,37,37,.16);border-color:color-mix(in srgb,#959595 40%,var(--line))}
.b30-card:hover::after{transform:rotate(8deg) translateX(420%)}
.b30-card::before{content:"";position:absolute;top:-90px;right:-90px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(29,155,240,.16) 0%,transparent 68%);pointer-events:none}
.b30-card.b30-gold{border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 46%,var(--line));box-shadow:0 14px 34px rgb(var(--rb-red-solid) / .14)}
.b30-card.b30-gold::before{background:radial-gradient(circle,rgb(var(--rb-red-solid) / .2) 0%,transparent 68%)}
.b30-card.b30-silver{border-color:color-mix(in srgb,#A1A1A1 46%,var(--line))}
.b30-card.b30-bronze{border-color:color-mix(in srgb,#C08A3E 46%,var(--line))}
.b30c-top{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;position:relative;z-index:1}
.b30c-rank{grid-row:1/3;font-family:var(--mono);font-weight:700;font-size:1.3rem;color:rgb(var(--rb-red-solid));display:flex;flex-direction:column;align-items:center;line-height:1.1}
.b30c-crown{font-size:.95rem}
.b30c-logo-wrap{grid-row:1/3;grid-column:3;width:54px;height:54px;border-radius:0;background:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(37,37,37,.14);border:1px solid var(--line);overflow:hidden}
.b30c-logo{width:44px;height:44px;object-fit:contain}
.b30c-name{grid-column:2;font-size:1.05rem;margin:0;line-height:1.25;color:var(--fg);font-weight:700}
.b30c-sector{grid-column:2;font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono)}
.b30c-votes{display:flex;gap:9px;position:relative;z-index:1}
.b30c-pill{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:4px;padding:9px 10px;font-weight:700;font-family:var(--mono);font-size:.92rem;background:color-mix(in srgb,var(--fg) 5%,transparent);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(4px)}
.b30c-pill.pos{color:#676767}
.b30c-pill.neg{color:#D1102A}
.b30c-conf-wrap{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.b30c-conf-lbl{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--mono);flex:0 0 auto}
.b30c-conf{flex:1;height:6px;border-radius:6px;background:color-mix(in srgb,var(--fg) 10%,transparent);overflow:hidden}
.b30c-conf i{display:block;height:100%;background:linear-gradient(90deg,#2B2B2F 0%,#6B6B70 55%,rgb(var(--rb-red-solid)) 100%);border-radius:6px;transition:width .8s var(--ease)}
.b30c-vote{width:100%;justify-content:center;position:relative;z-index:1;background:linear-gradient(135deg,rgb(var(--rb-red-solid)),rgb(var(--rb-red-solid-2)));border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 20px rgb(var(--rb-red-solid) / .3)}
.b30c-vote:hover{filter:brightness(1.08)}
.b30c-report{display:block;text-align:center;font-size:.78rem;font-weight:700;color:var(--muted);text-decoration:none;padding:2px 0 2px;position:relative;z-index:1;transition:color .15s}
.b30c-report:hover{color:#959595}
.b30-rate{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:color-mix(in srgb,var(--fg) 3%,transparent)}
.b30-rate-h{font-size:.82rem;font-weight:700;margin-bottom:8px}
.b30-rate-h span{display:block;font-weight:400;font-size:.74rem;color:var(--muted);margin-top:2px}
.b30-rrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:.88rem}
.b30-stars{display:flex;gap:2px;flex:0 0 auto}
.b30-st{background:0;border:0;cursor:pointer;font-size:1.15rem;line-height:1;color:var(--line);padding:2px;transition:color .12s,transform .12s}
.b30-st:hover{transform:scale(1.14)}
.b30-st.on,.b30-st.hov{color:#F5A623}
.b30c-vote:disabled{opacity:.55;cursor:default;background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--muted);box-shadow:none}
html[data-theme="light"] .b30-card{background:linear-gradient(128deg,color-mix(in srgb,rgb(var(--rb-red-solid)) 9%,var(--card)) 0%,var(--card) 46%,color-mix(in srgb,#959595 11%,var(--card)) 100%);border:1px solid color-mix(in srgb,#959595 22%,var(--line));color:var(--fg);box-shadow:var(--raise)}
html[data-theme="light"] .b30-card:hover{box-shadow:0 22px 46px rgba(37,37,37,.16);border-color:#CACACA}
html[data-theme="light"] .b30-card::before{background:radial-gradient(circle,rgba(116,116,116,.16) 0%,transparent 68%)}
html[data-theme="light"] .b30-card::after{background:linear-gradient(105deg,transparent 0%,rgba(37,37,37,.03) 45%,rgba(37,37,37,.07) 50%,rgba(37,37,37,.03) 55%,transparent 100%)}
html[data-theme="light"] .b30-card.b30-gold{border-color:rgb(var(--rb-red-solid) / .45);box-shadow:0 16px 40px rgb(var(--rb-red-solid) / .14)}
html[data-theme="light"] .b30-card.b30-gold::before{background:radial-gradient(circle,rgb(var(--rb-red-solid) / .14) 0%,transparent 68%)}
html[data-theme="light"] .b30-card.b30-silver{border-color:#BCBCBC}
html[data-theme="light"] .b30-card.b30-bronze{border-color:#D9A96B}
html[data-theme="light"] .b30c-rank{color:#E60017}
html[data-theme="light"] .b30c-name{color:#252525}
html[data-theme="light"] .b30c-sector{color:#6D6D6D}
html[data-theme="light"] .b30c-logo-wrap{border:1px solid #E9E9E9;box-shadow:0 4px 12px rgba(37,37,37,.10)}
html[data-theme="light"] .b30c-pill{background:color-mix(in srgb,var(--fg) 4%,#fff);border:1px solid var(--line)}
html[data-theme="light"] .b30c-pill.pos{color:#686868}
html[data-theme="light"] .b30c-pill.neg{color:#E60017}
html[data-theme="light"] .b30c-conf{background:color-mix(in srgb,var(--fg) 10%,transparent)}
html[data-theme="light"] .b30c-conf-lbl{color:#848484}
html[data-theme="light"] .b30c-vote:disabled{background:#EEEEEE;color:#848484}
.b30-addbank{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px;padding:18px;border:1px dashed var(--line);border-radius:0}
.b30-addbank p{margin:0;color:var(--muted);font-weight:600}
.b30-how{margin-top:30px}
.b30-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.b30-how-grid{grid-template-columns:1fr}}
.b30-how-cell h4{margin:10px 0 6px}
.b30-how-cell p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.6}
.bh-ic{width:40px;height:40px;border-radius:4px;display:grid;place-items:center;background:color-mix(in srgb,var(--emerald) 12%,transparent);color:var(--emerald-ink)}
.b30-modal,.b30-share{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:59;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
@media(max-width:1023px){.b30-modal,.b30-share{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}}
.b30-modal.open,.b30-share.open{display:flex}
.b30-sheet,.b30-share-sheet{position:relative;background:var(--card);border-radius:0;max-width:480px;width:100%;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.5);max-height:calc(100% - 8px);overflow:auto;overscroll-behavior:contain}
.b30-share-sheet .ach-x,.b30-sheet .ach-x{position:absolute;top:14px;right:14px;z-index:2}
.b30-bank-pin{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:6px;padding-right:40px}
.b30-bank-pin img{width:34px;height:34px;border-radius:4px;background:#fff;object-fit:contain;padding:3px;border:1px solid var(--line)}
.b30-steps{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.b30q{margin:0 0 14px;font-size:1.2rem}
.b30-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.b30-big{padding:20px 12px;border-radius:0;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);font-weight:700;font-size:1rem;cursor:pointer;font-family:inherit;transition:border-color .15s,transform .12s var(--ease),background .15s}
.b30-big:active{transform:scale(.97)}
.b30-big.on{border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 9%,transparent)}
.b30-big.pos.on{border-color:#747474;background:color-mix(in srgb,#747474 10%,transparent)}
.b30-big.neg.on{border-color:rgb(var(--rb-red-solid));background:color-mix(in srgb,rgb(var(--rb-red-solid)) 8%,transparent)}
.b30-cc{text-align:right;font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:4px}
.b30-note{color:var(--muted);font-size:.88rem;line-height:1.55;margin:0}
.b30-verified{margin-top:12px;padding:12px;border-radius:4px;background:color-mix(in srgb,var(--emerald) 9%,transparent);color:var(--emerald-ink);font-weight:700;text-align:center;border:1px solid color-mix(in srgb,var(--emerald) 24%,transparent)}
.b30-summary{border:1px solid var(--line);border-radius:0;padding:14px;display:flex;flex-direction:column;gap:9px;background:var(--bg)}
.b30s-row{display:flex;align-items:center;gap:9px;font-size:.94rem}
.b30s-row img{border-radius:7px;background:#fff;object-fit:contain;padding:2px;border:1px solid var(--line)}
.b30-posT{color:var(--emerald-ink)}
.b30-negT{color:var(--brass-ink)}
#b30Canvas{width:100%;height:auto;border-radius:0;border:1px solid var(--line);display:block;box-shadow:0 10px 30px rgba(37,37,37,.18)}
.b30-share .ach-share-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
@media(max-width:480px){.b30-share .ach-share-row{grid-template-columns:repeat(3,1fr)}}
.b30-sh{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:4px 2px;color:var(--muted);font-family:inherit}
.b30-sh svg{width:22px;height:22px;color:#fff;padding:12px;border-radius:50%;box-sizing:content-box;background:var(--sc,#25D366);box-shadow:0 4px 12px color-mix(in srgb,var(--sc,#25D366) 40%,transparent);transition:transform .14s var(--ease)}
.b30-sh:hover svg{transform:translateY(-3px) scale(1.06)}
.b30-sh span{font-size:.68rem;font-weight:600}
/* ---- BANKERPEDIA ACADEMY ---- */
.ac-hero{position:relative;width:100vw;max-width:100%;margin-left:calc(50% - 50vw);overflow:hidden;background:#0F0F0F;color:#fff;text-align:center;min-height:calc(100dvh - var(--header-h));display:flex;align-items:center;justify-content:center}
.ac-hero-bg{position:absolute;inset:0}
.ac-hero-bg img{width:100%;height:100%;object-fit:cover}
.ac-hero-grad{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% -10%,rgba(49,49,49,.92) 0%,rgba(37,37,37,.88) 46%,rgba(15,15,15,.94) 100%)}
.ac-3d{position:absolute;inset:0;pointer-events:none;perspective:900px}
.ac-fl{position:absolute;display:block;transition:transform .25s ease-out;will-change:transform}
.ac-orb{border-radius:50%;filter:blur(60px);opacity:.4}
.ac-orb.o1{width:380px;height:380px;background:#6F6F6F;top:-120px;left:-90px;animation:blobMove 15s ease-in-out infinite alternate}
.ac-orb.o2{width:320px;height:320px;background:rgb(var(--rb-red-solid));opacity:.18;bottom:-130px;right:-70px;animation:blobMove 17s ease-in-out infinite alternate;animation-delay:-7s}
@keyframes acFloat{from{margin-top:0}to{margin-top:-26px}}
@keyframes acSpin{to{transform:rotate(360deg)}}
.ac-particles{position:absolute;inset:0}
.ac-particles i{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;background:linear-gradient(180deg,#FF6B73,#747474);animation:acRise 10s linear infinite}
@keyframes acRise{to{transform:translateY(-110vh)}}
@media (prefers-reduced-motion:reduce){.ac-fl,.ac-particles i{animation:none}}
.ac-hero-in{position:relative;z-index:1;max-width:900px;margin:auto;padding:60px 20px 52px;width:100%}
.ac-eyebrow{background:rgba(255,107,115,.1);border-color:rgba(255,107,115,.4);color:#FF6B73}
.ac-eyebrow .ic{color:#FF6B73}
.ac-title{font-family:var(--serif);font-size:clamp(2.2rem,6.5vw,4rem);margin:22px 0 0;letter-spacing:-.01em}
.ac-title em{font-style:italic;color:#FF6B73}
/* The academy hero floats two blurred orbs behind this headline, so the colour
   underneath the italic changes as they drift. At the brightest frame the raw
   coral fell to 2.73:1. The paler coral holds 4.4:1 at that same frame and is
   the tone the subhead directly below already uses. */
.ac-title em{color:rgb(var(--rb-coral-ink))}

.ac-sub{font-weight:700;font-size:clamp(1rem,2.8vw,1.3rem);color:rgb(var(--rb-coral-ink));margin:14px 0 0}
/* The academy hero is an admin-chosen photograph with two blurred orbs
   drifting over it, so the colour under this line is not something the
   stylesheet knows. Two changes make it safe whatever the picture is: the
   lead line is white rather than pale coral (the brand accent stays on the
   eyebrow and the headline italic just above it), and the hero copy sits on
   its own full-bleed scrim, below the text and above the orbs, that the
   admin opacity slider cannot turn off. */
.ac-sub{color:#FFFFFF}
.ac-hero-in{position:relative;z-index:2;isolation:isolate}
.ac-hero-in::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-40px;bottom:-40px;left:-50vw;right:-50vw;
  background:linear-gradient(180deg,rgba(8,8,8,.30) 0%,rgba(8,8,8,.58) 38%,rgba(8,8,8,.62) 72%,rgba(8,8,8,.42) 100%)}

.ac-lede{color:rgba(255,255,255,.78);max-width:62ch;margin:12px auto 0;line-height:1.65}
.ac-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:640px;margin:28px auto 0}
.ac-stat{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:0;padding:16px 10px;backdrop-filter:blur(10px)}
.acs-n{font-family:var(--mono);font-weight:700;font-size:clamp(1.3rem,4vw,2rem);color:#FFFFFF}
.acs-l{font-size:.72rem;color:rgba(255,255,255,.66);margin-top:5px;letter-spacing:.06em;text-transform:uppercase}
.ac-cta{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.ac-cta-main{background:linear-gradient(135deg,rgb(var(--rb-red-solid)),rgb(var(--rb-red-solid-2)));border:0;box-shadow:0 10px 26px rgb(var(--rb-red-solid) / .35)}
.ac-cta-alt{border-color:rgba(255,255,255,.35);color:#fff}
.acx-strip{display:flex;gap:8px;overflow-x:auto;padding:22px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.acx-strip>:first-child{margin-left:auto}
.acx-strip>:last-child{margin-right:auto}
.acx-strip::-webkit-scrollbar{display:none}
.acx-pill{flex:0 0 auto;padding:8px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:rgba(255,255,255,.85);font-weight:600;font-size:.84rem;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;white-space:nowrap}
.acx-pill:hover{border-color:rgba(255,255,255,.5)}
.acx-pill.on{background:rgb(var(--rb-red-solid));border-color:rgb(var(--rb-red-solid));color:#fff}
.wrap .acx-pill,.ac-sheet .acx-pill,#acTeacher .acx-pill{border-color:var(--line);background:var(--card);color:var(--fg)}
#acTeacher .acx-pill.on{background:var(--emerald);border-color:var(--emerald);color:#fff}
.ac-trustbar{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:20px;font-size:.82rem;color:rgba(255,255,255,.72)}
.ac-trustbar span{display:flex;align-items:center;gap:6px}
.ac-trustbar .ic{width:15px;height:15px;color:#FF6B73}
.ac-sechead{margin-top:44px;max-width:640px}
.ac-sechead.center{text-align:center;margin-left:auto;margin-right:auto}
.ac-kicker{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-ink);font-weight:700}
.ac-kicker .ic{width:14px;height:14px}
.ac-kicker.light{color:#FF8B92}
.ac-h2{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.1rem);margin:10px 0 8px;letter-spacing:-.01em}
.ac-subhead{color:var(--muted);margin:0;line-height:1.6}
.ac-toolbar{display:flex;align-items:center;gap:12px;margin-top:20px;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:0;box-shadow:var(--raise);flex-wrap:wrap}
.ac-searchwrap{flex:1 1 240px;display:flex;align-items:center;gap:10px;padding:0 14px;height:46px;border:1.5px solid var(--line);border-radius:4px;background:var(--bg);transition:border-color .15s,box-shadow .15s}
.ac-searchwrap:focus-within{border-color:var(--emerald);box-shadow:0 0 0 3px color-mix(in srgb,var(--emerald) 14%,transparent)}
.ac-searchwrap .ic{width:17px;height:17px;color:var(--muted);flex:0 0 auto}
.ac-search{flex:1;height:100%;border:0;background:none;color:var(--fg);font-family:inherit;font-size:.95rem;outline:none;min-width:0}
.ac-count{font-family:var(--mono);font-size:.76rem;color:var(--muted);white-space:nowrap;padding:0 4px}
.ac-sort{height:46px;border:1.5px solid var(--line);border-radius:4px;background:var(--bg);color:var(--fg);font-family:inherit;font-weight:600;font-size:.88rem;padding:0 12px;cursor:pointer}
.ac-sort:focus{border-color:var(--emerald);outline:none}
.ac-why{margin-top:50px;padding:50px 0 54px;background:color-mix(in srgb,var(--emerald) 4%,var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ac-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media(max-width:820px){.ac-why-grid{grid-template-columns:1fr}}
.ac-why-cell{background:var(--card);border:1px solid var(--line);border-radius:0;padding:24px;box-shadow:var(--raise);transition:transform .2s var(--ease),box-shadow .22s}
.ac-why-cell:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(37,37,37,.14)}
.ac-why-cell:hover .acw-ic{transform:rotate(-6deg) scale(1.08)}
.acw-ic{width:48px;height:48px;border-radius:0;display:grid;place-items:center;background:linear-gradient(135deg,#252525,#313131);color:#FF6B73;margin-bottom:14px;box-shadow:0 8px 20px rgba(37,37,37,.3);transition:transform .25s var(--ease)}
.acw-ic .ic{width:22px;height:22px}
.ac-why-cell h3{margin:0 0 8px;font-size:1.05rem}
.ac-why-cell p{margin:0;color:var(--muted);line-height:1.65;font-size:.9rem}
.ac-mentor-band{position:relative;overflow:hidden;margin-top:44px;border-radius:0;background:radial-gradient(110% 140% at 85% 0%,#313131 0%,#252525 50%,#0F0F0F 100%);color:#fff;padding:44px 28px;text-align:center;box-shadow:0 24px 56px rgba(14,14,14,.35)}
.acmb-in{position:relative;z-index:1;max-width:560px;margin:0 auto}
.acmb-h{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.2rem);margin:10px 0 10px}
.acmb-p{color:rgba(255,255,255,.78);line-height:1.65;margin:0 0 20px}
.acmb-orb{position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:rgb(var(--rb-red-solid));opacity:.16;filter:blur(70px)}
.ac-toolrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:30px;flex-wrap:wrap}
.ac-tools{display:flex;gap:8px;flex-wrap:wrap}
.ac-search{max-width:220px}
.ac-sort{max-width:170px}
.ac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
@media(max-width:1023px){.ac-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ac-grid{grid-template-columns:1fr}}
.ac-skel{height:300px;border-radius:0;background:linear-gradient(100deg,color-mix(in srgb,var(--fg) 6%,transparent) 30%,color-mix(in srgb,var(--fg) 12%,transparent) 50%,color-mix(in srgb,var(--fg) 6%,transparent) 70%);background-size:200% 100%;animation:acShimmer 1.4s linear infinite}
.ac-skel.shelf{height:220px}
.ac-skel-line{display:inline-block;height:1em;border-radius:6px;background:color-mix(in srgb,var(--fg) 10%,transparent)}
@keyframes acShimmer{to{background-position:-200% 0}}
.acg-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:0;overflow:hidden;text-decoration:none;color:var(--fg);box-shadow:var(--raise);transition:transform .2s var(--ease),box-shadow .22s;opacity:0;transform:translateY(16px)}
.acg-card.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .22s}
.acg-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(37,37,37,.18)}
.acg-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.acg-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.acg-card:hover .acg-thumb img{transform:scale(1.06)}
.acg-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(15,15,15,.75))}
.acg-cat{position:absolute;top:10px;left:10px;background:rgba(37,37,37,.85);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.05em;padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.acg-free{position:absolute;top:10px;right:10px;background:#12B76A;color:#fff;font-size:.68rem;font-weight:800;padding:5px 10px;border-radius:999px}
.acg-paid{position:absolute;top:10px;right:10px;background:rgb(var(--rb-red-solid));color:#fff;font-size:.7rem;font-weight:800;padding:5px 10px;border-radius:999px}
.acg-view{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);background:rgba(255,255,255,.95);color:#252525;font-weight:700;font-size:.8rem;padding:8px 16px;border-radius:999px;transition:bottom .25s var(--ease)}
.acg-card:hover .acg-view{bottom:14px}
.acg-ring{position:absolute;right:10px;bottom:10px;width:44px;height:44px}
.acg-ring .ring-bg{fill:rgba(15,15,15,.6);stroke:rgba(255,255,255,.25);stroke-width:4}
.acg-ring .ring-fg{fill:none;stroke:#FF6B73;stroke-width:4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.acg-ring text{fill:#fff;font-size:10px;font-weight:700}
.acg-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px}
.acg-wrap{display:flex;flex-direction:column;min-width:0}
.acg-wrap .acg-card{flex:1 1 auto}
.acg-receipt{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:.78rem;font-weight:600;color:var(--emerald-ink);border:1px solid var(--line);padding:8px 12px;background:var(--card);align-self:flex-start;text-decoration:none}
.acg-receipt:hover{border-color:var(--emerald-ink)}
.acg-teacher{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.acg-teacher img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.acg-title{margin:0;font-size:1.02rem;line-height:1.3}
.acg-stats{font-size:.76rem;color:var(--muted);font-family:var(--mono)}
.acg-btn{margin-top:4px;justify-content:center}
.ac-empty{text-align:center;padding:40px 20px}
.ac-empty-art{position:relative;width:120px;height:110px;margin:0 auto 14px}
.ea-book{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);width:64px;height:86px;border-radius:8px 12px 12px 8px;background:linear-gradient(135deg,#6F6F6F,#3E3E3E);box-shadow:inset 7px 0 0 rgba(255,255,255,.18),0 16px 34px rgba(37,37,37,.3)}
.ea-spark{position:absolute;right:8px;top:2px;color:#FF6B73;animation:acFloat 3s ease-in-out infinite alternate}
.ea-spark .ic{width:22px;height:22px}
.ac-shelf{margin-top:22px}
.ac-shelf-lbl{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ac-shelf-row{display:flex;gap:16px;overflow-x:auto;padding:6px 4px 18px;scrollbar-width:thin}
.acb{flex:0 0 130px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--fg);perspective:600px}
.acb-cover{position:relative;display:block;width:130px;height:180px;border-radius:0;overflow:hidden;box-shadow:6px 10px 24px rgba(37,37,37,.28);transition:transform .3s var(--ease),box-shadow .3s}
.acb:hover .acb-cover{transform:rotateY(-14deg) translateY(-6px);box-shadow:16px 18px 36px rgba(37,37,37,.35)}
.acb-cover img{width:100%;height:100%;object-fit:cover}
.acb-spine{display:none}
.acb-title{display:block;margin-top:9px;font-size:.84rem;font-weight:700;line-height:1.3;max-height:2.6em;overflow:hidden}
.acb-dl{display:block;font-size:.72rem;color:var(--muted);font-family:var(--mono);margin-top:3px}
.ac-modal{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:59;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
@media(max-width:1023px){.ac-modal{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}}
.ac-modal.open{display:flex}
.ac-sheet{position:relative;background:var(--card);border-radius:0;max-width:440px;width:100%;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.5);max-height:calc(100% - 8px);overflow:auto;overscroll-behavior:contain}
.ac-sheet.wide{max-width:680px}
.ac-sheet .ach-x{position:absolute;top:14px;right:14px;z-index:2}
.acn-cover{display:block;width:100%;height:auto;max-height:46vh;object-fit:contain;background:#121212;border-radius:0;margin:0 auto 12px}
.acn-cat{display:inline-block;background:color-mix(in srgb,var(--emerald) 12%,transparent);color:var(--emerald-ink);font-size:.68rem;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:999px;text-transform:uppercase}
.acn-dl{font-family:var(--mono);font-weight:700;color:var(--emerald-ink);margin:0 0 12px}
.acc-hero{position:relative;width:100vw;max-width:100%;margin-left:calc(50% - 50vw);min-height:300px;display:flex;align-items:flex-end}
.acc-hero-img{position:absolute;inset:0;background-size:cover;background-position:center}
.acc-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,15,.35),rgba(15,15,15,.88))}
.acc-hero-in{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:80px 20px 26px;width:100%;color:#fff}
.acc-title{font-family:var(--serif);font-size:clamp(1.6rem,4.6vw,2.6rem);margin:10px 0 8px}
.acc-teacher{display:flex;align-items:center;gap:9px;font-size:.9rem;color:rgba(255,255,255,.85)}
.acc-teacher img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.5)}
.acc-cols{display:grid;grid-template-columns:1fr 320px;gap:24px;padding-top:24px;padding-bottom:60px;align-items:start}
@media(max-width:900px){.acc-cols{grid-template-columns:1fr}}
.acc-progress{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.acc-ring{width:80px;height:80px}
.acc-ring .ring-bg{fill:none;stroke:color-mix(in srgb,var(--fg) 10%,transparent);stroke-width:7}
.acc-ring .ring-fg{fill:none;stroke:var(--emerald-ink);stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .8s var(--ease)}
.accp-n{font-family:var(--mono);font-weight:700;font-size:1.4rem}
.accp-l{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.acc-desc{color:var(--muted);line-height:1.7;margin:0 0 18px}
.acm{border:1px solid var(--line);border-radius:0;background:var(--card);margin-bottom:12px;overflow:hidden}
.acm summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;font-weight:700;list-style:none}
.acm summary::-webkit-details-marker{display:none}
.acm-n{font-size:.74rem;color:var(--muted);font-family:var(--mono);flex:0 0 auto}
.acm-lessons{padding:4px 10px 12px;display:flex;flex-direction:column;gap:6px}
.acl-row{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:4px;border:1px solid transparent;background:none;cursor:pointer;font-family:inherit;color:var(--fg);text-align:left;font-size:.92rem;transition:background .15s,border-color .15s}
.acl-row:hover{background:color-mix(in srgb,var(--fg) 4%,transparent);border-color:var(--line)}
.acl-row.locked{opacity:.55}
.acl-row.done .aclr-ic{background:#12B76A;color:#fff}
.aclr-ic{width:30px;height:30px;border-radius:4px;display:grid;place-items:center;background:color-mix(in srgb,var(--emerald) 10%,transparent);color:var(--emerald-ink);font-size:.82rem;flex:0 0 auto}
.aclr-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aclr-d{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.acc-side{position:sticky;top:calc(var(--header-h) + 16px)}
@media(max-width:900px){.acc-side{display:none}}
.acc-card{background:var(--card);border:1px solid var(--line);border-radius:0;padding:20px;box-shadow:var(--raise);backdrop-filter:blur(8px)}
.accc-price{font-size:1.7rem;font-weight:800;margin-bottom:6px}
.accc-price .free{color:#12B76A}
.accc-meta{color:var(--muted);font-size:.84rem;margin-bottom:14px}
.accc-note{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:.76rem;margin:10px 0 0}
.accc-note .ic{width:14px;height:14px;color:#12B76A}
.acc-sticky{display:none;position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:40;background:var(--card);border-top:1px solid var(--line);padding:10px 16px;align-items:center;justify-content:space-between;gap:12px}
@media(max-width:900px){.acc-sticky{display:flex}}
.accs-price{font-weight:800;font-size:1.1rem}
.acl-video{position:relative;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:#000}
.acl-video iframe{position:absolute;inset:0;width:100%;height:100%}
.acl-pdf iframe{width:100%;height:min(62vh,520px);border-radius:0;border:1px solid var(--line);background:#fff}
.acl-notes{color:var(--muted);line-height:1.65;margin:12px 0 0}
.acl-actions{margin-top:14px;display:flex;justify-content:flex-end}
.acl-done{color:#12B76A;font-weight:800}
.ac-tick{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;background:#12B76A;color:#fff;display:grid;place-items:center;font-size:2.4rem;z-index:620;animation:acTick .9s var(--ease) forwards;box-shadow:0 20px 50px rgba(18,183,106,.5)}
@keyframes acTick{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}30%{transform:translate(-50%,-50%) scale(1.1);opacity:1}70%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(.9);opacity:0}}
.acq-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-right:38px}
.acq-title{font-weight:800}
.acq-timer{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:700}
.acq-timer svg{width:40px;height:40px}
.tring-bg{fill:none;stroke:color-mix(in srgb,var(--fg) 10%,transparent);stroke-width:4}
.tring-fg{fill:none;stroke:#747474;stroke-width:4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 1s linear,stroke .3s}
.acq-progress{height:6px;border-radius:6px;background:color-mix(in srgb,var(--fg) 9%,transparent);overflow:hidden;margin:12px 0 16px}
.acq-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--emerald),#747474);border-radius:6px;transition:width .4s var(--ease)}
.acq-card{opacity:0;transform:translateX(26px) rotateY(6deg)}
.acq-card.in{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.acq-n{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.acq-q{font-size:1.08rem;font-weight:700;line-height:1.5;margin-bottom:16px}
.acq-opts{display:flex;flex-direction:column;gap:9px}
.acq-opt{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:0;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);font-family:inherit;font-size:.95rem;cursor:pointer;text-align:left;transition:border-color .12s,transform .1s var(--ease),background .12s}
.acq-opt:active{transform:scale(.985)}
.acq-opt.sel{border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 8%,transparent)}
.acq-opt:disabled{cursor:default;opacity:.85}
.acq-key{width:28px;height:28px;border-radius:4px;display:grid;place-items:center;background:color-mix(in srgb,var(--emerald) 10%,transparent);color:var(--emerald-ink);font-weight:800;font-size:.8rem;flex:0 0 auto}
.acq-foot{display:flex;justify-content:flex-end;margin-top:16px}
.acq-grading{text-align:center;padding:40px 0;color:var(--muted)}
.acq-result{text-align:center;opacity:0;transform:translateY(14px)}
.acq-result.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.acqr-donut{width:130px;height:130px;margin:6px auto}
.acqr-donut .ring-bg{fill:none;stroke:color-mix(in srgb,var(--fg) 9%,transparent);stroke-width:10}
.acqr-donut .ring-fg{fill:none;stroke:#747474;stroke-width:10;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.acqr-donut text{fill:var(--fg);font-size:24px;font-weight:800;font-family:var(--mono)}
.acqr-badge{display:inline-block;padding:7px 18px;border-radius:999px;font-weight:800;letter-spacing:.08em;font-size:.8rem;margin:8px 0}
.acqr-badge.pass{background:color-mix(in srgb,#12B76A 14%,transparent);color:#0a7a47}
[data-theme="dark"] .acqr-badge.pass{color:#3ddc97}
.acqr-badge.fail{background:color-mix(in srgb,rgb(var(--rb-red-solid)) 10%,transparent);color:var(--brass-ink)}
.acqr-score{font-weight:800;font-size:1.15rem}
.acqr-msg{color:var(--muted);max-width:44ch;margin:8px auto 14px;line-height:1.6}
.acqr-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.acqr-row{text-align:left;border:1px solid var(--line);border-left-width:4px;border-radius:4px;padding:11px 13px;margin-bottom:9px}
.acqr-row.ok{border-left-color:#12B76A}
.acqr-row.no{border-left-color:rgb(var(--rb-red-solid))}
.acqrr-q{font-weight:700;font-size:.9rem}
.acqrr-a{font-size:.82rem;color:var(--muted);margin-top:3px}
.acqrr-e{font-size:.82rem;margin-top:5px;padding:8px 10px;background:color-mix(in srgb,var(--emerald) 6%,transparent);border-radius:4px;line-height:1.55}
#acCanvas{width:100%;height:auto;border-radius:0;border:1px solid var(--line);display:block;box-shadow:0 10px 30px rgba(37,37,37,.18)}
.ac-modal .ach-share-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
@media(max-width:480px){.ac-modal .ach-share-row{grid-template-columns:repeat(3,1fr)}}
.acl-hero{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--line);border-radius:0;background:var(--card);box-shadow:var(--raise);flex-wrap:wrap}
.aclh-dp img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.aclh-hi{font-size:.8rem;color:var(--muted)}
.aclh-name{margin:0;font-size:1.4rem}
.aclh-exam{font-size:.82rem;color:var(--emerald-ink);font-weight:600}
.acl-continue{display:flex;align-items:center;gap:16px;margin-top:18px;padding:16px;border-radius:0;background:linear-gradient(140deg,#232323,#1B1B1B);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 36px rgba(14,14,14,.3);opacity:0;transform:translateY(12px)}
.acl-continue.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.aclc-thumb img{width:110px;height:72px;object-fit:cover;border-radius:4px}
.aclc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.aclc-k{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#FF6B73;font-family:var(--mono)}
.aclc-t{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aclc-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden}
.aclc-bar i{display:block;height:100%;background:linear-gradient(90deg,#747474,#FF6B73);border-radius:6px}
.aclc-p{font-size:.74rem;color:rgba(255,255,255,.7);font-family:var(--mono)}
.acl-continue .acg-ring{position:static;width:52px;height:52px;flex:0 0 auto}
.acl-certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px}
.acl-cert{display:block;border:2px solid #FF3B47;border-radius:0;padding:4px;text-decoration:none;color:var(--fg);background:linear-gradient(140deg,color-mix(in srgb,#FF6B73 10%,var(--card)),var(--card));transition:transform .16s var(--ease),box-shadow .2s}
.acl-cert:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(199,154,42,.25)}
.aclce-in{display:flex;flex-direction:column;gap:4px;border:1px dashed color-mix(in srgb,#FF3B47 55%,transparent);border-radius:4px;padding:14px}
.aclce-k{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#FF3B47;font-family:var(--mono);font-weight:700}
.aclce-t{font-weight:800}
.aclce-d{font-size:.74rem;color:var(--muted);font-family:var(--mono)}
.acl-tl{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.acl-tli{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:var(--card)}
.acl-dot{width:12px;height:12px;border-radius:50%;background:var(--muted);margin-top:5px;flex:0 0 auto}
.acl-dot.ok{background:#12B76A;box-shadow:0 0 0 4px color-mix(in srgb,#12B76A 18%,transparent)}
.acl-type{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;background:color-mix(in srgb,var(--emerald) 10%,transparent);color:var(--emerald-ink);padding:2px 7px;border-radius:999px;margin-left:6px}
.acl-sub{font-size:.78rem;color:var(--muted);font-family:var(--mono);margin-top:2px}
.act-apply,.act-form,.act-build{max-width:640px;background:var(--card);border:1px solid var(--line);border-radius:0;padding:22px;box-shadow:var(--raise);opacity:0;transform:translateY(14px)}
.act-apply.in,.act-form.in,.act-build.in,.act-hold.in,.act-dash .actd-stat.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.acta-head h1{margin:0 0 6px;font-size:1.5rem}
.acta-head p{color:var(--muted);margin:0 0 16px}
.act-note.bad{background:color-mix(in srgb,rgb(var(--rb-red-solid)) 8%,transparent);color:var(--brass-ink);padding:10px 14px;border-radius:4px;font-size:.86rem;margin-bottom:12px}
.acta-subjects{display:flex;gap:8px;flex-wrap:wrap}
.act-hold{text-align:center;max-width:520px;margin:30px auto;opacity:0;transform:translateY(14px)}
.acth-art{position:relative;width:110px;height:110px;margin:0 auto 14px}
.acth-art .ea-book{width:58px;height:80px}
.acth-art .ea-spark{position:absolute;right:6px;top:0;color:#FF6B73;font-size:1.4rem;animation:acFloat 3s ease-in-out infinite alternate}
.actd-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.actd-head h1{margin:0;font-size:1.5rem}
.actd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.actd-stat{background:var(--card);border:1px solid var(--line);border-radius:0;padding:16px;box-shadow:var(--raise);opacity:0;transform:translateY(10px)}
.actd-stat.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.actds-n{font-family:var(--mono);font-weight:800;font-size:1.5rem;color:var(--emerald-ink)}
.actds-l{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.actc-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:0;padding:10px 12px;margin-bottom:10px;background:var(--card)}
.actc-th{width:84px;height:52px;object-fit:cover;border-radius:4px}
.actc-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.actc-meta span{font-size:.76rem;color:var(--muted);font-family:var(--mono)}
.actc-acts{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap}
.ab-mod{border:1px solid var(--line);border-radius:0;margin-bottom:12px;overflow:hidden;background:var(--bg)}
.ab-mod-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:color-mix(in srgb,var(--fg) 3%,transparent);flex-wrap:wrap}
.ab-lessons{padding:8px 12px}
.ab-les{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px}
.ab-les:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.ab-les-t{flex:1;min-width:0;font-size:.9rem}
.ab-les-t em{font-style:normal;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-left:6px}
.ab-addmod{display:flex;gap:10px;margin-top:12px}
.alf-types{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
@media(max-width:520px){.alf-types{grid-template-columns:repeat(2,1fr)}}
.alf-type{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:0;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit;transition:border-color .14s,background .14s}
.alf-type.on{border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 8%,transparent)}
.alft-ic{font-size:1.3rem}
.lf-prev{width:180px;border-radius:4px;margin-top:8px;display:block}
.ab-excel{margin-top:18px}
.abx-drop{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;padding:24px 16px;border:2px dashed color-mix(in srgb,var(--emerald) 40%,var(--line));border-radius:0;cursor:pointer;background:color-mix(in srgb,var(--fg) 2%,transparent);animation:abxPulse 2.6s ease-in-out infinite}
@keyframes abxPulse{0%,100%{border-color:color-mix(in srgb,var(--emerald) 40%,var(--line))}50%{border-color:var(--emerald)}}
.abx-drop span{font-size:.8rem;color:var(--muted)}
.abx-table{margin-top:12px;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:4px}
.abx-row{display:grid;grid-template-columns:34px 1fr auto;gap:8px;padding:8px 12px;font-size:.82rem;border-bottom:1px solid var(--line)}
.abx-row.ok{background:color-mix(in srgb,#12B76A 6%,transparent)}
.abx-row.bad{background:color-mix(in srgb,rgb(var(--rb-red-solid)) 6%,transparent);color:var(--brass-ink)}
.ac-cert-card{margin-top:10px}
.ac-cert-in{border:3px solid #FF3B47;border-radius:0;padding:8px;background:linear-gradient(150deg,#232323,#1B1B1B);color:#fff;text-align:center;opacity:0;transform:translateY(14px);box-shadow:0 24px 60px rgba(14,14,14,.4)}
.ac-cert-in.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ac-cert-in>*{position:relative}
.ac-cert-in{position:relative}
.ac-cert-in::before{content:"";position:absolute;inset:14px;border:1px dashed rgba(255,107,115,.45);border-radius:0;pointer-events:none}
.acc-logo{display:block;height:auto;max-height:44px;width:auto;max-width:min(72%,300px);object-fit:contain;margin:30px auto 10px}
.acci-k{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#FF6B73}
.acci-name{font-family:var(--serif);font-size:clamp(1.6rem,5vw,2.4rem);font-weight:700;margin:16px 0 4px}
.acci-sub{color:rgba(255,255,255,.65);font-size:.9rem}
.acci-course{font-size:clamp(1.05rem,4.5vw,1.4rem);font-weight:800;color:#B1B1B1;margin:10px 8px;overflow-wrap:anywhere}
.acci-meta{font-family:var(--mono);font-size:clamp(.58rem,2.4vw,.74rem);color:rgba(255,255,255,.55);margin:18px 12px 8px;line-height:1.7;overflow-wrap:anywhere}
.acci-verified{display:inline-block;background:rgba(18,183,106,.16);color:#3ddc97;font-weight:800;font-size:.8rem;padding:7px 16px;border-radius:999px;margin-bottom:30px}
.acad-form{border:1.5px dashed color-mix(in srgb,var(--emerald) 40%,var(--line));border-radius:0;padding:16px;margin-bottom:14px;background:color-mix(in srgb,var(--emerald) 3%,transparent)}
.acad-form-h{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.acad-form-h span{font-size:.8rem;color:var(--muted)}
.acad-edit{width:100%;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.acad-crow,.md-row{flex-wrap:wrap}
.acad-ncov{width:56px;height:78px;flex:0 0 auto;border-radius:0;overflow:hidden;position:relative;box-shadow:3px 5px 12px rgba(37,37,37,.25)}
.acad-ncov img{width:100%;height:100%;object-fit:cover}
.acad-nprev{display:flex;align-items:center;gap:10px;margin-top:10px}
.acad-hero-set{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
@media(max-width:640px){.acad-hero-set{grid-template-columns:1fr}}
.acad-hero-prev{aspect-ratio:16/10;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(120% 90% at 50% -10%,#313131,#0F0F0F);display:grid;place-items:center}
.acad-hero-prev img{width:100%;height:100%;object-fit:cover}
.ahp-none{color:rgba(255,255,255,.7);font-size:.78rem;font-family:var(--mono)}
.amp-hero{position:relative;width:100vw;max-width:100%;margin-left:calc(50% - 50vw);overflow:hidden;background:#0F0F0F;color:#fff;text-align:center}
.amp-in{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:100px 20px 48px;display:flex;flex-direction:column;align-items:center}
.amp-dpwrap{display:block;padding:4px;border-radius:50%;background:linear-gradient(135deg,#FF3B47,#747474);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.amp-dp{display:block;width:118px;height:118px;border-radius:50%;object-fit:cover;border:3px solid #0F0F0F}
.amp-badge{display:inline-flex;align-items:center;gap:7px;margin-top:16px;background:rgba(18,183,106,.14);border:1px solid rgba(18,183,106,.4);color:#3ddc97;font-weight:700;font-size:.78rem;padding:6px 14px;border-radius:999px}
.amp-badge .ic{width:14px;height:14px}
.amp-name{font-family:var(--serif);font-size:clamp(1.8rem,5vw,2.8rem);margin:18px 0 4px}
.amp-role{color:rgba(255,255,255,.82);font-weight:600;margin:0}
.amp-qual{color:rgba(255,255,255,.6);font-size:.88rem;margin:6px 0 0}
.amp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:620px;margin:24px auto 0}
@media(max-width:560px){.amp-stats{grid-template-columns:repeat(2,1fr)}}
.amp-stat{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:0;padding:14px 8px;backdrop-filter:blur(8px)}
.amp-stat b{display:block;font-family:var(--mono);font-size:1.15rem;color:#fff}
.amp-stat span{font-size:.68rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em}
.amp-stars{color:#FF6B73;letter-spacing:1px}
.amp-subjects{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.amp-bio{color:rgba(255,255,255,.78);max-width:58ch;margin:16px auto 0;line-height:1.65}
.amp-li{margin-top:14px;border-color:rgba(255,255,255,.35);color:#fff}
.actd-id{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(140deg,#232323,#1B1B1B);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:0;padding:18px;margin-bottom:18px;box-shadow:0 16px 36px rgba(14,14,14,.3);opacity:0;transform:translateY(10px)}
.actd-id.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.actdi-dp{width:62px;height:62px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.4)}
.actdi-meta{flex:1;min-width:0}
.actdi-name{font-weight:800;font-size:1.2rem;display:flex;align-items:center;gap:8px}
.verified-tick-sm{display:inline-flex;vertical-align:middle;color:rgb(var(--rb-verify))}.verified-tick-sm svg{width:15px;height:15px;display:block}
.actdi-role{font-size:.84rem;color:rgba(255,255,255,.7);margin-top:3px}
.actdi-tier{color:var(--tc,#FF6B73);font-weight:800}
.actdi-acts{display:flex;gap:8px;flex-wrap:wrap}
.actdi-acts .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.actd-ms{border:1px solid var(--line);border-radius:0;background:var(--card);padding:16px;margin-bottom:18px;box-shadow:var(--raise);opacity:0;transform:translateY(10px)}
.actd-ms.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.actdm-head{display:flex;justify-content:space-between;gap:10px;font-size:.92rem}
.actdm-head span{font-family:var(--mono);color:var(--muted);font-size:.8rem}
.actdm-bar{height:9px;border-radius:4px;background:color-mix(in srgb,var(--fg) 8%,transparent);overflow:hidden;margin:10px 0}
.actdm-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--emerald),#FF6B73);border-radius:4px;transition:width 1s var(--ease)}
.actdm-p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.55}
.actd-earn{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;border:1px solid var(--line);border-radius:0;background:var(--card);padding:18px;margin-bottom:18px;box-shadow:var(--raise);opacity:0;transform:translateY(10px)}
.actd-earn.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
@media(max-width:760px){.actd-earn{grid-template-columns:1fr}}
.actde-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.actde-k.light{color:#FF8B92}
.actde-big{font-size:2rem;font-weight:800;margin:6px 0 2px;color:var(--emerald-ink)}
.actde-eta{font-size:.84rem;color:var(--brass-ink);font-weight:700}
.actde-rows{display:flex;flex-direction:column;gap:5px;margin-top:12px;font-size:.86rem;color:var(--muted)}
.actde-rows b{color:var(--fg)}
.acch{display:flex;gap:10px;align-items:flex-end;height:150px;margin-top:12px}
.acch-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.acch-col b{font-size:.68rem;color:var(--muted);font-family:var(--mono);font-weight:600}
.acch-bar{position:relative;width:100%;max-width:44px;height:var(--h,4%);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#747474,#252525);transition:height .9s var(--ease);min-height:4px}
.acch-bar span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:.6rem;font-family:var(--mono);color:var(--muted);white-space:nowrap}
.actd-rev{border:1px solid var(--line);border-radius:0;background:var(--card);padding:16px;margin-bottom:18px;box-shadow:var(--raise);opacity:0;transform:translateY(10px)}
.actd-rev.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.actdr-row{padding:10px 0;border-bottom:1px solid var(--line)}
.actdr-row:last-child{border-bottom:0}
.actdr-row p{margin:4px 0;font-size:.92rem;line-height:1.5}
.actdr-by{font-size:.76rem;color:var(--muted);font-family:var(--mono)}
.actd-promo{position:relative;overflow:hidden;border-radius:0;background:radial-gradient(110% 140% at 85% 0%,#313131 0%,#252525 55%,#0F0F0F 100%);color:#fff;padding:22px;margin-bottom:8px;opacity:0;transform:translateY(10px)}
.actd-promo.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.actd-promo h3{margin:8px 0 6px;font-family:var(--serif);font-size:1.35rem}
.actd-promo p{margin:0 0 14px;color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.6;max-width:60ch}
.actdp-row{display:flex;gap:8px;flex-wrap:wrap}
.actdp-row .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.acfee{border:1px solid var(--line);border-radius:0;background:var(--bg);padding:14px;margin:12px 0 4px}
.acfee.free{color:var(--emerald-ink);font-weight:600;font-size:.9rem;line-height:1.55}
.acfee-h{font-weight:800;margin-bottom:10px}
.acfee-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px dashed var(--line)}
.acfee-l b{display:block;font-size:.9rem}
.acfee-l span{display:block;font-size:.76rem;color:var(--muted);line-height:1.45;margin-top:2px}
.acfee-a{font-family:var(--mono);font-weight:700;white-space:nowrap;color:var(--muted)}
.acfee-row.you{background:color-mix(in srgb,var(--emerald) 7%,transparent);border-radius:4px;padding:11px 12px;border-top:0;margin-top:6px}
.acfee-row.you .acfee-a{color:var(--emerald-ink);font-size:1.05rem}
.acfee-f{font-size:.74rem;color:var(--muted);margin-top:10px;font-family:var(--mono)}
.acc-empty-note{border:1.5px dashed color-mix(in srgb,var(--emerald) 45%,var(--line));background:color-mix(in srgb,var(--emerald) 5%,transparent);border-radius:0;padding:14px 16px;font-size:.9rem;line-height:1.55;color:var(--fg);margin-bottom:12px}
.acr-form{border:1px solid var(--line);border-radius:0;background:var(--card);padding:14px;margin-bottom:14px}
.acr-form-h{font-weight:800;margin-bottom:8px}
.acr-stars{display:flex;gap:4px;margin-bottom:10px}
.acr-star{background:none;border:0;font-size:1.6rem;color:color-mix(in srgb,var(--fg) 20%,transparent);cursor:pointer;padding:2px;transition:transform .12s var(--ease),color .12s}
.acr-star:hover{transform:scale(1.15)}
.acr-star.on{color:#FF6B73}
.acr-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.acr-row:last-child{border-bottom:0}
.acr-row img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.acr-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.9rem}
.acr-at{font-size:.72rem;color:var(--muted);font-family:var(--mono)}
.acr-row p{margin:4px 0 0;font-size:.9rem;line-height:1.55}
.actde-upi{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:.84rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.actdeu-ok{color:var(--emerald-ink)}
.actdeu-warn{color:var(--brass-ink);font-weight:600}
.lib-hero{position:relative;width:100vw;max-width:100%;margin-left:calc(50% - 50vw);overflow:hidden;background:#0F0F0F;color:#fff;text-align:center;min-height:calc(100dvh - var(--header-h));display:flex;align-items:center;justify-content:center}
.lib-hero-in{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:110px 20px 60px;width:100%}
.lib-title{font-family:var(--serif);font-size:clamp(2rem,6vw,3.4rem);margin:18px 0 26px;letter-spacing:-.01em}
.lib-title em{font-style:italic;color:#FF6B73}
.lib-searchwrap{position:relative;max-width:560px;margin:0 auto}
.lib-search{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.97);border-radius:999px;padding:0 20px;height:58px;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:box-shadow .2s}
.lib-search:focus-within{box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 4px rgba(255,59,71,.25)}
.lib-search .ic{width:19px;height:19px;color:#252525;flex:0 0 auto}
.lib-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-family:inherit;font-size:1.05rem;color:#121212}
.lib-search button{background:none;border:0;cursor:pointer;color:#6A6A6A;display:grid;place-items:center}
.lib-search button[hidden]{display:none}
.lib-search button .ic{width:16px;height:16px;color:#6A6A6A}
.lib-suggest{position:absolute;left:12px;right:12px;top:64px;background:#fff;border-radius:0;box-shadow:0 22px 54px rgba(0,0,0,.4);overflow:hidden;z-index:5;text-align:left}
.lib-sug{display:flex;align-items:center;gap:11px;width:100%;padding:12px 18px;background:none;border:0;cursor:pointer;font-family:inherit;font-size:.95rem;color:#121212;text-align:left}
.lib-sug:hover{background:#F5F5F5}
.ls-k{color:#969696;font-size:.9rem;flex:0 0 auto}
.lib-sub{color:rgba(255,255,255,.72);margin:18px 0 0;font-size:.9rem}
.certv-card{background:var(--card);border:1px solid var(--line);border-radius:0;padding:30px;text-align:center;box-shadow:var(--raise);opacity:0;transform:translateY(12px)}
.certv-card.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.certv-seal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:linear-gradient(135deg,#252525,#313131);color:#FF6B73;box-shadow:0 12px 28px rgba(37,37,37,.3)}
.certv-seal .ic{width:28px;height:28px}
.certv-card h1{font-family:var(--serif);margin:0 0 8px;font-size:1.6rem}
.certv-card p{color:var(--muted);margin:0 0 18px;line-height:1.6}
.certv-row{display:flex;gap:10px;max-width:420px;margin:0 auto}
.certv-row .inp{text-transform:uppercase;font-family:var(--mono);letter-spacing:.04em}
.certv-hint{font-size:.78rem!important;margin-top:12px!important;font-family:var(--mono)}
.ac-more-wrap{display:flex;justify-content:center;margin-top:26px}
.ac-morebtn{border:1.5px solid var(--line);background:var(--card);color:var(--fg);font-weight:700;padding:12px 34px;border-radius:999px;box-shadow:var(--raise);transition:transform .15s var(--ease),border-color .15s}
.ac-morebtn:hover{transform:translateY(-2px);border-color:var(--emerald)}
.ac-libcta{text-align:center;margin-top:26px}
.ac-libbtn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#252525,#313131);color:#fff;font-weight:800;padding:15px 34px;border-radius:999px;box-shadow:0 16px 38px rgba(37,37,37,.35);border:1px solid rgba(255,255,255,.12);transition:transform .18s var(--ease),box-shadow .2s}
.ac-libbtn:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(37,37,37,.45)}
.ac-libbtn .ic{width:17px;height:17px;color:#FF6B73}
.ac-libarrow{transition:transform .18s var(--ease)}
.ac-libbtn:hover .ac-libarrow{transform:translateX(4px)}
.ac-libcta p{color:var(--muted);font-size:.8rem;margin:10px 0 0;font-family:var(--mono)}
.acfee-note{font-size:.76rem;color:var(--muted);line-height:1.5;margin-bottom:8px}
.actd-page{border:1px solid var(--line);border-radius:0;background:var(--card);padding:16px;margin-bottom:18px;box-shadow:var(--raise);opacity:0;transform:translateY(10px)}
.actd-page.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.actdp-pre{align-self:center;font-family:var(--mono);font-size:.78rem;color:var(--muted);white-space:nowrap}
.acad-shelfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.acad-shelfcat{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;padding:9px 12px;font-size:.86rem;cursor:pointer;background:var(--bg)}
.acad-shelfcat i{color:var(--emerald-ink);font-style:normal;font-size:.6rem}
.acci-foot{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:12px;align-items:end;margin:26px clamp(10px,4vw,26px) 10px;padding-top:18px;border-top:1px dashed rgba(255,107,115,.35)}
@media(max-width:560px){.acci-foot{grid-template-columns:1fr;gap:18px;align-items:center}.accf-cell{min-height:0}}
.accf-cell{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:64px;justify-content:flex-end}
.accf-seal{max-height:84px;max-width:120px;object-fit:contain}
.accf-code b{font-family:var(--mono);letter-spacing:.02em;color:#B1B1B1;font-size:clamp(.68rem,2.9vw,.95rem);white-space:nowrap;max-width:100%}
.accf-code span,.accf-sign span{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.accf-sign img{max-height:52px;max-width:150px;object-fit:contain;filter:brightness(1.1)}
.accf-sign b{font-size:.84rem}
.acad-updrow{display:flex;gap:8px}
.acad-updrow .inp{flex:1;min-width:0}
.acad-ev{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:.84rem}
.acad-ev span{color:var(--muted);font-family:var(--mono);font-size:.76rem}
/* ---- SHARP EDITORIAL INK ---- */
.btn{border-radius:4px;border:1.5px solid var(--inkb);box-shadow:none}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:active{transform:scale(.98)}
.acx-pill,.lib-search,.acg-cat,.acg-free,.acg-paid,.amp-badge,.acn-cat,.acl-type,.acqr-badge,.acci-verified,.eyebrow,.acg-view,.actdi-tier,.acad-shelfcat{border-radius:999px!important}
.ach-x{border-radius:50%!important}
.acg-card,.actd-stat,.ac-why-cell,.ac-toolbar,.actc-row,.acad-form,.actd-ms,.actd-earn,.actd-rev,.actd-page,.certv-card,.acr-form,.acl-tli,.actd-id,.acfee,.acc-card,.acl-hero,.md-row{border-width:1.5px;border-color:color-mix(in srgb,var(--inkb) 45%,var(--line))}
.actd-stat,.ac-why-cell{transition:transform .18s var(--ease),box-shadow .18s}
.actd-stat:hover,.ac-why-cell:hover{transform:translateY(-3px)}
.ac-h2{letter-spacing:-.02em}
.ac-morebtn,.ac-libbtn{border-radius:4px}
.lib-suggest{border-radius:0;border:1.5px solid var(--inkb)}
.ac-hero::after,.b30-hero::after,.lib-hero::after,.amp-hero::after,.ac-mentor-band::after,.actd-promo::after,.acl-continue::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.ac-hero-in,.acmb-in,.lib-hero-in,.amp-in,.actd-promo>*{position:relative;z-index:2}
.ac-marquee{position:relative;z-index:2;margin-top:26px;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);overflow:hidden;padding:10px 0}
.acm-track{display:inline-block;white-space:nowrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);animation:acmScroll 30s linear infinite}
@keyframes acmScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.acm-track{animation:none}}
/* ---- EXAM ROOM ---- */
.ac-modal.exam{top:0;bottom:0!important;z-index:400;background:var(--bg);backdrop-filter:none;padding:0;align-items:stretch;justify-content:stretch}
.ac-modal.exam .ac-sheet{max-width:none;width:100%;max-height:none;height:100%;border-radius:0;box-shadow:none;background:var(--bg);padding:0;display:flex;flex-direction:column;overflow:auto}
.ac-modal.exam .ach-x{position:fixed;top:14px;right:16px;z-index:6;background:var(--card);border:1.5px solid var(--line)}
.ac-modal.exam .acq-head{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1.5px solid var(--inkb);padding:16px clamp(16px,4vw,30px);padding-right:74px;margin:0}
.ac-modal.exam .acq-title{font-family:var(--serif);font-size:clamp(1.1rem,2.6vw,1.5rem);letter-spacing:-.01em}
.ac-modal.exam .acq-progress{margin:0;height:5px;border-radius:0;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.ac-modal.exam .acq-progress i{border-radius:0;background:linear-gradient(90deg,rgb(var(--rb-red-solid)),#FF6B73)}
.ac-modal.exam #acqStage{flex:1;width:100%}
.ac-modal.exam .acq-card,.ac-modal.exam .acq-grading,.ac-modal.exam .acq-result{max-width:780px;margin:0 auto;padding:clamp(22px,5vh,48px) clamp(16px,4vw,30px) 40px}
.ac-modal.exam .acq-n{color:var(--brass-ink);font-weight:700}
.ac-modal.exam .acq-q{font-family:var(--serif);font-size:clamp(1.35rem,3.4vw,1.9rem);line-height:1.4;letter-spacing:-.01em;margin:10px 0 26px}
.ac-modal.exam .acq-opt{border:1.5px solid color-mix(in srgb,var(--inkb) 45%,var(--line));border-radius:4px;background:var(--card);padding:16px;font-size:1.02rem;transition:transform .12s var(--ease),border-color .12s,background .12s}
.ac-modal.exam .acq-opt:hover{border-color:var(--inkb);background:color-mix(in srgb,var(--fg) 3%,var(--card))}
.ac-modal.exam .acq-opt.sel{border-color:rgb(var(--rb-red-solid));background:color-mix(in srgb,rgb(var(--rb-red-solid)) 6%,var(--card))}
.ac-modal.exam .acq-opt.sel .acq-key{background:rgb(var(--rb-red-solid));color:#fff}
.ac-modal.exam .acq-key{border-radius:4px;font-family:var(--mono)}
.ac-modal.exam .acq-foot{max-width:780px;margin:0 auto;padding:0 clamp(16px,4vw,30px) 44px;justify-content:flex-end;width:100%;box-sizing:border-box}
.ac-modal.exam .acq-timer{background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:5px 12px 5px 6px}
.ac-modal.exam .acqr-donut{width:170px;height:170px}
.ac-modal.exam .acqr-row{background:var(--card)}
/* ---- BOOK PAGE ---- */
.bk-wrap{display:grid;grid-template-columns:300px 1fr;gap:clamp(22px,5vw,54px);align-items:start;max-width:960px;margin:0 auto;padding:clamp(26px,6vh,60px) 20px 70px}
@media(max-width:720px){.bk-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}}
.bk-coverwrap{position:relative;opacity:0;transform:translateY(12px)}
.bk-coverwrap.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.bk-wrap>div[data-reveal]:last-child{opacity:0;transform:translateY(12px)}
.bk-wrap>div[data-reveal]:last-child.in{opacity:1;transform:none;transition:opacity .5s var(--ease) .08s,transform .5s var(--ease) .08s}
.bk-cover{display:block;width:100%;max-width:300px;border:1.5px solid var(--inkb);box-shadow:var(--raise)}
.bk-free{position:absolute;top:-13px;right:-13px;background:rgb(var(--rb-red-solid));color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.08em;padding:7px 13px;border:1.5px solid var(--inkb);transform:rotate(3deg)}
.bk-crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.bk-crumb a{color:var(--brass-ink)}
.bk-cat{display:inline-block;background:var(--emerald);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;margin-bottom:14px}
.bk-title{font-family:var(--serif);font-size:clamp(1.7rem,4.6vw,2.7rem);letter-spacing:-.02em;margin:0 0 12px;line-height:1.15}
.bk-desc{color:var(--muted);line-height:1.7;margin:0 0 18px;max-width:56ch}
.bk-dl{font-family:var(--mono);font-weight:700;color:var(--emerald-ink);margin-bottom:22px}
.bk-note{font-size:.78rem;color:var(--muted);font-family:var(--mono);margin-top:12px}
.ac-notes-hero{min-height:38vh!important}
.ac-notes-hero .ah-inner{padding:96px 20px 34px}

/* ---- STATUS / STORIES ---- */
.vu-intro{display:flex;gap:9px;font-size:.86rem;line-height:1.5;color:var(--fg);background:linear-gradient(135deg,color-mix(in srgb,var(--emerald) 8%,transparent),color-mix(in srgb,var(--brass) 8%,transparent));border:1px solid color-mix(in srgb,var(--emerald) 20%,var(--line));border-radius:4px;padding:12px 14px;margin-bottom:16px}
.vu-intro .ic{width:18px;height:18px;color:var(--brass);flex:0 0 auto;margin-top:2px}
.vu-drop{display:block;border:2px dashed color-mix(in srgb,var(--emerald) 40%,var(--line));border-radius:0;padding:26px 16px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s;background:color-mix(in srgb,var(--fg) 2%,transparent)}
.vu-drop:hover{border-color:var(--emerald)}
.vu-drop.has{border-style:solid;border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 6%,transparent)}
.vu-drop-in{display:flex;flex-direction:column;align-items:center;gap:6px}
.vu-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--emerald);color:#fff}
.vu-ic .ic{width:22px;height:22px;fill:#fff;stroke:none}
.vu-txt{font-weight:700}
.vu-sub{font-size:.78rem;color:var(--muted)}
.vu-progress{height:6px;border-radius:6px;background:color-mix(in srgb,var(--fg) 10%,transparent);margin-top:12px;overflow:hidden;display:none}
.vu-progress.on{display:block}
.vu-bar{height:100%;width:0;background:linear-gradient(90deg,var(--emerald),var(--brass));border-radius:6px;transition:width .2s}
.vs-row{display:grid;grid-template-columns:180px 1fr;gap:14px;background:var(--bg);border:1px solid var(--line);border-radius:0;padding:12px;margin-bottom:10px}
@media(max-width:620px){.vs-row{grid-template-columns:1fr}}
.vs-video{width:100%;border-radius:4px;background:#000;max-height:220px}
.vs-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.vs-title{font-weight:700}
.vs-kind{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;background:color-mix(in srgb,var(--emerald) 14%,transparent);color:var(--emerald-ink);padding:2px 7px;border-radius:999px;margin-left:6px}
.vs-by{font-size:.85rem;color:var(--muted)}
.vs-handles{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.vs-link{width:100%}
.vs-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
/* ---- STATUS / STORIES ---- */
.status-strip{border-bottom:1px solid var(--line);background:var(--bg)}
.status-scroll{display:flex;gap:14px;overflow-x:auto;padding:14px 16px;max-width:var(--maxw);margin:0 auto;scrollbar-width:none}
.status-scroll::-webkit-scrollbar{display:none}
.st-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;background:none;border:0;cursor:pointer;padding:0;text-decoration:none;color:var(--fg)}
.st-ring{width:66px;height:66px;border-radius:50%;padding:3px;display:grid;place-items:center;background:linear-gradient(135deg,#747474,#646464 45%,rgb(var(--rb-red-solid)));position:relative}
.st-item.seen .st-ring{background:color-mix(in srgb,var(--fg) 22%,transparent)}
.st-ring-add{background:color-mix(in srgb,var(--fg) 18%,transparent)}
.st-thumb,.st-dp{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--card);display:grid;place-items:center;border:2px solid var(--bg)}
.st-thumb img,.st-dp img{width:100%;height:100%;object-fit:cover}
.st-dp .ic{width:24px;height:24px;color:var(--muted)}
.st-plus{position:absolute;right:-1px;bottom:-1px;width:22px;height:22px;border-radius:50%;background:var(--emerald);border:2px solid var(--bg);display:grid;place-items:center}
.st-plus .ic{width:13px;height:13px;color:#fff}
.st-name{font-size:.72rem;color:var(--muted);max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.story-viewer{position:fixed;inset:0;z-index:420;background:#101010;display:none;flex-direction:column}
.story-viewer.open{display:flex}
.sv-bars{display:flex;gap:5px;padding:12px 14px 4px;position:relative;z-index:3}
.sv-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.sv-bar i{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.sv-top{display:flex;align-items:center;gap:10px;padding:6px 14px 10px;position:relative;z-index:3}
.sv-brand{height:22px;display:flex;align-items:center}
.sv-brand img{height:22px;width:auto}
.sv-time{color:rgba(255,255,255,.8);font-size:.82rem}
.sv-close{margin-left:auto;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center}
.sv-close .ic{width:22px;height:22px}
.sv-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#101010}
.sv-img-el{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block}
.sv-loader{position:absolute;width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin 1s linear infinite;z-index:1}
.sv-yt{position:absolute;inset:0}
.sv-yt iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;aspect-ratio:9/16;min-height:100%;border:0}
.sv-cap{position:absolute;left:0;right:0;bottom:96px;z-index:2;text-align:center;color:#fff;font-size:1.05rem;font-weight:600;padding:0 24px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.sv-nav{position:absolute;top:64px;bottom:90px;width:35%;background:transparent;border:0;cursor:pointer;z-index:2}
.sv-prev{left:0}.sv-next{right:0}
.sv-cta{position:absolute;left:0;right:0;bottom:26px;z-index:3;text-align:center;display:none}
.sv-cta-btn{display:inline-block;padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,#252525,#747474 70%,rgb(var(--rb-red-solid)));color:#fff;font-weight:700;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sv-cta-btn.ghost{background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
@media (min-width:1024px){
  .story-viewer{align-items:center}
  .story-viewer .sv-stage,.story-viewer .sv-bars,.story-viewer .sv-top,.story-viewer .sv-cta{max-width:440px;width:100%;margin-left:auto;margin-right:auto}
  .story-viewer{display:none}
  .story-viewer.open{display:flex}
}
/* ---- SHORTS (vertical YouTube clone) ---- */
.shorts-stage{position:relative;height:calc(100dvh - var(--header-h) - var(--nav-h));overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#000;margin-bottom:calc(var(--nav-h) * -1)}
.shorts-stage::-webkit-scrollbar{display:none}
@media (min-width:1024px){.shorts-stage{height:calc(100dvh - var(--header-h))}}
.short-slide{scroll-snap-align:start;scroll-snap-stop:always;height:calc(100dvh - var(--header-h) - var(--nav-h));position:relative;background:#000;overflow:hidden}
@media (min-width:1024px){.short-slide{height:calc(100dvh - var(--header-h))}}
.short-frame{position:absolute;inset:0;overflow:hidden;background:#000}
.short-frame .short-mount{position:absolute;inset:0}
.short-frame iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.35);width:100%;height:auto;aspect-ratio:9/16;min-height:100%;border:0;pointer-events:none}
.short-tap{position:absolute;inset:0;z-index:3;border:0;background:transparent;cursor:pointer;padding:0;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
@media (min-width:1024px){
  .short-slide{display:flex;align-items:center;justify-content:center}
  .short-frame{position:relative;inset:auto;width:auto;height:100%;aspect-ratio:9/16;max-height:100%;border-radius:0;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  .short-frame iframe{width:100%;height:100%;aspect-ratio:auto;min-height:0;transform:translate(-50%,-50%) scale(1.32)}
}
.short-rail{position:fixed;right:10px;bottom:calc(var(--nav-h) + 18px);z-index:40;display:flex;flex-direction:column;gap:14px;align-items:center}
@media (min-width:1024px){.short-rail{bottom:28px;right:max(18px,calc(50vw - 190px - 70px))}}
.short-rail .sr-nav,.short-rail .sr-soc{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;color:#fff;background:rgba(20,20,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .12s var(--ease),background .18s}
.short-rail .sr-nav:hover,.short-rail .sr-soc:hover{transform:scale(1.08);background:rgba(20,20,20,.78)}
.short-rail .sr-nav:active{transform:scale(.94)}
.short-rail .sr-nav .ic{width:24px;height:24px}
.short-rail .sr-nav[data-dir="down"] .ic{transform:rotate(180deg)}
.short-rail .sr-soc .ic{width:22px;height:22px}
.short-rail .sr-soc{margin-top:0}
.short-rail .wa{background:rgba(37,211,102,.92)}
.short-rail .tg{background:rgba(42,171,238,.92)}
.short-rail .fb{background:rgba(24,119,242,.92)}
.short-rail .li{background:rgba(10,102,194,.92)}
.short-rail .x{background:rgba(20,20,20,.9)}
.short-rail .sr-soc.wa:hover{background:rgba(37,211,102,1)}
.short-rail .sr-soc.tg:hover{background:rgba(42,171,238,1)}
.short-rail .sr-soc.fb:hover{background:rgba(24,119,242,1)}
.short-rail .sr-soc.li:hover{background:rgba(10,102,194,1)}
.short-rail .sr-soc.x:hover{background:#000}
/* ---- VIDEOS ---- */
.vid-hero{min-height:44vh!important}
.vid-hero .ah-inner{padding:96px 20px 40px}
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:8px}
@media (max-width:560px){.vid-grid{grid-template-columns:1fr}}
.vid-card{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:0;overflow:hidden;cursor:pointer;padding:0;box-shadow:var(--raise);transition:transform .16s var(--ease),box-shadow .18s;display:flex;flex-direction:column}
.vid-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(37,37,37,.16)}
.vc-thumb{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden}
.vc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vc-play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:rgb(var(--rb-red-solid) / .92);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:transform .16s var(--ease)}
.vid-card:hover .vc-play{transform:scale(1.08)}
.vc-play .ic{width:26px;height:26px;fill:#fff;stroke:none;margin-left:3px}
.vc-title{padding:13px 15px 15px;font-weight:600;font-size:.98rem;line-height:1.35;color:var(--fg)}
.vid-player{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center}
.vid-player.open{display:flex}
.vid-player:fullscreen{background:#000}
.vid-player:-webkit-full-screen{background:#000}
.vid-player .vp-frame{width:100%;max-width:min(96vw,calc((100vh - 20px) * 16 / 9));aspect-ratio:16/9}
.vid-player:fullscreen .vp-rotate{width:100%;height:100%}
.vid-player:fullscreen .vp-frame{width:100%;height:100%;max-width:100vw;aspect-ratio:auto}
.vid-player .vp-frame iframe{width:100%;height:100%;border:0;border-radius:4px}
.vid-player:fullscreen .vp-frame iframe{border-radius:0}
.vid-player .vp-rotate{width:100%;display:flex;align-items:center;justify-content:center;padding:10px}
.vp-close{position:absolute;top:14px;right:14px;z-index:5;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center}
.vp-close:hover{background:rgba(255,255,255,.26)}
.vp-close .ic{width:24px;height:24px}
@media (max-width:820px) and (orientation:portrait){
  .vid-player .vp-rotate{transform:rotate(90deg);transform-origin:center}
  .vid-player .vp-frame{width:calc(100vh - 20px);max-width:none}
}

.cta-band{background:var(--ink);color:#F2EFE9;border-radius:var(--r-lg);padding:clamp(28px,5vw,52px);margin:28px 0;text-align:center}
html[data-theme="dark"] .cta-band{border:1px solid var(--line)}
.cta-band h2{font-size:clamp(1.6rem,4vw,2.4rem);color:#fff}
.cta-band p{color:#BFBFBF;max-width:46ch;margin:12px auto 0}
.cta-band .hero-cta{justify-content:center}
.cta-band .btn-ghost{background:var(--brass);color:#fff;border-color:var(--brass)}
.cta-band .btn-ghost:hover{filter:brightness(1.1)}

.page-head{padding:34px 0 8px}
.page-head .kicker{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.page-head h1{font-size:clamp(1.9rem,5vw,3rem);margin-top:10px}
.page-head p{color:var(--muted);max-width:56ch;margin:12px 0 0;font-size:1.05rem}
.empty{background:var(--card);border:1px dashed color-mix(in srgb,var(--emerald) 32%,var(--line));border-radius:var(--r-lg);padding:clamp(26px,5vw,48px);text-align:center;margin:24px 0}
.empty .em-ic{width:46px;height:46px;border-radius:0;display:grid;place-items:center;margin:0 auto 14px;background:color-mix(in srgb,var(--emerald) 12%,transparent);color:var(--emerald-ink)}
.empty .em-ic .ic{width:24px;height:24px}
.empty h3{font-size:1.35rem}
.empty p{color:var(--muted);max-width:44ch;margin:10px auto 18px}

.foot{border-top:1px solid var(--line);margin-top:30px;padding:28px 0 40px}
.foot .foot-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.foot .row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.foot .links{display:flex;flex-wrap:wrap;gap:8px}
.foot .links a{font-size:.86rem;color:var(--muted);padding:6px 10px;border:1px solid var(--line);border-radius:999px}
.foot .meta{font-size:.82rem;color:var(--muted)}
.foot .meta b{color:var(--emerald-ink)}
.crafted{display:inline-flex;align-items:center;gap:5px;font-size:.86rem;color:var(--muted);font-weight:500}
.cwl-heart{display:inline-block;color:rgb(var(--rb-red-solid));font-size:1.05em;animation:heartbeat 1.1s ease-in-out infinite}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);color:var(--muted);transition:all .16s var(--ease)}
.social-btn:hover{border-color:var(--emerald);color:var(--emerald-ink);transform:translateY(-2px)}
.social-btn .ic{width:17px;height:17px}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ---- CALCULATORS ---- */
.calc-shell{padding:8px 20px 10px}
.calc-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:none}
.calc-tabs::-webkit-scrollbar{display:none}
.calc-tab{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:11px 16px;border-radius:4px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .14s var(--ease),border-color .18s,color .18s,background .18s}
.calc-tab .ic{width:18px;height:18px}
.calc-tab:hover{transform:translateY(-2px)}
.calc-tab[aria-selected="true"]{color:#fff;background:var(--emerald);border-color:var(--emerald);box-shadow:0 6px 16px rgba(37,37,37,.28)}
.calc-panel{display:none}
.calc-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:18px;animation:cfade .4s var(--ease)}
@keyframes cfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:880px){.calc-panel.active{grid-template-columns:1fr}}
.calc-controls{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--raise)}
.field{margin-bottom:20px}.field:last-child{margin-bottom:0}
.field .flabel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.field .flabel span{font-size:.92rem;font-weight:600;color:var(--fg)}
.field .vchip{font-family:var(--mono);font-size:.92rem;font-weight:600;color:var(--emerald-ink);background:color-mix(in srgb,var(--emerald) 10%,transparent);border:1px solid color-mix(in srgb,var(--emerald) 22%,var(--line));border-radius:4px;padding:5px 10px;min-width:96px;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--emerald) 0%,var(--emerald) var(--fill,40%),var(--line) var(--fill,40%));outline-offset:4px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--card);border:3px solid var(--emerald);box-shadow:0 2px 8px rgba(37,37,37,.35);transition:transform .12s var(--ease)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--card);border:3px solid var(--emerald);box-shadow:0 2px 8px rgba(37,37,37,.35)}
.field .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:7px}
.calc-result{background:var(--ink);color:#F2EFE9;border-radius:var(--r-lg);padding:24px;box-shadow:var(--raise);display:flex;flex-direction:column;position:relative;overflow:hidden}
html[data-theme="dark"] .calc-result{border:1px solid var(--line)}
.calc-result::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0,rgba(116,116,116,.34),transparent 60%),radial-gradient(80% 70% at 0 100%,rgb(var(--rb-red-solid) / .20),transparent 55%);pointer-events:none}
.calc-result .rlabel{position:relative;font-size:.84rem;color:#BFBFBF;font-weight:600}
.calc-result .rbig{position:relative;font-size:clamp(2.3rem,7vw,3.4rem);font-weight:600;line-height:1.04;margin:6px 0 2px;color:#fff;transition:transform .18s var(--ease)}
.calc-result .rbig.pulse{transform:scale(1.03)}
.calc-result .rsub{position:relative;font-size:.92rem;color:#D4D4D4}
.donut-wrap{position:relative;display:grid;place-items:center;margin:18px auto 6px}
.donut{transform:rotate(-90deg)}
.donut circle{fill:none;stroke-linecap:round;transition:stroke-dashoffset .7s var(--ease)}
.donut .track{stroke:rgba(255,255,255,.12)}
.donut .arc1{stroke:var(--emerald)}.donut .arc2{stroke:var(--brass)}
.donut-mid{position:absolute;text-align:center}
.donut-mid .dm-v{font-family:var(--mono);font-weight:600;font-size:1.1rem;color:#fff}
.donut-mid .dm-k{font-size:.66rem;color:#BFBFBF;text-transform:uppercase;letter-spacing:.1em}
.legend{position:relative;display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.legend .lg{display:flex;align-items:center;gap:8px;font-size:.86rem;color:#D4D4D4}
.legend .dot{width:11px;height:11px;border-radius:3px}
.legend .dot.e{background:var(--emerald)}.legend .dot.b{background:var(--brass)}
.legend .v{font-family:var(--mono);color:#fff;font-weight:600;margin-left:2px}
.share-row{position:relative;margin-top:auto;padding-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.share-row .btn-wa{flex:1 1 auto;justify-content:center}
.share-row .btn-copy{flex:0 0 auto;min-width:96px;justify-content:center}
.btn-wa{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;border-radius:4px;background:#25D366;color:#06351b;font-weight:700;font-size:.96rem;border:0;cursor:pointer;transition:transform .12s var(--ease),filter .18s}
.btn-wa:hover{filter:brightness(1.04)}.btn-wa:active{transform:translateY(1px) scale(.99)}.btn-wa .ic{width:19px;height:19px}
.btn-copy{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:4px;background:rgba(255,255,255,.08);color:#fff;font-weight:600;border:1px solid rgba(255,255,255,.18);cursor:pointer;transition:background .18s}
.btn-copy:hover{background:rgba(255,255,255,.14)}
.assume{font-size:.78rem;color:var(--muted);margin-top:14px;line-height:1.5}

/* ---- AUTH ---- */
.auth-wrap{min-height:calc(100vh - var(--header-h) - 80px);display:grid;place-items:center;padding:28px 18px}
.auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--raise);padding:30px 26px;position:relative;overflow:hidden}
.auth-card .badge-spark{display:none}
.progress{display:flex;gap:6px;margin-bottom:22px}
.progress i{height:5px;flex:1;border-radius:999px;background:var(--line);transition:background .3s var(--ease)}
.progress i.on{background:var(--emerald)}
.auth-h{font-size:1.7rem;margin-bottom:6px}
.auth-sub{color:var(--muted);font-size:.96rem;margin-bottom:22px}
.step{display:none}.step.active{display:block;animation:sfade .35s var(--ease)}
@keyframes sfade{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.lbl{display:block;font-size:.86rem;font-weight:600;margin:0 0 8px}
.inp{width:100%;height:52px;padding:0 14px;border-radius:4px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);font-size:1.05rem;font-family:var(--sans);transition:border-color .18s,box-shadow .18s}
.inp:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 4px color-mix(in srgb,var(--emerald) 14%,transparent)}
textarea.inp{height:auto;padding:12px 14px;resize:vertical;min-height:84px;line-height:1.5}
.phone-row{display:flex;gap:10px}
.cc{display:flex;align-items:center;gap:6px;height:52px;padding:0 14px;border-radius:4px;border:1.5px solid var(--line);background:var(--bg);font-weight:600;color:var(--muted);white-space:nowrap}
.handle-row{position:relative}
.handle-row .at{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-family:var(--mono)}
.handle-row .inp{padding-left:30px;font-family:var(--mono)}
.avail{font-size:.82rem;margin-top:8px;font-weight:600;min-height:1.2em}
.avail.ok{color:var(--emerald-ink)}.avail.no{color:var(--alert)}.avail.idle{color:var(--muted)}
.consent{display:flex;gap:11px;align-items:flex-start;margin:18px 0 4px;font-size:.9rem;color:var(--muted);line-height:1.45;cursor:pointer}
.feature-toggle{display:flex;gap:12px;align-items:flex-start;margin:14px 0 4px;padding:14px 16px;border-radius:0;cursor:pointer;background:linear-gradient(135deg,color-mix(in srgb,var(--emerald) 8%,transparent),color-mix(in srgb,var(--brass) 8%,transparent));border:1px solid color-mix(in srgb,var(--emerald) 22%,var(--line))}
.feature-toggle input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--brass)}
.feature-toggle .ft-title{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--fg);font-size:.94rem}
.feature-toggle .ft-title .ic{width:16px;height:16px;color:var(--brass)}
.feature-toggle .ft-sub{display:block;margin-top:4px;font-size:.82rem;color:var(--muted);line-height:1.45}
.consent input{width:22px;height:22px;margin-top:1px;accent-color:var(--emerald);flex:0 0 auto;cursor:pointer}
.field-gap{margin-bottom:16px}
.otp-row{display:flex;gap:9px;justify-content:space-between;margin:4px 0 6px}
.otp-box{width:100%;aspect-ratio:1/1.15;max-width:54px;text-align:center;font-family:var(--mono);font-size:1.5rem;font-weight:600;border-radius:4px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg)}
.otp-box:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 4px color-mix(in srgb,var(--emerald) 14%,transparent)}
.otp-box.filled{border-color:var(--emerald)}
.err{color:var(--alert);font-size:.86rem;font-weight:600;margin:10px 0 0;min-height:1.1em}
.muted-row{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:.88rem;color:var(--muted)}
.linkbtn{background:0;border:0;color:var(--emerald-ink);font:inherit;font-weight:600;cursor:pointer;padding:0}
.linkbtn[disabled]{color:var(--muted);cursor:default}
.dev-banner{margin:0 0 18px;padding:11px 14px;border-radius:4px;background:color-mix(in srgb,var(--brass) 16%,transparent);border:1px solid color-mix(in srgb,var(--brass) 40%,var(--line));font-size:.86rem;color:var(--brass-ink);font-weight:600}
.dev-banner b{font-family:var(--mono);font-size:1.05rem}
.spin{display:inline-block;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.success{text-align:center;padding:10px 0}
.success .seal{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:linear-gradient(135deg,var(--emerald),#0a4d39);color:#fff;box-shadow:0 14px 36px rgba(37,37,37,.42);animation:seal .5s var(--ease) both}
.success .seal .ic{width:46px;height:46px;stroke-width:2.4}
@keyframes seal{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.success h2{font-size:1.7rem;margin-bottom:8px}
.success p{color:var(--muted);margin-bottom:10px}
.badge-pop{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:color-mix(in srgb,var(--brass) 16%,transparent);border:1px solid color-mix(in srgb,var(--brass) 42%,var(--line));color:var(--brass-ink);font-weight:700;font-size:.9rem;margin:6px 0 20px;animation:seal .5s .25s var(--ease) both}
.badge-pop .ic{width:18px;height:18px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:300}
/* ---- my contributions engagement ---- */
.mp-impact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.mp-imp{background:var(--card);border:1px solid var(--line);padding:16px 14px;text-align:center;box-shadow:var(--raise);position:relative;overflow:hidden}
.mp-imp::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#252525,rgb(var(--rb-red-solid)))}
.mp-imp .v{font-family:var(--serif,Georgia);font-weight:800;font-size:1.7rem;color:var(--fg)}
.mp-imp .k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.mp-delta{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:.7rem;font-weight:700;color:#0A7D4F;background:rgba(6,214,160,.14);padding:3px 8px;animation:mpGlow 2.2s ease-in-out infinite}
@keyframes mpGlow{0%,100%{box-shadow:0 0 0 0 rgba(6,214,160,.35)}50%{box-shadow:0 0 0 5px rgba(6,214,160,0)}}
.mp-proof{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--emerald) 7%,var(--card));border:1px solid var(--line);border-left:3px solid var(--emerald-ink);padding:12px 14px;font-size:.86rem;margin:0 0 16px}
.mp-proof .ic{width:18px;height:18px;color:var(--emerald-ink);flex:0 0 auto}
.mp-frame{display:block;font-size:.76rem;color:var(--muted);margin-top:8px;text-align:center;background:color-mix(in srgb,var(--emerald) 5%,transparent);padding:7px 10px}
.mp-frame b{color:var(--emerald-ink)}
.mp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);margin:6px 0 2px;background:color-mix(in srgb,var(--fg) 2%,transparent)}
.mps{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 6px;border-right:1px solid var(--line);min-width:0}
.mps:last-child{border-right:0}
.mps .ic{width:15px;height:15px;color:var(--muted)}
.mps b{font-family:var(--serif,Georgia);font-weight:800;font-size:1.06rem;color:var(--fg);line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mps span{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mp-deltarow{margin-top:8px}
.mp-actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mp-actions-row .btn{flex:1 1 0;justify-content:center;min-width:88px;white-space:nowrap}
.mp-graph{background:var(--card);border:1px solid var(--line);box-shadow:var(--raise);padding:16px 16px 12px;margin:0 0 16px;color:var(--fg)}
.mpg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.mpg-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.mpg-t b{display:inline-flex;align-items:center;gap:7px;font-family:var(--serif,Georgia);font-size:1.05rem}
.mpg-t b .ic{width:17px;height:17px;color:var(--brass)}
.mpg-t span{font-size:.74rem;color:var(--muted)}
.mpg-chips{display:flex;gap:6px;flex-wrap:wrap}
.mpg-chip{border:1px solid var(--line);background:none;color:var(--muted);font-size:.72rem;font-weight:700;padding:6px 11px;cursor:pointer;font-family:inherit;transition:all .15s var(--ease)}
.mpg-chip:hover{color:var(--fg);border-color:var(--fg)}
.mpg-chip.on{background:var(--emerald);border-color:var(--emerald);color:#fff}
.mpg-stage{position:relative;margin:8px 0 4px}
.mpg-stage svg{display:block;width:100%;height:clamp(160px,28vw,250px)}
.mpg-end{position:absolute;top:2px;right:0}
.mpg-endchip{display:inline-block;border:1.5px solid;font-size:.72rem;font-weight:800;padding:4px 9px;background:var(--card)}
.mpg-ranges{margin-top:8px;justify-content:center}
@media(max-width:560px){.mpg-chip{padding:5px 8px;font-size:.66rem}.mp-graph{padding:12px 10px 10px}}
.mp-boost{display:inline-flex;align-items:center;gap:6px;margin-top:8px;border:1px dashed #E58A00;color:#B36B00;background:rgba(255,166,0,.09);font-size:.74rem;font-weight:700;padding:6px 10px;cursor:pointer;font-family:inherit}
.mp-boost .ic{width:14px;height:14px}
.mp-boost:hover{background:rgba(255,166,0,.18)}
.mp-pop{display:inline-block;animation:mpPop .6s var(--ease)}
@keyframes mpPop{0%{transform:scale(1)}40%{transform:scale(1.45);color:#0A7D4F}100%{transform:scale(1)}}
.mp-trygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.mp-try{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);padding:16px;text-decoration:none;color:var(--fg);box-shadow:var(--raise);transition:transform .16s var(--ease),box-shadow .2s}
.mp-try:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(37,37,37,.16)}
.mp-try-ic .ic{width:22px;height:22px;color:var(--brass)}
.mp-try b{font-size:.95rem}
.mp-try>span:not(.mp-try-ic):not(.mp-try-go){font-size:.8rem;color:var(--muted)}
.mp-try-go{font-size:.8rem;font-weight:700;color:var(--brass);margin-top:2px}
.mp-academy{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;padding:20px;background:linear-gradient(135deg,#252525,#313131 60%,#2A2A2A);color:#fff;box-shadow:0 16px 38px rgba(37,37,37,.35)}
.mp-acad-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 260px}
.mp-acad-k{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.mp-acad-k .ic{width:15px;height:15px}
.mp-academy b{font-size:1.05rem}
.mp-acad-txt>span:last-child{font-size:.84rem;color:rgba(255,255,255,.82)}
.mp-mile{position:fixed;inset:0;z-index:220;display:grid;place-items:center;background:rgba(15,15,15,.72);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.mp-mile.open{opacity:1;pointer-events:auto}
.mp-mile-sheet{position:relative;width:min(420px,calc(100vw - 32px));background:var(--card);padding:34px 26px 22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateY(14px) scale(.97);transition:transform .3s var(--ease)}
.mp-mile.open .mp-mile-sheet{transform:none}
.mp-mile-burst{font-size:3rem;animation:mpBounce 1s var(--ease)}
@keyframes mpBounce{0%{transform:scale(.2) rotate(-16deg)}55%{transform:scale(1.25)}100%{transform:scale(1)}}
.mp-mile-big{font-family:var(--serif,Georgia);font-weight:800;font-size:1.9rem;margin-top:8px;background:linear-gradient(90deg,#252525,rgb(var(--rb-red-solid)));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=dark] .mp-mile-big{background:linear-gradient(90deg,#A7A7A7,#FF6B75);-webkit-background-clip:text;background-clip:text}
.mp-mile-sub{font-size:.9rem;color:var(--muted);margin:8px 0 18px}
.mp-mile-actions{display:flex;flex-direction:column;gap:8px}
.mp-sheet{position:fixed;inset:0;z-index:230;display:grid;place-items:end center;background:rgba(15,15,15,.55);opacity:0;pointer-events:none;transition:opacity .22s}
.mp-sheet.open{opacity:1;pointer-events:auto}
.mp-sheet-in{width:min(460px,100vw);background:var(--card);padding:20px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(0,0,0,.4)}
.mp-sheet-t{font-weight:700;margin-bottom:12px}
.mp-sheet-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px;margin-bottom:12px}
.mp-sh{display:grid;place-items:center;padding:12px 6px;font-size:.78rem;font-weight:700;text-decoration:none;color:#fff;border:0;cursor:pointer;font-family:inherit}
.mp-sh.wa{background:#25D366}.mp-sh.x{background:#131313}.mp-sh.li{background:#0A66C2}.mp-sh.tg{background:#229ED9}.mp-sh.cp{background:var(--emerald)}
.um-bar{display:grid;grid-template-columns:1fr 200px;gap:10px}
@media(max-width:560px){.um-bar{grid-template-columns:1fr}}
.um-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 0 2px}
.um-dp{width:42px;height:42px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--emerald);color:#fff;display:grid;place-items:center;font-family:var(--serif,Georgia)}
.um-dp img{width:100%;height:100%;object-fit:cover}
/* ---- profile trophy-case additions ---- */
.pbadge.locked{opacity:.55;filter:grayscale(.6);border-style:dashed}
.pbadge.locked i{font-style:normal;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;background:var(--mist);padding:1px 5px;margin-left:4px}
.prof-impact{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0;padding:16px 18px;background:linear-gradient(120deg,color-mix(in srgb,var(--emerald) 8%,var(--card)),var(--card));border:1px solid var(--line);border-left:4px solid var(--brass);text-decoration:none;color:var(--fg);box-shadow:var(--raise);transition:transform .16s var(--ease),box-shadow .2s}
.prof-impact:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,37,37,.16)}
.prof-impact .pi-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.prof-impact .pi-txt b{font-size:.98rem}
.prof-impact .pi-txt>span:last-child{font-size:.8rem;color:var(--muted)}
.prof-impact .pi-arrow{font-size:1.4rem;color:var(--brass);flex:0 0 auto;transition:transform .16s var(--ease)}
.prof-impact:hover .pi-arrow{transform:translateX(4px)}
.prof-grow{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:0 0 16px}
.pg-card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px dashed var(--line);padding:16px}
.pg-card b{display:inline-flex;align-items:center;gap:7px;font-size:.92rem}
.pg-card b .ic{width:17px;height:17px;color:var(--emerald-ink)}
.pg-card>span{font-size:.8rem;color:var(--muted)}
.pg-card .btn{align-self:flex-start}
.prof-academy{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px;padding:18px 20px;background:linear-gradient(135deg,#252525,#313131 60%,#2A2A2A);color:#fff;box-shadow:0 14px 34px rgba(37,37,37,.3)}
.prof-academy .pa-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 260px}
.prof-academy .pa-k{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.prof-academy .pa-k .ic{width:14px;height:14px}
.prof-academy b{font-size:1.02rem}
.prof-academy .pa-txt>span:last-child{font-size:.82rem;color:rgba(255,255,255,.82)}
.prof-academy .pa-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.prof-academy .pa-ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);color:#fff}
.prof-academy .pa-ghost:hover{background:rgba(255,255,255,.2)}
@media(max-width:520px){.prof-academy .pa-btns{width:100%}.prof-academy .pa-btns .btn{flex:1 1 100%;justify-content:center}}
@media(max-width:560px){.mp-impact{gap:8px}.mp-imp{padding:12px 8px}.mp-imp .v{font-size:1.3rem}.mp-imp .k{font-size:.62rem}}

/* ---- PROFILE ---- */
.prof-cover{height:210px;width:100%;background:linear-gradient(120deg,var(--emerald),#0a4d39 60%,#171717);position:relative;overflow:hidden}
@media (max-width:760px){.prof-cover{height:148px}}
.prof-cover img{width:100%;height:100%;object-fit:cover}
.prof-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 90% 0,rgb(var(--rb-red-solid) / .24),transparent 60%)}
.prof-head{display:flex;align-items:flex-end;gap:16px;padding:0 2px;position:relative;z-index:1}
.prof-dp-wrap{position:relative;width:112px;margin-top:-46px;flex:0 0 auto}
.prof-dp{width:112px;height:112px;border-radius:30px;border:4px solid var(--bg);background:linear-gradient(135deg,var(--emerald),#0a4d39);display:grid;place-items:center;color:#fff;font-size:2.5rem;font-weight:700;box-shadow:var(--raise);overflow:hidden}
.prof-dp img{width:100%;height:100%;object-fit:cover}
.prof-id{min-width:0;padding-bottom:6px}
.prof-meta-line{color:var(--muted);font-size:.9rem;margin:14px 2px 0}
.prof-id h1{font-size:1.5rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.verified-tick{display:inline-flex;vertical-align:middle;color:rgb(var(--rb-verify))}
.verified-tick svg{width:19px;height:19px;display:block}
.role-pill{font-size:.72rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.role-pill.expert{color:var(--brass-ink);border-color:color-mix(in srgb,var(--brass) 46%,var(--line));background:color-mix(in srgb,var(--brass) 12%,transparent)}
.role-pill.admin{color:#fff;background:var(--ink);border-color:var(--ink)}
.prof-hd{font-family:var(--mono);color:var(--emerald-ink);font-size:.95rem;margin-top:2px}
.prof-meta{color:var(--muted);font-size:.9rem;margin-top:6px}
.prof-bio{margin:16px 2px 0;color:var(--fg);font-size:1.02rem;line-height:1.55}
.prof-actions{display:flex;gap:10px;margin:18px 2px 0;flex-wrap:wrap}
.prof-actions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.prof-actions-grid .btn{justify-content:center;width:100%}
@media (min-width:720px){.prof-actions-grid{grid-template-columns:repeat(3,1fr)}}
.prof-signout{margin:26px 2px 0;display:flex;justify-content:center}
.prof-signout .btn{min-width:220px;justify-content:center}
.prof-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:22px 0 0}
@media (max-width:620px){.prof-stats{grid-template-columns:repeat(3,1fr)}}
.pstat{background:var(--card);border:1px solid var(--line);border-radius:0;padding:15px 10px;text-align:center}
.pstat .v{font-family:var(--mono);font-weight:600;font-size:1.4rem}
.pstat .k{font-size:.72rem;color:var(--muted);margin-top:3px}
.pbadges{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
/* ---- Achievement shareable cards ---- */
.ach-wrap{margin:30px 0 0}
.ach-head{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.ach-head .ach-sub{color:var(--muted);font-size:.86rem}
.ach-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.ach-card{position:relative;overflow:hidden;border:0;cursor:pointer;border-radius:0;padding:18px 16px 16px;min-height:210px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;color:#fff;text-align:left;box-shadow:var(--raise);transition:transform .16s var(--ease),box-shadow .2s}
.ach-card::before{content:"";position:absolute;inset:0 0 auto 0;height:70px;background:linear-gradient(180deg,rgba(12,12,12,.5),rgba(12,12,12,0));pointer-events:none}
.ach-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(37,37,37,.28)}
.ach-card.level{background:linear-gradient(160deg,#151515 0%,#1D1D1D 26%,#747474 78%,#1E1E1E 100%)}
.ach-card.rank{background:linear-gradient(160deg,#151515 0%,#1D1D1D 26%,rgb(var(--rb-red-solid)) 82%,#1E1E1E 100%)}
.ach-card.points{background:linear-gradient(160deg,#151515 0%,#1D1D1D 26%,#8F8F8F 80%,#1E1E1E 100%)}
.ach-card.followers{background:linear-gradient(160deg,#151515 0%,#1D1D1D 26%,#747474 80%,#1E1E1E 100%)}
.ach-card.streak{background:linear-gradient(160deg,#151515 0%,#1D1D1D 26%,#FF7A18 80%,#1E1E1E 100%)}
.ach-card.articles{background:linear-gradient(160deg,#151515 0%,#1D1D1D 26%,#5A5A5F 80%,#1E1E1E 100%)}
.ach-card.verified{background:linear-gradient(160deg,#151515 0%,#1D1D1D 26%,#12B76A 80%,#1E1E1E 100%)}
.ach-card.expert{background:linear-gradient(160deg,#151515 0%,#1D1D1D 26%,#E11D74 80%,#1E1E1E 100%)}
.ach-card .ac-emoji{position:absolute;top:12px;right:14px;font-size:1.5rem;opacity:.95;z-index:1}
.ach-card .ac-label{position:relative;z-index:1;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;opacity:.9;margin-bottom:4px}
.ach-card .ac-big{position:relative;z-index:1;font-family:var(--serif);font-weight:700;font-size:1.75rem;line-height:1.05}
.ach-card .ac-share-tag{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:.74rem;font-weight:700;background:rgba(255,255,255,.2);padding:5px 11px;border-radius:999px}
.ach-card .ac-share-tag .ic{width:13px;height:13px}
.ach-card .ac-hint{position:relative;z-index:1;margin-top:8px;font-size:.68rem;line-height:1.35;opacity:.85}
.ach-card.locked{filter:grayscale(.55) brightness(.72);cursor:default}
.ach-card.locked:hover{transform:none;box-shadow:var(--raise)}
.ach-card .ac-lock{position:absolute;top:12px;left:14px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.4);display:grid;place-items:center}
.ach-card .ac-lock .ic{width:16px;height:16px;color:#fff}
.ach-modal{position:fixed;inset:0;z-index:420;background:rgba(10,10,10,.82);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:18px}
.ach-modal.open{display:flex}
.ach-sheet{background:var(--card);border-radius:0;max-width:400px;width:100%;padding:16px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5);max-height:94vh;overflow:auto}
.ach-x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:grid;place-items:center}
.ach-x .ic{width:20px;height:20px}
.ach-preview{position:relative;border-radius:0;overflow:hidden;background:#121212;aspect-ratio:1080/1350}
.ach-preview canvas{width:100%;height:100%;display:block}
.ach-busy{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(18,18,18,.6);color:#fff}
.ach-busy.on{display:flex}
.ach-busy .ic{width:34px;height:34px;animation:spin 1s linear infinite}
.ach-share-lbl{font-weight:700;font-size:.9rem;margin:14px 2px 8px}
.ach-share-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;scrollbar-width:none}
.ach-share-row::-webkit-scrollbar{display:none}
.ach-sh{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:transparent;cursor:pointer;font-size:.72rem;font-weight:600;width:66px}
.ach-sh span{color:var(--muted)}
.ach-sh .ic{width:24px;height:24px;color:#fff;padding:12px;border-radius:0;box-sizing:content-box;background:var(--sc,#25D366)}
.ach-sh.loading .ic{opacity:.6;animation:spin 1s linear infinite}
.pbadge{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:4px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:.88rem}
.pbadge.brass{color:var(--brass-ink);border-color:color-mix(in srgb,var(--brass) 40%,var(--line))}
.pbadge .ic{width:17px;height:17px;color:var(--emerald-ink)}
.editbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin:18px 0 0;display:none}
.editbox.open{display:block;animation:cfade .3s var(--ease)}

.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:4px;font-size:.9rem;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:1024px){.toast{bottom:24px}}

/* ---- PUBLISH COMPOSER ---- */
.pub-types{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
@media (max-width:680px){.pub-types{grid-template-columns:1fr}}
.ptype{text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px;cursor:pointer;transition:transform .16s var(--ease),border-color .18s,box-shadow .18s;box-shadow:var(--raise);color:var(--fg);font-family:inherit}
.ptype:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--emerald) 40%,var(--line));box-shadow:0 16px 36px rgba(23,23,23,.12)}
.ptype .pic{width:46px;height:46px;border-radius:0;display:grid;place-items:center;margin-bottom:14px;background:color-mix(in srgb,var(--emerald) 14%,transparent);color:var(--emerald-ink)}
.ptype.alert .pic{background:color-mix(in srgb,var(--alert) 14%,transparent);color:var(--alert)}
.ptype.vid .pic{background:color-mix(in srgb,var(--emerald) 14%,transparent);color:var(--emerald-ink)}
.ptype h3{font-size:1.2rem;margin-bottom:6px;color:var(--fg)}
.ptype p{color:var(--muted);font-size:.92rem;margin:0}
.pub-form{display:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--raise);margin-top:6px}
.pub-form.active{display:block;animation:cfade .35s var(--ease)}
.pf-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pf-head .pic{width:40px;height:40px;border-radius:4px;display:grid;place-items:center;background:color-mix(in srgb,var(--emerald) 12%,transparent);color:var(--emerald-ink);flex:0 0 auto}
.pf-head.alert .pic{background:color-mix(in srgb,var(--alert) 12%,transparent);color:var(--alert)}
.pf-head h2{font-size:1.35rem}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.pf-grid{grid-template-columns:1fr}}
.selectwrap{position:relative}
.selectwrap select{appearance:none;width:100%;height:52px;padding:0 40px 0 14px;border-radius:4px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);font-size:1rem;font-family:var(--sans);cursor:pointer}
.selectwrap select:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 4px color-mix(in srgb,var(--emerald) 14%,transparent)}
.selectwrap::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pf-foot{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.pf-foot .btn{flex:1 1 0;min-width:140px;justify-content:center}
.pub-success{text-align:center;padding:26px 0;display:none}
.pub-success.active{display:block;animation:cfade .4s var(--ease)}
.pub-success .seal{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:linear-gradient(135deg,var(--emerald),#0a4d39);color:#fff;box-shadow:0 14px 36px rgba(37,37,37,.42);animation:seal .5s var(--ease) both}
.pub-success .seal .ic{width:42px;height:42px;stroke-width:2.4}
.pub-success h2{font-size:1.6rem;margin-bottom:8px}
.pub-success p{color:var(--muted);max-width:42ch;margin:0 auto 18px}

/* ---- WALLS: shared ---- */
.wall-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 18px}
.searchbar{position:relative;margin:6px 0 20px}
.searchbar input{width:100%;height:52px;padding:0 16px 0 46px;border-radius:0;border:1.5px solid var(--line);background:var(--card);color:var(--fg);font-size:1rem}
.searchbar input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 4px color-mix(in srgb,var(--emerald) 14%,transparent)}
.searchbar .si{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:600;font-size:.86rem;cursor:pointer;transition:all .16s var(--ease)}
.chip[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:#fff}

/* rates */
.rate-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--raise);transition:transform .16s var(--ease),box-shadow .18s}
.rate-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(23,23,23,.1)}
.rate-card .rc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.rate-card .rc-prod{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--emerald-ink)}
.rate-card .rc-bank{font-size:1.15rem;font-weight:600;font-family:var(--serif);margin-top:2px}
.rate-card .rc-city{font-size:.86rem;color:var(--muted)}
.rate-card .rc-avg{font-family:var(--mono);font-weight:600;font-size:2rem;color:var(--fg);text-align:right;line-height:1}
.rate-card .rc-avg small{font-size:.5em;color:var(--brass-ink)}
.rate-card .rc-meta{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.rate-card .rc-meta b{font-family:var(--mono);color:var(--fg)}
.gatecard{background:var(--ink);color:#F2EFE9;border-radius:var(--r-lg);padding:clamp(28px,5vw,44px);text-align:center;margin:18px 0;position:relative;overflow:hidden}
.gatecard::before{content:"";position:absolute;inset:0;background:radial-gradient(100% 80% at 50% 0,rgb(var(--rb-red-solid) / .20),transparent 60%)}
.gatecard .lock{width:54px;height:54px;border-radius:0;display:grid;place-items:center;margin:0 auto 16px;background:rgba(255,255,255,.1);color:var(--brass)}
.gatecard h2{color:#fff;font-size:1.6rem;position:relative}
.gatecard p{color:#BFBFBF;max-width:44ch;margin:10px auto 20px;position:relative}
html[data-theme="light"] .gatecard{background:linear-gradient(150deg,#ffffff 0%,#F6F6F6 45%,#F0F0F0 80%,#F9F9F9 100%);border:1px solid #E4E4E4;color:#252525;box-shadow:0 12px 30px rgba(37,37,37,.10)}
html[data-theme="light"] .gatecard::before{background:radial-gradient(100% 80% at 50% 0,rgb(var(--rb-red-solid) / .09),transparent 60%)}
html[data-theme="light"] .gatecard h2{color:#252525}
html[data-theme="light"] .gatecard p{color:#595959}
html[data-theme="light"] .gatecard .lock{background:rgba(37,37,37,.07)}

/* confession */
.confess-card{position:relative;background:linear-gradient(150deg,color-mix(in srgb,var(--tone) 9%,var(--card)),var(--card) 62%);border:1px solid color-mix(in srgb,var(--tone) 26%,var(--line));border-radius:18px;padding:22px;box-shadow:var(--raise);overflow:hidden;--tone:#747474}
.confess-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--tone),transparent 78%)}
.confess-card:nth-child(6n+1){--tone:rgb(var(--rb-red-solid))}.confess-card:nth-child(6n+2){--tone:#2B2B2F}.confess-card:nth-child(6n+3){--tone:#8A8A8E}
.confess-card:nth-child(6n+4){--tone:#A7141E}.confess-card:nth-child(6n+5){--tone:#4A4A4F}.confess-card:nth-child(6n+6){--tone:#6B6B70}
.confess-card .cc-cat{display:inline-block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tone);background:color-mix(in srgb,var(--tone) 10%,transparent);border:1px solid color-mix(in srgb,var(--tone) 32%,var(--line));border-radius:999px;padding:3px 10px;margin-bottom:12px}
.confess-card .cc-body{font-size:1.05rem;line-height:1.6;color:var(--fg)}
.confess-card .cc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:.82rem;color:var(--muted)}

/* scam */
.scam-card{position:relative;background:linear-gradient(150deg,color-mix(in srgb,var(--tone) 9%,var(--card)),var(--card) 62%);border:1px solid color-mix(in srgb,var(--tone) 26%,var(--line));border-radius:18px;padding:22px;box-shadow:var(--raise);overflow:hidden;--tone:rgb(var(--rb-red-solid))}
.scam-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--tone),transparent 78%)}
.scam-card:nth-child(6n+1){--tone:rgb(var(--rb-red-solid))}.scam-card:nth-child(6n+2){--tone:#2B2B2F}.scam-card:nth-child(6n+3){--tone:#8A8A8E}
.scam-card:nth-child(6n+4){--tone:#A7141E}.scam-card:nth-child(6n+5){--tone:#4A4A4F}.scam-card:nth-child(6n+6){--tone:#6B6B70}
.scam-card .sc-tag.amt{color:var(--tone);border-color:color-mix(in srgb,var(--tone) 40%,var(--line))}
.scam-card .sc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.scam-card .sc-type{font-size:1.2rem;font-weight:600;font-family:var(--serif)}
.scam-card .sc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.scam-card .sc-tag{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.scam-card .sc-tag.amt{color:var(--alert);border-color:color-mix(in srgb,var(--alert) 36%,var(--line))}
.scam-card h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 5px}
.scam-card p{margin:0;color:var(--fg);font-size:.96rem;line-height:1.55}
.scam-card .sc-share{margin-top:16px;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px;border-radius:4px;background:#25D366;color:#06351b;font-weight:700;font-size:.9rem;border:0;cursor:pointer}
.scam-card .sc-share .ic{width:17px;height:17px}
.sc-share{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:10px;background:#25D366;color:#06351b;font-weight:700;font-size:.86rem;border:0;cursor:pointer;white-space:nowrap;transition:filter .15s var(--ease),transform .15s var(--ease)}
.sc-share:hover{filter:brightness(.95);transform:translateY(-1px)}
.sc-share .ic{width:16px;height:16px}
.fc-foot .sc-share{height:36px;padding:0 15px;font-size:.82rem;border-radius:9px}
.fc-has-img .fc-foot .sc-share{background:rgba(255,255,255,.92);color:#121212}
.scw-modal{position:fixed;inset:0;z-index:120;background:rgba(12,12,12,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.scw-modal.on{display:flex}
.scw-inner{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;max-width:390px;width:100%;position:relative;max-height:92vh;overflow:auto}
.scw-x{position:absolute;top:10px;right:12px;background:0;border:0;font-size:1.7rem;line-height:1;color:var(--muted);cursor:pointer}
.scw-prev{position:relative;border-radius:14px;overflow:hidden;background:#121212;aspect-ratio:1080/1920}
.scw-prev canvas{width:100%;height:100%;display:block}
.scw-busy{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(18,18,18,.6);color:#fff}
.scw-busy.on{display:flex}
.scw-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.scw-acts .btn{flex:1;min-width:150px;justify-content:center}
.scw-note{font-size:.8rem;color:var(--muted);margin:10px 0 0;line-height:1.55}

/* ---- ADMIN ---- */
.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:6px 0 22px}
.admin-stats .adm-wrap2{--admbar:var(--card)}
.adm-topbar{position:sticky;top:0;z-index:30;background:var(--admbar);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(37,37,37,.04)}
.adm-topbar-in{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.adm-brand{display:flex;flex-direction:column;line-height:1.1;flex:none}
.adm-brand-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.adm-brand-n{font-family:var(--serif);font-size:1.05rem;font-weight:700}
.adm-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.adm-find{position:relative;flex:1;min-width:190px}
.adm-find input{width:100%;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:inherit;padding:0 12px 0 34px;font-size:.85rem}
.adm-find input:focus{outline:0;border-color:color-mix(in srgb,var(--emerald) 45%,var(--line))}
.adm-find-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);display:grid}
.adm-find-ic .ic{width:15px;height:15px}
.adm-ext{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--fg);text-decoration:none;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
.adm-ext:hover{border-color:color-mix(in srgb,var(--fg) 22%,var(--line))}
.adm-ext .ic{width:15px;height:15px}
.adm-ext-ai{border-color:color-mix(in srgb,rgb(var(--rb-blue-ink)) 45%,var(--line));color:rgb(var(--rb-blue-ink))}
.adm-ext-out{color:rgb(var(--rb-red-ink));border-color:color-mix(in srgb,rgb(var(--rb-red-ink)) 34%,var(--line))}
.adm-chips{max-width:var(--maxw);margin:0 auto;padding:0 20px 10px;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.adm-chips::-webkit-scrollbar{height:4px}
.adm-chips::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.adm-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;flex:none;transition:background .12s,color .12s,border-color .12s}
.adm-chip:hover{border-color:color-mix(in srgb,var(--fg) 24%,var(--line))}
.adm-chip.on{background:var(--navy,#252525);border-color:var(--navy,#252525);color:#fff}
.adm-chip .ic{width:15px;height:15px;opacity:.85}
.adm-chip.hide{display:none}
.adm-body{padding-top:16px;padding-bottom:40px}
.adm-sec{display:none}
.adm-sec.on{display:block;animation:admFade .18s var(--ease)}
@keyframes admFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .adm-topbar-in{padding:9px 14px;gap:10px}
  .adm-brand{flex:1 0 auto}
  .adm-tools{width:100%;margin-left:0}
  .adm-find{min-width:0;flex:1 1 100%;order:-1}
  .adm-ext span{display:none}
  .adm-ext{padding:0 11px}
  .adm-chips{padding:0 14px 9px}
}
.astat{min-width:0}
@media (max-width:680px){.admin-stats{grid-template-columns:repeat(2,1fr)}}
.astat{background:var(--card);border:1px solid var(--line);border-radius:0;padding:16px}
.astat .v{font-family:var(--mono);font-weight:600;font-size:1.7rem;line-height:1}
.astat .k{font-size:.78rem;color:var(--muted);margin-top:5px}
.astat.warn{border-color:color-mix(in srgb,var(--brass) 40%,var(--line))}
.astat.warn .v{color:var(--brass-ink)}
.mod-row{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:12px}
.mod-row .mr-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.mod-row .mr-type{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--emerald) 12%,transparent);color:var(--emerald-ink)}
.mod-row .mr-type.scam{background:color-mix(in srgb,var(--alert) 12%,transparent);color:var(--alert)}
.mod-row .mr-who{font-size:.82rem;color:var(--muted)}
.mod-row .mr-body{font-size:.96rem;color:var(--fg);line-height:1.55;white-space:pre-wrap}
.mod-row .mr-body b{font-family:var(--mono);color:var(--emerald-ink)}
.mod-row .mr-act{display:flex;gap:10px;margin-top:14px;align-items:center;flex-wrap:wrap}
.mod-row .mr-note{flex:1;min-width:160px;height:42px;padding:0 12px;border-radius:4px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);font-size:.9rem}
.btn-approve{height:42px;padding:0 16px;border-radius:4px;border:0;background:var(--emerald);color:#fff;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn-reject{height:42px;padding:0 16px;border-radius:4px;border:1.5px solid color-mix(in srgb,var(--alert) 50%,var(--line));background:transparent;color:var(--alert);font-weight:600;cursor:pointer}
.btn-approve .ic{width:16px;height:16px}
/* ---- ADMIN USER MANAGEMENT ---- */
.usr-search-wrap{background:var(--card);border:1px dashed color-mix(in srgb,var(--emerald) 32%,var(--line));border-radius:var(--r-lg);padding:20px 22px;margin-bottom:18px}
.usr-search-wrap h3{font-size:1.1rem;margin-bottom:12px}
.usr-card-wrap{margin-bottom:8px}
.usr-edit-form{display:flex;flex-direction:column;gap:8px;padding:12px 14px;margin-top:6px;background:var(--bg);border:1px solid var(--line);border-radius:4px}
.usr-edit-form .inp.sm{height:38px;font-size:.86rem}
/* ---- CONTENT LIBRARY ---- */
.cl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cl-tab{padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);font-size:.84rem;font-weight:600;cursor:pointer}
.cl-tab.active{background:var(--emerald);border-color:var(--emerald);color:#fff}
.md-add{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.md-add .inp{flex:1;min-width:180px}
.md-add #mdTitle{flex:0 1 200px}
.md-list{display:flex;flex-direction:column;gap:8px}
.md-empty{color:var(--muted);font-size:.88rem;padding:10px 2px}
.md-row{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:0;padding:10px 12px}
.md-row .md-meta{min-width:0}
@media(max-width:620px){.md-row{flex-wrap:wrap}.md-row .vs-acts{flex-basis:100%;justify-content:flex-start}}
.md-row.dragging{opacity:.5;border-style:dashed}
.md-row.expired{opacity:.55}
.md-t2{font-weight:600;font-size:.9rem;color:var(--fg)}
.md-grip{cursor:grab;color:var(--muted);font-size:1.05rem;user-select:none;flex:0 0 auto}
.md-thumb{width:72px;height:44px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:#000}
.md-meta{flex:1;min-width:0}
.md-t{width:100%;border:1px solid var(--line);border-radius:4px;padding:7px 10px;font-size:.86rem;background:var(--card);color:var(--fg)}
.md-id{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:3px}
.md-save,.md-del{flex:0 0 auto;border:0;border-radius:4px;padding:8px 12px;font-size:.8rem;font-weight:700;cursor:pointer}
.md-save{background:var(--emerald);color:#fff}
.md-del{background:color-mix(in srgb,var(--brass) 14%,transparent);color:var(--brass-ink)}
@media(max-width:560px){.md-thumb{display:none}}
.cl-item{background:var(--bg);border:1px solid var(--line);border-radius:0;padding:14px;margin-bottom:8px}
.cl-item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.cl-item-title{font-weight:600;font-size:.92rem;flex:1}
.cl-item-meta{font-size:.78rem;color:var(--muted);margin-bottom:8px}
.cl-item-acts{display:flex;gap:6px;flex-wrap:wrap}
.cl-edit-form{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:4px}
.cl-edit-form .inp.sm{height:38px;font-size:.86rem}
.usr-results{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.usr-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:0;flex-wrap:wrap}
.usr-card .ua{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--emerald),#0a4d39);display:grid;place-items:center;color:#fff;font-weight:700;font-size:.95rem;flex:0 0 auto;overflow:hidden}
.usr-card .ua img{width:100%;height:100%;object-fit:cover}
.usr-card .ui{flex:1;min-width:160px}
.usr-card .un{font-weight:600;font-size:.92rem}
.usr-card .um{font-size:.76rem;color:var(--muted);margin-top:2px}
.usr-card .uacts{display:flex;gap:6px;flex-wrap:wrap}
.usr-act-btn{padding:5px 11px;border-radius:8px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);font-size:.76rem;font-weight:600;cursor:pointer;transition:all .14s var(--ease);white-space:nowrap}
.usr-act-btn:hover{border-color:var(--emerald);color:var(--emerald-ink)}
.usr-act-btn.active{background:var(--emerald);border-color:var(--emerald);color:#fff}
.usr-act-btn.danger{border-color:color-mix(in srgb,var(--alert) 40%,var(--line));color:var(--alert)}
.usr-act-btn.danger:hover,.usr-act-btn.danger.active{background:var(--alert);border-color:var(--alert);color:#fff}
.usr-act-btn:disabled{opacity:.5;cursor:default}
.export-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* ---- SEARCH PAGE ---- */
.search-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:340px;display:flex;align-items:center;overflow:hidden;color:#fff;background:var(--ink)}
.search-hero .sh-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.search-hero .sh-bg img{width:100%;height:100%;object-fit:cover;animation:heroKen 24s ease-in-out infinite alternate;transform-origin:center}
.search-hero .sh-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,18,18,.5) 0%,rgba(18,18,18,.62) 60%,rgba(18,18,18,.9) 100%)}
.search-hero .sh-inner{position:relative;z-index:2;max-width:760px;width:100%;margin:0 auto;padding:56px 20px}
.search-hero .kicker{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:#FF6B73}
.search-hero h1{color:#fff;font-size:clamp(2rem,6vw,3.2rem);margin:10px 0 22px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.search-hero .search-bar-big{margin-bottom:0}
.search-hero .search-bar-big input{height:62px;border-color:transparent;box-shadow:0 14px 40px rgba(0,0,0,.35)}
@media(max-width:760px){.search-hero{min-height:280px}.search-hero .sh-inner{padding:40px 18px}}
@media (prefers-reduced-motion:reduce){.search-hero .sh-bg img{animation:none}}
.search-wrap{max-width:760px;margin:0 auto;padding:28px 20px 48px}
.search-wrap #sResults{margin-top:4px}
.search-wrap .sr-group{margin-top:26px}
.search-wrap .sr-group:first-child{margin-top:0}
.search-bar-big{position:relative;margin-bottom:28px}
.search-bar-big input{width:100%;height:58px;padding:0 56px 0 52px;border-radius:0;border:2px solid var(--line);background:var(--card);color:var(--fg);font-size:1.1rem;font-family:var(--sans);transition:border-color .18s,box-shadow .18s;box-shadow:var(--raise)}
.search-bar-big input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px color-mix(in srgb,var(--emerald) 18%,transparent)}
.search-bar-big .si{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.search-bar-big .si .ic{width:22px;height:22px}
.search-bar-big .clr{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:8px;display:none}
.search-bar-big .clr:hover{background:var(--line);color:var(--fg)}
.sr-group{margin-bottom:26px}
.sr-group h3{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.sr-card{background:var(--card);border:1px solid var(--line);border-radius:0;padding:14px 16px;margin-bottom:8px;transition:transform .15s var(--ease),border-color .15s}
.sr-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--emerald) 30%,var(--line))}
.sr-card a{text-decoration:none;color:inherit;display:block}
.sr-title{font-weight:600;font-size:.98rem;line-height:1.3;margin-bottom:3px}
.sr-meta{font-size:.8rem;color:var(--muted)}
.sr-excerpt{font-size:.88rem;color:var(--muted);margin-top:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-type-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:color-mix(in srgb,var(--emerald) 12%,transparent);color:var(--emerald-ink);margin-bottom:6px}
.sr-type-pill.rate{background:color-mix(in srgb,var(--brass) 15%,transparent);color:var(--brass-ink)}
.sr-type-pill.scam{background:color-mix(in srgb,var(--alert) 10%,transparent);color:var(--alert)}
.sr-type-pill.confession{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--fg)}
.search-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.search-empty .ic{width:40px;height:40px;opacity:.35;margin:0 auto 12px;display:block}
/* ---- SPLASH (brand logo animation) ---- */
#splash{position:fixed;inset:0;z-index:99999;background:#0B0B0C;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}
#splash.out{opacity:0;visibility:hidden;pointer-events:none}
#lottie-c{width:min(420px,90vw);height:min(745px,160vw);max-height:78vh}
@media(max-width:767px){#lottie-c{width:min(320px,84vw);height:min(568px,150vw)}}
#splash-tagline{position:absolute;bottom:32px;left:0;right:0;font-family:var(--sans);font-size:13px;font-weight:400;color:rgba(255,255,255,.6);letter-spacing:.06em;display:flex;align-items:center;justify-content:center;gap:6px}
#splash-tagline .heartbeat{display:inline-block;color:#E8282C;font-size:16px;animation:heartbeat 1s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.2)}70%{transform:scale(1)}}
/* ---- SETTINGS ---- */
.settings-wrap{max-width:680px;margin:0 auto;padding:0 20px 48px}
.settings-section{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-bottom:16px;box-shadow:var(--raise)}
.settings-section h2{font-family:var(--serif);font-size:1.15rem;margin:0 0 16px}
.danger-zone{background:var(--card);border:1px solid color-mix(in srgb,var(--alert) 35%,var(--line));border-radius:var(--r-lg);padding:22px;margin-bottom:16px}
.danger-zone h2{font-family:var(--serif);font-size:1.15rem;margin:0 0 10px;color:var(--alert)}
.delete-confirm{display:none;margin-top:14px;padding:14px;background:var(--bg);border-radius:4px;border:1px solid var(--line)}
/* ---- NOTIFICATIONS ---- */
.notif-list{display:flex;flex-direction:column}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.notif-item:last-child{border-bottom:0}
.notif-ic-wrap{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--emerald) 14%,transparent);display:grid;place-items:center}
.notif-ic-wrap .ic{width:17px;height:17px;color:var(--emerald-ink)}
.notif-ic-wrap.flwr{background:color-mix(in srgb,var(--brass) 14%,transparent)}
.notif-ic-wrap.flwr .ic{color:var(--brass-ink)}
.notif-ic-wrap.bdg{background:color-mix(in srgb,var(--brass) 18%,transparent)}
.notif-body{flex:1;min-width:0}
.notif-txt{font-size:.92rem;line-height:1.4}
.notif-ts{font-size:.77rem;color:var(--muted);margin-top:2px}
/* ---- ADMIN ANALYTICS ---- */
.analytics-wrap{background:var(--card);border:1px dashed color-mix(in srgb,var(--emerald) 32%,var(--line));border-radius:var(--r-lg);padding:20px 22px;margin-bottom:18px}
.analytics-wrap h3{font-size:1.05rem;margin:0 0 14px}
.top-art-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.top-art-row:last-child{border-bottom:0}
.top-art-row a{flex:1;font-size:.88rem;font-weight:500;color:var(--fg);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-art-row a:hover{color:var(--emerald-ink);text-decoration:underline}
.stat-chip{font-family:var(--mono);font-size:.75rem;padding:3px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--line);white-space:nowrap;flex:0 0 auto}
.admin-login{max-width:400px;margin:40px auto}

/* ---- LEADERBOARD ---- */
.podium{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:10px;align-items:end;margin:10px 0 22px;width:100%;max-width:100%}
.lb-hero{min-height:38vh!important}
.lb-hero .ah-inner{padding:96px 20px 34px}
.pod{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;max-width:100%;min-height:198px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 12px;text-align:center;box-shadow:var(--raise);text-decoration:none;color:var(--fg);transition:transform .16s var(--ease),box-shadow .18s}
.pod:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(37,37,37,.18)}
.pod .pa{width:56px;height:56px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--emerald),#0a4d39);font-size:1.3rem;overflow:hidden}
.pod .pa img{width:100%;height:100%;object-fit:cover}
.pod.first{transform:translateY(-12px);border-color:color-mix(in srgb,var(--brass) 50%,var(--line))}
.pod.first .pa{width:64px;height:64px;background:linear-gradient(135deg,var(--brass),#a01018);box-shadow:0 8px 22px rgb(var(--rb-red-solid) / .4)}
.pod .medal{font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--brass-ink)}
.pod .pn{font-weight:600;margin-top:5px;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;width:100%}
.pod .pp{font-family:var(--mono);font-weight:600;color:var(--emerald-ink);margin-top:2px;font-size:.92rem}
@media(max-width:600px){.podium{gap:6px}.pod{padding:14px 6px;min-height:168px}.pod.first{transform:translateY(-8px)}.pod .pa{width:46px;height:46px;font-size:1.05rem}.pod.first .pa{width:54px;height:54px}.pod .pn{font-size:.78rem}.pod .pn .verified-tick{transform:scale(.8)}.pod .pp{font-size:.82rem}.pod .medal{font-size:.7rem}}
.rank-list{display:flex;flex-direction:column;gap:8px}
.rank-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:0;padding:11px 16px;min-height:68px;text-decoration:none;color:var(--fg);transition:transform .12s var(--ease),border-color .18s,box-shadow .18s}
.rank-row .rinfo{min-width:0;flex:1}
.rank-row .rn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-row .rh{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-row .rp{flex:0 0 auto;text-align:right}
.rank-row:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--emerald) 35%,var(--line));box-shadow:0 8px 20px rgba(37,37,37,.1)}
.rank-row.me{border-color:var(--emerald);background:color-mix(in srgb,var(--emerald) 7%,var(--card))}
.rank-row .rk{font-family:var(--mono);font-weight:600;color:var(--muted);width:30px;text-align:center;flex:0 0 auto}
.rank-row .ra{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--emerald),#0a4d39);flex:0 0 auto;overflow:hidden}
.rank-row .ra img{width:100%;height:100%;object-fit:cover}
.rank-row .rinfo{flex:1;min-width:0}
.rank-row .rinfo .rn{font-weight:600;display:flex;align-items:center;gap:6px}
.rank-row .rinfo .rn .verified-tick svg{width:15px;height:15px}
.rank-row .rinfo .rh{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.rank-row .rp{font-family:var(--mono);font-weight:600;font-size:1.02rem;text-align:right}
.rank-row .rp small{display:block;color:var(--muted);font-weight:500;font-size:.66rem}
.lb-tabs{margin-bottom:8px}
.seg-panel{display:none}.seg-panel.active{display:block;animation:cfade .35s var(--ease)}

/* ---- LEVEL BAR ---- */
.lvl{margin:18px 2px 0;background:var(--card);border:1px solid var(--line);border-radius:0;padding:16px 18px}
.lvl-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:10px}
.lvl-top .lt{font-weight:600}.lvl-top .lt b{color:var(--brass-ink)}
.lvl-top .ln{font-size:.8rem;color:var(--muted);font-family:var(--mono);white-space:nowrap}
.bar{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--emerald),var(--brass));width:0;transition:width 1s var(--ease)}

/* ---- CHALLENGES ---- */
.chal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.chal-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--raise);display:flex;flex-direction:column}
.chal-card h3{font-size:1.25rem}
.chal-card .ch-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin:8px 0 12px}
.chal-card .ch-meta b{font-family:var(--mono);color:var(--fg)}
.chal-card p{color:var(--muted);margin:0;font-size:.95rem;line-height:1.5}
.chal-prog{margin:16px 0 2px}
.chal-prog .cp-top{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:6px}
.chal-prog .cp-top b{font-family:var(--mono);color:var(--emerald-ink)}
.chal-act{display:flex;gap:10px;margin-top:auto;padding-top:16px;flex-wrap:wrap}
.chal-done{display:inline-flex;align-items:center;gap:8px;color:var(--emerald-ink);font-weight:700;font-size:.92rem;padding-top:16px}
.chal-done .ic{width:18px;height:18px}
.btn.sm{height:42px;padding:0 16px;font-size:.92rem;border-radius:4px}
.btn-wa.sm{height:42px;padding:0 15px;font-size:.9rem}
.create-chal{background:var(--card);border:1px dashed color-mix(in srgb,var(--emerald) 32%,var(--line));border-radius:var(--r-lg);padding:20px 22px;margin-bottom:18px}
.create-chal h3{font-size:1.1rem;margin-bottom:14px}

/* ---- ARTICLE READING ---- */
.art-hero-full{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:54vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--ink)}
.art-hero-full .art-hero-bg{position:absolute;inset:0;z-index:0}
.art-hero-full .art-hero-bg img{width:100%;height:100%;object-fit:cover}
.art-hero-full .art-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,18,18,.12) 0%,rgba(18,18,18,.5) 55%,rgba(18,18,18,.96) 100%)}
.art-hero-full .art-hero-content{position:relative;z-index:2;max-width:740px;margin:0 auto;padding:90px 20px 36px;width:100%}
@media(max-width:760px){.art-hero-full{min-height:40vh}.art-hero-full .art-hero-content{padding:76px 18px 28px}}
.art-wrap{max-width:740px;margin:0 auto;padding:28px 20px 0}
.art-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--emerald-ink);padding:5px 12px;border:1px solid color-mix(in srgb,var(--emerald) 30%,var(--line));border-radius:999px}
.art-hero-full .art-eyebrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(6px)}
.art-title{font-size:clamp(2rem,5.2vw,3.1rem);margin:16px 0 0;letter-spacing:-.02em}
.art-hero-full .art-title{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.art-hero-cap{margin:14px 0 0;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.86);max-width:56ch}
.art-dek{color:var(--muted);font-size:clamp(1.1rem,2.4vw,1.3rem);margin-top:14px;line-height:1.5}
.art-tldr{margin:22px 0 8px;padding-left:16px;border-left:3px solid var(--emerald);color:var(--fg);font-weight:500;font-size:clamp(1.12rem,2.3vw,1.28rem);line-height:1.55}
.ai-tldr-card{background:linear-gradient(135deg,color-mix(in srgb,#959595 7%,var(--card)),var(--card));border:1px solid color-mix(in srgb,#959595 22%,var(--line));border-radius:16px;padding:18px 20px;margin:24px 0}
.ai-tldr-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ai-tldr-badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#959595;background:color-mix(in srgb,#959595 12%,transparent);padding:4px 11px;border-radius:999px}
.ai-tldr-badge svg{width:13px;height:13px}
.ai-tldr-sub{font-size:.82rem;color:var(--muted);font-style:italic}
.ai-tldr-text{margin:0;font-size:1.02rem;line-height:1.6;color:var(--fg)}
.rel-wrap{margin:30px 0 8px}
.rel-h{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.rel-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rel-card{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;min-height:170px;box-shadow:var(--raise);transition:transform .16s var(--ease),box-shadow .2s}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(18,18,18,.18)}
.rel-img{position:absolute;inset:0}.rel-img img{width:100%;height:100%;object-fit:cover}
.rel-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,0) 30%,rgba(18,18,18,.82) 100%)}
.rel-body{position:relative;z-index:2;height:100%;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff}
.rel-cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--rb-cat-ink));margin-bottom:6px}
.rel-card h4{font-family:var(--serif);font-size:1.15rem;line-height:1.28;margin:0;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.author-card{display:flex;align-items:flex-start;gap:14px;margin:24px 0;padding:16px 18px;border:1px solid var(--line);border-radius:0;background:var(--card);box-shadow:var(--raise)}
.author-card .aa{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.3rem;background:linear-gradient(135deg,var(--emerald),#0a4d39);flex:0 0 auto;overflow:hidden}
.author-card .aa img{width:100%;height:100%;object-fit:cover}
.author-card .ai{min-width:0;flex:1}
.author-card .an{font-weight:600;font-size:1.02rem;display:flex;align-items:center;flex-wrap:wrap;gap:8px;line-height:1.3}
.author-card .ac{font-size:.88rem;color:var(--muted);line-height:1.45;margin-top:4px}
.author-card .ad{font-size:.8rem;color:var(--muted);margin-top:6px;display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.author-card .ad-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.author-card .ad-item .ic{width:14px;height:14px;color:var(--emerald)}
.author-card .ad-dot{color:var(--line)}
/* The author now signs off at the end rather than introducing themselves
   before the reader knows whether they care. A hairline rule does the work the
   old trust strip was doing, without adding a paragraph to the page. */
.art-author-foot{margin-top:30px;border-top:2px solid rgb(var(--rb-red-solid))}
@media(max-width:520px){.author-card{flex-wrap:wrap}.author-card .follow-btn{margin-left:auto}}
.art-body{font-size:1.12rem;line-height:1.85;margin-top:8px}
.art-body h2{font-family:var(--serif);font-size:1.7rem;margin:34px 0 12px;letter-spacing:-.01em}
.art-body h3{font-family:var(--serif);font-size:1.35rem;margin:26px 0 10px}
.art-body p{margin:0 0 18px}
/* The drop cap. A float rather than initial-letter: the float behaves the
   same in every browser and can be measured, which initial-letter cannot.
   Applied only where it lands well, and that is decided on the server, so it
   never flashes on after the text has already been read. */
.art-body.has-cap > p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-weight:600;
  /* 5em against a line-height of 1.85 gives a float exactly three lines tall,
     measured at 390px and at 900px rather than guessed at. */
  font-size:5em;line-height:.8;padding:.02em .07em 0 0;
  color:rgb(var(--rb-red-ink))}
@media print{ .art-body.has-cap > p:first-of-type::first-letter{color:inherit} }
.art-body ul,.art-body ol{margin:0 0 18px;padding-left:22px}
.art-body li{margin:6px 0}
.art-body blockquote{margin:22px 0;padding:14px 20px;border-left:3px solid var(--emerald);background:color-mix(in srgb,var(--emerald) 6%,transparent);border-radius:0 12px 12px 0;color:var(--fg)}
.art-body a{color:var(--emerald-ink);text-decoration:underline;text-underline-offset:2px}
.art-body table{width:100%;border-collapse:separate;border-spacing:0;margin:26px 0;font-size:.96rem;line-height:1.6;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--raise);display:table}
.art-body table th,.art-body table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.art-body table th:last-child,.art-body table td:last-child{border-right:0}
.art-body table tr:last-child td{border-bottom:0}
.art-body table th{background:var(--navy,#252525);color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.02em;text-transform:uppercase;border-bottom:0;border-right-color:rgba(255,255,255,.16)}
.art-body table tr:nth-child(even) td{background:color-mix(in srgb,var(--emerald) 4%,transparent)}
.art-body table td:first-child{font-weight:600}
.art-body .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:26px 0}
.art-body .tbl-scroll table{margin:0;min-width:520px}
.art-body h1{font-family:var(--serif);font-size:2rem;margin:36px 0 14px;letter-spacing:-.015em}
.art-body h4{font-family:var(--serif);font-size:1.15rem;margin:22px 0 8px}
.art-body code{font-family:var(--mono);font-size:.9em;background:color-mix(in srgb,var(--fg) 6%,transparent);padding:2px 6px;border-radius:5px}
.art-body pre{background:color-mix(in srgb,var(--fg) 5%,transparent);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;overflow-x:auto;margin:22px 0}
.art-body pre code{background:0;padding:0}
.art-body strong{font-weight:650}
.art-body code{font-family:var(--mono);font-size:.9em;background:color-mix(in srgb,var(--fg) 7%,transparent);padding:1px 6px;border-radius:6px}
.persona-table{margin:34px 0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--raise)}
.persona-table .pt-head{background:var(--ink);color:#fff;padding:16px 20px;display:flex;align-items:center;gap:10px}
.persona-table .pt-head .ic{width:20px;height:20px;color:var(--brass)}
.persona-table .pt-head b{font-family:var(--serif);font-size:1.2rem;font-weight:560}
.persona-row{display:flex;gap:14px;align-items:center;padding:15px 20px;border-top:1px solid var(--line)}
.persona-row .pe{font-size:1.5rem;flex:0 0 auto;width:30px;text-align:center}
.persona-row .pl{font-weight:600;width:120px;flex:0 0 auto;font-size:.95rem}
.persona-row .pv{color:var(--muted);font-size:.96rem}
@media (max-width:560px){.persona-row{flex-wrap:wrap}.persona-row .pl{width:auto}.persona-row .pv{flex-basis:100%}}
.useful-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:30px 0}
.btn-useful{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:4px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);font-weight:600;cursor:pointer;transition:all .16s var(--ease)}
.btn-useful:hover{border-color:var(--emerald)}
.btn-useful.done{background:color-mix(in srgb,var(--emerald) 12%,transparent);border-color:var(--emerald);color:var(--emerald-ink)}
.btn-useful .ic{width:18px;height:18px}
.art-meta-row{display:flex;gap:14px;color:var(--muted);font-size:.85rem;font-family:var(--mono);margin-top:18px;flex-wrap:wrap}
.share-count{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.84rem;color:var(--muted)}
.share-count .sc-num{font-weight:700;color:var(--emerald-ink);transition:transform .25s var(--ease)}
.share-count .sc-num.pop{animation:scPop .4s var(--ease)}
@keyframes scPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.art-sticky-share{position:fixed;left:0;right:0;bottom:0;z-index:58;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-top:1px solid var(--line);transform:translateZ(0);-webkit-transform:translate3d(0,0,0);backface-visibility:hidden}
@media(max-width:1023px){.art-sticky-share{display:flex;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}}
.ssb-count{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;flex:0 0 auto}
.ssb-count .num{font-size:1.2rem;font-weight:800;color:var(--emerald-ink);font-family:var(--mono)}
.ssb-count-lbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ssb-soc-row{display:flex;gap:8px}
.ssb-soc{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:0;cursor:pointer;color:#fff;transition:transform .12s var(--ease),filter .18s}
.ssb-soc:hover{filter:brightness(1.08);transform:translateY(-2px)}
.ssb-soc:active{transform:scale(.94)}
.ssb-soc .ic{width:19px;height:19px}
.ssb-whatsapp{background:#25D366}
.ssb-facebook{background:#1877F2}
.ssb-x{background:#000}
.ssb-linkedin{background:#0A66C2}
.ssb-instagram{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.share-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0 26px;padding:16px 18px;border-radius:0;background:var(--card);border:1px solid var(--line)}
.share-strip-lbl{font-weight:600;font-size:.92rem;color:var(--fg)}
.share-strip-btns{display:flex;gap:10px;flex-wrap:wrap}
.share-strip-btns .ssb-soc{width:44px;height:44px}
.eeat-strip{display:flex;align-items:center;gap:10px;margin:24px 0;padding:12px 16px;border-radius:0;background:color-mix(in srgb,var(--emerald) 8%,transparent);border:1px solid color-mix(in srgb,var(--emerald) 24%,var(--line));font-size:.86rem;color:var(--emerald-ink)}
.eeat-strip .ic{width:18px;height:18px;flex:0 0 auto}

/* ---- ARTICLES INDEX + AUTHORS ---- */
.art-card{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--raise);color:#fff;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.art-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(37,37,37,.22)}
.art-card .card-img{position:absolute;inset:0;z-index:0;margin:0;width:100%;aspect-ratio:auto;background:var(--mist)}
.art-card .card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.art-card:hover .card-img img{transform:scale(1.07)}
.art-card .card-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,18,18,0) 28%,rgba(18,18,18,.62) 68%,rgba(18,18,18,.95) 100%)}
.art-card .card-body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:18px}
.art-card .ac-cat{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#FF6B73}
.art-card h3{font-size:1.18rem;margin:6px 0 7px;line-height:1.25;color:#fff;font-family:var(--serif)}
.art-card p{color:rgba(255,255,255,.86);font-size:.86rem;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-card .ac-foot{display:flex;align-items:center;gap:9px;padding-top:10px;border-top:1px solid rgba(255,255,255,.25);font-size:.8rem;color:rgba(255,255,255,.85)}
.art-card .ac-foot .aa{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.78rem;background:rgba(255,255,255,.22);overflow:hidden;flex:0 0 auto}
.art-card .ac-foot .aa img{width:100%;height:100%;object-fit:cover}
.about-intro{max-width:760px}
.about-intro h2{font-family:var(--serif);font-size:1.55rem;margin:0 0 12px;letter-spacing:-.01em}
.about-intro p{font-size:1.04rem;line-height:1.75;margin:0 0 14px}
.wrap .sec-h{max-width:760px;margin-left:0}
.faq-wrap{max-width:760px}
.author-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:14px;align-items:start}
@media(min-width:700px){.author-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.author-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.author-grid .empty{grid-column:1/-1}
.author-tile{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--raise);height:100%}
.author-tile>div{min-width:0}
.author-tile .ta{width:64px;height:64px;border-radius:0;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.5rem;background:linear-gradient(135deg,var(--emerald),#0a4d39);flex:0 0 auto;overflow:hidden}
.author-tile .ta img{width:100%;height:100%;object-fit:cover}
.author-tile h3{font-size:1.2rem;display:flex;align-items:center;gap:7px}
.author-tile .th{font-family:var(--mono);font-size:.82rem;color:var(--emerald-ink)}
.author-tile{text-decoration:none;color:inherit;transition:transform .16s var(--ease),box-shadow .2s,border-color .2s}
.author-tile:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(37,37,37,.14);border-color:color-mix(in srgb,var(--emerald) 35%,var(--line))}
.author-tile .tcount .ic{width:13px;height:13px;vertical-align:-2px;margin-left:2px;opacity:.7}
.author-tile p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.1em;color:var(--muted);font-size:.92rem;margin:8px 0 0;line-height:1.5}
.author-tile .tcount{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-top:8px}

/* ---- ARTICLE EDITOR (EEAT) ---- */
.editor-wrap{max-width:1120px}
.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
@media (max-width:920px){.editor-grid{grid-template-columns:1fr}}
.ed-main{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--raise)}
.ed-body{min-height:300px;line-height:1.7;font-size:1.05rem;font-family:var(--sans)}
.ed-personas{display:grid;gap:10px;margin-top:6px}
.ed-persona{display:flex;gap:10px;align-items:center}
.ed-persona .pe{font-size:1.3rem;width:28px;text-align:center;flex:0 0 auto}
.ed-persona input{flex:1}
.score-card{position:sticky;top:calc(var(--header-h) + 14px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--raise)}
.score-ring{position:relative;width:120px;height:120px;margin:0 auto 10px}
.score-ring svg{transform:rotate(-90deg)}
.score-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.score-ring .sr-track{stroke:var(--line)}
.score-ring .sr-arc{stroke:var(--emerald);transition:stroke-dashoffset .5s var(--ease),stroke .3s}
.score-ring .sr-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:1.7rem}
.score-label{text-align:center;font-weight:600;margin-bottom:16px}
.check{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:.9rem;border-top:1px solid var(--line)}
.check:first-of-type{border-top:0}
.check .ck{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:var(--line);color:var(--muted);transition:all .2s}
.check.on .ck{background:var(--emerald);color:#fff}
.check .ck .ic{width:13px;height:13px;stroke-width:3}
.check .ctxt{color:var(--muted)}
.check.on .ctxt{color:var(--fg)}
.check .req{font-family:var(--mono);font-size:.64rem;color:var(--brass-ink);text-transform:uppercase;letter-spacing:.08em}
.gate-note{font-size:.82rem;color:var(--muted);margin-top:14px;line-height:1.5}
.topic-chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.topic-chip{font-size:.82rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer}
.topic-chip:hover{border-color:var(--emerald);color:var(--emerald-ink)}

/* ---- PHOTO UPLOAD ---- */
.prof-dp-wrap{position:relative;flex:0 0 auto}
.cam-btn{position:absolute;width:34px;height:34px;border-radius:50%;border:none;background:rgba(23,23,23,.62);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .16s var(--ease),transform .16s var(--ease);z-index:3}
.cam-btn:hover{background:var(--emerald);transform:scale(1.06)}
.cam-btn .ic{width:17px;height:17px}
.cam-cover{top:12px;right:12px}
.cam-dp{bottom:-2px;right:-6px;width:32px;height:32px;border:3px solid var(--bg)}
.upbusy{position:absolute;inset:0;display:none;place-items:center;background:rgba(23,23,23,.45);z-index:4;border-radius:inherit}
.upbusy.on{display:grid}
.upbusy .ic{width:26px;height:26px;color:#fff;animation:spin .7s linear infinite}
.prof-cover .upbusy{border-radius:var(--r-lg)}
@keyframes spin{to{transform:rotate(360deg)}}
.up-hint{font-size:.82rem;color:var(--muted);margin:4px 2px 0}

/* ---- CROP MODAL ---- */
.cropper{position:fixed;inset:0;z-index:200;background:rgba(23,23,23,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;place-items:center;padding:20px}
.cropper.on{display:grid;animation:cfade .2s var(--ease)}
.crop-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;width:min(440px,94vw);box-shadow:0 24px 60px rgba(23,23,23,.4)}
.crop-title{font-weight:600;font-size:1.06rem;margin-bottom:4px;text-align:center}
.crop-sub{font-size:.82rem;color:var(--muted);text-align:center;margin-bottom:16px}
.crop-stage{position:relative;overflow:hidden;margin:0 auto;background:#111111;border-radius:0;touch-action:none;cursor:grab;user-select:none}
.crop-stage.drag{cursor:grabbing}
.crop-stage.avatar{border-radius:50%}
.crop-stage canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-user-drag:none;user-select:none}
.crop-zoom{display:flex;align-items:center;gap:12px;margin:18px 6px 4px}
.crop-zoom input{flex:1;accent-color:var(--emerald)}
.crop-zoom .zi{color:var(--muted);display:grid;place-items:center;width:20px;flex:0 0 auto}
.crop-zoom .zi .ic{width:18px;height:18px}
.crop-actions{display:flex;gap:10px;margin-top:16px}
.crop-actions .btn{flex:1}

/* ---- WYSIWYG EDITOR ---- */
.wz-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--line);border-bottom:0;border-radius:4px 4px 0 0;background:var(--bg);position:sticky;top:calc(var(--header-h) + 2px);z-index:5}
.wz-btn{height:34px;min-width:36px;padding:0 11px;border:1px solid var(--line);background:var(--card);border-radius:8px;font-size:.85rem;font-weight:600;color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .14s var(--ease)}
.wz-btn:hover{border-color:var(--emerald);color:var(--emerald-ink)}
.wz-btn.on{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.wz-btn .ic{width:15px;height:15px}
.wz-sep{width:1px;background:var(--line);margin:3px 2px}
.wz-editor{border:1px solid var(--line);border-radius:0 0 12px 12px;padding:18px 20px;min-height:420px;line-height:1.75;font-size:1.06rem;overflow-y:auto;max-height:70vh;background:var(--card)}
.wz-editor:focus{outline:none;border-color:var(--emerald)}
.wz-editor:empty:before{content:attr(data-placeholder);color:var(--muted)}
.wz-editor h2{font-family:var(--serif);font-size:1.5rem;margin:20px 0 8px}
.wz-editor h3{font-family:var(--serif);font-size:1.25rem;margin:16px 0 6px}
.wz-editor p{margin:0 0 12px}
.wz-editor blockquote{border-left:3px solid var(--emerald);margin:14px 0;padding:8px 16px;color:var(--muted);background:color-mix(in srgb,var(--emerald) 5%,transparent);border-radius:0 10px 10px 0}
.wz-editor img{max-width:100%;border-radius:4px;margin:10px 0;display:block}
.wz-editor ul,.wz-editor ol{padding-left:24px;margin:10px 0}
.wz-editor li{margin:4px 0}
.wz-editor a{color:var(--emerald-ink);text-decoration:underline}
.counter{float:right;font-family:var(--mono);font-size:.76rem;color:var(--muted);font-weight:500}
.counter.good{color:var(--emerald-ink)}
.counter.over{color:var(--alert)}
.src-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.src-row{display:flex;gap:8px;align-items:center}
.src-row input.sn{flex:0 0 32%;min-width:110px}
.src-row input.su{flex:1;min-width:0}
.src-del{flex:0 0 auto;width:38px;height:46px;border:1px solid var(--line);background:var(--card);border-radius:4px;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;transition:all .14s var(--ease)}
.src-del:hover{border-color:var(--alert);color:var(--alert)}

/* ---- FEED / EXPLORE / FOLLOW ---- */
.explore-media{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px;margin:0 auto 4px}
.explore-media .em-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:0;text-decoration:none;color:#fff;box-shadow:var(--raise);transition:transform .15s var(--ease),box-shadow .18s}
.explore-media .em-link:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(37,37,37,.22)}
.explore-media .shorts{background:linear-gradient(135deg,#252525 0%,#747474 55%,rgb(var(--rb-red-solid)) 130%)}
.explore-media .videos{background:linear-gradient(135deg,rgb(var(--rb-red-solid)) 0%,rgb(var(--rb-red-solid-2)) 55%,#252525 130%)}
.explore-media .em-ic-wrap{width:42px;height:42px;flex:0 0 auto;border-radius:4px;display:grid;place-items:center;background:rgba(255,255,255,.16)}
.explore-media .em-ic-wrap .ic{width:22px;height:22px;fill:#fff;stroke:none}
.explore-media .em-tx b{display:block;font-size:1.02rem;line-height:1.1}
.explore-media .em-tx small{opacity:.85;font-size:.78rem}
@media(max-width:420px){.explore-media .em-tx small{display:none}}
.feed-tabs{display:flex;gap:8px;margin:0 auto 16px;max-width:640px;position:sticky;top:var(--header-h);z-index:6;padding:10px 0;background:linear-gradient(var(--bg) 72%,transparent)}
.feed-tab{flex:0 0 auto;padding:9px 17px;border:1px solid var(--line);background:var(--card);border-radius:999px;font-weight:600;font-size:.9rem;color:var(--muted);cursor:pointer;transition:all .16s var(--ease)}
.feed-tab:hover{color:var(--fg);border-color:var(--emerald)}
.feed-tab.on{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.feed-list{display:grid;grid-template-columns:1fr;gap:16px;max-width:100%;margin:0 auto;align-items:start}
@media(min-width:720px){.feed-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1060px){.feed-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feed-list .empty{grid-column:1/-1}
.feed-card{height:100%;display:flex;flex-direction:column}
.feed-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 14px;box-shadow:var(--raise)}
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.fc-who{display:flex;align-items:center;gap:9px;color:var(--fg);min-width:0}
.fc-who.muted{color:var(--muted)}
.fc-dp{width:34px;height:34px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--emerald),#0a4d39);display:grid;place-items:center;color:#fff;font-weight:700;font-size:.92rem;flex:0 0 auto}
.fc-dp img{width:100%;height:100%;object-fit:cover}
.fc-dp.anon{background:var(--mist);color:var(--muted)}
.fc-name{font-weight:600;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:5px}
.fc-name .verified-tick svg{width:14px;height:14px}
.fc-kind{display:inline-flex;align-items:center;gap:5px;font-size:.73rem;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:4px 9px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.fc-kind .ic{width:13px;height:13px}
.fc-kind.alert{color:rgb(var(--rb-red-ink));border-color:color-mix(in srgb,var(--alert) 35%,var(--line))}
.fc-art{display:block;color:var(--fg)}
.fc-art .ac-cat{font-size:.71rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--emerald-ink);margin-bottom:6px}
.fc-art h3{font-family:var(--serif);font-size:1.28rem;line-height:1.28;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fc-art p{color:var(--muted);margin:0}
.fc-foot{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:.8rem;color:var(--muted)}
.fc-has-img{position:relative;overflow:hidden;padding:0}
.fc-img{position:absolute;inset:0;z-index:0}
.fc-img img{width:100%;height:100%;object-fit:cover;display:block}
.fc-img-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,18,18,.48) 0%,rgba(18,18,18,.34) 26%,rgba(18,18,18,.80) 62%,rgba(18,18,18,.97) 100%)}
.fc-img-body{position:relative;z-index:2;min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff}
.fc-has-img .fc-kind{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(4px)}
.fc-has-img .fc-art{color:#fff}
.fc-has-img .fc-art .ac-cat{color:#FF6B73;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.fc-has-img .fc-art p{color:rgba(255,255,255,.86)}
.fc-has-img .fc-foot{color:rgba(255,255,255,.82);border-top:1px solid rgba(255,255,255,.22);padding-top:10px}
.fc-has-img .fc-who{color:#fff}
.fc-foot .follow-btn{margin-left:auto}
.fc-rate-body{display:flex;align-items:center;gap:16px}
.fr-num{font-family:var(--mono);font-size:2rem;font-weight:700;color:var(--emerald-ink);line-height:1}
.fr-num span{font-size:1rem;margin-left:1px}
.fr-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.fr-meta b{font-size:1rem}
.fr-meta span{font-size:.85rem;color:var(--muted)}
.fr-cs{font-family:var(--mono);font-size:.78rem!important}
.fc-scam-body .sc-type{font-weight:700;font-size:1.05rem;margin-bottom:6px}
.fc-scam-body .sc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.fc-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);margin:0 0 8px}
.fc-avoid{font-size:.9rem;background:color-mix(in srgb,var(--emerald) 7%,transparent);border-radius:4px;padding:8px 12px}
.fc-confess-body{font-size:1.02rem;line-height:1.6}
.fc-confess .cc-cat{display:inline-block;margin-bottom:8px}
.follow-btn{flex:0 0 auto;padding:7px 16px;border:1px solid var(--emerald);background:var(--emerald);color:#fff;border-radius:999px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .16s var(--ease);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.follow-btn:hover{filter:brightness(1.06)}
.follow-btn.on{background:transparent;color:var(--emerald-ink);border-color:var(--line)}
.follow-btn.on:hover{border-color:var(--alert);color:var(--alert)}
.follow-btn:disabled{opacity:.6}
.author-card .follow-btn{margin-left:auto;align-self:flex-start;flex:0 0 auto}
.soc-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.soc-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);background:var(--card);transition:transform .12s var(--ease),color .18s,border-color .18s}
.soc-ic:hover{transform:translateY(-2px);color:var(--emerald);border-color:color-mix(in srgb,var(--emerald) 40%,var(--line))}
.soc-ic .ic{width:17px;height:17px}
.soc-edit{margin:14px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:0;background:color-mix(in srgb,var(--fg) 3%,transparent)}
.soc-input{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.soc-input .ic{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
.soc-input .inp{flex:1}
.prof-actions{margin-left:auto;padding-bottom:6px}
.prof-bio{margin:14px 2px 0;max-width:640px;color:var(--muted)}
.sec-h{font-family:var(--serif);font-size:1.3rem;margin:0 0 6px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* ---- REPORT CARD ---- */
.rc-wrap{max-width:680px;margin:0 auto;padding:0 20px 48px}
.rc-hero{display:flex;align-items:center;gap:24px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--raise);margin-bottom:18px}
.rc-grade-ring{flex:0 0 auto;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:3rem;font-weight:700;color:#fff;position:relative;transition:background .5s var(--ease)}
.rc-grade-ring.anim{animation:gradeIn .55s var(--ease) both}
@keyframes gradeIn{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
.rc-grade-label{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.rc-grade-title{font-family:var(--serif);font-size:1.45rem;font-weight:700;line-height:1.15;margin-bottom:6px}
.rc-grade-meta{font-size:.88rem;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.streak-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.streak-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:linear-gradient(120deg,var(--emerald),#0a4d39);color:#fff;border-radius:999px;font-weight:700;font-size:.9rem}
.streak-pill .ic{width:16px;height:16px}
.rc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.rc-stat{background:var(--card);border:1px solid var(--line);border-radius:0;padding:14px 12px;text-align:center}
.rc-stat .v{font-family:var(--mono);font-size:1.35rem;font-weight:700;line-height:1}
.rc-stat .k{font-size:.75rem;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}
.rc-goals{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:14px}
.rc-goals h3{font-size:1rem;font-weight:700;margin:0 0 12px}
.goal-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.goal-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--emerald);cursor:pointer;flex:0 0 auto}
.goal-row input[type=text]{flex:1;height:44px;padding:0 12px;border-radius:4px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);font-size:.95rem;font-family:var(--sans)}
.goal-row input[type=text]:focus{outline:none;border-color:var(--emerald)}
.goal-del{flex:0 0 auto;width:36px;height:44px;border:1px solid var(--line);background:var(--card);border-radius:4px;color:var(--muted);font-size:1.2rem;cursor:pointer;transition:all .14s var(--ease)}
.goal-del:hover{border-color:var(--alert);color:var(--alert)}
.rc-history{margin-top:24px}
.rc-history h2{font-family:var(--serif);font-size:1.2rem;margin:0 0 12px}
.month-grid{display:flex;flex-wrap:wrap;gap:8px}
.month-chip{display:flex;flex-direction:column;align-items:center;padding:10px 14px;border-radius:0;border:1px solid var(--line);background:var(--card);min-width:64px;gap:4px;cursor:default;transition:transform .14s var(--ease)}
.month-chip:hover{transform:translateY(-2px)}
.month-chip .mc-grade{font-family:var(--serif);font-size:1.3rem;font-weight:700;line-height:1}
.month-chip .mc-month{font-size:.7rem;color:var(--muted);font-family:var(--mono)}
.rc-form-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--raise);margin-bottom:14px}
.rc-form-wrap h2{font-family:var(--serif);font-size:1.2rem;margin:0 0 16px}
.rc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.live-rate{font-family:var(--mono);font-size:1.45rem;font-weight:700;color:var(--emerald-ink);text-align:center;padding:14px;border-radius:0;border:1.5px solid var(--line);background:var(--bg);margin-bottom:12px;transition:color .3s}
.live-rate small{display:block;font-size:.72rem;color:var(--muted);font-family:var(--sans);font-weight:400;margin-top:2px}
.share-card-bar{display:flex;gap:10px;margin-top:14px}
@media(max-width:600px){.rc-row{grid-template-columns:1fr}.rc-stats{grid-template-columns:repeat(2,1fr)}.rc-hero{flex-direction:column;text-align:center;align-items:center}}
.goog-te-banner-frame{display:none!important}
body{top:0!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}


/* =========================================================================
 * AURORA - Bankerpedia's living colour skin.
 *
 * Colour + motion only. Nothing below alters layout, box size, spacing, grid
 * structure, component markup or copy: every declaration touches background,
 * color, border-color, box-shadow or animation.
 *
 * Palette: the logo red is the anchor; sky blue is the trust register; coral,
 * rose, violet, indigo and gold bridge them. The hue ring used everywhere is
 *   gold 38deg - coral 7deg - red 356deg - rose 342deg - violet 255deg
 *   - indigo 228deg - sky 203deg
 * and every gradient pair is adjacent on it, so no interpolation ever crosses
 * the olive / brown zone between warm and cool.
 * ===================================================================== */

@property --rb-hue{syntax:"<angle>";inherits:false;initial-value:0deg}


:root{
  /* --- BRAND HUES. Identical in both themes: these are the colours the brand
         is made of, so every existing rule in the sheet can point at them
         without its appearance changing. --- */
  --rb-red:255 30 45;          /* rgb(var(--rb-red-solid))  the logo red                     */
  --rb-coral:255 107 90;       /* #FF6B5A  community warmth                 */
  --rb-gold:255 176 32;        /* #FFB020  returns / prosperity             */
  --rb-rose:255 74 122;        /* #FF4A7A  bridges red into violet          */
  --rb-violet:124 92 252;      /* #7C5CFC  midpoint of the cool arc         */
  --rb-indigo:75 107 232;      /* #4B6BE8  institutional trust              */
  --rb-indigo-mid:59 111 217;  /* #3B6FD9  the existing mid blue            */
  --rb-sky:29 155 240;         /* #1D9BF0  clarity                          */
  --rb-navy:11 11 12;          /* #0B0B0C  the dark anchor                  */
  --rb-panel:13 13 14;         /* #0D0D0E  always-dark panel base           */

  /* --- AURORA TONES. What the animated surfaces actually mix in. In dark mode
         these are lifted (below): at low luminance a raw hue mixed into navy
         loses its chroma and reads as mud. --- */
  --rb-t-red:var(--rb-red);
  --rb-t-coral:var(--rb-coral);
  --rb-t-gold:var(--rb-gold);
  --rb-t-rose:var(--rb-rose);
  --rb-t-violet:var(--rb-violet);
  --rb-t-indigo:var(--rb-indigo);
  --rb-t-sky:var(--rb-sky);

  /* The same three cool tones again, under a name nothing overrides. The site
     chrome re-points --rb-t-* at grey further down; a content card re-points
     it back at these, so the card wall keeps the whole hue ring. */
  --rb-k-violet:var(--rb-violet);
  --rb-k-indigo:var(--rb-indigo);
  --rb-k-sky:var(--rb-sky);

  /* --- role tokens: light ---
         Black and white, with the aurora and the logo red doing all the
         colouring. Every grey here is the NEUTRAL with the same relative
         luminance as the blue it replaces, so nothing in the sheet changed
         its contrast ratio when the blue came out. --- */
  --rb-bg:252 252 252;
  --rb-surface:255 255 255;
  --rb-ink:17 17 17;           /* #111111 body text, a shade off true black  */
  --rb-ink-dim:83 83 83;       /* #535353 secondary text: the exact neutral
                                  of the blue grey it replaces, so every ratio
                                  in the sheet is the one it always was       */
  --rb-line:227 227 227;       /* #E3E3E3 hairlines                          */
  --rb-deep:0 0 0;             /* #000000 primary button / deep panel        */

  /* --- accent tokens tuned for contrast, not for looks alone --- */
  --rb-red-solid:214 16 30;    /* #D6101E  red fill under white text  5.3:1 */
  --rb-red-solid-2:184 12 24;  /* #B80C18  its gradient partner             */
  --rb-amber-solid:168 74 10;  /* #A84A0A  amber fill under white text 5.3:1 */
  --rb-red-ink:167 20 30;      /* #A7141E  red TEXT on a TINTED card surface  */
  --rb-red-mark:214 16 30;     /* #D6101E  the brand red, for ICONS and marks */
  --rb-red-nav:196 20 31;      /* #C4141F  the brand red at the brightest value
                                  that still clears AA on the header, drawer and
                                  footer - same hue as the logo, 84% of its value */
  /* Named for the role it plays, not for a colour it no longer is: this is
     the strong NEUTRAL ink used for badges and secondary marks on a light
     surface. Left under its old name so no rule in the sheet had to move. */
  --rb-blue-ink:38 38 41;      /* #262629  neutral ink on light surfaces     */
  --rb-coral-ink:255 178 183;  /* #FFB2B7  coral TEXT on dark heroes  4.7:1 */
  --rb-cat-ink:255 178 183;    /* category labels over a media scrim        */
  --rb-verify:29 155 240;      /* #1D9BF0  the verified tick. This one blue is
                                  not decoration and not part of the palette:
                                  it is a convention readers already know, the
                                  same way the share buttons keep each
                                  platform's own colour. It is exempt from the
                                  black theme on purpose.                    */

  /* --- aurora mixing controls --- */
  --rb-tint:30%;
  --rb-tint-2:20%;
  --rb-veil:.30;
  --rb-chrome:.94;
  --rb-a:var(--rb-t-red);
  --rb-b:var(--rb-t-rose);
  --rb-dur:26s;
  --rb-phase:0s;
  --rb-ease:cubic-bezier(.45,.05,.55,.95);

  /* --- rewire the sheet's original tokens onto the aurora palette, so the
         whole stylesheet inherits the new colours without a rule of it being
         edited. --rb-panel is deliberately dark in BOTH themes: --ink names
         the dark panel base (.cta-band, .gatecard, .toast), not body text. --- */
  --ink:rgb(var(--rb-panel));
  --surface:rgb(var(--rb-surface));
  --bg:rgb(var(--rb-bg));
  --fg:rgb(var(--rb-ink));
  --card:rgb(var(--rb-surface));
  --line:rgb(var(--rb-line));
  --muted:rgb(var(--rb-ink-dim));
  --mist:rgb(var(--rb-line));
  --emerald:rgb(var(--rb-deep));
  --brass:rgb(var(--rb-red));
  --alert:rgb(var(--rb-red));
  --brass-ink:rgb(var(--rb-red-ink));
  --emerald-ink:rgb(var(--rb-blue-ink));
  --inkb:rgb(var(--rb-deep));
}

html[data-theme="dark"]{
  /* Dark-mode aurora tones are SATURATED, not pale. The instinct is to lighten a
     hue so it survives a dark ground, but a pale hue mixed into navy loses its
     chroma and lands on grey. A fully saturated tone at the same mix ratio keeps
     roughly twice the chroma at a LOWER luminance - so the cards read as real
     colour and the text on them gets more contrast, not less.
     Measured in Oklab: these land at chroma .06-.16 where the pale set managed
     .02-.07. Gold is an orange rather than a yellow for the same reason. */
  --rb-t-red:255 10 34;        /* #FF0A22 -> surface #6B1939 crimson  */
  --rb-t-coral:255 74 20;      /* #FF4A14 -> surface #6B3034 brick    */
  --rb-t-gold:255 168 0;       /* #FFA800 -> surface #6B522D bronze   */
  --rb-t-rose:255 10 92;       /* #FF0A5C -> surface #6B194E plum     */
  --rb-t-violet:106 26 255;    /* #6A1AFF -> surface #361F89 violet   */
  --rb-t-indigo:36 64 255;     /* #2440FF -> surface #1C2D89 indigo   */
  --rb-t-sky:0 140 255;        /* #008CFF -> surface #0F4889 steel    */

  --rb-k-violet:106 26 255;    /* the keeper copies, lifted the same way */
  --rb-k-indigo:36 64 255;
  --rb-k-sky:0 140 255;

  --rb-bg:11 11 12;            /* #0B0B0C - near black, not true black: on an
                                  OLED panel true black smears as you scroll,
                                  and a long read is easier a shade above it  */
  --rb-surface:36 36 36;       /* #242424 - lifted enough to hold the aurora */
  --rb-ink:244 244 244;
  --rb-ink-dim:209 209 209;
  --rb-line:46 46 46;
  --rb-deep:33 33 33;

  --rb-red-ink:255 194 198;
  --rb-red-mark:255 95 107;    /* the same mark, lifted so it reads on dark */
  --rb-red-nav:255 95 107;     /* #FF5F6B on the dark chrome */
  --rb-blue-ink:209 209 209;   /* the same neutral ink, lifted for dark      */
  --rb-coral-ink:254 195 188;

  --rb-tint:36%;
  --rb-tint-2:26%;
  --rb-veil:.42;
  --rb-chrome:.92;
  --rb-a:var(--rb-t-red);
  --rb-b:var(--rb-t-rose);

  /* the same rewiring again: the sheet's own html[data-theme="dark"] block
     outranks :root, so every legacy token has to be restated here or dark mode
     would silently keep the old hard-coded hexes. */
  --ink:rgb(var(--rb-panel));
  --surface:rgb(var(--rb-surface));
  --bg:rgb(var(--rb-bg));
  --fg:rgb(var(--rb-ink));
  --card:rgb(var(--rb-surface));
  --line:rgb(var(--rb-line));
  --muted:rgb(var(--rb-ink-dim));
  --mist:rgb(var(--rb-line));
  --emerald:rgb(var(--rb-deep));
  --brass:rgb(var(--rb-red));
  --alert:rgb(var(--rb-red));
  --brass-ink:rgb(var(--rb-red-ink));
  --emerald-ink:rgb(var(--rb-blue-ink));
  --inkb:rgb(var(--rb-deep));
  --inksh:rgba(0,0,0,.75);
  --raise:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------- motion ---
 * Every loop below moves only background-position, transform or opacity, plus
 * one registered custom property (--rb-hue) that feeds a handful of 3px accent
 * bars. Nothing animates box-shadow blur, filter, or any layout property.
 * Durations are 19-38s and all run in alternate mode on an ease-in-out curve, so the
 * motion slows to a stop at each extreme and never reads as mechanical.
 * -------------------------------------------------------------------------*/
@keyframes rbTide{from{background-position:2% 12%}to{background-position:98% 88%}}
@keyframes rbTideB{from{background-position:96% 86%}to{background-position:4% 14%}}
@keyframes rbFloatA{from{transform:translate3d(-9%,-7%,0)}to{transform:translate3d(11%,9%,0)}}
@keyframes rbHue{from{--rb-hue:-16deg}to{--rb-hue:16deg}}


/* ------------------------------------------------------- page backdrop ---
 * Two blob fields behind everything.
 *
 * ::before is the layer that moves. It drifts by translate3d only - never
 * scale, which would force Chrome to re-raster the layer at every new size -
 * so once it is painted the drift is pure compositor work: no repaint of the
 * page, no layout, no CLS.
 *
 * ::after holds a second, complementary field and is deliberately STATIC, with
 * no transform and no will-change. Measured on the homepage, a second
 * *composited* viewport-sized layer doubled the frame time; the same layer left
 * uncomposited costs nothing. It gives the field its depth; ::before gives it
 * its life. */
html{background-color:rgb(var(--rb-bg))}
body{background-color:transparent}
body::before,body::after{
  content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none;
}
body::before{
  will-change:transform;backface-visibility:hidden;
  background:
    radial-gradient(30% 34% at 24% 26%,rgb(var(--rb-t-sky) / var(--rb-veil)) 0%,rgb(var(--rb-t-sky) / 0) 68%),
    radial-gradient(27% 31% at 76% 19%,rgb(var(--rb-t-red) / calc(var(--rb-veil) * .85)) 0%,rgb(var(--rb-t-red) / 0) 66%),
    radial-gradient(33% 36% at 72% 76%,rgb(var(--rb-t-violet) / calc(var(--rb-veil) * .9)) 0%,rgb(var(--rb-t-violet) / 0) 70%),
    radial-gradient(29% 33% at 20% 80%,rgb(var(--rb-t-coral) / calc(var(--rb-veil) * .7)) 0%,rgb(var(--rb-t-coral) / 0) 68%);
  animation:rbFloatA 31s var(--rb-ease) infinite alternate;
}
body::after{
  background:
    radial-gradient(36% 40% at 50% 44%,rgb(var(--rb-t-indigo) / calc(var(--rb-veil) * .5)) 0%,rgb(var(--rb-t-indigo) / 0) 74%),
    radial-gradient(31% 35% at 88% 52%,rgb(var(--rb-t-rose) / calc(var(--rb-veil) * .42)) 0%,rgb(var(--rb-t-rose) / 0) 72%),
    radial-gradient(31% 35% at 10% 50%,rgb(var(--rb-t-gold) / calc(var(--rb-veil) * .34)) 0%,rgb(var(--rb-t-gold) / 0) 72%);
}

/* ------------------------------------------------- where the blue may live -
 * The two rules directly above are the page wash: body::before and body::after,
 * the aurora drifting behind everything on a white page. That is the one place
 * the cool end of the hue ring belongs, and it keeps the full ring.
 *
 * Everything else on the page is the SITE, and the site is black. The rule
 * below re-points the three cool tones at graphite for every element inside
 * the body - the full-screen hero, the section heroes, the dark bands, the
 * header, drawer and footer, the media scrims, and the eleven-step card tint
 * rotation, which reads --rb-t-* to build its --rb-a / --rb-b pair. A custom
 * property set on an element beats the same property inherited from :root, so
 * one declaration reaches all of them without a single existing rule being
 * touched; and because body::before and body::after belong to <body> itself
 * rather than to its children, the wash is the one thing the override cannot
 * reach. That is exactly the line we want: blue behind the page, black on it.
 *
 * The greys are not arbitrary. Indigo carries the brightest stops (.42 to .46)
 * so it takes the lightest value; sky is used at .16 to .26 and needs a higher
 * value to stay visible at all; violet sits between them. Warm stays warm: red,
 * coral, gold and rose are untouched, so a hero is still black with a red glow
 * in it rather than black with nothing. */
body > *{
  --rb-t-indigo:98 98 98;
  --rb-t-violet:74 74 74;
  --rb-t-sky:122 122 122;
}

/* ...with one exception, and it is the important one. A CONTENT CARD is not
 * chrome. The wall of rates, articles, scam alerts and confessions is the
 * community talking, and a wall of black tiles says nothing about any of them;
 * the eleven-step hue rotation is what makes that grid read as many people
 * rather than one template. So every surface in the card rotation - the card
 * fill, the scrim over a cover photo, and the bare thumbnail - takes the cool
 * tones back from --rb-k-*, the copy the override above cannot reach.
 *
 * The split is therefore: the page wash is colour, the content is colour, and
 * everything the site itself is made of - hero, bands, header, drawer, footer,
 * meshes, blobs - is black with red in it. */
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card .card-scrim,.art-card .card-scrim,.rel-scrim,.acg-grad,.fc-img-scrim,.bv-scrim,.mp-thumb,.vc-thumb,.acb-cover,.acg-thumb,.fc-img,.st-thumb){
  --rb-t-violet:var(--rb-k-violet);
  --rb-t-indigo:var(--rb-k-indigo);
  --rb-t-sky:var(--rb-k-sky);
}

/* ------------------------------------------------------------ aurora cards -
 * One shared fill. --rb-a / --rb-b are set per grid position below, so a wall
 * of cards reads as six different hues rather than one repeated. Each card
 * gets its own duration and a negative delay, so nothing breathes in unison. */
html[data-theme]:root .stat,html[data-theme]:root .dg-card,html[data-theme]:root .mp-card,html[data-theme]:root .b30-card,html[data-theme]:root .ac-why-cell,html[data-theme]:root .acg-card,html[data-theme]:root .rate-card,html[data-theme]:root .scam-card,html[data-theme]:root .chal-card,html[data-theme]:root .author-tile,html[data-theme]:root .feed-card,html[data-theme]:root .sr-card,html[data-theme]:root .settings-section,html[data-theme]:root .pod,html[data-theme]:root .vid-card,html[data-theme]:root .certv-card,html[data-theme]:root .mod-row,html[data-theme]:root .astat,html[data-theme]:root .ptype,html[data-theme]:root .mp-imp,html[data-theme]:root .mp-try,html[data-theme]:root .pg-card,html[data-theme]:root .pstat,html[data-theme]:root .rc-hero,html[data-theme]:root .rc-stat,html[data-theme]:root .acc-card,html[data-theme]:root .actd-stat,html[data-theme]:root .lvl,html[data-theme]:root .score-card,html[data-theme]:root .author-card,html[data-theme]:root .create-chal,html[data-theme]:root .b30-how-cell,html[data-theme]:root .ai-tldr-card,html[data-theme]:root .acl-hero,html[data-theme]:root .acl-cert,html[data-theme]:root .ac-cert-card,html[data-theme]:root .acr-form,html[data-theme]:root .acfee,html[data-theme]:root .acad-form,html[data-theme]:root .ab-mod,html[data-theme]:root .acm,html[data-theme]:root .editbox,html[data-theme]:root .usr-card,html[data-theme]:root .cl-item,html[data-theme]:root .auth-card,html[data-theme]:root .rc-goals,html[data-theme]:root .rc-history,html[data-theme]:root .rc-form-wrap,html[data-theme]:root .acqr-row,html[data-theme]:root .usr-search-wrap,html[data-theme]:root .usr-edit-form,html[data-theme]:root .prof-impact,html[data-theme]:root .b30-summary,html[data-theme]:root .actdr-row,html[data-theme]:root .actd-rev,html[data-theme]:root .acch,html[data-theme]:root .ac-sheet,html[data-theme]:root .b30-sheet,html[data-theme]:root .b30-share-sheet,html[data-theme]:root .mp-edit-sheet,html[data-theme]:root .mp-sheet-in,html[data-theme]:root .ach-sheet,html[data-theme]:root .acl-tli,html[data-theme]:root .alf-type,html[data-theme]:root .acad-ev,html[data-theme]:root .ac-libcta,html[data-theme]:root .dg-card,html[data-theme]:root .prof-grow .pg-card,html[data-theme]:root .chal-prog,html[data-theme]:root .acc-progress,html[data-theme]:root .acl-video,html[data-theme]:root .lib-suggest,html[data-theme]:root .acci-foot,html[data-theme]:root .actd-promo-x,html[data-theme]:root .bv-p,html[data-theme]:root .bv-panel,html[data-theme]:root .bv-nudge,html[data-theme]:root .bv-empty,html[data-theme]:root .bv-tr,html[data-theme]:root .bv-side,html[data-theme]:root .bv-dt,html[data-theme]:root .bv-sk,html[data-theme]:root .bv-count,html[data-theme]:root .bv-fchip,html[data-theme]:root .bv-search,html[data-theme]:root .bv-fbtn,html[data-theme]:root .bv-dhero{
  background-image:linear-gradient(135deg,
    color-mix(in srgb,rgb(var(--rb-a)) var(--rb-tint),rgb(var(--rb-surface))) 0%,
    color-mix(in srgb,rgb(var(--rb-a)) var(--rb-tint-2),rgb(var(--rb-surface))) 31%,
    color-mix(in srgb,rgb(var(--rb-b)) var(--rb-tint-2),rgb(var(--rb-surface))) 63%,
    color-mix(in srgb,rgb(var(--rb-b)) var(--rb-tint),rgb(var(--rb-surface))) 100%);
  background-color:rgb(var(--rb-surface));
  background-size:170% 170%;
  background-position:50% 50%;
  background-repeat:no-repeat;
  animation:rbTide var(--rb-dur) var(--rb-ease) var(--rb-phase) infinite alternate;
}
html[data-theme]:root .stat,html[data-theme]:root .dg-card,html[data-theme]:root .mp-card,html[data-theme]:root .b30-card,html[data-theme]:root .ac-why-cell,html[data-theme]:root .acg-card,html[data-theme]:root .rate-card,html[data-theme]:root .scam-card,html[data-theme]:root .chal-card,html[data-theme]:root .author-tile,html[data-theme]:root .feed-card,html[data-theme]:root .sr-card,html[data-theme]:root .settings-section,html[data-theme]:root .pod,html[data-theme]:root .vid-card,html[data-theme]:root .certv-card,html[data-theme]:root .mod-row,html[data-theme]:root .astat,html[data-theme]:root .ptype,html[data-theme]:root .mp-imp,html[data-theme]:root .mp-try,html[data-theme]:root .pg-card,html[data-theme]:root .pstat,html[data-theme]:root .rc-hero,html[data-theme]:root .rc-stat,html[data-theme]:root .acc-card,html[data-theme]:root .actd-stat,html[data-theme]:root .lvl,html[data-theme]:root .score-card,html[data-theme]:root .author-card,html[data-theme]:root .create-chal,html[data-theme]:root .b30-how-cell,html[data-theme]:root .ai-tldr-card,html[data-theme]:root .acl-hero,html[data-theme]:root .acl-cert,html[data-theme]:root .ac-cert-card,html[data-theme]:root .acr-form,html[data-theme]:root .acfee,html[data-theme]:root .acad-form,html[data-theme]:root .ab-mod,html[data-theme]:root .acm,html[data-theme]:root .editbox,html[data-theme]:root .usr-card,html[data-theme]:root .cl-item,html[data-theme]:root .auth-card,html[data-theme]:root .rc-goals,html[data-theme]:root .rc-history,html[data-theme]:root .rc-form-wrap,html[data-theme]:root .acqr-row,html[data-theme]:root .usr-search-wrap,html[data-theme]:root .usr-edit-form,html[data-theme]:root .prof-impact,html[data-theme]:root .b30-summary,html[data-theme]:root .actdr-row,html[data-theme]:root .actd-rev,html[data-theme]:root .acch,html[data-theme]:root .ac-sheet,html[data-theme]:root .b30-sheet,html[data-theme]:root .b30-share-sheet,html[data-theme]:root .mp-edit-sheet,html[data-theme]:root .mp-sheet-in,html[data-theme]:root .ach-sheet,html[data-theme]:root .acl-tli,html[data-theme]:root .alf-type,html[data-theme]:root .acad-ev,html[data-theme]:root .ac-libcta,html[data-theme]:root .dg-card,html[data-theme]:root .prof-grow .pg-card,html[data-theme]:root .chal-prog,html[data-theme]:root .acc-progress,html[data-theme]:root .acl-video,html[data-theme]:root .lib-suggest,html[data-theme]:root .acci-foot,html[data-theme]:root .actd-promo-x,html[data-theme]:root .bv-p,html[data-theme]:root .bv-panel,html[data-theme]:root .bv-nudge,html[data-theme]:root .bv-empty,html[data-theme]:root .bv-tr,html[data-theme]:root .bv-side,html[data-theme]:root .bv-dt,html[data-theme]:root .bv-sk,html[data-theme]:root .bv-count,html[data-theme]:root .bv-fchip,html[data-theme]:root .bv-search,html[data-theme]:root .bv-fbtn,html[data-theme]:root .bv-dhero{
  border-color:color-mix(in srgb,rgb(var(--rb-a)) 34%,rgb(var(--rb-line)));
}

/* No bold top edge. Several cards carry a 3px saturated bar across their top
   edge; against the new fills that reads as a heavy dark rule cutting the card
   off. These keep their shape and position - they simply stop being a bar. */
html[data-theme]:root .scam-card::before,
html[data-theme]:root .b30-card.b30-gold::before{
  background:linear-gradient(90deg,rgb(var(--rb-a) / .38),rgb(var(--rb-a) / 0) 72%);
}

html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+1){--rb-a:var(--rb-t-red);--rb-b:var(--rb-t-rose);--rb-dur:21s;--rb-phase:0s}
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+2){--rb-a:var(--rb-t-sky);--rb-b:var(--rb-t-indigo);--rb-dur:26s;--rb-phase:-5s}
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+3){--rb-a:var(--rb-t-gold);--rb-b:var(--rb-t-coral);--rb-dur:23s;--rb-phase:-11s}
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+4){--rb-a:var(--rb-t-violet);--rb-b:var(--rb-t-indigo);--rb-dur:30s;--rb-phase:-3s}
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+5){--rb-a:var(--rb-t-coral);--rb-b:var(--rb-t-red);--rb-dur:25s;--rb-phase:-17s}
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+6){--rb-a:var(--rb-t-indigo);--rb-b:var(--rb-t-sky);--rb-dur:34s;--rb-phase:-8s}
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+7){--rb-a:var(--rb-t-rose);--rb-b:var(--rb-t-violet);--rb-dur:27s;--rb-phase:-21s}
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+8){--rb-a:var(--rb-t-gold);--rb-b:var(--rb-t-rose);--rb-dur:38s;--rb-phase:-14s}
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+9){--rb-a:var(--rb-t-sky);--rb-b:var(--rb-t-violet);--rb-dur:29s;--rb-phase:-26s}
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+10){--rb-a:var(--rb-t-red);--rb-b:var(--rb-t-violet);--rb-dur:32s;--rb-phase:-7s}
html[data-theme]:root :is(.stat,.dg-card,.mp-card,.b30-card,.ac-why-cell,.acg-card,.rate-card,.scam-card,.chal-card,.author-tile,.feed-card,.sr-card,.settings-section,.pod,.vid-card,.certv-card,.mod-row,.astat,.ptype,.mp-imp,.mp-try,.pg-card,.pstat,.rc-hero,.rc-stat,.acc-card,.actd-stat,.lvl,.score-card,.author-card,.create-chal,.b30-how-cell,.ai-tldr-card,.acl-hero,.acl-cert,.ac-cert-card,.acr-form,.acfee,.acad-form,.ab-mod,.acm,.editbox,.usr-card,.cl-item,.auth-card,.rc-goals,.rc-history,.rc-form-wrap,.acqr-row,.usr-search-wrap,.usr-edit-form,.prof-impact,.b30-summary,.actdr-row,.actd-rev,.acch,.ac-sheet,.b30-sheet,.b30-share-sheet,.mp-edit-sheet,.mp-sheet-in,.ach-sheet,.acl-tli,.alf-type,.acad-ev,.ac-libcta,.dg-card,.prof-grow .pg-card,.chal-prog,.acc-progress,.acl-video,.lib-suggest,.acci-foot,.actd-promo-x,.bv-p,.bv-panel,.bv-nudge,.bv-empty,.bv-tr,.bv-side,.bv-dt,.bv-sk,.bv-count,.bv-fchip,.bv-search,.bv-fbtn,.bv-dhero,.card,.art-card,.rel-card,.feed-card,.acg-card,.vid-card,.mp-card,.acb,.bv-card):nth-child(11n+11){--rb-a:var(--rb-t-coral);--rb-b:var(--rb-t-gold);--rb-dur:36s;--rb-phase:-19s}



/* Cards that already carried their own hue keep it, but now from a token. */
.scam-card{--rb-a:var(--rb-t-red);--rb-b:var(--rb-t-coral)}
/* The aurora tint on a card is chosen by its position among its siblings,
   which means moving a card changes its colour. The summary box is not
   allowed to drift: it keeps the wash it has always had wherever it sits. */
html[data-theme]:root .ai-tldr-card{--rb-a:var(--rb-t-red);--rb-b:var(--rb-t-rose);--rb-dur:21s;--rb-phase:0s}
.acl-cert,.ac-cert-card,.certv-card{--rb-a:var(--rb-t-gold);--rb-b:var(--rb-t-coral)}
html[data-theme="dark"] .acl-cert,
html[data-theme="dark"] .ac-cert-card,
html[data-theme="dark"] .certv-card{--rb-a:var(--rb-t-coral);--rb-b:var(--rb-t-rose)}
.b30-card.b30-gold{--rb-a:var(--rb-t-gold);--rb-b:var(--rb-t-coral)}
.b30-card.b30-silver{--rb-a:var(--rb-t-indigo);--rb-b:var(--rb-t-sky)}
.b30-card.b30-bronze{--rb-a:var(--rb-t-coral);--rb-b:var(--rb-t-red)}
html[data-theme="dark"] .b30-card.b30-gold{--rb-a:var(--rb-t-coral);--rb-b:var(--rb-t-rose)}

/* The 3px accent bars are the one place the registered --rb-hue property is
   consumed: a few hundred pixels of repaint, and a hue that genuinely rotates. */
.dg-card::before,.mp-imp::before,.actdm-bar i,.aclc-bar i,.progress i.on,.bar>i{
  --rb-hue:0deg;
  background-image:linear-gradient(90deg,
    hsl(calc(356deg + var(--rb-hue)) 92% 56%) 0%,
    hsl(calc(300deg + var(--rb-hue)) 88% 62%) 46%,
    hsl(calc(206deg + var(--rb-hue)) 88% 55%) 100%);
  animation:rbHue 38s var(--rb-ease) infinite alternate;
}

/* ------------------------------------------------------------- media cards -
 * The photo stays exactly as it is; a hue wash rides above it so a grid of
 * article cards reads as a colourful wall. Text sits over the darkest part of
 * the existing scrim, so the wash cannot cost contrast. */
html[data-theme]:root .card .card-scrim,html[data-theme]:root .art-card .card-scrim,html[data-theme]:root .rel-scrim,html[data-theme]:root .acg-grad,html[data-theme]:root .fc-img-scrim,html[data-theme]:root .bv-scrim{
  background-image:
    linear-gradient(152deg,rgb(var(--rb-a) / .34) 0%,rgb(var(--rb-a) / 0) 46%,rgb(var(--rb-b) / .30) 100%),
    linear-gradient(180deg,rgba(10,10,10,.48) 0%,rgba(10,10,10,.34) 26%,rgba(10,10,10,.80) 62%,rgba(10,10,10,.97) 100%);
  background-size:200% 200%,100% 100%;
  background-position:50% 50%,0 0;
  animation:rbTideB var(--rb-dur) var(--rb-ease) var(--rb-phase) infinite alternate;
}
/* Hero scrims: the hue wash rides on a darkening layer deepened past the
   original, so the big headline type gains contrast rather than losing it. */
html[data-theme]:root .hero-full .hero-scrim,html[data-theme]:root .art-hero-full .art-hero-scrim,html[data-theme]:root .about-hero .ah-scrim,html[data-theme]:root .search-hero .sh-scrim,html[data-theme]:root .acc-hero-scrim{
  background-image:
    linear-gradient(152deg,rgb(var(--rb-a) / .30) 0%,rgb(var(--rb-a) / 0) 52%,rgb(var(--rb-b) / .26) 100%),
    linear-gradient(180deg,rgba(9,9,9,.52) 0%,rgba(9,9,9,.66) 45%,rgba(9,9,9,.93) 100%);
  background-size:140% 140%,100% 100%;
  background-position:50% 50%,0 0;
  /* static, like the heroes behind them: these scrims are full-viewport, and a
     moving background-position there repaints the whole screen every frame. */
}
/* thumbnails carry no text, so they take the wash without any darkening */
html[data-theme]:root .mp-thumb,html[data-theme]:root .vc-thumb,html[data-theme]:root .acb-cover,html[data-theme]:root .acg-thumb,html[data-theme]:root .fc-img,html[data-theme]:root .st-thumb{
  background-image:linear-gradient(152deg,rgb(var(--rb-a) / .30) 0%,rgb(var(--rb-a) / 0) 50%,rgb(var(--rb-b) / .26) 100%);
  background-size:200% 200%;
  background-position:50% 50%;
  animation:rbTide var(--rb-dur) var(--rb-ease) var(--rb-phase) infinite alternate;
}

/* -------------------------------------------------------- large dark panels */
html[data-theme]:root .cta-band,html[data-theme]:root .gatecard,html[data-theme]:root .calc-result,html[data-theme]:root .ac-mentor-band,html[data-theme]:root .actd-promo,html[data-theme]:root .mp-academy,html[data-theme]:root .prof-academy,html[data-theme]:root .acl-continue,html[data-theme]:root .prof-cover,html[data-theme]:root .bv-magic{
  background-image:
    radial-gradient(84% 96% at 12% 8%,rgb(var(--rb-t-indigo) / .42) 0%,rgb(var(--rb-t-indigo) / 0) 62%),
    radial-gradient(76% 88% at 88% 4%,rgb(var(--rb-t-red) / .30) 0%,rgb(var(--rb-t-red) / 0) 58%),
    radial-gradient(96% 92% at 68% 100%,rgb(var(--rb-t-violet) / .34) 0%,rgb(var(--rb-t-violet) / 0) 66%),
    linear-gradient(160deg,#151515 0%,#0C0C0C 52%,#121212 100%);
  background-size:200% 200%,200% 200%,200% 200%,100% 100%;
  background-position:50% 50%,50% 50%,50% 50%,0 0;
  background-color:#0C0C0C;
  animation:rbTide 24s var(--rb-ease) infinite alternate;
}

/* Full-viewport heroes: same aurora, painted once. */
html[data-theme]:root .bca-hero,html[data-theme]:root .hero-full,html[data-theme]:root .b30-hero,html[data-theme]:root .b30-hero-ol,html[data-theme]:root .ac-hero,html[data-theme]:root .ac-hero-grad,html[data-theme]:root .lib-hero,html[data-theme]:root .amp-hero,html[data-theme]:root .search-hero .sh-bg,html[data-theme]:root .about-hero,html[data-theme]:root .bvh,html[data-theme]:root .bvh-tint{
  background-image:
    radial-gradient(58% 62% at 14% 10%,rgb(var(--rb-t-indigo) / .46) 0%,rgb(var(--rb-t-indigo) / 0) 66%),
    radial-gradient(52% 58% at 86% 6%,rgb(var(--rb-t-red) / .32) 0%,rgb(var(--rb-t-red) / 0) 62%),
    radial-gradient(66% 66% at 70% 96%,rgb(var(--rb-t-violet) / .36) 0%,rgb(var(--rb-t-violet) / 0) 70%),
    radial-gradient(48% 52% at 34% 74%,rgb(var(--rb-t-sky) / .22) 0%,rgb(var(--rb-t-sky) / 0) 68%),
    linear-gradient(160deg,#151515 0%,#0C0C0C 52%,#121212 100%);
  background-color:#0C0C0C;
}

/* The motion on those heroes comes from the blob elements they already have.
   Those move by transform only, so the drift is compositor work: no repaint of
   the viewport, no layout, no CLS. Re-tinting them is the whole change here. */
.hero-full .hb1{background:rgb(var(--rb-t-red));opacity:.30}
.hero-full .hb2{background:rgb(var(--rb-t-sky));opacity:.26}
.b30-mesh .bm1{background:rgb(var(--rb-t-indigo))}
.b30-mesh .bm2{background:rgb(var(--rb-t-red))}
.b30-mesh .bm3{background:rgb(var(--rb-t-violet))}
.ac-orb.o1{background:rgb(var(--rb-t-indigo))}
.ac-orb.o2{background:rgb(var(--rb-t-rose))}
.acmb-orb{background:rgb(var(--rb-t-red))}
.ac-particles i{background:linear-gradient(180deg,rgb(var(--rb-coral-ink)),#9A9AA0)}

/* ------------------------------------------------------------------ chrome -
 * LOGO PAIRING RULE. brandLogo() renders both lockups and the theme picks one:
 *   light theme -> .bl-light, the black-and-red lockup
 *   dark  theme -> .bl-dark,  the light-wordmark lockup
 * So every surface that carries the logo is tuned to the lockup that is
 * actually on it: header, drawer and footer skew LIGHT in light theme (the
 * black wordmark pops) and skew DARK in dark theme (the light wordmark pops) -
 * the same relationship the navy splash screen already has with the light
 * lockup. These surfaces are also raised to near-opaque so a dark hero
 * scrolling underneath can no longer drag the header mid-tone. */
.hdr,.drawer,.foot{
  background-color:rgb(var(--rb-surface) / var(--rb-chrome));
  background-image:
    linear-gradient(104deg,rgb(var(--rb-t-sky) / .16) 0%,rgb(var(--rb-t-sky) / 0) 42%),
    linear-gradient(256deg,rgb(var(--rb-t-red) / .14) 0%,rgb(var(--rb-t-red) / 0) 46%);
  background-size:220% 100%,220% 100%;
  background-position:50% 0,50% 0;
  animation:rbTide 30s var(--rb-ease) infinite alternate;
}
.foot{background-color:rgb(var(--rb-bg))}
html[data-theme="dark"] .hdr,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .foot{
  background-color:rgb(var(--rb-bg) / var(--rb-chrome));
  background-image:
    linear-gradient(104deg,rgb(var(--rb-t-indigo) / .26) 0%,rgb(var(--rb-t-indigo) / 0) 46%),
    linear-gradient(256deg,rgb(var(--rb-t-red) / .20) 0%,rgb(var(--rb-t-red) / 0) 48%);
}
html[data-theme="dark"] .foot{background-color:rgb(var(--rb-bg))}

/* The story viewer and the Bankerpedia 30 hero are dark in BOTH themes, so the
   light-wordmark lockup is the correct one there whatever the theme is set to.
   Forcing the swap here is a colour fix, not a markup change. */
.story-viewer .brand-logo .bl-light{display:none}
.story-viewer .brand-logo .bl-dark{display:block}

/* ------------------------------------------------------------- ink & accent -
 * Contrast repairs that come with the palette. Every value below was measured
 * against the real rendered background - gradients and animation extremes
 * included - not against a flat swatch. */

/* Red as a FILL under white text. rgb(var(--rb-red-solid)) is 3.8:1 with white, which is under
   AA for body-sized text, so fills get the solid variant while the pure brand
   red stays the hue used in gradients and accents. */
.btn-ghost,.hero-full .btn-ghost,.cta-band .btn-ghost,.acx-pill.on,
.b30c-vote,.b30-big,.acq-opt.sel .acq-key,.mp-sh.wa{
  background-color:rgb(var(--rb-red-solid));
  border-color:rgb(var(--rb-red-solid));
  color:#fff;
}
.chip[aria-pressed="true"],.feed-tab.on,.calc-tab[aria-selected="true"]{
  background-color:rgb(var(--rb-deep));border-color:rgb(var(--rb-deep));color:#fff;
}
.pub-btn{
  background-image:linear-gradient(135deg,#252525 0%,#313131 32%,rgb(var(--rb-red-solid)) 66%,#252525 100%);
}
.ac-cta-main,.btn.ac-cta-main{
  background-image:linear-gradient(135deg,rgb(var(--rb-red-solid)),rgb(var(--rb-red-solid-2)));
}

/* Category / kind labels. The ones on light surfaces take the dark red ink; the
   ones sitting on a photo scrim take the light coral ink. Each list is written
   at the specificity of the rule it has to beat. */
.acg-cat,.acn-cat,.sc-type,.mr-type,.sr-type-pill,.b30c-sector,
.aclc-k,.acci-k,.ls-k,.rate-card .rc-prod{color:rgb(var(--rb-red-ink))}
.art-card .ac-cat,.card .ac-cat,.fc-has-img .fc-art .ac-cat,.rel-cat,.acg-cat.on{
  color:rgb(var(--rb-cat-ink));
}
.fc-art .ac-cat{color:rgb(var(--rb-blue-ink))}
/* The category chip on a picture card used to take its contrast from whatever
   the photograph happened to be. On a warm amber cover that came out at 4.26:1,
   and the next cover somebody uploads is not something a scrim gradient can be
   tuned against. So the chip carries its own plate: at .78 over pure white the
   ratio is still 5.8:1, which makes it safe on any image at all.

   The plate has to be as wide as the word and no wider. .rel-body is a flex
   column, and a flex item is stretched to the full line by default no matter
   what its own display says, which turned the chip into a black bar across the
   whole card. align-self stops the stretch in a flex or grid parent and
   fit-content stops it in a block one, so the plate is the size of "BANKING"
   wherever it is used. */
.fc-has-img .fc-art .ac-cat,.art-card .ac-cat,.rel-cat{
  display:inline-block;width:-moz-fit-content;width:fit-content;max-width:100%;
  align-self:flex-start;justify-self:start;
  background:rgba(12,12,12,.78);
  padding:3px 8px;border-radius:5px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.fc-has-img .fc-kind{
  background-color:rgba(14,14,14,.62);border-color:rgba(255,255,255,.46);color:#fff;
}
/* The scam cards carry their own six-step --tone rotation, which now disagrees
   with the eleven-step fill. Bind --tone to the card's actual aurora hue so the
   border, the top hairline and the amount chip all belong to the same card, and
   give the amount chip an ink that is measured safe on every tinted surface. */
html[data-theme]:root .scam-card{--tone:rgb(var(--rb-a))}
html[data-theme]:root .scam-card .sc-tag.amt{
  color:rgb(var(--rb-red-ink));
  border-color:color-mix(in srgb,rgb(var(--rb-a)) 42%,rgb(var(--rb-line)));
}

/* Confession tones arrive as an inline --tone per category. Rather than pin each
   one, the label ink is derived from whatever tone it is given: darkened in
   light mode, lightened in dark, so every category clears AA on its own chip. */
.cc-cat,.confess-card .cc-cat{color:color-mix(in srgb,var(--tone) 72%,#000)}
html[data-theme="dark"] .cc-cat,
html[data-theme="dark"] .confess-card .cc-cat{color:color-mix(in srgb,var(--tone) 58%,#fff)}

/* The ACTIVE menu item is the brand red, not the card-surface red. --rb-red-ink
   has to survive a 30%-tinted card, which pulls it down to a maroon; the header,
   drawer and footer are near-neutral, so the nav can carry the logo hue at its
   brightest AA-safe value. */
html[data-theme]:root .hdr-nav a.on,
html[data-theme]:root .foot .meta b,
html[data-theme]:root .bnav a.on{color:rgb(var(--rb-red-nav))}
html[data-theme]:root .bnav a.on .ic{color:rgb(var(--rb-red-nav))}

/* Pills that sit on the dark hero strips keep their light ink; only the ones on
   card surfaces take the dark ink. */
.calc-tab,.chip,.feed-tab{color:rgb(var(--rb-ink))}
.wrap .acx-pill,.ac-sheet .acx-pill,#acTeacher .acx-pill{color:rgb(var(--rb-ink))}

.eyebrow,.ac-eyebrow,.b30-eyebrow,.ah-kicker,.art-eyebrow,.acg-view{
  background-color:rgba(14,14,14,.62);
  border-color:rgba(255,255,255,.44);
  color:#fff;
}
.eyebrow .ic,.ac-eyebrow .ic,.b30-eyebrow .ic,.ah-kicker .ic{color:rgb(var(--rb-coral-ink))}
.calc-result .rlabel,.calc-result .rsub,.gatecard p,.cta-band p{color:#DEDEDE}
.calc-result .lg,.calc-result .rbig{color:#F2F2F2}

/* The typewriter caret was the same colour as the text it trails, which makes it
   read as a stray letter rather than a cursor. The brand red separates them. */
html[data-theme]:root .type-caret,
html[data-theme]:root .b30-caret{background:rgb(var(--rb-red))}

/* ---- Bankerpedia Vacancy Alert -------------------------------------------
 * The vacancy wing ships as its own Cloudflare project with its own --bv-*
 * palette. Pointing those at the aurora tokens is what makes the two wings
 * read as one site rather than two that happen to share a logo. */
/* --bv-* is tokenised inside BV_CSS itself by the build, not redefined here:
 * the vacancy pages serve CSS + BV_CSS as one sheet, so a :root block here
 * would be overwritten by BV_CSS's own :root a few hundred lines later. The
 * component rules below are specific enough to win wherever they need to. */

/* Vacancy card art. Without a hero photo the card paints a generated gradient;
   its hue used to run free around the whole wheel, which is where the olive and
   khaki cards came from. Painted from the card's own aurora pair instead, the
   art matches the wash above it and stays on the safe arc. A card that DOES
   have a hero photo still sets background-image inline and is untouched. */
html[data-theme]:root .bv-cover{
  background-image:linear-gradient(150deg,
    color-mix(in srgb,rgb(var(--rb-a)) 46%,rgb(var(--rb-navy))) 0%,
    color-mix(in srgb,rgb(var(--rb-b)) 32%,rgb(var(--rb-navy))) 58%,
    rgb(var(--rb-navy)) 100%);
}

/* The accent as a FILL under white text takes the AA-safe red - rgb(var(--rb-red-solid)) is
   3.8:1 with white, the same reason .btn-ghost is remapped on the main site. */
html[data-theme]:root .bv-btn-1,
html[data-theme]:root .bv-card:hover .bv-apply,
html[data-theme]:root .bv-card.open .bv-apply,
html[data-theme]:root .bv-dl.urg,
html[data-theme]:root .bv-row .d.urg{
  background-color:rgb(var(--rb-red-solid));
  border-color:rgb(var(--rb-red-solid));
  color:#fff;
}
html[data-theme]:root .bv-mm{
  background-image:linear-gradient(100deg,rgb(var(--rb-red-solid)),rgb(var(--rb-amber-solid)));
  color:#fff;
}
/* The accent as TEXT: dark red on light surfaces, light coral on dark ones. */
html[data-theme]:root .bv-eyebrow,
html[data-theme]:root .bv-p .big,
html[data-theme]:root .bv-mm.ghost{color:rgb(var(--rb-red-ink))}
html[data-theme]:root .bvh h1 em,
html[data-theme]:root .bvh-ai svg{color:rgb(var(--rb-coral-ink))}
/* .bv-magic is dark in BOTH themes, so the step numbers on it cannot use the
   light-surface red: it measured 3.75:1 there. The coral reads 5.2:1 against
   every phase of that band's gradient. */
html[data-theme]:root .bv-magic .bv-mb-n{color:rgb(var(--rb-coral-ink))}

/* Chips that sit on the card art keep white ink, but their plate is deepened:
   over a bronze or amber cover a 14%-white plate left white text at 1.9:1. */
html[data-theme]:root .bv-org,
html[data-theme]:root .bv-dl,
html[data-theme]:root .bv-chip{
  background-color:rgba(14,14,14,.58);
  border-color:rgba(255,255,255,.34);
  color:#fff;
}

/* ---- found once the contrast auditor started scrolling ------------------
 * These three sat below the fold on tall pages, so every earlier run reported
 * them clean without ever looking at them.
 */

/* The share tag rides on the badge art, which ranges from a mid green to a mid
   blue. A 20%-white plate under white text measured 2.4:1 on both. The same
   deep scrim the vacancy chips use puts it past 7:1 over every card. */
html[data-theme]:root .ac-share-tag{
  background-color:rgba(14,14,14,.55);
}

/* ---- Bankerpedia 30 cards -------------------------------------------------
 * Every one of these sat below the fold, so no audit had ever looked at them.
 * The cards carry a rotating pastel tint, and the component was coloured as
 * though the card were plain white.
 */

/* The two mono labels were muted ink over a tint: 3.4:1 and 2.6:1. They step
   up to an ink that clears every tint in the rotation, in both themes. */
html[data-theme]:root .b30c-sector,
html[data-theme]:root .b30c-conf-lbl{color:#434343}
/* :root in the light rule above adds a pseudo-class to its specificity, so a
   plain html[data-theme="dark"] prefix ties and LOSES on source order. Match
   the shape exactly, or the dark override silently does nothing. */
html[data-theme="dark"]:root .b30c-sector,
html[data-theme="dark"]:root .b30c-conf-lbl{color:#E3E3E3}

/* The rank was a hard coded vivid red, which cannot work on both a pale pink
   tint and a deep navy one. The ink red flips with the theme and clears both. */
html[data-theme]:root .b30c-rank{color:rgb(var(--rb-red-ink))}

/* White on the vote button measured 4.31:1, just under the line. Deepening the
   gradient by one step keeps the button unmistakably the primary action. */
html[data-theme]:root .b30c-vote{
  background-image:linear-gradient(135deg,rgb(var(--rb-red-solid)),#A50F1B);
}

/* A .btn with no variant class never gets a background from this stylesheet,
   so the browser's own grey button showed through: rgb(239,239,239) in BOTH
   themes, which is a light plate sitting on a dark card in dark mode. The two
   bare buttons on the site are both outline buttons by intent, so they get the
   surface they sit on and keep their coloured border. */
html[data-theme]:root .btn:not([class*=" btn-"]):not([class^="btn-"]){
  background-color:transparent;
}

/* The danger zone used the vivid brand red as TEXT. It is a fine border and a
   fine fill, but at 3.3:1 on a light card it is not a readable ink. The ink
   red is, and it flips to the pale red on dark so the dark theme still works. */
html[data-theme]:root .danger-zone h2,
html[data-theme]:root .danger-zone .btn#showDelete{
  color:rgb(var(--rb-red-ink));
}

/* Body copy on the growth nudge cards is muted ink over a tinted card. On the
   deeper tints in the rotation that lands at 3.7:1, so it steps up to a
   stronger ink. The heading beside it is unchanged. */
html[data-theme]:root .pg-card span{
  color:color-mix(in srgb,var(--fg) 88%,transparent);
}

/* Icons on coloured tiles: each checked against its own tile, not defaulted to
   white or black. */
.ptype .pic,.empty .em-ic,.acw-ic,.mp-try-ic,.bh-ic,.alft-ic,.vu-ic{
  background-color:color-mix(in srgb,rgb(var(--rb-a)) 18%,rgb(var(--rb-surface)));
  color:rgb(var(--rb-red-ink));
}
html[data-theme="dark"] .ptype .pic,html[data-theme="dark"] .empty .em-ic,
html[data-theme="dark"] .acw-ic,html[data-theme="dark"] .mp-try-ic,
html[data-theme="dark"] .bh-ic,html[data-theme="dark"] .alft-ic,
html[data-theme="dark"] .vu-ic{
  background-color:color-mix(in srgb,rgb(var(--rb-a)) 26%,rgb(var(--rb-surface)));
  color:rgb(var(--rb-ink));
}

/* --------------------------------------------------------- reduced motion ---
 * Same palette, frozen. Every aurora loop is stopped and pinned to the middle
 * of its cycle, so a reduced-motion visitor sees the identical colours - just
 * standing still. Placed after the sheet's own reduced-motion block so these
 * win. */
@media (prefers-reduced-motion:reduce){
  :root,body::before,body::after,.hdr,.drawer,.foot,
  .dg-card::before,.mp-imp::before,.actdm-bar i,.aclc-bar i,.progress i.on,.bar>i,
  html[data-theme]:root .stat,html[data-theme]:root .dg-card,html[data-theme]:root .mp-card,html[data-theme]:root .b30-card,html[data-theme]:root .ac-why-cell,html[data-theme]:root .acg-card,html[data-theme]:root .rate-card,html[data-theme]:root .scam-card,html[data-theme]:root .chal-card,html[data-theme]:root .author-tile,html[data-theme]:root .feed-card,html[data-theme]:root .sr-card,html[data-theme]:root .settings-section,html[data-theme]:root .pod,html[data-theme]:root .vid-card,html[data-theme]:root .certv-card,html[data-theme]:root .mod-row,html[data-theme]:root .astat,html[data-theme]:root .ptype,html[data-theme]:root .mp-imp,html[data-theme]:root .mp-try,html[data-theme]:root .pg-card,html[data-theme]:root .pstat,html[data-theme]:root .rc-hero,html[data-theme]:root .rc-stat,html[data-theme]:root .acc-card,html[data-theme]:root .actd-stat,html[data-theme]:root .lvl,html[data-theme]:root .score-card,html[data-theme]:root .author-card,html[data-theme]:root .create-chal,html[data-theme]:root .b30-how-cell,html[data-theme]:root .ai-tldr-card,html[data-theme]:root .acl-hero,html[data-theme]:root .acl-cert,html[data-theme]:root .ac-cert-card,html[data-theme]:root .acr-form,html[data-theme]:root .acfee,html[data-theme]:root .acad-form,html[data-theme]:root .ab-mod,html[data-theme]:root .acm,html[data-theme]:root .editbox,html[data-theme]:root .usr-card,html[data-theme]:root .cl-item,html[data-theme]:root .auth-card,html[data-theme]:root .rc-goals,html[data-theme]:root .rc-history,html[data-theme]:root .rc-form-wrap,html[data-theme]:root .acqr-row,html[data-theme]:root .usr-search-wrap,html[data-theme]:root .usr-edit-form,html[data-theme]:root .prof-impact,html[data-theme]:root .b30-summary,html[data-theme]:root .actdr-row,html[data-theme]:root .actd-rev,html[data-theme]:root .acch,html[data-theme]:root .ac-sheet,html[data-theme]:root .b30-sheet,html[data-theme]:root .b30-share-sheet,html[data-theme]:root .mp-edit-sheet,html[data-theme]:root .mp-sheet-in,html[data-theme]:root .ach-sheet,html[data-theme]:root .acl-tli,html[data-theme]:root .alf-type,html[data-theme]:root .acad-ev,html[data-theme]:root .ac-libcta,html[data-theme]:root .dg-card,html[data-theme]:root .prof-grow .pg-card,html[data-theme]:root .chal-prog,html[data-theme]:root .acc-progress,html[data-theme]:root .acl-video,html[data-theme]:root .lib-suggest,html[data-theme]:root .acci-foot,html[data-theme]:root .actd-promo-x,html[data-theme]:root .bv-p,html[data-theme]:root .bv-panel,html[data-theme]:root .bv-nudge,html[data-theme]:root .bv-empty,html[data-theme]:root .bv-tr,html[data-theme]:root .bv-side,html[data-theme]:root .bv-dt,html[data-theme]:root .bv-sk,html[data-theme]:root .bv-count,html[data-theme]:root .bv-fchip,html[data-theme]:root .bv-search,html[data-theme]:root .bv-fbtn,html[data-theme]:root .bv-dhero,html[data-theme]:root .card .card-scrim,html[data-theme]:root .art-card .card-scrim,html[data-theme]:root .rel-scrim,html[data-theme]:root .acg-grad,html[data-theme]:root .fc-img-scrim,html[data-theme]:root .bv-scrim,html[data-theme]:root .hero-full .hero-scrim,html[data-theme]:root .art-hero-full .art-hero-scrim,html[data-theme]:root .about-hero .ah-scrim,html[data-theme]:root .search-hero .sh-scrim,html[data-theme]:root .acc-hero-scrim,html[data-theme]:root .mp-thumb,html[data-theme]:root .vc-thumb,html[data-theme]:root .acb-cover,html[data-theme]:root .acg-thumb,html[data-theme]:root .fc-img,html[data-theme]:root .st-thumb,html[data-theme]:root .cta-band,html[data-theme]:root .gatecard,html[data-theme]:root .calc-result,html[data-theme]:root .ac-mentor-band,html[data-theme]:root .actd-promo,html[data-theme]:root .mp-academy,html[data-theme]:root .prof-academy,html[data-theme]:root .acl-continue,html[data-theme]:root .prof-cover,html[data-theme]:root .bv-magic{
    animation:none!important;
  }
  html[data-theme]:root .stat,html[data-theme]:root .dg-card,html[data-theme]:root .mp-card,html[data-theme]:root .b30-card,html[data-theme]:root .ac-why-cell,html[data-theme]:root .acg-card,html[data-theme]:root .rate-card,html[data-theme]:root .scam-card,html[data-theme]:root .chal-card,html[data-theme]:root .author-tile,html[data-theme]:root .feed-card,html[data-theme]:root .sr-card,html[data-theme]:root .settings-section,html[data-theme]:root .pod,html[data-theme]:root .vid-card,html[data-theme]:root .certv-card,html[data-theme]:root .mod-row,html[data-theme]:root .astat,html[data-theme]:root .ptype,html[data-theme]:root .mp-imp,html[data-theme]:root .mp-try,html[data-theme]:root .pg-card,html[data-theme]:root .pstat,html[data-theme]:root .rc-hero,html[data-theme]:root .rc-stat,html[data-theme]:root .acc-card,html[data-theme]:root .actd-stat,html[data-theme]:root .lvl,html[data-theme]:root .score-card,html[data-theme]:root .author-card,html[data-theme]:root .create-chal,html[data-theme]:root .b30-how-cell,html[data-theme]:root .ai-tldr-card,html[data-theme]:root .acl-hero,html[data-theme]:root .acl-cert,html[data-theme]:root .ac-cert-card,html[data-theme]:root .acr-form,html[data-theme]:root .acfee,html[data-theme]:root .acad-form,html[data-theme]:root .ab-mod,html[data-theme]:root .acm,html[data-theme]:root .editbox,html[data-theme]:root .usr-card,html[data-theme]:root .cl-item,html[data-theme]:root .auth-card,html[data-theme]:root .rc-goals,html[data-theme]:root .rc-history,html[data-theme]:root .rc-form-wrap,html[data-theme]:root .acqr-row,html[data-theme]:root .usr-search-wrap,html[data-theme]:root .usr-edit-form,html[data-theme]:root .prof-impact,html[data-theme]:root .b30-summary,html[data-theme]:root .actdr-row,html[data-theme]:root .actd-rev,html[data-theme]:root .acch,html[data-theme]:root .ac-sheet,html[data-theme]:root .b30-sheet,html[data-theme]:root .b30-share-sheet,html[data-theme]:root .mp-edit-sheet,html[data-theme]:root .mp-sheet-in,html[data-theme]:root .ach-sheet,html[data-theme]:root .acl-tli,html[data-theme]:root .alf-type,html[data-theme]:root .acad-ev,html[data-theme]:root .ac-libcta,html[data-theme]:root .dg-card,html[data-theme]:root .prof-grow .pg-card,html[data-theme]:root .chal-prog,html[data-theme]:root .acc-progress,html[data-theme]:root .acl-video,html[data-theme]:root .lib-suggest,html[data-theme]:root .acci-foot,html[data-theme]:root .actd-promo-x,html[data-theme]:root .bv-p,html[data-theme]:root .bv-panel,html[data-theme]:root .bv-nudge,html[data-theme]:root .bv-empty,html[data-theme]:root .bv-tr,html[data-theme]:root .bv-side,html[data-theme]:root .bv-dt,html[data-theme]:root .bv-sk,html[data-theme]:root .bv-count,html[data-theme]:root .bv-fchip,html[data-theme]:root .bv-search,html[data-theme]:root .bv-fbtn,html[data-theme]:root .bv-dhero,html[data-theme]:root .mp-thumb,html[data-theme]:root .vc-thumb,html[data-theme]:root .acb-cover,html[data-theme]:root .acg-thumb,html[data-theme]:root .fc-img,html[data-theme]:root .st-thumb{background-position:50% 50%!important}
  html[data-theme]:root .card .card-scrim,html[data-theme]:root .art-card .card-scrim,html[data-theme]:root .rel-scrim,html[data-theme]:root .acg-grad,html[data-theme]:root .fc-img-scrim,html[data-theme]:root .bv-scrim,html[data-theme]:root .hero-full .hero-scrim,html[data-theme]:root .art-hero-full .art-hero-scrim,html[data-theme]:root .about-hero .ah-scrim,html[data-theme]:root .search-hero .sh-scrim,html[data-theme]:root .acc-hero-scrim{background-position:50% 50%,0 0!important}
  html[data-theme]:root .cta-band,html[data-theme]:root .gatecard,html[data-theme]:root .calc-result,html[data-theme]:root .ac-mentor-band,html[data-theme]:root .actd-promo,html[data-theme]:root .mp-academy,html[data-theme]:root .prof-academy,html[data-theme]:root .acl-continue,html[data-theme]:root .prof-cover,html[data-theme]:root .bv-magic{background-position:50% 50%,50% 50%,50% 50%,0 0!important}
  .hdr,.drawer,.foot{background-position:50% 0,50% 0!important}
  /* transform is pinned ONLY on the two backdrop layers - the drawer and the
     reveal animations rely on their own transforms and must be left alone. */
  body::before{transform:translate3d(1%,1%,0)!important}
  :root{--rb-hue:0deg}
}
/* ---- admin ops console --------------------------------------------------
 * New pages, so these are the only layout rules in this file. Everything is
 * built from the same tokens as the rest of the site. */
.ops-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 18px}
.ops-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:20px}
.ops-sum .astat{text-align:center}
.ops-grp{margin-bottom:18px}
.ops-grp>h3{display:flex;align-items:center;gap:9px;font-size:1.05rem;margin:0 0 4px}
.ops-grp>p.sub{color:var(--muted);font-size:.88rem;margin:0 0 12px}
.ops-row{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:start;padding:13px 0;border-top:1px solid var(--line)}
.ops-row:first-of-type{border-top:0}
.ops-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--muted);flex:none}
.ops-dot.ok{background:rgb(var(--rb-ok))}.ops-dot.warn{background:rgb(var(--rb-warn))}
.ops-dot.fail{background:rgb(var(--rb-red-solid))}.ops-dot.off{background:color-mix(in srgb,var(--fg) 22%,transparent)}
.ops-row .lbl2{font-weight:600;font-size:.95rem}
.ops-row .det{color:var(--muted);font-size:.87rem;line-height:1.5;margin-top:2px;overflow-wrap:anywhere}
.ops-row .det.bad{color:rgb(var(--rb-red-ink))}
.ops-row .ms{font-family:var(--mono);font-size:.74rem;color:var(--muted);white-space:nowrap;padding-top:3px}
.ops-keys{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.ops-key{display:grid;grid-template-columns:1fr;gap:6px}
@media(min-width:760px){.ops-key{grid-template-columns:230px 1fr auto;align-items:center}}
.ops-key .kname{font-family:var(--mono);font-size:.78rem;font-weight:600}
.ops-key .khelp{color:var(--muted);font-size:.8rem;line-height:1.45;grid-column:1/-1;margin:-2px 0 2px}
.ops-key .ksrc{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.ops-key .ksrc.env{color:rgb(var(--rb-ok));border-color:color-mix(in srgb,rgb(var(--rb-ok)) 40%,var(--line))}
.ops-key .ksrc.vault{color:rgb(var(--rb-blue-ink));border-color:color-mix(in srgb,rgb(var(--rb-blue-ink)) 40%,var(--line))}
.ops-key .ksrc.unset{color:var(--muted)}
.ops-note{background:color-mix(in srgb,rgb(var(--rb-warn)) 10%,var(--card));border:1px solid color-mix(in srgb,rgb(var(--rb-warn)) 34%,var(--line));border-radius:var(--r);padding:13px 15px;font-size:.88rem;line-height:1.55;margin:0 0 16px}
.ops-note b{color:var(--fg)}
.ops-steps{counter-reset:s;display:grid;gap:14px;margin:0;padding:0;list-style:none}
.ops-step{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.ops-step .n{counter-increment:s;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--rb-deep));color:#fff;font-family:var(--mono);font-size:.76rem;font-weight:700}
.ops-step .n::before{content:counter(s)}
.ops-step.done .n{background:rgb(var(--rb-ok))}
.ops-step h4{margin:2px 0 4px;font-size:.98rem;font-family:var(--sans);font-weight:700}
.ops-step p{color:var(--muted);font-size:.88rem;line-height:1.55;margin:0}
.ops-pre{font-family:var(--mono);font-size:.78rem;line-height:1.6;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;overflow-x:auto;white-space:pre;margin:10px 0 0}
.ops-drop{border:2px dashed color-mix(in srgb,var(--fg) 22%,var(--line));border-radius:var(--r);padding:26px 18px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s}
.ops-drop:hover,.ops-drop.on{border-color:rgb(var(--rb-deep));background:color-mix(in srgb,var(--fg) 3%,transparent)}
.ops-tbl{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:12px}
.ops-tbl th,.ops-tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.ops-tbl th{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.ops-tbl td.n{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
/* semantic status inks, solved against the most tinted card surface in each theme */
:root{--rb-ok:14 95 65;--rb-warn:116 76 6}
html[data-theme="dark"]{--rb-ok:70 235 175;--rb-warn:255 201 77}

/* Status tiles carry meaning, so they opt out of the decorative hue rotation:
   a red 'Healthy' tile is worse than no colour at all. */
html[data-theme]:root .ops-sum.status>.astat{background-image:none;animation:none}
html[data-theme]:root .ops-sum.status>.astat.s-ok{background-color:color-mix(in srgb,rgb(var(--rb-ok)) 14%,rgb(var(--rb-surface)));border-color:color-mix(in srgb,rgb(var(--rb-ok)) 40%,rgb(var(--rb-line)))}
html[data-theme]:root .ops-sum.status>.astat.s-warn{background-color:color-mix(in srgb,rgb(var(--rb-warn)) 16%,rgb(var(--rb-surface)));border-color:color-mix(in srgb,rgb(var(--rb-warn)) 42%,rgb(var(--rb-line)))}
html[data-theme]:root .ops-sum.status>.astat.s-fail{background-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 13%,rgb(var(--rb-surface)));border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 40%,rgb(var(--rb-line)))}
html[data-theme]:root .ops-sum.status>.astat.s-off{background-color:color-mix(in srgb,var(--fg) 5%,rgb(var(--rb-surface)))}
/* One primary action per page; the rest step back. */
html[data-theme]:root .btn-quiet{background-color:transparent;background-image:none;color:rgb(var(--rb-ink));border:1.5px solid rgb(var(--rb-line));box-shadow:none}
html[data-theme]:root .btn-quiet:hover{border-color:rgb(var(--rb-deep))}

/* The tinted icon chip is a flex child of a column card, so with no width of
   its own it stretched the full width of the card and the tint made that
   stretch visible as an empty bar. Its siblings in that rule are all fixed
   squares; this one was missing its geometry. */
html[data-theme]:root .mp-try-ic{
  align-self:start;width:38px;height:38px;display:grid;place-items:center;border-radius:4px;
}


/* ---- Bank Complaint AI ---------------------------------------------------
 * Built for a reader who takes meaning from an icon, a number and a colour
 * before a sentence. Big targets, few words, motion that explains rather than
 * decorates. Every animation is transform or opacity only. */
.bca-hero{position:relative;width:100vw;max-width:100%;margin-left:calc(50% - 50vw);overflow:hidden;
  min-height:clamp(520px,86vh,780px);display:flex;align-items:center;color:#fff}
.bca-hero-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bca-vault{position:absolute;right:-8%;top:50%;width:min(58vw,620px);height:min(58vw,620px);
  transform:translateY(-50%);opacity:.5}
.bca-ring{transform-origin:50% 50%;animation:bcaSpin 64s linear infinite}
.bca-ring.r2{animation-duration:96s;animation-direction:reverse}
.bca-ring.r3{animation-duration:132s}
@keyframes bcaSpin{to{transform:rotate(360deg)}}
.bca-ledger{position:absolute;left:0;right:0;bottom:0;height:44%;opacity:.22}
.bca-ledger i{position:absolute;left:0;right:0;height:1px;background:rgb(255 255 255 / .5);
  transform-origin:left;animation:bcaLine 3.4s var(--ease) both}
.bca-hero-in{position:relative;z-index:2;width:100%}
.bca-kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--rb-coral-ink));margin-bottom:14px}
.bca-kick i{width:7px;height:7px;border-radius:50%;background:rgb(var(--rb-red));animation:bcaPulse 2.2s ease-in-out infinite}
@keyframes bcaPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
.bca-h1{font-family:var(--serif);font-weight:600;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(2.4rem,7.4vw,4.6rem);margin:0;max-width:15ch}
.bca-h1 span{display:inline-block;opacity:0;transform:translateY(.5em);animation:bcaWord .7s var(--ease) both}
.bca-h1 em{font-style:normal;color:rgb(var(--rb-coral-ink))}
@keyframes bcaWord{to{opacity:1;transform:none}}
@keyframes bcaLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bca-sub{margin:18px 0 0;max-width:42ch;font-size:clamp(1.02rem,2.4vw,1.2rem);line-height:1.5;
  color:rgba(255,255,255,.8);opacity:0;animation:bcaWord .7s var(--ease) .9s both}
.bca-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;opacity:0;animation:bcaWord .7s var(--ease) 1.1s both}
.bca-big{display:inline-flex;align-items:center;gap:12px;height:66px;padding:0 30px;border:0;cursor:pointer;
  border-radius:4px;font-family:inherit;font-weight:700;font-size:1.12rem;color:#fff;
  background:rgb(var(--rb-red-solid));box-shadow:0 14px 34px rgb(var(--rb-red) / .34);
  transition:transform .14s var(--ease),box-shadow .2s}
.bca-big:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgb(var(--rb-red) / .44)}
.bca-big:active{transform:translateY(0) scale(.985)}
.bca-big .ic{width:22px;height:22px}
.bca-counts{display:flex;flex-wrap:wrap;gap:clamp(22px,5vw,56px);margin-top:clamp(30px,5vw,50px);
  opacity:0;animation:bcaWord .7s var(--ease) 1.3s both}
.bca-count b{display:block;font-family:var(--mono);font-size:clamp(1.7rem,4vw,2.7rem);font-weight:600;letter-spacing:-.03em}
.bca-count span{display:block;margin-top:6px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.bca-trust{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:26px;opacity:0;animation:bcaWord .7s var(--ease) 1.5s both}
.bca-trust div{display:flex;align-items:center;gap:9px;font-size:.86rem;color:rgba(255,255,255,.8)}
.bca-trust .ic{width:19px;height:19px;color:rgb(var(--rb-coral-ink));flex:none}

/* the four journey panels: an icon, three words, a number */
.bca-journey{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:clamp(40px,6vw,72px) 0}
.bca-step{position:relative;padding:26px 22px 24px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.bca-step .n{position:absolute;top:14px;right:18px;font-family:var(--mono);font-size:2.6rem;font-weight:700;
  color:color-mix(in srgb,var(--fg) 8%,transparent);line-height:1}
.bca-step .ic{width:34px;height:34px;color:rgb(var(--rb-red-mark))}
.bca-step b{display:block;margin:14px 0 6px;font-size:1.06rem;font-family:var(--serif);font-weight:600}
.bca-step p{margin:0;font-size:.9rem;line-height:1.5;color:var(--muted)}

.bca-ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:8px 0}
.bca-ticker-track{display:flex;gap:38px;white-space:nowrap;animation:bcaTick 46s linear infinite;will-change:transform}
.bca-ticker-track span{font-size:.86rem;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.bca-ticker-track b{color:rgb(var(--rb-red-ink));font-family:var(--mono)}

/* ---- the landing page, redesigned --------------------------------------
   It used to be a headline, one button and a wall of numbers. The sections
   below give it the three things it was missing: something to look at, a
   picture of what the product actually produces, and a second way in.
   Every picture is a slot the owner fills; the markup for one that is empty
   is simply absent, so nothing here renders as a hole. */
.bca-sec{padding-top:clamp(40px,6vw,76px);padding-bottom:0}
.bca-sec:last-of-type{padding-bottom:clamp(20px,3vw,34px)}
/* Opaque, not a translucent white pane: over one of the owner's photos a
   see-through chip measured 4.39:1, and how readable a button is must not
   depend on which picture happens to be behind it. */
.bca-ghost{display:inline-flex;align-items:center;gap:10px;height:66px;padding:0 24px;
  border:1.5px solid rgba(255,255,255,.34);background:#1A1A1A;color:#fff;
  text-decoration:none;font-weight:700;font-size:1rem;border-radius:0;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .14s var(--ease)}
.bca-ghost:hover{background:#262626;border-color:rgba(255,255,255,.62);transform:translateY(-2px)}
.bca-ghost .ic{width:18px;height:18px;transform:rotate(90deg)}

/* The optional photo behind the headline. The owner can drop in anything,
   including something busy and bright, so the wash over it is built to carry
   white text on its own: two layers, one across and one up, and the slider
   moves the top one rather than deciding whether the words are readable. */
.bca-hero-pic{position:absolute;inset:0;z-index:0;overflow:hidden;display:block}
.bca-hero-pic img{width:100%;height:100%;object-fit:cover;display:block}
.bca-hero-pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,.35) 45%,rgba(11,11,11,.72) 100%)}
.bca-hero-pic i{position:absolute;inset:0;display:block;z-index:1;
  background:linear-gradient(100deg,#0B0B0B 0%,rgba(11,11,11,.93) 38%,rgba(11,11,11,.74) 72%,rgba(11,11,11,.62) 100%)}
/* the drawn rings step back when there is a real picture to look at */
.bca-hero.has-pic .bca-hero-art{opacity:.4}

/* what you end up holding */
.bcg-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(clamp(240px,30vw,320px),1fr))}
.bcg{display:flex;flex-direction:column;border:1.5px solid var(--line);background:var(--card);
  overflow:hidden;box-shadow:var(--raise)}
.bcg-vis{position:relative;aspect-ratio:16/10;background:
  linear-gradient(150deg,color-mix(in srgb,rgb(var(--rb-red-solid)) 9%,var(--bg)),var(--bg));
  border-bottom:1.5px solid var(--line);display:grid;place-items:center;overflow:hidden}
.bcg-pic{position:absolute;inset:0;display:block}
.bcg-pic img{width:100%;height:100%;object-fit:cover;display:block}
.bcg-pic i{display:none}
.bcg-txt{padding:18px 18px 20px}
.bcg-k{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgb(var(--rb-red-ink));margin-bottom:9px}
.bcg-txt h3{font-family:var(--serif);font-weight:600;font-size:1.16rem;line-height:1.25;margin:0 0 8px}
.bcg-txt p{margin:0;font-size:.92rem;line-height:1.6;color:var(--muted)}

/* a sheet of paper with a seal, drawn */
.bcg-doc{position:relative;display:block;width:54%;aspect-ratio:3/4;background:var(--card);
  border:1.5px solid var(--line);box-shadow:0 14px 30px rgb(0 0 0 / .1)}
.bcg-doc .bcg-l{position:absolute;left:12%;height:3px;border-radius:2px;
  background:color-mix(in srgb,var(--fg) 17%,transparent);
  transform-origin:left;transform:scaleX(0);animation:bcgLine .6s var(--ease) both}
.bcg-doc .w1{top:14%;width:52%;animation-delay:.10s;height:5px;
  background:color-mix(in srgb,var(--fg) 40%,transparent)}
.bcg-doc .w2{top:28%;width:76%;animation-delay:.18s}
.bcg-doc .w3{top:38%;width:68%;animation-delay:.26s}
.bcg-doc .w4{top:48%;width:74%;animation-delay:.34s}
.bcg-doc .w5{top:58%;width:44%;animation-delay:.42s}
.bcg-doc .w6{top:72%;width:34%;animation-delay:.50s}
.bcg-doc .bcg-seal{position:absolute;right:12%;bottom:11%;width:19%;aspect-ratio:1;border-radius:50%;
  border:2.5px solid rgb(var(--rb-red-solid));opacity:0;transform:scale(.4) rotate(-22deg);
  animation:bcgSeal .5s var(--ease) .64s both}
@keyframes bcgLine{to{transform:scaleX(1)}}
@keyframes bcgSeal{to{opacity:1;transform:scale(1) rotate(-10deg)}}

/* four rungs climbing */
.bcg-rungs{display:flex;flex-direction:column-reverse;gap:9px;width:58%}
.bcg-rungs i{display:block;height:13px;border-radius:2px;transform-origin:left;transform:scaleX(0);
  background:color-mix(in srgb,rgb(var(--rb-red-solid)) calc(26% + var(--i) * 20%),var(--card));
  animation:bcgLine .52s var(--ease) both;animation-delay:calc(var(--i) * 110ms + 140ms)}
.bcg-rungs i:nth-child(1){width:100%}
.bcg-rungs i:nth-child(2){width:82%}
.bcg-rungs i:nth-child(3){width:63%}
.bcg-rungs i:nth-child(4){width:44%}

/* three ticks landing */
.bcg-checks{display:grid;gap:12px;width:52%}
.bcg-checks i{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;
  border:1.5px solid var(--line);background:var(--card);opacity:0;transform:translateX(-10px);
  animation:bcgIn .46s var(--ease) both;animation-delay:calc(var(--i) * 150ms + 160ms)}
.bcg-checks i::after{content:"";flex:1;height:3px;border-radius:2px;
  background:color-mix(in srgb,var(--fg) 15%,transparent)}
.bcg-checks .ic{width:15px;height:15px;color:var(--emerald);flex:none}
@keyframes bcgIn{to{opacity:1;transform:none}}

/* the mid page banner and the closing one */
/* the failover chain, in Diagnostics */
.ops-provs{display:grid;gap:8px;margin-top:12px}
.ops-prov{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:4px;background:var(--card)}
.ops-prov.off{opacity:.6;border-style:dashed}
.ops-prov-n{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:999px;
  background:rgb(var(--rb-red-solid));color:#fff;font-family:var(--mono);font-size:.76rem;font-weight:700}
.ops-prov.off .ops-prov-n{background:color-mix(in srgb,var(--fg) 20%,transparent);color:var(--bg)}
.ops-prov-l{flex:1;min-width:0}
.ops-prov-l b{display:block;font-size:.94rem;font-weight:700}
.ops-prov-l span{display:block;font-size:.8rem;color:var(--muted);line-height:1.45}
.ops-prov-b{display:flex;gap:6px;flex-wrap:wrap;flex:none}
@media (max-width:560px){ .ops-prov{flex-wrap:wrap} .ops-prov-b{width:100%} }

.bca-band{position:relative;width:100vw;max-width:100%;margin:clamp(28px,4vw,56px) 0 0 calc(50% - 50vw);
  overflow:hidden;background:#111111;color:#fff;isolation:isolate}
.bca-band-bg{position:absolute;inset:0;z-index:-1;display:block}
.bca-band-bg img{width:100%;height:100%;object-fit:cover;display:block}
.bca-band-bg i{position:absolute;inset:0;display:block;
  z-index:1;background:linear-gradient(100deg,#111111 0%,rgba(17,17,17,.94) 40%,rgba(17,17,17,.76) 74%,rgba(17,17,17,.66) 100%)}
.bca-band-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,17,.5),rgba(17,17,17,.34) 50%,rgba(17,17,17,.66))}
.bca-band-in{max-width:var(--maxw);margin:0 auto;box-sizing:border-box;
  padding:clamp(40px,6vw,74px) max(16px,env(safe-area-inset-left),4vw)}
.bca-band-in h2{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.7rem,4.2vw,2.7rem);margin:0 0 12px;max-width:22ch}
.bca-band-in p{margin:0 0 24px;font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.78);max-width:52ch}
.bca-band-fine{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.84rem;color:rgba(255,255,255,.66)}
.bca-band-fine .ic{width:16px;height:16px;color:rgb(var(--rb-coral-ink))}
.bca-last{text-align:center;border-top:1px solid var(--line);margin-top:clamp(30px,5vw,56px)}
.bca-last h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3.6vw,2.2rem);
  letter-spacing:-.02em;margin:clamp(30px,5vw,54px) 0 22px;max-width:26ch;margin-left:auto;margin-right:auto}

/* the escalation timeline */
.bca-ladsec{display:grid;gap:clamp(20px,3vw,34px)}
.bca-lad-pic{display:block;overflow:hidden;border:1.5px solid var(--line);aspect-ratio:4/3}
.bca-lad-pic img{width:100%;height:100%;object-fit:cover;display:block}
.bca-lad-pic i{display:none}
@media (min-width:1080px){
  .bca-ladsec.has-pic{grid-template-columns:minmax(0,1fr) min(320px,27%);align-items:start}
  .bca-ladsec.has-pic .bcl-cap{grid-column:1}
  .bca-ladsec.has-pic .bca-lad-pic{margin-top:calc(clamp(40px,6vw,76px) + 10px)}
}
.bcl{margin:0;--bcl-series:214 16 30}
html[data-theme="dark"] .bcl{--bcl-series:245 66 79}
.bcl-cap{display:block;margin-bottom:6px}
.bcl-cap b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.75rem);
  letter-spacing:-.02em;line-height:1.24;margin-bottom:7px}
.bcl-cap span{display:block;font-size:.93rem;line-height:1.6;color:var(--muted);max-width:56ch}
/* Drawn in CSS so a mark always sits where its label says it does. */
.bcl-rail{position:relative;height:46px;margin:26px 0 4px}
.bcl-run{position:absolute;left:0;right:0;top:9px;height:2px;border-radius:2px;
  background:rgb(var(--bcl-series));transform-origin:left;transform:scaleX(0);
  animation:bclRun 1.3s var(--ease) .15s both}
.bcl-rail::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;border-radius:2px;
  background:var(--line)}
@keyframes bclRun{to{transform:scaleX(1)}}
.bcl-tick{position:absolute;left:var(--x);top:0;width:0;height:100%;opacity:0;
  animation:bcgIn .42s var(--ease) both;animation-delay:calc(var(--i) * 170ms + 420ms)}
.bcl-tick i{position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:rgb(var(--bcl-series));
  box-shadow:0 0 0 3px var(--bg)}
/* The first and last labels align to the ends of the rail instead of centring
   on their mark, which is the only way a label at 1% or 99% stays on the page. */
.bcl-tick em{position:absolute;top:25px;left:50%;transform:translateX(-50%);font-style:normal;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.bcl-tick.bcl-a em{left:0;transform:none}
.bcl-tick.bcl-z em{left:auto;right:0;transform:none}
@media (max-width:820px){ .bcl-tick em{display:none} .bcl-rail{height:24px} }
.bcl-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px 13px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,136px),1fr))}
.bcl-li{padding:14px 0 16px;border-top:2px solid rgb(var(--bcl-series));opacity:0;
  animation:bcgIn .5s var(--ease) both;animation-delay:calc(var(--i) * 110ms + 520ms)}
.bcl-li b{display:block;font-weight:700;font-size:.97rem;line-height:1.3;margin-bottom:4px}
.bcl-d{display:block;font-family:var(--mono);font-size:.76rem;color:rgb(var(--rb-red-ink));margin-bottom:6px}
.bcl-n{display:block;font-size:.84rem;line-height:1.55;color:var(--muted)}
.bcl-note{margin:14px 0 0;font-size:.79rem;color:var(--muted)}

/* what it will never do */
.bcn-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(clamp(240px,28vw,300px),1fr))}
.bcn{padding:20px 18px;border:1.5px solid var(--line);background:var(--card);box-shadow:var(--raise)}
.bcn > .ic{width:26px;height:26px;color:rgb(var(--rb-red-mark));margin-bottom:12px}
.bcn b{display:block;font-family:var(--serif);font-weight:600;font-size:1.06rem;line-height:1.3;margin-bottom:8px}
.bcn p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}

@media (max-width:640px){
  .bca-ghost{height:58px;width:100%;justify-content:center}
  .bca-band-in h2{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .bcg-doc .bcg-l,.bcg-doc .bcg-seal,.bcg-rungs i,.bcg-checks i,.bcl-run,.bcl-tick,.bcl-li{animation:none}
  .bcg-doc .bcg-l,.bcg-rungs i,.bcl-run{transform:scaleX(1)}
  .bcg-doc .bcg-seal,.bcg-checks i,.bcl-li{opacity:1;transform:none}
  .bcl-tick{opacity:1;transform:translateX(-50%)}
}
@keyframes bcaTick{to{transform:translateX(-50%)}}

/* ---- the wizard --------------------------------------------------------- */
.bca-wrap{max-width:640px;margin:0 auto;padding:0 20px 40px}
.bca-dots{display:flex;gap:6px;margin:22px 0 6px}
.bca-dots i{height:4px;flex:1;border-radius:999px;background:var(--line);transition:background .3s var(--ease)}
.bca-dots i.on{background:rgb(var(--rb-red-solid))}
.bca-screen{display:none}
.bca-screen.on{display:block;animation:bcaIn .32s var(--ease) both}
@keyframes bcaIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.bca-q{font-family:var(--serif);font-size:clamp(1.7rem,5vw,2.3rem);font-weight:600;letter-spacing:-.02em;margin:16px 0 6px;line-height:1.1}
.bca-qs{color:var(--muted);font-size:1rem;margin:0 0 22px}
.bca-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.bca-opt{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;padding:16px 15px;
  border:1.5px solid var(--line);border-radius:4px;background:var(--card);color:var(--fg);cursor:pointer;
  font-family:inherit;transition:transform .14s var(--ease),border-color .16s,box-shadow .18s}
.bca-opt:hover{transform:translateY(-2px);box-shadow:var(--raise)}
.bca-opt.on{border-color:rgb(var(--rb-red-solid));box-shadow:0 0 0 3px rgb(var(--rb-red) / .14)}
.bca-opt .ic{width:26px;height:26px;color:rgb(var(--rb-red-mark))}
.bca-opt b{font-size:.98rem;line-height:1.25}
.bca-opt span{font-size:.82rem;color:var(--muted);line-height:1.4}
.bca-field{margin:0 0 16px}
.bca-field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:7px}
.bca-field .inp,.bca-field input,.bca-field textarea,.bca-field select{width:100%;min-height:54px;padding:14px 15px;
  border:1.5px solid var(--line);border-radius:4px;background:var(--card);color:var(--fg);font:inherit;font-size:1.02rem}
.bca-field textarea{min-height:170px;line-height:1.6;resize:vertical}
.bca-mic{display:inline-flex;align-items:center;gap:9px;margin-top:10px;height:48px;padding:0 18px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.bca-mic.rec{border-color:rgb(var(--rb-red-solid));color:rgb(var(--rb-red-ink))}
.bca-mic.rec .ic{animation:bcaPulse 1.1s ease-in-out infinite}
.bca-nav{display:flex;gap:10px;margin-top:26px;align-items:center}
.bca-next{flex:1;height:60px;border:0;border-radius:4px;background:rgb(var(--rb-red-solid));color:#fff;
  font:inherit;font-weight:700;font-size:1.06rem;cursor:pointer;transition:transform .12s var(--ease),filter .18s}
.bca-next:disabled{opacity:.45;cursor:not-allowed}
.bca-next[aria-disabled="true"]{filter:saturate(.45);opacity:.72}
.bca-next:not(:disabled):active{transform:scale(.99)}
.bca-back{height:60px;padding:0 20px;border:1.5px solid var(--line);border-radius:4px;background:none;color:var(--fg);font:inherit;cursor:pointer}
.bca-drop{border:2px dashed color-mix(in srgb,var(--fg) 22%,var(--line));border-radius:4px;padding:30px 18px;
  text-align:center;cursor:pointer;transition:border-color .18s,background .18s}
.bca-drop.on,.bca-drop:hover{border-color:rgb(var(--rb-red-solid));background:color-mix(in srgb,var(--fg) 3%,transparent)}
.bca-files{display:grid;gap:8px;margin-top:14px}
.bca-file{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:4px}
.bca-file .ic{width:19px;height:19px;color:rgb(var(--rb-red-mark));flex:none}
.bca-file b{font-size:.9rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bca-file span{margin-left:auto;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.bca-save{font-size:.8rem;color:var(--muted);margin-left:auto;display:inline-flex;align-items:center;gap:6px}
/* ---- asking before assuming -------------------------------------------
   A date picker with no way to say "that did not happen" forces a person to
   invent a date. Every date on this form now sits behind a plain yes or no,
   and appears only once the answer makes it real. */
.bca-ask{margin:0 0 18px;padding:16px 16px 14px;border:1.5px solid var(--line);border-radius:4px;background:var(--card)}
/* Not a <legend>: the browser lays a legend out inside the fieldset's own
   border, so a question long enough to wrap sits across the line. */
.bca-ask > .q{display:block;font-size:.95rem;font-weight:600;line-height:1.4;margin:0 0 12px;padding:0}
.bca-yn{display:flex;gap:9px;flex-wrap:wrap}
.bca-yn label{position:relative;flex:1 1 140px;margin:0}
.bca-yn input{position:absolute;opacity:0;width:1px;height:1px}
.bca-yn span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 14px;
  border:1.5px solid var(--line);border-radius:4px;background:var(--bg);font-size:.97rem;font-weight:600;
  cursor:pointer;text-align:center;transition:border-color .16s var(--ease),background .16s var(--ease)}
.bca-yn input:hover + span{border-color:color-mix(in srgb,var(--fg) 30%,var(--line))}
.bca-yn input:focus-visible + span{outline:2px solid rgb(var(--rb-red-solid));outline-offset:2px}
.bca-yn input:checked + span{border-color:rgb(var(--rb-red-solid));border-width:2px;
  background:color-mix(in srgb,rgb(var(--rb-red-solid)) 9%,var(--card))}
.bca-then{margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.bca-then[hidden]{display:none}
.bca-then .bca-field:last-child{margin-bottom:0}
.bca-why-date{font-size:.82rem;color:var(--muted);margin:-3px 0 9px;line-height:1.45}

/* the requirement, said out loud instead of hidden in a disabled button */
.bca-need{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:.84rem;color:var(--muted)}
.bca-need .t{min-width:0}
.bca-meter{flex:0 0 76px;height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.bca-meter i{display:block;height:100%;width:0;border-radius:999px;background:rgb(var(--rb-red-solid));
  transition:width .25s var(--ease)}
.bca-need.met{color:var(--emerald-ink)}
.bca-need.met .bca-meter i{background:var(--emerald)}
.bca-req{color:rgb(var(--rb-red-ink));font-weight:700;margin-left:3px}
.bca-opt-lbl{font-weight:400;color:var(--muted);font-size:.84rem;margin-left:5px}
.bca-field.bad input,.bca-field.bad textarea,.bca-field.bad select{border-color:rgb(var(--rb-red-solid))}
.bca-field .err{display:block;font-size:.82rem;color:rgb(var(--rb-red-ink));margin-top:6px}
.bca-field .err[hidden]{display:none}
.bca-sure{display:flex;align-items:flex-start;gap:10px;margin:-6px 0 16px;font-size:.88rem;color:var(--muted);cursor:pointer}
.bca-sure input{width:20px;height:20px;min-height:0;flex:none;margin-top:1px;accent-color:rgb(var(--rb-red-solid))}
.bca-why{flex:1 1 100%;order:3;margin:11px 0 0;font-size:.86rem;color:var(--muted);line-height:1.5}
.bca-why[hidden]{display:none}
.bca-nav{flex-wrap:wrap}

/* ---- keeping the private link ------------------------------------------
   The one thing on the result page a person must not lose. */
.bca-keep{margin-top:26px;border:1.5px solid var(--line);border-radius:4px;background:var(--card);
  padding:20px 18px;box-shadow:var(--raise)}
.bca-keep-h{display:flex;gap:12px;align-items:flex-start}
.bca-keep-h > .ic{width:22px;height:22px;flex:none;color:rgb(var(--rb-red-mark));margin-top:2px}
.bca-keep-h b{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:600;margin-bottom:3px}
.bca-keep-h span{display:block;font-size:.88rem;color:var(--muted);line-height:1.5}
.bca-keep-url{display:flex;gap:8px;margin-top:15px}
.bca-keep-url input{flex:1;min-width:0;height:52px;padding:0 14px;border:1.5px solid var(--line);border-radius:4px;
  background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:.82rem;text-overflow:ellipsis}
.bca-keep-copy{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px;border:0;border-radius:4px;
  background:rgb(var(--rb-red-solid));color:#fff;font:inherit;font-weight:700;cursor:pointer;flex:none;
  transition:transform .12s var(--ease),filter .18s}
.bca-keep-copy .ic{width:17px;height:17px}
.bca-keep-copy:hover{filter:brightness(1.07)}
.bca-keep-copy:active{transform:scale(.97)}
.bca-keep-copy.done{background:var(--emerald)}
.bca-keep-row{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
/* The brand colour rides on the icon, not behind the words. White on WhatsApp
   green is 1.98:1, which is unreadable however familiar it looks; the mark
   still says WhatsApp and the label stays legible. */
.bca-keep-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:1 1 120px;min-height:48px;
  padding:0 15px;border:1.5px solid var(--line);border-radius:4px;background:var(--bg);color:var(--fg);
  font:inherit;font-weight:600;font-size:.94rem;text-decoration:none;cursor:pointer;
  transition:transform .12s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.bca-keep-btn:hover{transform:translateY(-1px);border-color:var(--brand,currentColor);
  background:color-mix(in srgb,var(--brand,var(--fg)) 8%,var(--bg))}
.bca-keep-btn:active{transform:scale(.98)}
.bca-keep-btn .ic{width:20px;height:20px;flex:none;color:var(--brand,currentColor)}
.bca-keep-btn.k-whatsapp{--brand:#128C7E}
.bca-keep-btn.k-telegram{--brand:#1C7FB0}
.bca-keep-btn.k-mail{--brand:#636363}
.bca-keep-btn.k-more{--brand:rgb(var(--rb-red-solid))}
html[data-theme="dark"] .bca-keep-btn.k-whatsapp{--brand:#3DDC97}
html[data-theme="dark"] .bca-keep-btn.k-telegram{--brand:#4FB6E8}
html[data-theme="dark"] .bca-keep-btn.k-mail{--brand:#A3A3A3}
.bca-keep-fine{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;font-size:.82rem;color:var(--muted);line-height:1.5}
.bca-keep-fine .ic{width:15px;height:15px;flex:none;margin-top:2px}
@media (max-width:520px){
  .bca-keep-url{flex-wrap:wrap}
  .bca-keep-url input{flex:1 1 100%}
  .bca-keep-copy{flex:1 1 100%;justify-content:center}
}
.bca-save i{width:6px;height:6px;border-radius:50%;background:rgb(var(--rb-ok));display:inline-block}

/* ---- the working screen ------------------------------------------------- */
.bca-work{max-width:560px;margin:0 auto;padding:clamp(30px,7vw,64px) 20px 60px}
.bca-stage{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;padding:15px 0;opacity:.34;
  transition:opacity .45s var(--ease)}
.bca-stage.on,.bca-stage.done{opacity:1}
.bca-stage .dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;
  font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--muted);transition:all .35s var(--ease)}
.bca-stage.on .dot{border-color:rgb(var(--rb-red-solid));color:rgb(var(--rb-red-ink));animation:bcaBeat 1.6s ease-in-out infinite}
.bca-stage.done .dot{border-color:rgb(var(--rb-ok));background:rgb(var(--rb-ok));color:#fff}
@keyframes bcaBeat{0%,100%{box-shadow:0 0 0 0 rgb(var(--rb-red) / .35)}70%{box-shadow:0 0 0 12px rgb(var(--rb-red) / 0)}}
.bca-stage b{display:block;font-size:1.02rem;font-weight:600}
.bca-stage p{margin:3px 0 0;font-size:.88rem;color:var(--muted);line-height:1.5}
.bca-seal{width:120px;height:120px;margin:26px auto 0;display:grid;place-items:center;border-radius:50%;
  border:3px solid rgb(var(--rb-ok));color:rgb(var(--rb-ok));opacity:0;transform:scale(.4) rotate(-12deg)}
.bca-seal.on{animation:bcaSeal .7s cubic-bezier(.2,1.4,.4,1) forwards}
.bca-seal .ic{width:54px;height:54px}
@keyframes bcaSeal{60%{opacity:1;transform:scale(1.12) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* ---- the result --------------------------------------------------------- */
.bca-letter{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:clamp(22px,4vw,38px);
  box-shadow:var(--raise);font-size:.97rem;line-height:1.72}
.bca-letter h1,.bca-letter h2,.bca-letter h3{font-family:var(--sans);font-weight:700;font-size:1.02rem;margin:22px 0 8px}
.bca-letter p{margin:0 0 13px}
.bca-letter ol,.bca-letter ul{margin:0 0 13px;padding-left:22px}
.bca-letter li{margin-bottom:7px}
.bca-check{display:grid;gap:10px;margin-top:14px}
.bca-check-item{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:14px 15px;border-radius:4px;
  border:1px solid color-mix(in srgb,rgb(var(--rb-warn)) 34%,var(--line));
  background:color-mix(in srgb,rgb(var(--rb-warn)) 9%,var(--card))}
.bca-check-item .ic{width:20px;height:20px;color:rgb(var(--rb-warn));margin-top:2px}
.bca-check-item b{display:block;font-size:.95rem}
.bca-check-item span{font-size:.86rem;color:var(--muted);line-height:1.5}
.bca-rung{display:grid;grid-template-columns:38px 1fr auto;gap:14px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.bca-rung:first-child{border-top:0}
.bca-rung .rd{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);
  font-size:.8rem;font-weight:700;border:2px solid var(--line);color:var(--muted)}
.bca-rung.ready .rd{border-color:rgb(var(--rb-ok));color:rgb(var(--rb-ok))}
.bca-rung.done .rd{background:rgb(var(--rb-ok));border-color:rgb(var(--rb-ok));color:#fff}
.bca-rung.expired .rd{border-color:rgb(var(--rb-red-solid));color:rgb(var(--rb-red-ink))}
.bca-rung b{display:block;font-size:1rem}
.bca-rung p{margin:3px 0 0;font-size:.86rem;color:var(--muted);line-height:1.5}
.bca-chip{font-family:var(--mono);font-size:.7rem;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);color:var(--muted)}
.bca-chip.ready{color:rgb(var(--rb-ok));border-color:color-mix(in srgb,rgb(var(--rb-ok)) 40%,var(--line))}
.bca-chip.soon{color:rgb(var(--rb-warn));border-color:color-mix(in srgb,rgb(var(--rb-warn)) 40%,var(--line))}
.bca-chip.expired{color:rgb(var(--rb-red-ink));border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 40%,var(--line))}

/* ---- the review screen -------------------------------------------------- */
.bca-rev{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--line)}
.bca-rev:first-child{border-top:0}
.bca-rev .k{font-size:.82rem;color:var(--muted)}
.bca-rev b{font-size:.95rem;font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.bca-rev .lnk{background:none;border:0;padding:0 0 0 6px;font:inherit;font-size:.8rem;cursor:pointer;
  color:rgb(var(--rb-red-nav));text-decoration:underline;text-underline-offset:2px}
.bca-rev .lnk:hover{color:rgb(var(--rb-red-ink))}

@media (prefers-reduced-motion:reduce){
  .bca-ring,.bca-ticker-track,.bca-kick i,.bca-stage.on .dot{animation:none}
  .bca-h1 span,.bca-sub,.bca-cta,.bca-counts,.bca-trust,.bca-ledger i{animation:none;opacity:1;transform:none}
  .bca-screen.on{animation:none}
  .bca-seal.on{animation:none;opacity:1;transform:none}
}
.bca-rung-do{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}

/* The desktop header now carries ten items. It has always been a horizontal
   scroller, but an item that can only be reached by scrolling is an item
   nobody finds, so the two tightest breakpoints get a little more room. */
@media (min-width:1480px) and (max-width:1559px){.hdr-nav a{padding:8px 6px;font-size:.83rem}}
@media (min-width:1360px) and (max-width:1479px){.hdr-nav a{padding:8px 3px;font-size:.78rem;letter-spacing:-.015em}.hdr-nav{gap:0}}
@media (min-width:1024px) and (max-width:1359px){.hdr-nav a{padding:7px 3px;font-size:.72rem;letter-spacing:-.02em}.hdr-nav{gap:0}}

/* The last FAQ used to sit flush against the mobile bottom bar. */
.bca-faq-end{height:clamp(28px,7vw,56px)}
.bca-proof{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:6px}


/* ======================= DEVICE TRUST + PROFILE PROGRESS ==================
 * Built from the same aurora tokens as the rest of the site, so the unlock
 * screen reads as Bankerpedia rather than as a generic lock page.
 * ===================================================================== */

/* ---- the unlock screen ---------------------------------------------------
 * Deliberately dark in both themes. This is the app's front door and it is a
 * brand moment, the way a bank app splash is, so it does not follow the
 * reading theme. */
.bp-lock{position:fixed;inset:0;z-index:9000;display:none;flex-direction:column;
  align-items:center;justify-content:center;padding:32px 22px calc(32px + env(safe-area-inset-bottom));
  color:#fff;text-align:center;overscroll-behavior:contain;
  background-image:
    radial-gradient(58% 62% at 14% 10%,rgb(var(--rb-t-indigo) / .46) 0%,rgb(var(--rb-t-indigo) / 0) 66%),
    radial-gradient(52% 58% at 86% 6%,rgb(var(--rb-t-red) / .34) 0%,rgb(var(--rb-t-red) / 0) 62%),
    radial-gradient(66% 66% at 70% 96%,rgb(var(--rb-t-violet) / .36) 0%,rgb(var(--rb-t-violet) / 0) 70%),
    radial-gradient(48% 52% at 34% 74%,rgb(var(--rb-t-sky) / .22) 0%,rgb(var(--rb-t-sky) / 0) 68%),
    linear-gradient(160deg,#151515 0%,#0C0C0C 52%,#121212 100%);
  background-color:#0C0C0C}
.bp-lock.on{display:flex;animation:bpLockIn .34s var(--ease) both}
@keyframes bpLockIn{from{opacity:0}to{opacity:1}}
html.bp-locked,html.bp-locked body{overflow:hidden}

/* The lockup renders exactly the way the header renders it: a fixed height, a
   natural width, object-fit contain. An earlier version cropped to the ink box
   using numbers measured from the logo file, which cut the wordmark in half the
   moment the logo was replaced at the same URL. Measurements of an asset the
   owner can change do not belong in the stylesheet. */
.bp-lock-logo{display:inline-flex;align-items:center;justify-content:center;
  height:clamp(38px,9vw,50px);max-width:min(320px,76vw);margin:0 auto 26px;
  animation:bpRise .5s var(--ease) both}
.bp-lock-logo img{height:100%;width:auto;max-width:100%;display:block;object-fit:contain}
@keyframes bpRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

.bp-lock-hi{font-family:var(--serif);font-size:clamp(1.5rem,4.6vw,2rem);font-weight:600;
  letter-spacing:-.02em;margin:0 0 6px;animation:bpRise .5s .06s var(--ease) both}
.bp-lock-sub{color:rgba(255,255,255,.82);font-size:1rem;margin:0 0 34px;max-width:22rem;
  line-height:1.55;animation:bpRise .5s .12s var(--ease) both}
.bp-lock-msg{min-height:1.3em;font-size:.92rem;color:rgba(255,255,255,.86);margin:20px 0 0;max-width:23rem;line-height:1.5}
.bp-lock-msg.bad{color:rgb(var(--rb-coral-ink))}

/* The target. Big enough to hit with a thumb without looking. */
.bp-touch{width:126px;height:126px;border-radius:50%;border:0;cursor:pointer;padding:0;
  display:grid;place-items:center;position:relative;color:#fff;
  background:radial-gradient(circle at 50% 42%,rgb(var(--rb-t-red) / .95) 0%,rgb(var(--rb-red-solid)) 62%,rgb(var(--rb-red-ink)) 100%);
  box-shadow:0 14px 40px rgb(var(--rb-t-red) / .40);
  animation:bpRise .5s .18s var(--ease) both}
/* Above the glow: an absolutely positioned sibling paints over static content,
   which washed the glyph out. */
.bp-touch .ic{width:60px;height:60px;stroke-width:1.6;position:relative;z-index:1}
.bp-touch:active{transform:scale(.96)}
/* The fingerprint never moves. It is a sensor, not a spinner, and a rotating
   one reads as a loading throbber rather than something to touch. The life in
   the button comes from colour: a slow breath while it waits, a faster one
   while it is checking. Both are opacity on a layer above, so the work happens
   on the compositor and the glyph itself is never repainted. */
.bp-touch-glow{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgb(var(--rb-t-rose)) 0%,rgb(var(--rb-t-red)) 70%);
  opacity:0;animation:bpBreathe 3.2s ease-in-out infinite}
@keyframes bpBreathe{0%,100%{opacity:0}50%{opacity:.5}}
.bp-touch.busy{pointer-events:none}
.bp-touch.busy .bp-touch-glow{animation-duration:1s}
.bp-touch.busy .ic{animation:none}

.bp-lock-alts{display:flex;flex-direction:column;gap:4px;margin-top:30px;
  animation:bpRise .5s .24s var(--ease) both}
.bp-lock-alts button,.bp-lock-alts a{background:none;border:0;color:#fff;font:inherit;font-size:.92rem;
  font-weight:600;padding:11px 16px;border-radius:4px;cursor:pointer;text-decoration:none;
  transition:background .16s var(--ease)}
.bp-lock-alts button:hover,.bp-lock-alts a:hover{background:rgba(255,255,255,.12)}
.bp-lock-alts .quiet{color:rgba(255,255,255,.66);font-weight:500;font-size:.86rem}

/* ---- the PIN pad --------------------------------------------------------- */
.bp-pin{display:none;width:100%;max-width:300px;margin:0 auto}
/* The UA rule for [hidden] is display:none at the lowest possible specificity,
   so any class that sets display (.btn is inline-flex) silently defeats it.
   Inside these components, hidden means hidden. */
.bp-lock [hidden],.bp-offer [hidden],#bpAddDevice[hidden],#bpPinForm[hidden]{display:none!important}
.bp-lock.pin .bp-pin{display:block;animation:bpRise .3s var(--ease) both}
.bp-lock.pin .bp-touch{display:none}
.bp-pin-dots{display:flex;gap:14px;justify-content:center;margin:8px 0 26px}
.bp-pin-dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  transition:background .14s var(--ease),transform .14s var(--ease),border-color .14s}
.bp-pin-dots i.on{background:#fff;border-color:#fff;transform:scale(1.16)}
.bp-pin-dots.err{animation:bpShake .4s}
@keyframes bpShake{0%,100%{transform:none}20%{transform:translate3d(-8px,0,0)}40%{transform:translate3d(8px,0,0)}60%{transform:translate3d(-5px,0,0)}80%{transform:translate3d(5px,0,0)}}
.bp-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;justify-items:center}
/* A fixed square, not a stretched grid cell: border-radius 50% on a cell wider
   than it is tall gives ellipses, which is what a keypad must never look like. */
.bp-keys button{width:66px;height:66px;border-radius:50%;border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);color:#fff;font-size:1.5rem;font-weight:500;cursor:pointer;
  font-family:var(--mono);display:grid;place-items:center;padding:0;
  transition:background .14s var(--ease),transform .1s var(--ease)}
.bp-keys button:hover{background:rgba(255,255,255,.16)}
.bp-keys button:active{transform:scale(.93)}
.bp-keys button.fn{background:none;border-color:transparent;font-size:.86rem;font-family:inherit;font-weight:600}
.bp-keys button.fn:hover{background:rgba(255,255,255,.12)}
.bp-keys button .ic{width:24px;height:24px}

/* ---- the enrolment offer ------------------------------------------------- */
.bp-offer{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate3d(-50%,140%,0);
  z-index:8000;width:min(430px,calc(100vw - 28px));background:var(--card);border:1.5px solid var(--line);
  border-radius:6px;box-shadow:0 18px 50px rgba(12,12,12,.30);padding:18px;
  transition:transform .42s var(--ease)}
.bp-offer.on{transform:translate3d(-50%,0,0)}
@media (max-width:820px){.bp-offer{bottom:calc(78px + env(safe-area-inset-bottom))}}
.bp-offer-top{display:flex;gap:13px;align-items:flex-start}
.bp-offer-ic{width:42px;height:42px;border-radius:5px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,rgb(var(--rb-red)),rgb(var(--rb-red-solid)))}
.bp-offer-ic .ic{width:23px;height:23px}
.bp-offer b{display:block;font-size:1rem;margin-bottom:3px}
.bp-offer p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.5}
.bp-offer-row{display:flex;gap:9px;margin-top:15px}
.bp-offer-row .btn{flex:1;justify-content:center}

/* ---- security settings --------------------------------------------------- */
.bp-devs{display:flex;flex-direction:column;gap:0;margin-top:6px}
.bp-dev{display:grid;grid-template-columns:40px 1fr auto;gap:13px;align-items:center;
  padding:15px 0;border-top:1px solid var(--line)}
.bp-dev:first-child{border-top:0}
.bp-dev-ic{width:40px;height:40px;border-radius:5px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--fg) 8%,var(--card));color:rgb(var(--rb-blue-ink))}
.bp-dev-ic .ic{width:21px;height:21px}
.bp-dev b{display:block;font-size:.96rem}
.bp-dev span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.bp-dev .tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.bp-dev .tags i{font-style:normal;font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted)}
.bp-dev .tags i.this{color:rgb(var(--rb-ok));border-color:color-mix(in srgb,rgb(var(--rb-ok)) 40%,var(--line))}
.bp-dev-x{background:none;border:1px solid var(--line);border-radius:4px;padding:7px 12px;
  font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;color:rgb(var(--rb-red-ink));
  transition:background .15s var(--ease),border-color .15s}
.bp-dev-x:hover{background:color-mix(in srgb,rgb(var(--rb-red-solid)) 8%,transparent);
  border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 40%,var(--line))}
.bp-dev-x:disabled{opacity:.5;cursor:default}
.bp-sec-empty{color:var(--muted);font-size:.9rem;margin:2px 0 14px;line-height:1.6}

/* ---- profile completion -------------------------------------------------- */
.bp-prog{border:1.5px solid var(--line);border-radius:6px;padding:clamp(17px,3.4vw,24px);
  background:var(--card);position:relative;overflow:hidden}
.bp-prog::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 150% at 100% 0%,rgb(var(--rb-sky) / .10) 0%,transparent 60%)}
.bp-prog > *{position:relative}
.bp-prog-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.bp-prog-head h3{font-family:var(--serif);font-size:clamp(1.14rem,2.6vw,1.4rem);font-weight:600;
  letter-spacing:-.015em;margin:0}
.bp-prog-head p{margin:5px 0 0;color:var(--muted);font-size:.92rem;line-height:1.55;max-width:44ch}
.bp-prog-pct{margin-left:auto;font-family:var(--mono);font-size:1.7rem;font-weight:700;
  line-height:1;color:rgb(var(--rb-red-nav));font-variant-numeric:tabular-nums}
.bp-prog-pct small{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-top:5px;text-align:right}

.bp-bar{height:9px;border-radius:999px;background:color-mix(in srgb,var(--fg) 8%,transparent);
  margin:17px 0 4px;overflow:hidden}
.bp-bar i{display:block;height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,rgb(var(--rb-red)),rgb(var(--rb-coral)) 55%,rgb(var(--rb-gold)));
  transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.bp-bar.done i{background:linear-gradient(90deg,rgb(var(--rb-ok) / .72),rgb(var(--rb-ok)))}
.bp-prog-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);
  font-family:var(--mono);letter-spacing:.03em}

.bp-steps{margin-top:19px;display:flex;flex-direction:column;gap:0}
.bp-step{display:grid;grid-template-columns:28px 1fr auto;gap:13px;align-items:start;
  padding:14px 0;border-top:1px solid var(--line);text-align:left;background:none;border-left:0;
  border-right:0;border-bottom:0;width:100%;font:inherit;color:inherit;cursor:pointer;
  transition:background .16s var(--ease)}
.bp-step:hover{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.bp-step.done{cursor:default}
.bp-step.done:hover{background:none}
.bp-tick{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:grid;
  place-items:center;color:transparent;transition:border-color .3s var(--ease),background .3s var(--ease),color .3s}
.bp-tick .ic{width:15px;height:15px;stroke-width:3}
.bp-step.done .bp-tick{background:rgb(var(--rb-ok));border-color:rgb(var(--rb-ok));color:#fff}
.bp-step b{display:block;font-size:.97rem;font-weight:600}
.bp-step.done b{color:var(--muted);font-weight:500}
.bp-step p{margin:4px 0 0;font-size:.86rem;color:var(--muted);line-height:1.55}
.bp-step-pts{font-family:var(--mono);font-size:.78rem;font-weight:700;white-space:nowrap;
  color:rgb(var(--rb-red-nav));padding-top:4px}
.bp-step.done .bp-step-pts{color:rgb(var(--rb-ok))}
.bp-step-go{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:.85rem;
  font-weight:600;color:rgb(var(--rb-red-nav))}
.bp-step-go .ic{width:14px;height:14px}
.bp-step:hover .bp-step-go{text-decoration:underline;text-underline-offset:3px}

/* The finish line. Shown only when the milestone is genuinely earned. */
.bp-done{margin-top:18px;border-radius:6px;padding:16px 18px;display:flex;gap:13px;align-items:center;
  border:1px solid color-mix(in srgb,rgb(var(--rb-ok)) 34%,var(--line));
  background:color-mix(in srgb,rgb(var(--rb-ok)) 8%,var(--card))}
.bp-done .ic{width:24px;height:24px;color:rgb(var(--rb-ok));flex:none}
.bp-done b{display:block;font-size:.96rem}
.bp-done span{font-size:.86rem;color:var(--muted);line-height:1.5}

/* The Full Profile mark. Named so it cannot be read as identity verification,
   which is what the existing tick beside a name already means. */
.bp-mark{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:.62rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;
  vertical-align:middle;color:rgb(var(--rb-ok));
  border:1px solid color-mix(in srgb,rgb(var(--rb-ok)) 42%,var(--line));
  background:color-mix(in srgb,rgb(var(--rb-ok)) 8%,transparent)}
.bp-mark .ic{width:11px;height:11px;stroke-width:3}

/* A compact strip for the home page and the profile header. */
.bp-mini{display:flex;align-items:center;gap:13px;border:1.5px solid var(--line);border-radius:6px;
  padding:13px 15px;background:var(--card);text-decoration:none;color:inherit;
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
.bp-mini:hover{border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 40%,var(--line));transform:translate3d(0,-1px,0)}
.bp-mini-ring{width:46px;height:46px;flex:none;position:relative;display:grid;place-items:center}
.bp-mini-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.bp-mini-ring circle{fill:none;stroke-width:4}
.bp-mini-ring .t{stroke:color-mix(in srgb,var(--fg) 10%,transparent)}
.bp-mini-ring .v{stroke:rgb(var(--rb-red-solid));stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
.bp-mini-ring b{font-family:var(--mono);font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.bp-mini-txt b{display:block;font-size:.93rem}
.bp-mini-txt span{font-size:.83rem;color:var(--muted)}
.bp-mini .go{margin-left:auto;color:var(--muted)}
.bp-mini .go .ic{width:17px;height:17px}

/* A points bump, shown once when a step is actually paid for. */
.bp-pop{position:fixed;left:50%;top:22%;transform:translate3d(-50%,0,0);z-index:9500;pointer-events:none;
  font-family:var(--mono);font-size:2.2rem;font-weight:700;color:rgb(var(--rb-ok));
  text-shadow:0 4px 18px rgba(12,12,12,.28);opacity:0}
.bp-pop.go{animation:bpPop 1.5s var(--ease) forwards}
@keyframes bpPop{0%{opacity:0;transform:translate3d(-50%,14px,0) scale(.8)}
  22%{opacity:1;transform:translate3d(-50%,0,0) scale(1)}
  70%{opacity:1;transform:translate3d(-50%,0,0) scale(1)}
  100%{opacity:0;transform:translate3d(-50%,-26px,0) scale(1)}}

@media (prefers-reduced-motion:reduce){
  .bp-lock.on,.bp-lock-logo,.bp-lock-hi,.bp-lock-sub,.bp-touch,.bp-lock-alts,.bp-pin{animation:none;opacity:1;transform:none}
  .bp-touch-glow{animation:none;opacity:.32}
  .bp-touch.busy .ic{animation:none}
  .bp-bar i,.bp-mini-ring .v{transition:none}
  .bp-offer{transition:none}
  .bp-pin-dots.err{animation:none}
  .bp-pop.go{animation:none;opacity:1}
}

/* ---- securing a new device ------------------------------------------------ */
.bp-secure{max-width:520px;margin:0 auto;padding:clamp(26px,6vh,54px) 20px 60px;text-align:center}
.bp-secure-logo{display:inline-flex;align-items:center;height:38px;max-width:220px;margin-bottom:26px}
.bp-secure-logo img{height:100%;width:auto;max-width:100%;display:block;object-fit:contain}
.bp-secure-h{font-family:var(--serif);font-size:clamp(1.6rem,5vw,2.2rem);font-weight:600;
  letter-spacing:-.02em;margin:0 0 8px;line-height:1.15}
.bp-secure-sub{color:var(--muted);font-size:1rem;margin:0 auto 26px;max-width:26rem;line-height:1.6}
.bp-secure-card{border:1.5px solid var(--line);border-radius:6px;background:var(--card);
  padding:clamp(18px,4vw,26px);text-align:left;position:relative;overflow:hidden}
.bp-secure-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(130% 150% at 100% 0%,rgb(var(--rb-red) / .10) 0%,transparent 62%)}
.bp-secure-card > *{position:relative}
.bp-secure-why{display:flex;flex-direction:column;gap:15px;margin-bottom:22px}
.bp-secure-row{display:flex;gap:13px;align-items:flex-start}
.bp-secure-row .ic{width:21px;height:21px;flex:none;color:rgb(var(--rb-red-nav));margin-top:2px}
.bp-secure-row b{display:block;font-size:.96rem}
.bp-secure-row span{font-size:.86rem;color:var(--muted);line-height:1.5}
.bp-secure-go{width:100%;height:56px;border:0;border-radius:5px;cursor:pointer;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;
  font-size:1rem;font-weight:700;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgb(var(--rb-red)),rgb(var(--rb-red-solid)));
  box-shadow:0 10px 26px rgb(var(--rb-red-solid) / .32)}
.bp-secure-go .ic{width:24px;height:24px}
.bp-secure-go:disabled{cursor:default}
.bp-secure-go::after{content:"";position:absolute;inset:0;background:rgb(var(--rb-t-rose));opacity:0;
  animation:bpBreathe 3.2s ease-in-out infinite;pointer-events:none}
.bp-secure-go:disabled::after{animation-duration:1s}
.bp-secure-go.alt{margin-top:6px;background:var(--ink);box-shadow:none}
.bp-secure-pin{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.bp-secure-note{font-size:.88rem;color:var(--muted);line-height:1.55;margin:0 0 14px}
.bp-secure-msg{min-height:1.2em;font-size:.9rem;margin:13px 0 0;color:var(--muted)}
.bp-secure-msg.bad{color:rgb(var(--rb-red-ink))}
.bp-secure-skip{display:block;margin-top:16px;font-size:.85rem;color:var(--muted);text-align:center}
@media (prefers-reduced-motion:reduce){.bp-secure-go::after{animation:none;opacity:0}}

/* ---- the declaration panel ------------------------------------------------
 * Sits inside the progress card, folded away until one of its two steps is
 * tapped. It is a form, so it looks like the rest of the site's forms rather
 * than inventing a new one. */
.bp-declare{margin-top:14px;padding:16px;border-radius:8px;border:1.5px solid var(--line);
  background:color-mix(in srgb,var(--fg) 3%,var(--card))}
.bp-declare[hidden]{display:none!important}
.bp-dec-head b{display:block;font-size:1rem;font-weight:700}
.bp-dec-head p{margin:4px 0 0;font-size:.85rem;color:var(--muted);line-height:1.55}
.bp-dec-field{margin-top:15px}
.bp-dec-field .lbl{display:block;font-size:.85rem;font-weight:600;margin-bottom:7px}
.bp-dec-field .inp{width:100%;max-width:420px}
.bp-dec-other{margin-top:9px}
.bp-dec-other[hidden]{display:none!important}
.bp-dec-pick{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));max-width:420px}
.bp-dec-opt{text-align:left;padding:12px 13px;border-radius:6px;border:1.5px solid var(--line);
  background:var(--card);color:var(--fg);font:inherit;cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.bp-dec-opt b{display:block;font-size:.92rem;font-weight:700}
.bp-dec-opt span{display:block;font-size:.79rem;color:var(--muted);margin-top:2px;line-height:1.45}
.bp-dec-opt:hover{border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 40%,var(--line))}
.bp-dec-opt:focus-visible{outline:2px solid rgb(var(--rb-red-solid));outline-offset:2px}
.bp-dec-opt.on{border-color:rgb(var(--rb-red-solid));background:rgba(var(--rb-red-solid),.07)}
.bp-dec-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}
.bp-dec-close{border:1.5px solid var(--line);background:var(--card);color:var(--muted)}
.bp-dec-msg{margin-top:10px;min-height:1.15em;font-size:.85rem;color:var(--muted)}
.bp-dec-msg.ok{color:rgb(var(--rb-ok))}
.bp-dec-msg.bad{color:rgb(var(--rb-red-ink))}
@media (prefers-reduced-motion:reduce){.bp-dec-opt{transition:none}}


/* Chart palette. Two categorical slots and a five step single-hue ramp, all
   validated rather than eyeballed: worst all-pairs CVD delta E 26.8 light and
   21.5 dark, normal vision 35.4 and 31.5, every step inside its lightness band
   and above 3:1 on its own surface. */
.viz{--viz-1:#D6101E;--viz-2:#707070;
  --viz-s1:#FDDCDF;--viz-s2:#F9A8AE;--viz-s3:#F26A75;--viz-s4:#E03040;--viz-s5:#A50F1B;
  --viz-grid:color-mix(in srgb,var(--fg) 10%,transparent);--viz-axis:var(--muted)}
html[data-theme="dark"] .viz{--viz-1:#F0505C;--viz-2:#909090;
  --viz-s1:#F7A9AF;--viz-s2:#F0707B;--viz-s3:#DC4250;--viz-s4:#B02A38;--viz-s5:#7A1B26}


/* ============================== CHARTS ================================== */
.viz{position:relative;margin:0}
.viz-cap{font-size:.82rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.viz-empty{color:var(--muted);font-size:.9rem;padding:22px 0;line-height:1.6}
.viz svg{width:100%;height:auto;display:block;overflow:visible}
.viz-grid line{stroke:var(--viz-grid);stroke-width:1}
.viz-grid text,.viz-xlab text{fill:var(--viz-axis);font-size:11px;font-family:var(--mono)}
.viz-fill{opacity:0;transition:opacity .7s .35s var(--ease)}
.viz-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 1.5s var(--ease)}
[data-viz].in .viz-fill{opacity:1}
[data-viz].in .viz-line{stroke-dashoffset:0}
.viz-hit{fill:transparent;cursor:crosshair}
.viz-hit:hover{fill:var(--viz-1);fill-opacity:.16}

.viz-barlist{display:flex;flex-direction:column;gap:9px}
.viz-bar{display:grid;grid-template-columns:minmax(88px,42%) 1fr auto;gap:11px;align-items:center;cursor:default}
.viz-bl{font-size:.86rem;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz-bt{height:20px;border-radius:3px;background:color-mix(in srgb,var(--fg) 6%,transparent);overflow:hidden}
.viz-bt i{display:block;height:100%;width:var(--w);border-radius:3px;transform:scaleX(0);
  transform-origin:left center;transition:transform 1s var(--ease)}
[data-viz].in .viz-bt i{transform:scaleX(1)}
.viz-bar:nth-child(2) .viz-bt i{transition-delay:.05s}
.viz-bar:nth-child(3) .viz-bt i{transition-delay:.1s}
.viz-bar:nth-child(4) .viz-bt i{transition-delay:.15s}
.viz-bar:nth-child(5) .viz-bt i{transition-delay:.2s}
.viz-bar:nth-child(n+6) .viz-bt i{transition-delay:.25s}
.viz-bv{font-family:var(--mono);font-size:.82rem;font-weight:700;min-width:3ch;text-align:right}
.viz-bar:hover .viz-bt{background:color-mix(in srgb,var(--fg) 10%,transparent)}

.viz-fn{display:grid;grid-template-columns:1fr;gap:6px;padding:11px 0;border-top:1px solid var(--line)}
.viz-fn:first-of-type{border-top:0}
.viz-fl{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.viz-fl b{font-size:.95rem}
.viz-fl span{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.viz-ft{height:12px;border-radius:3px;background:color-mix(in srgb,var(--fg) 6%,transparent);overflow:hidden}
.viz-ft i{display:block;height:100%;width:var(--w);border-radius:3px;transform:scaleX(0);
  transform-origin:left center;transition:transform 1.05s var(--ease)}
[data-viz].in .viz-ft i{transform:scaleX(1)}
.viz-fn:nth-of-type(2) .viz-ft i{transition-delay:.08s}
.viz-fn:nth-of-type(3) .viz-ft i{transition-delay:.16s}
.viz-fn:nth-of-type(4) .viz-ft i{transition-delay:.24s}

.viz-table{margin-top:14px}
.viz-table summary{font-size:.8rem;color:var(--muted);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:6px;padding:4px 0}
.viz-table summary::before{content:"+";font-family:var(--mono);font-weight:700}
.viz-table[open] summary::before{content:"−"}
.viz-table summary::-webkit-details-marker{display:none}
.viz-table table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.82rem}
.viz-table th,.viz-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.viz-table th{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.viz-table td:last-child,.viz-table th:last-child{text-align:right;font-family:var(--mono)}

.viz-tip{position:fixed;z-index:9600;pointer-events:none;opacity:0;transform:translate3d(0,4px,0);
  background:var(--ink);color:#fff;border-radius:4px;padding:7px 11px;font-size:.8rem;line-height:1.35;
  box-shadow:0 8px 24px rgba(12,12,12,.30);transition:opacity .12s,transform .12s;max-width:220px}
.viz-tip.on{opacity:1;transform:translate3d(0,0,0)}
.viz-tip b{display:block;font-family:var(--mono);font-size:.9rem}

.viz-stat{border:1px solid var(--line);border-radius:5px;padding:15px 16px;background:var(--card);
  position:relative;overflow:hidden}
.viz-stat .v{font-family:var(--mono);font-size:clamp(1.5rem,3.6vw,2rem);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.viz-stat .k{font-size:.8rem;color:var(--muted);margin-top:6px}
.viz-stat .s{font-size:.74rem;color:var(--muted);margin-top:3px;opacity:.85}
.viz-stat.viz-good .v{color:rgb(var(--rb-ok))}
.viz-stat.viz-warn .v{color:rgb(var(--rb-warn))}
.viz-stat.viz-brand .v{color:rgb(var(--rb-red-nav))}
.viz-row{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

@media (prefers-reduced-motion:reduce){
  .viz-fill,.viz-line,.viz-bt i,.viz-ft i{transition:none}
  .viz-line{stroke-dashoffset:0}
  .viz-fill{opacity:1}
  .viz-bt i,.viz-ft i{transform:scaleX(1)}
}

/* ---- complaint console ---------------------------------------------------- */
.cm-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));margin-top:14px}
.cm-base{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:14px 0 16px}

/* ---- the AI engine console ---------------------------------------------
   The failover chain drawn as a chain, because that is what it is. */
.bce-chain{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.bce-node{display:flex;gap:11px;align-items:flex-start;flex:1 1 230px;min-width:0;padding:13px 14px;
  border:1.5px solid var(--line);border-radius:4px;background:var(--card)}
.bce-node.ok{border-color:color-mix(in srgb,var(--emerald) 55%,var(--line))}
.bce-node.off{opacity:.62;border-style:dashed}
.bce-node > div{min-width:0;flex:1}
.bce-node b{display:block;font-weight:700;font-size:.95rem;margin-bottom:2px}
.bce-n{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:999px;
  background:rgb(var(--rb-red-solid));color:#fff;font-family:var(--mono);font-size:.74rem;font-weight:700}
.bce-node.off .bce-n{background:color-mix(in srgb,var(--fg) 22%,transparent);color:var(--bg)}
.bce-s{display:block;font-size:.8rem;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.bce-r{flex:none;text-align:right;font-size:.8rem;color:var(--muted);line-height:1.4}
.bce-r small{display:block;font-family:var(--mono);font-size:.7rem}
.bce-arrow{display:grid;place-items:center;flex:0 0 22px;color:var(--muted)}
.bce-arrow .ic{width:17px;height:17px}
.bce-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.bce-tbl{border:1px solid var(--line);border-radius:4px;overflow:hidden}
.bce-th,.bce-tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) 70px 80px;gap:10px;
  padding:10px 13px;align-items:center;font-size:.86rem}
.bce-th{background:color-mix(in srgb,var(--fg) 4%,transparent);font-weight:700;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bce-tr + .bce-tr{border-top:1px solid var(--line)}
.bce-tbl .mono{font-family:var(--mono);font-size:.78rem;overflow-wrap:anywhere}
.bce-log{display:grid;gap:8px}
.bce-le{display:grid;grid-template-columns:130px 118px minmax(0,1fr);gap:10px;padding:10px 13px;
  border:1px solid var(--line);border-left-width:3px;border-radius:4px;font-size:.84rem;align-items:baseline}
.bce-le.stage-fallback{border-left-color:var(--brass)}
.bce-le.stage-fail{border-left-color:rgb(var(--rb-red-solid))}
.bce-le .mono{font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.bce-lk{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.bce-ld{grid-column:1/-1;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.bce-pr{margin-top:14px;display:grid;gap:10px}
.bce-pc{border:1.5px solid var(--line);border-radius:4px;padding:13px 14px;background:var(--card)}
.bce-pc b{display:block;font-size:.93rem;margin-bottom:4px}
.bce-pc .bce-pick{font-family:var(--mono);font-size:.84rem;color:var(--fg);overflow-wrap:anywhere}
.bce-pc ul{margin:9px 0 0;padding-left:18px;font-family:var(--mono);font-size:.74rem;color:var(--muted);
  line-height:1.65;columns:2;column-gap:20px}
.bce-pc ul li{overflow-wrap:anywhere;break-inside:avoid}
/* the reading feed console */
.fd-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:12px}
.fd-grp{border:1.5px solid var(--line);border-radius:4px;background:var(--card);padding:13px 14px}
.fd-grp-h{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.fd-grp-h b{font-size:.95rem;font-weight:700;min-width:0;overflow-wrap:anywhere}
.fd-n{flex:none;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.fd-tops{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0}
.fd-tops span{font-size:.7rem;padding:3px 9px;border-radius:999px;color:rgb(var(--rb-red-ink));
  background:color-mix(in srgb,rgb(var(--rb-red-solid)) 10%,transparent)}
.fd-list{margin:10px 0 0;padding-left:17px;font-size:.85rem;line-height:1.65}
.fd-list a{color:var(--fg);text-decoration:none}
.fd-list a:hover{text-decoration:underline}
.fd-list i{color:var(--muted)}
.bce-th.fd-th,.bce-tr.fd-th{grid-template-columns:minmax(0,1.6fr) 70px 110px 90px 80px}
@media (max-width:700px){
  .bce-th.fd-th,.bce-tr.fd-th{grid-template-columns:minmax(0,1fr) 70px}
  .bce-tr.fd-th span:nth-child(n+3){grid-column:auto}
}
.fd-dials{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin:14px 0 4px}
.fd-dial .lbl{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px}
.fd-try{border:1.5px solid var(--line);border-radius:4px;margin-top:12px;overflow:hidden}
.fd-try-r{display:grid;grid-template-columns:28px minmax(0,1fr) repeat(5,58px);gap:8px;align-items:center;
  padding:10px 13px;font-size:.84rem}
.fd-try-r + .fd-try-r{border-top:1px solid var(--line)}
.fd-try-h{background:color-mix(in srgb,var(--fg) 4%,transparent);font-weight:700;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fd-try-r.win{background:color-mix(in srgb,rgb(var(--rb-red-solid)) 7%,transparent)}
.fd-try-r b{font-weight:700}
.fd-try-r .mono{font-family:var(--mono);font-size:.76rem;text-align:right}
@media (max-width:820px){
  .fd-try-r{grid-template-columns:28px minmax(0,1fr);row-gap:4px}
  .fd-try-r .mono{text-align:left}
  .fd-try-r .mono::before{content:attr(data-k) " ";color:var(--muted)}
  .fd-try-h{display:none}
}

/* the email card */
.bcm-test{margin-top:16px;padding:14px;border:1.5px solid var(--line);border-radius:4px;background:var(--bg)}
.bcm-testrow{display:flex;gap:9px;margin-top:7px;flex-wrap:wrap}
.bcm-testrow .inp{flex:1 1 220px;min-width:0}
.bcm-log{display:grid;gap:8px}
.bcm-le{display:grid;grid-template-columns:130px 78px minmax(0,1.2fr) minmax(0,1.6fr);gap:10px;
  padding:10px 13px;border:1px solid var(--line);border-left-width:3px;border-radius:4px;
  font-size:.84rem;align-items:baseline}
.bcm-le.sent{border-left-color:var(--emerald)}
.bcm-le.failed{border-left-color:rgb(var(--rb-red-solid))}
.bcm-le.skipped{border-left-color:var(--brass)}
.bcm-le .mono{font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.bcm-st{font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.bcm-sub,.bcm-det{color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.bcm-det{grid-column:1/-1}
@media (max-width:760px){ .bcm-le{grid-template-columns:1fr 78px} .bcm-le span:nth-child(3),.bcm-le span:nth-child(4){grid-column:1/-1} }
@media (max-width:700px){
  .bce-le{grid-template-columns:1fr}
  .bce-th,.bce-tr{grid-template-columns:minmax(0,1fr) 60px}
  .bce-th span:nth-child(2),.bce-tr span:nth-child(2){grid-column:1/-1}
  .bce-pc ul{columns:1}
}
.cm-basef .inp{margin-top:5px}
.cm-hint{display:block;font-size:.76rem;color:var(--muted);margin-top:5px;line-height:1.45}
.cm-tablewrap{overflow-x:auto;margin-top:12px}
.cm-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
.cm-table th{text-align:left;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);padding:8px 10px;border-bottom:1.5px solid var(--line)}
.cm-table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.cm-table td b{display:block;font-size:.9rem}
.cm-table td span{display:block;font-size:.78rem;color:var(--muted)}
.cm-table tr:hover td{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.cm-none{color:var(--muted);text-align:center;padding:26px 0!important}
.cm-act{white-space:nowrap;display:flex;gap:7px;align-items:center}
.cm-st{display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.cm-st.ready{color:rgb(var(--rb-blue-ink));border-color:color-mix(in srgb,var(--fg) 40%,var(--line))}
.cm-st.resolved{color:rgb(var(--rb-ok));border-color:color-mix(in srgb,rgb(var(--rb-ok)) 40%,var(--line))}
.cm-st.error{color:rgb(var(--rb-red-ink));border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 40%,var(--line))}
.cm-st.running{color:rgb(var(--rb-warn));border-color:color-mix(in srgb,rgb(var(--rb-warn)) 40%,var(--line))}

/* ---- the admin shell ------------------------------------------------------ */
.adm{display:grid;grid-template-columns:236px 1fr;gap:0;min-height:70vh;align-items:start}
.adm-rail{position:sticky;top:calc(var(--header-h) + 10px);align-self:start;padding:6px 14px 24px 0;
  border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px;max-height:calc(100vh - var(--header-h) - 20px);overflow-y:auto}
.adm-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;color:var(--fg);
  text-decoration:none;padding:8px 12px;margin-bottom:8px}
.adm-brand .ic{width:19px;height:19px;color:rgb(var(--rb-red-nav))}
.adm-group{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.adm-gl{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);padding:0 12px 6px}
.adm-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:4px;
  color:var(--fg);text-decoration:none;font-size:.9rem;font-weight:500;
  transition:background .14s var(--ease),color .14s}
.adm-link .ic{width:18px;height:18px;flex:none;color:var(--muted);transition:color .14s}
.adm-link:hover{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.adm-link.on{background:color-mix(in srgb,rgb(var(--rb-red-solid)) 10%,transparent);
  color:rgb(var(--rb-red-ink));font-weight:700}
.adm-link.on .ic{color:rgb(var(--rb-red-ink))}
.adm-link.quiet{color:var(--muted);font-size:.85rem;margin-top:6px}
.adm-railbtn{display:none}
/* The content column had a left gutter and no right one, so on a wide screen
   the last tile in a row ran into the edge of the window. */
.adm-main{padding:6px max(18px,env(safe-area-inset-right)) 40px 26px;min-width:0}
.adm-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.adm-head h1{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2rem);font-weight:600;
  letter-spacing:-.02em;margin:0}
.adm-head p{margin:5px 0 0;color:var(--muted);font-size:.92rem;max-width:52ch;line-height:1.55}
.adm-health{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:6px 11px;
  border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.adm-health .ic{width:13px;height:13px}
.adm-health.ok{color:rgb(var(--rb-ok));border-color:color-mix(in srgb,rgb(var(--rb-ok)) 40%,var(--line))}
.adm-health.warn{color:rgb(var(--rb-warn));border-color:color-mix(in srgb,rgb(var(--rb-warn)) 40%,var(--line))}
.adm-health.bad{color:rgb(var(--rb-red-ink));border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 40%,var(--line))}
.adm-card{border:1.5px solid var(--line);border-radius:6px;background:var(--card);padding:clamp(15px,3vw,22px)}
.adm-card h3{font-size:1.02rem;font-weight:700;margin:0 0 4px}
.adm-note{font-size:.86rem;color:var(--muted);line-height:1.55;margin:0 0 6px}
.adm-msg{font-size:.86rem;margin-top:10px;min-height:1.1em;color:var(--muted)}
.adm-msg.bad{color:rgb(var(--rb-red-ink))}
.adm-msg.ok{color:rgb(var(--rb-ok))}
.adm-alert{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:6px;margin-bottom:14px;
  border:1px solid var(--line);background:var(--card)}
.adm-alert .ic{width:22px;height:22px;flex:none}
.adm-alert b{display:block;font-size:.97rem}
.adm-alert span{font-size:.85rem;color:var(--muted);line-height:1.5}
.adm-alert .btn{margin-left:auto;flex:none}
@media (max-width:600px){
  .adm-alert{flex-wrap:wrap;align-items:flex-start;gap:10px}
  .adm-alert>div{flex:1 1 100%;min-width:0;order:2}
  .adm-alert .ic{order:1}
  .adm-alert .btn{order:3;margin-left:0;width:100%;justify-content:center}
}
.adm-alert.ok{border-color:color-mix(in srgb,rgb(var(--rb-ok)) 34%,var(--line))}
.adm-alert.ok .ic{color:rgb(var(--rb-ok))}
.adm-alert.warn{border-color:color-mix(in srgb,rgb(var(--rb-warn)) 40%,var(--line))}
.adm-alert.warn .ic{color:rgb(var(--rb-warn))}
.adm-alert.bad{border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 40%,var(--line))}
.adm-alert.bad .ic{color:rgb(var(--rb-red-mark))}
.adm-quick{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:12px}
.adm-q{border:1px solid var(--line);border-radius:5px;padding:13px;text-decoration:none;color:inherit;
  display:block;transition:border-color .15s var(--ease),transform .15s var(--ease)}
.adm-q:hover{border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 40%,var(--line));transform:translate3d(0,-1px,0)}
.adm-q .ic{width:19px;height:19px;color:rgb(var(--rb-red-nav))}
.adm-q b{display:block;font-size:.92rem;margin-top:7px}
.adm-q span{font-size:.79rem;color:var(--muted)}

.sec-list{display:flex;flex-direction:column;gap:0;margin-top:10px}
.sec-item,.sec-toggle{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line)}
.sec-item:first-child,.sec-toggle:first-child{border-top:0}
.sec-item b,.sec-toggle b{display:block;font-size:.93rem}
.sec-item b{display:inline}
.sec-state{display:inline-block;margin-left:8px;font-style:normal;font-size:.68rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;vertical-align:2px}
.sec-state.ok{color:rgb(var(--rb-ok));background:rgba(var(--rb-ok),.12)}
.sec-state.warn{color:rgb(var(--rb-warn));background:rgba(var(--rb-warn),.14)}
.sec-state.fail{color:rgb(var(--rb-red-solid));background:rgba(var(--rb-red-solid),.12)}
.sec-item span,.sec-toggle span{display:block;font-size:.83rem;color:var(--muted);line-height:1.5;margin-top:2px}
.sec-dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:6px;background:var(--muted)}
.sec-dot.ok{background:rgb(var(--rb-ok))}
.sec-dot.warn{background:rgb(var(--rb-warn))}
.sec-dot.fail{background:rgb(var(--rb-red-solid))}
.sec-toggle{cursor:pointer}
.sec-toggle input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:rgb(var(--rb-red-solid))}
.sec-add{display:grid;gap:9px;grid-template-columns:150px 1fr 1fr auto;margin:14px 0 4px;align-items:center}

@media (max-width:900px){
  .adm{grid-template-columns:1fr}
  .adm-main{padding:0 0 calc(var(--nav-h) + 34px + env(safe-area-inset-bottom))}
  .adm-railbtn{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);
    border-radius:5px;padding:10px 14px;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
    color:var(--fg);margin-bottom:14px}
  .adm-railbtn .ic{width:18px;height:18px}
  .adm-rail{position:fixed;inset:0 auto 0 0;width:min(280px,84vw);z-index:8500;background:var(--card);
    border-right:1.5px solid var(--line);padding:18px 14px;max-height:none;
    transform:translate3d(-102%,0,0);transition:transform .3s var(--ease);box-shadow:0 0 40px rgba(12,12,12,.22)}
  .adm-rail.open{transform:none}
  .sec-add{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.adm-rail{transition:none}}


/* =========================================================================
 * ARTICLE BODY: things an author pastes in
 *
 * Everything above styles markup this code writes. This section styles markup
 * an AUTHOR writes, which is the part that cannot be trusted to fit: a photo
 * straight off a phone is 3000px wide, a pasted table has eight columns, and a
 * bare URL is one unbreakable word. None of it was constrained, so it ran past
 * the right edge of the column and, because the page clips horizontally, was
 * simply cut off with no way to scroll to it.
 * ===================================================================== */
.art-body{min-width:0}
.art-body img{display:block;max-width:100%;height:auto;margin:26px auto;border-radius:8px}
.art-body figure{margin:26px 0;max-width:100%}
.art-body figure img{margin:0}
.art-body figcaption{margin-top:9px;font-size:.85rem;line-height:1.55;color:var(--muted);text-align:center}
.art-body video,.art-body iframe,.art-body embed,.art-body object{display:block;max-width:100%;margin:26px 0;border:0;border-radius:8px}
.art-body svg{max-width:100%;height:auto}
/* A URL is one word to the line breaker, so it needs explicit permission to
   break. Scoped to links and code, never to prose, where breaking mid word
   would be worse than the problem. */
.art-body a,.art-body code,.art-body kbd,.art-body samp{overflow-wrap:anywhere}
.art-body pre{white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* A table that cannot fit scrolls inside its own box rather than pushing the
   column wider. The box is what scrolls, so the article never does. */
.art-body .tbl-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:26px 0}
.art-body .tbl-scroll table{margin:0;min-width:520px;width:100%}
.art-body>table{display:block;max-width:100%;overflow-x:auto}
/* The hint only exists when the script has measured a real overflow, so it can
   never promise a swipe that does nothing. */
.art-body .tbl-scroll{position:relative}
.art-body .tbl-scroll.can-scroll::after{content:"Swipe the table to see the rest";
  display:block;margin-top:8px;font-size:.78rem;color:var(--muted);font-family:var(--mono);
  letter-spacing:.02em;transition:opacity .2s var(--ease)}
.art-body .tbl-scroll.can-scroll.at-end::after{opacity:0}
@media (prefers-reduced-motion:reduce){.art-body .tbl-scroll.can-scroll::after{transition:none}}

/* ===================== END AURORA ===================== */


/* =========================================================================
 * HEADER AND DRAWER
 *
 * The bar is a row of full height cells separated by hairlines, so the menu
 * square, the logo, the nav and the tools all read as one machined strip
 * rather than a row of floating buttons. The menu is a solid red square
 * because it is the single most used control on a phone and it should be
 * impossible to miss.
 * ===================================================================== */
.hdr{height:var(--header-h);padding:0;gap:0;align-items:stretch;
  border-bottom:1px solid var(--line)}

/* the red square */
html[data-theme]:root .hdr .hdr-menu{width:var(--header-h);flex:none;border:0;
  border-right:1px solid var(--line);background:rgb(var(--rb-red-solid));color:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;transition:background .18s var(--ease)}
html[data-theme]:root .hdr .hdr-menu:hover{filter:brightness(.88)}
.hdr-menu:focus-visible{outline:3px solid var(--fg);outline-offset:-3px}
/* A fixed 22x16 box rather than a grid, because the three bars have to be
   able to sit on top of each other to make the cross. */
.burger{position:relative;width:22px;height:16px;display:block}
.burger i{position:absolute;left:0;display:block;width:100%;height:2px;background:currentColor;
  border-radius:2px;transition:transform .34s var(--ease),opacity .18s var(--ease),width .3s var(--ease)}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:7px;width:70%;transform-origin:left}
.burger i:nth-child(3){top:14px}
.hdr-menu:hover .burger i:nth-child(2){width:100%}
/* Open: the top and bottom bars cross, the middle one goes. The cell, the
   colour and everything around it stay exactly where they were. */
.hdr-menu.is-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr-menu.is-open .burger i:nth-child(2){opacity:0;transform:scaleX(.2)}
.hdr-menu.is-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* One long cell between the red square and the two icons. flex:1 so it
   takes every pixel the icons do not, min-width:0 so it gives way instead
   of pushing the profile icon off a 320px phone. */
.hdr .brand{padding:0 14px;border-right:1px solid var(--line);border-radius:0;
  flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-start}

/* desktop nav: the underline grows from the left rather than fading in */
/* flex:none, so the row never squeezes the nav narrower than its links and
   slides them under the tools. Fitting is the breakpoints' job, not flexbox's. */
.hdr-nav{margin-left:0;display:flex;align-items:stretch;white-space:nowrap;gap:0;flex:none}
.hdr-nav a{display:flex;align-items:center;padding:0 12px;position:relative;
  font-size:.9rem;font-weight:500;color:var(--fg);text-decoration:none}
.hdr-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
  background:rgb(var(--rb-red-solid));transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease)}
.hdr-nav a:hover::after,.hdr-nav a.on::after{transform:scaleX(1)}
.hdr-nav a.on{font-weight:700}

/* margin-left:auto, not 0: with the nav hidden on a phone nothing else pushes
   the tools to the right and the hairline strip stopped in the middle of the
   bar with bare page behind it. */
.hdr-tools{display:flex;align-items:stretch;flex:none;margin-left:auto}
.hdr-nav+.hdr-tools{margin-left:0}
.tool{width:var(--header-h);flex:0 0 var(--header-h);display:grid;place-items:center;border:0;
  border-left:1px solid var(--line);background:none;color:var(--fg);cursor:pointer;
  position:relative;text-decoration:none;transition:background .18s var(--ease)}
.tool:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.tool:focus-visible{outline:3px solid rgb(var(--rb-red-solid));outline-offset:-3px}
.tool .ic{width:21px;height:21px}
.hdr .pub-btn{height:auto;border-radius:0;padding:0 20px;border-left:1px solid var(--line);
  align-self:stretch}
/* The avatar was the one thing in the bar that was not a cell, so the strip of
   hairlines stopped short of the right edge and the avatar floated on the page
   behind it. It sits in a cell of its own now and stays round: squaring it off
   or stripping its gradient would have made a signed-in initial unreadable. */
/* flex:0 0 and a square aspect: in the old rule the cell was allowed to
   shrink, so on a 320px phone the profile cell was squeezed into an oval and
   pushed half off the edge. */
.hdr .av-cell{width:var(--header-h);flex:0 0 var(--header-h);align-self:stretch;
  display:grid;place-items:center;border-left:1px solid var(--line);
  transition:background .18s var(--ease)}
.hdr .av-cell:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.hdr .av-cell .avatar{margin:0;width:clamp(28px,calc(var(--header-h) - 26px),38px);
  height:clamp(28px,calc(var(--header-h) - 26px),38px);aspect-ratio:1;flex:none}
.hdr .av-cell .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.hdr .av-cell .avatar .ic{width:19px;height:19px}
.hdr .lang-wrap{display:flex;align-items:stretch;flex:0 0 auto}
/* Two square cells on the right at every width. The owner can still drop the
   theme switcher on phones from Admin, Header and menu, and then the logo
   cell simply grows into the space. */
@media (max-width:699px){
  html[data-chrome-mtheme="off"] .hdr .lang-wrap{display:none}
}

/* ---- the drawer ---------------------------------------------------------
 * Full screen, and dark in both themes: it is a separate surface from the
 * page, the way a menu card is a separate thing from the table. */
/* The aurora layer styles .hdr, .drawer and .foot together as translucent
   chrome, and does it from html[data-theme="dark"] .drawer, which outranks a
   bare .drawer however late it appears. A full screen drawer cannot be
   translucent: the page shows straight through it. These rules are written at
   a specificity that beats that one outright rather than relying on order. */
/* Starts below the header, not over it: the bar stays put and keeps
   working, which is the whole point of the cross. */
html[data-theme]:root aside.drawer{position:fixed;inset:var(--header-h) 0 0 0;width:auto;max-width:none;z-index:55;
  border-right:0;padding:0;display:block;overflow:hidden;
  background-color:#0D0D0D;color:#F2F2F2;
  background-image:
    radial-gradient(1100px 620px at 12% -10%, rgb(var(--rb-t-red) / .30) 0%, rgb(var(--rb-t-red) / 0) 60%),
    radial-gradient(900px 560px at 92% 8%, rgb(var(--rb-t-sky) / .26) 0%, rgb(var(--rb-t-sky) / 0) 62%),
    radial-gradient(760px 520px at 70% 104%, rgb(var(--rb-t-violet) / .24) 0%, rgb(var(--rb-t-violet) / 0) 60%);
  background-size:auto;background-position:0 0;animation:none;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .42s var(--ease),visibility 0s .42s}
html[data-theme]:root aside.drawer.open{transform:none;visibility:visible;transition:transform .42s var(--ease),visibility 0s}
/* The bottom bar stays put too, so the last row of the menu has to clear
   it rather than hide behind it. */
.drawer-scroll{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(env(safe-area-inset-bottom) + 40px);overscroll-behavior:contain}
@media (max-width:1023px){
  .drawer-scroll{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 34px)}
}

/* The drawer has no bar of its own any more. The page header is the bar. */

/* ---- search, which used to be an icon in the bar ----------------------- */
.dsearch{max-width:var(--maxw);margin:0 auto;padding:26px clamp(16px,4vw,44px) 4px}
.dsearch-lab{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:#B4B4B4;margin-bottom:10px}
.dsearch-row{display:flex;align-items:center;gap:12px;padding:0 16px;
  border:1px solid rgba(255,255,255,.2);border-radius:6px;background:rgba(255,255,255,.05);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.dsearch-row:focus-within{border-color:rgb(var(--rb-red-solid));background:rgba(255,255,255,.08)}
.dsearch-row .ic{width:20px;height:20px;color:#B4B4B4;flex:none}
.dsearch-row input{flex:1;min-width:0;height:56px;border:0;background:none;color:#F2F2F2;
  font:inherit;font-size:1.05rem;outline:none}
.dsearch-row input::placeholder{color:#8E8E8E}
.dsearch-go{width:42px;height:42px;flex:none;display:grid;place-items:center;border:0;border-radius:4px;
  background:rgb(var(--rb-red-solid));color:#fff;cursor:pointer;transition:transform .18s var(--ease)}
.dsearch-go:hover{transform:translateX(2px)}
.dsearch-go .ic{width:18px;height:18px;color:#fff}
/* This stylesheet had no visually-hidden helper, so an icon button's label
   printed on top of the icon. Added here rather than dropping the label: the
   button needs a name a screen reader can read. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dsearch-hint{margin:9px 0 0;font-size:.82rem;color:#B4B4B4}
.dsearch-none{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,44px) 30px;color:#B4B4B4}

/* ---- the directory ------------------------------------------------------ */
.drawer-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:26px clamp(20px,3vw,44px);padding:22px clamp(16px,4vw,44px) 10px;
  max-width:var(--maxw);margin:0 auto}
.dgroup h2{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:#B4B4B4;margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.14)}
.drow{display:grid;grid-template-columns:52px 1fr;gap:15px;align-items:center;padding:11px 0;
  text-decoration:none;color:inherit;border-radius:6px}
.drow .tile{width:52px;height:52px;display:grid;place-items:center;border-radius:5px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  transition:background .2s var(--ease),transform .32s var(--ease),border-color .2s var(--ease)}
.drow .tile .ic{width:22px;height:22px;color:#F2F2F2}
.drow:hover .tile,.drow:focus-visible .tile{background:rgb(var(--rb-red-solid));
  border-color:rgb(var(--rb-red-solid));transform:rotate(-6deg)}
.drow:focus-visible{outline:2px solid rgb(var(--rb-red-solid));outline-offset:3px}
.dtxt{min-width:0}
.drow strong{display:block;font-family:var(--serif);font-weight:500;font-size:1.32rem;
  line-height:1.12;letter-spacing:-.01em}
.drow .d{display:block;font-size:.83rem;color:#B4B4B4;margin-top:3px;line-height:1.4}
.drow[aria-current="page"] .tile{background:rgb(var(--rb-red-solid));border-color:rgb(var(--rb-red-solid))}
.drow[hidden]{display:none}

.drawer-foot{max-width:var(--maxw);margin:0 auto;padding:22px clamp(16px,4vw,44px) 40px;
  border-top:1px solid rgba(255,255,255,.12);display:grid;gap:16px}
.drawer-note{margin:0;max-width:44ch;font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:1.2rem;line-height:1.35;color:#F2F2F2}
/* One row of squares, not a wrapped list of names. The row scrolls sideways
   on a very narrow phone rather than breaking onto a second line. */
.drawer-social{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.drawer-social::-webkit-scrollbar{display:none}
.drawer-social a{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#F2F2F2;text-decoration:none;
  background:rgba(255,255,255,.05);
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .24s var(--ease)}
.drawer-social a:hover,.drawer-social a:focus-visible{background:rgb(var(--rb-red-solid));
  border-color:rgb(var(--rb-red-solid));transform:translateY(-2px)}
.drawer-social a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.drawer-social svg,.drawer-social .ic{width:20px;height:20px;display:block}
@media (max-width:360px){.drawer-social a{width:42px;height:42px}}
/* .crafted carries --muted, which is a dark grey chosen for a light page. On
   the drawer's dark ground that measured 2.2:1. The footer text takes the
   drawer's own muted tone instead of the page's. */
html[data-theme]:root aside.drawer .handle{font-family:var(--mono);font-size:.8rem;color:#B4B4B4}
html[data-theme]:root aside.drawer .handle a{color:#F2F2F2}
html[data-theme]:root aside.drawer .crafted{color:#B4B4B4}

/* A full screen drawer needs no scrim, and one behind it only dims the edges
   of a panel that already covers everything. */
.drawer.open ~ .scrim,.scrim.open{opacity:0;visibility:hidden}

/* the staggered entrance, motion permitting */
.drawer.open .dgroup h2,.drawer.open .drow,.drawer.open .dsearch,.drawer.open .drawer-foot{
  animation:dRise .46s var(--ease) both;
  animation-delay:calc(min(var(--i,0),6) * 24ms + 60ms)}
@keyframes dRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Fill mode both holds a row at opacity zero for the whole of its delay while
   its space stays reserved, which is a menu with holes in it to anyone
   looking. Once the cascade has had its moment the rows own their state
   outright, so nothing that stalls an animation part way through can leave
   one dark. */
.drawer.open.d-settled .dgroup h2,.drawer.open.d-settled .drow,
.drawer.open.d-settled .dsearch,.drawer.open.d-settled .drawer-foot{animation:none}

/* shed by priority, widest first, rather than clipping the end off the row */
@media (max-width:1400px){
  .hdr-nav a{padding:0 10px;font-size:.87rem}
  .hdr-nav a::after{left:10px;right:10px}
  .hdr-nav a[data-p="4"]{display:none}
}
@media (max-width:1180px){
  .hdr-nav a{padding:0 9px;font-size:.85rem}
  .hdr-nav a::after{left:9px;right:9px}
  .hdr-nav a[data-p="3"]{display:none}
}
@media (max-width:1120px){ .hdr-nav a[data-p="2"]{display:none} }

/* On a narrow phone the four cells and a wide wordmark cannot all have what
   they want. The icon cells give up a few pixels each so the logo keeps its
   full height from 360px upwards, which is every phone still being sold. */
@media (max-width:400px){
  html[data-theme]:root .hdr .hdr-menu{width:54px}
  .hdr .tool,.hdr .av-cell{width:50px;flex-basis:50px}
  .hdr .brand{padding:0 10px}
  .hdr .av-cell .avatar{width:32px;height:32px}
}
@media (max-width:900px){
  .hdr-nav{display:none}
  .hdr .pub-btn .txt{display:none}
  .hdr .pub-btn{padding:0 18px}
  .drow strong{font-size:1.18rem}
}
@media (max-width:560px){
  .dsearch{padding-top:20px}
  .dsearch-row input{height:50px;font-size:1rem}
  .drawer-body{padding-top:16px;gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .drawer{transition:none}
  .drawer.open .dgroup h2,.drawer.open .drow,.drawer.open .dsearch,.drawer.open .drawer-foot{animation:none}
  .burger i,.drow .tile,.hdr-nav a::after,.dsearch-go{transition:none}
}


/* =====================================================================
 * MOTION.  Everything here moves only transform and opacity, so it runs
 * on the compositor and never costs a layout.  Every rule sits inside a
 * prefers-reduced-motion guard or is cancelled by one at the end, and the
 * page is fully readable with all of it switched off.
 * ================================================================== */

/* how far a panel travels in, by direction */
[data-reveal="left"]{transform:translate3d(-26px,0,0)}
[data-reveal="right"]{transform:translate3d(26px,0,0)}
[data-reveal="scale"]{transform:scale(.965)}
[data-reveal="blur"]{filter:blur(9px);transform:translate3d(0,10px,0)}
[data-reveal="blur"].in{filter:blur(0)}
[data-reveal="blur"]{transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
[data-reveal].in{transform:none}

/* a group whose children arrive one after another */
[data-stagger]>*{opacity:0;transform:translate3d(0,16px,0);transition:opacity .62s var(--ease),transform .62s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:40ms}
[data-stagger].in>*:nth-child(2){transition-delay:100ms}
[data-stagger].in>*:nth-child(3){transition-delay:160ms}
[data-stagger].in>*:nth-child(4){transition-delay:220ms}
[data-stagger].in>*:nth-child(5){transition-delay:280ms}
[data-stagger].in>*:nth-child(6){transition-delay:340ms}
[data-stagger].in>*:nth-child(7){transition-delay:400ms}
[data-stagger].in>*:nth-child(8){transition-delay:455ms}
[data-stagger].in>*:nth-child(n+9){transition-delay:500ms}

/* how far you are through the page */
#bpScrollProg{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--emerald,#0E9F6E),var(--brass,rgb(var(--rb-red-solid))));pointer-events:none;will-change:transform}
@supports (animation-timeline:scroll()){
  #bpScrollProg{animation:bpProgress linear both;animation-timeline:scroll(root block);transform:scaleX(0)}
}
@keyframes bpProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* a heading that lifts out from behind its own edge */
.bp-lift{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.bp-lift>span{display:block;transform:translate3d(0,102%,0);transition:transform .82s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.bp-lift.in>span,.in .bp-lift>span{transform:none}

/* the picture behind a hero drifts a little slower than the page.
 * Pure CSS where the browser supports a view timeline, nothing at all
 * where it does not, so there is no scroll handler anywhere. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .art-hero-full .art-hero-bg img,
    .about-hero .ah-bg img,
    .bp-ban img{animation:bpDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%;will-change:transform}
    .bpx{animation:bpBoxIn linear both;animation-timeline:view();animation-range:entry 4% entry 44%}
  }
}
@keyframes bpDrift{from{transform:scale(1.12) translate3d(0,-2.4%,0)}to{transform:scale(1.12) translate3d(0,2.4%,0)}}
@keyframes bpBoxIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}

/* a card that leans towards the pointer, by a couple of degrees at most */
.bp-tilt{transition:transform .35s var(--ease-out,cubic-bezier(.16,1,.3,1)),box-shadow .35s}
@media (hover:hover) and (pointer:fine){
  .bp-tilt:hover{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-3px)}
}

/* the rule under a section heading draws itself in */
.sec-h{position:relative}
.sec-h::after{content:"";position:absolute;left:0;bottom:-8px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--brass,rgb(var(--rb-red-solid))),transparent 78%);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .85s var(--ease-out,cubic-bezier(.16,1,.3,1)) .12s}
[data-reveal].in .sec-h::after,.sec-h.in::after{transform:scaleX(1)}

/* ---- full bleed dark bands ---------------------------------------------
   A reveal fades the whole element, and a dark band fading in over a light
   page takes its own white text with it: for about half a second the words
   composite against the page behind and are unreadable. The contrast auditor
   caught exactly that on the partners promise, sampled mid transition.
   The band itself now paints at once and only its contents rise. */
.pt-promise[data-reveal],.bca-band[data-reveal],.bca-hero[data-reveal]{opacity:1;transform:none}
.pt-promise[data-reveal] > .pt-promise-in,
.bca-band[data-reveal] > .bca-band-in{
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pt-promise[data-reveal].in > .pt-promise-in,
.bca-band[data-reveal].in > .bca-band-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  #bpScrollProg{display:none}
  [data-reveal],[data-reveal].in,[data-stagger]>*,[data-stagger].in>*{opacity:1;transform:none;filter:none;transition:none}
  .pt-promise[data-reveal] > .pt-promise-in,.bca-band[data-reveal] > .bca-band-in{
    opacity:1;transform:none;transition:none}
  .bp-lift>span{transform:none;transition:none}
  .sec-h::after{transform:scaleX(1);transition:none}
  .bp-tilt,.bp-tilt:hover{transform:none;transition:none}
}

/* --- partners ---------------------------------------------------------- */
.pt-hero{position:relative;width:100vw;max-width:100%;margin-left:calc(50% - 50vw);
  min-height:min(92dvh,900px);display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:#090909}
.pt-hero-bg{position:absolute;inset:0;z-index:0}
.pt-hero-bg img{width:100%;height:100%;object-fit:cover}
.pt-hero-mesh{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(900px 620px at 8% 0%, rgb(var(--rb-t-red) / .42) 0%, rgb(var(--rb-t-red) / 0) 62%),
    radial-gradient(880px 620px at 92% 14%, rgb(var(--rb-t-sky) / .40) 0%, rgb(var(--rb-t-sky) / 0) 64%),
    radial-gradient(760px 560px at 60% 100%, rgb(var(--rb-t-violet) / .36) 0%, rgb(var(--rb-t-violet) / 0) 62%),
    linear-gradient(180deg,rgba(9,9,9,.24) 0%,rgba(9,9,9,.78) 72%,rgba(9,9,9,.97) 100%)}
.pt-net{position:absolute;inset:0;z-index:2;opacity:.42;pointer-events:none}
.pt-net line{stroke:rgba(255,255,255,.3);stroke-width:1.2;vector-effect:non-scaling-stroke}
.pt-net circle{fill:rgba(255,255,255,.7)}
.pt-net .hot{fill:rgb(var(--rb-red-solid))}
@media (prefers-reduced-motion:no-preference){
  .pt-net circle{animation:ptPulse 5.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -420ms)}
  .pt-net line{animation:ptFade 9s ease-in-out infinite;animation-delay:calc(var(--i,0) * -540ms)}
}
@keyframes ptPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes ptFade{0%,100%{opacity:.35}50%{opacity:.9}}
.pt-hero-in{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:120px clamp(16px,4vw,44px) clamp(40px,7vh,80px)}
.pt-kick{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;padding:7px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.pt-kick i{width:7px;height:7px;border-radius:50%;background:rgb(var(--rb-red-solid));display:block}
.pt-h1{font-family:var(--serif);font-weight:500;letter-spacing:-.025em;line-height:1.04;
  font-size:clamp(2.3rem,5.9vw,4.8rem);margin:22px 0 0;max-width:19ch}
.pt-h1 em{font-style:normal;color:#FFB2B7}
.pt-sub{margin:22px 0 0;max-width:56ch;font-size:clamp(1.02rem,2vw,1.22rem);line-height:1.62;color:#E0E0E0}
.pt-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.pt-btn{display:inline-flex;align-items:center;gap:9px;height:56px;padding:0 26px;border-radius:5px;
  background:rgb(var(--rb-red-solid));color:#fff;font-weight:700;font-size:1rem;text-decoration:none;border:0;
  cursor:pointer;transition:transform .2s var(--ease),box-shadow .24s var(--ease)}
.pt-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgb(var(--rb-red-solid) / .42)}
.pt-btn.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.34)}
.pt-btn .ic{width:19px;height:19px}
.pt-scroll{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* --- figures ----------------------------------------------------------
 * One series in every chart here, so there is no legend: the caption names
 * it. Values are printed beside their own bar, which doubles as the table
 * view. Bars are the only thing wearing the series colour; every word is
 * in an ink token.
 * Light mark #D6101E and dark mark #F5424F both cleared the lightness band
 * and the 3:1 contrast check against their own surface.
 */
.pt-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:clamp(18px,3vw,34px);margin-top:34px;align-items:start}
.pt-fig{margin:0;border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:20px 22px 22px;box-shadow:var(--raise);--pt-series:214 16 30}
html[data-theme="dark"] .pt-fig{--pt-series:245 66 79}
.pt-fig figcaption{display:block;margin:0 0 16px}
.pt-fig figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:1.18rem;line-height:1.24;letter-spacing:-.012em}
.pt-fig figcaption span{display:block;margin-top:5px;font-size:.82rem;color:var(--muted);line-height:1.5}
.pt-chart{width:100%;height:auto;display:block;overflow:visible;font-family:var(--sans)}
.ptb-k{font-size:2.7px;fill:var(--fg);font-weight:600}
.ptb-v{font-size:3.2px;fill:var(--fg);font-weight:700;text-anchor:end;font-family:var(--mono)}
.ptb-track{fill:color-mix(in srgb,var(--fg) 9%,transparent)}
.ptb-bar{fill:rgb(var(--pt-series));transform-origin:41px center}
.ptc-bar{fill:rgb(var(--pt-series))}
.ptc-base{stroke:color-mix(in srgb,var(--fg) 16%,transparent);stroke-width:.3}
.ptc-x{font-size:3px;fill:var(--muted);font-family:var(--mono)}
.ptc-x2{text-anchor:end}
.pt-fig svg g:hover .ptb-bar,.pt-fig svg g:hover .ptc-bar{fill:rgb(var(--pt-series) / .82)}
@media (prefers-reduced-motion:no-preference){
  .pt-fig .ptb-bar{transform:scaleX(0);transition:transform .9s var(--ease-out,cubic-bezier(.16,1,.3,1))}
  .pt-fig.in .ptb-bar,[data-reveal].in .ptb-bar{transform:scaleX(1);transition-delay:calc(var(--i,0) * 80ms + 120ms)}
  .pt-fig .ptc-bar{transform:scaleY(0);transform-origin:50% 28.4px;transition:transform .7s var(--ease-out,cubic-bezier(.16,1,.3,1))}
  .pt-fig.in .ptc-bar,[data-reveal].in .ptc-bar{transform:scaleY(1);transition-delay:calc(var(--i,0) * 45ms + 120ms)}
}

/* the journey */
.pt-jsvg{width:100%;height:auto;display:block;margin:4px 0 14px;overflow:visible}
.ptj-line{fill:none;stroke:color-mix(in srgb,var(--fg) 20%,transparent);stroke-width:.7;stroke-linecap:round;
  stroke-dasharray:200;stroke-dashoffset:200}
.ptj-dot{fill:rgb(var(--pt-series));opacity:0}
@media (prefers-reduced-motion:no-preference){
  .pt-fig.in .ptj-line,[data-reveal].in .ptj-line{transition:stroke-dashoffset 1.5s var(--ease-out,cubic-bezier(.16,1,.3,1));stroke-dashoffset:0}
  .pt-fig.in .ptj-dot,[data-reveal].in .ptj-dot{transition:opacity .5s var(--ease) calc(var(--i,0) * 380ms + 260ms);opacity:1}
}
@media (prefers-reduced-motion:reduce){.ptj-line{stroke-dashoffset:0}.ptj-dot{opacity:1}}
.ptj-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ptj-stops li{display:grid;gap:3px;min-width:0}
.ptj-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--rb-red-ink))}
.ptj-stops b{font-size:.95rem;line-height:1.25}
.ptj-stops li>span:last-child{font-size:.8rem;color:var(--muted);line-height:1.45}
@media(max-width:520px){.ptj-stops{grid-template-columns:1fr;gap:10px}}

/* anatomy of a complaint */
.pt-anat-wrap{display:grid;grid-template-columns:118px minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:520px){.pt-anat-wrap{grid-template-columns:86px minmax(0,1fr);gap:14px}}
.pt-letter{aspect-ratio:3/4;border:1px solid var(--line);border-radius:6px;background:var(--bg);
  padding:12px 11px;display:grid;align-content:start;gap:6px;box-shadow:var(--raise)}
.pt-letter span{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,var(--fg) 13%,transparent)}
.pt-letter .pl-h{height:8px;width:62%;background:rgb(var(--pt-series))}
.pt-letter .pl-l.s{width:72%}
.pt-letter .pl-b{height:18px;border-radius:3px;background:color-mix(in srgb,var(--fg) 7%,transparent);
  border-left:2px solid rgb(var(--pt-series))}
.pt-letter .pl-sig{width:46%;margin-top:6px}
.pt-anat-list{list-style:none;margin:0;padding:0;display:grid;gap:11px;counter-reset:pa}
.pt-anat-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:11px;align-items:baseline}
.pt-anat-list li::before{counter-increment:pa;content:counter(pa);font-family:var(--mono);font-size:.7rem;
  font-weight:700;color:rgb(var(--rb-red-ink));border:1px solid color-mix(in srgb,rgb(var(--rb-red-solid)) 30%,var(--line));
  border-radius:50%;width:22px;height:22px;display:grid;place-items:center;align-self:start}
.pt-anat-list b{display:block;font-size:.93rem;line-height:1.3}
.pt-anat-list span{display:block;font-size:.82rem;color:var(--muted);line-height:1.5;grid-column:2}
@media (prefers-reduced-motion:no-preference){
  .pt-anat-list li,.ptj-stops li{opacity:0;transform:translateY(10px);
    transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .pt-fig.in .pt-anat-list li,[data-reveal].in .pt-anat-list li,
  .pt-fig.in .ptj-stops li,[data-reveal].in .ptj-stops li{opacity:1;transform:none;
    transition-delay:calc(var(--i,0) * 90ms + 200ms)}
}

/* the moving strip of what the site is */
.pt-strip{width:100vw;max-width:100%;margin-left:calc(50% - 50vw);overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.pt-strip-track{display:flex;gap:0;width:max-content;animation:ptSlide 38s linear infinite}
.pt-strip b{display:inline-flex;align-items:center;gap:12px;padding:15px clamp(18px,3vw,34px);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--muted);white-space:nowrap}
.pt-strip b::after{content:"";width:6px;height:6px;border-radius:50%;background:rgb(var(--rb-red-solid))}
@keyframes ptSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pt-strip:hover .pt-strip-track{animation-play-state:paused}

.pt-band{max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:max(16px,env(safe-area-inset-left),4vw);
  padding-right:max(16px,env(safe-area-inset-right),4vw);
  box-sizing:border-box}
@media(min-width:1100px){.pt-band{padding-left:44px;padding-right:44px}}
/* padding-top and padding-bottom, never the shorthand: the shorthand reset
   the side padding this band had just set and the words ran into the edge of
   the phone. */
.pt-sec{padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(44px,6vw,84px)}
.pt-sec.tight{padding-top:clamp(32px,4.5vw,58px);padding-bottom:clamp(32px,4.5vw,58px)}
.pt-sec + .pt-sec{padding-top:0}
/* small type on a tinted page wants the contrast-tuned ink, not the mark:
   the brand red at .68rem over the aurora wash measured 3.5:1. */
.pt-lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgb(var(--rb-red-ink));margin:0 0 14px}
.pt-h2{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(1.9rem,4.4vw,3.2rem);margin:0;max-width:20ch}
.pt-lede{margin:16px 0 0;max-width:58ch;font-size:clamp(1rem,1.7vw,1.12rem);line-height:1.68;color:var(--muted)}

/* the counted numbers */
.pt-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px}
.pt-num{background:var(--bg);padding:26px 22px 24px}
.pt-num b{display:block;font-family:var(--mono);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2rem,4.6vw,3.1rem);line-height:1}
.pt-num span{display:block;margin-top:9px;font-size:.84rem;font-weight:700}
.pt-num small{display:block;margin-top:5px;font-size:.78rem;color:var(--muted);line-height:1.5}
.pt-src{margin:14px 0 0;font-size:.78rem;color:var(--muted)}

/* alternating full-bleed panels */
.pt-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,64px);
  padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(24px,4vw,48px)}
.pt-panel.flip .pt-panel-txt{order:2}
.pt-panel h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3vw,2.2rem);
  letter-spacing:-.018em;line-height:1.14;margin:12px 0 0}
.pt-panel p{margin:14px 0 0;color:var(--muted);line-height:1.68;max-width:46ch}
.pt-shot{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(140deg,color-mix(in srgb,rgb(var(--rb-t-red)) 14%,var(--card)),var(--card) 55%,color-mix(in srgb,rgb(var(--rb-t-sky)) 16%,var(--card)));
  box-shadow:var(--raise);display:grid;place-items:center}
.pt-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pt-shot .ph{text-align:center;padding:24px;color:var(--muted);max-width:30ch}
.pt-shot .ph .ic{width:28px;height:28px;margin:0 auto 10px;color:rgb(var(--rb-red-mark))}
.pt-shot .ph b{display:block;font-size:.9rem;margin-bottom:5px;color:var(--fg)}
.pt-shot .ph span{font-size:.78rem;line-height:1.5}
@media(max-width:820px){
  .pt-panel{grid-template-columns:1fr}
  .pt-panel.flip .pt-panel-txt{order:0}
}

/* what a partner gets */
.pt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:14px;margin-top:34px}
.pt-card{border:1px solid var(--line);border-radius:16px;padding:24px 22px;background:var(--card);
  box-shadow:var(--raise);position:relative;overflow:hidden}
.pt-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,rgb(var(--rb-red-solid)),transparent 74%);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s var(--ease)}
.pt-card.in::before,[data-reveal].in .pt-card::before{transform:scaleX(1)}
.pt-card .ic{width:26px;height:26px;color:rgb(var(--rb-red-mark))}
.pt-card h4{font-family:var(--serif);font-weight:500;font-size:1.28rem;margin:14px 0 0;line-height:1.2}
.pt-card p{margin:9px 0 0;color:var(--muted);font-size:.93rem;line-height:1.62}

/* the four steps, with a rule that fills as you scroll */
.pt-steps{position:relative;margin-top:36px;display:grid;gap:0}
.pt-steps::before{content:"";position:absolute;left:22px;top:12px;bottom:12px;width:2px;background:var(--line)}
.pt-steps::after{content:"";position:absolute;left:22px;top:12px;width:2px;height:100%;
  background:linear-gradient(180deg,rgb(var(--rb-red-solid)),rgb(var(--rb-t-violet)));transform:scaleY(0);transform-origin:50% 0}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pt-steps::after{animation:ptFill linear both;animation-timeline:view();animation-range:entry 28% cover 72%}
  }
}
@keyframes ptFill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.pt-step{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:20px;padding:18px 0}
.pt-step .n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:2px solid var(--line);font-family:var(--mono);font-weight:700;font-size:1rem;
  position:relative;z-index:1}
.pt-step.on .n{border-color:rgb(var(--rb-red-solid));color:rgb(var(--rb-red-ink))}
.pt-step h4{margin:9px 0 0;font-size:1.12rem;font-weight:700;overflow-wrap:anywhere}
.pt-step p{margin:7px 0 0;color:var(--muted);line-height:1.62;max-width:52ch}

/* the promise */
.pt-promise{width:100vw;max-width:100%;margin-left:calc(50% - 50vw);background:#090909;color:#fff;
  padding:clamp(48px,8vw,96px) 0;position:relative;overflow:hidden}
.pt-promise::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 520px at 78% 8%, rgb(var(--rb-t-red) / .3) 0%, rgb(var(--rb-t-red) / 0) 62%)}
.pt-promise-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,44px)}
.pt-promise q{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,3.2vw,2.1rem);line-height:1.34;max-width:24ch;quotes:none}
.pt-promise .who{margin-top:20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:#B4B4B4}

/* the logo wall */
.pt-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:28px}
.pt-wall a,.pt-wall span{background:var(--card);min-height:104px;display:grid;place-items:center;padding:18px;
  text-decoration:none;color:var(--muted);font-size:.82rem;text-align:center;
  transition:background .2s var(--ease)}
.pt-wall a:hover{background:color-mix(in srgb,rgb(var(--rb-red-solid)) 7%,var(--card))}
.pt-wall img{max-width:100%;max-height:52px;object-fit:contain;filter:grayscale(1);opacity:.78;
  transition:filter .3s var(--ease),opacity .3s var(--ease)}
.pt-wall a:hover img{filter:none;opacity:1}
.pt-wall-empty{border:1px dashed var(--line);border-radius:14px;padding:30px;text-align:center;color:var(--muted);
  font-size:.9rem;margin-top:24px;line-height:1.6}

/* the form */
.pt-form-wrap{width:100vw;max-width:100%;margin-left:calc(50% - 50vw);
  background:linear-gradient(180deg,var(--bg),color-mix(in srgb,rgb(var(--rb-t-sky)) 8%,var(--bg)));
  border-top:1px solid var(--line);padding:clamp(48px,8vw,96px) 0}
.pt-form-in{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,44px);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,5vw,64px);align-items:start}
@media(max-width:860px){.pt-form-in{grid-template-columns:1fr}}
.pt-form{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,30px);
  box-shadow:var(--raise)}
.pt-fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.pt-f label{display:block;font-size:.76rem;font-weight:700;color:var(--muted);margin:0 0 5px}
.pt-f input,.pt-f select,.pt-f textarea{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;background:var(--bg);color:inherit;font:inherit;font-size:.93rem}
.pt-f textarea{min-height:104px;resize:vertical}
.pt-f input:focus,.pt-f select:focus,.pt-f textarea:focus{outline:2px solid rgb(var(--rb-red-solid));outline-offset:1px;border-color:transparent}
.pt-goals{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
/* .pt-f label already sets display:block and a small grey type, and it
   outranks a bare .pt-goal, which is what turned these pills into a stack of
   full width rows with the box sitting on the words. */
.pt-f .pt-goal{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;
  padding:9px 15px;font-size:.84rem;font-weight:500;color:var(--fg);cursor:pointer;background:var(--bg);
  margin:0;width:auto;line-height:1.3;transition:background .18s var(--ease),border-color .18s var(--ease)}
.pt-f .pt-goal:hover{border-color:color-mix(in srgb,rgb(var(--rb-red-solid)) 45%,var(--line))}
.pt-f .pt-goal input{width:auto;margin:0;flex:none;accent-color:rgb(var(--rb-red-solid))}
.pt-f .pt-goal.on{border-color:rgb(var(--rb-red-solid));background:color-mix(in srgb,rgb(var(--rb-red-solid)) 9%,var(--bg));font-weight:700}
.pt-consent{margin:16px 0 0;font-size:.8rem;color:var(--muted);line-height:1.6}
.pt-submit{margin-top:18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pt-msg{font-size:.88rem;color:var(--muted)}
.pt-msg.bad{color:rgb(var(--rb-red-ink));font-weight:700}
.pt-msg.good{color:#07684A;font-weight:700}
html[data-theme="dark"] .pt-msg.good{color:#7FE3BC}
.pt-done{text-align:center;padding:30px 10px}
.pt-done .ic{width:44px;height:44px;color:#0E9F6E;margin:0 auto 14px}
.pt-done h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin:0}
.pt-done p{color:var(--muted);margin:10px auto 0;max-width:40ch;line-height:1.65}
.pt-aside h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0;line-height:1.1;letter-spacing:-.02em}
.pt-aside ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.pt-aside li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:.95rem;line-height:1.6}
.pt-aside li .ic{width:20px;height:20px;color:rgb(var(--rb-red-mark));margin-top:2px}
.pt-mail{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;text-decoration:none;
  color:var(--fg);border-bottom:2px solid rgb(var(--rb-red-solid));padding-bottom:2px}
@media (prefers-reduced-motion:reduce){
  .pt-strip-track{animation:none}
  .pt-net circle,.pt-net line{animation:none}
  .pt-steps::after{transform:scaleY(1)}
  .pt-card::before{transform:scaleX(1);transition:none}
}

/* The next article slides in under the one just finished. It is a whole
   article, not a card: same hero, same summary, same type. */
.feed-rail{margin-top:10px}
.feed-sentinel{height:1px}
.feed-div{display:flex;align-items:center;gap:14px;max-width:740px;margin:34px auto 0;padding:0 20px}
.feed-div::before,.feed-div::after{content:"";flex:1;height:1px;background:var(--line)}
.feed-div span{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.feed-why{display:block;max-width:740px;margin:12px auto 0;padding:0 20px;font-size:.84rem;color:var(--muted)}
.feed-why b{color:var(--fg);font-weight:600}
.feed-load{display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px 20px 10px}
.feed-spin{width:26px;height:26px;border:2.5px solid var(--line);border-top-color:rgb(var(--rb-red-solid));
  border-radius:50%;animation:feedSpin .8s linear infinite}
@keyframes feedSpin{to{transform:rotate(360deg)}}
.feed-load p{margin:0;font-size:.88rem;color:var(--muted)}
.feed-more{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  max-width:560px;margin:40px auto 0;padding:30px 20px 10px;border-top:1px solid var(--line)}
.feed-more h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin:0}
.feed-more p{margin:0;font-size:.92rem;line-height:1.6;color:var(--muted)}
.feed-btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border:0;
  background:rgb(var(--rb-red-solid));color:#fff;font:inherit;font-weight:700;font-size:1rem;
  cursor:pointer;transition:transform .12s var(--ease),filter .18s}
.feed-btn:hover{filter:brightness(1.07)}
.feed-btn:active{transform:scale(.98)}
.feed-btn .ic{width:18px;height:18px}
.feed-quiet{background:none;border:1.5px solid var(--line);color:var(--fg);height:46px;padding:0 20px;
  font:inherit;font-weight:600;cursor:pointer}
.feed-end{max-width:560px;margin:36px auto 0;padding:26px 20px 0;border-top:1px solid var(--line);
  text-align:center;font-size:.92rem;color:var(--muted)}
.feed-item{animation:feedIn .45s var(--ease) both}
@keyframes feedIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .feed-item{animation:none}
  .feed-spin{animation:none;border-top-color:var(--line)}
}