:root{
--void:        #000000;
--panel:       #090909;
--panel-hover: #121212;
--surface-header: #1A1A1A;
--line:        #1A1A1A;
--line-soft:   #141414;
--ink:         #CCCCCC;
--mute:        #8F8F8F;
--mute-dim:    #7A7A7A;
--signal:      #FFC857;
--signal-soft: rgba(255,200,87,0.12);
--pulse:       #00FF88;
--pulse-soft:  rgba(0,255,136,0.12);
--danger:      #FF4D4D;
--danger-soft: rgba(255,77,77,0.12);
--violet:      #A78BFA;
--violet-soft: rgba(167,139,250,0.12);
--cyan:        #4CC2FF;
--cyan-soft:   rgba(76,194,255,0.12);
--font-display: 'IBM Plex Mono', 'Space Grotesk', monospace;
--font-body:    'Inter', sans-serif;
--font-mono:    'IBM Plex Mono', monospace;
--radius: 0;
--radius-sm: 0;
--maxw: 1180px;
}
*,*::before,*::after{ border-radius:0 !important; }
.dot,
.funding-dot,
.term-identity-bar__dot,
.tv-watchdog__spinner,
.fsnap-sym-badge,
.liq-icon,
.liq-chip__icon,
.info-btn,
.glossary-dialog__close,
.mktw-sym-badge{ border-radius:50% !important; }
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
margin:0;
overflow-x:hidden;
background:var(--void);
color:var(--ink);
font-family:var(--font-body);
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:600;
line-height:1.16;
margin:0 0 .5em;
letter-spacing:-0.005em;
}
p{ margin:0 0 1em; color:var(--mute); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
::selection{ background:var(--signal); color:#000000; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){*{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }}
.eyebrow{
font-family:var(--font-mono);
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--signal);
}
.tag{
display:inline-flex;
align-items:center;
gap:6px;
font-family:var(--font-mono);
font-size:11.5px;
letter-spacing:.03em;
color:var(--mute);
background:var(--void);
border:1px solid var(--line);
border-radius:999px;
padding:4px 10px;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--pulse); box-shadow:0 0 8px var(--pulse); flex:none; }
.skip-link{
position:absolute; left:8px; top:-48px;
z-index:100;
background:var(--signal); color:var(--void);
font-family:var(--font-mono); font-size:12.5px; font-weight:600;
padding:10px 16px; border-radius:var(--radius-sm);
text-decoration:none;
transition:top .15s ease;
}
.skip-link:focus{ top:8px; }
.site-header{
position:sticky; top:0; z-index:50;
border-bottom:1px solid var(--line);
}
.site-header::before{
content:"";
position:absolute; inset:0;
background:rgba(26,26,26,0.85);
backdrop-filter:blur(10px);
z-index:-1;
pointer-events:none;
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:16px 24px;
max-width:var(--maxw); margin:0 auto;
}
.logo{
font-family:var(--font-display);
font-weight:700;
font-size:19px;
color:var(--ink);
display:flex; align-items:baseline; gap:2px;
}
.logo span{ color:var(--signal); }
.nav-links{
display:flex; gap:32px;
list-style:none; margin:0; padding:0;
font-family:var(--font-mono);
font-size:13px;
letter-spacing:.02em;
}
.nav-links a{
color:var(--mute);
padding:6px 0;
border-bottom:1px solid transparent;
transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); border-color:var(--signal); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:8px 10px; font-size:18px; }
.ticker{
border-bottom:1px solid var(--line);
background:var(--panel);
/* Hidden by default — this is the safety net. Overflow is only ever
   exposed deliberately via .ticker--marquee (animated) or
   .ticker--static-scroll (reduced-motion fallback) below, both applied
   by JS after it has actually measured the content. That way a slow
   price update, a font swap, or JS not having run yet can never leave
   a bare, un-animated horizontal scrollbar sitting under the bar. */
overflow:hidden;
white-space:nowrap;
position:relative;
}
.ticker--static-scroll{
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:thin;
}
.ticker--static-scroll::-webkit-scrollbar{ height:4px; }
.ticker--static-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:2px; }
.ticker--marquee{
overflow:hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.ticker--marquee .ticker-track{
display:flex;
width:max-content;
will-change:transform;
animation:ticker-marquee-scroll linear infinite;
}
@keyframes ticker-marquee-scroll{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
.ticker--marquee:hover .ticker-track,
.ticker--marquee:focus-within .ticker-track{ animation-play-state:paused; }
/* Belt-and-braces: if the OS-level reduced-motion setting changes after
   JS already switched the bar into marquee mode, fall back to a plain
   scrollable strip instead of a frozen, non-interactive animation. */
@media (prefers-reduced-motion: reduce){
.ticker--marquee{ overflow-x:auto; overflow-y:hidden; -webkit-mask-image:none; mask-image:none; }
.ticker--marquee .ticker-track{ animation:none !important; display:inline-flex; width:auto; }
}
.ticker-track{
display:inline-flex;
align-items:center;
padding:9px 16px;
font-family:var(--font-mono);
font-size:12.5px;
color:var(--mute);
}
.ticker-track .tk-coin{
display:inline-flex; align-items:center; gap:8px;
margin-right:28px; white-space:nowrap; flex-shrink:0;
padding-right:28px;
border-right:1px solid var(--line);
}
.ticker-track .tk-coin:last-of-type{ border-right:none; }
.ticker-track .tk-global{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0; }
.ticker-track .tk-sym{ color:var(--ink); font-weight:600; letter-spacing:.02em; }
.ticker-track .tk-label{ color:var(--mute-dim); }
.ticker-track .tk-val{ color:var(--ink); font-weight:500; }
.ticker-track .tk-chg{ font-weight:500; }
.ticker-track .up{ color:var(--pulse); }
.ticker-track .down{ color:var(--danger); }
body.page-terminal .ticker-track{
padding:6px 16px;
font-size:11.5px;
gap:0;
}
body.page-terminal .ticker-track .tk-coin{
gap:6px;
margin-right:16px;
padding-right:16px;
}
body.page-terminal .ticker-track .tk-global{ gap:6px; }
body.page-terminal .ticker-track .tk-label{ margin-left:2px; }
.hero{
position:relative;
padding:38px 24px 26px;
max-width:var(--maxw); margin:0 auto;
overflow:hidden;
}
.hero::before{
content:"";
position:absolute;
top:-220px; right:-160px;
width:560px; height:560px;
background:radial-gradient(circle, rgba(255,200,87,0.16) 0%, rgba(255,200,87,0.05) 45%, transparent 70%);
pointer-events:none;
z-index:0;
}
.hero::after{
content:"";
position:absolute;
top:-120px; right:120px;
width:380px; height:380px;
background:radial-gradient(circle, rgba(0,255,136,0.10) 0%, transparent 65%);
pointer-events:none;
z-index:0;
}
.hero > *{ position:relative; z-index:1; }
.hero .eyebrow{ margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.hero h1{
font-size:clamp(26px,4.2vw,42px);
max-width:18ch;
line-height:1.1;
margin-bottom:.35em;
letter-spacing:-0.01em;
}
.hero h1 .accent{ color:var(--signal); }
.hero .lede{
font-size:14.5px;
max-width:56ch;
color:var(--mute);
margin-top:8px;
margin-bottom:24px;
}
.hero-cta{
display:flex; flex-wrap:wrap; gap:12px;
margin-top:16px;
margin-bottom:26px;
}
.btn{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--font-mono); font-size:13px;
padding:11px 20px; border-radius:999px;
border:1px solid var(--line);
transition:border-color .15s ease, background .15s ease, transform .15s ease, color .15s ease;
}
.btn-primary{ background:var(--signal); color:var(--void); border-color:var(--signal); font-weight:600; }
.btn-primary:hover{ transform:translateY(-1px); background:#ffd37a; }
.btn-ghost{ background:var(--panel); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--signal-soft); background:var(--panel-hover); color:var(--signal); }
.hero-stats{
display:flex; flex-wrap:wrap; gap:0;
border-top:1px solid var(--line);
padding-top:22px;
}
.hero-stat{
padding:0 28px 0 0; margin-right:28px;
border-right:1px solid var(--line-soft);
}
.hero-stat:last-child{ border-right:none; margin-right:0; padding-right:0; }
.hero-stat .num{
font-family:var(--font-display); font-weight:700;
font-size:24px; color:var(--ink); display:block;
}
.hero-stat .label{
font-family:var(--font-mono); font-size:11px; color:var(--mute-dim);
text-transform:uppercase; letter-spacing:.05em;
}
@media (max-width:560px){.hero{ padding:40px 20px 32px; }
.hero-stat{ padding-right:16px; margin-right:16px; }
.hero-stat .num{ font-size:20px; }
.btn{ flex:1; justify-content:center; }}
.hub{
padding:8px 24px 56px;
max-width:var(--maxw); margin:0 auto;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:14px;
}
@media (max-width:1080px){.hub{ grid-template-columns:repeat(3,1fr); }}
@media (max-width:640px){.hub{ grid-template-columns:repeat(2,1fr); }}
@media (max-width:560px){.hub{ grid-template-columns:1fr; }}
.hub-card{
grid-column:span 1;
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
padding:22px 18px;
display:flex; flex-direction:column;
min-height:200px;
position:relative;
overflow:hidden;
transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.hub-card:hover{
border-color:var(--signal-soft);
background:var(--panel-hover);
transform:translateY(-2px);
}
.hub-card .icon{
width:34px; height:34px;
border-radius:9px;
display:flex; align-items:center; justify-content:center;
background:var(--signal-soft);
color:var(--signal);
margin-bottom:14px;
}
.hub-card h3{ font-size:17px; margin-bottom:6px; }
.hub-card p{ font-size:13px; margin-bottom:0; flex:1; line-height:1.45; }
.hub-card .card-foot{
display:flex; align-items:center; justify-content:space-between;
margin-top:14px; padding-top:12px;
border-top:1px solid var(--line-soft);
}
.hub-card .meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--mute-dim); }
.hub-card .arrow{ color:var(--mute); transition:transform .15s ease, color .15s ease; }
.hub-card:hover .arrow{ color:var(--signal); transform:translateX(3px); }
.hub-card.wide{ grid-column:span 2; }
@media (max-width:560px){.hub-card.wide{ grid-column:span 1; }}
.page-head{
position:relative;
padding:40px 24px 22px;
max-width:var(--maxw); margin:0 auto;
border-bottom:1px solid var(--line);
overflow:hidden;
}
.page-head::before{
content:"";
position:absolute;
top:-200px; right:-120px;
width:440px; height:440px;
background:radial-gradient(circle, rgba(255,200,87,0.12) 0%, rgba(255,200,87,0.04) 45%, transparent 70%);
pointer-events:none;
z-index:0;
}
.page-head > *{ position:relative; z-index:1; }
.page-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
@media (max-width:560px){.page-head{ padding:32px 20px 20px; }}
.breadcrumb{
display:flex; align-items:center; gap:9px; flex-wrap:wrap; row-gap:8px;
font-family:var(--font-mono); font-size:12px; color:var(--mute-dim);
margin-bottom:14px;
}
.next-guide-link{
margin-left:auto;
display:inline-flex; align-items:center; gap:7px;
color:var(--mute);
border:1px solid var(--line);
background:var(--panel);
border-radius:999px;
padding:5px 10px 5px 12px;
transition:color .15s ease, border-color .15s ease, background .15s ease;
white-space:nowrap;
}
.next-guide-link:hover{ color:var(--signal); border-color:var(--signal-soft); background:var(--panel-hover); }
.next-guide-link .next-arrow{ display:inline-block; transition:transform .15s ease; }
.next-guide-link:hover .next-arrow{ transform:translateX(3px); }
@media (max-width:480px){.next-guide-link .next-label{ display:none; }
.next-guide-link{ padding:6px 11px; }}
.breadcrumb a{ color:var(--mute); }
.breadcrumb a:hover{ color:var(--signal); }
.back-link{
display:inline-flex; align-items:center; gap:7px;
color:var(--mute);
border:1px solid var(--line);
background:var(--panel);
border-radius:999px;
padding:5px 12px 5px 10px;
transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.back-link:hover{ color:var(--signal); border-color:var(--signal-soft); background:var(--panel-hover); }
.back-arrow{ display:inline-block; transition:transform .15s ease; }
.back-link:hover .back-arrow{ transform:translateX(-3px); }
.crumb-sep{ color:var(--line); }
.page-head h1{ font-size:clamp(28px,4vw,40px); }
.page-head .lede{ color:var(--mute); max-width:60ch; font-size:16px; }
.section{
padding:34px 24px;
max-width:var(--maxw); margin:0 auto;
}
.section h2{ font-size:22px; margin-bottom:6px; }
.section .section-sub{ color:var(--mute-dim); font-family:var(--font-mono); font-size:12.5px; margin-bottom:20px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){.grid-4{ grid-template-columns:repeat(3,1fr); }}
@media (max-width:760px){.grid-4{ grid-template-columns:repeat(2,1fr); }}
@media (max-width:600px){.grid-3,.grid-2,.grid-4{ grid-template-columns:1fr; }}
.page-terminal .page-head,
.page-terminal .section{
max-width:min(2400px, 96vw);
}
.page-terminal .section{
padding-bottom:20px;
}
.page-terminal .page-head{
padding-top:24px;
padding-bottom:10px;
}
.page-terminal .breadcrumb{ margin-bottom:8px; }
.page-terminal .page-head::before{ display:none; }
.page-terminal .term-tabs{
margin:10px 0 14px;
}
.page-terminal .grid-2,
.page-terminal .grid-3{
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
gap:12px;
}
@media (max-width:600px){.page-terminal .grid-2,
.page-terminal .grid-3{ grid-template-columns:1fr; }}
.item-card{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:20px;
transition:border-color .15s ease;
}
.item-card:hover{ border-color:var(--signal-soft); }
.item-card h4{ font-size:15.5px; margin-bottom:6px; }
.item-card p{ font-size:13.5px; margin-bottom:12px; }
.status{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
padding:3px 8px; border-radius:999px; display:inline-block;
}
.status.soon{ color:var(--mute); background:var(--void); border:1px solid var(--line); }
.status.live{ color:var(--pulse); background:var(--pulse-soft); }
.status.partner{ color:var(--signal); background:var(--signal-soft); }
.status.nokyc{ color:var(--cyan); background:var(--cyan-soft); }
.continue-widget[hidden]{ display:none; }
.continue-card{
display:flex; align-items:center; justify-content:space-between; gap:16px;
background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--pulse);
border-radius:var(--radius-sm); padding:16px 20px;
transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.continue-card:hover{ background:var(--panel-hover); transform:translateY(-2px); }
.continue-card-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.continue-eyebrow{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--pulse);
}
.continue-title{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); }
.continue-meta{ font-family:var(--font-mono); font-size:12px; color:var(--mute-dim); }
.continue-arrow{ font-size:18px; color:var(--pulse); flex-shrink:0; transition:transform .15s ease; }
.continue-card:hover .continue-arrow{ transform:translateX(3px); }
.continue-card--next-step,
.continue-card--done{ border-left-color:var(--signal); }
.continue-card--next-step .continue-eyebrow,
.continue-card--done .continue-eyebrow{ color:var(--signal); }
.continue-card--next-step .continue-arrow,
.continue-card--done .continue-arrow{ color:var(--signal); }
@media (max-width:560px){.continue-title{ font-size:14px; }
.continue-card{ padding:14px 16px; }}
.card-top-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.fee-stats{
display:flex; gap:16px;
margin:12px 0 14px;
padding-top:12px;
border-top:1px solid var(--line-soft);
}
.fee-stat{ flex:1; }
.fee-stat .fee-label{
display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em;
text-transform:uppercase; color:var(--mute-dim); margin-bottom:2px;
}
.fee-stat .fee-val{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); }
.btn-sm{ padding:7px 14px; font-size:11.5px; }
.track-tabs{
display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 26px;
}
.track-tab{
display:flex; align-items:center; gap:9px;
font-family:var(--font-mono); font-size:12.5px;
padding:9px 16px 9px 10px; border-radius:999px;
border:1px solid var(--line); background:var(--panel); color:var(--mute);
cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.track-tab:hover{ color:var(--ink); border-color:var(--signal-soft); }
.track-tab .track-tab-icon{
width:24px; height:24px; border-radius:7px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.track-tab .track-tab-icon svg{ width:14px; height:14px; }
.track-tab.basics .track-tab-icon{ background:var(--pulse-soft); color:var(--pulse); }
.track-tab.trading .track-tab-icon{ background:var(--signal-soft); color:var(--signal); }
.track-tab.safety .track-tab-icon{ background:var(--violet-soft); color:var(--violet); }
.track-tab.derivatives .track-tab-icon{ background:var(--cyan-soft); color:var(--cyan); }
.track-tab .track-tab-count{ color:var(--mute-dim); }
.track-tab.active{ border-color:var(--line); background:var(--panel-hover); color:var(--ink); font-weight:500; }
.track-panel{ display:none; }
.track-panel.active{ display:block; animation:term-fade .12s ease; }
@media (max-width:560px){.track-tab{ flex:1 1 auto; justify-content:center; }}
.guide-track{ margin-bottom:40px; }
.guide-track:last-child{ margin-bottom:0; }
.guide-track-head{
display:flex; align-items:center; gap:14px;
padding-bottom:14px; margin-bottom:18px;
border-bottom:1px solid var(--line-soft);
}
.track-icon{
width:38px; height:38px; border-radius:10px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.track-icon svg{ width:19px; height:19px; }
.guide-track-head h3{ font-size:16.5px; margin-bottom:2px; }
.guide-track-head .track-desc{ font-size:13px; color:var(--mute-dim); margin:0; }
.track-count{
margin-left:auto; flex-shrink:0;
font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
color:var(--mute-dim); border:1px solid var(--line); border-radius:999px;
padding:4px 10px; white-space:nowrap;
}
@media (max-width:560px){.track-count{ display:none; }}
.section-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.section-head-row .section-sub{ margin-bottom:0; }
.guide-progress-summary{
display:flex; align-items:center; gap:10px;
font-family:var(--font-mono); font-size:12px; color:var(--mute);
white-space:nowrap; padding-top:3px;
}
.guide-progress-summary b{ color:var(--pulse); }
.guide-progress-reset{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
color:var(--mute-dim); background:transparent; border:1px solid var(--line); border-radius:999px;
padding:3px 9px; cursor:pointer; transition:color .15s ease, border-color .15s ease;
}
.guide-progress-reset:hover{ color:var(--ink); border-color:var(--mute-dim); }
.track-tabs.guide-progress{ position:relative; padding-bottom:13px; }
.track-tabs.guide-progress::after{
content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
background:var(--line); border-radius:999px;
}
.guide-progress-fill{
position:absolute; left:0; bottom:0; height:3px; width:0%;
background:var(--pulse); border-radius:999px; transition:width .4s ease;
}
.guide-top-right{ display:flex; align-items:center; gap:8px; }
.guide-read-badge{ white-space:nowrap; }
.guide-card.is-read{ background:var(--panel-hover); }
.badge-strip{ display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 22px; }
.badge-strip:empty{ display:none; margin:0; }
.badge-chip{
display:inline-flex; align-items:center; gap:8px;
border:1px solid var(--line); background:var(--panel);
padding:7px 13px 7px 10px;
font-family:var(--font-mono); font-size:12px;
animation:term-fade .2s ease;
}
.badge-chip-icon{ width:16px; height:16px; flex-shrink:0; display:flex; }
.badge-chip-icon svg{ width:16px; height:16px; }
.badge-chip-label{ color:var(--ink); font-weight:500; }
.badge-chip--basics .badge-chip-icon{ color:var(--pulse); }
.badge-chip--trading .badge-chip-icon{ color:var(--signal); }
.badge-chip--safety .badge-chip-icon{ color:var(--violet); }
.badge-chip--derivatives .badge-chip-icon{ color:var(--cyan); }
.badge-chip--all .badge-chip-icon{ color:var(--signal); }
.badge-chip--all .badge-chip-label{ color:var(--signal); font-weight:600; }
.badge-chip--quiz{ font-size:12.5px; }
.badge-chip--quiz-great .badge-chip-label{ color:var(--pulse); font-weight:600; }
.badge-chip--quiz-good .badge-chip-label{ color:var(--pulse); }
.badge-chip--quiz-mid .badge-chip-label{ color:var(--signal); }
.badge-chip--quiz-low .badge-chip-label{ color:var(--danger); }
.track-complete-banner{
display:flex; align-items:center; gap:14px;
background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--pulse);
border-radius:var(--radius-sm); padding:16px 20px;
margin:28px 0; animation:term-fade .2s ease;
}
.track-complete-icon{ font-size:26px; line-height:1; flex-shrink:0; }
.track-complete-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.track-complete-eyebrow{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--pulse);
}
.track-complete-title{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); }
.track-complete-link{
font-family:var(--font-mono); font-size:12px; color:var(--mute); white-space:nowrap; flex-shrink:0;
transition:color .15s ease;
}
.track-complete-link:hover{ color:var(--ink); }
.track-complete-banner--basics .track-complete-eyebrow{ color:var(--pulse); }
.track-complete-banner--trading .track-complete-eyebrow{ color:var(--signal); }
.track-complete-banner--safety .track-complete-eyebrow{ color:var(--violet); }
.track-complete-banner--derivatives .track-complete-eyebrow{ color:var(--cyan); }
.track-complete-banner--all .track-complete-eyebrow{ color:var(--signal); }
.track-complete-banner--all .track-complete-link{ color:var(--signal); }
@media (max-width:560px){.track-complete-banner{ padding:14px 16px; gap:10px; }
.track-complete-icon{ font-size:22px; }
.track-complete-title{ font-size:14px; }
.track-complete-link{ display:none; }}
.guide-quiz[hidden]{ display:none; }
.guide-quiz{
border-left:2px solid var(--signal);
background:var(--panel);
border:1px solid var(--line);
border-left-width:2px; border-left-color:var(--signal);
padding:18px 20px;
margin:28px 0;
}
.quiz-label{
display:block; color:var(--signal); font-family:var(--font-mono);
font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;
}
.quiz-prior-note{
display:block; font-family:var(--font-mono); font-size:11.5px; color:var(--mute-dim); margin:-4px 0 12px;
}
.quiz-question{ font-size:14.5px; color:var(--ink); margin:0 0 14px; font-weight:500; }
.quiz-options{ display:flex; flex-direction:column; gap:8px; }
.quiz-option{
text-align:left; font-family:var(--font-body); font-size:13.5px; color:var(--ink);
background:var(--void); border:1px solid var(--line); padding:10px 14px;
cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.quiz-option:hover:not(:disabled){ border-color:var(--signal-soft); background:var(--panel-hover); }
.quiz-option:disabled{ cursor:default; }
.quiz-option.correct{ border-color:var(--pulse); background:var(--pulse-soft); color:var(--pulse); }
.quiz-option.incorrect{ border-color:var(--danger); background:var(--danger-soft); color:var(--danger); }
.quiz-feedback{ font-size:13px; margin:14px 0 0; line-height:1.5; }
.quiz-feedback[hidden]{ display:none; }
.quiz-feedback.is-correct{ color:var(--pulse); }
.quiz-feedback.is-incorrect{ color:var(--danger); }
.quiz-score-note{
display:flex; align-items:center; gap:7px;
font-family:var(--font-mono); font-size:11.5px; color:var(--mute); font-weight:500;
margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line-soft);
}
.quiz-score-note[hidden]{ display:none; }
.guide-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:980px){.guide-grid{ grid-template-columns:repeat(2,1fr); }}
@media (max-width:560px){.guide-grid{ grid-template-columns:1fr; }}
.guide-card{
display:block;
background:var(--panel);
border:1px solid var(--line);
border-left:3px solid var(--line);
border-radius:var(--radius-sm);
padding:18px 18px 16px;
transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.guide-card:hover{ background:var(--panel-hover); transform:translateY(-2px); }
.guide-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.guide-icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.guide-icon svg{ width:16px; height:16px; }
.guide-num{ font-family:var(--font-mono); font-size:11px; color:var(--mute-dim); }
.guide-card h4{ font-size:14.5px; margin-bottom:6px; line-height:1.3; }
.guide-card p{ font-size:12.5px; margin-bottom:14px; color:var(--mute-dim); line-height:1.45; }
.guide-cta{
display:inline-flex; align-items:center; gap:5px;
font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
}
.guide-cta .arrow{ transition:transform .15s ease; }
.guide-card:hover .guide-cta .arrow{ transform:translateX(3px); }
.guide-track-head.basics .track-icon,
.guide-card.basics .guide-icon{ background:var(--pulse-soft); color:var(--pulse); }
.guide-card.basics{ border-left-color:var(--pulse); }
.guide-card.basics .guide-cta{ color:var(--pulse); }
.guide-track-head.trading .track-icon,
.guide-card.trading .guide-icon{ background:var(--signal-soft); color:var(--signal); }
.guide-card.trading{ border-left-color:var(--signal); }
.guide-card.trading .guide-cta{ color:var(--signal); }
.guide-track-head.safety .track-icon,
.guide-card.safety .guide-icon{ background:var(--violet-soft); color:var(--violet); }
.guide-card.safety{ border-left-color:var(--violet); }
.guide-card.safety .guide-cta{ color:var(--violet); }
.guide-track-head.derivatives .track-icon,
.guide-card.derivatives .guide-icon{ background:var(--cyan-soft); color:var(--cyan); }
.guide-card.derivatives{ border-left-color:var(--cyan); }
.guide-card.derivatives .guide-cta{ color:var(--cyan); }
.glossary-search{
position:relative; margin:28px 0 6px; max-width:420px;
}
.glossary-search input{
width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
font-family:var(--font-body); font-size:14.5px; border-radius:var(--radius-sm);
padding:11px 14px 11px 38px; outline:none; transition:border-color .15s ease;
}
.glossary-search input:focus{ border-color:var(--signal-soft); }
.glossary-search input::placeholder{ color:var(--mute-dim); }
.glossary-search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--mute-dim); pointer-events:none; }
.glossary-count{ font-family:var(--font-mono); font-size:12px; color:var(--mute-dim); margin:10px 0 0; }
.glossary-jump{ display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 8px; }
.glossary-jump a{
font-family:var(--font-mono); font-size:12px; color:var(--mute);
border:1px solid var(--line); border-radius:6px;
width:30px; height:30px; display:flex; align-items:center; justify-content:center;
transition:color .15s ease, border-color .15s ease;
}
.glossary-jump a:hover{ color:var(--signal); border-color:var(--signal-soft); }
.glossary-jump a.disabled{ color:var(--mute-dim); opacity:.35; pointer-events:none; }
.glossary-letter{ margin-top:38px; scroll-margin-top:24px; }
.glossary-letter h2{
font-family:var(--font-mono); color:var(--signal); font-size:19px;
border-bottom:1px solid var(--line-soft); padding-bottom:9px; margin-bottom:4px;
}
.glossary-term{ padding:16px 0; border-bottom:1px solid var(--line-soft); }
.glossary-term:last-child{ border-bottom:none; }
.glossary-term dt{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); margin-bottom:5px; }
.glossary-term dd{ margin:0; font-size:14px; color:var(--mute); line-height:1.55; }
.glossary-term dd a{ color:var(--signal); }
.glossary-term.hidden{ display:none; }
.glossary-letter.hidden{ display:none; }
.placeholder{
border:1px dashed var(--line);
border-radius:var(--radius);
padding:40px 24px;
text-align:center;
color:var(--mute-dim);
font-family:var(--font-mono);
font-size:13px;
background:repeating-linear-gradient(135deg, var(--panel), var(--panel) 10px, var(--line-soft) 10px, var(--line-soft) 11px);
}
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table.compare{ width:100%; border-collapse:collapse; min-width:720px; font-size:13.5px; }
table.compare th, table.compare td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
table.compare thead th{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute-dim); background:var(--panel); }
table.compare tbody tr:last-child td{ border-bottom:none; }
table.compare tbody tr:hover{ background:var(--panel-hover); }
table.compare.compare-wrap{ min-width:0; width:100%; table-layout:fixed; }
table.compare.compare-wrap th, table.compare.compare-wrap td{ white-space:normal; word-break:break-word; }
@media (max-width:700px){table.compare.compare-wrap{ font-size:12.5px; }
table.compare.compare-wrap th, table.compare.compare-wrap td{ padding:10px 10px; }}
.callout{
border-left:2px solid var(--signal);
background:var(--signal-soft);
padding:16px 18px;
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
font-size:13.5px;
color:var(--ink);
margin:24px 0;
}
.callout b{ color:var(--signal); }
.calc-tabs{
display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;
}
.calc-tab{
font-family:var(--font-mono); font-size:12.5px;
padding:9px 16px; border-radius:999px;
border:1px solid var(--line); background:var(--panel); color:var(--mute);
cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.calc-tab:hover{ color:var(--ink); border-color:var(--signal-soft); }
.calc-tab.active{ color:var(--void); background:var(--signal); border-color:var(--signal); font-weight:500; }
.calc-panel{ display:none; }
.calc-panel.active{
display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;
}
@media (max-width:820px){.calc-panel.active{ grid-template-columns:1fr; }}
.calc-form, .calc-result{
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
padding:24px;
}
.calc-form h3, .calc-result h3{ font-size:16px; margin-bottom:18px; }
.field{ margin-bottom:16px; }
.field:last-child{ margin-bottom:0; }
.field label{
display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
color:var(--mute-dim); margin-bottom:7px;
}
.field input[type=number], .field select{
width:100%; background:var(--void); border:1px solid var(--line); border-radius:var(--radius-sm);
color:var(--ink); font-family:var(--font-body); font-size:14.5px; padding:10px 12px;
-moz-appearance:textfield;
}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.field input:focus, .field select:focus{ border-color:var(--signal); outline:none; }
.field .unit-row{ display:flex; align-items:center; gap:8px; }
.field .unit-row span{ font-family:var(--font-mono); font-size:12.5px; color:var(--mute-dim); }
.seg{ display:flex; gap:8px; }
.seg button{
flex:1; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--line);
background:var(--void); color:var(--mute); font-family:var(--font-mono); font-size:12.5px; cursor:pointer;
transition:all .15s ease;
}
.seg button.on{ border-color:var(--pulse); color:var(--pulse); background:var(--pulse-soft); }
.seg button.on.danger{ border-color:var(--danger); color:var(--danger); background:rgba(255,77,77,.12); }
.calc-result{ display:flex; flex-direction:column; }
.result-row{
display:flex; justify-content:space-between; align-items:baseline; gap:12px;
padding:12px 0; border-bottom:1px solid var(--line-soft);
}
.result-row:first-of-type{ padding-top:0; }
.result-row:last-child{ border-bottom:none; }
.result-row .rlabel{ font-family:var(--font-mono); font-size:12px; color:var(--mute); }
.result-row .rvalue{ font-family:var(--font-mono); font-size:17px; color:var(--ink); font-weight:500; white-space:nowrap; }
.result-row .rvalue.big{ font-size:28px; color:var(--signal); }
.result-row .rvalue.pos{ color:var(--pulse); }
.result-row .rvalue.neg{ color:var(--danger); }
.calc-hint{ font-size:12.5px; color:var(--mute-dim); margin-top:16px; line-height:1.5; }
table.fee-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; }
table.fee-table th, table.fee-table td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft); }
table.fee-table thead th{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute-dim); }
table.fee-table tbody tr.cheapest{ background:var(--pulse-soft); }
table.fee-table tbody tr.cheapest td:first-child{ color:var(--pulse); font-weight:600; }
table.fee-table td.num{ font-family:var(--font-mono); }
.chart-sym-btn.on{ border-color:var(--signal); color:var(--signal); background:var(--signal-soft); font-weight:600; }
.pos{ color:var(--pulse); }
.neg{ color:var(--danger); }
.calc-quick-panel.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.calc-quick-body .calc-tabs{ margin-bottom:18px; gap:6px; }
.calc-quick-body .calc-tab{ padding:7px 12px; font-size:13px; }
.calc-quick-body .calc-form, .calc-quick-body .calc-result{ padding:18px; }
@media (max-width:600px){.calc-quick-panel.open{ transform:translateY(0); }
.calc-quick-panel.open ~ .calc-quick-backdrop{
display:block; position:fixed; inset:0; z-index:119;
background:rgba(0,0,0,.55);
}}
@media (max-width:600px){.radio-quick-panel.open{ transform:translateY(0); }}
table.term-table td.num{ font-family:var(--font-mono); text-align:right; }
.funding-dot.pos{ background:var(--pulse); }
.funding-dot.neg{ background:var(--danger); }
.page-terminal .grid-snapshot{
grid-template-columns: 1fr 1fr 1fr;
align-items:stretch;
}
@media (max-width:900px){.page-terminal .grid-snapshot{ grid-template-columns: 1fr 1fr; }}
@media (max-width:600px){.page-terminal .grid-snapshot{ grid-template-columns: 1fr; }}
.heatmap-empty-note .dot{ flex:none; }
.impact.high{ color:var(--danger); background:rgba(255,77,77,.12); }
.widget-info-pop.open{ display:block; }
.article .spec-table-wrap{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
padding:6px;
margin:24px 0;
overflow-x:auto;
}
table.spec-table{ width:100%; border-collapse:collapse; min-width:480px; font-size:14px; }
table.spec-table th, table.spec-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-soft); }
table.spec-table thead th{
font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
color:var(--mute-dim); background:var(--panel-hover);
}
table.spec-table thead th:first-child{ border-top-left-radius:var(--radius-sm); }
table.spec-table thead th:last-child{ border-top-right-radius:var(--radius-sm); }
table.spec-table tbody th{
font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--mute);
white-space:nowrap; background:var(--panel-hover);
}
table.spec-table tbody td{ color:var(--ink); }
table.spec-table tbody tr:last-child th, table.spec-table tbody tr:last-child td{ border-bottom:none; }
table.spec-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.015); }
.article{
max-width:74ch; margin:0 auto;
padding:44px 24px 80px;
}
.article .meta-row{
display:flex; flex-wrap:wrap; gap:10px; align-items:center;
margin-bottom:22px;
}
.article h1{ font-size:clamp(26px,4vw,38px); line-height:1.15; margin-bottom:.35em; }
.article .lede{ font-size:16.5px; color:var(--mute); margin-bottom:8px; }
.article .tldr{
background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--pulse);
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
padding:16px 18px; margin:28px 0;
}
.article .tldr b{ color:var(--pulse); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:8px; }
.article .tldr ul{ margin:0; padding-left:18px; }
.article .tldr li{ font-size:14px; color:var(--ink); margin-bottom:4px; }
.article h2{ font-size:21px; margin-top:2.2em; margin-bottom:.5em; }
.article h3{ font-size:16.5px; margin-top:1.7em; margin-bottom:.5em; }
.article p{ font-size:15.5px; color:var(--mute); margin-bottom:1.1em; }
.article ul, .article ol{ color:var(--mute); font-size:15.5px; padding-left:22px; margin-bottom:1.2em; }
.article li{ margin-bottom:.5em; }
.article strong{ color:var(--ink); }
.article a:not(.btn):not(.back-link):not(.next-guide-link){ color:var(--signal); border-bottom:1px solid var(--signal-soft); }
.article a:not(.btn):not(.back-link):not(.next-guide-link):hover{ border-color:var(--signal); }
.article .inline-cta{
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
padding:18px 20px; margin:28px 0;
}
.article .inline-cta p{ margin:0; font-size:14px; color:var(--ink); }
.article .inline-cta--terminal{ border-color:var(--signal-soft); }
.article .inline-cta--terminal .ic-label{
display:flex; align-items:center; gap:7px;
font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
letter-spacing:.07em; color:var(--signal); margin-bottom:6px;
}
.article .inline-cta--terminal .ic-label .dot{
width:6px; height:6px; border-radius:50%; background:var(--pulse);
box-shadow:0 0 0 3px var(--pulse-soft);
}
.article .inline-cta--terminal .btn{ flex:none; white-space:nowrap; }
@media (max-width:560px){.article .inline-cta--terminal{ flex-direction:column; align-items:stretch; }
.article .inline-cta--terminal .btn{ justify-content:center; }}
.article .guide-diagram{
margin:22px 0 30px; background:var(--panel); border:1px solid var(--line);
border-radius:var(--radius); padding:18px 18px 14px;
}
.article .guide-diagram svg{ display:block; width:100%; height:auto; }
.article .guide-diagram figcaption{
margin-top:12px; font-size:12px; color:var(--mute-dim); text-align:center; line-height:1.5;
}
.article .mistake{
background:rgba(255,77,77,.06); border:1px solid rgba(255,77,77,.25);
border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:12px;
}
.article .mistake b{ color:var(--danger); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:4px; }
.article .mistake p{ margin:0; font-size:14px; }
.guide-related{ margin-top:48px; padding-top:26px; border-top:1px solid var(--line); }
.guide-related h3{
font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase;
letter-spacing:.07em; color:var(--mute-dim); margin:0 0 14px;
}
.guide-related-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
.article a.guide-related-link{
display:block; border:1px solid var(--line); border-bottom:1px solid var(--line);
border-radius:var(--radius-sm); background:var(--panel);
padding:14px 16px; transition:border-color .15s ease, background .15s ease;
}
.article a.guide-related-link:hover{ border-color:var(--signal-soft); background:var(--panel-hover); }
.guide-related-link .grl-title{ display:block; font-size:13.5px; color:var(--ink); font-weight:600; margin-bottom:4px; }
.guide-related-link .grl-desc{ display:block; font-size:12px; color:var(--mute-dim); line-height:1.4; }
.article a.guide-related-link.is-tool{ border-color:var(--signal-soft); }
.article a.guide-related-link.is-tool:hover{ border-color:var(--signal); background:var(--panel-hover); }
.guide-related-link .grl-tag{
display:flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px;
text-transform:uppercase; letter-spacing:.06em; color:var(--signal); margin-bottom:6px;
}
.guide-related-link .grl-tag::before{ content:"⌁"; font-size:11px; }
.guide-nav{
display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
margin-top:52px; padding-top:24px; border-top:1px solid var(--line);
}
.guide-nav a{ font-family:var(--font-mono); font-size:12.5px; color:var(--mute); display:flex; align-items:center; gap:8px; }
.guide-nav a:hover{ color:var(--signal); }
@media (max-width:560px){.article{ padding:32px 20px 60px; }}
.site-footer{
border-top:1px solid var(--line);
margin-top:40px;
padding:44px 24px 32px;
}
.site-footer--mini{ padding:16px 24px 14px; }
.footer-mini{
max-width:var(--maxw); margin:0 auto;
display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px;
font-family:var(--font-mono); font-size:11.5px;
}
.footer-mini-copy{ color:var(--mute-dim); flex-shrink:0; }
.footer-mini-links{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.footer-mini-links a{ color:var(--mute); }
.footer-mini-links a:hover{ color:var(--signal); }
.page-terminal .site-footer--mini{ margin-top:20px; padding:12px 24px 10px; }
@media (max-width:760px){.nav-links{
position:fixed; top:var(--site-header-h, 60px); left:0; right:0; bottom:0;
background:var(--void);
flex-direction:column; gap:0;
padding:8px 24px;
transform:translateY(-8px);
opacity:0; pointer-events:none;
transition:opacity .15s ease, transform .15s ease;
z-index:49;
overflow-y:auto;
}
.nav-links.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.nav-links li{ border-bottom:1px solid var(--line-soft); }
.nav-links a{ display:block; padding:16px 0; }
.nav-toggle{ display:inline-flex; }}
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-search-btn{
display:inline-flex; align-items:center; gap:7px;
background:none; border:1px solid var(--line); border-radius:8px;
color:var(--mute-dim); padding:7px 10px; cursor:pointer; flex:none;
font-family:var(--font-mono); font-size:11.5px;
transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-search-btn:hover{ color:var(--ink); border-color:var(--signal-soft); background:var(--panel-hover); }
.nav-search-btn kbd{
font-family:var(--font-mono); font-size:10.5px; color:var(--mute-dim);
border:1px solid var(--line); border-radius:4px; padding:1px 5px;
}
@media (max-width:560px){.nav-search-btn kbd{ display:none; }
.nav-search-btn span.nsb-label{ display:none; }}
.search-overlay{
position:fixed; inset:0; z-index:950;
background:rgba(3,3,3,0.78); backdrop-filter:blur(4px);
display:none; align-items:flex-start; justify-content:center;
padding:11vh 20px 20px;
}
.search-overlay.open{ display:flex; }
.search-panel{
width:100%; max-width:580px; max-height:72vh;
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
box-shadow:0 24px 70px rgba(0,0,0,.55);
display:flex; flex-direction:column; overflow:hidden;
}
.search-panel__input-row{
display:flex; align-items:center; gap:10px;
padding:14px 16px; border-bottom:1px solid var(--line); flex:none;
}
.search-panel__input-row svg{ color:var(--mute-dim); flex:none; }
.search-panel__input-row input{
flex:1; min-width:0; background:none; border:none; outline:none;
color:var(--ink); font-family:var(--font-mono); font-size:14.5px;
}
.search-panel__input-row input::placeholder{ color:var(--mute-dim); }
.search-panel__esc{
font-family:var(--font-mono); font-size:10.5px; color:var(--mute-dim);
border:1px solid var(--line); border-radius:4px; padding:2px 6px; flex:none;
}
.search-results{ overflow-y:auto; padding:8px; }
.search-result{
display:flex; flex-direction:column; gap:2px;
padding:10px 12px; border-radius:8px; cursor:pointer;
}
.search-result:hover, .search-result.active{ background:var(--panel-hover); }
.search-result__top{ display:flex; align-items:center; gap:8px; }
.search-result__title{ font-size:13.5px; color:var(--ink); }
.search-result__cat{
font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase;
letter-spacing:.06em; color:var(--signal); border:1px solid var(--signal-soft);
border-radius:4px; padding:1px 5px; flex:none;
}
.search-result__desc{ font-size:12px; color:var(--mute-dim); line-height:1.4; }
.search-empty{ padding:30px 16px; text-align:center; color:var(--mute-dim); font-size:13px; font-family:var(--font-mono); }
.search-hint{ padding:10px 16px; border-top:1px solid var(--line); flex:none; display:flex; gap:16px; font-family:var(--font-mono); font-size:11px; color:var(--mute-dim); }
.search-hint kbd{ border:1px solid var(--line); border-radius:4px; padding:1px 5px; margin-right:5px; }
.nav-watchlist-btn{
position:relative; display:inline-flex; align-items:center; justify-content:center;
background:none; border:1px solid var(--line); border-radius:8px;
color:var(--mute-dim); width:32px; height:32px; cursor:pointer; flex:none;
transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-watchlist-btn:hover, .nav-watchlist-btn[aria-expanded="true"]{ color:var(--signal); border-color:var(--signal-soft); background:var(--panel-hover); }
.nav-watchlist-btn svg{ display:block; }
.watchlist-badge{
position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 3px;
background:var(--signal); color:var(--void); border-radius:8px;
font-family:var(--font-mono); font-size:10px; font-weight:600; line-height:16px; text-align:center;
}
.watchlist-panel{
position:fixed; top:66px; right:16px; z-index:220; width:340px; max-width:calc(100vw - 32px);
max-height:calc(100vh - 90px); overflow-y:auto;
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
box-shadow:0 24px 70px rgba(0,0,0,.55);
opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
.watchlist-panel.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.watchlist-panel__head{
display:flex; align-items:center; justify-content:space-between;
padding:14px 16px; border-bottom:1px solid var(--line);
background:var(--surface-header);
}
.watchlist-panel__head h4{ font-size:14px; margin:0; }
.watchlist-close{ background:none; border:none; color:var(--mute-dim); font-size:18px; cursor:pointer; line-height:1; padding:2px 4px; }
.watchlist-close:hover{ color:var(--ink); }
.watchlist-list{ padding:6px 8px; }
.watchlist-empty-hint{ font-size:12.5px; color:var(--mute-dim); line-height:1.5; padding:14px 10px; }
.watchlist-row{
padding:10px 10px; border-radius:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.watchlist-row:hover{ background:var(--panel-hover); }
.watchlist-row__main{ display:flex; flex-direction:column; min-width:52px; }
.watchlist-sym{ font-family:var(--font-mono); font-size:13px; color:var(--ink); font-weight:600; }
.watchlist-name{ font-size:10.5px; color:var(--mute-dim); }
.watchlist-row__price{ display:flex; flex-direction:column; align-items:flex-end; margin-left:auto; }
.watchlist-price{ font-family:var(--font-mono); font-size:13px; color:var(--ink); }
.watchlist-change{ font-family:var(--font-mono); font-size:11px; }
.watchlist-change.up{ color:var(--pulse); }
.watchlist-change.down{ color:var(--danger); }
.watchlist-row__actions{ display:flex; align-items:center; gap:4px; flex:none; }
.watchlist-remove-btn{
background:none; border:1px solid var(--line); border-radius:7px; color:var(--mute-dim);
width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
font-size:15px;
}
.watchlist-remove-btn:hover{ color:var(--ink); border-color:var(--signal-soft); }
.watchlist-add{ padding:10px 16px 14px; border-top:1px solid var(--line); }
.watchlist-add-label{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute-dim); margin:0 0 8px; }
.watchlist-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.watchlist-chip{
background:none; border:1px solid var(--line); border-radius:16px; color:var(--mute);
padding:5px 10px; font-family:var(--font-mono); font-size:11.5px; cursor:pointer;
transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.watchlist-chip:hover{ color:var(--signal); border-color:var(--signal-soft); background:var(--panel-hover); }
.watchlist-footer-link{
display:block; padding:12px 16px; border-top:1px solid var(--line);
font-family:var(--font-mono); font-size:11.5px; color:var(--mute); text-align:center;
}
.watchlist-footer-link:hover{ color:var(--signal); }
@media (max-width:560px){.watchlist-panel{ right:8px; left:8px; width:auto; }}
@media (max-width:560px){.search-overlay{ padding:0; }
.search-panel{ max-width:none; max-height:100vh; height:100vh; border-radius:0; border:none; }}
.page-terminal .term-panel{ font-variant-numeric: tabular-nums; }
.mktw-row.on{ background:var(--signal-soft); }
.mktw-change.pos{ color:var(--pulse); }
.mktw-change.neg{ color:var(--danger); }
.chart-hero__change.pos{ color:var(--pulse); background:rgba(0,255,136,0.12); }
.chart-hero__change.neg{ color:var(--danger); background:rgba(255,77,77,0.12); }
.fsnap-split i.pos{ background:var(--pulse); }
.fsnap-split i.neg{ background:var(--danger); }
body.term-immersive .site-header,
body.term-immersive .site-footer,
body.term-immersive #term-data-note{
display:none !important;
}
.term-immersive-nav--idle:not(.open) .term-immersive-fab{ opacity:.3; }
.term-immersive-nav.open .term-immersive-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.page-terminal .section{ padding:26px 18px 15px; }
.page-terminal .term-tabs{ margin:8px 0 10px; }
.page-terminal .grid-2,
.page-terminal .grid-3{ gap:9px; }
.page-terminal .section{ padding:18px 18px 12px; }