.wx-scope {
      --accent: #67c6ff;
      --accent-rgb: 103, 198, 255;
      --text: #ffffff;
      --muted: rgba(255, 255, 255, .70);
      --panel: rgba(4, 25, 55, .38);
      --panel-strong: rgba(3, 20, 47, .58);
      --line: rgba(255, 255, 255, .16);
      --hot: #ffdf86;
      --cold: #bce6ff;
      --rain: #bce9ff;
      --warning: #fff1bb;
      --radius: 30px;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
    }
.wx-scope, .wx-scope * { box-sizing: border-box; }
.wx-scope button, .wx-scope a { font: inherit; }
.wx-scope .widget {
      position: relative;
      width: 100%;
      max-width: 900px;
      min-width: 480px;
      aspect-ratio: 5 / 3;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .20);
      border-radius: var(--radius);
      color: var(--text);
      background: linear-gradient(160deg, #07152f 0%, #102d59 55%, #28547a 100%);
      box-shadow: 0 24px 60px rgba(9, 32, 68, .25), 0 3px 14px rgba(4, 22, 51, .18);
      --summary-text: #ffffff;
      --summary-muted: rgba(255,255,255,.72);
      --summary-shadow: 0 2px 12px rgba(0,24,60,.28);
      isolation: isolate;
      transition: background 900ms ease;
    }
.wx-scope .widget[data-phase="day"]:not([data-weather="rain"]):not([data-weather="storm"]) {
      --summary-text: #0d3049;
      --summary-muted: rgba(13,48,73,.68);
      --summary-shadow: 0 1px 1px rgba(255,255,255,.25);
    }
.wx-scope .widget[data-phase="morning"]:not([data-weather="rain"]):not([data-weather="storm"]) {
      --summary-text: #452f2c;
      --summary-muted: rgba(69,47,44,.68);
      --summary-shadow: 0 1px 1px rgba(255,245,226,.28);
    }
.wx-scope .widget[data-phase="morning"] { background: linear-gradient(155deg, #3f74b7 0%, #ee997a 56%, #ffd39a 100%); }
.wx-scope .widget[data-phase="day"] { background: linear-gradient(155deg, #0c66bd 0%, #2f9ee7 54%, #89d5f5 100%); }
.wx-scope .widget[data-phase="sunset"] { background: linear-gradient(155deg, #3d4389 0%, #c85f78 55%, #ffad69 100%); }
.wx-scope .widget[data-phase="night"] { background: linear-gradient(155deg, #020817 0%, #0a1f48 57%, #183d69 100%); }
.wx-scope .scene, .wx-scope .weather-tint, .wx-scope .stars, .wx-scope .precipitation, .wx-scope .fog-bands, .wx-scope .skyline {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
.wx-scope .scene { z-index: -1; overflow: hidden; }
.wx-scope .weather-tint { background: transparent; transition: background 700ms ease; }
.wx-scope .widget[data-weather="cloud"] .weather-tint { background: linear-gradient(160deg, rgba(28, 45, 65, .18), rgba(26, 45, 63, .34)); }
.wx-scope .widget[data-weather="rain"] .weather-tint { background: linear-gradient(160deg, rgba(14, 28, 44, .48), rgba(21, 42, 57, .62)); }
.wx-scope .widget[data-weather="storm"] .weather-tint { background: linear-gradient(160deg, rgba(5, 11, 25, .64), rgba(20, 29, 45, .76)); }
.wx-scope .widget[data-weather="snow"] .weather-tint { background: linear-gradient(160deg, rgba(203, 222, 235, .14), rgba(206, 228, 241, .29)); }
.wx-scope .widget[data-weather="fog"] .weather-tint { background: linear-gradient(160deg, rgba(206, 216, 221, .30), rgba(154, 171, 181, .48)); }
.wx-scope .orb {
      position: absolute;
      top: 13%;
      right: 13%;
      width: clamp(64px, 11vw, 104px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: #fff1a8;
      box-shadow: 0 0 30px rgba(255, 231, 136, .70), 0 0 90px rgba(255, 220, 112, .36);
      opacity: .95;
      transition: inset 900ms ease, opacity 700ms ease, background 700ms ease;
    }
.wx-scope .widget[data-phase="morning"] .orb { top: 30%; right: 13%; background: #ffd18a; }
.wx-scope .widget[data-phase="day"] .orb { top: 9%; right: 14%; background: #fff4b7; }
.wx-scope .widget[data-phase="sunset"] .orb { top: 39%; right: 12%; background: #ffbd70; box-shadow: 0 0 35px rgba(255, 174, 91, .68), 0 0 100px rgba(255, 132, 82, .35); }
.wx-scope .widget[data-phase="night"] .orb {
      top: 11%; right: 14%; background: #f3f1d8;
      box-shadow: 0 0 24px rgba(226, 239, 255, .30), 0 0 70px rgba(174, 206, 255, .17);
    }
.wx-scope .widget[data-phase="night"] .orb::after {
      position: absolute;
      width: 86%;
      height: 86%;
      top: -8%;
      left: 27%;
      border-radius: 50%;
      background: #0a1f48;
      content: "";
    }
.wx-scope .widget[data-weather="rain"] .orb, .wx-scope .widget[data-weather="storm"] .orb, .wx-scope .widget[data-weather="fog"] .orb { opacity: .16; }
.wx-scope .widget[data-weather="cloud"] .orb { opacity: .43; }
.wx-scope .stars { opacity: 0; transition: opacity 800ms ease; }
.wx-scope .widget[data-phase="night"] .stars { opacity: 1; }
.wx-scope .stars i {
      position: absolute;
      width: 2px;
      height: 2px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 7px rgba(255,255,255,.8);
      animation:wx-twinkle 3.6s ease-in-out infinite alternate;
    }
.wx-scope .stars i:nth-child(1) { left: 7%; top: 11%; }
.wx-scope .stars i:nth-child(2) { left: 17%; top: 22%; width: 3px; height: 3px; animation-delay: -1.3s; }
.wx-scope .stars i:nth-child(3) { left: 28%; top: 8%; animation-delay: -.4s; }
.wx-scope .stars i:nth-child(4) { left: 41%; top: 18%; width: 3px; height: 3px; animation-delay: -2.1s; }
.wx-scope .stars i:nth-child(5) { left: 54%; top: 9%; animation-delay: -1s; }
.wx-scope .stars i:nth-child(6) { left: 65%; top: 24%; width: 3px; height: 3px; animation-delay: -2.8s; }
.wx-scope .stars i:nth-child(7) { left: 82%; top: 8%; animation-delay: -1.7s; }
.wx-scope .stars i:nth-child(8) { left: 92%; top: 23%; width: 3px; height: 3px; }
.wx-scope .stars i:nth-child(9) { left: 11%; top: 44%; animation-delay: -2.3s; }
.wx-scope .stars i:nth-child(10) { left: 35%; top: 38%; animation-delay: -.8s; }
.wx-scope .stars i:nth-child(11) { left: 71%; top: 41%; animation-delay: -1.4s; }
.wx-scope .stars i:nth-child(12) { left: 88%; top: 50%; animation-delay: -2.5s; }
.wx-scope .cloud {
      position: absolute;
      width: clamp(120px, 22vw, 205px);
      height: clamp(34px, 6vw, 58px);
      border-radius: 999px;
      background: rgba(239, 248, 255, .38);
      filter: drop-shadow(0 12px 18px rgba(12, 42, 73, .10));
      opacity: .22;
      transition: opacity 700ms ease, background 700ms ease;
      animation:wx-cloud-drift 13s ease-in-out infinite alternate;
    }
.wx-scope .cloud::before, .wx-scope .cloud::after {
      position: absolute;
      bottom: 0;
      border-radius: 50%;
      background: inherit;
      content: "";
    }
.wx-scope .cloud::before { width: 43%; aspect-ratio: 1; left: 13%; }
.wx-scope .cloud::after { width: 51%; aspect-ratio: 1; right: 12%; }
.wx-scope .cloud-a { top: 28%; right: -4%; }
.wx-scope .cloud-b { top: 16%; left: -8%; width: clamp(110px, 19vw, 175px); animation-delay: -4s; }
.wx-scope .cloud-c { top: 48%; right: 20%; width: clamp(90px, 16vw, 145px); animation-delay: -8s; }
.wx-scope .widget[data-weather="cloud"] .cloud { opacity: .82; background: rgba(224, 236, 243, .72); }
.wx-scope .widget[data-weather="rain"] .cloud { opacity: .90; background: rgba(102, 126, 145, .79); }
.wx-scope .widget[data-weather="storm"] .cloud { opacity: .95; background: rgba(57, 73, 91, .88); }
.wx-scope .widget[data-weather="snow"] .cloud { opacity: .74; background: rgba(241, 248, 252, .78); }
.wx-scope .widget[data-weather="fog"] .cloud { opacity: .45; background: rgba(235, 241, 244, .68); }
.wx-scope .precipitation { display: none; overflow: hidden; }
.wx-scope .widget[data-weather="rain"] .precipitation, .wx-scope .widget[data-weather="storm"] .precipitation, .wx-scope .widget[data-weather="snow"] .precipitation { display: block; }
.wx-scope .precipitation i {
      position: absolute;
      top: -18%;
      left: calc(var(--x) * 1%);
      width: 2px;
      height: 30px;
      border-radius: 999px;
      background: rgba(191, 228, 255, .70);
      transform: rotate(13deg);
      animation:wx-rainfall 1.35s linear infinite;
      animation-delay: calc(var(--d) * -.13s);
    }
.wx-scope .precipitation i:nth-child(1) { --x:4; --d:1; }
.wx-scope .precipitation i:nth-child(2) { --x:11; --d:6; }
.wx-scope .precipitation i:nth-child(3) { --x:18; --d:3; }
.wx-scope .precipitation i:nth-child(4) { --x:25; --d:10; }
.wx-scope .precipitation i:nth-child(5) { --x:32; --d:5; }
.wx-scope .precipitation i:nth-child(6) { --x:39; --d:12; }
.wx-scope .precipitation i:nth-child(7) { --x:46; --d:7; }
.wx-scope .precipitation i:nth-child(8) { --x:53; --d:2; }
.wx-scope .precipitation i:nth-child(9) { --x:60; --d:9; }
.wx-scope .precipitation i:nth-child(10) { --x:67; --d:4; }
.wx-scope .precipitation i:nth-child(11) { --x:74; --d:13; }
.wx-scope .precipitation i:nth-child(12) { --x:81; --d:8; }
.wx-scope .precipitation i:nth-child(13) { --x:88; --d:11; }
.wx-scope .precipitation i:nth-child(14) { --x:95; --d:5; }
.wx-scope .precipitation i:nth-child(15) { --x:57; --d:14; }
.wx-scope .precipitation i:nth-child(16) { --x:21; --d:15; }
.wx-scope .widget[data-weather="snow"] .precipitation i {
      width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.80);
      transform: none; animation-name:wx-snowfall; animation-duration: 6s;
    }
.wx-scope .lightning {
      display: none;
      position: absolute;
      top: 25%;
      right: 23%;
      width: 35px;
      height: 85px;
      clip-path: polygon(52% 0, 100% 0, 66% 43%, 93% 43%, 20% 100%, 43% 57%, 13% 57%);
      background: #ffe986;
      filter: drop-shadow(0 0 14px rgba(255, 235, 128, .75));
      animation:wx-lightning 5s steps(1) infinite;
    }
.wx-scope .widget[data-weather="storm"] .lightning { display: block; }
.wx-scope .fog-bands { display: none; }
.wx-scope .widget[data-weather="fog"] .fog-bands { display: block; }
.wx-scope .fog-bands i {
      position: absolute;
      left: -8%;
      width: 116%;
      height: 13%;
      border-radius: 50%;
      background: rgba(237, 243, 246, .28);
      filter: blur(9px);
      animation:wx-fog 8s ease-in-out infinite alternate;
    }
.wx-scope .fog-bands i:nth-child(1) { top: 25%; }
.wx-scope .fog-bands i:nth-child(2) { top: 42%; animation-delay: -3s; }
.wx-scope .fog-bands i:nth-child(3) { top: 57%; animation-delay: -5s; }
.wx-scope .skyline { top: auto; bottom: 0; height: 21%; opacity: .14; }
.wx-scope .skyline::after { position: absolute; inset: auto 0 0; height: 31%; background: #03152b; content: ""; }
.wx-scope .skyline i { position: absolute; bottom: 25%; width: 6%; background: #03152b; }
.wx-scope .skyline i::after { position: absolute; inset: 12% 22%; background: repeating-linear-gradient(to bottom, rgba(255,222,139,.55) 0 3px, transparent 3px 10px); content: ""; }
.wx-scope .skyline i:nth-child(1) { left: 0; height: 34%; width: 10%; }
.wx-scope .skyline i:nth-child(2) { left: 9%; height: 65%; }
.wx-scope .skyline i:nth-child(3) { left: 16%; height: 45%; width: 11%; }
.wx-scope .skyline i:nth-child(4) { left: 29%; height: 76%; width: 7%; }
.wx-scope .skyline i:nth-child(5) { left: 39%; height: 51%; width: 12%; }
.wx-scope .skyline i:nth-child(6) { left: 55%; height: 82%; width: 8%; }
.wx-scope .skyline i:nth-child(7) { left: 66%; height: 43%; width: 10%; }
.wx-scope .skyline i:nth-child(8) { left: 78%; height: 69%; width: 7%; }
.wx-scope .skyline i:nth-child(9) { left: 87%; height: 49%; width: 13%; }
.wx-scope .inner {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(210px, .7fr);
      grid-template-rows: auto minmax(0, 1fr) auto auto;
      grid-template-areas:
        "header header"
        "hero metrics"
        "hourly hourly"
        "footer footer";
      column-gap: clamp(14px, 2.5vw, 28px);
      width: 100%;
      height: 100%;
      padding: clamp(16px, 2.7vw, 26px) clamp(18px, 3.3vw, 31px) clamp(10px, 1.7vw, 16px);
    }
.wx-scope .header {
      grid-area: header;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      min-width: 0;
    }
.wx-scope .place-wrap { min-width: 0; }
.wx-scope .place {
      margin: 0;
      overflow: hidden;
      color: var(--text);
      font-size: clamp(18px, 3.1vw, 28px);
      font-weight: 690;
      letter-spacing: -.04em;
      line-height: 1.1;
      text-shadow: 0 2px 14px rgba(0, 24, 60, .24);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
.wx-scope .area {
      margin-top: 4px;
      overflow: hidden;
      color: var(--muted);
      font-size: clamp(8px, 1.15vw, 10px);
      font-weight: 570;
      letter-spacing: .03em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
.wx-scope .header-status {
      display: flex;
      flex: 0 0 auto;
      min-width: clamp(180px, 25vw, 240px);
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
.wx-scope .warning {
      display: none;
      position: absolute;
      z-index: 10;
      top: clamp(56px, 10vw, 82px);
      left: clamp(18px, 3.3vw, 31px);
      right: clamp(18px, 3.3vw, 31px);
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border-radius: 11px;
      background: rgba(108, 52, 7, .86);
      color: var(--warning);
      font-size: 9px;
      font-weight: 680;
      box-shadow: 0 8px 24px rgba(42, 18, 2, .18);
    }
.wx-scope .warning[data-visible="true"] { display: flex; }
.wx-scope .warning svg { flex: 0 0 auto; }
.wx-scope .warning-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-scope .hero {
      grid-area: hero;
      display: flex;
      align-items: center;
      align-self: stretch;
      min-width: 0;
      min-height: 0;
      padding: 2px 0 3px;
      transform: translateY(clamp(-54px, -6vw, -32px));
    }
.wx-scope .hero > div:first-child { min-width: 0; }
.wx-scope .eyebrow {
      margin: 0 0 5px;
      color: var(--muted);
      font-size: clamp(8px, 1.15vw, 10px);
      font-weight: 570;
    }
.wx-scope .temp-row { display: flex; align-items: flex-start; min-height: 0; }
.wx-scope .current-temp {
      color: #fff;
      font-size: clamp(72px, 14vw, 122px);
      font-weight: 215;
      letter-spacing: -.085em;
      line-height: .84;
      text-shadow: 0 4px 24px rgba(0, 25, 63, .22);
    }
.wx-scope .degree {
      margin: 2px 0 0 7px;
      color: rgba(255, 255, 255, .86);
      font-size: clamp(18px, 3vw, 26px);
      font-weight: 470;
    }
.wx-scope .condition {
      max-width: 230px;
      margin: 0 0 4px;
      overflow: hidden;
      color: var(--summary-text);
      font-size: clamp(18px, 3.2vw, 28px);
      font-weight: 680;
      line-height: 1.2;
      text-align: center;
      text-shadow: var(--summary-shadow);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
.wx-scope .hi-low {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: clamp(12px, 2vw, 20px);
      margin: 0;
      color: var(--summary-text);
      font-weight: 620;
      white-space: nowrap;
    }
.wx-scope .hi-low span { display: inline-flex; align-items: baseline; gap: 4px; }
.wx-scope .hi-low small {
      color: var(--summary-muted);
      font-size: clamp(9px, 1.25vw, 11px);
      font-weight: 580;
    }
.wx-scope .hi-low b {
      color: var(--summary-text);
      font-size: clamp(28px, 5vw, 44px);
      font-weight: 650;
      text-shadow: var(--summary-shadow);
      letter-spacing: -.03em;
    }
.wx-scope .hi, .wx-scope .low { color: var(--summary-text); }
.wx-scope .weather-hero {
      display: grid;
      width: clamp(58px, 9.5vw, 82px);
      height: clamp(58px, 9.5vw, 82px);
      flex: 0 0 auto;
      margin: 0;
      place-items: center;
      filter: drop-shadow(0 9px 15px rgba(4, 33, 70, .18));
    }
.wx-scope .weather-hero svg { width: 100%; height: 100%; }
.wx-scope .metrics {
      grid-area: metrics;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-self: center;
      gap: clamp(6px, 1.1vw, 10px);
      min-width: 0;
      margin: 0;
    }
.wx-scope .metric {
      min-width: 0;
      min-height: clamp(53px, 8vw, 70px);
      padding: clamp(8px, 1.3vw, 11px);
      border-radius: clamp(12px, 1.9vw, 17px);
      background: var(--panel);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(2, 18, 43, .10);
    }
.wx-scope .metric-icon { display: none; }
.wx-scope .metric-value {
      display: block;
      margin: 0;
      overflow: hidden;
      color: #fff;
      font-size: clamp(11px, 1.65vw, 15px);
      font-weight: 680;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
.wx-scope .metric-label {
      display: block;
      margin: 5px 0 0;
      overflow: hidden;
      color: var(--muted);
      font-size: clamp(7px, 1vw, 9px);
      font-weight: 560;
      letter-spacing: .02em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
.wx-scope .forecast-section {
      grid-area: hourly;
      min-width: 0;
      height: clamp(96px, 15.2vw, 124px);
      padding: clamp(10px, 1.4vw, 13px) clamp(10px, 1.6vw, 15px) clamp(8px, 1.3vw, 11px);
      border-radius: clamp(17px, 2.5vw, 22px);
      background: var(--panel-strong);
      box-shadow: 0 12px 28px rgba(2, 17, 39, .13), inset 0 1px 0 rgba(255,255,255,.05);
    }
.wx-scope .section-title {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      height: clamp(14px, 2vw, 18px);
      margin: 0 3px clamp(5px, .8vw, 7px);
    }
.wx-scope .section-title h2 {
      margin: 0;
      color: rgba(255, 255, 255, .88);
      font-size: clamp(8px, 1.15vw, 10px);
      font-weight: 680;
      letter-spacing: .04em;
    }
.wx-scope .observed-at { color: rgba(255,255,255,.53); font-size: clamp(7px, .95vw, 9px); font-weight: 540; }
.wx-scope .forecast {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: clamp(3px, .7vw, 6px);
      height: calc(100% - clamp(19px, 2.8vw, 25px));
      min-width: 0;
    }
.wx-scope .hour-slot {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      align-items: center;
      column-gap: clamp(3px, .6vw, 6px);
      min-width: 0;
      padding: clamp(4px, .7vw, 6px) clamp(5px, .9vw, 8px);
      border-radius: clamp(11px, 1.7vw, 15px);
      color: #fff;
    }
.wx-scope .hour-slot.current { border: 2px solid var(--accent); background: #f7fbff; color: #173450; box-shadow: 0 8px 18px rgba(1, 17, 41, .16); }
.wx-scope .hour-time {
      grid-column: 1 / 3;
      overflow: hidden;
      color: rgba(255,255,255,.65);
      font-size: clamp(7px, 1vw, 9px);
      font-weight: 620;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
.wx-scope .hour-slot.current .hour-time { color: #5f7488; }
.wx-scope .hour-icon { display: grid; width: clamp(28px, 4.7vw, 40px); height: clamp(28px, 4.7vw, 40px); place-items: center; }
.wx-scope .hour-icon svg { width: 100%; height: 100%; }
.wx-scope .hour-temp { justify-self: end; font-size: clamp(13px, 2vw, 18px); font-weight: 670; letter-spacing: -.03em; }
.wx-scope .hour-pop {
      grid-column: 1 / 3;
      color: var(--rain);
      font-size: clamp(7px, .95vw, 9px);
      font-weight: 600;
      white-space: nowrap;
    }
.wx-scope .hour-slot.current .hour-pop { color: #2878a8; }
.wx-scope .footer {
      grid-area: footer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: clamp(24px, 3.8vw, 31px);
      padding: 2px 2px 0;
    }
.wx-scope .source {
      min-width: 0;
      color: rgba(255,255,255,.54);
      font-size: clamp(6px, .85vw, 8px);
      font-weight: 520;
      line-height: 1.3;
    }
.wx-scope .source a { color: inherit; text-decoration: none; }
.wx-scope .source a:hover { color: #fff; text-decoration: underline; }
.wx-scope .footer-right { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; }
.wx-scope .latest-update {
      color: rgba(255,255,255,.58);
      font-size: clamp(7px, .9vw, 9px);
      font-weight: 540;
      letter-spacing: .01em;
      white-space: nowrap;
    }
.wx-scope .refresh {
      display: inline-grid;
      width: clamp(24px, 3.8vw, 30px);
      height: clamp(24px, 3.8vw, 30px);
      flex: 0 0 auto;
      padding: 0;
      border: 0;
      border-radius: 9px;
      background: rgba(2,20,47,.20);
      color: rgba(255,255,255,.72);
      cursor: pointer;
      place-items: center;
    }
.wx-scope .refresh:hover { background: rgba(2,20,47,.38); color: #fff; }
.wx-scope .refresh:focus-visible { outline: 3px solid rgba(255,255,255,.28); outline-offset: 1px; }
.wx-scope .refresh[disabled] { cursor: wait; opacity: .55; }
.wx-scope .refresh svg { width: 14px; height: 14px; }
.wx-scope .refresh.is-loading svg { animation:wx-spin .8s linear infinite; }
.wx-scope .error-note {
      display: none;
      position: absolute;
      z-index: 20;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 6px 18px;
      background: rgba(101, 13, 31, .88);
      color: #ffe4e8;
      font-size: 8px;
      font-weight: 590;
      text-align: center;
    }
.wx-scope .widget[data-state="error"] .error-note { display: block; }
.wx-scope .widget.compact .metrics { display: none; }
.wx-scope .widget.compact .inner {
      grid-template-columns: 1fr;
      grid-template-areas:
        "header"
        "hero"
        "hourly"
        "footer";
    }
.wx-scope .widget.compact .hero { max-width: 68%; }
.wx-scope .wx-sun { fill: #ffd55f; }
.wx-scope .wx-sun-ray { stroke: #ffe890; stroke-width: 3.2; stroke-linecap: round; }
.wx-scope .wx-moon { fill: #f5f0cf; filter: drop-shadow(0 0 6px rgba(225,237,255,.34)); }
.wx-scope .wx-cloud-back { fill: rgba(188, 213, 232, .88); }
.wx-scope .wx-cloud { fill: #f5f9fc; stroke: rgba(175, 204, 226, .88); stroke-width: 1.1; }
.wx-scope .wx-rain { stroke: #8edaff; stroke-width: 3.2; stroke-linecap: round; }
.wx-scope .wx-snow { stroke: #e9f8ff; stroke-width: 2.2; stroke-linecap: round; }
.wx-scope .wx-bolt { fill: #ffe46b; }
.wx-scope .wx-fog { stroke: rgba(230,242,248,.82); stroke-width: 3; stroke-linecap: round; }
@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-twinkle { from { opacity: .25; transform: scale(.7); } to { opacity: 1; transform: scale(1.25); } }
@keyframes wx-cloud-drift { from { transform: translateX(-8px); } to { transform: translateX(13px); } }
@keyframes wx-rainfall { from { transform: translate3d(0,-15vh,0) rotate(13deg); } to { transform: translate3d(-45px,120vh,0) rotate(13deg); } }
@keyframes wx-snowfall { from { transform: translate3d(0,-12vh,0) rotate(0); } to { transform: translate3d(35px,115vh,0) rotate(260deg); } }
@keyframes wx-lightning { 0%, 89%, 93%, 100% { opacity: 0; } 90%, 92% { opacity: 1; } 91% { opacity: .25; } }
@keyframes wx-fog { from { transform: translateX(-2%); opacity: .45; } to { transform: translateX(3%); opacity: .85; } }
@media (max-width: 560px) {.wx-scope .inner {
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "hero"
          "hourly"
          "footer";
      }
.wx-scope .metrics { display: none; }
.wx-scope .hero { max-width: 72%; }
.wx-scope .header-status { min-width: 155px; }
.wx-scope .weather-hero { width: 50px; height: 50px; margin: 0; }
.wx-scope .condition { max-width: 155px; margin-bottom: 2px; font-size: 16px; }
.wx-scope .hi-low { gap: 10px; }
.wx-scope .hi-low b { font-size: 28px; }
.wx-scope .forecast-section { height: 82px; padding-block: 6px; }
.wx-scope .footer { min-height: 20px; }
.wx-scope .forecast { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wx-scope .hour-slot:nth-child(n+5) { display: none; }
.wx-scope .local-clock { display: none; }
.wx-scope .source span { display: none; }}
@media (max-width: 380px) {.wx-scope .place { max-width: 145px; }
.wx-scope .hero { max-width: 82%; }
.wx-scope .weather-hero { display: none; }
.wx-scope .forecast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wx-scope .hour-slot:nth-child(n+4) { display: none; }
.wx-scope .condition { margin-top: 4px; }
.wx-scope .hi-low { margin-top: 3px; }}
@media (prefers-reduced-motion: reduce) {.wx-scope, .wx-scope *, .wx-scope *::before, .wx-scope *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }}
/* --- ポータル組み込み時の使いやすさ調整 (元デザインへの追加分) --- */
.wx-scope { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
.wx-scope .widget { min-width: 0; max-width: none; }
.wx-scope .refresh { width: 40px; height: 40px; border-radius: 11px; }
.wx-scope .warning, .wx-scope .error-note { font-size: 12px; }
@media (max-width: 640px) {
  .wx-scope .widget { aspect-ratio: auto; height: clamp(360px, 96vw, 430px); }
}