*{box-sizing:border-box}body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);overflow:hidden}.film{max-width:1150px;margin:auto;padding:24px 30px}button{font:inherit;cursor:pointer;color:var(--ink);background:var(--surface-muted);border:1px solid var(--line);border-radius:30px;padding:8px 17px;font-size:12px}header,footer{display:flex;align-items:center;justify-content:space-between;gap:15px}header>span{font-size:10px;letter-spacing:.16em;font-weight:750;color:var(--muted)}.caption{height:133px;padding-top:23px;text-align:center}.caption>span{color:var(--up-green);font-size:11px;font-weight:800;letter-spacing:.12em}h1{font-size:32px;line-height:1.1;letter-spacing:-.04em;margin:9px 0}p{font-size:14px;color:var(--muted);margin:0}.viewport{height:420px;position:relative;overflow:hidden;border-radius:15px;background:var(--surface-muted);isolation:isolate}.camera{position:absolute;width:960px;height:408px;left:50%;top:50%;transform-origin:0 0;will-change:transform;transition:transform 650ms cubic-bezier(.22,1,.36,1),opacity 350ms}.terminal{width:960px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 15px 45px #0000000a;overflow:hidden}.terminal-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);font-size:15px}.terminal-top small{font-weight:400;color:var(--muted)}.terminal-top>span{font-size:12px;color:var(--muted)}.terminal-top>span>b{font-size:16px;color:var(--up-green);margin-left:10px}.workspace{display:grid;grid-template-columns:650px 1fr;padding:10px;gap:15px;height:314px}.chart-area{position:relative;align-self:center}.chart-area svg{width:650px;display:block}.badge{position:absolute;top:0;left:16px;border-radius:6px;padding:5px 8px;background:var(--up-fill);color:var(--up-green);font-size:10px;font-weight:700;z-index:2}.badge small{color:var(--muted);margin-left:8px;font-size:9px}.mask{position:absolute;right:5px;top:32px;bottom:25px;width:28%;background:var(--surface-muted);border-left:1px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:9px;transition:opacity .3s}.mask b{font-size:38px}.mask span{font-size:11px}.controls{padding:0 8px 0 0}.direction{display:flex;gap:8px;margin-bottom:9px}.direction>span{width:50%;text-align:center;padding:6px;font-size:12px;font-weight:750;border-radius:6px}.buy{background:var(--up-fill);color:var(--up-green)}.buy.selected{background:var(--up-green);color:var(--surface)}.sell{background:var(--down-fill);color:var(--down-red)}.control{border:1px solid currentColor;border-radius:7px;padding:7px 10px;margin-bottom:8px;background:var(--surface)}.control>div:first-child{display:flex;justify-content:space-between;font-size:10px}.control small{font-size:9px;display:block;margin-top:4px}.sl{color:var(--down-red)}.tp{color:var(--up-green)}.risk{color:var(--risk-amber)}.track{height:5px;background:color-mix(in srgb,currentColor 20%,transparent);border-radius:5px;margin:9px 0 5px}.track i{height:5px;display:block;width:30%;background:currentColor;position:relative;border-radius:5px}.track i:after{content:'';position:absolute;right:-4px;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid currentColor}.ratio{display:flex;justify-content:space-between;font-size:10px;margin:4px 0 6px;color:var(--muted)}.place{text-align:center;padding:8px;background:var(--brand-green);color:white;border-radius:6px;font-size:12px;font-weight:750}.terminal-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:10px 20px;font-size:10px;color:var(--muted)}.active{outline:3px solid var(--up-green);outline-offset:4px;box-shadow:0 0 0 7px var(--surface)}.sl.active{outline-color:var(--down-red)}.risk.active{outline-color:var(--risk-amber)}.pointer{position:absolute;left:820px;top:96px;color:var(--ink);font-size:26px;text-shadow:1px 1px var(--surface);transition:left .45s ease,top .45s ease;z-index:8}.pointer i{position:absolute;width:25px;height:25px;border:2px solid var(--up-green);border-radius:50%;left:-8px;top:0;animation:ripple 1.2s ease-out infinite}@keyframes ripple{to{transform:scale(1.8);opacity:0}}.receipt{display:none;position:absolute;inset:50px 110px;background:var(--surface);border:1px solid var(--up-green);border-radius:14px;text-align:center;box-shadow:0 14px 30px #00000018;align-items:center;justify-content:center;flex-direction:column;gap:10px}.receipt span{font-size:11px;color:var(--up-green);font-weight:750}.receipt>b{font-size:48px;color:var(--up-green);letter-spacing:-.05em}.receipt small{font-size:11px;color:var(--muted)}.timeline{height:3px;background:var(--line);margin:19px 0;position:relative}.timeline:after{content:'';display:block;background:var(--up-green);height:3px;width:var(--progress,0%)}footer span{font-size:12px;color:var(--muted)}.static-steps{padding:16px;line-height:1.8;font-size:14px;color:var(--muted)}
@media(max-width:600px){.film{padding:16px 12px}.caption{height:142px;padding-top:24px}h1{font-size:27px}p{font-size:13px;max-width:310px;margin:auto;line-height:1.5}.viewport{height:340px}.timeline{margin:16px 0}footer span{font-size:11px;max-width:220px}header>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.camera,.pointer{transition:none}.pointer i{animation:none}}
.badge{font-size:14px;top:5px;padding:8px 12px}.badge small{display:block;margin:4px 0 0;font-size:10px;font-weight:450}.provenance{position:absolute;left:26px;bottom:22px;border:1px solid var(--line);background:var(--surface);padding:13px 18px;border-radius:10px;display:flex;flex-direction:column;gap:5px;box-shadow:0 10px 22px #0000000a}.provenance[hidden]{display:none}.provenance b{font-size:11px;letter-spacing:.07em;color:var(--up-green)}.provenance span{font-size:15px;font-weight:650}.provenance small{font-size:10px;color:var(--muted)}#filmTry{background:var(--brand-green);color:white;border:0;font-weight:750;font-size:14px;padding:12px 20px;white-space:nowrap}footer{flex-wrap:wrap}footer>span{flex:1}#replay{padding:8px 12px;font-size:11px}@media(max-width:600px){footer{gap:10px}footer>span{max-width:none;width:100%;flex-basis:100%;text-align:center}#filmTry{flex:1}.badge{font-size:17px}.badge small{font-size:12px}.provenance b{font-size:12px}.provenance span{font-size:17px}.provenance small{font-size:12px}}

/* Round 5: Pause freezes the cursor ripple as well as the timeline. */
.film-paused .pointer i{animation-play-state:paused}

/* Compact revision: preserve the original frame. Layout zoom, never transform scale. */
.camera{transform:none!important;will-change:auto;transform-origin:initial;transition:opacity 350ms}
.chart-area svg{shape-rendering:geometricPrecision;text-rendering:geometricPrecision}