:root {
      --base-width: 1672;
      --base-height: 941;
      --teal: #00b8a5;
      --navy: #061f43;
      --ink: #071a3d;
      --soft-border: rgba(11, 34, 70, 0.16);
      --focus: rgba(0, 184, 165, 0.35);
    }

    * { box-sizing: border-box; }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background: #f7fafc;
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body {
      overflow-x: hidden;
    }

    .site-frame {
      width: min(100vw, 1672px);
      margin: 0 auto;
      position: relative;
      aspect-ratio: 1672 / 941;
      background: #fff;
      box-shadow: 0 18px 50px rgba(7, 26, 61, 0.12);
    }

    .page-art {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }

    .interactive-layer {
      position: absolute;
      inset: 0;
      z-index: 2;
    }

    .hotspot,
    .form-button {
      position: absolute;
      display: block;
      border: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      color: transparent;
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      border-radius: 8px;
      text-decoration: none;
    }

    .hotspot:focus-visible,
    .form-button:focus-visible,
    .form-control:focus-visible {
      outline: 3px solid var(--focus);
      outline-offset: 2px;
    }

    body.show-hotspots .hotspot,
    body.show-hotspots .form-button {
      background: rgba(0, 184, 165, 0.18);
      outline: 1px solid rgba(0, 184, 165, 0.72);
    }

    body.show-hotspots .hotspot::after,
    body.show-hotspots .form-button::after {
      content: attr(aria-label);
      position: absolute;
      left: 0;
      top: 100%;
      width: max-content;
      max-width: 220px;
      padding: 4px 7px;
      margin-top: 4px;
      background: rgba(4, 24, 53, 0.92);
      color: #fff;
      border-radius: 6px;
      font-size: clamp(9px, 0.75vw, 12px);
      line-height: 1.2;
      pointer-events: none;
      z-index: 10;
    }

    .form-control {
      position: absolute;
      z-index: 4;
      border: 1px solid #d5dcea;
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.96);
      color: #0a1e3d;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: clamp(9px, 0.82vw, 14px);
      line-height: 1.25;
      padding: 0.6em 0.85em;
      opacity: 0;
      transition: opacity 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
      resize: none;
    }

    .form-control::placeholder {
      color: #838fa8;
    }

    .form-control:focus,
    .form-control.has-value {
      opacity: 1;
      border-color: #aebbd0;
      box-shadow: 0 0 0 3px rgba(0, 184, 165, 0.10);
    }

    select.form-control {
      color: #7b879f;
      appearance: auto;
    }

    select.form-control.has-value,
    select.form-control:focus {
      color: #0a1e3d;
    }

    .dropdown-panel {
      position: absolute;
      z-index: 20;
      width: min(250px, 18vw);
      min-width: 180px;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(9, 29, 65, 0.14);
      border-radius: 12px;
      box-shadow: 0 16px 38px rgba(5, 23, 55, 0.18);
      overflow: hidden;
      font-size: clamp(11px, 0.9vw, 15px);
    }

    .dropdown-panel button {
      width: 100%;
      border: 0;
      background: #fff;
      color: #071a3d;
      display: block;
      text-align: left;
      padding: 0.8em 1em;
      cursor: pointer;
      font: inherit;
    }

    .dropdown-panel button:hover,
    .dropdown-panel button:focus-visible {
      background: #e9fbf8;
      outline: none;
    }

    .toast {
      position: fixed;
      z-index: 60;
      left: 50%;
      bottom: 24px;
      transform: translate(-50%, 120%);
      max-width: min(560px, calc(100vw - 32px));
      padding: 15px 18px;
      border-radius: 14px;
      background: rgba(4, 23, 52, 0.96);
      color: #fff;
      box-shadow: 0 18px 44px rgba(4, 23, 52, 0.32);
      font-size: 14px;
      line-height: 1.4;
      opacity: 0;
      transition: transform 0.22s ease, opacity 0.22s ease;
    }

    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .toast strong {
      color: #56ead9;
    }

    .prototype-help {
      position: fixed;
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    @media (min-width: 1673px) {
      body {
        padding: 24px 0;
      }

      .site-frame {
        border-radius: 16px;
        overflow: hidden;
      }
    }

    @media (max-width: 700px) {
      .site-frame {
        width: 1200px;
        max-width: none;
      }

      body {
        overflow-x: auto;
      }
    }