:root{color-scheme:dark;--hl-bg:#070a12;--hl-panel:#0b101d;--hl-line:#243149;--hl-muted:#a1aec2;--hl-blue:#36a9ff;--hl-green:#31dc8b;--hl-red:#ff6878}
*{box-sizing:border-box}
body{margin:0;background:var(--hl-bg);color:#edf4ff;font:14px Inter,Arial,sans-serif}
a{color:inherit}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid #83ceff;outline-offset:3px}
.navbar{background:#090f1c}
.nav-links{display:flex;gap:24px;overflow-x:auto;padding:14px 24px;white-space:nowrap}
.nav-links a{font-size:11px;font-weight:800;text-decoration:none;color:#afbdd2}
.nav-links [aria-current]{color:#62beff}
.hl-mobile-header,.hl-mobile-nav{display:none}
main{max-width:1440px;margin:auto;padding:28px 24px 40px}
.hl-intro{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:28px}
h1{margin:0 0 12px;font-size:30px;letter-spacing:-1px}
h1 span{font-size:20px;color:var(--hl-muted);font-weight:500}
.hl-intro p{max-width:780px;color:var(--hl-muted);line-height:1.6;margin:0}
#hl-feed-state{font-size:12px;border:1px solid var(--hl-line);border-radius:20px;padding:9px 14px;white-space:nowrap}
.hl-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--hl-line)}
section>.hl-section-heading:first-child{padding-left:0;padding-right:0}
.hl-panel>.hl-section-heading:first-child{padding-left:18px;padding-right:18px}
h2{margin:0;font-size:19px;letter-spacing:-.3px}
.hl-section-heading>span{font-size:11px;color:var(--hl-muted)}
.hl-heroes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0 24px}
.hl-hero,.hl-explain{border:1px solid var(--hl-line);border-top:2px solid #3488c5;border-radius:12px;padding:20px;min-height:205px;background:linear-gradient(145deg,#12223a,#0b101d 75%)}
.hl-hero h3,.hl-explain h3{font-size:14px;margin:0 0 20px}
.hl-price{font-size:27px;font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hl-unavailable{font-size:15px;color:var(--hl-muted)}
.hl-close{margin-top:20px;color:var(--hl-muted);font-size:12px}
.hl-asof{color:#efc17a;font-size:10px;line-height:1.4;margin-top:6px}
.hl-explain{border-top-color:#7587a3;background:var(--hl-panel)}
.hl-explain p{color:var(--hl-muted);font-size:13px;line-height:1.6;margin:0}
.hl-dots{display:none}
.hl-panel{border:1px solid var(--hl-line);border-radius:12px;background:var(--hl-panel);overflow:hidden;margin-bottom:22px}
.hl-state{color:var(--hl-muted);font-size:12px;line-height:1.6;margin:12px 18px}
.hl-table-wrap{width:100%}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:right;padding:14px 18px;border-bottom:1px solid #1b273a}
th{font-size:10px;font-weight:600;color:var(--hl-muted)}
th:first-child,td:first-child{text-align:left}
td{font-size:13px}
td .hl-number{display:inline-block;padding:3px;border-radius:3px}
.hl-market-name{font-weight:700;overflow-wrap:anywhere}
.hl-market-code{display:block;font-size:10px;color:var(--hl-muted);margin-top:4px;overflow-wrap:anywhere}
.hl-positive{color:var(--hl-green)}
.hl-negative{color:var(--hl-red)}
.hl-explanation{font-size:11px;line-height:1.7;color:var(--hl-muted);padding:0 18px}
.hl-lower{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hl-heat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px}
.hl-heat-cell{padding:14px 8px;border:1px solid var(--hl-line);border-radius:6px;text-align:center;overflow-wrap:anywhere;min-width:0}
.hl-heat-cell strong{display:block;font-size:12px}
.hl-heat-cell .hl-number{display:block;margin-top:6px;font-size:17px;font-weight:700}
.hl-heat-cell .hl-market-code{color:inherit;opacity:.8}
.hl-book-tabs{display:flex;gap:8px;padding:16px}
.hl-book-tabs button{min-height:44px;background:#131f33;border:1px solid #34455f;border-radius:6px;color:#cdd9ea;padding:8px 14px}
.hl-book-tabs button[aria-pressed=true]{border-color:#58b7ff;color:#83ceff}
.hl-source-note{font-size:11px;line-height:1.7;color:var(--hl-muted);margin:20px 0}
.hl-flash-up{animation:hl-up .7s ease-out}
.hl-flash-down{animation:hl-down .7s ease-out}
.hl-flash-box{animation:hl-box .7s ease-out}
@keyframes hl-up{from{color:#64ffac;text-shadow:0 0 14px #27dd7e}
to{text-shadow:none}
}
@keyframes hl-down{from{color:#ff7988;text-shadow:0 0 14px #ef4a5d}
to{text-shadow:none}
}
@keyframes hl-box{from{background:#fff;color:#080e18;box-shadow:0 0 10px #ffffff88}
to{background:transparent}
}
@media(max-width:1000px){th,td{padding:12px}
.hl-price{font-size:23px}
}
@media(max-width:767px){.dt-chrome{display:none!important}
.hl-mobile-header{display:block;background:linear-gradient(180deg,#153655,#080e1a);padding:6px 12px}
.header-top{position:relative;display:flex;align-items:center;gap:12px}
.m-logo-mark{width:60px;height:60px}
.m-header-wordmark{font-size:25px;font-weight:800;text-decoration:none}
.m-header-wordmark span{color:#43adff}
.hl-mobile-label{font-size:10px;letter-spacing:2px;margin-top:4px;color:var(--hl-muted)}
.hl-home{margin-left:auto;font-size:10px;text-decoration:none;min-height:44px;display:flex;align-items:center}
.nav-right{display:flex;justify-content:flex-end;gap:8px}
.hl-mobile-nav{display:block;position:fixed;bottom:0;left:0;right:0;max-width:none;background:#0b1425;border-top:1px solid #273953;z-index:90}
main{padding:20px 12px 110px}
.hl-intro{display:block;margin-bottom:20px}
h1{font-size:24px}
h1 span{font-size:16px}
.hl-intro p{font-size:12px}
#hl-feed-state{display:inline-block;margin-top:12px}
.hl-section-heading{display:block;padding:14px 0}
h2{font-size:17px}
.hl-section-heading>span{display:block;margin-top:6px}
.hl-heroes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:12px -12px 8px;padding:0 12px 4px;scrollbar-width:none}
.hl-heroes::-webkit-scrollbar{display:none}
.hl-hero,.hl-explain{flex:0 0 calc(100vw - 55px);scroll-snap-align:start;scroll-margin-left:12px;min-width:0;min-height:195px}
.hl-price{font-size:29px}
.hl-dots{display:flex;justify-content:center;gap:0;margin-bottom:18px}
.hl-dots button{border:0;background:none;min-width:30px;min-height:44px;padding:0;color:var(--hl-muted)}
.hl-dots button::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#50617a}
.hl-dots button[aria-current=true]::before{background:#42b1ff;width:16px;border-radius:5px}
.hl-desktop-stat{display:none}
th,td{padding:10px 5px;font-size:10px}
th{font-size:9px}
.hl-market-name{font-size:11px}
.hl-market-code{font-size:8px}
th:first-child,td:first-child{padding-left:12px;max-width:110px}
td .hl-number{padding:2px}
.hl-asof{font-size:8px;max-width:100px}
.hl-hero .hl-asof{font-size:11px;max-width:none}
.hl-lower{display:block}
}
@media(prefers-reduced-motion:reduce){.hl-flash-up,.hl-flash-down,.hl-flash-box{animation:none}
}


.hl-mobile-nav a{text-decoration:none}

@media(min-width:768px){.hl-mobile-nav.bottom-nav[data-mobile-navigation]{display:none}
}


.hl-neutral{color:var(--hl-muted)}

#hl-book-depth[hidden]{display:none}
#hl-book-depth table{table-layout:fixed}
#hl-book-depth th,#hl-book-depth td{width:33.333%;padding:6px 18px;font-size:11px;text-align:right;overflow-wrap:anywhere}
#hl-book-depth th:first-child,#hl-book-depth td:first-child{text-align:left}
#hl-book-depth th{font-size:10px}
#hl-book-depth .hl-book-ask td:first-child{color:var(--hl-red)}
#hl-book-depth .hl-book-bid td:first-child{color:var(--hl-green)}
#hl-book-depth #hl-book-spread{padding:12px;text-align:center;background:#122039;line-height:1.6;color:#e8f2ff}
@media(max-width:767px){#hl-book-depth th,#hl-book-depth td{padding:6px 12px}}

/* Preserve the composed page carousel without changing other mobile pages. */
@media(max-width:767px){
.hl-mobile-nav.bottom-nav[data-mobile-navigation] {
  display: block;
  padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
}
.hl-mobile-nav .mobile-nav-scroll {
  display: flex;
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(100% / 8);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hl-mobile-nav .mobile-nav-scroll::-webkit-scrollbar { display: none; }
.hl-mobile-nav .mobile-nav-scroll::before,
.hl-mobile-nav .mobile-nav-scroll::after { content: ''; flex: 0 0 12.5%; }
.hl-mobile-nav.bottom-nav[data-mobile-navigation] .nav-item {
  box-sizing: border-box;
  flex: 0 0 25%;
  min-height: 48px;
  padding: 4px;
  text-decoration: none;
  scroll-snap-align: start;
}
.hl-mobile-nav.bottom-nav[data-mobile-navigation] .nav-lbl {
  width: 100%;
  min-height: 40px;
  padding: 8px 2px;
  font-size: clamp(10px, 2.8vw, 11px);
  letter-spacing: 0;
}
.hl-mobile-nav.bottom-nav[data-mobile-navigation] .nav-item:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
  border-radius: 6px;
}
.hl-mobile-nav.bottom-nav[data-mobile-navigation]::before,
.hl-mobile-nav.bottom-nav[data-mobile-navigation]::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 10px;
  height: 48px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.hl-mobile-nav.bottom-nav[data-mobile-navigation]::before { left: 0; background: linear-gradient(to right, #050508, transparent); }
.hl-mobile-nav.bottom-nav[data-mobile-navigation]::after { right: 0; background: linear-gradient(to left, #050508, transparent); }
.hl-mobile-nav.bottom-nav[data-mobile-navigation].has-more-left::before,
.hl-mobile-nav.bottom-nav[data-mobile-navigation].has-more-right::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hl-mobile-nav .mobile-nav-scroll { scroll-behavior: auto; }
}

}

.hl-mobile-status{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hl-mobile-status .live-ind{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;white-space:nowrap}
.hl-mobile-status .live-dot-nav{width:7px;height:7px;border-radius:50%;background:#FFB300}
