.study-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px }
.study-switch { display:flex; gap:3px; padding:3px; border:1px solid #393939; border-radius:9px }
.study-switch button,.thread-toggle { font:inherit; color:#aaa; cursor:pointer }
.study-switch button { padding:6px 11px; background:none; border:0; border-radius:6px; font-size:13px }
.study-switch button[aria-pressed=true] { background:#363636; color:white }
.feature-stage { container-type:inline-size; display:grid; place-items:center; aspect-ratio:1470/797; padding:5%; background:#1b1b1b; border-radius:16px; color:#eee }
.feature-card { width:min(100%,540px); padding:clamp(16px,3cqw,34px); background:#121212; border:1px solid #373737; border-radius:14px }
.feature-card header,.thread-message header { display:flex; align-items:center; gap:9px; font-size:15px }
.feature-card header img,.thread-message header img { width:30px; height:30px; border-radius:50% }
.feature-card small { color:#aaa; font-size:13px }
.trade-plot { position:relative; margin:35px 0 28px; }
.trade-plot > img { width:100%; display:block }
.trade-point { position:absolute; transform:translate(-50%,-50%); padding:0; width:40px;height:40px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center }
.trade-point img {width:18px;height:18px;border:2px solid #42c849;border-radius:100%;background:#171717}
.trade-point[data-trade="1"] img { border-color:#e34949 }
.trade-point[aria-pressed=true] img { width:32px;height:32px }
.trade-readout,.thread-message { border-top:1px solid #343434; padding-top:15px }
.trade-readout strong,.post-text { display:block; font-weight:400;font-size:clamp(16px,2.4cqw,26px);margin:8px 0 12px }
.feature-stage[data-layout="detail"] .trade-feature { display:grid;grid-template-columns:1.1fr 1fr;column-gap:6%;align-items:center;width:min(100%,780px) }
.feature-stage[data-layout="detail"] .trade-feature header { grid-column:1/-1 }
.feature-stage[data-layout="detail"] .trade-readout {border:0;border-left:1px solid #343434;padding:0 0 0 16px}
.thread-toggle { background:none;border:0;padding:6px 0;text-decoration:underline;text-underline-offset:4px;font-size:14px }
.thread-message { margin-top:14px }
.thread-message p {font-size:15px;margin:8px 0 0 39px;color:#ddd}
.thread-message header {font-size:14px}
.feature-stage[data-layout="pair"] .conversation-card {display:grid;grid-template-columns:1fr 1.15fr;gap:6%;width:min(100%,820px);align-items:center}
.feature-stage[data-layout="pair"] .thread-message { margin:0;border:0;border-left:1px solid #343434;padding:12px 0 12px 18px }
.feature-stage button:focus-visible,.study-switch button:focus-visible {outline:2px solid white;outline-offset:3px}
@media(max-width:600px){.feature-stage{aspect-ratio:auto;min-height:320px}.feature-stage[data-layout="pair"] .conversation-card,.feature-stage[data-layout="detail"] .trade-feature{display:block}.feature-stage[data-layout="pair"] .thread-message{margin-top:14px}.feature-stage[data-layout="detail"] .trade-feature{border-left:3px solid #555}}
.density-card { touch-action:pan-y; }
.density-card header small,.trade-pnl {display:block}
.density-card header small {margin-top:3px}
.density-card .trade-plot {margin:42px 0}
.density-card .trade-point {width:4.9%;min-width:10px;height:32px}
.density-card .trade-point img {width:clamp(11px,2.8cqw,20px);height:auto;aspect-ratio:1}
.density-card .trade-point[aria-pressed=true] {z-index:2}
.density-card .trade-point[aria-pressed=true] img {width:28px}
.density-footer {border-top:1px solid #333;padding-top:14px}
.trade-pnl {margin:6px 0 16px;font-size:18px}
.trade-amounts {display:flex;justify-content:space-between;gap:8px;margin:0;font-size:14px}.trade-amounts dt{color:#aaa}.trade-amounts dd{margin:4px 0 0}
.order-stage {grid-template-columns:1.15fr 1fr;gap:6%;align-items:center}
.order-stage figure {width:100%;margin:0;text-align:center}
.order-crop {overflow:hidden;border-radius:14px;background:#303030}
.order-crop img {width:100%;height:auto;aspect-ratio:361/135;display:block}
.order-screen {display:block;height:auto;width:66%;max-width:240px;margin:auto;border:1px solid #444;border-radius:18px}
@media(max-width:600px){.order-stage {grid-template-columns:1fr;padding:24px;gap:24px}.order-screen{width:60%}}
.history-comparison {grid-template-columns:repeat(2,minmax(0,39%));justify-content:center;gap:2%;padding:3%}
.history-comparison figure {width:100%;min-width:0;margin:0}
.history-comparison figcaption {margin:12px 0 0;color:#bababa}
.history-comparison .density-card {padding:clamp(10px,1.5cqw,20px);width:100%}
.history-comparison .trade-amounts {font-size:clamp(10px,1.2cqw,14px);gap:3px}
.history-comparison .trade-point img {width:clamp(8px,1.2cqw,16px)}
.history-comparison .trade-point[aria-pressed=true] img {width:clamp(14px,2cqw,24px)}
@media(max-width:720px){.history-comparison{grid-template-columns:1fr;gap:24px;padding:20px}.history-comparison .trade-amounts{font-size:14px}}
.history-comparison {padding-inline:8.54%;gap:3.3%;background:#242424}
.history-comparison figure {container-type:inline-size}
.history-comparison .density-card {position:relative;aspect-ratio:377/378.574;padding:6.366%;border:0;border-radius:6.36% / 6.34%;background:#1b1b1b;font-family:'ABC Diatype',Arial,sans-serif}
@font-face {font-family:'ABC Diatype';src:url('/assets/fonts/ABC-Diatype-Regular.woff2');font-display:swap;}
@font-face {font-family:'ABC Diatype';src:url('trade-prototype/fonts/abc-diatype-bold.woff2');font-weight:700;font-display:swap;}
.density-header {display:flex;align-items:center;gap:2cqw;color:white}
.density-header img {width:13cqw;height:13cqw;border-radius:50%;object-fit:cover}
.density-header strong {font-size:5.15cqw;line-height:1.15}
.density-header small {display:block;margin-top:.5cqw;color:#999;font-size:3.35cqw}
.density-header small::before {content:"";display:inline-block;width:1.7cqw;height:1.7cqw;border-radius:50%;margin-right:.7cqw;background:#61eb64}
.density-caption,.history-comparison .trade-plot,.density-footer,.density-pages {position:absolute;left:6.366%;right:6.366%}
.density-caption {top:25.3%;font-size:4.25cqw;line-height:1.2;color:white}
.history-comparison .trade-plot {top:41%;margin:0;right:21%}
.history-comparison .density-footer {top:70%;border:0;padding:0}
.history-comparison .trade-pnl {font-size:3.7cqw;font-weight:700;margin:0;line-height:1.2}
.history-comparison .trade-amounts {margin-top:7.2cqw;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;text-align:left;white-space:nowrap;font-weight:700;font-size:3.55cqw}
.history-comparison .trade-amounts div {display:flex;gap:.35em}
.history-comparison .trade-amounts dt,.history-comparison .trade-amounts dd {margin:0;color:white}
.density-pages {bottom:4.5%;height:4%;display:flex;gap:.8cqw;align-items:center}
.density-pages button {border:0;background:none;padding:0;flex:1;min-width:0;height:100%;cursor:pointer}
.density-pages button::after {content:'';display:block;height:.8cqw;border-radius:2px;background:#494949}
.density-pages button[aria-pressed=true]::after {background:white}
.history-comparison .trade-point img {box-sizing:border-box;width:4cqw;max-width:none;flex-shrink:0;border:1px solid #26cd2f;outline:2px solid #1b1b1b}
.history-comparison .trade-point {display:flex;align-items:center;justify-content:center}
.history-comparison .trade-point[data-side=sell] img {border-color:#d92221}
.history-comparison .trade-point[aria-pressed=true] img {width:9cqw;border-width:2px}
.point-cap {display:none;position:absolute;top:calc(50% + 4.5cqw + 2px);background:#26cd2f;color:#000;font:bold 3.25cqw/1.2 'ABC Diatype',sans-serif;border-radius:10px;padding:.12cqw 1cqw;outline:2px solid #1b1b1b}
.trade-point[data-side=sell] .point-cap {background:#d92221;color:white}
.trade-point[aria-pressed=true] .point-cap {display:block}
@media(max-width:720px){.history-comparison{padding:20px;gap:24px}}

.density-card[data-count="1"] .density-pages {display:none}
.buy-flow {display:grid;grid-template-columns:repeat(2,minmax(0,23%));column-gap:9%;justify-content:center;align-content:center;aspect-ratio:1470/797;border-radius:16px;background:#1b1b1b;padding-block:2%}
.buy-flow figure {margin:0;min-width:0}
.buy-flow figcaption {text-align:center}
.buy-device {position:relative;aspect-ratio:397.1/856.1}
.buy-device img {display:block;width:100%;height:100%}
.market-device {border-radius:10.6% / 4.92%;overflow:hidden;background:#000}
.buy-pulse {position:absolute;left:84.25%;top:23.48%;width:17%;aspect-ratio:1;translate:-50% -50%;border:1.5px solid #26cd2f;border-radius:50%;pointer-events:none}
.buy-pulse::after {content:'';position:absolute;inset:-1px;border:inherit;border-radius:inherit;animation:buy-ring 2.2s ease-out infinite}
.buy-connector {position:absolute;left:94%;width:43%;top:23.48%;border-top:2px dotted #8d988c}
.buy-connector::after {content:'';position:absolute;right:0;top:-4px;width:5px;height:5px;border:solid #a2aba1;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
@keyframes buy-ring {0%{transform:scale(.94);opacity:.95}80%,100%{transform:scale(1.65);opacity:0}}
@media(prefers-reduced-motion:reduce){.buy-pulse::after{animation:none;border:0}}
@media(max-width:650px){.buy-flow{grid-template-columns:repeat(2,minmax(0,38%));column-gap:12%;aspect-ratio:auto;padding-block:24px}.buy-connector{width:35%}.buy-flow figcaption{font-size:12px}}
.quick-buy-stage {display:grid;place-items:center;background:#1b1b1b;border-radius:16px;aspect-ratio:1734.862/986;overflow:hidden}
.quick-composition {position:relative;width:100%;aspect-ratio:1734.862/986}
.quick-phone {position:absolute;top:13.629%;left:11.682%;width:28.494%;aspect-ratio:393/852;border-radius:10.3% / 4.75%;overflow:hidden;outline:1px solid white;background:#000}
.quick-phone>img,.quick-sheet>img {width:100%;height:100%;display:block}
.quick-destination {left:59.902%;top:-29.681%}
.quick-path {position:absolute;left:38.437%;top:38.684%;width:19.922%;height:21.188%;object-fit:fill}
.quick-wash {position:absolute;inset:0;background:rgba(255,255,255,.115);opacity:0;transition:opacity .48s ease-out}
.quick-back {transition:filter .48s ease-out}
.quick-sheet {container-type:inline-size;position:absolute;inset:auto 0 0;height:36.663%;transform:translateY(101%);transition:transform .56s cubic-bezier(.2,.84,.25,1);border-radius:8% 8% 0 0 / 10% 10% 0 0;overflow:hidden}
.quick-tabs {position:absolute;left:5%;top:14.4%;width:52%;height:10.5%;display:flex;align-items:stretch;border-radius:1.5cqw;overflow:hidden;background:#252525;color:white;font:600 3.6cqw/1 Arial,sans-serif}
.quick-tabs>* {display:grid;place-items:center;flex:auto}
.quick-tabs b {background:#535353;border-radius:1.5cqw}
.quick-buy-stage.is-open .quick-back {filter:blur(1.6px)}
.quick-buy-stage.is-open .quick-wash {opacity:1}
.quick-buy-stage.is-open .quick-sheet {transform:translateY(0)}

@media(prefers-reduced-motion:reduce){.quick-back,.quick-wash,.quick-sheet{transition:none}}

.quick-buy-stage .quick-flow-art {display:block;width:100%;height:100%;border:0;pointer-events:none;aspect-ratio:1735/986}

@media (prefers-reduced-motion: no-preference) {
  .history-comparison.awaiting-reveal figure {opacity:0}
  .history-comparison figure {--card-delay:0s;--chart-delay:.8s}
  .history-comparison figure + figure {--card-delay:.33s;--chart-delay:1.7s}
  .history-comparison.revealing figure {
    animation:history-card-in .48s cubic-bezier(.2,.8,.25,1) var(--card-delay) backwards;
  }
  .history-comparison.revealing .trade-plot > img {
    animation:history-chart-in .85s cubic-bezier(.22,.68,.3,1) var(--chart-delay) backwards;
  }
  .history-comparison.revealing .trade-point {
    animation:history-marker-in .38s cubic-bezier(.2,.8,.3,1.12) calc(var(--chart-delay) + var(--marker-delay)) backwards;
  }
  @keyframes history-card-in {from {opacity:0;translate:0 10px} to {opacity:1;translate:0 0}}
  @keyframes history-chart-in {from {clip-path:inset(0 100% 0 0)} to {clip-path:inset(0)}}
  @keyframes history-marker-in {from {opacity:0;transform:translate(-50%,-50%) scale(.65)} to {opacity:1;transform:translate(-50%,-50%) scale(1)}}
}

.option-gallery button.exploration-art {width:100%;border:0;cursor:zoom-in}
#exploration-viewer {margin:auto;padding:12px;border:0;background:transparent;color:#eee;max-width:96vw;max-height:96dvh}
#exploration-viewer::backdrop {background:rgb(0 0 0 / 80%);-webkit-backdrop-filter:blur(36px);backdrop-filter:blur(36px)}
#exploration-viewer header {display:flex;align-items:center;justify-content:flex-end;padding-inline:6px;color:#aaa}
#exploration-viewer button {width:44px;height:44px;border:0;background:transparent;color:#eee;font:28px/1 sans-serif;cursor:pointer;border-radius:8px}
#exploration-viewer button {display:grid;place-items:center;padding:0;transition:opacity 120ms ease-out}
#exploration-viewer button:hover {opacity:.8}
#exploration-viewer button:focus-visible {outline:1px solid white;outline-offset:-3px}
#exploration-viewer .slide-row {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start}
#exploration-viewer .slide-row button {margin-top:calc(var(--slide-size) / 2 - 22px)}
#exploration-viewer {--slide-size:min(740px,68dvh,calc(96vw - 112px))}
#exploration-viewer figure {width:var(--slide-size);margin:0}
#exploration-viewer .slide-art {box-sizing:border-box;width:100%;aspect-ratio:1;padding:5%;background:#1b1b1b;border-radius:16px}
#exploration-viewer .slide-art img {width:100%;height:100%;object-fit:contain}
#exploration-viewer figcaption {margin:12px 0;color:#bbb;line-height:1.5;min-height:4.5em}
html:has(#exploration-viewer[open]) {overflow:hidden}

.art-panel {background:#1b1b1b;border-radius:16px;overflow:hidden;border:0}
.art-panel.concept-panel {background:#242424}
.art-panel > .trade-history-art, #decisions .art-panel > .desktop-art {display:block;background:transparent;border:0;border-radius:0;box-shadow:none}