/* Trade-first composition. One document scroll; no tall sticky trade column. */
.project-layout{grid-template-columns:350px minmax(0,1fr);gap:26px;align-items:stretch}
.project-layout>.project-sidebar{grid-column:1;grid-row:1;position:static;display:block;margin:0;min-width:0}
.project-layout>.chart-panel,.project-layout>.launch-stage-panel{grid-column:2;grid-row:1;min-width:0}
.project-layout>.chart-panel{display:flex;flex-direction:column;min-height:100%}
.project-layout>.chart-panel .chart-canvas-wrap{flex:1;min-height:300px;height:auto}
.project-layout>.chart-panel .chart-source,.project-layout>.chart-panel .project-market-stats{flex-shrink:0}
.project-layout>.project-about{grid-column:1/-1;grid-row:2;padding:24px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:8px 34px;align-items:center}
.project-layout>.project-about h2{grid-column:1;grid-row:1;font-size:21px}
.project-layout>.project-about>p{grid-column:1;grid-row:2;margin:0;max-width:55ch}
.project-layout>.project-about .about-facts{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.project-layout>.project-about .about-facts>div{border:0;display:block;padding:0}
.project-layout>.project-about .about-facts dd{font-size:20px;margin-top:10px}
.project-layout>.project-about .profile-source{grid-column:2;grid-row:3;justify-content:flex-end;gap:12px;margin-top:4px}
.project-layout>.markets-section{grid-column:1/-1;grid-row:3;margin-top:10px}
.project-layout>.activity-section{grid-column:1/-1;grid-row:4;margin-top:10px}
.project-layout .swap-panel{height:100%;padding:23px;isolation:isolate}
.swap-panel:before{height:2px;left:18px;right:18px;background:linear-gradient(90deg,transparent 5%,#82cbbb44 25%,#c7fff0 50%,#82cbbb44 75%,transparent 95%)}
.swap-panel:focus-within{border-color:#71bdaa;box-shadow:0 16px 40px #0003,0 0 28px #5cc8ac0a}
.swap-asset{transition:border-color .2s,background .2s}
.swap-asset:focus-within{border-color:#77b9a8;background:#142522}
.swap-direction button,.swap-pools button{transition:background .2s,color .2s,border-color .2s}
.pool-choice{transition:background .2s,border-color .2s,transform .25s cubic-bezier(.16,1,.3,1)}
.pool-choice:hover{transform:translateY(-2px)}
.route-project{animation:project-breathe 6s ease-in-out infinite}
.launch-stage-panel{display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(ellipse at 60% 30%,#36695e53,transparent 68%),#101d1b}
.launch-stage-panel .launch-route{flex:1;min-height:230px}
.mode-option{padding-top:58px;min-height:184px;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.16,1,.3,1)}
.mode-option .mode-icon{position:absolute;top:19px;left:20px;width:26px;height:26px;stroke:#9ad9c9;fill:none;stroke-width:1.6}
.mode-option[aria-pressed=true]:after{display:none}
.mode-option .mode-check{position:absolute;top:20px;right:16px;width:19px;height:19px;opacity:0;color:#b8fcea}
.mode-option[aria-pressed=true] .mode-check{opacity:1}
.mode-option:hover{transform:translateY(-2px);border-color:#79a89c!important}
.launch-next{display:flex;align-items:center;gap:18px;background:linear-gradient(110deg,#c5f9eb,#aee7d8 65%,#94d3ca);transition:filter .2s,transform .2s}
.launch-next svg{width:17px;height:17px;stroke-width:2}
.launch-next:hover{filter:brightness(1.08);transform:translateY(-1px)}
.launch-next:active{transform:translateY(0)}
.launch-steps button:hover{background:#203330;color:#def7f0}
.launch-steps button[aria-current=step]{box-shadow:inset 0 -2px #ade6d6}
.draft-sidebar{position:static}.draft-field input:focus,.draft-field textarea:focus{border-color:#aee6d6}
.launch-intro h1{max-width:20ch}.launch-form h2{scroll-margin-top:130px}
.project-page [id]{scroll-margin-top:110px}
.unavailable-view{padding:45px 24px;border:1px solid var(--line);border-radius:12px;margin:30px 0 100px}
.motion-rest,.motion-rest:before,.motion-rest .route-project,.motion-rest .route-line:after{animation-play-state:paused!important}

@keyframes project-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(min-width:1550px){.project-layout{grid-template-columns:390px minmax(0,1fr);gap:30px}.project-layout .swap-panel{padding:26px}}
@media(max-width:1100px){.project-layout{grid-template-columns:310px minmax(0,1fr);gap:20px}.project-layout .swap-panel{padding:19px}.project-layout>.project-about .about-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.stage-heading{padding-left:23px;padding-right:23px}.stage-heading h2{font-size:31px}.launch-stage-panel .launch-route{padding-left:20px;padding-right:20px}.stage-body{padding-left:22px;padding-right:22px}}
@media(max-width:850px){.project-layout{grid-template-columns:minmax(0,1fr);gap:24px}.project-layout>.project-sidebar{grid-column:1;grid-row:1;max-width:none}.project-layout>.chart-panel,.project-layout>.launch-stage-panel{grid-column:1;grid-row:2}.project-layout>.project-about{grid-column:1;grid-row:3}.project-layout>.markets-section{grid-column:1;grid-row:4}.project-layout>.activity-section{grid-column:1;grid-row:5}.project-layout>.chart-panel{min-height:0}.project-layout>.chart-panel .chart-canvas-wrap{flex:none;height:370px;min-height:0}.project-layout .swap-panel{height:auto}.project-layout>.project-about{grid-template-columns:1fr}.project-layout>.project-about h2,.project-layout>.project-about>p,.project-layout>.project-about .about-facts,.project-layout>.project-about .profile-source{grid-column:1;grid-row:auto}.project-layout>.project-about .about-facts{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}.project-layout>.project-about .profile-source{margin-top:15px}.launch-stage-panel .launch-route{min-height:200px}.stage-heading h2{font-size:34px}}
@media(max-width:600px){.project-layout{gap:20px}.project-layout .swap-panel{padding:18px}.swap-heading{margin-bottom:13px}.swap-direction{margin-bottom:16px}.swap-summary{margin-top:16px}.swap-availability{margin-top:13px!important;padding-top:12px}.amount-entry{margin-top:12px}.swap-asset{padding:13px}.project-layout>.chart-panel .chart-canvas-wrap{height:300px}.project-layout>.project-about{padding:18px 0 23px}.project-layout>.project-about .about-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-heading h2{font-size:29px}.mode-option{padding-top:20px;padding-left:61px;min-height:110px}.mode-option .mode-icon{left:19px;top:24px;width:25px}.mode-option strong{padding-right:17px}.mode-option .mode-check{width:16px}.launch-steps button{min-height:44px}.launch-form h2{scroll-margin-top:145px}.project-page [id]{scroll-margin-top:135px}}
@media(prefers-reduced-motion:reduce){.project-page *,.project-page *:before,.project-page *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.mode-option:hover,.pool-choice:hover,.launch-next:hover{transform:none}}

/* Launch diagrams: the motion follows each launch's actual structure. */
.launch-steps button[aria-current=step]{box-shadow:none}
.mode-options .mode-option{padding:10px 10px 23px;overflow:hidden;min-height:0;background:#11201e;border-radius:16px;transition:border-color .2s,background .2s}
.mode-options .mode-option[aria-pressed=true]{background:linear-gradient(145deg,#1d302d,#142523);border-color:#b6efe0!important}
.mode-options .mode-option:after{display:none}
.mode-options .mode-option>strong{padding:0 14px;margin-top:19px;font-size:18px;line-height:1.25}
.mode-options .mode-option>span:not(.mode-art){margin:9px 14px 0;font-size:12px;line-height:1.6}
.mode-option .mode-check{top:23px;right:23px;z-index:1}
.mode-options .mode-art{display:block;margin:0;height:165px;overflow:hidden;border-radius:10px;background:radial-gradient(ellipse at 70% 20%,#76bbaa20,transparent 75%),#0b1615;color:#b4f2e2}
.mode-options .mode-art-stock{background:radial-gradient(ellipse at 70% 20%,#69afcc22,transparent 75%),#0b1619;color:#8fbcde}
.mode-options .mode-art-multi{background:radial-gradient(ellipse at 70% 20%,#aa82d62b,transparent 75%),#11151d;color:#c2a5ed}
.mode-options .mode-art-direct{background:radial-gradient(ellipse at 50% 40%,#75a5c925,transparent 75%),#0c1917;color:#95bedd}
.mode-art svg{display:block;width:100%;height:100%;overflow:visible}

.mode-options .mode-art{height:auto;aspect-ratio:420/230;border:1px solid #ffffff08;background:radial-gradient(ellipse at 65% 0%,#64998d12,transparent 75%),#0b1312;color:#9bdac9}
.mode-options .mode-art-multi{background:radial-gradient(ellipse at 75% 0%,#a48bbd17,transparent 75%),#101217;color:#b8a8cf}
.mode-options .mode-art-stock{background:radial-gradient(ellipse at 70% 0%,#70b0bd13,transparent 75%),#0c1316;color:#92bfcc}
.mode-options .mode-art-direct{background:radial-gradient(ellipse at 50% 0%,#6d97b716,transparent 75%),#0b1413;color:#93b2c9}
.mode-art svg{height:auto;aspect-ratio:420/230}
.diagram-grid{stroke:#ffffff08;stroke-width:1;fill:none}
.diagram-label{fill:#acb8b6;font:8px Manrope,sans-serif;letter-spacing:.7px}
.market-trace,.lane-trace{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.market-connector{fill:none;stroke:currentColor;stroke-opacity:.35;stroke-width:1}
.diagram-junction,.price-marker{fill:currentColor}
.market-lane>rect{fill:#18201f;stroke:#b9c3c221;stroke-width:1}
.market-lane .diagram-label{font-size:9px;letter-spacing:.2px;fill:#d2dbda}
.lane-trace{stroke-width:1.3;animation:market-liquidity 8s ease-in-out infinite;animation-delay:calc(var(--i)*-2s);transform-box:fill-box;transform-origin:center}
.market-volume{fill:currentColor;opacity:.2;transform-box:fill-box;transform-origin:bottom;animation:volume-settle 7s ease-in-out infinite;animation-delay:calc(var(--i)*-.21s)}
.diagram-threshold{fill:none;stroke:currentColor;stroke-opacity:.28;stroke-width:1;stroke-dasharray:3 4}
.price-halo{fill:none;stroke:currentColor;stroke-opacity:.2;stroke-width:5;animation:marker-focus 7s ease-in-out infinite}
.market-envelope{fill:none;stroke:currentColor;stroke-width:1;opacity:.19}
.market-candle path{stroke:currentColor;stroke-width:1}.market-candle rect{fill:currentColor;opacity:.8}.market-candle.down{color:#a88085}
.market-candle{transform-box:fill-box;transform-origin:center;animation:candle-settle 9s ease-in-out infinite;animation-delay:calc(var(--i)*-.37s)}
.liquidity-column{fill:currentColor;opacity:.19;transform-box:fill-box;transform-origin:bottom;animation:volume-settle 10s ease-in-out infinite;animation-delay:calc(var(--i)*-.32s)}
.liquidity-column:nth-of-type(2n){opacity:.27}
.liquidity-ask{fill:none;stroke:#b2a1c5;stroke-width:1.5;opacity:.7}.liquidity-price{fill:#1d302d;stroke:#92b6b157;stroke-width:1}
@keyframes volume-settle{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1)}}
@keyframes candle-settle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes marker-focus{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes market-liquidity{0%,100%{transform:scaleY(.85)}50%{transform:scaleY(1.1)}}
@media(max-width:600px){.mode-options .mode-option>strong{font-size:18px}.mode-options .mode-option{padding:9px 9px 20px}}
@media(prefers-reduced-motion:reduce){.mode-art *{animation:none!important}}

.mode-option .mode-art svg{stroke:none;stroke-width:0;fill:none}.mode-art text,.mode-art .market-volume,.mode-art .liquidity-column,.mode-art .market-candle rect{stroke:none}.mode-art path[fill]{stroke:none}


/* Coordinated activity within each market diagram. */
.mode-options{gap:18px}
.mode-options .mode-option{box-shadow:0 8px 24px #00000016;transition:border-color .25s,background .25s,box-shadow .25s}
.mode-options .mode-option:hover,.mode-options .mode-option:focus-visible{transform:none;box-shadow:0 12px 28px #00000032;border-color:#8ca19d!important}
.mode-options .mode-option[aria-pressed=true]{box-shadow:0 9px 28px #00000026,inset 0 0 0 1px #b6efe015}
.mode-options .mode-art{border-color:#ffffff10;box-shadow:inset 0 1px 0 #ffffff06}
.mode-option .mode-check{top:16px;right:16px;width:17px;height:17px;opacity:0}
.mode-option[aria-pressed=true] .mode-check{opacity:1}
.mode-options .mode-option>strong{margin-top:17px;letter-spacing:-.02em}
.mode-options .mode-option>span:not(.mode-art){color:#b6c6c3;max-width:42ch}
.market-traveler{fill:#d6f7ee;stroke:#142523;stroke-width:1.5;offset-rotate:0deg;animation:market-transfer 6s linear infinite;filter:drop-shadow(0 2px 3px #0008)}
.mode-art-multi .market-lane>rect{animation:market-receive 6s ease-in-out infinite;animation-delay:calc(var(--i)*-2s)}
.mode-art .market-volume{animation-duration:3.8s;opacity:.3}
.mode-art .market-candle{animation-duration:5s}
.mode-art .market-candle rect{transform-box:fill-box;transform-origin:center;animation:candle-body 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.37s)}
.mode-art .liquidity-column{animation-duration:5s;opacity:.25}
.mode-art .diagram-label{font-size:9px;fill:#b7c5c3}
.mode-art .market-lane .diagram-label{font-size:10px}
.mode-art .lane-trace{animation-duration:4s;stroke-width:1.8}
@keyframes market-transfer{0%{offset-distance:0%;opacity:0}8%,88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes market-receive{0%,55%,100%{fill:#18201f;stroke:#b9c3c221}72%{fill:#2a2c36;stroke:#c3acd47a}}
@keyframes volume-settle{0%,100%{transform:scaleY(.55)}45%{transform:scaleY(1.18)}70%{transform:scaleY(.82)}}
@keyframes candle-settle{0%,100%{transform:translateY(2px)}45%{transform:translateY(-5px)}70%{transform:translateY(-1px)}}
@keyframes candle-body{0%,100%{transform:scaleY(.7)}45%{transform:scaleY(1.35)}70%{transform:scaleY(.9)}}
@keyframes market-liquidity{0%,100%{transform:scaleY(.78)}45%{transform:scaleY(1.24)}70%{transform:scaleY(.95)}}
@media(prefers-reduced-motion:reduce){.mode-art *{animation:none!important}.market-traveler{display:none}.mode-options .mode-option{transition:none}}

/* Tactile card hover, independent of the market illustrations. */
.mode-options .mode-option{transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s,background .24s,box-shadow .24s}
@media(hover:hover) and (pointer:fine){
 .mode-options .mode-option:hover{transform:translateY(-5px);border-color:#a3c8bf!important;box-shadow:0 16px 32px #00000045}
 .mode-options .mode-option:active{transform:translateY(-2px);transition-duration:.1s}
}
.mode-options .mode-option:focus-visible{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.mode-options .mode-option,.mode-options .mode-option:hover,.mode-options .mode-option:focus-visible{transform:none;transition:none}}
