/* Mobile scenes pin only after their complete active unit passes a fit check. */
.mkg-interface-frame{display:contents}
@media screen and (max-width:900px){
 .interface-layout .mkg-interface-frame{display:block}
 .interface-art .diagram-scroll{overflow:visible}
 .interface-art .diagram-scroll>svg{min-width:0;width:100%;max-width:420px;margin:auto}
 .interface-art .diagram-scroll svg text{font-size:22px;letter-spacing:1px}
 .interface-art .diagram-scroll svg text[font-size="12"]{font-size:22px;letter-spacing:0}
 .interface-art .scroll-cue{display:none}
 .interface-art .figure-heading{margin-bottom:10px}
 .interface-art .figure-heading h3{font-size:23px;line-height:1.2;margin:8px 0 12px}
 .js .stage-buttons{margin:0 0 8px;gap:12px}
 .stage-buttons button{font-size:13px}
 .interface-notes{padding-top:8px}
 .js .interface-layout .function-note{min-height:0;padding:12px 0 16px}
 .interface-layout .function-note h4{font-size:22px;line-height:1.2;margin:8px 0}
 .interface-layout .function-note p{font-size:15px;line-height:1.6}
 .interface-layout[data-mobile-measuring="true"] .interface-notes,.interface-layout[data-mobile-pin="true"] .interface-notes{display:grid}
 .interface-layout[data-mobile-measuring="true"] .function-note,.interface-layout[data-mobile-pin="true"] .function-note{grid-area:1/1;visibility:hidden;display:block}
 .interface-layout[data-mobile-measuring="true"] .function-note.selected,.interface-layout[data-mobile-pin="true"] .function-note.selected{visibility:visible}
 .interface-layout[data-mobile-pin="true"]{height:var(--mkg-scene-height);display:block}
 .interface-layout[data-mobile-pin="true"] .mkg-interface-frame{position:sticky;top:var(--mkg-scene-top);background:var(--paper,#F7F5F0)}
 .interface-layout[data-mobile-pin="true"] .stage-highlight{display:block}
}
@media screen and (max-width:999px){
 .practice-scene .practice-map{margin:32px 0;padding:18px 0}
 .practice-map figcaption h3{font-size:23px;line-height:1.2;margin:8px 0 12px}
 .practice-map .figure-intro{font-size:15px;line-height:1.5;margin:0 0 8px}
 .practice-map .mode-controls{gap:8px 16px;margin:0 0 10px}
 .practice-map .mode-controls button{font-size:13px;line-height:1.35}
 .practice-map .figure-layout{display:block;margin-top:8px}
 .practice-map .task-path{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px}
 .practice-map .task-path li{font-size:13px;line-height:1.4;padding:2px 0 14px}
 .practice-map .task-path span{width:22px;height:22px;font-size:11px;margin-bottom:5px}
 .practice-map .task-path li:not(:last-child):after{content:'→';right:-12px;top:8px;bottom:auto}
 .practice-map .task-path li:nth-child(3n):after{content:'↓';right:8px;top:auto;bottom:0}
 .practice-map .figure-explanation{margin-top:12px;padding-top:10px}
 .practice-map .figure-explanation h4{font-size:22px;line-height:1.2;margin:6px 0 8px}
 .practice-map .figure-explanation p{font-size:15px;line-height:1.5}
 .practice-map .figure-note{font-size:13px;line-height:1.5;margin-top:12px}
 .practice-scene[data-mobile-pin="true"]{height:var(--mkg-scene-height);margin:32px auto;display:block}
 .practice-scene[data-mobile-pin="true"] .practice-map{position:sticky;top:var(--mkg-scene-top);margin:0;background:var(--paper,#F7F5F0)}
}
@media screen and (max-width:800px){
 .money-frame{display:block}
 .money-visual .figure-head h3{font-size:23px;line-height:1.2;margin:6px 0 10px}
 .money-visual .tabs{gap:8px 12px;margin:6px 0}
 .money-visual .tabs button{font-size:13px;line-height:1.35;padding:8px 0;min-height:44px}
 .money-visual .network-art{width:100%;height:auto;max-height:none}
 .money-visual .network-art text{font-size:23px}
 .money-visual .caption{font-size:13px;line-height:1.5;margin:8px 0 10px}
 .money-step{padding:12px 0 16px;min-height:0!important}
 .money-step h3{font-size:22px;line-height:1.2;margin:8px 0}
 .money-step p{font-size:15px;line-height:1.5;margin-bottom:10px}
 .money-step .caption{font-size:13px;line-height:1.5}
 .money-steps{padding:0!important}
 .money-story[data-mobile-measuring="true"] .money-steps,.money-story[data-mobile-pin="true"] .money-steps{display:grid}
 .money-story[data-mobile-measuring="true"] .money-step,.money-story[data-mobile-pin="true"] .money-step{grid-area:1/1;visibility:hidden!important;display:block}
 .money-story[data-mobile-measuring="true"] .money-step[data-active="true"],.money-story[data-mobile-pin="true"] .money-step[data-active="true"]{visibility:visible!important}
 .money-story[data-mobile-pin="true"]{height:var(--mkg-scene-height)!important}
 .money-story[data-mobile-pin="true"] .money-frame{position:sticky!important;top:var(--mkg-scene-top);background:var(--paper,#F7F5F0)}
}
@media(prefers-reduced-motion:reduce){
 [data-mobile-pin="true"]{height:auto!important}
 [data-mobile-pin="true"] .mkg-interface-frame,[data-mobile-pin="true"] .practice-map,[data-mobile-pin="true"] .money-frame{position:static!important}
}
@media print{
 .mkg-interface-frame{display:contents!important}
 [data-mobile-pin]{height:auto!important}
 [data-mobile-pin] .mkg-interface-frame,[data-mobile-pin] .practice-map,[data-mobile-pin] .money-frame{position:static!important}
 [data-mobile-pin] .function-note,[data-mobile-pin] .money-step{visibility:visible!important;display:block!important}
 [data-mobile-pin] .interface-notes,[data-mobile-pin] .money-steps{display:block!important}
}

/* Compact phone diagrams retain the full map as an explicit option. */
.money-mobile-map,.mobile-map-toggle{display:none}
@media screen and (max-width:999px){
 .practice-map .task-path li{padding-left:25px;min-height:44px;padding-bottom:10px}
 .practice-map .task-path span{position:absolute;left:0;top:3px;width:18px;height:18px;font-size:10px;margin:0}
 .practice-map .task-path{gap:10px 14px}
}
@media screen and (max-width:800px){
 .money-visual .figure-head{margin-bottom:10px}
 .money-visual .tabs button{flex:1 1 0;min-width:0}
 .money-visual .network-stage{margin:0}
 .js .money-visual .network-stage .network-art{display:none}
 .js .money-mobile-map{display:block;min-height:136px;padding:12px 0 0}
 .money-mobile-route{display:none}
 .network-stage[data-mode="payments"] .money-mobile-route[data-route="payments"],.network-stage[data-mode="funding"] .money-mobile-route[data-route="funding"],.network-stage[data-mode="dependency"] .money-mobile-route[data-route="dependency"]{display:block}
 .money-route-line{display:flex;align-items:center;gap:6px;margin-bottom:8px}
 .money-route-line span{flex:1;border-bottom:1px solid #aabbdc;padding:8px 2px;font:13px/1.4 Arial,sans-serif;color:#202733;text-align:center}
 .money-route-line b{font:18px Arial,sans-serif;color:#2457d6}
 .money-route-line.optional span{border-bottom-style:dashed}
 .money-mobile-route>p{font:12px/1.5 Arial,sans-serif;color:#596474;margin:6px 0}
 .js .mobile-map-toggle{display:block;min-height:44px;border:0;border-bottom:1px solid #b9c7e7;background:none;color:#2457d6;font:13px Arial,sans-serif;padding:8px 0;margin:0 0 6px;cursor:pointer}
 .js .money-visual .network-stage.full-network .network-art{display:block}
 .network-stage.full-network .money-mobile-map{display:none}
}

.mkg-future-frame{display:contents}
@media screen and (max-width:899px){
 .scroll-story .mkg-future-frame{display:block}
 .scroll-story .story-visual{position:static}
 .scroll-story .story-heading h3{font-size:23px;line-height:1.2;margin:8px 0 12px}
 .scroll-story .story-heading{padding-top:8px}
 .scroll-story .stage-buttons{margin-bottom:8px;gap:16px}
 .scroll-story .stage-buttons button{min-height:44px}
 .scroll-story .swipe-note{font-size:12px;margin:4px 0}
 .scroll-story .story-hint{margin:8px 0}
 .scroll-story .story-steps{padding:8px 0 0;margin:0}
 .scroll-story .story-step{padding:12px 0 16px;min-height:0}
 .scroll-story .story-step h4{font-size:22px;line-height:1.2;margin:8px 0}
 .scroll-story .story-step p{font-size:15px;line-height:1.6}
 .scroll-story[data-mobile-measuring="true"] .story-steps,.scroll-story[data-mobile-pin="true"] .story-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 .scroll-story[data-mobile-measuring="true"] .story-step,.scroll-story[data-mobile-pin="true"] .story-step{grid-area:1/1;display:block;visibility:hidden}
 .scroll-story[data-mobile-measuring="true"] .story-step.selected,.scroll-story[data-mobile-pin="true"] .story-step.selected{visibility:visible}
 .scroll-story[data-mobile-pin="true"]{height:var(--mkg-scene-height);display:block}
 .scroll-story[data-mobile-pin="true"] .mkg-future-frame{position:sticky;top:var(--mkg-scene-top);background:var(--paper,#F7F5F0)}
}
@media print{.mkg-future-frame{display:contents!important}}

@media screen and (max-width:999px){.practice-map .task-path li.output{padding-left:25px!important}}