:root {
  color-scheme: dark;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background: #090b0d;
  color: #f2f6f7;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(ellipse 48% 40% at 85% 10%, rgba(27, 199, 215, .12), transparent 72%), radial-gradient(ellipse 43% 43% at 5% 87%, rgba(232, 83, 64, .10), transparent 75%), #090b0d; }
::selection { background: rgba(98, 224, 234, .3); }

.background-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .36; background-image: linear-gradient(rgba(163, 196, 200, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 196, 200, .055) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(#000, transparent 90%); }
.portal-shell { position: relative; z-index: 1; width: min(1200px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 28px 0 31px; }

.portal-header { display: flex; align-items: center; justify-content: space-between; }
.portal-brand { display: inline-flex; align-items: center; gap: 11px; color: #e4eff0; font-size: 13px; font-weight: 750; letter-spacing: .08em; text-decoration: none; }
.portal-brand em { margin-left: 7px; color: #84989d; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 9px; font-style: normal; font-weight: 500; letter-spacing: .12em; }
.brand-mark { display: flex; width: 35px; height: 35px; align-items: end; justify-content: center; gap: 3px; padding-bottom: 7px; border: 1px solid #75dbe5; border-radius: 10px; }
.brand-mark i { display: block; width: 4px; background: #8ae8ef; border-radius: 2px; }.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 16px; }.brand-mark i:nth-child(3) { height: 12px; }
.header-actions, .header-status { display: flex; align-items: center; gap: 8px; }.header-status { color: #819499; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 9px; letter-spacing: .11em; }.header-status span { width: 6px; height: 6px; border-radius: 50%; background: #64dfb5; box-shadow: 0 0 12px #64dfb5; }.register-link { padding: 7px 10px; border: 1px solid #3a535a; border-radius: 7px; color: #bfe8eb; font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; background: transparent; cursor: pointer; }.register-link:hover { border-color: #78e0e9; background: rgba(86, 201, 214, .1); }.signed-in { max-width: 220px; overflow: hidden; color: #b7cbd0; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(370px, .78fr); gap: 64px; align-items: center; margin-top: clamp(72px, 11.5vh, 126px); }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: #93abb0; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .13em; }.eyebrow i { width: 28px; height: 1px; background: #79e2ed; }
h1 { margin: 0; color: #f1f6f7; font-size: clamp(42px, 5.4vw, 76px); font-weight: 650; letter-spacing: -.075em; line-height: 1.1; }h1 strong { color: #82e5ee; font-weight: inherit; text-shadow: 0 0 38px rgba(88, 215, 229, .17); }
.intro-copy { max-width: 610px; margin: 25px 0 0; color: #9cadb2; font-size: 16px; line-height: 1.85; }
.quick-facts { display: flex; gap: 0; margin-top: 38px; }.quick-facts span { min-width: 128px; padding: 0 19px; border-left: 1px solid #314045; }.quick-facts span:first-child { padding-left: 0; border-left: 0; }.quick-facts b, .quick-facts small { display: block; }.quick-facts b { color: #d8e8ea; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 10px; letter-spacing: .05em; }.quick-facts small { margin-top: 7px; color: #75878c; font-size: 11px; white-space: nowrap; }

.market-snapshot { position: relative; min-height: 345px; overflow: hidden; padding: 19px 20px 17px; border: 1px solid rgba(110, 177, 187, .35); border-radius: 20px; background: linear-gradient(145deg, rgba(17, 44, 49, .88), rgba(10, 16, 19, .95) 63%); box-shadow: 0 28px 60px rgba(0, 0, 0, .24), inset 0 1px rgba(170, 236, 241, .06); }.market-snapshot::before { position: absolute; top: -90px; right: -60px; width: 260px; height: 260px; border: 1px solid rgba(113, 225, 235, .18); border-radius: 50%; content: ""; }.market-snapshot::after { position: absolute; top: -55px; right: -26px; width: 190px; height: 190px; border: 1px solid rgba(113, 225, 235, .1); border-radius: 50%; content: ""; }
.snapshot-top, .snapshot-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; color: #8ea7ac; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em; }.snapshot-live { color: #7ce9cd; }.snapshot-live i { display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: currentColor; }
.snapshot-main { position: relative; z-index: 1; margin-top: 38px; }.snapshot-main > span { display: block; color: #79969b; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 9px; letter-spacing: .1em; }.snapshot-main strong { display: inline-block; margin-top: 7px; color: #ecf8f8; font-family: Georgia, "Songti SC", serif; font-size: 42px; font-weight: 500; letter-spacing: -.055em; }.snapshot-main strong span { color: #b3d6d9; font-size: 23px; }.snapshot-main em { margin-left: 11px; color: #75e2c3; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 11px; font-style: normal; }
.snapshot-chart { position: relative; height: 126px; margin-top: 14px; border-top: 1px solid rgba(143, 203, 210, .12); border-bottom: 1px solid rgba(143, 203, 210, .12); background: linear-gradient(rgba(147, 205, 212, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(147, 205, 212, .06) 1px, transparent 1px); background-size: 32px 31px; }.candle { position: absolute; bottom: 21px; width: 9px; border-radius: 2px; background: #7ce8d1; color: #7ce8d1; }.candle::before { position: absolute; top: -16px; left: 4px; width: 1px; height: calc(100% + 29px); background: currentColor; content: ""; }.candle.down { background: #f49b8d; color: #f49b8d; }.c1 { left: 6%; height: 34px; }.c2 { left: 17%; height: 22px; }.c3 { left: 28%; height: 47px; }.c4 { left: 39%; height: 36px; }.c5 { left: 50%; height: 25px; }.c6 { left: 61%; height: 55px; }.c7 { left: 72%; height: 32px; }.c8 { left: 83%; height: 20px; }.c9 { left: 93%; height: 41px; }.trend-line { position: absolute; z-index: 2; left: 0; width: 100%; height: 1px; transform-origin: left; }.trend-line.one { top: 39%; background: rgba(105, 230, 239, .5); transform: rotate(-5deg); }.trend-line.two { top: 69%; background: rgba(255, 151, 135, .32); transform: rotate(2.3deg); }.snapshot-bottom { margin-top: 15px; font-size: 8px; }.snapshot-bottom b { color: #c4eaed; }

.entry-heading { display: flex; align-items: end; justify-content: space-between; margin-top: clamp(70px, 12vh, 132px); border-bottom: 1px solid #28363b; padding-bottom: 14px; }.entry-heading span { color: #92a7ac; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .13em; }.entry-heading p { margin: 0; color: #687a80; font-size: 12px; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }.mode-card { position: relative; display: flex; min-height: 355px; flex-direction: column; overflow: hidden; padding: 22px 25px 24px; border: 1px solid rgba(169, 194, 198, .2); border-radius: 17px; color: inherit; text-decoration: none; isolation: isolate; transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }.mode-card:hover, .mode-card:focus-visible { transform: translateY(-6px); border-color: currentColor; box-shadow: 0 22px 50px rgba(0,0,0,.32); outline: 0; }.card-glow { position: absolute; z-index: -1; top: -80px; right: -70px; width: 230px; height: 230px; border-radius: 50%; opacity: .33; filter: blur(1px); transition: transform .4s ease; }.mode-card:hover .card-glow { transform: scale(1.18); }.history-card { background: linear-gradient(140deg, #12252a, #0c1215 76%); color: #7ce3ed; }.history-card .card-glow { background: radial-gradient(circle, rgba(58, 210, 227, .32), transparent 65%); }.simulation-card { background: linear-gradient(140deg, #311917, #15100f 76%); color: #ff9b8b; }.simulation-card .card-glow { background: radial-gradient(circle, rgba(242, 102, 77, .31), transparent 65%); }.card-head { display: flex; align-items: center; justify-content: space-between; color: currentColor; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; }.card-head i { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 15px; font-style: normal; }.history-icon, .account-icon { position: relative; height: 103px; margin-top: 19px; border-bottom: 1px solid rgba(199, 236, 239, .15); }.history-icon { display: flex; align-items: end; gap: 11px; padding: 0 5px 19px; }.history-icon i { display: block; width: 10px; border-radius: 3px 3px 0 0; background: #79e5d4; }.history-icon i:nth-child(1) { height: 28px; }.history-icon i:nth-child(2) { height: 51px; background: #f49b90; }.history-icon i:nth-child(3) { height: 39px; }.history-icon i:nth-child(4) { height: 67px; }.history-icon i:nth-child(5) { height: 49px; background: #f49b90; }.account-icon { padding: 9px 0 0; }.account-icon span { display: block; color: rgba(255, 219, 211, .65); font-family: "SF Mono", "Roboto Mono", monospace; font-size: 9px; letter-spacing: .12em; }.account-icon b { display: block; margin-top: 8px; color: #fff0ec; font-family: Georgia, "Songti SC", serif; font-size: 27px; font-weight: 500; letter-spacing: -.045em; }.account-icon b em { color: #e7aa9f; font-size: 16px; font-style: normal; }.account-icon div { position: absolute; right: 3px; bottom: 18px; display: flex; height: 43px; align-items: end; gap: 3px; }.account-icon div i { width: 8px; border-radius: 2px 2px 0 0; background: linear-gradient(#ff9a84, rgba(255,154,132,.25)); }.account-icon div i:nth-child(1){height:13px}.account-icon div i:nth-child(2){height:22px}.account-icon div i:nth-child(3){height:18px}.account-icon div i:nth-child(4){height:34px}.account-icon div i:nth-child(5){height:28px}.account-icon div i:nth-child(6){height:40px}.account-icon div i:nth-child(7){height:31px}
.card-copy { margin-top: 22px; }.card-copy p { margin: 0 0 7px; color: currentColor; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em; }.card-copy strong { display: block; color: #f3f7f7; font-size: 29px; letter-spacing: -.045em; }.card-copy span { display: block; max-width: 382px; margin-top: 10px; color: #a7b7bb; font-size: 13px; line-height: 1.72; }.card-link { display: flex; align-items: center; gap: 10px; margin-top: auto; color: #f2f7f7; font-size: 13px; font-weight: 700; }.card-link b { color: currentColor; font-size: 20px; font-weight: 400; }
.portal-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 21px; color: #607379; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 9px; letter-spacing: .045em; }

@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 42px; }.market-snapshot { max-width: 560px; }.entry-heading { margin-top: 78px; } }
@media (max-width: 620px) { .portal-shell { width: min(100% - 28px, 1200px); padding-top: 20px; }.portal-brand { font-size: 12px; }.portal-brand em, .header-status { display: none; }.hero-grid { margin-top: 76px; }.eyebrow { font-size: 8px; }.eyebrow i { width: 18px; }.intro-copy { font-size: 15px; }.quick-facts { flex-wrap: wrap; gap: 13px 0; }.quick-facts span { min-width: 50%; padding-left: 13px; }.quick-facts span:first-child { min-width: 50%; }.quick-facts span:nth-child(3) { padding-left: 0; border-left: 0; }.quick-facts small { font-size: 10px; }.market-snapshot { min-height: 319px; }.entry-heading { align-items: start; flex-direction: column; gap: 7px; margin-top: 68px; }.mode-grid { grid-template-columns: 1fr; }.mode-card { min-height: 342px; }.portal-footer { flex-direction: column; line-height: 1.6; } }
@media (prefers-reduced-motion: no-preference) { .market-snapshot { animation: float 6s ease-in-out infinite; } @keyframes float { 50% { transform: translateY(-4px); } } }