@media(max-width:1600px){.market-art{width:min(100%,560px);max-width:560px;height:405px;margin-inline:auto;overflow:hidden}.hero-candle-chart{width:100%!important;height:100%!important;right:0!important;bottom:0!important}.hero-candle-chart .fib-labels{display:none}.hero-candle-chart .last-price rect{width:104px}.hero-candle-chart .last-price text{font-size:7px}.market-art .quote-card{left:16px;top:16px;min-width:138px;padding:9px 11px;z-index:4}.market-art .quote-card strong{font-size:20px}.market-art .quote-card strong span{font-size:12px}.market-art .quote-card:after{right:10px;top:10px;font-size:6px}.chart-label.label-a{left:16px;bottom:17px;z-index:4}.chart-label.label-b{right:16px;top:18px;z-index:4}.hero-candle-chart .chart-grid path{stroke-opacity:.7}.hero-candle-chart .volume-bars rect{opacity:.75}}

/* The desktop section ordering uses flex. On phones it can preserve a section's
   desktop intrinsic width, so fall back to normal document flow before sizing the
   chart canvas. This keeps all chart coordinates inside the visible card. */
@media(max-width:760px){
  main{display:block;max-width:100%;width:100%;overflow-x:hidden}
  main>.hero,main>nav{box-sizing:border-box;max-width:100%;width:100%;margin-left:0;margin-right:0}
  .hero-grid,.market-art{max-width:100%;width:100%}
  .hero-grid{min-width:0}
  .hero-candle-chart{left:0!important;right:auto!important;width:100%!important;height:100%!important}
}