#chart { width: 100%; height: auto; max-height: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
#chart .axis { stroke: var(--line); stroke-width: 1; }
#chart .label { fill: var(--muted); font-size: 11px; font-family: inherit; }
#chart .spot { fill: none; stroke: var(--text); stroke-width: 1.6; }
#chart .flip { stroke: var(--accent); stroke-dasharray: 5 3; }
#chart .call { stroke: var(--neg); }
#chart .put { stroke: var(--pos, #2a9d5b); }
#chart .gex { stroke: var(--warn); stroke-dasharray: 2 3; }
#chart .level { stroke-width: 1.2; fill: none; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 8px 0; font-size: 12px; }
.legend li::before { content: ""; display: inline-block; width: 14px; height: 0; border-top: 2px solid currentColor; margin-right: 6px; vertical-align: middle; }
.legend .l-flip { color: var(--accent); }
.legend .l-call { color: var(--neg); }
.legend .l-put { color: var(--pos, #2a9d5b); }
.legend .l-gex { color: var(--warn); }
#chart .marker { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
#chart .marker-dot { fill: var(--text); }
.legend .l-spot { color: var(--text); }
.legend .l-fast { color: var(--accent); }
.legend .l-slow { color: var(--warn); }
#techChart, #rsiChart { width: 100%; height: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; display: block; margin-top: 8px; }
#techChart .axis, #rsiChart .axis { stroke: var(--line); stroke-width: 1; }
#techChart .label, #rsiChart .label { fill: var(--muted); font-size: 11px; font-family: inherit; }
#techChart .up { stroke: var(--pos, #2a9d5b); fill: var(--pos, #2a9d5b); }
#techChart .down { stroke: var(--neg); fill: var(--neg); }
#techChart .wick { stroke-width: 1; }
/* The minute chart with the extended hours (docs/backfill.md): a faint band behind each session outside the regular one, its name in the corner, and fainter candles there */
#techChart .band { stroke: none; pointer-events: none; }
#techChart .band-pre { fill: color-mix(in srgb, var(--warn) 11%, transparent); }
#techChart .band-post { fill: color-mix(in srgb, var(--accent) 11%, transparent); }
#techChart .band-overnight { fill: color-mix(in srgb, var(--muted) 18%, transparent); }
#techChart .band-label { fill: var(--muted); stroke: none; font-size: 10px; pointer-events: none; }
#techChart .ext { opacity: 0.6; }
#techChart .level, #rsiChart .level { fill: none; stroke-width: 1.4; }
#techChart .ema-fast { stroke: var(--accent); }
#techChart .ema-slow { stroke: var(--warn); }
#techChart .flip { stroke: var(--accent); stroke-dasharray: 5 3; }
#techChart .call { stroke: var(--neg); }
#techChart .put { stroke: var(--pos, #2a9d5b); }
#techChart .gex { stroke: var(--warn); stroke-dasharray: 2 3; }
#rsiChart .rsi { stroke: var(--text); }
#rsiChart .guide { stroke: var(--line); stroke-dasharray: 3 3; }
button[aria-pressed="true"] { border-color: var(--accent); }
pre.spec { overflow: auto; max-height: 420px; padding: 12px; margin: 8px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }