:root {
  color-scheme: light dark;
  --surface: light-dark(#fafaf8, #141414);
  --subtle: light-dark(#f3f3ef, #1e1f1f);
  --card: light-dark(#fff, #222424);
  --ink: light-dark(#181919, #f5f5f2);
  --muted: light-dark(#606364, #a9ada9);
  --line: light-dark(#dedfda, #353737);
  --short: light-dark(#2257bd, #8eb5ff);
  --short-tint: light-dark(#e6edf9, #202e47);
  --accent: light-dark(#222424, #e8e9e5);
  --on-accent: light-dark(#fff, #171919);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color:var(--ink); background:var(--surface); -webkit-text-size-adjust:100%;
}
:root[data-theme="dark"] { color-scheme:dark; }
:root[data-theme="light"] { color-scheme:light; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body,h1,h2,p,figure { margin:0; }
a,button,input,select { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
:focus-visible,.appearance:focus-within { outline:2px solid currentColor; outline-offset:3px; }
.wrap { width:min(calc(100% - clamp(40px,10vw,144px)),1272px); margin-inline:auto; }
.mast { border-bottom:1px solid var(--line); background:var(--surface); z-index:3; }
.mast-inner,.mast-actions,.open-app,.hero-link,.home,.appearance,.asset,.market figcaption,.ratio-label,.footer { display:flex; align-items:center; }
.mast-inner,.market figcaption,.ratio-label,.footer { justify-content:space-between; }
.mast-inner { min-height:72px; }
.mast-actions { gap:8px; }
.home { min-height:48px; }
.wordmark { display:block; background:currentColor; aspect-ratio:436.79 / 164; mask:url("./wordmark.svg") center / contain no-repeat; }
.home .wordmark { width:68px; }
.appearance { width:44px; min-height:44px; position:relative; justify-content:center; border-radius:8px; }
.appearance select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.appearance svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.6; }
.mast-actions button { border:0; background:none; color:inherit; cursor:pointer; min-height:44px; min-width:44px; font-weight:600; }
.open-app,.hero-link { gap:18px; min-height:46px; padding:0 19px; width:max-content; border-radius:10px; background:var(--accent); color:var(--on-accent); font-weight:680; font-size:15px; }
.open-app span,.hero-link span { font-size:22px; line-height:1; }
:is(.open-app,.hero-link):hover { opacity:.85; }
@media (min-width:1024px) {
  .mast { background:#191a1a; border-color:#383939; color:#f5f5f2; }
  .open-app { color:#1c1d1d; background:#f5f5f2; }
}
.hero { min-height:clamp(510px,74svh,800px); padding-block:clamp(52px,6vw,110px); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,5vw,78px); align-items:center; }
.intro h1 .wordmark { width:min(85%,325px); }
.subtitle { margin-top:32px; font-size:clamp(26px,2.8vw,42px); font-weight:650; letter-spacing:-.05em; line-height:1.12; text-wrap:balance; }
.subtitle > span { display:block; }
.lead { max-width:37ch; margin-top:17px; color:var(--muted); font-size:clamp(16px,1.25vw,19px); line-height:1.55; }
.hero-link { margin-top:28px; padding:0 22px; min-height:48px; }
.terminal { border-radius:18px; background:var(--card); box-shadow:0 24px 64px -40px #0006; border:1px solid var(--line); overflow:hidden; min-width:0; }
.market { padding:clamp(16px,2vw,29px) clamp(14px,1.8vw,27px) 16px; background:#191a1a; color:#f5f5f2; }
.market figcaption { gap:10px; }
.asset { gap:9px; font-size:clamp(17px,1.6vw,23px); font-weight:680; letter-spacing:-.035em; }
.asset svg { width:29px; height:29px; }
.asset small,.basis,.demo,.scenario span { font-size:12px; font-weight:500; letter-spacing:0; }
.asset small,.basis,.demo { color:#b8bab7; }
.demo { border:1px solid #505252; border-radius:5px; padding:4px 7px; }
.quote { display:flex; align-items:baseline; gap:10px; margin-top:18px; font-variant-numeric:tabular-nums; }
.quote b { font-size:clamp(31px,3vw,46px); line-height:1; letter-spacing:-.055em; }
.quote span { color:#ff929d; font-size:14px; font-weight:650; }
.basis { margin-top:5px; }
.plot { display:block; width:100%; height:auto; margin-top:9px; }
.hedge { display:grid; grid-template-columns:1fr .84fr; align-items:center; gap:23px; padding:20px clamp(14px,1.8vw,27px); }
.hedge h2 { font-weight:650; font-size:clamp(16px,1.4vw,21px); letter-spacing:-.035em; }
.ratio-label { gap:8px; margin-top:14px; font-size:13px; color:var(--muted); }
.ratio-label output { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
#ratio { --progress:50%; display:block; width:100%; height:30px; margin:0; appearance:none; background:transparent; cursor:pointer; }
#ratio::-webkit-slider-runnable-track { height:5px; background:linear-gradient(to right,var(--short) var(--progress),var(--line) var(--progress)); border-radius:8px; }
#ratio::-moz-range-track { height:5px; background:var(--line); border-radius:8px; }
#ratio::-moz-range-progress { height:5px; background:var(--short); }
#ratio::-webkit-slider-thumb { appearance:none; background:var(--short); width:17px; height:17px; margin-top:-6px; border-radius:50%; }
#ratio::-moz-range-thumb { border:0; background:var(--short); width:17px; height:17px; border-radius:50%; }
.scenario { padding-left:clamp(12px,2vw,28px); border-left:1px solid var(--line); }
.scenario p { color:var(--muted); font-size:13px; }
.scenario strong { display:block; margin:4px 0; color:var(--short); font-size:clamp(24px,2.5vw,36px); line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.scenario span { color:var(--muted); font-size:11px; }
.footer { padding-block:24px; font-size:13px; color:var(--muted); }
.footer .wordmark { width:48px; color:var(--ink); }
.footer strong { color:var(--ink); }
html:lang(ko) {
  font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans CJK KR","Noto Sans KR",sans-serif;
  word-break:keep-all;
}
:lang(ko) .subtitle { font-weight:700; letter-spacing:-.035em; line-height:1.33; }
:lang(ko) .lead { line-height:1.65; text-wrap:pretty; }
:lang(ko) .hedge h2 { font-weight:700; letter-spacing:-.025em; line-height:1.4; }
@media (max-width:780px) {
  .hero { grid-template-columns:1fr; max-width:650px; gap:32px; }
  .intro h1 .wordmark { width:min(47vw,235px); }
  .subtitle { margin-top:19px; }
  .lead { max-width:43ch; margin-top:10px; }
  .hero-link { display:none; }
  .mast { position:sticky; top:0; }
  .mast-inner { min-height:64px; }
  .mast-actions { gap:2px; }
  .home .wordmark { width:55px; }
  .open-app { padding-inline:14px; gap:9px; }
  .hero { padding-block:38px 36px; }
}
@media (max-width:550px) {
  .hedge { gap:12px; }
  #ratio { height:42px; }
  .demo,.asset small,.scenario span { font-size:11px; }
  .asset { flex-wrap:wrap; gap:5px; }
}
@media (forced-colors:active) {
  .wordmark { background:CanvasText; forced-color-adjust:none; }
  .open-app,.hero-link { border:1px solid ButtonText; }
  #ratio { appearance:auto; }
}