.install-nav { background: rgba(7, 7, 13, .82); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px); }
.install-nav__back { color: var(--text-secondary); font-size: .84rem; font-weight: 700; }
.install-nav__back:hover, .install-nav__back:focus-visible { color: var(--cyan); }
.install-hero { position: relative; overflow: hidden; padding: 160px 0 104px; background: radial-gradient(circle at 78% 42%, rgba(139,53,255,.18), transparent 34%), radial-gradient(circle at 12% 78%, rgba(0,200,255,.1), transparent 29%), #07070d; }
.install-hero__glow { position: absolute; width: 480px; aspect-ratio: 1; border-radius: 50%; filter: blur(100px); opacity: .18; pointer-events: none; }
.install-hero__glow--cyan { top: 20%; right: -14%; background: var(--cyan); }
.install-hero__glow--purple { bottom: -25%; left: -10%; background: var(--purple); }
.install-hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(45px, 8vw, 110px); align-items: center; }
.install-hero h1 { max-width: 700px; font-size: clamp(3rem, 6vw, 5.9rem); line-height: .98; letter-spacing: -.06em; }
.install-hero p:not(.eyebrow) { max-width: 620px; margin: 26px 0 0; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; }
.install-hero .button { margin-top: 32px; }
.install-preview { position: relative; overflow: hidden; min-height: 420px; border: 1px solid rgba(0,200,255,.28); border-radius: 20px; background: #0b0d16; box-shadow: 0 32px 90px rgba(0,0,0,.45), 0 0 80px rgba(0,200,255,.07); transform: rotate(1.5deg); }
.install-preview__bar { display: flex; align-items: center; gap: 6px; height: 39px; padding: 0 15px; border-bottom: 1px solid #202437; color: #738098; font: 700 .67rem var(--font-mono); }
.install-preview__bar span { width: 7px; height: 7px; border-radius: 50%; background: #34384a; }
.install-preview__bar b { margin-left: auto; color: #aab7cc; font-weight: 600; }
.install-preview__chart { position: relative; height: 250px; overflow: hidden; background: repeating-linear-gradient(0deg, transparent 0 48px, rgba(118,139,171,.09) 49px 50px), repeating-linear-gradient(90deg, transparent 0 75px, rgba(118,139,171,.07) 76px 77px); }
.chart-candle { position: absolute; bottom: 42px; width: 12px; border-radius: 2px; background: #19c37d; box-shadow: 5px -12px 0 -4px #19c37d, 5px 12px 0 -4px #19c37d; animation: candlePulse 4s ease-in-out infinite; }
.chart-candle--1 { left: 8%; height: 56px; }.chart-candle--2 { left: 19%; height: 94px; background: #ef5b5b; animation-delay: -.8s; }.chart-candle--3 { left: 30%; height: 76px; animation-delay: -1.5s; }.chart-candle--4 { left: 41%; height: 124px; animation-delay: -2.2s; }.chart-candle--5 { left: 52%; height: 88px; background: #ef5b5b; animation-delay: -2.8s; }.chart-candle--6 { left: 63%; height: 132px; animation-delay: -3.4s; }.chart-candle--7 { left: 74%; height: 150px; animation-delay: -1.1s; }.chart-candle--8 { left: 85%; height: 168px; animation-delay: -2.5s; }
.chart-level { position: absolute; left: 0; right: 0; height: 1px; animation: levelSweep 4s ease-in-out infinite; }.chart-level--cyan { top: 29%; background: var(--cyan); }.chart-level--orange { top: 53%; background: #ff9f43; animation-delay: -1.4s; }.chart-level--pink { top: 75%; background: var(--pink); animation-delay: -2.4s; }
.install-preview__editor { display: grid; gap: 12px; padding: 19px; border-top: 1px solid #202437; color: #b8c4d8; font: .72rem var(--font-mono); }.install-preview__editor span { color: var(--cyan); font-weight: 800; }.install-preview__editor code { color: #e8a4c8; }
.install-platform-screens { display: grid; gap: 18px; }.install-screen { position: relative; overflow: hidden; margin: 0; border: 1px solid rgba(0,200,255,.28); border-radius: 20px; background: #0b0d16; box-shadow: 0 32px 90px rgba(0,0,0,.45), 0 0 80px rgba(0,200,255,.07); }.install-screen:first-child { transform: rotate(1.5deg); }.install-screen:last-child { transform: rotate(-1deg); }.install-screen img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }.install-screen figcaption { display: flex; align-items: center; gap: 9px; padding: 14px 16px; color: #aebbd0; background: #0b0d16; font: 700 .7rem var(--font-mono); }.install-screen__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(0,200,255,.6); animation: screenPulse 2.3s infinite; }
.install-section { position: relative; padding: 110px 0; border-top: 1px solid rgba(255,255,255,.05); background: #080810; }.install-section--walkthrough { background: radial-gradient(circle at 82% 40%, rgba(0,200,255,.065), transparent 30%), #07070d; }.install-section--finish { background: #090911; }
.install-heading { max-width: 790px; }.install-heading h2, .walkthrough h2, .finish-card h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.05em; }
.platform-picker { display: inline-flex; gap: 5px; padding: 5px; margin-bottom: 56px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.025); }.platform-picker button { padding: 9px 15px; border-radius: 999px; color: var(--text-secondary); font: 800 .72rem var(--font-mono); }.platform-picker button.is-selected { color: #071019; background: var(--cyan); }
.moomoo-anchor-note { max-width: 760px; margin: 24px 0 0; padding: 16px 18px; border-left: 2px solid var(--cyan); color: var(--text-secondary); background: rgba(0,200,255,.07); line-height: 1.7; }.moomoo-anchor-note strong { color: var(--text-primary); }
.version-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 42px; }.version-card { display: grid; gap: 10px; min-height: 218px; padding: 28px; border: 1px solid var(--border); border-radius: 18px; color: var(--text-secondary); text-align: left; background: rgba(255,255,255,.018); transition: border-color .2s ease, background .2s ease, transform .2s ease; }.version-card:hover, .version-card:focus-visible { border-color: rgba(0,200,255,.52); transform: translateY(-3px); }.version-card.is-selected { border-color: var(--cyan); background: linear-gradient(135deg, rgba(0,200,255,.12), rgba(139,53,255,.08)); box-shadow: 0 0 0 1px rgba(0,200,255,.14), 0 18px 50px rgba(0,0,0,.2); }.version-card__mark { color: var(--cyan); font: 800 .74rem var(--font-mono); letter-spacing: .12em; }.version-card strong { color: var(--text-primary); font-size: 1.4rem; }.version-card > span:last-child { font-size: .9rem; line-height: 1.65; }.version-note { margin: 24px 0 0; color: var(--text-secondary); line-height: 1.75; }.version-note strong { color: var(--text-primary); }
.walkthrough { display: grid; grid-template-columns: .72fr 1.28fr; column-gap: clamp(42px, 8vw, 100px); align-items: start; }.walkthrough__intro { grid-column: 1 / -1; max-width: 760px; margin-bottom: 54px; }.walkthrough__intro > p:not(.eyebrow) { margin: 18px 0 0; color: var(--text-secondary); line-height: 1.75; }.steps { display: grid; gap: 8px; padding: 0; list-style: none; }.step { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; width: 100%; padding: 17px 12px; border-left: 1px solid transparent; color: var(--text-secondary); text-align: left; transition: background .2s ease, border-color .2s ease; }.step:hover, .step:focus-visible { background: rgba(255,255,255,.035); }.step.is-active { border-color: var(--cyan); background: linear-gradient(90deg, rgba(0,200,255,.09), transparent); }.step span { grid-row: span 2; color: var(--cyan); font: 800 .7rem var(--font-mono); }.step strong { color: var(--text-primary); font-size: .94rem; }.step small { margin-top: 4px; color: var(--text-muted); font-size: .78rem; line-height: 1.5; }
.demo { position: sticky; top: 102px; overflow: hidden; min-height: 480px; border: 1px solid #29314a; border-radius: 18px; background: #111522; box-shadow: 0 30px 80px rgba(0,0,0,.45); }.demo__topbar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 13px; border-bottom: 1px solid #252c40; color: #aab6ca; font: .72rem var(--font-mono); }.demo__logo { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: white; background: #2765e8; font-weight: 800; }.demo__symbol { color: white; font-weight: 700; }.demo__interval { color: #7e8aa0; }.demo__indicator { margin-left: auto; padding: 6px 9px; border: 1px solid #39435b; border-radius: 5px; color: #dce5f5; font-size: .69rem; background: #1a2030; }.demo__body { display: grid; grid-template-columns: 42px 1fr; height: 230px; }.demo__sidebar { display: grid; align-content: start; justify-items: center; gap: 14px; padding-top: 18px; border-right: 1px solid #252c40; color: #69758b; }.demo__side-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 4px; font: 700 .78rem var(--font-mono); }.demo__chart { position: relative; overflow: hidden; display: flex; align-items: flex-end; gap: 18px; padding: 40px 44px 27px 26px; background: repeating-linear-gradient(0deg, transparent 0 45px, rgba(143,164,203,.1) 46px 47px), repeating-linear-gradient(90deg, transparent 0 75px, rgba(143,164,203,.07) 76px 77px); }.demo__axis { position: absolute; right: 7px; color: #66738b; font: .57rem var(--font-mono); }.demo__axis:nth-child(1) { top: 26px; }.demo__axis:nth-child(2) { top: 107px; }.demo__axis:nth-child(3) { bottom: 19px; }.demo__candle { position: relative; width: 11px; background: #29b886; box-shadow: 0 -12px 0 -4px #29b886, 0 12px 0 -4px #29b886; }.demo__candle--1 { height: 50px; }.demo__candle--2 { height: 82px; background: #e75e6b; box-shadow: 0 -12px 0 -4px #e75e6b, 0 12px 0 -4px #e75e6b; }.demo__candle--3 { height: 69px; }.demo__candle--4 { height: 106px; }.demo__candle--5 { height: 89px; background: #e75e6b; box-shadow: 0 -12px 0 -4px #e75e6b, 0 12px 0 -4px #e75e6b; }.demo__candle--6 { height: 121px; }.demo__candle--7 { height: 143px; }.demo__candle--8 { height: 170px; }.demo__indicator-menu { position: absolute; top: 50px; right: 24px; display: none; min-width: 122px; padding: 10px; border: 1px solid #3a4560; border-radius: 5px; color: #aebbd0; background: #1b2233; font: .67rem var(--font-mono); line-height: 1.9; box-shadow: 0 14px 28px rgba(0,0,0,.35); }.demo__indicator-menu b { color: var(--cyan); }.demo__editor { border-top: 1px solid #252c40; background: #0d111b; }.demo__editor-head { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; color: #aebbd0; font: .69rem var(--font-mono); }.demo__save { padding: 4px 9px; border-radius: 4px; color: #06101a; background: var(--cyan); font: 800 .68rem var(--font-mono); }.demo__code { position: relative; display: flex; min-height: 130px; gap: 15px; padding: 18px; border-top: 1px solid #202739; color: #d7dfed; font: .73rem/1.8 var(--font-mono); }.demo__line { color: #59657c; }.demo__code code { color: #c3b7ff; }.demo__cursor { display: none; width: 1px; height: 16px; margin-top: 1px; background: #e6edff; animation: blinkCursor 1s step-end infinite; }.demo__tip { min-height: 38px; padding: 10px 16px; border-top: 1px solid #202739; color: #9eadc5; font: .71rem var(--font-mono); }
.walkthrough__detail { position: sticky; top: 102px; min-height: 350px; padding: clamp(26px, 4vw, 48px); border: 1px solid rgba(0,200,255,.25); border-radius: 18px; background: linear-gradient(145deg, rgba(0,200,255,.075), rgba(139,53,255,.075)); box-shadow: 0 30px 80px rgba(0,0,0,.32); }.walkthrough__detail-number { margin: 0; color: var(--cyan); font: 800 .72rem var(--font-mono); letter-spacing: .13em; }.walkthrough__detail h3 { margin: 22px 0 15px; color: var(--text-primary); font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.1; }.walkthrough__detail > p:not(.walkthrough__detail-number):not(.walkthrough__detail-note) { margin: 0; color: var(--text-secondary); line-height: 1.75; }.walkthrough__detail-status { display: flex; align-items: center; gap: 9px; margin-top: 28px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); color: var(--text-secondary); font: .72rem var(--font-mono); }.walkthrough__detail-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: screenPulse 2.3s infinite; }.walkthrough__detail-status b { color: var(--text-primary); }.walkthrough__detail-note { margin: 22px 0 0; color: var(--text-muted); font-size: .79rem; line-height: 1.65; }
.instruction-media { margin: 24px 0 0; }
.instruction-media[data-moomoo-media="2"] .instruction-media__screen { inset: 0 0 auto auto; width: 155%; height: auto; max-width: none; }
.instruction-media[data-moomoo-media="3"] .instruction-media__screen { inset: 0 auto auto 0; width: 185%; height: auto; max-width: none; }
.instruction-media[data-moomoo-media="4"] .instruction-media__screen { inset: -58px auto auto 50%; width: 180%; height: auto; max-width: none; transform: translateX(-50%); }
.instruction-media[data-moomoo-media="5"] .instruction-media__screen { inset: 0 auto auto 50%; width: 145%; height: auto; max-width: none; transform: translateX(-50%); }
.instruction-media[data-moomoo-media="6"] .instruction-media__screen { inset: 0 0 auto auto; width: 170%; height: auto; max-width: none; }
.instruction-media[data-moomoo-media="7"] .instruction-media__screen { inset: 0 0 auto auto; width: 118%; height: auto; max-width: none; }
.instruction-media[data-moomoo-media="8"] .instruction-media__screen { inset: 0 0 auto auto; width: 145%; height: auto; max-width: none; }
.instruction-media[data-moomoo-media="9"] .instruction-media__screen { inset: 50% auto auto 50%; width: 112%; height: auto; max-width: none; transform: translate(-50%, -50%); }
.instruction-media { position: relative; height: 190px; margin-top: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: #05050a; }.instruction-media[hidden] { display: none; }.instruction-media__screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }.instruction-media__screen.is-visible { opacity: 1; }.instruction-media__controls { display: flex; gap: 8px; margin-top: 10px; }.instruction-media__controls[hidden] { display: none; }.instruction-media__controls button { padding: 7px 9px; border: 1px solid var(--border-light); border-radius: 999px; color: var(--text-secondary); background: rgba(255,255,255,.025); font: 700 .68rem var(--font-mono); }.instruction-media__controls button:hover, .instruction-media__controls button:focus-visible, .instruction-media__controls button.is-selected { border-color: var(--cyan); color: var(--cyan); background: rgba(0,200,255,.08); }
.demo[data-active-step="1"] .demo__side-icon--pine { color: #0a111e; background: var(--cyan); box-shadow: 0 0 16px rgba(0,200,255,.55); }.demo[data-active-step="2"] .demo__editor-head span::after { content: " ▾"; color: var(--cyan); }.demo[data-active-step="2"] .demo__editor-head { background: rgba(139,53,255,.12); }.demo[data-active-step="3"] .demo__code code { color: #e8a4c8; }.demo[data-active-step="3"] .demo__cursor { display: block; }.demo[data-active-step="4"] .demo__save { animation: savePulse 1.5s ease-in-out infinite; }.demo[data-active-step="5"] .demo__indicator-menu { display: block; }.demo[data-active-step="5"] .demo__indicator { border-color: var(--cyan); color: white; box-shadow: 0 0 14px rgba(0,200,255,.3); }
.finish-card { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: clamp(28px, 5vw, 58px); border: 1px solid rgba(0,200,255,.25); border-radius: 20px; background: linear-gradient(120deg, rgba(0,200,255,.07), rgba(139,53,255,.07)); }.finish-card > div { max-width: 760px; }.finish-card p:not(.eyebrow) { margin: 20px 0 0; color: var(--text-secondary); line-height: 1.75; }
@keyframes candlePulse { 50% { transform: translateY(-7px); } } @keyframes levelSweep { 50% { opacity: .35; transform: translateX(6px); } } @keyframes blinkCursor { 50% { opacity: 0; } } @keyframes savePulse { 50% { box-shadow: 0 0 0 5px rgba(0,200,255,.16); } } @keyframes screenPulse { 70% { box-shadow: 0 0 0 8px rgba(0,200,255,0); } 100% { box-shadow: 0 0 0 0 rgba(0,200,255,0); } } @keyframes calloutPulse { 70% { box-shadow: 0 0 0 12px rgba(0,200,255,0); } 100% { box-shadow: 0 0 0 0 rgba(0,200,255,0); } }
@media (max-width: 900px) { .install-hero__grid, .walkthrough { grid-template-columns: 1fr; }.install-screen { max-width: 680px; width: 100%; margin: 0 auto; }.walkthrough__intro { grid-column: auto; }.walkthrough__detail { position: relative; top: auto; margin-top: 32px; }.finish-card { align-items: flex-start; flex-direction: column; } }
@media (max-width: 620px) { .install-hero { padding: 128px 0 80px; }.install-screen { transform: none; }.version-picker { grid-template-columns: 1fr; }.install-section { padding: 78px 0; }.install-nav__back { font-size: .72rem; }.instruction-media { height: 165px; } }
@media (prefers-reduced-motion: reduce) { .chart-candle, .chart-level, .demo__cursor, .demo__save, .install-screen__pulse, .walkthrough__detail-status span { animation: none; } }