/* ============================================================
   HTH赛事 · 共享样式表 /assets/site.css
   深夜蓝黑底 · 草皮绿状态 · 信号橙当前项 · 1px 精密网格 · 直角
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

/* ---------- 2. 设计变量 ---------- */
:root{
  --ink:#060A12;
  --car:#0D1421;
  --plat:#172032;
  --line:#2A3547;
  --mist:#8C9AAF;
  --cold:#EDF1F5;
  --turf:#35C77E;
  --turf-deep:#0A2B1F;
  --signal:#FF7A1A;
  --signal-soft:#FFC08A;

  --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",Georgia,serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-numeric:"Noto Sans SC Condensed","Noto Sans SC","PingFang SC",system-ui,sans-serif;

  --wrap:1200px;
  --narrow:720px;
  --gap:clamp(14px,2vw,24px);
  --pad-block:clamp(40px,7vw,88px);
  --r:2px;
  --edge:1px solid var(--line);
}
:root[data-density="compact"]{
  --gap:10px;
  --pad-block:clamp(24px,4vw,48px);
}

/* ---------- 3. 基础排版 ---------- */
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  color:var(--cold);
  background-color:var(--ink);
  background-image:
    radial-gradient(78% 52% at 50% -12%, rgba(23,32,50,.9), rgba(6,10,18,0) 72%),
    repeating-linear-gradient(90deg, rgba(42,53,71,.26) 0 1px, transparent 1px 96px);
  background-repeat:no-repeat,repeat;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:root[data-density="compact"] body{font-size:15px;line-height:1.65}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.4;
  color:var(--cold);
}
h1{font-size:clamp(24px,3.6vw,34px)}
h2{font-size:clamp(21px,2.6vw,28px)}
h3{font-size:18px}
p{max-width:72ch}
a{
  color:var(--signal-soft);
  text-decoration:underline;
  text-decoration-color:rgba(255,192,138,.4);
  text-underline-offset:3px;
}
a:hover{color:#FFFFFF;text-decoration-color:currentColor}
strong{font-weight:600;color:var(--cold)}
code,kbd{font-family:var(--font-numeric);font-size:.92em;color:var(--signal-soft)}

/* ---------- 4. 布局工具 ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,32px);
}
.narrow{max-width:var(--narrow)}
.section{padding-block:var(--pad-block)}
.section--tight{padding-block:calc(var(--pad-block) * .55)}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
@media (max-width:900px){.grid-12{grid-template-columns:repeat(6,1fr)}}
@media (max-width:560px){.grid-12{grid-template-columns:repeat(2,1fr)}}
.stack > * + *{margin-top:var(--gap)}
.stack-sm > * + *{margin-top:10px}
.rule{height:1px;background:var(--line);border:0;margin-block:var(--gap)}
.prose ul{list-style:disc;padding-left:1.5em}
.prose ol{list-style:decimal;padding-left:1.5em}
.prose li{margin-bottom:.4em}
.prose p + p{margin-top:1em}
.prose blockquote{margin:1.4em 0;padding:12px 18px;border-left:2px solid var(--signal);background:var(--car);color:var(--mist)}

/* ---------- 5. 跳至主要内容 ---------- */
.skip-link{
  position:absolute;
  left:18px;
  top:-72px;
  z-index:140;
  padding:10px 18px;
  background:var(--signal);
  color:#0B0803;
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  text-decoration:none;
  border-radius:var(--r);
  transition:top .18s ease;
}
.skip-link:focus{top:14px}
.skip-link:focus-visible{outline-color:#0B0803;outline-offset:0}

/* ---------- 6. 刊头 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:90;
  background:rgba(6,10,18,.94);
  border-bottom:var(--edge);
  backdrop-filter:saturate(135%) blur(9px);
  -webkit-backdrop-filter:saturate(135%) blur(9px);
}
.header-plate{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:14px clamp(18px,4vw,32px) 12px;
}
.header-meta{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  max-width:none;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--mist);
}
.header-meta::before{
  content:"";
  flex:0 0 auto;
  width:12px;
  height:2px;
  background:var(--turf);
}
.masthead{
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding-inline:10px;
  text-align:center;
}
.brand-mark{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.2;
  color:var(--cold);
  text-decoration:none;
  transition:color .18s ease;
}
.brand-mark:hover{color:var(--signal-soft)}
.brand-sub{
  display:block;
  max-height:22px;
  overflow:hidden;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--mist);
  transition:max-height .24s ease,opacity .24s ease,transform .24s ease;
}
.site-header[data-scrolled="true"] .brand-sub{
  max-height:0;
  opacity:0;
  transform:translateY(-3px);
}
.header-tools{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
}
.density-toggle,
.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--mist);
  background:transparent;
  border:var(--edge);
  border-radius:var(--r);
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.density-toggle:hover,
.nav-toggle:hover{color:var(--cold);border-color:var(--mist)}
.density-toggle[aria-pressed="true"]{
  color:#0B0803;
  background:var(--signal);
  border-color:var(--signal);
}
.nav-toggle{display:none;color:var(--cold)}
.nav-toggle-bars{position:relative;width:14px;height:9px;flex:0 0 auto}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:14px;
  height:1px;
  background:currentColor;
  transition:transform .2s ease;
}
.nav-toggle-bars::before{top:1px}
.nav-toggle-bars::after{bottom:1px}
.site-header[data-open="true"] .nav-toggle{border-color:var(--signal);color:var(--signal-soft)}
.site-header[data-open="true"] .nav-toggle-bars::before{transform:translateY(3px) rotate(45deg)}
.site-header[data-open="true"] .nav-toggle-bars::after{transform:translateY(-4px) rotate(-45deg)}
.nav-toggle-text{font-size:13px;letter-spacing:.12em}

.site-nav{border-top:var(--edge)}
.nav-rail{
  display:flex;
  justify-content:center;
  gap:clamp(10px,3.4vw,48px);
  max-width:var(--wrap);
  margin-inline:auto;
  padding:0 clamp(18px,4vw,32px);
}
.nav-rail a{
  position:relative;
  display:block;
  padding:12px 4px;
  font-size:15px;
  letter-spacing:.08em;
  color:var(--mist);
  text-decoration:none;
  transition:color .18s ease;
}
.nav-rail a::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:-1px;
  height:2px;
  background:var(--signal);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease,background-color .2s ease;
}
.nav-rail a:hover{color:var(--cold)}
.nav-rail a:hover::after{transform:scaleX(1);background:var(--mist)}
.nav-rail a[aria-current="page"]{color:var(--cold)}
.nav-rail a[aria-current="page"]::after{transform:scaleX(1);background:var(--signal)}

@media (max-width:860px){
  .header-plate{
    grid-template-columns:auto 1fr auto;
    gap:10px;
    padding:12px 18px 10px;
  }
  .header-meta{display:none}
  .masthead{justify-self:start;align-items:flex-start;padding-inline:0;text-align:left}
  .brand-mark{font-size:19px;letter-spacing:.12em}
  .brand-sub{font-size:11px;letter-spacing:.1em}
  .density-toggle{display:none}
  .nav-toggle{display:inline-flex}
  .brand-sub{max-height:18px}
  .site-nav{
    display:none;
    background:var(--car);
  }
  .site-header[data-open="true"] .site-nav{display:block}
  .nav-rail{
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:22px;
    padding:2px 18px 10px;
    overflow-x:auto;
    scrollbar-width:thin;
  }
  .nav-rail a{padding:10px 2px;white-space:nowrap;font-size:15px}
}

/* ---------- 7. 通用按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.4;
  color:var(--cold);
  background:var(--plat);
  border:var(--edge);
  border-radius:var(--r);
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{color:var(--cold);border-color:var(--mist);background:#1D2839}
.btn--signal{color:#0B0803;background:var(--signal);border-color:var(--signal)}
.btn--signal:hover{color:#0B0803;background:var(--signal-soft);border-color:var(--signal-soft)}
.btn--ghost{background:transparent;border-color:var(--line)}
.btn--ghost:hover{background:rgba(23,32,50,.7);border-color:var(--mist)}
.btn--quiet{padding:8px 10px;background:transparent;border-color:transparent;color:var(--mist)}
.btn--quiet:hover{background:var(--car);color:var(--cold);border-color:var(--line)}
.btn--block{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- 8. 面包屑 ---------- */
.crumbs{font-size:13px;letter-spacing:.06em;color:var(--mist)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li:not(:first-child)::before{
  content:"／";
  margin-inline:8px;
  color:var(--line);
}
.crumbs a{color:var(--mist);text-decoration:none}
.crumbs a:hover{color:var(--cold)}
.crumbs [aria-current="page"]{color:var(--cold)}

/* ---------- 9. 区块标题 ---------- */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:14px;
  margin-bottom:24px;
  border-bottom:var(--edge);
}
.section-head p{margin:0;color:var(--mist);font-size:14px}
.eyebrow{
  display:block;
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.24em;
  color:var(--signal);
}
.lead{font-size:17px;line-height:1.75;color:var(--mist);max-width:60ch}

/* ---------- 10. 卡片与面板 ---------- */
.card{
  position:relative;
  background:var(--car);
  border:var(--edge);
  border-radius:var(--r);
}
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:var(--plat);
  border-bottom:var(--edge);
}
.card-title{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--cold);
}
.card-body{padding:18px}
:root[data-density="compact"] .card-body{padding:14px 16px}
.card-meta{margin:0;max-width:none;font-size:13px;letter-spacing:.06em;color:var(--mist)}
.card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 18px;
  border-top:var(--edge);
  font-size:13px;
  color:var(--mist);
}
.card--live{border-color:rgba(53,199,126,.38)}
.card--live .card-head{box-shadow:inset 3px 0 0 var(--turf)}

.panel{
  background:var(--car);
  border:var(--edge);
  border-radius:var(--r);
}
.panel + .panel{margin-top:-1px}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:var(--plat);
  border-bottom:var(--edge);
}
.panel-head h3{margin:0;font-family:var(--font-body);font-size:16px;font-weight:600;letter-spacing:.08em}
.panel-body{padding:18px}
.panel[hidden]{display:none}
.panel.is-collapsed .panel-body{display:none}

/* ---------- 11. 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  font-size:12px;
  letter-spacing:.1em;
  line-height:1.6;
  color:var(--mist);
  background:transparent;
  border:var(--edge);
  border-radius:var(--r);
  white-space:nowrap;
}
.tag--live{color:var(--turf);background:var(--turf-deep);border-color:rgba(53,199,126,.4)}
.tag--live::before{
  content:"";
  width:6px;
  height:6px;
  background:var(--turf);
  border-radius:1px;
  animation:pulse-dot 2.4s ease-in-out infinite;
}
.tag--round{color:var(--signal-soft);border-color:rgba(255,122,26,.42)}
.tag--muted{color:var(--mist);border-color:var(--line);background:rgba(23,32,50,.6)}
@keyframes pulse-dot{
  0%,100%{opacity:1}
  50%{opacity:.35}
}

/* ---------- 12. 数字与统计 ---------- */
.stat{display:flex;flex-direction:column;gap:4px}
.stat-num{
  font-family:var(--font-numeric);
  font-size:clamp(28px,6vw,48px);
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:var(--cold);
}
.stat-num--signal{color:var(--signal)}
.stat-num--turf{color:var(--turf)}
.stat-label{font-size:13px;letter-spacing:.12em;color:var(--mist)}

/* ---------- 13. 时间轴 ---------- */
.timeline{
  position:relative;
  padding:4px 0 4px 26px;
  border-left:var(--edge);
}
.tl-item{position:relative;padding-bottom:22px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;
  left:-31px;
  top:6px;
  width:9px;
  height:9px;
  background:var(--car);
  border:var(--edge);
  border-radius:1px;
}
.tl-item--now .tl-dot{
  background:var(--signal);
  border-color:var(--signal);
  animation:pulse-ring 2.4s ease-in-out infinite;
}
.tl-time{
  font-family:var(--font-numeric);
  font-size:22px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:var(--cold);
}
.tl-meta{display:block;font-size:13px;letter-spacing:.06em;color:var(--mist)}
.tl-body{margin-top:6px;font-size:15px;color:var(--cold)}
@keyframes pulse-ring{
  0%,100%{box-shadow:0 0 0 0 rgba(255,122,26,.55)}
  50%{box-shadow:0 0 0 5px rgba(255,122,26,0)}
}

/* ---------- 14. 排名表 ---------- */
.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--car);
  border:var(--edge);
  border-radius:var(--r);
}
.rank-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:15px;
}
.rank-table caption{
  padding:12px 16px;
  text-align:left;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--mist);
  background:var(--plat);
  border-bottom:var(--edge);
}
.rank-table th{
  padding:10px 14px;
  text-align:left;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  white-space:nowrap;
  color:var(--mist);
  background:var(--plat);
  border-bottom:var(--edge);
}
.rank-table td{
  padding:12px 14px;
  color:var(--cold);
  border-bottom:var(--edge);
  vertical-align:middle;
}
.rank-table tbody tr:last-child td{border-bottom:0}
.rank-table tbody tr:hover{background:rgba(23,32,50,.72)}
.cell-num{
  font-family:var(--font-numeric);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
:root[data-density="compact"] .rank-table td{padding:9px 12px}
:root[data-density="compact"] .rank-table th{padding:8px 12px}

/* ---------- 15. 影像容器 ---------- */
.media{
  position:relative;
  background:var(--car);
  border:var(--edge);
  border-radius:var(--r);
  overflow:hidden;
}
.media-frame{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background-image:
    radial-gradient(120% 90% at 18% 0%, rgba(53,199,126,.16), rgba(6,10,18,0) 58%),
    radial-gradient(92% 82% at 92% 100%, rgba(255,122,26,.16), rgba(6,10,18,0) 62%),
    repeating-linear-gradient(0deg, rgba(42,53,71,.34) 0 1px, transparent 1px 28px),
    linear-gradient(180deg,#0D1421,#060A12);
}
.media--wide .media-frame{aspect-ratio:16 / 9}
.media--tall .media-frame{aspect-ratio:3 / 4}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame picture{display:block;width:100%;height:100%}
.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(0deg, rgba(6,10,18,.55), rgba(6,10,18,0) 58%),
    linear-gradient(105deg, rgba(255,122,26,.1), rgba(6,10,18,0) 46%);
}
.media-cap{
  padding:10px 14px;
  font-size:13px;
  line-height:1.6;
  color:var(--mist);
  background:var(--plat);
  border-top:var(--edge);
}

/* ---------- 16. 滚动显现 ---------- */
.reveal{transition:opacity .24s cubic-bezier(.22,.61,.36,1),transform .24s cubic-bezier(.22,.61,.36,1)}
:root[data-js="on"] .reveal{
  opacity:0;
  transform:translateY(10px);
  transition-delay:calc(var(--stagger,0) * 90ms);
}
:root[data-js="on"] .reveal.is-in{opacity:1;transform:none}

/* ---------- 17. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(36px,7vw,88px);
  background:var(--car);
  border-top:var(--edge);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:120px;
  height:2px;
  background:linear-gradient(90deg,var(--signal) 0 72px,var(--turf) 72px 120px,transparent 120px);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.4fr 1.2fr;
  gap:clamp(20px,3vw,44px);
  padding-block:clamp(34px,5vw,58px);
}
.footer-col{min-width:0}
.footer-mark{
  display:inline-block;
  margin-bottom:12px;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--cold);
  text-decoration:none;
}
.footer-mark:hover{color:var(--signal-soft)}
.footer-title{
  margin:0 0 14px;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--mist);
}
.footer-line{margin:0 0 10px;font-size:14px;line-height:1.7;color:var(--cold);max-width:34ch}
.footer-list{display:grid;gap:8px}
.footer-list a{
  display:inline-block;
  font-size:15px;
  color:var(--cold);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.footer-list a:hover{color:var(--signal-soft);border-bottom-color:var(--signal-soft)}
.footer-contact{display:grid;gap:10px;margin-bottom:12px}
.footer-contact li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.contact-key{min-width:34px;font-size:12px;letter-spacing:.14em;color:var(--mist)}
.contact-val{font-size:14px;color:var(--cold)}
.copy-btn{
  padding:3px 9px;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  color:var(--cold);
  background:transparent;
  border:1px dashed var(--line);
  border-radius:var(--r);
  text-align:left;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.copy-btn:hover{color:var(--signal-soft);border-color:var(--signal);background:rgba(255,122,26,.08)}
.footer-hint{margin:0;max-width:36ch;font-size:13px;line-height:1.7;color:var(--mist)}
.footer-icp{
  margin:12px 0 8px;
  font-family:var(--font-numeric);
  font-size:14px;
  letter-spacing:.08em;
  color:var(--mist);
}
.legacy-strip{
  background:var(--turf-deep);
  border-top:1px solid rgba(53,199,126,.32);
}
.legacy-strip[hidden]{display:none}
.legacy-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-block:12px;
}
.legacy-text{
  margin:0;
  max-width:none;
  font-size:14px;
  letter-spacing:.04em;
  color:#A9E7C6;
}
.legacy-text a{color:#E4F8EE;text-decoration-color:rgba(228,248,238,.5)}
.legacy-text a:hover{color:#FFFFFF}
.legacy-close{
  padding:5px 14px;
  font-size:13px;
  letter-spacing:.08em;
  color:#E4F8EE;
  background:transparent;
  border:1px solid rgba(53,199,126,.42);
  border-radius:var(--r);
  transition:background-color .18s ease,border-color .18s ease;
}
.legacy-close:hover{background:rgba(53,199,126,.16);border-color:var(--turf)}
.footer-end{
  background:rgba(6,10,18,.6);
  border-top:var(--edge);
}
.footer-end-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px 20px;
  flex-wrap:wrap;
  padding-block:14px 18px;
}
.footer-end p{
  margin:0;
  max-width:none;
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--mist);
}

@media (max-width:1024px){
  .footer-grid{grid-template-columns:1.3fr 1fr 1.3fr}
  .footer-col:last-child{grid-column:1 / -1;border-top:var(--edge);padding-top:20px}
}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px 22px}
  .footer-brand{grid-column:1 / -1}
  .footer-col:last-child{grid-column:1 / -1}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .footer-col:last-child{border-top:0;padding-top:0}
}

/* ---------- 18. 焦点与动效降级 ---------- */
:focus-visible{
  outline:2px solid var(--signal-soft);
  outline-offset:2px;
  border-radius:var(--r);
}
::selection{background:rgba(255,122,26,.32);color:#FFFFFF}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  :root[data-js="on"] .reveal{opacity:1;transform:none}
  .tl-item--now .tl-dot{box-shadow:none}
}