.di-weather{--di-ink:#111111;--di-teal:#444444;box-sizing:border-box;background:#ffffff;border-radius:18px;padding:28px;color:var(--di-ink);font-family:Arial,Helvetica,sans-serif;margin:24px 0}
.di-weather *{box-sizing:border-box}.di-weather .di-weather-heading{margin-bottom:22px}.di-weather .di-weather-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--di-teal);margin:0 0 8px}
.di-weather h2{font-size:30px;line-height:1.2;color:var(--di-ink);margin:0 0 8px;font-weight:700}.di-weather .di-weather-heading>p:last-child{font-size:14px;margin:0}
.di-weather .di-weather-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.di-weather .di-weather-card{background:#ffffff;border:1px solid #e5e5e5;border-radius:12px;padding:20px;min-width:0}
.di-weather h3{font-size:19px;line-height:1.3;margin:0 0 12px;color:var(--di-ink);font-weight:700}.di-weather .di-weather-status{font-size:11px;line-height:1.4;font-weight:700;color:var(--di-teal);margin:0 0 12px}
.di-weather .di-weather-temp{font-size:42px;font-weight:700;line-height:1.1;margin:0 0 9px;color:var(--di-ink)}.di-weather .di-weather-condition{font-size:15px;line-height:1.4;margin:0 0 12px}
.di-weather .di-weather-details{font-size:12px;line-height:1.5;margin:0 0 14px}.di-weather .di-weather-time{font-size:11px;line-height:1.5;margin:5px 0;color:#4b6469}.di-weather a{color:var(--di-teal);text-decoration:underline}.di-weather .di-weather-source{display:inline-block;font-size:12px;margin-top:12px;font-weight:700}
.di-weather .di-weather-note{font-size:11px;line-height:1.6;margin:18px 0 0}.di-weather .di-weather-error{font-size:14px;line-height:1.5}.di-weather a:focus-visible{outline:3px solid #111111;outline-offset:3px}
@media(max-width:480px){.di-weather{padding:18px;border-radius:12px}.di-weather .di-weather-cards{grid-template-columns:1fr}.di-weather h2{font-size:26px}}

/* 1.0.1: Match the existing DailyIndonesia theme fonts and text colours.
   Fonts are supplied by the theme; no additional font requests are made. */
.di-weather{font-family:"Montserrat",Arial,Helvetica,sans-serif}
.di-weather .di-weather-heading h2{font-family:"Paytone One",Arial,Helvetica,sans-serif;font-weight:400;color:#000000}
.di-weather .di-weather-card h3{font-family:"Montserrat",Arial,Helvetica,sans-serif;font-weight:800;color:#000000}
.di-weather .di-weather-temp,.di-weather .di-weather-condition,.di-weather .di-weather-details{color:#000000}
.di-weather .di-weather-time{font-family:"Montserrat",Arial,Helvetica,sans-serif;color:#767676;font-size:12px;font-weight:500}
/* 1.0.3: bundled realistic weather artwork */
.di-weather .di-weather-card{border-top:4px solid #cbd5e1;box-shadow:0 4px 14px #162b4610}
.di-weather .di-condition-sun{border-top-color:#f59e0b;background:linear-gradient(160deg,#fff7db,#fff 65%)}
.di-weather .di-condition-partly{border-top-color:#eab308;background:linear-gradient(160deg,#fffae8,#fff 65%)}
.di-weather .di-condition-cloud{border-top-color:#94a3b8;background:linear-gradient(160deg,#eef2f7,#fff 65%)}
.di-weather .di-condition-rain{border-top-color:#0284c7;background:linear-gradient(160deg,#e0f2fe,#fff 65%)}
.di-weather .di-condition-storm{border-top-color:#7c3aed;background:linear-gradient(160deg,#ede9fe,#fff 65%)}
.di-weather .di-condition-snow{border-top-color:#06b6d4;background:linear-gradient(160deg,#ecfeff,#fff 65%)}
.di-weather .di-condition-fog{border-top-color:#9ca3af;background:linear-gradient(160deg,#f3f4f6,#fff 65%)}
.di-weather .di-weather-art{width:120px;height:120px;position:relative;margin:0 0 12px;overflow:hidden}
.di-weather .di-weather-picture{position:absolute;inset:8px;display:block;background:url('weather-atlas.png') no-repeat;background-size:400% 200%;animation:diwx-drift 6s ease-in-out infinite}
.di-weather .di-art-sun .di-weather-picture{background-position:0 0;animation:diwx-glow 5s ease-in-out infinite}
.di-weather .di-art-partly .di-weather-picture{background-position:33.333333% 0}
.di-weather .di-art-cloud .di-weather-picture{background-position:66.666667% 0}
.di-weather .di-art-rain .di-weather-picture{background-position:100% 0}
.di-weather .di-art-storm .di-weather-picture{background-position:0 100%}
.di-weather .di-art-snow .di-weather-picture{background-position:33.333333% 100%}
.di-weather .di-art-fog .di-weather-picture{background-position:66.666667% 100%}
.di-weather .di-art-unknown{display:none}
.di-weather .di-weather-motion{margin-top:16px;padding:7px 12px;font:inherit;font-size:12px;color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:6px;cursor:pointer}
.di-weather .di-weather-motion:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
.di-weather[data-motion="paused"] .di-weather-picture{animation-play-state:paused}
@keyframes diwx-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes diwx-glow{0%,100%{transform:scale(.95);opacity:.9}50%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.di-weather .di-weather-picture{animation:none!important}.di-weather .di-weather-motion{display:none}}
/* 1.0.4: detailed editorial forecast cards */
.di-weather .di-weather-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:22px}
.di-weather .di-weather-card{padding:0;overflow:hidden;border-radius:16px}
.di-weather .di-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid #dce3ec;background:#ffffffc9}
.di-weather .di-card-header h3{margin:0;font-size:22px}.di-weather .di-card-kicker{font-size:9px;font-weight:700;letter-spacing:1px;color:#64748b}
.di-weather .di-weather-card>.di-weather-status{margin:18px 22px 0;color:#475569}.di-weather .di-card-main{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:16px;padding:12px 22px}
.di-weather .di-card-hero{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.di-weather .di-card-hero .di-weather-art{width:100px;height:100px;margin:0;flex-shrink:0}
.di-weather .di-card-hero .di-weather-temp{font-size:56px;letter-spacing:-3px;margin:0;font-weight:800}
.di-weather .di-card-stats{margin:0;min-width:0}.di-weather .di-card-stats>div{display:flex;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid #d5dde7;font-size:12px}.di-weather .di-card-stats dt{color:#475569}.di-weather .di-card-stats dd{margin:0;font-weight:700;color:#111827;text-align:right}
.di-weather .di-weather-card>.di-weather-condition{margin:0 22px 6px;font-weight:700;font-size:18px}.di-weather .di-weather-card>.di-weather-time{margin:0 22px 20px;font-size:11px;color:#526176}
.di-weather .di-card-outlook{background:#f0f5fa;border-top:1px solid #e0e7ef;padding:18px 22px}.di-weather .di-card-outlook h4{font:700 12px/1.4 Arial,sans-serif;text-transform:uppercase;letter-spacing:1px;margin:0 0 15px;color:#475569}
.di-weather .di-card-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.di-weather .di-card-slot{padding:12px;background:white;border:1px solid #e1e7ef;border-radius:9px;min-width:0}.di-weather .di-card-slot p{font-size:11px;line-height:1.5;color:#475569;margin:6px 0 0}.di-weather .di-card-slot .di-slot-time{margin:0 0 7px;font-size:10px}.di-weather .di-card-slot strong{font-size:22px;color:#0f172a}
.di-weather .di-card-info{padding:14px 22px;background:#fff;border-top:1px solid #e2e8f0}.di-weather .di-card-info summary{cursor:pointer;font-size:12px;font-weight:700;color:#334155}.di-weather .di-card-info summary:focus-visible{outline:2px solid #2563eb;outline-offset:4px}
@media(max-width:480px){.di-weather .di-card-main{grid-template-columns:1fr}.di-weather .di-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}.di-weather .di-card-header{flex-wrap:wrap}.di-weather .di-card-hero .di-weather-temp{font-size:60px}}

.di-weather .di-feels-like{flex-basis:100%;font-size:13px;font-weight:700;line-height:1.5;margin:4px 0 0;color:#315578}