/* DOE explainer: two panels on one shared clock.
   Without DOE: the AI takes every shot itself. With DOE: the AI builds a cannon in code, the cannon fires. */
.doe-vA{--va-neg:#A8A39B;--va-glow:rgba(217,119,87,.22);position:relative}
.doe-vA .va-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.doe-vA .va-panel{position:relative;min-width:0;margin:0;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper-2) 100%,transparent),color-mix(in srgb,var(--paper-2) 70%,var(--paper)));
  border:1px solid var(--rule);border-radius:22px;padding:22px 22px 22px;overflow:hidden}
.doe-vA .va-panel.is-tool{border-color:rgba(217,119,87,.30);
  box-shadow:0 40px 90px -60px rgba(217,119,87,.55),inset 0 1px 0 rgba(250,249,245,.04)}
.doe-vA .va-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.doe-vA .va-name{display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:2px}
.doe-vA .va-title em{font-style:normal;color:var(--accent)}
.doe-vA .va-sub{font-size:14px;line-height:1.2;color:var(--ink-3);margin-top:-2px}
.doe-vA .va-title{font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);
  font-size:calc(27px * var(--ds));line-height:1.1;color:var(--ink)}
.doe-vA .va-total{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.doe-vA .va-total small{font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.doe-vA .va-total output{display:block;font:500 30px/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:var(--ink);min-width:4.2ch;text-align:right;transform-origin:100% 50%;transition:color .3s var(--ease)}
.doe-vA .va-total output.is-neg{color:var(--ink-2)}
.doe-vA .va-total output.is-pos{color:var(--ink)}
.doe-vA .is-tool .va-total output.is-pos{color:var(--accent)}
.doe-vA .va-total output.bump{animation:vaBump .32s var(--ease)}
@keyframes vaBump{from{transform:scale(1.09)}to{transform:scale(1)}}
.doe-vA canvas{display:block;width:100%}
.doe-vA .va-cap{color:var(--ink-2);font-size:15px;line-height:1.5;max-width:44ch}
@media (max-width:820px){
  .doe-vA .va-grid{grid-template-columns:1fr;gap:14px}
  .doe-vA .va-panel{padding:18px 14px 18px;border-radius:18px;gap:12px}
  .doe-vA .va-head{padding:0 4px}
  .doe-vA .va-cap{padding:0 4px;font-size:14.5px}
  .doe-vA .va-total output{font-size:26px}
}
/* token counter: secondary to the money */
.doe-vA .va-tok{display:block;margin-top:3px;font:500 11.5px/1 var(--mono);letter-spacing:.02em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .25s var(--ease)}
.doe-vA .va-tok span{text-transform:uppercase;letter-spacing:.09em;font-size:10.5px}
.doe-vA .va-tok b{font-weight:500;color:var(--ink-2);display:inline-block;min-width:6ch;text-align:right;transition:color .25s var(--ease)}
.doe-vA .va-tok.is-live b{color:var(--ink)}
