:root {
  --paper: #F4F3EF;
  --ink: #0B0D0F;
  --muted: #6C6C67;
  --line: rgba(11, 13, 15, 0.18);
  --blue: #2457FF;
  --white: #FFFFFF;
  --ok: #18A66A;
  --warn: #E59B24;
  --mono: "Geist Mono", ui-monospace, monospace;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--blue); }
::selection { background: var(--blue); color: var(--paper); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@keyframes chain { 0%, 7% { color: var(--blue); } 18%, 100% { color: var(--muted); } }
@keyframes chainline { 0%, 7% { background: var(--blue); } 18%, 100% { background: rgba(11, 13, 15, 0.18); } }
@keyframes livedot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  width: 100%;
}
.nav-drawer {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 8px 24px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 243, 239, 0.96);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-drawer[hidden] { display: none !important; }
.nav-drawer-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper) !important;
  padding: 14px 16px;
  width: fit-content;
}

@media (max-width: 860px) {
  header[data-nav] nav[aria-label="Principal"] { display: none !important; }
  .nav-toggle { display: flex; }
  [data-nav-inner] > div:last-child > a { display: none !important; }
  header[data-nav].is-open .nav-drawer {
    display: flex;
  }
  header[data-nav].is-open .nav-drawer[hidden] {
    display: flex !important;
  }
}

.img-slot {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(11, 13, 15, 0.03), rgba(11, 13, 15, 0.08)),
    var(--white);
  color: var(--muted);
  font: 500 11px/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
}

.photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.photo-bleed {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(78vh, 860px);
  overflow: hidden;
  background: #111318;
}

.photo-bleed .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.photo-frame {
  overflow: hidden;
}

.photo-frame > .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.photo-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: clamp(40px, 5vw, 80px);
}

.photo-mosaic .photo {
  aspect-ratio: 4 / 3;
  height: auto;
}

@media (max-width: 768px) {
  .photo-mosaic { grid-template-columns: repeat(2, 1fr); }
  .photo-bleed { max-height: 52vh; }
}

.audit-form {
  width: min(calc(100% - 48px), 880px);
  margin: clamp(40px, 5vw, 80px) auto 0;
  padding: clamp(28px, 4vw, 48px) 0 0;
  border-top: 1px solid var(--ink);
}
.form-kicker {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.audit-form h3 {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 18px 0 0;
  max-width: 18ch;
}
.form-lead {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  margin: 16px 0 0;
  max-width: 48ch;
}
.form-alert {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #b42318;
  color: #b42318;
  font: 500 12px/1.4 var(--mono);
}
.form-alert a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-success {
  padding: 8px 0 24px;
}
.form-success h3 {
  margin-top: 0;
}
.audit-form form { margin-top: 28px; display: grid; gap: 18px; }
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.fld { display: grid; gap: 8px; }
.fld label {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fld input,
.fld select,
.fld textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 400 16px/1.4 var(--sans);
  padding: 12px 0;
  border-radius: 0;
}
.fld textarea { min-height: 110px; resize: vertical; }
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: none;
  border-bottom-color: var(--blue);
}
.ferr {
  font: 500 11px/1.4 var(--mono);
  color: #b42318;
}
.form-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 20px 24px;
  border: 0;
  cursor: pointer;
  width: fit-content;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-submit:hover,
.form-submit:focus-visible { background: var(--blue); color: var(--paper); }

.audit-live { margin-top: clamp(36px, 4vw, 64px); }
.audit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--ink);
  padding: clamp(24px, 3vw, 40px) 0 18px;
}
.audit-url-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.audit-url {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(100%, 280px);
  flex: 1 1 320px;
  font-size: clamp(22px, 3vw, 44px);
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.audit-scheme { color: var(--muted); flex-shrink: 0; }
.audit-url input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  caret-color: var(--blue);
}
.audit-url input:focus { outline: none; }
.audit-url input::placeholder { color: var(--ink); opacity: 1; }
.audit-caret {
  width: 2px;
  height: 0.9em;
  background: var(--blue);
  animation: blink 1.1s steps(1) infinite;
  flex-shrink: 0;
  display: none;
}
.audit-url input:placeholder-shown ~ .audit-caret { display: block; }
.audit-url:focus-within .audit-caret { display: none; }
.audit-run { margin-left: auto; flex-shrink: 0; }
.audit-status {
  font: 500 11px/1.6 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 20px 0 0;
  max-width: 62ch;
}
.audit-live[data-state="error"] .audit-status { color: #b42318; }
.audit-live[data-state="success"] .audit-status { color: var(--ink); }
.audit-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 20px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.audit-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(40px, 5vw, 80px);
}
.audit-n {
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 500;
}
.audit-n.is-accent { color: var(--blue); }
.audit-l {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}
.audit-live[data-state="loading"] .audit-n { opacity: 0.28; }
.audit-live[data-state="loading"] .audit-run { opacity: 0.6; pointer-events: none; }
.audit-findings {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.audit-findings[hidden] { display: none; }
.audit-findings li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.45;
}
.audit-findings li::before {
  content: attr(data-cat);
  font: 500 11px/1.45 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.legal-page { min-height: 60vh; }
.legal-wrap {
  width: min(calc(100% - 48px), 880px);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 110px) 0 clamp(80px, 10vw, 160px);
}
.legal-kicker {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-page h1 {
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 28px 0 0;
}
.legal-page h2 {
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 40px 0 12px;
}
.legal-page p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 58ch;
}
.legal-foot { background: var(--ink); color: var(--paper); }
.legal-foot a { color: var(--paper); }

.geo-page { min-height: 50vh; }
.geo-wrap {
  width: min(calc(100% - 48px), 880px);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 110px) 0 clamp(80px, 10vw, 160px);
}
.geo-bc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font: 500 11px/1.5 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}
.geo-bc a { color: var(--muted); }
.geo-page h1 {
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 28px 0 0;
}
.geo-page h2 {
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 40px 0 12px;
}
.geo-hook {
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 24px 0 0;
  max-width: 46ch;
}
.geo-meta {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  gap: 8px;
  font: 500 12px/1.5 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.geo-inds, .geo-note {
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  max-width: 58ch;
}
.geo-cases {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 58ch;
}
.geo-faq { margin: 0; }
.geo-faq dt {
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 24px 0 8px;
}
.geo-faq dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 58ch;
}
.geo-cta {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.form-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: 18px 0 0;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.form-alt a { color: var(--ink); }
.wa-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.wa-inline:hover { color: var(--blue); border-bottom-color: var(--blue); }

.site-dock {
  position: fixed;
  z-index: 40;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.site-dock .wa-fab {
  position: static;
}
.sdr { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.sdr-fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px 8px 8px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(11, 13, 15, 0.18);
}
.sdr-fab:hover,
.sdr-fab:focus-visible { background: var(--blue); color: var(--paper); }
.sdr-face {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--line);
}
.sdr-face-wrap {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.sdr-fab .sdr-face { width: 36px; height: 36px; }
.sdr-live {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18A66A;
  border: 2px solid var(--ink);
  animation: livedot 2s ease-in-out infinite;
}
.sdr-fab:hover .sdr-live,
.sdr-fab:focus-visible .sdr-live { border-color: var(--blue); }
.sdr-panel[hidden],
.sdr-nudge[hidden],
.sdr-chips[hidden],
.sdr-compose[hidden] {
  display: none !important;
}
.sdr-nudge {
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: min(300px, calc(100vw - 48px));
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 12px 10px 10px;
  font: 500 13px/1.4 var(--sans);
}
.sdr-nudge .sdr-face { width: 36px; height: 36px; }
.sdr-nudge p { margin: 0; }
.sdr-nudge-x,
.sdr-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 500 18px/1 var(--mono);
  cursor: pointer;
  padding: 0 2px;
}
.sdr-nudge-x:hover,
.sdr-x:hover { color: var(--ink); }
.sdr-panel {
  width: min(360px, calc(100vw - 32px));
  max-height: min(72vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 0 18px 48px rgba(11, 13, 15, 0.14);
}
.sdr-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 16px 0;
}
.sdr-id { display: flex; gap: 10px; align-items: center; }
.sdr-id .sdr-face-wrap { width: 40px; height: 40px; }
.sdr-id .sdr-face { width: 40px; height: 40px; }
.sdr-id .sdr-live { border-color: var(--paper); }
.sdr-id strong {
  display: block;
  font: 500 15px/1.15 var(--sans);
  letter-spacing: -0.02em;
  text-transform: none;
}
.sdr-id span {
  display: block;
  margin-top: 4px;
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sdr-gate {
  margin: 10px 16px 0;
  font: 500 11px/1.45 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sdr-log {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  min-height: 160px;
}
.sdr-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 100%;
}
.sdr-row.is-bot { align-self: flex-start; }
.sdr-row.is-me { align-self: flex-end; }
.sdr-mini {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  flex-shrink: 0;
  background: var(--line);
}
.sdr-bubble {
  max-width: min(92%, 280px);
  font-size: 15px;
  line-height: 1.4;
  padding: 10px 12px;
}
.sdr-row.is-bot .sdr-bubble { max-width: calc(100% - 30px); }
.sdr-bubble.is-bot { background: #fff; border: 1px solid var(--line); }
.sdr-bubble.is-me { background: var(--ink); color: var(--paper); }
.sdr-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 14px;
}
.sdr-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  animation: sdrdot 1.1s ease-in-out infinite;
}
.sdr-dots i:nth-child(2) { animation-delay: 0.16s; }
.sdr-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes sdrdot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
.sdr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
}
.sdr-chips button {
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  cursor: pointer;
}
.sdr-chips button:hover,
.sdr-chips button:focus-visible { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.sdr-compose {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line);
}
.sdr-compose input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font: 400 16px/1.4 var(--sans);
  padding: 8px 0;
  color: var(--ink);
}
.sdr-compose input:focus { outline: none; border-bottom-color: var(--blue); }
.sdr-compose button {
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 14px;
  cursor: pointer;
}
.sdr-compose button:hover,
.sdr-compose button:focus-visible { background: var(--blue); }
.sdr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.wa-fab {
  position: fixed;
  z-index: 40;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(11, 13, 15, 0.18);
}
.wa-fab:hover,
.wa-fab:focus-visible { background: var(--blue); color: var(--paper); }
.wa-fab svg { display: block; flex-shrink: 0; }
.geo-near, .geo-cite {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font: 500 12px/1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.geo-grid {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.geo-grid li { background: var(--paper); }
.geo-grid a {
  display: grid;
  gap: 8px;
  padding: 24px 0;
}
.geo-city {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.geo-grid strong {
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  font-weight: 500;
}
.geo-grid a span:last-child {
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  max-width: 52ch;
}

@media (max-width: 560px) {
  .geo-wrap { width: min(calc(100% - 32px), 880px); }
}

body.is-busy .form-submit { opacity: 0.6; pointer-events: none; }

@media (max-width: 768px) {
  .frow { grid-template-columns: 1fr; }
  .form-submit,
  .nav-drawer-cta,
  .audit-run { width: 100%; justify-content: center; }
  .audit-run { margin-left: 0; }
  .audit-findings li { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 560px) {
  .audit-form,
  .legal-wrap { width: min(calc(100% - 32px), 880px); }
  h1 { letter-spacing: -0.04em !important; padding-right: 8px; }
  .wa-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wa-fab { padding: 14px; }
  .sdr-fab > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sdr-fab { padding: 6px; }
  .sdr-panel { width: min(calc(100vw - 24px), 360px); }
}