/* metric-fallback */
@font-face{font-family:"Sentient Fallback";src:local("Georgia");size-adjust:109%}


/* =========================================================================
   SpinPanda — MIDNIGHT NEON premium casino theme (namespace: bsk-)
   Tokens, reset, frame (header/footer), container. Parts carry own inline CSS;
   this sheet defines the design system + all classes not owned by parts.
   ========================================================================= */

@property --bsk-fxang { syntax:'<angle>'; inherits:false; initial-value:120deg }
@property --bsk-ba    { syntax:'<angle>'; inherits:false; initial-value:0deg }

:root {
  /* --- brand seeds (do not drift) --- */
  --bsk-brand:#323c92;          /* dominant indigo seed */
  --bsk-brand-deep:#101365;     /* frame */
  --bsk-mint:#9cd1a7;           /* CTA */
  --bsk-tan-seed:#b8947e;       /* secondary */

  /* --- surfaces (midnight tonal ladder) --- */
  --bsk-bg:#080a1f;
  --bsk-surface:#0f1330;
  --bsk-surface-2:#151a3d;
  --bsk-surface-3:#1d2352;
  --bsk-hairline:color-mix(in srgb,#c8d1ff 13%,transparent);
  --bsk-hairline-2:color-mix(in srgb,#c8d1ff 22%,transparent);

  /* --- ink --- */
  --bsk-ink:#eef1ff;
  --bsk-ink-2:#c2c9ee;
  --bsk-ink-3:#9aa2d3;

  /* --- accents --- */
  --bsk-accent:#7c8bff;                 /* bright indigo — links, kickers, active, icons */
  --bsk-accent-soft:#323c92;            /* deep fill under light text */
  --bsk-accent-2:#d4a892;               /* tan, secondary badges */
  --bsk-glow:color-mix(in srgb,var(--bsk-accent) 55%,transparent);
  --bsk-mint-hi:#bce7c4;

  /* --- CTA roles --- */
  --bsk-cta:#c7ccff;                    /* CTA fill; dark ink on light indigo → WCAG AA */
  --bsk-cta-bg:#9cd1a7;
  --bsk-cta-ink:#082617;

  /* --- frame roles (drawer/footer defaults consumed by parts) --- */
  --bsk-dark:#101365;
  --bsk-dark-ink:#eef1ff;
  --bsk-tp-star:#37d39a;

  /* --- geometry --- */
  --bsk-wrap:1216px;
  --bsk-pad:clamp(18px,4vw,40px);
  --bsk-r:14px;      /* overlays/tooltips soft */
  --bsk-r-md:6px;    /* buttons */
  --bsk-r-sm:4px;
  --bsk-ease:cubic-bezier(.16,1,.3,1);
  --bsk-dur:.2s;

  /* --- type scale (ratio 1.25, base ~17px) --- */
  --bsk-fs:1.0625rem;
  --bsk-step--1:.82rem;
  --bsk-step-1:1.16rem;
  --bsk-step-2:1.36rem;
  --bsk-step-3:1.62rem;

  color-scheme:dark;
  scrollbar-color:color-mix(in srgb,var(--bsk-accent) 42%,transparent) transparent;
  scrollbar-width:thin;
}

*,*::before,*::after { box-sizing:border-box }

html { -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body.bsk-body {
  margin:0;
  background:var(--bsk-bg);
  color:var(--bsk-ink);
  font-family:'Switzer','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:var(--bsk-fs);
  line-height:1.65;
  font-feature-settings:'kern','liga';
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  background-image:
    radial-gradient(ellipse 60% 45% at 14% 0%,color-mix(in oklab,var(--bsk-brand) 34%,transparent),transparent 60%),
    radial-gradient(ellipse 55% 50% at 92% 8%,color-mix(in oklab,var(--bsk-mint) 12%,transparent),transparent 58%);
  background-repeat:no-repeat;
}

h1,h2,h3,h4 {
  font-family:'Sentient','Sentient Fallback','Georgia',serif;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--bsk-ink);
  text-wrap:balance;
  margin:0;
}
p,ul,ol,dl,figure,dd { margin:0 }

a { color:var(--bsk-accent); text-underline-offset:2px }
button { font:inherit }
img,svg,video { max-width:100%; height:auto }
::selection { background:color-mix(in srgb,var(--bsk-accent) 42%,transparent); color:#fff }
:focus-visible { outline:2px solid var(--bsk-accent); outline-offset:2px; border-radius:2px }
::-webkit-scrollbar { width:11px; height:11px }
::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--bsk-accent) 40%,transparent); border-radius:20px }
::-webkit-scrollbar-track { background:transparent }
input,select,textarea { accent-color:var(--bsk-accent) }

/* --- container: wrap + main hold the width --- */
.bsk-wrap {
  width:100%;
  max-width:var(--bsk-wrap);
  margin-inline:auto;
  padding-inline:var(--bsk-pad);
}
.bsk-main {
  max-width:var(--bsk-wrap);
  margin-inline:auto;
  padding-inline:var(--bsk-pad);
  padding-block:clamp(20px,3vw,38px) clamp(30px,5vw,60px);
}

/* skip link */
.bsk-skip {
  position:absolute; left:-999px; top:0; z-index:400;
  background:var(--bsk-mint); color:var(--bsk-cta-ink);
  padding:12px 18px; border-radius:0 0 var(--bsk-r-md) 0; font-weight:700; text-decoration:none;
}
.bsk-skip:focus { left:0 }

/* =========================== HEADER / FRAME ============================= */
.bsk-head { position:sticky; top:0; z-index:100 }
.bsk-head {
  background:linear-gradient(180deg,var(--bsk-brand-deep),color-mix(in srgb,var(--bsk-brand-deep) 84%,#000));
  color:var(--bsk-dark-ink);
  border-bottom:1px solid var(--bsk-hairline-2);
}
.bsk-head .bsk-nav__list a { color:var(--bsk-dark-ink) }
.bsk-head .bsk-nav__list a[aria-current="page"] { color:var(--bsk-accent) }
.bsk-head .bsk-burger { color:var(--bsk-dark-ink); border-color:var(--bsk-hairline-2); border-radius:var(--bsk-r-sm); transition:border-color var(--bsk-dur) var(--bsk-ease), background var(--bsk-dur) var(--bsk-ease)}
.bsk-head .bsk-burger:hover { border-color:var(--bsk-accent); background:color-mix(in srgb,var(--bsk-accent) 16%,transparent) }
.bsk-logo { line-height:0 }
.bsk-logo img { display:block; height:auto; width:auto }

/* =============================== HERO ================================== */
.bsk-hero {
  position:relative; isolation:isolate; overflow-x:clip;
  padding-block:clamp(26px,4.4vw,54px);
  border-bottom:1px solid var(--bsk-hairline);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--bsk-brand) 9%,transparent),transparent 55%);
}
/* diagonal accent zone behind media third + neon halo (static, z-index:-1) */
.bsk-hero::before {
  content:""; position:absolute; inset:-6% 0 -6% 0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 60% at 78% 34%,color-mix(in srgb,var(--bsk-accent) 30%,transparent),transparent 70%),
    radial-gradient(40% 55% at 88% 76%,color-mix(in srgb,var(--bsk-mint) 20%,transparent),transparent 72%);
}
.bsk-hero::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-block:0; right:0; width:38%;
  background:linear-gradient(150deg,color-mix(in srgb,var(--bsk-brand) 34%,transparent),transparent 62%);
  clip-path:polygon(24% 0,100% 0,100% 100%,0 100%);
  opacity:.7;
}
.bsk-hero__kicker {
  display:inline-block;
  position:relative;
  text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; font-weight:700;
  color:var(--bsk-accent);
  font-family:'Switzer',system-ui,sans-serif;
}
.bsk-hero__kicker::after {
  content:""; display:block; height:2px; margin-top:.5em; border-radius:2px;
  background:linear-gradient(90deg,var(--bsk-accent),color-mix(in srgb,var(--bsk-mint) 80%,transparent),transparent);
  background-size:220% 100%;
}
@media (prefers-reduced-motion:no-preference){
  .bsk-hero__kicker::after { animation:bsk-eudpe 5s linear infinite }
  @keyframes bsk-eudpe { to { background-position:220% 0 } }
}
.bsk-hero__h1 { font-size:clamp(2rem,4vw,3rem); letter-spacing:-.02em }
.bsk-hero__lead { color:var(--bsk-ink-2) }
/* facts as a lifted mini-board */
.bsk-hero__fact {
  background:color-mix(in srgb,var(--bsk-surface-2) 88%,transparent)!important;
  border:1px solid var(--bsk-hairline)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent);
}
.bsk-hero__tile-k { color:var(--bsk-ink-3) }
.bsk-hero__tile-v { color:var(--bsk-ink); font-variant-numeric:tabular-nums }
/* hero media — square, lifted, neon halo, sharp per design language */
.bsk-hero__media img {
  border-radius:var(--bsk-r)!important;
  box-shadow:0 24px 60px -18px color-mix(in srgb,#000 80%,transparent),
             0 0 0 1px var(--bsk-hairline),
             0 10px 40px -10px var(--bsk-glow);
}
/* hero entrance */
@media (prefers-reduced-motion:no-preference){
  html.bsk-js .bsk-hero__content > * { opacity:0; animation:bsk-kacjx .6s var(--bsk-ease) forwards }
  html.bsk-js .bsk-hero__kicker { animation-delay:.05s }
  html.bsk-js .bsk-hero__h1 { animation-delay:.14s }
  html.bsk-js .bsk-hero__lead { animation-delay:.22s }
  html.bsk-js .bsk-hero__facts { animation-delay:.3s }
  html.bsk-js .bsk-hero__cta { animation-delay:.38s }
  @keyframes bsk-kacjx { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }
}

/* ============================ PAGETITLE ================================ */
.bsk-pagetitle { position:relative; isolation:isolate; overflow-x:clip }
.bsk-pagetitle::before {
  content:""; position:absolute; inset:0 0 auto 0; height:120%; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 90% at 20% 0,color-mix(in srgb,var(--bsk-accent) 16%,transparent),transparent 70%);
}
.bsk-pagetitle__lead { color:var(--bsk-ink-2) }

/* ============================== BUTTONS / CTA ========================== */
a.bsk-cta {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:'Switzer',system-ui,sans-serif; font-weight:700; font-size:.9rem;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  min-height:48px; padding:14px 26px;
  border-radius:var(--bsk-r-md);
  border:1px solid color-mix(in srgb,var(--bsk-cta-ink) 22%,transparent);
  background:var(--bsk-cta-bg); color:var(--bsk-cta-ink);
  border-bottom:3px solid color-mix(in srgb,var(--bsk-cta-ink) 40%,var(--bsk-cta-bg));
  box-shadow:0 8px 26px -12px color-mix(in srgb,var(--bsk-mint) 70%,transparent);
  transition:transform var(--bsk-dur) var(--bsk-ease), background var(--bsk-dur) var(--bsk-ease), border-color var(--bsk-dur) var(--bsk-ease);
}
a.bsk-cta:hover { transform:translateY(-2px) scale(1.02); background:color-mix(in srgb,var(--bsk-cta-bg) 88%,#fff); border-bottom-color:color-mix(in srgb,var(--bsk-cta-ink) 60%,var(--bsk-cta-bg)) }
a.bsk-cta:active { transform:translateY(1px) scale(.99) }
/* sheen pass on hover */
a.bsk-cta::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,color-mix(in srgb,#fff 42%,transparent) 50%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .6s var(--bsk-ease);
}
a.bsk-cta:hover::after { transform:translateX(120%) }
.bsk-cta--ghost { background:transparent!important; color:var(--bsk-accent)!important; border:1px solid var(--bsk-accent)!important; box-shadow:none!important }

/* CTA centring in body (defence at any depth) */
.bsk-ctarow { display:flex; justify-content:center; margin:1.6em 0 }
.bsk-main>.bsk-cta,
.bsk-main :not(.bsk-hero__cta):not(.bsk-nav__cta)>.bsk-cta { display:flex; width:fit-content; margin:1.4em auto }
@media (prefers-reduced-motion:reduce){
  a.bsk-cta::after { display:none }
  html.bsk-js .bsk-hero__content > * { opacity:1; animation:none }
}

/* =============================== PROSE ================================= */
/* .bsk-main also holds the width; .bsk-prose adds typography only (no max-width) */
.bsk-prose { counter-reset:bsksec }
.bsk-main p { margin-top:1em; color:var(--bsk-ink-2) }
.bsk-main h2 { margin-top:1.7em }
.bsk-main h3 { margin-top:1.3em }
.bsk-main > :first-child { margin-top:0 }

.bsk-prose p { color:var(--bsk-ink-2); text-wrap:pretty; overflow-wrap:anywhere }
.bsk-prose h2 {
  position:relative;
  font-size:var(--bsk-step-3);
  scroll-margin-top:84px;
  padding-top:.5em;
  counter-increment:bsksec;
}
/* inspection-protocol numbered heading tag */
.bsk-prose h2::before {
  content:counter(bsksec,decimal-leading-zero);
  display:inline-block; margin-right:.7em;
  font-family:'Switzer',system-ui,sans-serif; font-weight:700; font-size:.62em;
  letter-spacing:.04em; vertical-align:.18em;
  color:var(--bsk-accent);
  padding:.28em .55em; border-radius:var(--bsk-r-sm);
  background:color-mix(in srgb,var(--bsk-accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--bsk-accent) 34%,transparent);
  font-variant-numeric:tabular-nums;
}
.bsk-prose h2::after {
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--bsk-hairline-2),transparent);
}
.bsk-prose h3 { font-size:var(--bsk-step-1); scroll-margin-top:84px; color:var(--bsk-ink) }
.bsk-prose h4 { font-size:var(--bsk-step-1); margin-top:1.2em }

/* links in prose — animated underline that grows from beneath */
.bsk-prose a:not(.bsk-cta) {
  color:var(--bsk-accent); text-decoration:none; font-weight:600;
  background-image:linear-gradient(var(--bsk-accent),var(--bsk-accent));
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--bsk-dur) var(--bsk-ease), color var(--bsk-dur) var(--bsk-ease);
  padding-bottom:1px;
}
.bsk-prose a:not(.bsk-cta):hover { background-size:100% 2px; color:var(--bsk-mint-hi) }
.bsk-prose strong { color:var(--bsk-ink); font-weight:700 }
.bsk-prose em { color:var(--bsk-ink) }

/* lists — dot marker, first-word emphasis reads as a mini-label */
.bsk-prose ul,.bsk-prose ol { margin:1em 0; padding-left:1.5em; color:var(--bsk-ink-2) }
.bsk-prose ul { list-style:none; padding-left:0 }
.bsk-prose ul > li {
  position:relative; padding-left:1.6em; margin:.55em 0; line-height:1.6;
}
.bsk-prose ul > li::before {
  content:""; position:absolute; left:.25em; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:var(--bsk-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bsk-accent) 22%,transparent);
}
.bsk-prose ol { counter-reset:bsknum; list-style:none; padding-left:0 }
.bsk-prose ol > li {
  position:relative; padding-left:2.3em; margin:.6em 0; line-height:1.6;
  counter-increment:bsknum;
}
.bsk-prose ol > li::before {
  content:counter(bsknum); position:absolute; left:0; top:.05em;
  width:1.7em; text-align:center;
  font-family:'Switzer',system-ui,sans-serif; font-weight:700; font-size:.86em;
  color:var(--bsk-accent); font-variant-numeric:tabular-nums;
}
.bsk-prose li strong:first-child {
  color:var(--bsk-ink); font-weight:700; letter-spacing:.01em;
}
.bsk-prose li > a { font-weight:600 }

/* blockquote / pull-quote with accent bar */
.bsk-prose blockquote {
  margin:1.5em 0; padding:.8em 1.2em;
  border-left:4px solid var(--bsk-accent);
  background:color-mix(in srgb,var(--bsk-accent) 8%,transparent);
  border-radius:0 var(--bsk-r-md) var(--bsk-r-md) 0;
  color:var(--bsk-ink); font-style:italic;
}
.bsk-prose blockquote p { color:var(--bsk-ink) }
.bsk-prose hr {
  border:0; height:1px; margin:2em 0;
  background:linear-gradient(90deg,transparent,var(--bsk-hairline-2),transparent);
}
.bsk-prose code {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:var(--bsk-surface-2); padding:.12em .4em; border-radius:var(--bsk-r-sm);
  color:var(--bsk-mint-hi); overflow-wrap:anywhere;
}
/* content image figure (parts emit .bsk-cimg with inline sizing; harmonise) */
.bsk-cimg,.bsk-figure { margin:1.7em auto; width:min(72%,760px); max-width:100% }
.bsk-cimg img,.bsk-figure img,.bsk-img { width:100%; height:auto; display:block; border-radius:var(--bsk-r) }
.bsk-cimg figcaption,.bsk-figure figcaption { text-align:center; font-size:.85em; color:var(--bsk-ink-3); margin-top:.55em }
@media (max-width:640px){ .bsk-cimg,.bsk-figure { width:100% } }

/* =============================== TABLES ================================ */
.bsk-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.6em 0; border-radius:var(--bsk-r-md) }
.bsk-prose table,
.bsk-doc table,
table:not(.bsk-hero__facts):not(.bsk-stats) {
  width:100%; border-collapse:collapse; margin:1.6em 0;
  font-size:.95rem; font-variant-numeric:tabular-nums lining-nums;
  background:var(--bsk-surface); border:1px solid var(--bsk-hairline);
  border-radius:var(--bsk-r-md); overflow:hidden;
}
.bsk-tablewrap table { margin:0 }
.bsk-prose caption,.bsk-doc caption { caption-side:top; text-align:left; font-size:.85rem; color:var(--bsk-ink-3); padding:0 0 .6em }
.bsk-prose thead th,.bsk-doc thead th,table:not(.bsk-hero__facts) thead th {
  background:var(--bsk-brand-deep); color:#eef1ff;
  font-family:'Switzer',system-ui,sans-serif; font-weight:700;
  text-align:left; letter-spacing:.02em; font-size:.82rem; text-transform:uppercase;
  padding:12px 15px;
}
.bsk-prose th,.bsk-prose td,.bsk-doc th,.bsk-doc td,table:not(.bsk-hero__facts) td,table:not(.bsk-hero__facts) th {
  padding:11px 15px; text-align:left; border-bottom:1px solid var(--bsk-hairline);
  color:var(--bsk-ink-2); vertical-align:top;
}
.bsk-prose tbody tr:nth-child(even),.bsk-doc tbody tr:nth-child(even) { background:color-mix(in srgb,var(--bsk-surface-2) 55%,transparent) }
.bsk-prose tbody tr:hover,.bsk-doc tbody tr:hover { background:color-mix(in srgb,var(--bsk-accent) 9%,transparent) }
.bsk-prose tbody td:first-child,.bsk-doc tbody td:first-child { color:var(--bsk-ink); font-weight:600 }
.bsk-prose tbody tr:last-child td,.bsk-doc tbody tr:last-child td { border-bottom:0 }
.bsk-prose td[data-total],.bsk-prose tr.bsk-total td { border-top:2px solid var(--bsk-accent); color:var(--bsk-ink); font-weight:700 }

/* ============================== CALLOUT ================================ */
.bsk-callout {
  position:relative; margin:1.8em 0; padding:20px 24px;
  border-radius:var(--bsk-r-md);
  color:var(--bsk-ink);
  background:
    linear-gradient(var(--bsk-surface),var(--bsk-surface)) padding-box,
    linear-gradient(135deg,var(--bsk-accent),color-mix(in srgb,var(--bsk-mint) 60%,transparent)) border-box;
  border:1.5px solid transparent;
  box-shadow:0 14px 40px -22px color-mix(in srgb,var(--bsk-accent) 80%,transparent);
}
.bsk-callout > :first-child { margin-top:0 }
.bsk-callout p { color:var(--bsk-ink-2) }
.bsk-callout strong { color:var(--bsk-ink) }
.bsk-callout__title,.bsk-callout > h3,.bsk-callout > h4 {
  margin:0 0 .5em; font-size:var(--bsk-step-1); color:var(--bsk-ink);
}
.bsk-callout__num,.bsk-callout .bsk-kpi { color:var(--bsk-mint-hi); font-weight:800; font-variant-numeric:tabular-nums }
/* single accent-coloured KPI on the page */
.bsk-prose .bsk-kpi,.bsk-prose .bsk-amount { color:var(--bsk-mint-hi); font-weight:800; font-variant-numeric:tabular-nums }

/* badges */
.bsk-badge {
  display:inline-flex; align-items:center; gap:.35em;
  padding:.22em .7em; border-radius:999px; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  background:color-mix(in srgb,var(--bsk-accent-2) 20%,transparent);
  color:var(--bsk-accent-2); border:1px solid color-mix(in srgb,var(--bsk-accent-2) 45%,transparent);
}
.bsk-badge--hot { background:color-mix(in srgb,var(--bsk-mint) 18%,transparent); color:var(--bsk-mint-hi); border-color:color-mix(in srgb,var(--bsk-mint) 45%,transparent) }

/* ====================== DOC / AUTHOR PAGES ============================= */
/* legal & author copy spans the full container width (main holds it) */
.bsk-doc { max-width:none }
.bsk-doc p { margin-top:1em; color:var(--bsk-ink-2); max-width:none }
.bsk-doc h2 { margin-top:1.7em; font-size:var(--bsk-step-3) }
.bsk-doc h3 { margin-top:1.3em; font-size:var(--bsk-step-1) }
.bsk-doc ul,.bsk-doc ol { margin:1em 0; padding-left:1.4em; color:var(--bsk-ink-2) }
.bsk-doc a { color:var(--bsk-accent) }

.bsk-authorpage { max-width:none }
.bsk-authorpage p { max-width:none; margin-top:1em; color:var(--bsk-ink-2) }
.bsk-authorpage__photo {
  width:220px; max-width:44%; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--bsk-r); float:left; margin:6px 26px 14px 0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bsk-accent) 40%,transparent),0 18px 44px -20px #000;
}
.bsk-prose img.bsk-authorpage__photo { width:220px; height:auto }
.bsk-authorpage__role {
  display:inline-block; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem;
  font-weight:700; color:var(--bsk-accent);
  padding:.28em .8em; border-radius:999px;
  background:color-mix(in srgb,var(--bsk-accent) 14%,transparent);
}
@media (max-width:640px){
  .bsk-authorpage__photo { float:none; display:block; margin:0 0 16px; width:180px; max-width:60% }
}

/* ================= PART HARMONISATION (dark theme) ==================== */
/* reviews: keep avatar/initial readable on bright accent */
.bsk-rv__avatar { background:var(--bsk-accent-soft)!important; color:#fff!important }
.bsk-rv__sq { background:color-mix(in srgb,var(--bsk-ink) 18%,transparent) }
.bsk-rv__card { box-shadow:none }
.bsk-rv__card:hover { box-shadow:0 16px 40px -22px var(--bsk-glow)!important }
/* slots: ghost surface + concentric hover */
.bsk-slots__h { color:var(--bsk-ink) }
.bsk-slot { border:1px solid var(--bsk-hairline) }
.bsk-slot:hover { box-shadow:0 14px 34px -18px var(--bsk-glow) }
/* toc / faq / authorcard already read via tokens; nudge counters glow */
.bsk-toc { box-shadow:0 10px 30px -24px #000 }

/* ============================ COOKIE BANNER =========================== */
.bsk-cookie {
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:color-mix(in srgb,var(--bsk-brand-deep) 92%,#000);
  border-top:1px solid var(--bsk-hairline-2);
  color:var(--bsk-ink);
  padding-block:14px;
  box-shadow:0 -14px 40px -22px #000;
}
@supports (backdrop-filter:blur(6px)){
  .bsk-cookie { background:color-mix(in srgb,var(--bsk-brand-deep) 80%,transparent); backdrop-filter:blur(8px) }
}
.bsk-cookie__inner { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.bsk-cookie__txt { flex:1 1 320px; margin:0; font-size:.86rem; color:var(--bsk-ink-2); line-height:1.5 }
.bsk-cookie__btns { display:flex; gap:10px; flex-wrap:wrap }
.bsk-cookie__btn {
  border:1px solid var(--bsk-hairline-2); background:transparent; color:var(--bsk-ink);
  padding:11px 18px; border-radius:var(--bsk-r-md); cursor:pointer; font-weight:700; font-size:.84rem;
  min-height:44px;
  transition:transform var(--bsk-dur) var(--bsk-ease), background var(--bsk-dur) var(--bsk-ease), border-color var(--bsk-dur) var(--bsk-ease);
}
.bsk-cookie__btn:hover { transform:translateY(-1px); border-color:var(--bsk-accent) }
.bsk-cookie__btn--ok {
  background:var(--bsk-cta-bg); color:var(--bsk-cta-ink);
  border-color:var(--bsk-cta-bg);
  border-bottom:3px solid color-mix(in srgb,var(--bsk-cta-ink) 40%,var(--bsk-cta-bg));
}
.bsk-cookie__btn--ok:hover { background:color-mix(in srgb,var(--bsk-cta-bg) 88%,#fff) }

/* 404 helper */
.bsk-404__code { font-size:clamp(3rem,10vw,5rem); font-weight:800; color:var(--bsk-accent); font-family:'Sentient','Sentient Fallback',serif; line-height:1 }

/* ===================== SCROLL-DRIVEN REVEAL (progressive) ============= */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html:not(.bsk-js) [data-bsk-reveal]{
      animation:bsk-vkpbq linear both; animation-timeline:view(); animation-range:entry 0% cover 26%;
    }
    @keyframes bsk-vkpbq { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:none } }
  }
}

/* signature spin-border on the header CTA hover accent (progressive) */
@supports (background-clip:border-box){
  @media (prefers-reduced-motion:no-preference){
    a.bsk-cta:focus-visible {
      background:
        linear-gradient(var(--bsk-cta-bg),var(--bsk-cta-bg)) padding-box,
        conic-gradient(from var(--bsk-ba),var(--bsk-accent),transparent 90deg,var(--bsk-mint) 180deg,transparent 270deg,var(--bsk-accent) 360deg) border-box;
      border:2px solid transparent;
      animation:bsk-dtjrj 4s linear infinite;
    }
    @keyframes bsk-dtjrj { to { --bsk-ba:360deg } }
  }
}

/* =============================== RESPONSIVE ============================ */
@media (max-width:900px){
  .bsk-prose h2 { scroll-margin-top:70px }
}
@media (max-width:640px){
  :root { --bsk-fs:1rem }
  body.bsk-body { line-height:1.6 }
  .bsk-hero__h1 { font-size:clamp(1.7rem,7vw,2.2rem) }
  .bsk-prose h2::before { display:inline-block; margin-right:.5em }
  .bsk-main { padding-block:18px 40px }
  .bsk-callout { padding:16px 18px }
}

/* =============================== MOTION OFF ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
  .bsk-hero__kicker::after { animation:none; background-position:0 0 }
}
html,body{overflow-x:hidden}

/* container-guarantee */
.bsk-prose{max-width:var(--bsk-wrap,1200px);margin-inline:auto;padding-inline:clamp(16px,4vw,32px);box-sizing:border-box}
.bsk-main .bsk-prose,.bsk-main>.bsk-wrap{max-width:none;padding-inline:0;margin-inline:0}

/* premium-motion */
@media (prefers-reduced-motion: no-preference){
.bsk-slot,.bsk-pc__col,.bsk-rv,[class*="bsk-"][class*="card"]{transition:transform .2s cubic-bezier(.4,.85,.25,1)}
.bsk-slot:hover,.bsk-pc__col:hover,.bsk-rv:hover,[class*="bsk-"][class*="card"]:hover{transform:translateY(-6px) rotate(.6deg)}
.bsk-cta{transition:transform .16s cubic-bezier(.4,.85,.25,1)}
.bsk-cta:hover{transform:translateY(-3px) scale(1.04)}
.bsk-cta:active{transform:translateY(0) scale(.99)}
.bsk-prose a:not([class]){position:relative;text-decoration:none}
.bsk-prose a:not([class])::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;opacity:.6;transform:scaleX(0);transform-origin:center;transition:transform .22s cubic-bezier(.4,.85,.25,1)}
.bsk-prose a:not([class]):hover::after{transform:scaleX(1)}
.bsk-hero figure,.bsk-hero picture{animation:bsk-kmxff 9s cubic-bezier(.4,.85,.25,1) infinite}
@keyframes bsk-kmxff{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@supports (animation-timeline:view()){
.bsk-prose>*,.bsk-toc,.bsk-pc,.bsk-proscons,.bsk-slots,.bsk-reviews,.bsk-faq,.bsk-authorcard,.bsk-author,.bsk-disc,.bsk-byline{animation:bsk-dfdvc linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
@keyframes bsk-dfdvc{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
}
}

/* premium-polish */
:root{scrollbar-color:color-mix(in srgb,var(--bsk-accent,#c9a227) 40%,transparent) transparent;scrollbar-width:thin}
::selection{background:color-mix(in srgb,var(--bsk-accent,#c9a227) 30%,transparent);color:var(--bsk-ink,#fff)}
:focus-visible{outline:2px solid var(--bsk-accent,#c9a227);outline-offset:2px;border-radius:inherit}
@media (prefers-reduced-motion:no-preference){a:focus-visible,button:focus-visible,.bsk-cta:focus-visible,[class*="bsk-"][class*="btn"]:focus-visible{transition:outline-offset .15s ease, outline-color .15s ease;outline-offset:5px}}
html::before{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0.032;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch' seed='588'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)'/%3E%3C/svg%3E");background-size:200px 200px}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){html::after{content:"";position:fixed;top:0;left:0;width:100%;height:4px;z-index:9999;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:color-mix(in srgb,var(--bsk-accent,#c9a227) 88%,transparent);animation:bsk-ewgaj auto linear;animation-timeline:scroll(root block)}
@keyframes bsk-ewgaj{to{transform:scaleX(1)}}}}

/* kf-uniq */

/* related overflow guard 2026 */
.bsk-related{max-width:100%;box-sizing:border-box}
.bsk-related a{overflow-wrap:anywhere;max-width:100%}