:root {
      --fd-midnight: #09092D;
      --fd-midnight-1: #161246;
      --fd-indigo: #444BF9;
      --fd-indigo-dark: #3C3CC6;
      --fd-indigo-light: #5D5DF9;
      --fd-white: #FFFFFF;
      --fd-stone: #F3F3F7;
      --fd-stone-light: #F8F8FA;
      --fd-stone-mid: #E7E7EC;
      --fd-stone-dark: #DBDBDE;
      --fd-green: #8CF0BC;
      --fd-error: #EA5D5A;
      --text-secondary: #3E3E62;
      --text-muted: #57577A;
      --shadow: 0 16px 38px rgba(9, 9, 45, 0.09);
      --radius: 12px;
      --radius-small: 8px;
      --font-display: "Segoe UI", "Calibri", Arial, sans-serif;
      --font-body: "Calibri", Arial, sans-serif;
      --max-width: 1600px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-width: 320px;
      background: var(--fd-white);
      color: var(--fd-midnight);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.5;
    }

    button,
    input,
    select {
      font: inherit;
    }

    button {
      touch-action: manipulation;
    }

    img {
      max-width: 100%;
    }

    [hidden],
    .is-hidden {
      display: none !important;
    }

    :focus-visible {
      outline: 3px solid var(--fd-indigo);
      outline-offset: 3px;
    }

    .skip-link {
      position: fixed;
      top: -70px;
      left: 16px;
      z-index: 100;
      padding: 10px 14px;
      background: var(--fd-midnight);
      color: var(--fd-white);
      border-radius: 0 0 8px 8px;
    }

    .skip-link:focus {
      top: 0;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, 0.97);
      border-bottom: 1px solid var(--fd-stone-mid);
    }

    .header-inner,
    main,
    .footer-inner {
      width: min(calc(100% - 32px), var(--max-width));
      margin-inline: auto;
    }

    .header-inner {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .brand img {
      display: block;
      width: 145px;
      min-height: 20px;
    }

    .product-name {
      padding-left: 18px;
      border-left: 1px solid var(--fd-stone-dark);
      font-family: var(--font-display);
      font-weight: 700;
    }

    .local-badge {
      padding: 7px 11px;
      background: var(--fd-stone);
      border: 1px solid var(--fd-stone-mid);
      border-radius: 999px;
      color: var(--text-secondary);
      font-size: 0.83rem;
      font-weight: 700;
    }

    main {
      padding: 28px 0 60px;
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
      gap: 38px;
      align-items: end;
      padding: 30px 0 40px;
    }

    .eyebrow {
      margin: 0 0 11px;
      color: var(--fd-indigo-dark);
      font-family: var(--font-display);
      font-size: 0.79rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3,
    h4 {
      margin-top: 0;
      color: var(--fd-midnight);
      font-family: var(--font-display);
    }

    h1 {
      max-width: 1000px;
      margin-bottom: 17px;
      font-size: clamp(2.7rem, 5.2vw, 5.6rem);
      font-weight: 300;
      line-height: 0.94;
      letter-spacing: -0.045em;
    }

    h2 {
      margin-bottom: 9px;
      font-size: clamp(1.5rem, 2.2vw, 2.1rem);
      font-weight: 400;
      line-height: 1.08;
    }

    h3 {
      margin-bottom: 8px;
      font-size: 1.08rem;
      line-height: 1.2;
    }

    h4 {
      margin-bottom: 6px;
      font-size: 0.95rem;
    }

    p {
      margin-top: 0;
    }

    .hero-copy {
      max-width: 920px;
      margin-bottom: 0;
      color: var(--text-secondary);
      font-size: 1.08rem;
    }

    .hero-callout {
      padding: 24px;
      background: var(--fd-midnight);
      color: var(--fd-white);
      border-radius: var(--radius);
    }

    .hero-callout strong {
      display: block;
      margin-bottom: 7px;
      font-family: var(--font-display);
      font-size: 1.08rem;
    }

    .hero-callout p {
      margin: 0;
      color: #DDE0FF;
    }

    .planner-layout {
      display: grid;
      grid-template-columns: minmax(390px, 470px) minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .controls {
      position: sticky;
      top: 92px;
      max-height: calc(100vh - 112px);
      overflow-y: auto;
      padding: 22px;
      background: var(--fd-stone);
      border: 1px solid var(--fd-stone-mid);
      border-radius: var(--radius);
    }

    .controls-intro,
    .hint {
      color: var(--text-muted);
    }

    .controls-intro {
      font-size: 0.91rem;
    }

    .control-section {
      padding: 20px 0;
      border-top: 1px solid var(--fd-stone-dark);
    }

    .control-section:first-of-type {
      padding-top: 5px;
      border-top: 0;
    }

    .step {
      display: inline-flex;
      width: 28px;
      height: 28px;
      margin-right: 8px;
      align-items: center;
      justify-content: center;
      background: var(--fd-indigo);
      color: var(--fd-white);
      border-radius: 50%;
      font-size: 0.82rem;
      vertical-align: middle;
    }

    .field {
      margin-top: 13px;
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 11px;
    }

    label {
      display: block;
      margin-bottom: 6px;
      color: var(--fd-midnight);
      font-family: var(--font-display);
      font-size: 0.87rem;
      font-weight: 700;
    }

    input[type="number"],
    input[type="file"],
    select {
      width: 100%;
      min-height: 43px;
      padding: 8px 10px;
      background: var(--fd-white);
      color: var(--fd-midnight);
      border: 1px solid var(--fd-stone-dark);
      border-radius: var(--radius-small);
    }

    input[type="file"] {
      font-size: 0.83rem;
    }

    input[type="file"]::file-selector-button {
      margin-right: 8px;
      padding: 7px 10px;
      background: var(--fd-stone);
      color: var(--fd-midnight);
      border: 1px solid var(--fd-stone-dark);
      border-radius: 6px;
      cursor: pointer;
      font-weight: 700;
    }

    .hint {
      display: block;
      margin-top: 5px;
      font-size: 0.79rem;
      line-height: 1.4;
    }

    .status-box {
      margin-top: 13px;
      padding: 11px 12px;
      background: var(--fd-white);
      color: var(--text-secondary);
      border-left: 4px solid var(--fd-indigo);
      border-radius: 6px;
      font-size: 0.84rem;
    }

    .status-box.error {
      border-left-color: var(--fd-error);
      color: #8A2725;
    }

    .selection-cards {
      display: grid;
      gap: 9px;
      margin-top: 13px;
    }

    .selection-card {
      position: relative;
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 10px;
      padding: 13px;
      background: var(--fd-white);
      border: 1px solid var(--fd-stone-dark);
      border-radius: var(--radius-small);
      cursor: pointer;
    }

    .selection-card.selected {
      padding: 12px;
      border: 2px solid var(--fd-indigo);
      box-shadow: 0 0 0 3px rgba(68, 75, 249, 0.08);
    }

    .selection-card input {
      width: 18px;
      height: 18px;
      margin: 3px 0 0;
      accent-color: var(--fd-indigo);
    }

    .selection-card label {
      margin: 0;
      cursor: pointer;
    }

    .selection-card strong {
      display: block;
      margin-bottom: 3px;
    }

    .selection-card span {
      display: block;
      color: var(--text-muted);
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 400;
      line-height: 1.4;
    }

    .mix-panel {
      margin-top: 14px;
      padding: 14px;
      background: var(--fd-white);
      border: 2px solid var(--fd-indigo);
      border-radius: var(--radius-small);
    }

    .mix-panel-header {
      margin-bottom: 12px;
    }

    .mix-panel-header h4 {
      margin-bottom: 4px;
    }

    .mix-panel-header p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.83rem;
    }

    .model-column-labels,
    .model-row-grid {
      display: grid;
      grid-template-columns: minmax(120px, 1fr) 74px 76px 40px;
      gap: 7px;
      align-items: center;
    }

    .model-column-labels {
      padding: 0 8px 6px;
      color: var(--text-muted);
      font-size: 0.71rem;
      font-weight: 700;
    }

    .model-list {
      display: grid;
      gap: 8px;
    }

    .model-row {
      padding: 8px;
      background: var(--fd-stone-light);
      border: 1px solid var(--fd-stone-mid);
      border-radius: 8px;
    }

    .model-row select,
    .model-row input {
      min-height: 39px;
      padding: 5px 7px;
      font-size: 0.82rem;
    }

    .remove-model {
      width: 39px;
      height: 39px;
      padding: 0;
      background: var(--fd-white);
      color: var(--fd-error);
      border: 1px solid var(--fd-stone-dark);
      border-radius: 7px;
      cursor: pointer;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .inventory-summary {
      margin-top: 11px;
      padding: 10px 11px;
      background: var(--fd-stone);
      border-radius: 7px;
      color: var(--text-secondary);
      font-size: 0.82rem;
    }

    .checkbox {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin-top: 11px;
    }

    .checkbox input {
      width: 18px;
      height: 18px;
      margin-top: 3px;
      accent-color: var(--fd-indigo);
    }

    .checkbox label {
      margin: 0;
      font-family: var(--font-body);
      font-weight: 400;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    a.button,
    button.button,
    .navigation a.button {
      min-height: 42px;
      padding: 9px 14px;
      background-color: var(--fd-indigo);
      color: var(--fd-white);
      border: 1px solid var(--fd-indigo);
      border-radius: var(--radius-small);
      font-family: var(--font-display);
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
    }

    a.button:hover,
    a.button:focus-visible,
    a.button:active,
    a.button:visited,
    .navigation a.button:hover,
    .navigation a.button:focus-visible,
    .navigation a.button:active,
    .navigation a.button:visited,
    button.button:hover,
    button.button:focus-visible,
    button.button:active {
      color: var(--fd-white);
    }

    button.button:hover {
      background: var(--fd-indigo-dark);
      border-color: var(--fd-indigo-dark);
    }

    button.button.secondary {
      background: var(--fd-white);
      color: var(--fd-indigo-dark);
      border-color: var(--fd-indigo);
    }

    button.button.secondary:hover {
      background: var(--fd-stone-light);
      color: var(--fd-midnight);
    }

    button.button.tertiary {
      background: transparent;
      color: var(--fd-midnight);
      border-color: var(--fd-stone-dark);
    }

    button.button.tertiary:hover {
      background: var(--fd-white);
      color: var(--fd-midnight);
      border-color: var(--fd-midnight);
    }

    button:disabled,
    input:disabled,
    select:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }

    .full-button {
      width: 100%;
      min-height: 50px;
      margin-top: 14px;
    }

    .workspace {
      min-width: 0;
    }

    .workspace-header {
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .workspace-header h2 {
      margin-bottom: 4px;
    }

    .workspace-status {
      color: var(--text-muted);
      font-size: 0.9rem;
    }

    .map-shell {
      position: relative;
      min-height: 600px;
      overflow: hidden;
      background-color: var(--fd-stone);
      background-image:
        linear-gradient(var(--fd-stone-mid) 1px, transparent 1px),
        linear-gradient(90deg, var(--fd-stone-mid) 1px, transparent 1px);
      background-size: 28px 28px;
      border: 1px solid var(--fd-stone-dark);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .canvas-scroll {
      position: relative;
      min-height: 600px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
      padding: 12px;
    }

    .canvas-stage {
      position: relative;
      flex: 0 0 auto;
      max-width: 100%;
      overflow: hidden;
      background: var(--fd-white);
      box-shadow: 0 5px 18px rgba(9, 9, 45, 0.12);
    }

    .canvas-stage canvas {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
    }

    #baseCanvas {
      position: relative;
      z-index: 1;
      background: var(--fd-white);
    }

    #heatCanvas {
      z-index: 2;
      pointer-events: none;
    }

    #overlayCanvas {
      z-index: 3;
      touch-action: none;
    }

    .empty-state {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: grid;
      place-items: center;
      padding: 32px;
      text-align: center;
      pointer-events: none;
    }

    .empty-card {
      max-width: 460px;
      padding: 28px;
      background: rgba(255, 255, 255, 0.97);
      border: 1px solid var(--fd-stone-dark);
      border-radius: var(--radius);
    }

    .empty-card strong {
      display: block;
      margin-bottom: 7px;
      font-family: var(--font-display);
      font-size: 1.2rem;
    }

    .empty-card p {
      margin: 0;
      color: var(--text-muted);
    }

    .readout {
      position: absolute;
      right: 12px;
      bottom: 12px;
      z-index: 9;
      display: none;
      padding: 9px 11px;
      background: rgba(9, 9, 45, 0.95);
      color: var(--fd-white);
      border-radius: 7px;
      font-size: 0.81rem;
      pointer-events: none;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 15px;
      margin-top: 13px;
      padding: 13px 15px;
      background: var(--fd-white);
      border: 1px solid var(--fd-stone-mid);
      border-radius: var(--radius-small);
    }

    .legend-title {
      width: 100%;
      font-weight: 700;
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--text-secondary);
      font-size: 0.83rem;
    }

    .swatch {
      width: 17px;
      height: 17px;
      border: 1px solid rgba(9, 9, 45, 0.2);
      border-radius: 4px;
    }

    .excellent {
      background: rgba(140, 240, 188, 0.9);
    }

    .good {
      background: rgba(68, 75, 249, 0.82);
    }

    .fair {
      background: rgba(93, 93, 249, 0.5);
    }

    .weak {
      background: rgba(219, 219, 222, 0.9);
    }

    .results {
      margin-top: 22px;
      padding: 24px;
      background: var(--fd-stone);
      border-radius: var(--radius);
    }

    .results-heading p {
      margin-bottom: 17px;
      color: var(--text-muted);
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    .metric {
      min-height: 110px;
      padding: 15px;
      background: var(--fd-white);
      border: 1px solid var(--fd-stone-mid);
      border-radius: var(--radius-small);
    }

    .metric-value {
      display: block;
      margin-bottom: 5px;
      color: var(--fd-indigo-dark);
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.3vw, 2rem);
      line-height: 1;
      overflow-wrap: anywhere;
    }

    .metric-label {
      font-weight: 700;
    }

    .metric-detail {
      display: block;
      margin-top: 5px;
      color: var(--text-muted);
      font-size: 0.77rem;
    }

    .result-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.55fr);
      gap: 16px;
      margin-top: 16px;
    }

    .card {
      overflow: hidden;
      background: var(--fd-white);
      border: 1px solid var(--fd-stone-mid);
      border-radius: var(--radius-small);
    }

    .card-header {
      padding: 15px 17px;
      border-bottom: 1px solid var(--fd-stone-mid);
    }

    .card-header h3,
    .card-header p {
      margin: 0;
    }

    .card-header p {
      margin-top: 4px;
      color: var(--text-muted);
      font-size: 0.83rem;
    }

    .table-scroll {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
    }

    th,
    td {
      padding: 10px 12px;
      text-align: left;
      white-space: nowrap;
      border-bottom: 1px solid var(--fd-stone-mid);
    }

    th {
      background: var(--fd-stone-light);
      font-family: var(--font-display);
    }

    tbody tr:last-child td {
      border-bottom: 0;
    }

    .notes {
      padding: 16px 18px;
    }

    .notes ul {
      margin: 0;
      padding-left: 20px;
      color: var(--text-secondary);
    }

    .notes li + li {
      margin-top: 8px;
    }

    .method {
      margin-top: 40px;
      padding: 32px;
      background: var(--fd-midnight);
      color: var(--fd-white);
      border-radius: var(--radius);
    }

    .method h2,
    .method h3 {
      color: var(--fd-white);
    }

    .method .eyebrow {
      color: var(--fd-green);
    }

    .method > p:not(.eyebrow) {
      max-width: 950px;
      color: #DDE0FF;
    }

    .method-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 23px;
      margin-top: 24px;
    }

    .method-item {
      padding-top: 14px;
      border-top: 2px solid var(--fd-indigo-light);
    }

    .method-item p {
      color: #DDE0FF;
    }

    .disclaimer {
      margin-top: 24px;
      padding: 14px 16px;
      background: var(--fd-midnight-1);
      color: #DDE0FF;
      border-left: 4px solid var(--fd-green);
    }

    .site-footer {
      background: var(--fd-stone);
      border-top: 1px solid var(--fd-stone-mid);
    }

    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 14px;
      padding: 24px 0;
      color: var(--text-muted);
      font-size: 0.89rem;
    }

    .footer-inner p {
      margin: 0;
    }

    .powered {
      color: var(--fd-midnight);
      font-family: var(--font-display);
      font-weight: 700;
    }

    @media (max-width: 1180px) {
      .planner-layout {
        grid-template-columns: 390px minmax(0, 1fr);
      }

      .metrics {
        grid-template-columns: repeat(3, 1fr);
      }

      .result-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 960px) {
      .hero,
      .planner-layout {
        grid-template-columns: 1fr;
      }

      .controls {
        position: static;
        max-height: none;
      }

      .map-shell,
      .canvas-scroll {
        min-height: 470px;
      }

      .method-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 650px) {
      .header-inner,
      main,
      .footer-inner {
        width: min(calc(100% - 20px), var(--max-width));
      }

      .product-name,
      .local-badge {
        display: none;
      }

      .brand img {
        width: 124px;
      }

      main {
        padding-top: 16px;
      }

      .hero {
        padding-top: 18px;
      }

      h1 {
        font-size: clamp(2.3rem, 13vw, 3.7rem);
      }

      .controls,
      .results,
      .method {
        padding: 18px;
      }

      .field-row,
      .metrics {
        grid-template-columns: 1fr;
      }

      .model-column-labels {
        display: none;
      }

      .model-row-grid {
        grid-template-columns: minmax(105px, 1fr) 62px 66px 39px;
      }

      .map-shell,
      .canvas-scroll {
        min-height: 380px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }
  
.wordmark{font-family:var(--font-display);font-size:1.45rem;letter-spacing:-.03em;color:var(--fd-midnight)}.wordmark span{color:var(--fd-indigo)}
.map-shell{min-height:0}
.canvas-scroll{height:clamp(520px,82vh,980px);min-height:0;align-items:flex-start;justify-content:flex-start;overscroll-behavior:contain}
.canvas-stage{margin:auto;max-width:none}
.map-shell:fullscreen{border-radius:0}.map-shell:fullscreen .canvas-scroll{height:100vh}
.zoom-bar{position:absolute;top:12px;left:12px;z-index:12;display:flex;align-items:center;gap:6px;padding:6px 8px;background:rgba(255,255,255,.96);border:1px solid var(--fd-stone-dark);border-radius:10px;box-shadow:var(--shadow)}
.zoom-bar button{min-width:36px;height:34px;padding:0 8px;background:var(--fd-white);color:var(--fd-midnight);border:1px solid var(--fd-stone-dark);border-radius:7px;font-weight:700;cursor:pointer}
.zoom-bar button:hover{border-color:var(--fd-indigo)}.zoom-bar #zoomLabel{min-width:46px;text-align:center;font-weight:700;font-size:.85rem}
.zoom-tip{font-size:.72rem;color:var(--text-muted);padding-left:6px}
@media(max-width:800px){.zoom-tip{display:none}}
.model-column-labels{display:none}
.model-pick{display:grid;grid-template-columns:1fr 1.25fr;gap:7px}
.model-nums{display:grid;grid-template-columns:1fr 1fr 39px;gap:7px;align-items:end;margin-top:7px}
.model-nums label{margin:0;font-size:.72rem;color:var(--text-muted)}
.ad-slot{margin:20px auto;max-width:970px;min-height:90px;text-align:center;overflow:hidden}
.ad-slot::before{content:"Advertisement";display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.ad-slot.ph{display:grid;place-items:center;min-height:110px;border:1px dashed var(--fd-stone-dark);background:var(--fd-stone-light);color:var(--text-muted);font-size:.82rem;padding:10px;border-radius:8px}
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:22px}
.promo{padding:20px;background:var(--fd-stone);border:1px solid var(--fd-stone-mid);border-radius:var(--radius)}
.promo p{color:var(--text-secondary);font-size:.9rem}
.faq{margin-top:30px}.faq details{padding:12px 0;border-bottom:1px solid var(--fd-stone-mid)}.faq summary{cursor:pointer;font-weight:700;font-family:var(--font-display)}
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:760px;margin:auto;padding:14px 16px;background:var(--fd-midnight);color:#fff;border-radius:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-size:.86rem}
.consent[hidden]{display:none}.consent button{padding:8px 14px;border-radius:8px;border:1px solid #fff;background:transparent;color:#fff;font-weight:700;cursor:pointer}.consent button.yes{background:var(--fd-indigo);border-color:var(--fd-indigo)}
.footer-inner a{color:var(--text-secondary)}
@media(max-width:960px){.promo-grid{grid-template-columns:1fr}}
.donate-btn{padding:8px 14px;background:var(--fd-white);color:var(--fd-indigo-dark);border:1px solid var(--fd-indigo);border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:.86rem;text-decoration:none;white-space:nowrap}
.donate-btn:hover{background:var(--fd-stone-light)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{padding:6px 12px;border:1px solid var(--fd-indigo);border-radius:999px;color:var(--fd-indigo-dark);font-weight:700;font-size:.85rem;text-decoration:none}
.is-placeholder{opacity:.6;cursor:not-allowed}


:root{--fd-midnight:#0B1020;--fd-midnight-1:#141B34;--fd-indigo:#4F46E5;--fd-indigo-dark:#4338CA;--fd-indigo-light:#818CF8;--fd-stone:#F4F6FB;--fd-stone-light:#F9FAFD;--fd-stone-mid:#E5E9F2;--fd-stone-dark:#D3D9E6;--fd-green:#34D399;--text-secondary:#39425B;--text-muted:#5B657F;--radius:16px;--radius-small:10px;--shadow:0 12px 32px rgba(11,16,32,.08);--font-display:"Inter","Segoe UI",system-ui,Arial,sans-serif;--font-body:"Inter","Segoe UI",system-ui,Arial,sans-serif}
body{background:#F7F8FC}
.site-header{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
h1{font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(120deg,#0B1020 30%,#4F46E5);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-weight:700;letter-spacing:-.02em}
.hero-callout{background:linear-gradient(135deg,#0B1020,#312E81);box-shadow:var(--shadow)}
.controls{background:#fff;box-shadow:var(--shadow);scrollbar-width:thin}
.step{background:linear-gradient(135deg,#4F46E5,#7C3AED)}
a.button,button.button{background:linear-gradient(135deg,#4F46E5,#6D28D9);border:0;border-radius:10px;box-shadow:0 6px 16px rgba(79,70,229,.28);transition:transform .15s,box-shadow .15s}
button.button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(79,70,229,.36);background:linear-gradient(135deg,#4338CA,#5B21B6)}
button.button.secondary{background:#fff;color:var(--fd-indigo-dark);border:1px solid #C7D2FE;box-shadow:none}
button.button.tertiary{box-shadow:none;background:transparent;border:1px solid var(--fd-stone-dark)}
.selection-card,.mix-panel,.model-row,.metric,.card,.legend{border-radius:12px}
.selection-card.selected{background:#EEF2FF}
.metric{box-shadow:0 2px 8px rgba(11,16,32,.04)}
.metric-value{background:linear-gradient(120deg,#4F46E5,#7C3AED);-webkit-background-clip:text;background-clip:text;color:transparent}
.results{background:#fff;box-shadow:var(--shadow)}
.map-shell{border-radius:16px}
.donate-btn{border-radius:999px}
.ad-rail{display:none}
@media(min-width:1500px){.planner-layout{grid-template-columns:minmax(380px,430px) minmax(0,1fr) 300px}.ad-rail{display:block;position:sticky;top:92px;align-self:start}.ad-rail .ad-slot{min-height:600px;margin:0}}


#heatCanvas{mix-blend-mode:multiply;opacity:.85}
.legend{align-items:center}
.cbar{position:relative;flex:1 1 320px;min-width:240px;padding-bottom:20px}
.cbar-fill{height:14px;border-radius:7px;border:1px solid rgba(11,16,32,.18)}
.cbar span{position:absolute;top:19px;transform:translateX(-50%);font-size:.7rem;font-weight:700;color:var(--text-muted)}
.legend-outline{display:inline-block;width:22px;border-top:3px solid #0B1020;border-radius:2px}


.wall-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.wall-chip{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#fff;border:1px solid var(--fd-stone-dark);border-radius:8px;font-size:.76rem;font-weight:700;color:var(--fd-midnight);cursor:pointer;text-align:left}
.wall-chip.on{border-color:var(--fd-indigo);background:#EEF2FF;box-shadow:0 0 0 2px rgba(79,70,229,.15)}
.wall-chip canvas{flex:none}

.brand .brand-logo{display:block;line-height:0}
.brand .brand-logo img{height:52px;width:auto;min-height:0;display:block}
@media(max-width:650px){.brand .brand-logo img{height:40px}}
.resize-grip{height:16px;cursor:ns-resize;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);border-top:1px solid var(--fd-stone-dark);touch-action:none}
.resize-grip::before{content:"";width:56px;height:4px;border-radius:2px;background:var(--fd-stone-dark)}
.resize-grip:hover::before{background:var(--fd-indigo)}
.map-shell:fullscreen .resize-grip{display:none}
.zoom-bar #wideToggle{padding:0 10px}.zoom-bar #wideToggle.on{border-color:var(--fd-indigo);background:#EEF2FF}
main.wide{width:calc(100% - 32px);max-width:none}
main.wide .planner-layout{grid-template-columns:minmax(0,1fr)}
main.wide .workspace{order:1}main.wide .controls{order:2;position:static;max-height:none}main.wide .ad-rail{display:none}
main.wide .canvas-scroll{height:clamp(560px,86vh,1600px)}
@media(max-width:960px){#wideToggle,.resize-grip{display:none}}