:root {
  color-scheme: dark;
  --ink: #eee9dd;
  --muted: #a8a292;
  --panel: rgba(18, 24, 23, .86);
  --line: rgba(228, 218, 190, .14);
  --gold: #e6b85c;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #07100d;
  color: var(--ink);
  font: 14px/1.45 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 72% 18%, rgba(74, 111, 74, .17), transparent 35%),
    linear-gradient(#0b1713 0%, #07100d 62%, #10130d 100%);
}
.page { position: relative; min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr; }
header { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; padding: 24px 28px 14px; }
.eyebrow { color: var(--gold); font: 11px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 4px 0 3px; font: 500 clamp(24px, 3vw, 39px)/1.05 Georgia, serif; letter-spacing: -.025em; }
.dek { color: var(--muted); max-width: 680px; margin: 0; }
.back { color: #c9c2ae; text-decoration: none; white-space: nowrap; }
.back:hover { color: white; }
.controls { margin: 0 28px 12px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(12px); }
button, input, select { font: inherit; }
button {
  color: var(--ink); background: #18241e; border: 1px solid #34443a; border-radius: 7px; padding: 7px 11px; cursor: pointer;
}
button:hover, button.active { border-color: var(--gold); color: #fff4d3; }
button.primary { background: #765d2c; border-color: #a98a4b; }
.palette-toggle { display: inline-flex; align-items: center; gap: 0; padding: 2px; border: 1px solid #34443a; border-radius: 7px; background: #0d1713; }
.palette-toggle span { padding: 0 7px; color: #8f998f; font: 10px ui-monospace, Menlo, monospace; text-transform: uppercase; }
.palette-toggle button { padding: 4px 8px; border: 0; border-radius: 5px; background: transparent; color: #aaa596; font-size: 11px; }
.palette-toggle button:hover { color: #eee9dd; }
.palette-toggle button.active { background: #765d2c; color: #fff2d0; }
.return-legend { width: 138px; --loss: #533726; --zero: #a27748; --gain: #e1b86f; }
.return-legend[data-palette="market"] { --loss: #ca5c66; --zero: #ad9e7c; --gain: #58a991; }
.legend-scale { display: grid; grid-template-columns: repeat(3, 1fr); height: 7px; overflow: hidden; border-radius: 5px; box-shadow: 0 0 0 1px rgba(235, 225, 204, .12); }
.legend-scale i:nth-child(1) { background: linear-gradient(90deg, color-mix(in srgb, var(--loss), #0c110f 30%), var(--loss)); }
.legend-scale i:nth-child(2) { background: linear-gradient(90deg, var(--loss), var(--zero), var(--gain)); }
.legend-scale i:nth-child(3) { background: linear-gradient(90deg, var(--gain), color-mix(in srgb, var(--gain), #d8dce0 16%)); }
.legend-labels { display: flex; justify-content: space-between; margin-top: 3px; color: #8f998f; font: 9px ui-monospace, Menlo, monospace; text-transform: uppercase; }
input[type="range"] { flex: 1; min-width: 180px; accent-color: var(--gold); }
input[type="text"] { color: var(--ink); background: #0d1713; border: 1px solid #34443a; border-radius: 7px; padding: 8px 10px; min-width: 290px; }
.year { min-width: 52px; color: #fff1c8; font: 700 16px ui-monospace, Menlo, monospace; }
.stage { position: relative; min-height: 560px; margin: 0 16px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(4, 10, 8, .42); }
canvas { display: block; width: 100%; height: 100%; }
.key { display: flex; gap: 15px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.tooltip { position: absolute; pointer-events: none; opacity: 0; z-index: 4; max-width: 240px; padding: 9px 11px; border-radius: 7px; background: rgba(5, 9, 8, .94); border: 1px solid #4b574e; color: #ded8ca; font-size: 12px; transition: opacity .1s; }
.tooltip b { color: white; }
.note { color: var(--muted); font-size: 12px; }
.panel { position: absolute; right: 14px; top: 14px; width: min(300px, calc(100% - 28px)); padding: 13px 15px; border-radius: 9px; background: rgba(7, 13, 11, .88); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.panel h2 { margin: 0 0 7px; font: 500 20px Georgia, serif; }
.panel p { margin: 5px 0; color: var(--muted); }
.panel strong { color: var(--ink); }
@media (max-width: 720px) {
  header { align-items: flex-start; padding: 18px 16px 12px; }
  .controls { margin: 0 16px 10px; }
  .stage { min-height: 620px; margin: 0 8px 8px; }
  .back { font-size: 12px; }
  input[type="text"] { min-width: 100%; flex: 1; }
}