:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:#173454;background:#edf3fa;font-size:14px;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:linear-gradient(180deg,#eaf2ff 0,#f2f7fc 430px,#f3f7fb 100%)}
button,input{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #65a6ee;outline-offset:3px}
[hidden]{display:none!important}
.site-shell{max-width:1420px;margin:0 auto;min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}
.top-header{background:radial-gradient(circle at 89% 0%,rgba(71,146,229,.42),transparent 34%),linear-gradient(115deg,#0d2342 5%,#15406f 65%,#1b5485);color:#fff;border-radius:0 0 25px 25px;padding:25px max(28px,env(safe-area-inset-right)) 29px;box-shadow:0 12px 32px rgba(20,52,96,.1)}
.header-top,.location-heading{display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{display:flex;gap:12px;align-items:center}.brand-symbol{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.19);color:#ffd77e;width:47px;height:47px;display:grid;place-items:center;border-radius:16px;font-size:31px}.brand-copy{display:flex;flex-direction:column;gap:4px}.brand-eyebrow,.location-kicker,.section-eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em}.brand-eyebrow{color:#a5c7f2}.brand h1{font-size:21px;line-height:1.1;letter-spacing:-.03em;margin:0}.brand h1 span{color:#ffd68b}.header-actions{display:flex;gap:16px;align-items:center}.header-badge{font-size:12px;font-weight:700;color:#d6e8ff;display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;border-radius:50%;background:#6eebba;box-shadow:0 0 0 4px rgba(110,235,186,.13)}.refresh-btn{display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid rgba(255,255,255,.32);border-radius:10px;background:rgba(255,255,255,.12);color:white;font-weight:700;transition:background .16s}.refresh-btn:hover{background:rgba(255,255,255,.2)}.refresh-btn svg,.pin-svg,.search-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.refresh-btn:disabled{opacity:.6;cursor:wait}.refresh-btn.is-loading svg{animation:spin 1s linear infinite}
.location-heading{margin-top:30px;align-items:flex-end}.location-kicker{color:#b4cdee}.place-name-row{display:flex;align-items:center;gap:10px;margin-top:7px}.pin-svg{width:21px;height:21px;color:#8cc7ff;flex-shrink:0}.place-name-row h2{font-size:24px;line-height:1.35;letter-spacing:-.02em;font-weight:750;margin:0;overflow-wrap:anywhere}.update-chip{font-size:12px;font-weight:650;color:#d7e8fa;white-space:nowrap}.current-weather{color:#c7dffa;font-size:12px;margin:9px 0 0 30px;line-height:1.4}
.main-content{padding:0 24px 28px}.search-section{position:relative;margin-top:-3px;background:#fff;border:1px solid #d9e6f3;border-radius:16px;padding:13px 16px 11px;box-shadow:0 8px 28px rgba(40,69,111,.06);z-index:2}.location-form{display:flex;align-items:center;height:44px;background:#f4f8fd;border:1px solid #dce7f3;border-radius:11px;overflow:hidden}.search-icon{padding-left:13px;color:#7590af;display:flex;align-items:center}.location-form input{min-width:0;flex:1;border:none;background:transparent;padding:12px 10px;color:#1b3a5b;outline:none;font-size:13px}.location-form input::placeholder{color:#8294ac}.search-btn{background:#2569c9;color:white;border:0;border-radius:8px;margin:4px;padding:8px 17px;white-space:nowrap;font-size:12px;font-weight:800;min-height:35px}.search-btn:hover{background:#1b5bb2}.search-btn:disabled{opacity:.65;cursor:wait}.search-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:11px}.favorites{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:29px}.favorite-chip{border:1px solid #d7e5f3;background:#f7fbff;color:#52708f;border-radius:100px;padding:6px 10px;font-size:11px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favorite-chip.active{border-color:#a5caf3;background:#e7f2ff;color:#1b62bd;font-weight:800}.search-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tool-btn{font-size:11px;font-weight:700;color:#47698d;background:none;border:none;text-decoration:none;padding:5px 3px}.tool-btn:hover{text-decoration:underline}.search-results{position:absolute;top:calc(100% - 3px);left:16px;right:16px;max-height:330px;overflow:auto;background:white;border:1px solid #bfd3e9;border-radius:0 0 13px 13px;box-shadow:0 14px 32px rgba(22,48,77,.18);padding:8px;z-index:5}.result-item{width:100%;background:none;border:0;display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border-radius:9px;color:#183957}.result-item:hover,.result-item:focus-visible{background:#eaf3ff}.result-item strong{font-size:13px}.result-item small{font-size:11px;color:#6583a1}.result-notice{color:#59738e;font-size:12px;padding:13px}.message-box{border-radius:11px;padding:12px 16px;font-size:12px;font-weight:650;margin:14px 0;white-space:pre-line}.message-box.error{background:#fff0ef;color:#a43536;border:1px solid #ffc9c4}.message-box.warning{background:#fff9e8;color:#89662c;border:1px solid #f4e3ad}.message-box.info{background:#e9f4ff;color:#2367ae;border:1px solid #bbdcf7}.loading-block{display:flex;align-items:center;gap:17px;margin:25px auto;padding:29px;max-width:580px;background:white;border:1px solid #e0e9f3;border-radius:15px}.loading-block div:last-child{display:flex;flex-direction:column;gap:5px}.loading-block strong{font-size:14px}.loading-block span{font-size:12px;color:#7c91a8}.loading-spinner{width:31px;height:31px;border:3px solid #deeafa;border-top-color:#2470c9;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}
.dashboard-grid{display:grid;grid-template-columns:285px minmax(0,1fr);gap:17px;margin-top:17px;align-items:start}.panel{background:#fff;border:1px solid #dfe8f3;box-shadow:0 3px 12px rgba(19,51,89,.025);border-radius:16px}.days-panel{padding:19px 13px 14px;position:sticky;top:14px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:15px}.days-panel .panel-heading{padding:0 6px 15px}.section-eyebrow{color:#4585c9;display:block;margin-bottom:5px}.panel-heading h2{margin:0;font-size:17px;color:#1a3654;letter-spacing:-.02em;line-height:1.4}.small-subhead,.section-subtle{font-size:11px;color:#8094a9;white-space:nowrap}.day-rail{display:flex;flex-direction:column;gap:7px;max-height:calc(100vh - 315px);min-height:360px;overflow:auto;overscroll-behavior:contain;padding:2px}.day-card{display:grid;grid-template-columns:minmax(65px,1fr) 32px 48px;grid-template-rows:auto auto;align-items:center;text-align:left;gap:4px 7px;padding:11px 10px;width:100%;background:#f8fbff;border:1px solid transparent;border-radius:11px;color:#244463;transition:border .15s,background .15s}.day-card:hover{border-color:#bddafa}.day-card.active{background:#eaf3ff;border-color:#9ec7f7;box-shadow:inset 3px 0 0 #2c7bd4}.day-date{font-size:12px;font-weight:800}.day-icon{font-size:22px;line-height:1;text-align:center;grid-column:2;grid-row:1 / span 2}.day-highlow{font-size:13px;font-weight:800;grid-column:3;text-align:right}.day-highlow small{font-size:11px;color:#8a9caf;font-weight:700}.day-weather{font-size:10px;color:#7a91a6;grid-column:1;grid-row:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.day-rain{grid-column:3;grid-row:2;text-align:right;font-size:10px;color:#427fca;font-weight:800}.days-footnote{font-size:10px;color:#93a2b2;padding:15px 6px 2px}.details-column{display:flex;flex-direction:column;gap:16px;min-width:0}
.hero-panel{overflow:hidden}.hero-upper{padding:24px 28px 22px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(200px,.8fr);gap:22px}.hero-date{font-size:13px;color:#6688a8;font-weight:800}.hero-weather{display:flex;align-items:center;gap:19px;margin-top:12px}.hero-icon{font-size:73px;line-height:1.05;filter:drop-shadow(0 5px 5px rgba(43,88,133,.06));white-space:nowrap}.hero-weather h2{font-size:28px;margin:0 0 6px;color:#1c405e;letter-spacing:-.03em}.hero-temps{font-size:23px;line-height:1.2;font-weight:800;color:#ed6772}.hero-temps span{color:#6a91c0;margin-left:12px}.hero-sun{margin-top:13px;color:#7f91a7;font-size:12px}.hero-agreement{border-radius:14px;border:1px solid #e4edf6;background:linear-gradient(125deg,#f1f7ff,#f8fbff);padding:17px 20px;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center}.agreement-heading{font-size:12px;color:#5f82a4;font-weight:800;display:flex;align-items:center;gap:6px}.info-btn{border:1px solid #aabfd6;color:#7795b6;background:white;width:17px;height:17px;border-radius:100%;font-size:11px;font-weight:800;line-height:1}.agreement-score{display:flex;align-items:baseline;margin-top:4px;color:#276cb7}.agreement-score span{font-size:50px;letter-spacing:-.06em;font-weight:800;line-height:1}.agreement-score small{font-size:14px;font-weight:700;color:#95a9bf;margin-left:3px}.grade-pill{font-size:11px;padding:3px 11px;border-radius:100px;font-weight:800;margin-top:3px;background:#e0f4e8;color:#2b8758}.grade-pill.mid{color:#9a712c;background:#fff1d1}.grade-pill.low{color:#aa5757;background:#ffe9e9}.agreement-track{height:6px;width:100%;max-width:220px;background:#dce7f3;border-radius:100px;margin-top:12px;overflow:hidden}.agreement-track span{display:block;width:0;height:100%;background:#31a67d;border-radius:100px;transition:width .4s}.hero-agreement p{font-size:10px;line-height:1.5;color:#8298ab;margin:11px 0 0}.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);background:#f6faff;border-top:1px solid #e4eef8}.stat{display:flex;flex-direction:column;gap:5px;align-items:center;padding:17px 8px;border-right:1px solid #e0eaf4}.stat:last-child{border-right:none}.stat-icon{font-size:19px;color:#598ac2;line-height:1}.stat-label{font-size:11px;color:#8094ac}.stat strong{font-size:18px;color:#255076;white-space:nowrap}
.rain-panel,.chart-panel,.hourly-panel,.slot-panel,.notes-panel{padding:21px 25px}.compact-heading{padding-bottom:18px}.rain-halves{display:grid;grid-template-columns:1fr 1fr;gap:25px}.rain-half-label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;color:#355a80;margin-bottom:9px}.rain-half-label small{font-size:10px;font-weight:500;color:#879caf}.rain-half-label strong{margin-left:auto;color:#2468bf;font-size:18px}.meter{height:9px;background:#e6f0fa;border-radius:40px;overflow:hidden}.meter span{display:block;width:0;height:100%;background:linear-gradient(90deg,#86bdf0,#2c78ca);border-radius:40px;transition:width .4s}.rain-hint{font-size:12px;line-height:1.7;color:#607d9e;margin:14px 0 0}
.chart-key{display:flex;gap:17px;align-items:center;flex-wrap:wrap;color:#71899f;font-size:11px;margin-bottom:12px}.chart-key>span{display:flex;gap:6px;align-items:center}.key-line{display:inline-block;width:22px;border-top:3px solid}.key-temp{border-color:#e86571}.key-feel{border-color:#eeab4c;border-top-style:dashed}.key-square{display:inline-block;width:10px;height:10px;border-radius:2px;background:#79ade5}.chart-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:4px}.chart-wrap{min-width:680px;width:100%;height:230px}.chart-wrap svg{display:block;width:100%;height:100%}.chart-note{color:#90a1b2;font-size:10px;margin:10px 0 0}
.table-scroll{overflow-x:auto;max-height:390px;overflow-y:auto;border:1px solid #e5edf5;border-radius:11px;scrollbar-width:thin}.hourly-table{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;color:#335371;font-size:11px;text-align:center}.hourly-table th{position:sticky;top:0;z-index:1;white-space:nowrap;background:#edf5fc;color:#5b7999;font-weight:800;padding:12px 10px;border-bottom:1px solid #e1ebf6}.hourly-table td{white-space:nowrap;padding:10px 9px;border-bottom:1px solid #edf2f7}.hourly-table tbody tr{cursor:pointer}.hourly-table tbody tr:hover{background:#e8f3ff}.hourly-table tbody tr.selected{outline:2px solid #4c90dc;outline-offset:-2px}.hourly-table tbody tr.rain-heavy{background:#dcecff}.hourly-table tbody tr.rain-maybe{background:#eef6ff}.hourly-table tbody tr.rain-cloudy{background:#f4f6fa}.hourly-table tbody tr.rain-clear{background:#fffaf0}.hourly-table tbody tr.selected{box-shadow:inset 3px 0 0 #2c7bd4}.hourly-table tbody tr:last-child td{border-bottom:0}.hour-col{font-weight:800;color:#204e80}.rain-col{color:#1769bc;font-weight:800}.model-detail{margin-top:17px;background:#f7fbff;border:1px solid #e1ecf7;border-radius:12px;padding:15px 17px}.model-detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.model-detail-head strong{font-size:13px}.model-detail-head small{font-size:11px;color:#8296a9}.model-list{display:grid;grid-template-columns:1fr 1fr;gap:11px 24px}.model-row-top{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:6px}.model-row-top strong{color:#254969;min-width:53px}.model-row-top em{color:#6584a0;font-style:normal;flex:1}.model-row-top small{color:#5486bf;font-weight:800}.model-meter{height:5px;background:#dfebf7;border-radius:20px;overflow:hidden}.model-meter span{height:100%;display:block;background:#5499dd;border-radius:20px}.model-detail-note{margin-top:12px;font-size:10px;color:#8d9fb0;line-height:1.5}
.slot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.slot-item{border:1px solid #e1ebf5;border-radius:11px;background:#f8fbff;padding:14px 16px}.slot-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.slot-top strong{font-size:13px;color:#28507a}.slot-top small{font-size:10px;color:#608ca9}.slot-weather{font-weight:800;color:#2a4c6c;margin:10px 0 6px;font-size:13px}.slot-bottom{font-size:11px;color:#7e93aa;line-height:1.7}.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.notes-grid>div{display:flex;flex-direction:column;gap:7px;background:#f8fbff;border-radius:10px;padding:14px}.notes-grid strong{font-size:12px;color:#3b7cc2}.notes-grid span{font-size:11px;line-height:1.7;color:#718ba4}
.site-footer{padding:28px 26px 35px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#869db1;font-size:10px}.site-footer a{color:#5383b4}
@media(max-width:1060px){.dashboard-grid{grid-template-columns:235px minmax(0,1fr)}.hero-upper{padding:21px;grid-template-columns:minmax(0,1fr) 175px;gap:10px}.hero-weather{gap:11px}.hero-icon{font-size:55px}.hero-weather h2{font-size:24px}.hero-temps{font-size:20px}.hero-agreement{padding:14px 9px}.rain-panel,.chart-panel,.hourly-panel,.slot-panel,.notes-panel{padding:18px}.day-card{grid-template-columns:minmax(55px,1fr) 28px 46px}.section-subtle{white-space:normal;text-align:right}}
@media(max-width:800px){.top-header{border-radius:0 0 21px 21px;padding:20px 18px 25px}.header-top{gap:10px}.brand h1{font-size:19px}.brand-symbol{width:41px;height:41px;border-radius:13px}.header-badge{display:none}.location-heading{margin-top:26px;align-items:flex-start;flex-direction:column;gap:7px}.place-name-row h2{font-size:21px}.update-chip{font-size:11px}.main-content{padding:0 11px 25px}.search-section{margin-top:10px;padding:11px}.location-form{height:45px}.location-form input{font-size:12px}.search-btn{padding:8px 10px}.search-bottom{margin-top:9px}.search-tools{width:100%;justify-content:flex-end}.dashboard-grid{display:flex;flex-direction:column;gap:13px;margin-top:13px}.days-panel{position:static;width:100%;padding:15px 10px 12px}.days-panel .panel-heading{padding:0 7px 12px}.day-rail{min-height:unset;max-height:unset;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:7px;padding:3px 6px 9px;scrollbar-width:thin}.day-card{width:131px;min-width:131px;min-height:117px;display:grid;grid-template-columns:1fr 29px;grid-template-rows:19px 23px 16px 18px;align-items:center;gap:3px 2px;padding:11px;scroll-snap-align:start}.day-icon{grid-column:2;grid-row:1 / 3;font-size:22px;align-self:center;justify-self:end;margin-top:0}.day-date{grid-column:1;grid-row:1;font-size:12px;white-space:nowrap}.day-highlow{grid-column:1 / 3;grid-row:2;text-align:left;font-size:13px;margin-top:0}.day-weather{grid-column:1 / 3;grid-row:3;font-size:10px;max-width:100%}.day-rain{grid-column:1 / 3;grid-row:4;text-align:left;font-size:11px}.days-footnote{display:none}.details-column{width:100%;gap:13px}.hero-upper{grid-template-columns:minmax(0,1fr) 180px;gap:9px}.chart-wrap{min-width:660px}.site-footer{padding:24px 16px 33px}}
@media(max-width:520px){.brand h1{font-size:17px}.brand-eyebrow{font-size:9px}.brand-symbol{width:38px;height:38px;font-size:25px}.refresh-btn{padding:9px 10px}.refresh-btn span{display:none}.refresh-btn svg{width:19px;height:19px}.place-name-row h2{font-size:20px}.search-section{border-radius:12px}.location-form input::placeholder{font-size:11px}.panel-heading{gap:8px}.panel-heading h2{font-size:16px}.small-subhead,.section-subtle{font-size:10px}.hero-upper{padding:19px 17px 18px;grid-template-columns:minmax(0,1fr) 121px;gap:6px}.hero-date{font-size:12px}.hero-weather{gap:6px;margin-top:11px}.hero-icon{font-size:43px}.hero-weather h2{font-size:21px}.hero-temps{font-size:17px}.hero-temps span{margin-left:4px}.hero-sun{font-size:10px;line-height:1.5;margin-top:12px}.hero-agreement{padding:12px 8px}.agreement-heading{font-size:10px;line-height:1.25}.agreement-score span{font-size:38px}.agreement-score small{font-size:11px}.agreement-track{margin-top:9px}.hero-agreement p{font-size:9px;margin-top:7px}.hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{padding:13px 2px;gap:4px}.stat-icon{font-size:17px}.stat-label{font-size:9px;letter-spacing:-.03em}.stat strong{font-size:15px}.rain-panel,.chart-panel,.hourly-panel,.slot-panel,.notes-panel{padding:16px 13px}.rain-halves{gap:15px}.rain-half-label{gap:5px;align-items:flex-start;flex-wrap:wrap}.rain-half-label small{width:auto;font-size:9px}.rain-half-label strong{font-size:17px}.slot-grid{gap:8px}.slot-item{padding:12px}.slot-top strong{font-size:12px}.model-list{grid-template-columns:1fr;gap:12px}.model-detail{padding:13px}.notes-grid{grid-template-columns:1fr}.notes-grid>div{padding:11px 13px}.chart-key{gap:11px}.chart-wrap{min-width:620px;height:224px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------
   Starry Harbor edition: original, non-franchise fairy-tale visuals.
   A: pastel sparkle / B: moonlit seaside / C: friendly family cards.
   Visual overrides only; meteorological calculations are untouched.
   --------------------------------------------------------------- */
:root{
  --star-ink:#2a345d;
  --star-muted:#687692;
  --star-rose:#e981ae;
  --star-rose-dark:#b9517d;
  --star-lilac:#8f83d1;
  --star-teal:#318b96;
  --star-gold:#ffcf79;
  --star-border:#e6ddf3;
  color:#303a60;
  background:#f8f6fd;
}
html{scroll-padding-top:15px}
body{
  background:
    radial-gradient(ellipse 45% 300px at 2% 450px,#fce9f4 0%,transparent 100%),
    radial-gradient(ellipse 44% 350px at 99% 720px,#e3f8f8 0%,transparent 100%),
    linear-gradient(180deg,#f2eefb 0%,#f9f8fd 60%,#f0f8fa 100%);
}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #b07ce7;outline-offset:3px}
.top-header{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 90% 35%,rgba(211,152,204,.24),transparent 45%),
    radial-gradient(ellipse at 75% 110%,rgba(89,181,196,.45),transparent 50%),
    linear-gradient(121deg,#242849 7%,#424069 56%,#396782 100%);
  border-radius:0 0 31px 31px;
  box-shadow:0 15px 35px rgba(52,50,100,.14);
}
.top-header::before{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:0;
  background-image:
    radial-gradient(circle at 10% 21%,#fff8db 1.25px,transparent 2px),
    radial-gradient(circle at 48% 19%,#fff8db 1px,transparent 2px),
    radial-gradient(circle at 71% 64%,#fff8db 1.5px,transparent 2.5px),
    radial-gradient(circle at 92% 16%,#fff8db 1px,transparent 2.5px),
    radial-gradient(circle at 39% 72%,#d9eaff 1px,transparent 2px);
  opacity:.85;
}
.header-top,.location-heading{position:relative;z-index:2}
.brand{gap:13px}
.brand-symbol{
  position:relative;
  width:52px;height:52px;
  background:linear-gradient(145deg,#faadd7,#f6c7a7 63%,#ffe5ba);
  box-shadow:0 6px 22px rgba(248,171,194,.18),inset 0 1px 0 #fff8f8;
  border:1px solid #f9ddde;
  border-radius:18px;
  color:#fffef5;
  font-size:32px;
  text-shadow:0 1px 8px rgba(129,81,141,.34);
}
.brand-symbol i{position:absolute;right:4px;top:4px;font-size:15px;font-style:normal;color:#fffbdf}
.brand-eyebrow{color:#ead7fa;font-size:10px;letter-spacing:.175em}
.brand h1{letter-spacing:.005em}
.brand h1 span{color:#ffdfa9}
.live-dot{background:#b0f5dc}
.refresh-btn{border-radius:16px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
.refresh-btn:hover{background:rgba(255,255,255,.26)}
.location-kicker{color:#d9c8f3}
.place-name-row h2{color:#fffdfd;text-shadow:0 1px 4px rgba(20,24,53,.16)}
.pin-svg{color:#ffcfbc}
.current-weather{color:#e8eaf8}
.update-chip{color:#eee9fa}
.top-twinkle{position:absolute;z-index:1;pointer-events:none;color:#ffefcc;text-shadow:0 0 14px rgba(255,237,194,.3);line-height:1}
.twinkle-one{top:59px;right:18%;font-size:24px}
.twinkle-two{top:105px;right:5%;font-size:13px;color:#faafd3}
.twinkle-three{bottom:34px;right:29%;font-size:16px}
.main-content{position:relative}
.storybook-banner{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:134px;
  margin:16px 0 16px;
  display:flex;align-items:center;
  border:1px solid #e9dafa;
  border-radius:24px;
  background:linear-gradient(105deg,#ffedf6 0%,#f8eafa 46%,#d6f4f4 100%);
  box-shadow:0 9px 30px rgba(94,76,143,.075);
}
.storybook-banner::after{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,243,251,.98) 0%,rgba(255,243,251,.92) 34%,rgba(255,243,251,.1) 76%);
}
.storybook-copy{position:relative;z-index:2;padding:19px 30px;color:#4c416d}
.storybook-kicker{display:block;color:#af6b9d;font-size:9px;font-weight:800;letter-spacing:.17em}
.storybook-kicker span{color:#e69f8c;font-size:14px;vertical-align:middle}
.storybook-copy h2{font-size:23px;line-height:1.36;letter-spacing:.015em;margin:6px 0 4px;font-weight:850;color:#4c416d}
.storybook-copy h2 br{display:none}
.storybook-copy p{font-size:11px;font-weight:650;line-height:1.6;margin:0;color:#847493}
.storybook-copy p br{display:none}
.storybook-art{position:absolute;z-index:-2;width:66%;height:100%;right:0;top:0;object-fit:cover;object-position:center 57%;pointer-events:none}
.banner-star{position:absolute;pointer-events:none;z-index:2;color:#fff7d8;text-shadow:0 0 8px #ffdecc}
.banner-star-a{font-size:22px;right:15%;top:15%}.banner-star-b{font-size:16px;right:35%;bottom:18%}
.search-section{margin-top:0;border:1px solid #e5e0f2;box-shadow:0 6px 23px rgba(68,55,108,.05);border-radius:20px;padding:14px 17px 12px;background:#fffdfd}
.location-form{background:#fcf9ff;border-color:#ebe4f2;border-radius:13px}
.search-icon{color:#a38bbb}
.location-form input{color:#3b3d68}
.search-btn{background:linear-gradient(115deg,#b67dcc,#8d83cb);border-radius:10px;box-shadow:0 3px 9px rgba(112,98,164,.15)}
.search-btn:hover{background:linear-gradient(115deg,#a76dc1,#7f73c1)}
.favorite-chip{background:#fbf7fe;border-color:#ebdff2;color:#81698f;border-radius:100px}
.favorite-chip.active{background:#fbedf6;border-color:#e7aed0;color:#a15089}
.tool-btn{color:#8d6a9c}
.search-results{border-color:#e8daed}
.result-item:hover,.result-item:focus-visible{background:#fcf0fb}
.message-box.info{background:#f4efff;color:#6a52a7;border-color:#dbd0f4}
.loading-block{border:1px solid #eadced;border-radius:20px;background:#fffafd}
.loading-spinner{border-color:#eadff9;border-top-color:#ba7ac1}
.dashboard-grid{gap:18px}
.panel{border-color:#e8e2f0;border-radius:21px;box-shadow:0 4px 22px rgba(73,53,121,.04)}
.days-panel{background:linear-gradient(175deg,#fffaff,#fff 35%);border-color:#ebddf0}
.section-eyebrow{color:#ad77bc;letter-spacing:.16em}
.panel-heading h2{color:#454268;font-weight:850}
.heading-sparkle{font-size:.74em;color:#e8a0b6;vertical-align:3px}
.small-subhead,.section-subtle{color:#9d91ad}
.day-card{border:1px solid #efe8f4;background:linear-gradient(145deg,#fffdff,#f8f4fe);color:#535074;border-radius:15px}
.day-card:hover{border-color:#d6b2e4;background:#fef9ff}
.day-card.active{background:linear-gradient(145deg,#ffeef6,#f3edff);border-color:#e5a9cd;box-shadow:inset 4px 0 0 #e79cbd,0 5px 15px rgba(230,153,195,.09)}
.day-date{color:#574778}
.day-weather{color:#8b80a3}
.day-highlow{color:#574578}
.day-highlow small{color:#978aa6}
.day-rain{color:#6288ad}
.days-footnote{color:#ab9cab}
.hero-panel{background:linear-gradient(125deg,#fffcff,#fff 56%,#f5fffe);border-color:#e8e0ef}
.hero-upper{position:relative;isolation:isolate}
.hero-upper::before{content:"";position:absolute;pointer-events:none;z-index:-1;inset:0;background:radial-gradient(ellipse 32% 60% at 22% 19%,rgba(252,212,233,.27),transparent),radial-gradient(ellipse 25% 60% at 80% 75%,rgba(186,237,238,.25),transparent)}
.hero-small-sparkle{position:absolute;top:12px;right:12px;font-size:21px;color:#e4b2c9;opacity:.7;pointer-events:none}
.hero-date{color:#9679a9;font-weight:800}
.hero-icon{display:grid;place-items:center;width:93px;height:93px;max-width:100%;border-radius:28px;background:linear-gradient(135deg,#fff2ed,#f0e9ff 55%,#e5faf9);box-shadow:0 7px 20px rgba(173,133,191,.09);font-size:61px}
.hero-weather h2{color:#4a416c}
.hero-temps{color:#de7793}
.hero-temps span{color:#8094bc}
.hero-sun{color:#9687a4}
.hero-agreement{background:linear-gradient(125deg,#f9effb,#f0f4ff 74%,#edfaf7);border:1px solid #e9def2;border-radius:18px}
.agreement-heading{color:#7c6d99}
.agreement-score{color:#8f78c8}
.agreement-score small{color:#aaa2b8}
.grade-pill{background:#ddf5ea;color:#287852}
.grade-pill.mid{background:#fff2d6;color:#946b2e}
.grade-pill.low{background:#ffe4e7;color:#a65465}
.agreement-track{background:#e3dbee}
.hero-agreement p{color:#978aa8}
.hero-stats{background:linear-gradient(90deg,#fff5fa,#f5f5ff 50%,#f0fbf9);border-top-color:#eadfee}
.stat{border-right-color:#eadfec}
.stat-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:12px;background:rgba(255,255,255,.82);color:#b17bb4;font-size:19px}
.stat:nth-child(2) .stat-icon{color:#58a4b3}
.stat:nth-child(3) .stat-icon{color:#8678c7}
.stat:nth-child(4) .stat-icon{color:#d78d82}
.stat-label{color:#8d83a0}
.stat strong{color:#535071}
.rain-panel{background:linear-gradient(115deg,#fff,#fff8fc)}
.rain-half{background:linear-gradient(130deg,#faf7ff,#f4faff);padding:14px 17px;border:1px solid #e9e1f4;border-radius:16px}
.rain-half-label{color:#6c638e}
.rain-half-label strong{color:#7f75bb}
.meter{background:#e6e8f5}
.meter span{background:linear-gradient(90deg,#88d8d5,#7a94d6)}
.rain-hint{color:#807796}
.chart-panel{background:#fffefd}
.chart-key{color:#877f9c}
.chart-note{color:#a199ac}
.table-scroll{border-color:#e6e0ef}
.hourly-table{color:#514c70}
.hourly-table th{background:#f4effb;color:#756d92;border-bottom-color:#e9dff3}
.hourly-table td{border-bottom-color:#eee8f3}
.hourly-table tbody tr:hover{background:#f8ecff}
.hourly-table tbody tr.selected{outline-color:#b87fc7;box-shadow:inset 3px 0 0 #bd84c9}
.hourly-table tbody tr.rain-heavy{background:#e8f0ff}
.hourly-table tbody tr.rain-maybe{background:#f3f9ff}
.hourly-table tbody tr.rain-cloudy{background:#f6f4fa}
.hourly-table tbody tr.rain-clear{background:#fffbef}
.hour-col{color:#5b598a}
.rain-col{color:#5388b6}
.model-detail{background:#faf7ff;border-color:#e9e2f1}
.model-row-top strong{color:#5b537e}
.model-row-top small{color:#9876ad}
.model-meter{background:#e6dff0}
.model-meter span{background:linear-gradient(90deg,#c9a1d5,#8b87ca)}
.slot-item{background:linear-gradient(140deg,#fffbff,#f6f9ff);border-color:#ede4f4;border-radius:15px}
.slot-top strong,.slot-weather{color:#625581}
.slot-top small,.slot-bottom{color:#8a7f9f}
.notes-grid>div{background:linear-gradient(145deg,#fdf9ff,#f5fcfa);border:1px solid #ece4f2;border-radius:14px}
.notes-grid strong{color:#9a78b7}
.notes-grid span{color:#837b99}
.site-footer{color:#998fa5}
.site-footer a{color:#7d78b7}
.mobile-nav{display:none}

@media(max-width:800px){
  .top-header{padding:18px 17px 23px;border-radius:0 0 28px 28px}
  .brand-symbol{width:46px;height:46px;border-radius:16px}
  .brand-symbol span{font-size:28px}
  .location-heading{margin-top:24px}
  .location-kicker{letter-spacing:.12em}
  .place-name-row h2{font-size:20px}
  .twinkle-one{right:13%;top:61px}.twinkle-two{right:8%;top:121px}.twinkle-three{right:29%;bottom:29px}
  .storybook-banner{margin:12px 0 13px;min-height:127px;border-radius:20px}
  .storybook-copy{padding:14px 18px}
  .storybook-copy h2{font-size:19px;line-height:1.33;margin-top:5px}
  .storybook-copy h2 br{display:block}
  .storybook-copy p{font-size:10px}
  .storybook-copy p br{display:block}
  .storybook-art{width:76%;object-position:58% center}
  .storybook-banner::after{background:linear-gradient(90deg,rgba(255,243,251,.98) 0%,rgba(255,243,251,.95) 36%,rgba(255,243,251,.22) 75%,transparent)}
  .search-section{border-radius:19px}
  .dashboard-grid{gap:13px}
  .days-panel{padding:15px 11px 13px}
  .day-rail{gap:9px;padding:4px 6px 10px}
  .day-card{width:145px;min-width:145px;min-height:140px;grid-template-columns:1fr 30px;grid-template-rows:20px 28px 20px 20px;gap:4px 3px;padding:12px 13px;border-radius:17px}
  .day-date{grid-column:1 / 3;grid-row:1;font-size:12px}
  .day-icon{grid-column:2;grid-row:2 / 3;font-size:25px;justify-self:end;align-self:center}
  .day-highlow{grid-column:1;grid-row:2;white-space:nowrap;font-size:15px}
  .day-weather{grid-column:1 / 3;grid-row:3;font-size:11px}
  .day-rain{grid-column:1 / 3;grid-row:4;font-size:12px}
  .details-column{gap:13px}
  .hero-upper{padding:22px 21px 18px}
  .rain-half{padding:12px 13px}
  .mobile-nav{
    position:fixed;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    z-index:50;
    bottom:0;left:0;right:0;
    gap:6px;
    padding:9px max(16px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right));
    border-top:1px solid rgba(222,208,238,.84);
    background:rgba(255,249,254,.95);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 -9px 30px rgba(79,49,102,.065);
  }
  .mobile-nav a{min-height:45px;padding:3px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;color:#76678f;text-align:center;text-decoration:none;font-weight:850}
  .mobile-nav a:active,.mobile-nav a:focus-visible{background:#f5e9fb;color:#a36bb4}
  .mobile-nav a span{font-size:20px;line-height:1.12;color:#b778b7}
  .mobile-nav a small{font-size:11px}
  .site-shell{padding-bottom:calc(83px + env(safe-area-inset-bottom))}
  #daysSection,#heroSection,#hourlySection{scroll-margin-top:10px}
}
@media(max-width:520px){
  .brand h1{font-size:16px;white-space:nowrap}
  .brand-eyebrow{font-size:8px;letter-spacing:.14em}
  .brand-symbol{width:43px;height:43px;flex-shrink:0}
  .refresh-btn{border-radius:13px;min-width:38px;justify-content:center}
  .top-header{padding-top:18px;padding-bottom:20px}
  .place-name-row h2{font-size:18px;line-height:1.43}
  .location-heading{margin-top:20px}
  .storybook-banner{min-height:133px}
  .storybook-copy{padding:13px 17px}
  .storybook-copy h2{font-size:17px;line-height:1.4}
  .storybook-copy p{font-size:10px;line-height:1.6}
  .storybook-kicker{font-size:8px;letter-spacing:.07em}
  .storybook-art{width:82%;right:-7%;object-position:59% center}
  .banner-star-a{right:10%;top:12%}
  .banner-star-b{right:34%;bottom:12%}
  .search-section{padding:12px;border-radius:17px}
  .location-form{min-height:47px}
  .location-form input{font-size:12px}
  .search-btn{font-size:12px;border-radius:9px;padding:9px 11px}
  .favorite-chip{font-size:11px;padding:7px 10px}
  .search-tools{justify-content:space-between}
  .tool-btn{font-size:11px}
  .panel{border-radius:20px}
  .days-panel .panel-heading{padding-bottom:10px}
  .panel-heading h2{font-size:16px;letter-spacing:0}
  .day-card{width:141px;min-width:141px}
  .hero-upper{display:grid;grid-template-columns:1fr;gap:14px;padding:19px 17px 17px}
  .hero-date{font-size:13px}
  .hero-weather{gap:13px;margin-top:12px}
  .hero-icon{width:71px;height:71px;min-width:71px;font-size:44px;border-radius:22px}
  .hero-weather h2{font-size:24px;line-height:1.25}
  .hero-temps{font-size:20px}
  .hero-temps span{margin-left:6px}
  .hero-sun{font-size:12px;margin-top:12px}
  .hero-agreement{
    display:grid;grid-template-columns:minmax(0,1fr) 90px;
    grid-template-rows:auto auto auto auto;
    align-items:center;justify-content:stretch;
    gap:3px 12px;
    padding:12px 16px;
    text-align:left;
    border-radius:16px;
  }
  .agreement-heading{grid-column:1;grid-row:1;font-size:12px}
  .agreement-score{grid-column:2;grid-row:1 / 3;margin:0;justify-content:flex-end}
  .agreement-score span{font-size:36px;line-height:1.1}
  .agreement-score small{font-size:12px}
  .grade-pill{grid-column:1;grid-row:2;justify-self:start;margin-top:2px;font-size:11px}
  .agreement-track{grid-column:1 / 3;grid-row:3;width:100%;max-width:unset;margin-top:8px;height:7px}
  .hero-agreement p{grid-column:1 / 3;grid-row:4;margin:5px 0 0;font-size:10px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;
    justify-items:start;
    column-gap:9px;
    row-gap:2px;
    min-height:71px;
    padding:12px 14px;
    border-right:1px solid #eadfec;
    border-bottom:1px solid #eadfec;
  }
  .stat:nth-child(2n){border-right:none}
  .stat:nth-last-child(-n+2){border-bottom:none}
  .stat-icon{grid-column:1;grid-row:1 / 3;width:34px;height:34px;border-radius:12px;font-size:19px}
  .stat-label{grid-column:2;grid-row:1;font-size:11px;letter-spacing:0;line-height:1.4}
  .stat strong{grid-column:2;grid-row:2;font-size:18px}
  .rain-panel,.chart-panel,.hourly-panel,.slot-panel,.notes-panel{padding:17px 14px}
  .rain-halves{gap:9px}
  .rain-half{padding:11px}
  .rain-half-label{gap:3px 7px;line-height:1.3}
  .rain-half-label small{font-size:9px}
  .rain-half-label strong{font-size:16px}
  .slot-item{padding:12px 11px}
  .slot-bottom{font-size:11px}
  .chart-wrap{min-width:635px}
}
@media(max-width:355px){
  .brand h1{font-size:14px}
  .brand-symbol{width:38px;height:38px}
  .location-form input{font-size:11px}
  .search-btn{padding:8px}
  .storybook-copy h2{font-size:16px}
  .hero-weather h2{font-size:21px}
  .stat{padding:10px 9px;column-gap:6px}
}
@media(prefers-reduced-motion:no-preference){
  .top-twinkle,.banner-star-a{animation:starlight 4.5s ease-in-out infinite alternate}
  .banner-star-b{animation:starlight 5.8s ease-in-out 1.3s infinite alternate}
  @keyframes starlight{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1.16)}}
}