/* ============ 1 RESET ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:#050C0A}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img,picture,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
[hidden]{display:none!important}

/* ============ 2 TOKENS ============ */
:root{
  --xb-ink:#0A1F1A;
  --xb-panel:#16332B;
  --xb-signal:#35F2C0;
  --xb-mist:#A8F0DC;
  --xb-red:#D9503F;
  --xb-gold:#E4B34A;
  --xb-stone:#66756F;
  --xb-paper:#F3F0E7;
  --xb-void:#050C0A;
  --xb-link:#59C7D8;
  --xb-line:rgba(102,117,111,.38);
  --xb-line-soft:rgba(102,117,111,.22);
  --xb-header-h:78px;
  --xb-header-h-sm:60px;
  --xb-gutter:clamp(16px,3vw,28px);
  --xb-shell:1440px;
  --xb-radius:2px;
  --xb-font-display:"Barlow Condensed","Oswald","Arial Narrow","Helvetica Neue",system-ui,sans-serif;
  --xb-font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --xb-font-mono:ui-monospace,"Roboto Mono",SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --xb-ease:cubic-bezier(.22,.61,.36,1);
}

/* ============ 3 BASE TYPOGRAPHY ============ */
html{scroll-padding-top:calc(var(--xb-header-h) + 20px)}
body{
  min-height:100vh;
  background-color:var(--xb-ink);
  background-image:
    radial-gradient(1100px 520px at 88% -12%, rgba(53,242,192,.08), transparent 62%),
    radial-gradient(900px 480px at -12% 34%, rgba(217,80,63,.06), transparent 60%);
  background-repeat:no-repeat;
  color:var(--xb-paper);
  font-family:var(--xb-font-body);
  font-size:17px;
  line-height:1.8;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--xb-font-display);font-weight:700;line-height:1.08;letter-spacing:-.01em;text-transform:uppercase;color:var(--xb-paper)}
h1{font-size:clamp(32px,4.4vw,44px)}
h2{font-size:clamp(24px,2.6vw,30px)}
h3{font-size:22px}
h4{font-size:18px}
p a,li a{color:var(--xb-link)}
p a:hover,li a:hover{color:var(--xb-signal)}
strong{font-weight:700}
::selection{background:var(--xb-signal);color:var(--xb-void)}
:focus-visible{outline:2px solid var(--xb-signal);outline-offset:3px;border-radius:2px}

#main-content{padding-top:var(--xb-header-h);scroll-margin-top:var(--xb-header-h)}
.xb-main--flush{padding-top:0}

/* ============ 4 LAYOUT HELPERS ============ */
.xb-shell{width:min(var(--xb-shell),100% - var(--xb-gutter)*2);margin-inline:auto}
.xb-prose{max-width:68ch}
.xb-prose p{margin-bottom:1.1em}
.xb-prose ul,.xb-prose ol{list-style:disc;padding-left:1.35em;margin-bottom:1.1em}
.xb-prose ol{list-style:decimal}
.xb-prose li{margin-bottom:.4em}
.xb-prose h2{margin:1.6em 0 .5em}
.xb-prose h3{margin:1.4em 0 .4em}
.xb-prose strong{color:var(--xb-mist)}
.xb-prose blockquote{border-left:2px solid var(--xb-signal);padding-left:18px;color:var(--xb-mist);margin-bottom:1.1em}
.xb-section{margin-block:clamp(40px,6vw,88px)}
.xb-section__title{margin-bottom:18px}
.xb-label{display:inline-flex;align-items:center;gap:10px;font-family:var(--xb-font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--xb-mist)}
.xb-label::before{content:"";display:block;width:20px;height:2px;background:var(--xb-signal)}
.xb-rule{height:1px;border:0;background:var(--xb-line);margin:clamp(28px,4vw,52px) 0}
.xb-num{font-family:var(--xb-font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.xb-grid{display:grid;gap:clamp(20px,3vw,40px)}
.xb-grid--5-3{grid-template-columns:5fr 3fr}
.xb-grid--7-3{grid-template-columns:7fr 3fr}
.xb-grid--auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ============ 5 SKIP LINK ============ */
.xb-skip{position:absolute;left:14px;top:-70px;z-index:90;background:var(--xb-signal);color:var(--xb-void);font-size:14px;font-weight:700;padding:10px 16px;border-radius:var(--xb-radius);transition:top .2s var(--xb-ease)}
.xb-skip:focus{top:14px;color:var(--xb-void)}

/* ============ 6 HEADER ============ */
.xb-header{position:fixed;inset:0 0 auto 0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .28s var(--xb-ease),border-color .28s var(--xb-ease),backdrop-filter .28s var(--xb-ease)}
.xb-header[data-scrolled]{background:rgba(22,51,43,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--xb-line)}
.xb-header__inner{width:min(var(--xb-shell),100% - var(--xb-gutter)*2);margin-inline:auto;display:flex;align-items:center;gap:clamp(14px,2vw,34px);min-height:var(--xb-header-h);transition:min-height .28s var(--xb-ease)}
.xb-header[data-scrolled] .xb-header__inner{min-height:var(--xb-header-h-sm)}
.xb-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;text-decoration:none;color:var(--xb-paper)}
.xb-brand:hover{color:var(--xb-paper)}
.xb-brand__mark{display:flex;align-items:center;justify-content:center;width:42px;height:42px;font-family:var(--xb-font-display);font-size:24px;font-weight:700;color:var(--xb-signal);background:linear-gradient(160deg,rgba(53,242,192,.18),rgba(53,242,192,.02));clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.xb-brand__meta{display:flex;flex-direction:column;gap:2px}
.xb-brand__name{font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1.2}
.xb-brand__season{font-family:var(--xb-font-mono);font-size:11px;letter-spacing:.1em;color:var(--xb-mist);line-height:1.2}
.xb-nav{flex:1 1 auto;display:flex;justify-content:center}
.xb-nav__list{display:flex;align-items:center;gap:clamp(4px,1.3vw,22px)}
.xb-nav__link{position:relative;display:inline-block;padding:10px 2px;font-size:15px;letter-spacing:.04em;color:var(--xb-paper);text-decoration:none;transition:color .2s var(--xb-ease)}
.xb-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--xb-signal);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--xb-ease)}
.xb-nav__link:hover{color:var(--xb-mist)}
.xb-nav__link:hover::after{transform:scaleX(.45)}
.xb-nav__link[aria-current="page"]{color:var(--xb-signal)}
.xb-nav__link[aria-current="page"]::after{transform:scaleX(1)}
.xb-header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.xb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;font-size:15px;font-weight:700;letter-spacing:.06em;line-height:1.2;color:var(--xb-paper);background:transparent;border:1px solid var(--xb-stone);border-radius:var(--xb-radius);text-decoration:none;transition:background .2s var(--xb-ease),color .2s var(--xb-ease),border-color .2s var(--xb-ease)}
.xb-btn:hover{border-color:var(--xb-signal);color:var(--xb-signal)}
.xb-btn--signal{background:var(--xb-signal);border-color:var(--xb-signal);color:var(--xb-void)}
.xb-btn--signal:hover{background:var(--xb-mist);border-color:var(--xb-mist);color:var(--xb-void)}
.xb-btn--ghost{border-color:var(--xb-line)}
.xb-btn--small{padding:8px 14px;font-size:13px}
.xb-iconbtn{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;font-size:14px;letter-spacing:.06em;color:var(--xb-paper);background:transparent;border:1px solid var(--xb-line);border-radius:var(--xb-radius);transition:border-color .2s var(--xb-ease),color .2s var(--xb-ease)}
.xb-iconbtn:hover,.xb-iconbtn[aria-expanded="true"]{border-color:var(--xb-signal);color:var(--xb-signal)}
.xb-iconbtn__glyph{position:relative;display:block;width:12px;height:12px;border:2px solid currentColor;border-radius:50%}
.xb-iconbtn__glyph::after{content:"";position:absolute;right:-6px;bottom:-5px;width:7px;height:2px;background:currentColor;transform:rotate(45deg)}
.xb-nav-toggle{display:none;position:relative;width:44px;height:40px;border:1px solid var(--xb-line);border-radius:var(--xb-radius);padding:0}
.xb-nav-toggle:hover{border-color:var(--xb-signal)}
.xb-nav-toggle__bars,.xb-nav-toggle__bars::before,.xb-nav-toggle__bars::after{position:absolute;left:50%;width:20px;height:2px;background:var(--xb-paper);transform:translateX(-50%);transition:transform .22s var(--xb-ease),background .22s var(--xb-ease),opacity .22s var(--xb-ease)}
.xb-nav-toggle__bars{top:50%;margin-top:-1px}
.xb-nav-toggle__bars::before{content:"";left:0;top:-6px;transform:none}
.xb-nav-toggle__bars::after{content:"";left:0;top:6px;transform:none}
.xb-nav-toggle:hover .xb-nav-toggle__bars,.xb-nav-toggle:hover .xb-nav-toggle__bars::before,.xb-nav-toggle:hover .xb-nav-toggle__bars::after{background:var(--xb-signal)}
.xb-nav-toggle[aria-expanded="true"] .xb-nav-toggle__bars{background:transparent}
.xb-nav-toggle[aria-expanded="true"] .xb-nav-toggle__bars::before{transform:translateY(6px) rotate(45deg);background:var(--xb-signal)}
.xb-nav-toggle[aria-expanded="true"] .xb-nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg);background:var(--xb-signal)}
.xb-search{width:min(var(--xb-shell),100% - var(--xb-gutter)*2);margin-inline:auto;display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:12px 0 16px;border-top:1px solid var(--xb-line-soft)}
.xb-search__label{font-size:13px;letter-spacing:.08em;color:var(--xb-mist);flex:0 0 auto}
.xb-search__input{flex:1 1 260px;min-width:0;padding:10px 14px;font-size:15px;color:var(--xb-paper);background:rgba(5,12,10,.6);border:1px solid var(--xb-stone);border-radius:var(--xb-radius)}
.xb-search__input::placeholder{color:rgba(168,240,220,.5)}
.xb-search__input:focus{border-color:var(--xb-signal);outline:none}
.xb-search__hint{margin:0;flex:0 0 auto;font-family:var(--xb-font-mono);font-size:12px;letter-spacing:.06em;color:var(--xb-mist)}
.xb-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--xb-signal);box-shadow:0 0 14px rgba(53,242,192,.5);z-index:60;transition:width .1s linear}

/* ============ 7 FOOTER ============ */
.xb-footer{margin-top:clamp(48px,8vw,120px);background:var(--xb-void);border-top:1px solid var(--xb-line)}
.xb-footer__inner{width:min(var(--xb-shell),100% - var(--xb-gutter)*2);margin-inline:auto;padding:clamp(36px,5vw,64px) 0 26px;display:grid;grid-template-columns:1.2fr 1fr 1.4fr 1fr;gap:clamp(22px,3vw,48px)}
.xb-footer__col{min-width:0}
.xb-footer__brand{font-family:var(--xb-font-display);font-size:26px;font-weight:700;letter-spacing:.06em;color:var(--xb-paper);line-height:1.1}
.xb-footer__tagline{margin-top:8px;font-family:var(--xb-font-mono);font-size:12px;letter-spacing:.1em;color:var(--xb-mist)}
.xb-footer__title{font-family:var(--xb-font-mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--xb-signal);margin-bottom:14px}
.xb-footer__title--sub{margin-top:24px}
.xb-footer__list{display:flex;flex-direction:column;gap:9px}
.xb-footer__list--quick{margin-top:20px}
.xb-footer__list--plain{gap:12px}
.xb-footer__list--plain li{color:var(--xb-paper);font-size:15px;line-height:1.7}
.xb-footer__link{color:var(--xb-paper);font-size:15px;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s var(--xb-ease),border-color .2s var(--xb-ease)}
.xb-footer__link:hover{color:var(--xb-signal);border-bottom-color:var(--xb-signal)}
.xb-footer__k{display:block;font-family:var(--xb-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--xb-stone)}
.xb-footer__icp{font-size:15px;color:var(--xb-paper)}
.xb-footer__note{margin-top:12px;font-size:13px;line-height:1.7;color:var(--xb-stone);max-width:34ch}
.xb-footer__note--mono{font-family:var(--xb-font-mono);letter-spacing:.06em}
.xb-footer__base{width:min(var(--xb-shell),100% - var(--xb-gutter)*2);margin-inline:auto;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;padding:16px 0 26px;border-top:1px solid var(--xb-line-soft)}
.xb-footer__base-text{font-size:12px;color:var(--xb-stone)}
.xb-footer__base-text--mono{font-family:var(--xb-font-mono);letter-spacing:.08em}

/* ============ 8 COMPONENTS ============ */
.xb-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;font-family:var(--xb-font-mono);font-size:12px;letter-spacing:.06em;color:var(--xb-stone)}
.xb-breadcrumb__link{color:var(--xb-stone);text-decoration:none}
.xb-breadcrumb__link:hover{color:var(--xb-signal)}
.xb-breadcrumb__sep{opacity:.5}
.xb-breadcrumb__current{color:var(--xb-mist)}

.xb-card{background:var(--xb-panel);border:1px solid var(--xb-line-soft);border-radius:var(--xb-radius);padding:clamp(18px,2.2vw,28px)}
.xb-card--accent{border-left:3px solid var(--xb-signal)}
.xb-card--red{border-left:3px solid var(--xb-red)}
.xb-card--gold{border-left:3px solid var(--xb-gold)}

.xb-stat{display:flex;flex-direction:column;gap:6px}
.xb-stat__value{font-family:var(--xb-font-display);font-size:clamp(44px,7vw,88px);line-height:.92;letter-spacing:-.02em;color:var(--xb-signal);font-variant-numeric:tabular-nums}
.xb-stat__label{font-family:var(--xb-font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--xb-mist)}
.xb-stat--gold .xb-stat__value{color:var(--xb-gold)}
.xb-stat--red .xb-stat__value{color:var(--xb-red)}

.xb-media{position:relative;overflow:hidden;border-radius:var(--xb-radius);background:var(--xb-panel);aspect-ratio:16/9}
.xb-media--tall{aspect-ratio:3/4}
.xb-media img,.xb-media svg{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.04)}
.xb-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(0deg,rgba(53,242,192,.09) 0 1px,transparent 1px 5px),
  linear-gradient(180deg,rgba(5,12,10,.12),rgba(5,12,10,.74))}
.xb-media__caption{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;font-family:var(--xb-font-mono);font-size:12px;letter-spacing:.08em;color:var(--xb-mist)}

.xb-table-scroll{overflow-x:auto;border:1px solid var(--xb-line);border-radius:var(--xb-radius);background:rgba(22,51,43,.35)}
.xb-table{width:100%;font-size:15px}
.xb-table caption{padding:12px 16px;text-align:left;font-family:var(--xb-font-mono);font-size:12px;letter-spacing:.1em;color:var(--xb-mist)}
.xb-table th,.xb-table td{padding:11px 16px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--xb-line-soft)}
.xb-table thead th{background:var(--xb-panel);color:var(--xb-mist);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.xb-table tbody tr:nth-child(even){background:rgba(22,51,43,.45)}
.xb-table tbody tr:hover{background:rgba(53,242,192,.06)}
.xb-table .is-num{text-align:right;font-family:var(--xb-font-mono);font-variant-numeric:tabular-nums}

.xb-axis{position:sticky;top:calc(var(--xb-header-h) + 24px);align-self:start}
.xb-axis__list{border-left:1px solid var(--xb-line)}
.xb-axis__link{display:block;margin-left:-1px;padding:9px 0 9px 16px;font-size:14px;color:var(--xb-stone);text-decoration:none;border-left:2px solid transparent;transition:color .2s var(--xb-ease),border-color .18s var(--xb-ease)}
.xb-axis__link:hover{color:var(--xb-mist)}
.xb-axis__link[aria-current="true"]{color:var(--xb-signal);border-left-color:var(--xb-signal)}

.xb-fold{background:rgba(22,51,43,.55);border:1px solid var(--xb-line-soft);border-radius:var(--xb-radius);overflow:hidden}
.xb-fold+.xb-fold{margin-top:10px}
.xb-fold__head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:16px 18px;text-align:left;font-weight:700;color:var(--xb-paper);transition:color .2s var(--xb-ease)}
.xb-fold__head:hover{color:var(--xb-signal)}
.xb-fold__head::after{content:"+";font-family:var(--xb-font-mono);font-size:18px;color:var(--xb-signal);line-height:1}
.xb-fold[data-open] .xb-fold__head::after{content:"–"}
.xb-fold__panel{max-height:0;opacity:0;overflow:hidden;transition:max-height .22s var(--xb-ease),opacity .22s var(--xb-ease)}
.xb-fold[data-open] .xb-fold__panel{opacity:1}
.xb-fold__body{padding:0 18px 18px;color:var(--xb-paper)}

.xb-tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--xb-line-soft)}
.xb-tabs__tab{margin-bottom:-1px;padding:10px 16px;font-family:var(--xb-font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--xb-stone);border-bottom:2px solid transparent;transition:color .2s var(--xb-ease),border-color .18s var(--xb-ease),transform .18s var(--xb-ease)}
.xb-tabs__tab:hover{color:var(--xb-mist)}
.xb-tabs__tab[aria-selected="true"]{color:var(--xb-signal);border-bottom-color:var(--xb-signal)}
.xb-tabs__panel{padding-top:22px}

.xb-copy{padding:6px 12px;font-family:var(--xb-font-mono);font-size:12px;letter-spacing:.08em;color:var(--xb-mist);border:1px solid var(--xb-line);border-radius:var(--xb-radius);transition:color .2s var(--xb-ease),border-color .2s var(--xb-ease)}
.xb-copy:hover{border-color:var(--xb-signal);color:var(--xb-signal)}
.xb-copy[data-copied]{border-color:var(--xb-signal);color:var(--xb-signal)}

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

/* ============ 9 RESPONSIVE ============ */
@media (max-width:1279px){
  .xb-brand__season{display:none}
  .xb-nav__list{gap:12px}
  .xb-footer__inner{grid-template-columns:1.2fr 1fr 1.4fr}
  .xb-footer__col:last-child{grid-column:1/-1;border-top:1px solid var(--xb-line-soft);padding-top:20px}
}
@media (max-width:1023px){
  .xb-nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .xb-nav{position:absolute;left:0;right:0;top:100%;display:none;justify-content:flex-start;background:rgba(22,51,43,.985);border-top:1px solid var(--xb-line);border-bottom:1px solid var(--xb-line);padding:8px 0 16px;max-height:calc(100vh - var(--xb-header-h));overflow-y:auto}
  .xb-nav[data-open]{display:block}
  .xb-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .xb-nav__list li{border-bottom:1px solid var(--xb-line-soft)}
  .xb-nav__link{display:block;padding:15px 24px;font-size:16px}
  .xb-nav__link::after{display:none}
  .xb-nav__link[aria-current="page"]{background:rgba(53,242,192,.08);box-shadow:inset 3px 0 0 var(--xb-signal)}
  .xb-grid--5-3,.xb-grid--7-3{grid-template-columns:1fr}
  .xb-axis{position:static;top:auto}
  .xb-footer__inner{grid-template-columns:1fr 1fr}
  .xb-footer__col:last-child{grid-column:auto;border-top:0;padding-top:0}
}
@media (max-width:767px){
  body{font-size:16px;line-height:1.75}
  .xb-header__actions .xb-btn{padding:9px 13px;font-size:13px}
  .xb-iconbtn__label{display:none}
  .xb-iconbtn{padding:9px 11px}
  .xb-footer__inner{grid-template-columns:1fr;gap:28px}
  .xb-footer__base{flex-direction:column;gap:6px}
  .xb-search{flex-direction:column;align-items:stretch;gap:10px}
}
@media (max-width:480px){
  .xb-brand__name{font-size:14px}
  .xb-brand__mark{width:38px;height:38px;font-size:21px}
  :root{--xb-header-h:68px}
}

/* ============ 10 MOTION PREFERENCES ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .xb-reveal{opacity:1;transform:none}
  .xb-progress{transition:none}
}