:root {
  color-scheme: light dark;
  --background: light-dark(rgb(255 255 255), rgb(24 24 24));
  --foreground: light-dark(rgb(26 28 31), rgb(255 255 255));
  --card: light-dark(rgb(245 247 249), rgb(34 34 34));
  --card-foreground: var(--foreground);
  --muted-foreground: light-dark(rgb(75 80 88), rgb(190 190 190));
  --border: light-dark(rgb(26 28 31 / 14%), rgb(255 255 255 / 13%));
  --input: light-dark(rgb(26 28 31 / 9%), rgb(255 255 255 / 10%));
  --accent: light-dark(rgb(229 242 255), rgb(13 39 63));
  --primary: light-dark(rgb(51 156 255), rgb(131 195 255));
  --viz-series-1: var(--primary);
  --viz-series-2: light-dark(rgb(243 136 59), rgb(245 154 86));
  --viz-series-3: light-dark(rgb(93 201 119), rgb(116 213 139));
  --viz-series-4: light-dark(rgb(235 119 177), rgb(240 143 192));
  --viz-series-5: light-dark(rgb(155 121 236), rgb(170 145 239));
  --radius: 12px;
  --font-size-base: 14px;
  background: var(--background);
  color: var(--foreground);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--background); color: var(--foreground); }
body { padding: 20px; }
#crown-cell-phase0 { width: min(1100px, 100%); margin: 0 auto; color: var(--foreground); }
.viz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.viz-badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: var(--accent); color: var(--foreground); font-size: 12px; }
.viz-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.form-label { display: inline-flex; gap: 7px; align-items: center; }
.form-check { display: inline-flex; gap: 6px; align-items: center; }
.form-select, .btn { color: var(--foreground); background: var(--input); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font: inherit; }
.btn { cursor: pointer; }
.card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
#cc-canvas { width: 100%; height: 650px; min-height: 390px; }
#cc-selection { position: absolute; left: 12px; bottom: 10px; padding: 6px 9px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--card-foreground); border-radius: var(--radius); pointer-events: none; }
.text-small { font-size: 12px; }
.text-muted { color: var(--muted-foreground); }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
@media (max-width: 560px) { body { padding: 10px; } #cc-canvas { height: 460px; } }

#crown-cell-phase0 .cc-label {
    position:absolute;
    transform:translate(-50%,-50%);
    padding:2px 5px;
    border-radius:var(--radius);
    background:color-mix(in srgb, var(--card) 82%, transparent);
    color:var(--card-foreground);
    pointer-events:none;
    white-space:nowrap;
  }
  @media (max-width: 560px) {
    #crown-cell-phase0 #cc-canvas { height:440px !important; }
  }