.forex-intro-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;align-items:center}
.forex-intro-copy{min-width:0}
.forex-scene{position:relative;min-width:0;height:410px;isolation:isolate;border:1px solid var(--p-border);border-radius:24px;background:radial-gradient(ellipse at 50% 50%,#13c6ef12,transparent 70%);overflow:hidden}
.forex-scene canvas,.forex-scene-fallback{display:block;width:100%;height:100%;position:absolute;inset:0}
.forex-scene-fallback{transition:opacity .3s;pointer-events:none}
.forex-scene[data-scene-state="ready"] .forex-scene-fallback{opacity:0}
.forex-scene:not([data-scene-state="ready"]) canvas{visibility:hidden}
.forex-scene-caption{position:absolute;left:18px;bottom:17px;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.forex-scene button{position:relative;border:1px solid var(--p-border);border-radius:20px;padding:8px 12px;background:var(--p-surface-2);color:var(--p-strong);font-size:11px}
@media(max-width:780px){.forex-intro-grid{grid-template-columns:minmax(0,1fr);gap:24px}.forex-scene{height:350px}.forex-intro-copy h1{font-size:34px}}
@media(prefers-reduced-motion:reduce){.forex-scene-fallback{transition:none}}

.forex-scene canvas{touch-action:none;cursor:grab;height:calc(100% - 62px);outline-offset:-5px}
.forex-scene.is-dragging canvas{cursor:grabbing}
.forex-scene-caption{top:16px;bottom:auto;pointer-events:none;z-index:1}
.forex-scene-hint{position:absolute;top:16px;right:16px;font-size:10px;color:var(--muted);pointer-events:none;z-index:1}
.forex-scene-tools{position:absolute;bottom:12px;left:10px;right:10px;display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
.forex-scene-tools button{min-width:30px;min-height:34px;padding:6px 9px;line-height:1;background:var(--p-surface-2)}
.forex-scene-tools button:hover{border-color:var(--teal-dark);color:var(--teal-dark)}
.forex-scene-tools [data-scene-pause]{font-size:10px;min-width:94px}
@media(max-width:480px){.forex-scene-caption{font-size:8px;left:12px}.forex-scene-hint{font-size:9px;right:12px}.forex-scene-tools{gap:3px;left:6px;right:6px}.forex-scene-tools button{padding:6px;min-width:27px}.forex-scene-tools [data-scene-pause]{min-width:88px}}

@media(max-width:380px){.forex-scene canvas{height:calc(100% - 100px)}.forex-scene-hint{top:34px;left:12px;right:auto}}
.forex-scene canvas:focus-visible{outline:2px solid var(--teal-dark);border-radius:18px}
@media(max-width:780px){
 .forex-scene{height:390px}
 .forex-scene canvas{height:calc(100% - 104px)}
 .forex-scene-tools button{min-width:40px;min-height:40px}
 .forex-scene-tools [data-scene-pause]{min-width:100px}
}
@media(max-width:380px){
 body:is([data-page="forex"],[data-page="crypto"]) .site-header{padding-inline:14px;gap:8px}
 body:is([data-page="forex"],[data-page="crypto"]) .site-header .brand{font-size:22px;gap:5px}
 body:is([data-page="forex"],[data-page="crypto"]) .site-header .brand-symbol{width:30px;height:38px}
 body:is([data-page="forex"],[data-page="crypto"]) .site-header .header-actions{gap:6px}
 body:is([data-page="forex"],[data-page="crypto"]) .site-header .button{padding-inline:11px}
}

.crypto-scene-column{min-width:0}
.crypto-live-panel{display:grid;grid-template-columns:1fr auto;gap:9px 12px;padding:18px 20px;border:1px solid var(--p-border);border-radius:16px;background:var(--p-surface-2);margin-top:12px}
.crypto-live-panel label{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.crypto-live-panel select{background:var(--p-input);color:var(--p-strong);border:1px solid var(--p-border);padding:6px;border-radius:7px;max-width:150px}
.crypto-live-panel strong{font-size:23px;color:var(--p-strong);font-variant-numeric:tabular-nums}
.crypto-live-panel small,.crypto-chart-note{grid-column:1/-1;color:var(--muted);font-size:10px;line-height:1.6}
.crypto-live-panel [data-crypto-change]{grid-column:1/-1;font-size:12px}
.crypto-placeholder{display:none}
.crypto-awaiting{position:absolute;top:42px;left:18px;font-size:12px;color:var(--muted);z-index:1;pointer-events:none}
@media(max-width:380px){.crypto-live-panel{grid-template-columns:1fr}.crypto-live-panel strong{font-size:22px}}

.market-history-values{grid-column:1/-1;list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:3px 0;padding:0}.market-history-values li{font:11px/1.4 monospace;padding:5px 7px;border:1px solid var(--p-border);border-radius:6px;color:var(--p-strong);background:var(--p-input)}

/* Readable values stay at screen size while following the 3D bars. */
.forex-intro-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
.forex-scene{height:500px}
.market-scene-labels{position:absolute;inset:0 0 62px;pointer-events:none;overflow:hidden}
.market-scene-labels svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.market-scene-labels line{stroke:#66e4d3;stroke-width:1;opacity:.65}
.market-scene-value{position:absolute;top:0;left:0;box-sizing:border-box;width:90px;height:26px;display:flex;align-items:center;justify-content:center;background:#08202ff5;color:#f4ffff;border:1px solid #49cbbb;border-radius:6px;box-shadow:0 3px 10px #0003;font:600 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.market-scene-value[hidden],.forex-scene:not([data-scene-state="ready"]) .market-scene-labels{display:none}
@media(max-width:1000px){.forex-intro-grid{grid-template-columns:minmax(0,1fr)}.forex-scene{height:480px}}
@media(max-width:780px){.forex-scene{height:460px}.market-scene-labels{bottom:104px}}

.market-scene-value{width:110px;height:42px;flex-direction:column;gap:4px}
.market-scene-value small{font:500 9px/1 Arial,sans-serif;color:#a9e0db;letter-spacing:.1px}
.market-scene-value strong{font:600 13px/1 ui-monospace,Consolas,monospace;color:#fff}
.market-scene-meaning{position:absolute;top:38px;left:18px;right:12px;font-size:11px;color:var(--muted);pointer-events:none}
@media(max-width:480px){.market-scene-meaning{top:48px;left:12px;font-size:10px}.forex-scene-hint{top:31px;left:12px;right:auto}}