.wx-islands {
  container-type: inline-size;
  --map-sea: #e4f0ee;
  --map-land: #faf5e6;
  --map-coast: #819f8b;
  --map-flow: #237c78;
  background: var(--wx-surface);
  border: 1px solid var(--wx-line);
  border-radius: 22px;
  padding: 28px;
  margin-bottom: 32px;
  overflow: hidden;
}
.wx-islands-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.wx-islands-heading h2 { font-size: clamp(24px, 3vw, 34px); margin: 6px 0; letter-spacing: -1px; }
.wx-islands-heading p { margin: 0; }
.wx-map-layers { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; background: var(--wx-soft); border-radius: 13px; }
.wx-map-layers[hidden], .wx-map-timeline[hidden] { display: none; }
.wx-map-layers button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; background: transparent; color: var(--wx-muted); padding: 10px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.wx-map-layers button[aria-pressed="true"] { color: var(--wx-ink); background: var(--wx-surface); box-shadow: 0 2px 5px #183b3610; }
.wx-map-layers svg { width: 18px; height: 18px; }
.wx-map-body { display: grid; grid-template-columns: minmax(0, 1fr) 225px; border: 1px solid var(--wx-line); border-radius: 15px; overflow: hidden; }
.wx-map-scene { position: relative; aspect-ratio: 1000 / 720; min-width: 0; background: var(--map-sea); isolation: isolate; }
.wx-map-geography, .wx-map-flow, .wx-map-markers { position: absolute; inset: 0; width: 100%; height: 100%; }
.wx-map-flow, .wx-map-markers { pointer-events: none; }
.wx-map-marker-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wx-map-marker-links line { stroke: var(--map-flow); stroke-width: 1; opacity: .7; }
.wx-map-marker-links circle { fill: var(--map-flow); }
.wx-map-grid path { fill: none; stroke: var(--map-coast); stroke-opacity: .13; stroke-dasharray: 3 8; }
.wx-map-land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 1.5; stroke-linejoin: round; }
.wx-map-coast-shadow { fill: none; stroke: var(--map-coast); stroke-width: 16; stroke-opacity: .12; stroke-linejoin: round; }
.wx-map-island-names { font: 500 15px "Montserrat", sans-serif; letter-spacing: 5px; fill: var(--wx-muted); }
.wx-map-compass path, .wx-map-scale path { fill: none; stroke: var(--wx-muted); stroke-width: 2; }
.wx-map-compass text { text-anchor: middle; font: 18px sans-serif; fill: var(--wx-muted); }
.wx-map-scale text { font: 15px sans-serif; fill: var(--wx-muted); }
.wx-map-stamp { position: absolute; top: 20px; left: 22px; display: grid; gap: 3px; font-size: 10px; color: var(--wx-muted); text-transform: uppercase; letter-spacing: 1.5px; pointer-events: none; }
.wx-map-stamp strong { font-size: 12px; color: var(--wx-ink); text-transform: none; letter-spacing: 0; }
.wx-map-marker { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; border: 0; padding: 4px; background: transparent; color: var(--wx-ink); font: inherit; cursor: pointer; pointer-events: auto; }
.wx-map-marker-name { font-size: 10px; font-weight: 600; text-shadow: 0 1px 3px var(--map-land), 0 -1px 3px var(--map-land); }
.wx-map-marker-value { display: flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 7px; font-size: 12px; font-weight: 600; background: var(--wx-surface); border: 1px solid var(--wx-line); box-shadow: 0 2px 6px #183b3612; white-space: nowrap; }
.wx-map-marker[aria-pressed="true"] .wx-map-marker-value { color: var(--wx-on-ocean); border-color: var(--wx-ocean); background: var(--wx-ocean); }
.wx-map-marker-arrow { display: inline-block; font-size: 16px; line-height: 1; }
.wx-map-marker-metrics { white-space: pre-line; }
.wx-map-inspector { padding: 25px 20px; border-left: 1px solid var(--wx-line); }
.wx-map-inspector > .wx-eyebrow { margin-bottom: 18px; }
.wx-map-inspector label { display: block; font-size: 11px; color: var(--wx-muted); margin-bottom: 6px; }
.wx-map-inspector select { width: 100%; min-width: 0; background: var(--wx-paper); color: var(--wx-ink); border: 1px solid var(--wx-line); border-radius: 8px; padding: 9px 6px; font: inherit; font-size: 13px; }
.wx-map-point-note { font-size: 11px; color: var(--wx-muted); margin: 10px 0 20px; line-height: 1.5; }
.wx-map-readings { display: grid; gap: 14px; margin: 0; }
.wx-map-readings div { display: flex; flex-direction: column-reverse; }
.wx-map-readings dt { font-size: 11px; color: var(--wx-muted); font-weight: 400; }
.wx-map-readings dd { font-size: 24px; line-height: 1.4; margin: 0; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.wx-map-status { font-size: 11px; line-height: 1.6; color: var(--wx-muted); margin: 20px 0 0; }
.wx-map-timeline { margin-top: 20px; }
.wx-map-time-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 14px; }
.wx-map-playback { display: flex; flex-shrink: 0; gap: 8px; }
.wx-map-play, .wx-map-reset { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: 9px; padding: 0; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; }
.wx-map-play { background: var(--bs-success-bg-subtle, light-dark(#d1e7dd, #051b11)); color: var(--bs-success-fg, light-dark(#0f5132, #75b798)); }
.wx-map-reset { background: var(--bs-warning-bg-subtle, light-dark(#fff3cd, #332701)); color: var(--bs-warning-fg, light-dark(#664d03, #ffda6a)); }
.wx-map-play:hover, .wx-map-reset:hover { filter: brightness(.9); }
.wx-map-time-heading output { padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--bs-accent-fg, var(--wx-ocean)) 10%, transparent); font-size: 14px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.wx-map-slider-label { display: flex; align-items: center; justify-content: space-between; color: var(--wx-muted); font-size: 11px; margin-bottom: 4px; cursor: pointer; }
.wx-map-slider-label span { color: var(--wx-ocean); font-size: 20px; line-height: 1; }
.wx-map-timeline input {
  --map-progress: 0%;
  --map-track: linear-gradient(to right, var(--wx-ocean) 0%, var(--map-flow) var(--map-progress), var(--wx-line) var(--map-progress), var(--wx-line) 100%);
  appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 44px; margin: 0; border: 0; border-radius: 8px; background: transparent; cursor: grab; accent-color: var(--wx-ocean);
}
.wx-map-timeline input::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: var(--map-track); }
.wx-map-timeline input::-moz-range-track { height: 8px; border-radius: 99px; background: var(--map-track); }
.wx-map-timeline input::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border: 3px solid var(--wx-surface); border-radius: 50%; background: var(--wx-ocean); box-shadow: 0 0 0 1px var(--wx-ocean), 0 3px 8px #183b3630; transition: box-shadow .18s ease;
}
.wx-map-timeline input::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid var(--wx-surface); border-radius: 50%; background: var(--wx-ocean); box-shadow: 0 0 0 1px var(--wx-ocean), 0 3px 8px #183b3630; transition: box-shadow .18s ease; }
.wx-map-timeline input:hover::-webkit-slider-thumb, .wx-map-timeline input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px color-mix(in srgb, var(--wx-ocean) 15%, transparent), 0 3px 8px #183b3630; }
.wx-map-timeline input:hover::-moz-range-thumb, .wx-map-timeline input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px color-mix(in srgb, var(--wx-ocean) 15%, transparent), 0 3px 8px #183b3630; }
.wx-map-timeline input:active { cursor: grabbing; }
.wx-map-ticks { display: flex; justify-content: space-between; color: var(--wx-muted); font-size: 10px; padding: 0 15px; }
.wx-map-ticks span { position: relative; padding-top: 8px; }
.wx-map-ticks span::before { content: ''; position: absolute; top: 0; left: 50%; height: 4px; width: 1px; background: var(--wx-line); }
@media (prefers-reduced-motion: reduce) {
  .wx-map-timeline input::-webkit-slider-thumb { transition: none; }
  .wx-map-timeline input::-moz-range-thumb { transition: none; }
}
.wx-islands > .wx-source-note { font-size: 10px; }
@container (max-width: 730px) {
  .wx-islands-heading { align-items: start; flex-direction: column; gap: 16px; }
  .wx-map-body { grid-template-columns: minmax(0, 1fr); }
  .wx-map-inspector { border-left: 0; border-top: 1px solid var(--wx-line); padding: 16px; }
  .wx-map-inspector > .wx-eyebrow { display: none; }
  .wx-map-readings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .wx-map-readings dd { font-size: 20px; }
  .wx-map-status { margin-top: 12px; }
}
@container (max-width: 360px) {
  .wx-map-layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wx-islands button:focus-visible, .wx-islands input:focus-visible, .wx-islands select:focus-visible { outline: 3px solid var(--wx-ocean); outline-offset: 3px; }
:root[data-theme="dark"] .wx-islands { --map-sea: #193832; --map-land: #35483a; --map-coast: #7ca38f; --map-flow: #83c7bb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wx-islands { --map-sea: #193832; --map-land: #35483a; --map-coast: #7ca38f; --map-flow: #83c7bb; }
}
@media (max-width: 900px) {
  .wx-islands-heading { align-items: start; flex-direction: column; gap: 16px; }
  .wx-map-inspector { padding: 18px 14px; }
}
@media (max-width: 640px) {
  .wx-islands { padding: 18px 14px; border-radius: 16px; }
  .wx-map-layers { width: 100%; }
  .wx-map-layers button { flex: 1; justify-content: center; padding: 9px 7px; font-size: 11px; }
  .wx-map-body { grid-template-columns: minmax(0, 1fr); }
  .wx-map-scene { aspect-ratio: 1000 / 760; }
  .wx-map-geography, .wx-map-flow, .wx-map-markers { height: calc(100% * 720 / 760); }
  .wx-map-stamp { top: 11px; left: 12px; font-size: 8px; letter-spacing: 1px; }
  .wx-map-stamp strong { font-size: 10px; }
  .wx-map-marker-name { display: none; }
  .wx-map-marker[aria-pressed="true"] .wx-map-marker-name { display: block; font-size: 9px; }
  .wx-map-marker-value { font-size: 10px; padding: 3px 5px; }
  .wx-map-marker-arrow { font-size: 13px; }
  .wx-map-inspector { border-left: 0; border-top: 1px solid var(--wx-line); padding: 16px; }
  .wx-map-inspector > .wx-eyebrow { display: none; }
  .wx-map-point-note { margin-bottom: 12px; }
  .wx-map-readings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .wx-map-readings dd { font-size: 18px; }
  .wx-map-readings dt { font-size: 10px; }
  .wx-map-status { margin-top: 12px; }
  .wx-map-time-heading { grid-template-columns: 1fr; justify-items: center; }
  .wx-map-time-heading output { grid-row: 1; font-size: 11px; }
}