.mobile-exchange-flow{display:none}@media(max-width:620px){.tutorial-modes,.tutorial-focus-title,.tutorial-stage{display:none!important}.mobile-exchange-flow{display:block;color:#B2F7EF}.flow-step{font-size:18px;font-weight:800;line-height:1.4;margin:4px 0 18px;color:#fff}.flow-phones{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:12px;align-items:start}.flow-phones strong{display:block;margin-bottom:8px;font-size:13px;color:#00E5D5;line-height:1.5}.flow-phones canvas{display:block;width:100%;height:auto;border-radius:12px;background:#102e3d}.flow-secondary p{font-size:13px;line-height:1.6;margin:12px 0 0;color:#B2F7EF}.flow-action{font-size:16px;line-height:1.6;color:#fff;margin:16px 0}.flow-chapters{display:flex;overflow-x:auto;gap:8px;padding:4px 0 10px;scrollbar-width:thin}.flow-chapters button{flex:0 0 auto;border:1px solid #465C66;border-radius:10px;background:#001F2B;color:#B2F7EF;padding:10px;min-height:44px;font-size:12px}.flow-chapters button[aria-pressed=true]{background:#00E5D5;color:#001F2B}.tutorial-card:fullscreen .mobile-exchange-flow{max-width:440px;margin:auto}.tutorial-card:fullscreen .tutorial-controls{width:100%;max-width:440px;margin:16px auto}}

@media(max-width:620px){.flow-phones{transition:grid-template-columns .5s ease;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}.mobile-exchange-flow[data-active=b] .flow-phones{grid-template-columns:minmax(0,1fr) minmax(0,2.1fr)}.flow-secondary p:empty{display:none}.flow-phones canvas{transition:box-shadow .5s ease}.mobile-exchange-flow[data-active=a] .flow-primary canvas,.mobile-exchange-flow[data-active=b] .flow-secondary canvas{box-shadow:0 0 0 2px #00E5D5}.flow-phones strong{min-height:40px}}@media(prefers-reduced-motion:reduce){.flow-phones,.flow-phones canvas{transition:none}}

@media(max-width:620px){.flow-phones{grid-template-columns:minmax(0,3.5fr) minmax(0,1fr);gap:10px;min-height:calc((100vw - 58px)*.7778*1.9273 + 48px)}.mobile-exchange-flow[data-active=b] .flow-phones{grid-template-columns:minmax(0,1fr) minmax(0,3.5fr)}.flow-phones strong{font-size:12px;min-height:40px;overflow-wrap:anywhere}.flow-action{padding:12px 14px;background:#123A44;border-left:3px solid #00E5D5;border-radius:8px;font-size:16px;margin-bottom:8px;font-weight:700}.flow-reaction{font-size:14px;line-height:1.6;color:#B2F7EF;padding:0 14px;margin:0 0 18px}.flow-step{position:relative}.flow-chapters{position:relative;scroll-behavior:smooth}.tutorial-card:fullscreen{padding:12px;justify-content:flex-start}.tutorial-card:fullscreen .flow-phones{min-height:0}.tutorial-card:fullscreen .flow-phones canvas{max-height:58vh;object-fit:contain;object-position:top}.flow-primary,.flow-secondary{min-width:0}.tutorial-section{scroll-margin-top:100px}}
