/* Native visual tokens translated from HyperliquidApp/DesignSystem.swift.
   This is an illustrative website preview, not an execution interface. */

.native-workspace{--bg:#111314;--surface:#17191b;--elevated:#202224;--text:#e6e8e6;--muted:#99a1a6;--line:#e6e8e613;--up:#82baa3;--down:#cc857d;background:var(--bg);color:var(--text);border:1px solid #ffffff24;border-radius:12px;overflow:hidden;font:10px/1.4 -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;font-variant-numeric:tabular-nums;text-align:left;letter-spacing:0}
.native-workspace *{box-sizing:border-box}.native-workspace .up{color:var(--up)}.native-workspace .down{color:var(--down)}.native-workspace small{font-size:9px;color:var(--muted)}
.native-titlebar{height:25px;background:#303233;position:relative;text-align:center;padding:5px;font-weight:600;color:#b7baba}.native-dots{position:absolute;left:10px;top:8px;display:flex;gap:5px}.native-dots i{width:8px;height:8px;border-radius:50%;background:#ff6058}.native-dots i:nth-child(2){background:#ffbd2e}.native-dots i:nth-child(3){background:#28c840}
.native-toolbar{height:45px;display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-bottom:1px solid var(--line);color:var(--muted)}.native-toolbar strong{display:flex;align-items:center;font-size:14px;letter-spacing:-.6px;color:var(--text)}.native-toolbar strong img{margin-right:8px;border-radius:5px}.native-toolbar strong>span{color:var(--up)}
.native-body{display:grid;grid-template-columns:124px minmax(0,1fr) 182px;min-height:437px}.native-sidebar{background:var(--surface);border-right:1px solid var(--line);padding:12px 7px;display:flex;flex-direction:column}.native-caption{font-size:8px;font-weight:600;letter-spacing:1.4px;color:var(--muted);display:flex;justify-content:space-between;margin:0 4px 10px}.native-caption>span{font-size:12px}.native-nav{padding:7px 8px;color:var(--muted);border-radius:5px}.native-nav small{float:right}.native-workspace .selected{background:var(--elevated);color:var(--text)}.native-filter{color:#747d82;margin:16px 5px 8px;font-size:9px}.native-market{padding:8px 7px;border-radius:5px;margin-bottom:4px}.native-market>div{display:flex;justify-content:space-between;gap:3px}.native-market>div+div{font-size:8px;margin-top:4px;color:var(--muted)}.native-market b{font-size:10px}.native-market b span{color:var(--muted)}.native-sidebar-note{margin-top:auto;padding:24px 4px 0;font-size:7px;letter-spacing:1px;color:var(--muted);line-height:2}.native-sidebar-note span{font-size:8px;letter-spacing:0}
.native-market-header{display:flex;align-items:center;gap:18px;padding:15px 12px;height:65px}.native-market-header>div{display:grid;gap:4px}.native-market-header b{font-size:16px;letter-spacing:-.4px;white-space:nowrap}.native-market-header .native-stats{gap:4px;margin-left:auto}.native-stats strong{font-size:9px}.native-stats small{font-size:8px;white-space:nowrap}
.native-chart-and-book{display:grid;grid-template-columns:minmax(0,1fr) 146px}.native-chart{min-width:0;padding-top:6px}.native-intervals{font-size:8px;color:var(--muted);padding:5px 9px;white-space:nowrap}.native-intervals b{display:inline-block;padding:4px;background:var(--elevated);border-radius:3px;color:var(--text)}.native-ohlc{font-size:7px;padding:8px 9px;color:#b9c1c1;white-space:nowrap}.native-chart-svg{display:block;width:100%;height:235px;fill:none;stroke:none}.native-chart-svg text{fill:var(--muted);font:11px -apple-system,BlinkMacSystemFont,sans-serif;stroke:none}.native-chart-svg text[fill]{fill:var(--down)}.native-chart-footer{display:flex;gap:8px;padding:8px 10px;font-size:9px}.native-chart-footer span{font-size:7px;color:var(--muted)}
.native-book{border-left:1px solid var(--line);font-size:8px;min-width:0}.native-book-title{display:flex;justify-content:space-between;padding:9px 8px;font-weight:600;font-size:10px}.native-book-title>span{color:var(--muted);font-size:8px;font-weight:400}.native-book-labels,.native-book-row{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:3px;padding:4px 8px;text-align:right;position:relative;isolation:isolate}.native-book-labels{color:var(--muted);font-size:8px}.native-book-labels>span:first-child,.native-book-row>span:first-child{text-align:left}.native-book-row:before{content:'';position:absolute;right:0;top:0;width:var(--depth);height:100%;z-index:-1;background:#cc857d10}.native-book-row.ask>span:first-child{color:var(--down)}.native-book-row.bid>span:first-child{color:var(--up)}.native-book-row.bid:before{background:#82baa312}.native-mid{font-size:15px;font-weight:600;padding:7px 8px;display:flex;align-items:center;justify-content:space-between}.native-mid small{font-size:7px;font-weight:400}.native-funding{display:flex;justify-content:space-between;padding:0 8px 6px;font-size:7px;color:var(--muted)}.native-trades-title{border-top:1px solid var(--line);margin-top:8px}
.native-account-tabs{border-block:1px solid var(--line);padding:10px;font-size:8px;white-space:nowrap;color:var(--muted)}.native-account-tabs b{padding:5px;background:var(--elevated);border-radius:4px;color:var(--text)}.native-empty{display:flex;align-items:center;flex-direction:column;gap:5px;text-align:center;padding:14px 12px}.native-empty>span{font-size:20px;color:var(--muted)}.native-empty strong{font-size:10px}.native-empty small{font-size:8px;max-width:260px}
.native-execution{background:#141618;border-left:1px solid var(--line);padding:15px 12px}.native-execution .native-caption{margin:0 0 18px}.native-sides{display:flex;border-radius:5px;padding:3px;background:#1b1d1e;margin-bottom:15px;text-align:center}.native-sides>*{width:50%;padding:6px}.native-sides b{color:var(--up);background:var(--elevated);border-radius:4px}.native-sides>span{color:var(--muted)}.native-order-types{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:var(--muted)}.native-order-types b{padding:5px;background:var(--elevated);border-radius:4px;color:var(--text)}.native-field-label{display:flex;justify-content:space-between;gap:5px;margin:9px 0;font-size:8px;color:var(--muted)}.native-field-label strong{color:var(--text)}.native-amount{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#1d2021;border-radius:5px;font-size:24px;color:#677074}.native-amount span{font-size:8px;color:var(--muted)}.native-percent{font-size:9px;text-align:center;padding:12px 0 14px;color:var(--muted)}.native-slider{height:4px;margin:14px 0;background:repeating-linear-gradient(90deg,#555 0 2px,#333 2px 5px)}.native-slider i{display:block;width:5px;height:13px;background:#aaa;border-radius:5px;position:relative;top:-5px}.native-reduce{color:var(--muted);font-size:9px;margin:15px 0}.native-preview{display:flex;justify-content:space-between;color:var(--up);background:#82baa319;border-radius:5px;padding:10px;margin-top:17px;font-weight:600}.native-execution-note{font-size:7px;color:var(--muted);padding-top:13px;line-height:1.6}.native-status{background:var(--surface);border-top:1px solid var(--line);padding:5px 12px;color:var(--muted);font-size:8px}.native-example{float:right}
/* AccountMenu.swift: 340 pt panel, 12 pt padding, 13 pt monospaced addresses. */
.native-wallets{width:100%;max-width:420px;margin:auto;background:#17191b;border-radius:22px;padding:14px;color:#99a1a6;font:15px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;box-shadow:0 12px 35px #00000024}.native-wallet-row{display:flex;align-items:center;gap:14px;min-height:56px}.native-wallet-address{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:7px;font:16px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}.native-wallet-address.selected{color:#e6e8e6;background:#252829}.native-radio{width:15px;height:15px;border:1.5px solid #99a1a6;border-radius:50%;display:grid;place-items:center;font:12px/1 sans-serif}.selected .native-radio{border-color:#82baa3;background:#82baa3;color:#132820}.native-wallet-icon svg{width:19px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none}.native-wallet-icon.disconnect{margin-left:auto;margin-right:12px}
@media(min-width:1500px){.native-chart-svg{height:265px}}
@media(min-width:651px) and (max-width:1100px){.native-body{grid-template-columns:110px minmax(0,1fr) 166px}.native-chart-and-book{grid-template-columns:minmax(0,1fr) 130px}.native-market-header{gap:12px}.native-market-header b{font-size:14px}.native-market-header .native-stats:last-child{display:none}}
@media(max-width:650px){.native-workspace{width:760px;max-width:none}.native-wallets{padding:12px}.native-wallet-row{gap:8px}.native-wallet-address{font-size:14px;padding-inline:7px}.native-wallet-icon.disconnect{margin-right:4px}.native-wallet-icon svg{width:17px}.native-wallets{border-radius:17px}}
@media(min-width:651px){.native-body{grid-template-columns:110px minmax(0,1fr) 166px}.native-market-header{gap:12px}.native-market-header b{font-size:14px}.native-market-header .native-stats:last-child{display:none}.native-chart-and-book{grid-template-columns:minmax(0,1fr) 130px}}
@media(min-width:651px) and (max-width:1100px){.native-body{grid-template-columns:124px minmax(0,1fr) 182px}}

/* Actual app screenshot, preserving the full window and transparent margins. */

.hero-screenshot{display:block;width:100%;height:auto;max-width:100%}

/* Hero geometry comes from styles.css; only preserve the screenshot transparency here. */
.hero-app-frame.hero-screenshot-frame{box-shadow:none;overflow:visible}

/* Large, level screenshot centered against the complete hero copy. */
.hero-app-frame.hero-screenshot-frame{position:relative;inset:auto;transform:none;translate:none;filter:none;width:100%;max-width:none}
@media(min-width:1101px){
  .hero-grid{grid-template-columns:minmax(370px,4fr) minmax(0,9fr);gap:24px;align-items:center}
  .hero-copy{align-self:center}
  .hero-stage{height:auto;display:flex;align-items:center;align-self:center}
  .hero-app-frame.hero-screenshot-frame{flex-shrink:0;width:min(1200px,calc(100% + (100vw - min(1280px,100vw - 104px))/2 - 24px))}
}
@media(min-width:651px) and (max-width:1100px){.hero-grid{grid-template-columns:1fr;gap:28px;min-height:0;padding-block:40px}.hero-stage{height:auto}}
@media(max-width:650px){.hero-stage{height:auto;margin-block:24px 32px}.hero-app-frame.hero-screenshot-frame{max-width:100%}}

.hero h1 em{white-space:nowrap}

@media(min-width:1101px){.hero-app-frame.hero-screenshot-frame{left:24px}}

.native-connect{position:relative;margin-top:28px;padding:14px;text-align:center;color:#82baa3;font-size:17px;font-weight:600;background:#263b32;border-radius:10px}
.native-connect:before{content:"";position:absolute;top:-14px;left:0;right:0;height:1px;background:#ffffff18}

.feature-refresh .product-feature-media.accounts-scene{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible}

/* Fit the screenshot to the remaining viewport width, keeping Execution visible. */
@media(min-width:1101px){
  .hero-app-frame.hero-screenshot-frame{overflow:visible;border-radius:0}
  .hero-screenshot{width:100%;max-width:none;transform:none}
}

.hero-theme-images{position:relative;width:100%}
.hero-theme-images .hero-screenshot{transition:opacity .2s ease}
.hero-theme-images .hero-theme-light{position:absolute;inset:0;opacity:0}
[data-preview-theme="light"] .hero-theme-dark{opacity:0}
[data-preview-theme="light"] .hero-theme-light{opacity:1}
.hero-theme-controls{position:absolute;z-index:3;top:-28px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:4px;border:1px solid #ffffff20;border-radius:999px;background:#142a22}
.hero-theme-controls[hidden]{display:none}
.hero-theme-controls button{border:0;background:transparent;color:#b4c8bc;border-radius:999px;padding:7px 16px;font:500 13px/1.2 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.hero-theme-controls button[aria-pressed="true"]{background:var(--brand);color:var(--dark)}
.hero-theme-controls button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media(max-width:1100px){.hero-stage{padding-top:28px}}
@media(prefers-reduced-motion:reduce){.hero-theme-images .hero-screenshot{transition:none}}

.hero-theme-controls button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:8px}
.hero-theme-controls button svg{width:18px;height:18px;stroke-width:1.7;flex-shrink:0}