:root{--bg: #0a0f0d;--bg-soft: #0e1512;--panel: #111a16;--panel-2: #15201b;--border: #1f2e27;--border-bright: #2c4337;--text: #e8f2ec;--text-dim: #8aa396;--text-faint: #5c7368;--green: #2ee6a8;--green-soft: rgba(46, 230, 168, .12);--green-line: rgba(46, 230, 168, .55);--yellow: #ffd54d;--orange: #ff9f43;--red: #ff6b6b;--blue: #5db7ff;--mono: "IBM Plex Mono", ui-monospace, monospace;--sans: "Inter", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input{font-family:inherit;color:inherit}.app{max-width:1280px;margin:0 auto;padding:0 24px 80px}.header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--border);margin-bottom:28px}.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em}.logo-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--green),#14b87f);display:grid;place-items:center;color:#06231a;font-size:15px;font-weight:800}.logo small{color:var(--text-faint);font-weight:500;font-size:11px;margin-left:6px;border:1px solid var(--border-bright);border-radius:999px;padding:2px 8px}.header-right{display:flex;align-items:center;gap:18px}.lang-switch{display:flex;border:1px solid var(--border);border-radius:999px;padding:2px;gap:2px}.lang-switch button{font-size:11.5px;font-weight:600;color:var(--text-faint);padding:4px 11px;border-radius:999px;transition:all .12s ease}.lang-switch button:hover{color:var(--text-dim)}.lang-switch button.active{background:var(--green-soft);color:var(--green)}.balance-chip{font-family:var(--mono);font-size:12px;color:var(--text-dim)}.balance-chip b{color:var(--text);font-weight:600}.connect-btn{background:var(--green);color:#06231a;font-weight:700;padding:9px 18px;border-radius:10px;font-size:13px;transition:transform .1s ease}.connect-btn:hover{transform:translateY(-1px)}.hero{margin:6px 0 22px}.hero h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}.hero h1 em{color:var(--green);font-style:normal}.hero p{margin:0;color:var(--text-dim);font-size:14px}.asset-tabs{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.asset-tab{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 16px;transition:border-color .12s ease,background .12s ease}.asset-tab:hover{border-color:var(--border-bright)}.asset-tab.active{border-color:var(--green);background:var(--green-soft)}.asset-tab .icon{width:26px;height:26px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border-bright);display:grid;place-items:center;font-size:13px;color:var(--green)}.asset-tab .sym{font-weight:700;font-size:14px}.asset-tab .px{font-family:var(--mono);font-size:12px;color:var(--text-dim)}.direction-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.direction-card{text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 18px;transition:border-color .12s ease,background .12s ease}.direction-card:hover{border-color:var(--border-bright)}.direction-card.active{border-color:var(--green);background:var(--green-soft)}.direction-card{display:flex;align-items:center;justify-content:space-between;gap:10px}.direction-card .t{font-weight:800;font-size:15px}.direction-card.active .t{color:var(--green)}.direction-card .dep{flex-shrink:0;font-family:var(--mono);font-size:11px;color:var(--text-faint);border:1px solid var(--border);border-radius:999px;padding:3px 10px}.direction-card.active .dep{color:var(--green);border-color:var(--border-bright)}.main-grid{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}@media(max-width:980px){.main-grid{grid-template-columns:1fr}}.main-grid>.rise-5{align-self:stretch}.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px}.chart-panel{padding:18px 18px 8px}.chart-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:4px}.chart-question{font-size:16px;font-weight:700;letter-spacing:-.01em}.chart-question em{color:var(--green);font-style:normal}.chart-sub{color:var(--text-faint);font-size:12px}.chart-svg-wrap{position:relative;-webkit-user-select:none;user-select:none}.chart-svg-wrap svg{display:block;width:100%;touch-action:none}.tenor-row{display:flex;align-items:center;gap:8px;padding:10px 0 14px;flex-wrap:wrap}.tenor-row .lbl{color:var(--text-faint);font-size:12px;margin-right:4px}.tenor-chip{font-family:var(--mono);font-size:12px;padding:7px 13px;border-radius:999px;border:1px solid var(--border);color:var(--text-dim);background:var(--bg-soft);transition:all .1s ease}.tenor-chip:hover{border-color:var(--border-bright);color:var(--text)}.tenor-chip.active{border-color:var(--green);color:var(--green);background:var(--green-soft);font-weight:600}.tenor-chip small{display:block;font-size:9.5px;color:var(--text-faint)}.tenor-chip.active small{color:var(--green);opacity:.7}.strike-row{display:flex;gap:8px;padding-bottom:16px;flex-wrap:wrap}.strike-chip{flex:1;min-width:96px;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:9px 8px 8px;text-align:center;position:relative;transition:all .1s ease}.strike-chip:hover{border-color:var(--border-bright)}.strike-chip.active{border-color:var(--green);background:var(--green-soft)}.strike-chip .price{font-family:var(--mono);font-weight:600;font-size:14px}.strike-chip.active .price{color:var(--green)}.strike-chip .apr-badge{display:inline-block;font-family:var(--mono);font-size:10.5px;border-radius:999px;padding:1px 8px;margin-bottom:4px}.heat-0{color:var(--text-dim);background:#8aa3961f}.heat-1{color:var(--green);background:#2ee6a821}.heat-2{color:var(--yellow);background:#ffd54d21}.heat-3{color:var(--orange);background:#ff9f4326}.order-panel{padding:20px;position:sticky;top:16px}.order-title{font-size:13px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}.amount-box{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px}.amount-box:focus-within{border-color:var(--green)}.amount-box .row1{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-faint);margin-bottom:6px}.amount-box .row1 .max{color:var(--green);cursor:pointer;font-weight:600}.amount-box .row2{display:flex;align-items:center;gap:10px}.amount-box input{flex:1;background:none;border:none;outline:none;font-family:var(--mono);font-size:20px;font-weight:600;width:100%}.amount-box .ccy{font-weight:700;font-size:13px;color:var(--text);background:var(--panel-2);border:1px solid var(--border-bright);padding:5px 12px;border-radius:999px;white-space:nowrap}.pct-row{display:flex;gap:6px;margin-bottom:18px}.pct-btn{flex:1;font-family:var(--mono);font-size:11px;padding:5px 0;border-radius:8px;border:1px solid var(--border);color:var(--text-dim)}.pct-btn:hover{border-color:var(--green);color:var(--green)}.outcome-card{border:1px solid var(--border-bright);border-radius:14px;margin-bottom:16px}.outcome-now{background:linear-gradient(180deg,#2ee6a81a,#2ee6a808);padding:14px 16px;border-bottom:1px solid var(--border);border-radius:13px 13px 0 0}.outcome-now .tag,.outcome-later .tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);display:flex;align-items:center;gap:6px;margin-bottom:8px}.outcome-now .tag .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.apr-big{font-family:var(--mono);font-size:30px;font-weight:700;color:var(--green);line-height:1;letter-spacing:-.02em}.apr-big small{font-size:13px;color:var(--text-dim);font-weight:500;margin-left:6px}.upfront-line{margin-top:6px;font-size:12.5px;color:var(--text-dim)}.upfront-line b{color:var(--text);font-family:var(--mono)}.outcome-later{padding:14px 16px;background:var(--bg-soft);border-radius:0 0 13px 13px}.branches{display:grid;grid-template-columns:1fr 1fr;gap:10px}.branch{border-radius:10px;padding:10px 12px;border:1px solid var(--border);background:var(--panel)}.branch .cond{font-size:11px;color:var(--text-faint);margin-bottom:6px;font-family:var(--mono)}.branch .cond b{color:var(--text)}.branch .res{font-size:12.5px;font-weight:600;line-height:1.45}.branch .res b{font-family:var(--mono);color:var(--green);font-weight:600}.branch.fill{border-color:#2ee6a859}.either-way{margin-top:10px;font-size:11.5px;color:var(--green);background:var(--green-soft);border-radius:8px;padding:7px 10px;text-align:center;font-weight:600}.cta{width:100%;background:var(--green);color:#06231a;font-size:15px;font-weight:800;border-radius:12px;padding:14px 0;transition:transform .1s ease,box-shadow .1s ease}.cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px #2ee6a840}.cta:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.cta-sub{text-align:center;color:var(--text-faint);font-size:11px;margin-top:8px}.how{margin-top:26px}.how h2{font-size:16px;font-weight:800;margin:0 0 12px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:800px){.how-grid{grid-template-columns:1fr}}.how-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:12px}.how-card .num{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--green-soft);color:var(--green);font-weight:800;font-size:12px;display:grid;place-items:center}.how-card .t{font-weight:700;font-size:13.5px}.positions{margin-top:26px}.positions h2{font-size:16px;font-weight:800;margin:0 0 12px}.pos-table{width:100%;border-collapse:collapse}.pos-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--border)}.pos-table td{padding:13px 14px;border-bottom:1px solid var(--border);font-size:13px;font-family:var(--mono)}.pos-table td.sans{font-family:var(--sans)}.pos-table tr:last-child td{border-bottom:none}.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px}.badge.earning{color:var(--green);background:var(--green-soft)}.badge.earning .dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.dir-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;font-family:var(--sans)}.dir-pill.buy{color:var(--green);background:var(--green-soft)}.dir-pill.sell{color:var(--blue);background:#5db7ff1f}.hero-center{text-align:center}.simple-col{max-width:480px;margin:0 auto}.simple-col .positions{margin-top:18px}.simple-card{padding:18px 20px 20px}.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:14px}.seg button{padding:9px 0;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--text-dim);transition:all .15s ease}.seg button.active{background:var(--green-soft);color:var(--green)}.s-assets{display:flex;gap:6px;margin-bottom:18px}.s-asset{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;border-radius:10px;border:1px solid var(--border);font-weight:700;font-size:12.5px;color:var(--text-dim);transition:all .12s ease}.s-asset .icon{color:var(--green);font-size:12px}.s-asset:hover{border-color:var(--border-bright)}.s-asset.active{border-color:var(--green);background:var(--green-soft);color:var(--text)}.s-stmt{font-size:15px;font-weight:600;margin-bottom:10px}.s-stmt b{font-family:var(--mono);color:var(--green);font-size:19px;font-weight:700}.s-stmt .s-now{float:right;font-size:11px;color:var(--text-faint);font-family:var(--mono);margin-top:6px}.s-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--green) var(--fill),var(--border) var(--fill));outline:none;cursor:grab}.s-slider:active{cursor:grabbing}.s-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--green);border:4px solid #06231a;box-shadow:0 0 0 1.5px var(--green),0 2px 10px #2ee6a866;transition:transform .1s ease}.s-slider::-webkit-slider-thumb:hover{transform:scale(1.12)}.s-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--green);border:4px solid #06231a;box-shadow:0 0 0 1.5px var(--green),0 2px 10px #2ee6a866}.s-slider-labels{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-faint);margin:6px 1px 16px}.s-apr{font-family:var(--mono);font-size:52px;font-weight:700;color:var(--green);line-height:1;letter-spacing:-.03em;text-align:center}.s-apr small{font-size:14px;color:var(--text-dim);font-weight:500;margin-left:8px}.s-upfront{text-align:center;color:var(--text-dim);font-size:13px;margin:8px 0 16px}.s-upfront b{color:var(--text);font-family:var(--mono)}.s-tenors{display:flex;justify-content:center;gap:8px;margin-bottom:16px}.simple-card .amount-box{margin-bottom:8px}.simple-card .cta{margin-top:8px}.s-outcome{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;font-size:11.5px;color:var(--text-faint);line-height:1.7;text-align:center}.s-outcome b{color:var(--text-dim);font-family:var(--mono);font-weight:600}.amount-box .row3{margin-top:7px;font-size:11.5px;color:var(--text-faint);font-family:var(--mono)}.amount-box.invalid{border-color:var(--red)}.amount-err{color:var(--red);font-size:11.5px;margin:-2px 2px 8px}.tenor-chip .apr{color:var(--green);opacity:.85}.tenor-chip{text-align:center;line-height:1.5}.strike-chip .dist{font-size:10px;color:var(--text-faint);font-family:var(--mono);margin-top:2px}.strike-chip.active .dist{color:var(--text-dim)}.roll-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin-bottom:12px;text-align:left;transition:border-color .12s ease}.roll-row:hover{border-color:var(--border-bright)}.roll-t{font-size:12.5px;font-weight:700}.switch{flex-shrink:0;width:36px;height:20px;border-radius:999px;background:var(--border);position:relative;transition:background .15s ease}.switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-dim);transition:transform .18s cubic-bezier(.2,.9,.3,1.3),background .15s ease}.switch.on{background:var(--green)}.switch.on .knob{transform:translate(16px);background:#06231a}.info{cursor:help;position:relative;color:var(--text-faint);font-style:normal}.info:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-40%) translateY(4px);width:230px;background:var(--panel-2);border:1px solid var(--border-bright);border-radius:10px;padding:10px 12px;font-size:11.5px;font-weight:500;font-family:var(--sans);color:var(--text-dim);line-height:1.5;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:20;box-shadow:0 8px 30px #00000080}.info:hover:after{opacity:1;transform:translate(-40%) translateY(0)}.fine-print{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}.fine-print summary{cursor:pointer;font-size:12px;color:var(--text-faint);font-weight:600;list-style:none;transition:color .12s ease}.fine-print summary:before{content:"▸ ";transition:none}.fine-print[open] summary:before{content:"▾ "}.fine-print summary:hover{color:var(--text-dim)}.fine-print summary::-webkit-details-marker{display:none}.fp-item{font-size:11.5px;color:var(--text-faint);line-height:1.6;margin-top:8px;animation:fade-in .25s ease}.fp-item b{color:var(--text-dim)}.chart-svg-wrap svg:focus-visible{outline:1px solid var(--green-line);outline-offset:4px;border-radius:8px}@media(max-width:640px){.hero h1{font-size:21px}.strike-chip{min-width:84px}.header-right .balance-chip{display:none}}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.rise{opacity:0;animation:rise-in .55s cubic-bezier(.2,.7,.2,1) forwards}.rise-1{animation-delay:.05s}.rise-2{animation-delay:.12s}.rise-3{animation-delay:.19s}.rise-4{animation-delay:.26s}.rise-5{animation-delay:.33s}.hero h1 em{background:linear-gradient(100deg,var(--green) 35%,#b8ffe4 50%,var(--green) 65%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3.2s ease-in-out infinite}@keyframes shimmer{0%,55%{background-position:115% 0}90%,to{background-position:-55% 0}}.ping-ring{transform-origin:center;transform-box:fill-box;animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{0%{transform:scale(.3);opacity:.9}70%,to{transform:scale(2.6);opacity:0}}.zone-fill{animation:zone-breathe 3.4s ease-in-out infinite}@keyframes zone-breathe{0%,to{opacity:1}50%{opacity:.45}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.fade-in{animation:fade-in .4s ease forwards}.target-line{filter:drop-shadow(0 0 6px rgba(46,230,168,.55))}.strike-pill{transition:transform .15s ease;transform-origin:center;transform-box:fill-box}.strike-pill.dragging{transform:scale(1.12)}.asset-tab,.tenor-chip,.strike-chip,.direction-card{will-change:transform}.asset-tab:hover,.strike-chip:hover{transform:translateY(-2px)}.asset-tab:active,.strike-chip:active,.tenor-chip:active,.direction-card:active{transform:scale(.97)}.asset-tab,.strike-chip{transition:border-color .12s ease,background .12s ease,transform .15s ease}@keyframes chip-pop{0%{transform:scale(1)}45%{transform:scale(1.07)}to{transform:scale(1)}}.strike-chip.active,.tenor-chip.active{animation:chip-pop .25s ease}@keyframes branch-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.branches>.branch{animation:branch-in .35s ease both}.branches>.branch:nth-child(2){animation-delay:.07s}.cta{position:relative;overflow:hidden}.cta:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translate(-120%)}.cta:hover:not(:disabled):after{animation:sweep .7s ease}@keyframes sweep{to{transform:translate(120%)}}.cta.placed{background:#b8ffe4}.burst-wrap{position:relative}.burst{position:absolute;left:50%;top:0;width:6px;height:6px;border-radius:2px;background:var(--green);pointer-events:none;animation:burst-fly .8s cubic-bezier(.1,.8,.3,1) forwards}@keyframes burst-fly{0%{opacity:1;transform:translate(0) scale(1) rotate(0)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4) rotate(var(--rot))}}.toast{position:fixed;top:20px;right:20px;z-index:50;background:var(--panel-2);border:1px solid var(--green);border-radius:12px;padding:12px 16px;font-size:13px;box-shadow:0 10px 40px #00000080,0 0 20px #2ee6a81f;display:flex;align-items:center;gap:10px;animation:toast-in .35s cubic-bezier(.2,.9,.3,1.2),toast-out .3s ease 3.2s forwards}.toast .check{width:22px;height:22px;border-radius:50%;background:var(--green);color:#06231a;font-weight:800;display:grid;place-items:center;font-size:12px}.toast b{font-family:var(--mono);color:var(--green)}@keyframes toast-in{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{to{opacity:0;transform:translateY(-10px)}}@keyframes row-flash{0%{background:#2ee6a82e}to{background:transparent}}.pos-table tr.new-row{animation:row-flash 1.6s ease forwards}.yield-live{color:var(--green);font-variant-numeric:tabular-nums}.pos-progress{height:3px;border-radius:2px;background:var(--border);margin-top:6px;overflow:hidden;min-width:70px}.pos-progress>div{height:100%;background:var(--green);border-radius:2px;transition:width .2s linear}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.foot-note{margin-top:32px;color:var(--text-faint);font-size:11.5px;line-height:1.6;border-top:1px solid var(--border);padding-top:16px}