:root{--navy:#172f51;--paper:#faf8f3;--muted:#778090;--gold:#e3aa66;--line:#eae5dc;--nav:76px;font-family:"Noto Sans JP",sans-serif;color:#142640;background:#eae7e1;color-scheme:light}*{box-sizing:border-box}body{margin:0;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}button,input,a{font:inherit}button{cursor:pointer;color:inherit;border:0}button,a,input{-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #bc8443;outline-offset:3px}h1,h2,h3,p{margin:0}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.hidden{display:none!important}.app-shell{position:relative;width:min(430px,100%);margin:auto;min-height:100dvh;overflow-x:clip;background:var(--paper);box-shadow:0 0 40px #172f5110}.app-screen{display:none;min-height:100dvh;padding:28px 20px calc(var(--nav) + env(safe-area-inset-bottom) + 25px)}.app-screen.active{display:block;animation:appear .18s ease}@keyframes appear{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:none}}.home-header{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 3px 25px}.home-header small{font-size:15px;font-weight:700}.home-header h1{font-size:23px;line-height:1.4;margin:4px 0 0}.avatar-button{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#5e6c82;color:white}.avatar-button svg{fill:white;stroke:#5e6c82;width:32px;height:32px}.weather-card{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(130deg,#eaf4fc,#fffdf7 70%,#e7f0ef);padding:15px 15px 12px;text-align:center}.weather-card:before,.weather-card:after{content:"";position:absolute;border-radius:50%;background:white;width:170px;height:75px;opacity:.7;pointer-events:none}.weather-card:before{right:-55px;top:42px;box-shadow:-40px 12px 0 -7px #fff}.weather-card:after{left:-70px;bottom:45px;box-shadow:55px 22px 0 -12px #fff}.weather-card>*{position:relative;z-index:1}.weather-location-line{display:flex;justify-content:space-between;align-items:center;gap:6px;text-align:left}.location-label{display:flex;align-items:center;gap:6px;background:none;padding:0;min-height:32px;max-width:70%;font-size:14px}.location-label b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.weather-location-line>span{font-size:13px;color:var(--muted);white-space:nowrap}.weather-main{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:10px 4px 4px;gap:3px}.weather-glyph{font-size:77px;line-height:1.2;color:#ffa93a}.weather-main>strong{font:700 100px/.95 "Noto Sans JP",sans-serif;letter-spacing:-7px;text-align:left;color:#112039}.weather-main>div{grid-column:1/-1}.weather-main b{display:block;font-size:18px;letter-spacing:.05em}.weather-main small{display:block;font-size:13px;margin-top:6px}.location-cta{margin-top:8px;background:#ffffffaa;border:1px solid #dce4e8;border-radius:99px;min-height:33px;padding:4px 13px;font-size:13px}.location-help{font-size:13px;color:#914b3b;text-align:left;margin-top:8px}.daily-card{position:relative;border-radius:18px;margin:14px 0 24px;padding:14px 18px 16px;background:linear-gradient(110deg,#f9ecd5,#fffaf0);overflow:hidden}.daily-card:after{content:"";position:absolute;right:14px;top:18px;width:56px;height:56px;opacity:.72;background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27 fill=%27none%27%3E%3Cpath d=%27M11 38c10-14 19-19 33-21-3 6-8 11-15 15 8 0 15-2 22-8-2 11-9 19-20 24-9 4-19 4-29 0 8-1 15-5 20-11-6 2-10 2-11 1z%27 fill=%27%2395b6d3%27/%3E%3Cpath d=%27M38 15c3 0 6 2 7 5-2 0-4 1-5 3%27 stroke=%2395b6d3 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");}.daily-card h2{font-size:16px}.quote-mark{display:block;font:700 30px/1.1 "Noto Sans JP",sans-serif;height:22px}.daily-message{position:relative;z-index:1;max-width:87%;font-size:14px;line-height:1.75;white-space:pre-line}.recommend-heading{font-size:16px;margin-bottom:10px}.home-feature{position:relative;display:block;width:100%;padding:0;background:none;text-align:left}.reference-art{background-image:url('./reference/design.png');background-repeat:no-repeat}.home-feature-media{width:100%;aspect-ratio:194/112;border-radius:15px;position:relative;overflow:hidden;background-image:url(./art/rooftop-sunset-v12.png);background-size:cover;background-position:50% 43%}.home-feature-media img{display:none!important}.round-play{position:absolute;right:14px;bottom:12px;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fffefb;border:3px solid #faf8f3;font-size:21px;padding-left:3px;box-shadow:0 2px 10px #172f5125}.home-feature-copy{padding:10px 38px 4px 3px}.home-feature-copy b{display:block;font-size:16px}.home-feature-copy small{display:block;font-size:13px;color:var(--muted);margin-top:3px}.feature-arrow{position:absolute;right:4px;bottom:17px;border:1px solid #e7dfd3;border-radius:50%;width:30px;height:30px;text-align:center;font-size:28px;line-height:25px}.home-gear{margin-top:16px!important;font-size:13px!important}.text-button{padding:8px 0;background:none;color:var(--navy);font-size:14px;min-height:40px}.screen-header{position:relative;text-align:center;padding:40px 0 25px}.screen-header h2{font-size:20px;line-height:1.5}.screen-header p{font-size:14px;color:var(--muted);margin-top:7px}.back-button{width:40px;height:40px;background:none;font:35px/1 Arial,sans-serif;text-align:left}.screen-header .back-button{position:absolute;top:-12px;left:-4px}.mood-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mood{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid transparent;border-radius:18px;padding:14px 6px 12px;min-height:178px;transition:border-color .15s,transform .15s}.mood:hover{transform:translateY(-2px)}.mood.active{border-color:var(--navy);box-shadow:0 0 0 2px white inset}.mood.active:after{content:"✓";position:absolute;top:7px;right:9px;font-size:16px;font-weight:bold}.mood img{width:74px;height:74px;object-fit:contain;margin-bottom:5px}.mood b{font-size:21px;line-height:1.5}.mood small{font-size:13px;color:#6f7986;line-height:1.55;margin-top:3px}.mood-sun{background:#f9efd9}.mood-leaf{background:#eff0e7}.mood-cloud{background:#e7edf3}.mood-up{background:#fbe6de}.mood-book{background:#e9eee1}.mood-heart{background:#fbe6df}.discovery-panel{padding:22px 5px 21px}.discovery-title{display:flex;justify-content:space-between;align-items:center;font-size:14px}.discovery-title strong{font-size:17px}.discovery-title>span{font-size:13px;color:var(--muted)}input[type=range]{--progress:77.78%;appearance:none;-webkit-appearance:none;width:100%;height:8px;border-radius:99px;background:linear-gradient(to right,var(--gold),#afb6d6 var(--progress),#dedddd var(--progress));margin:24px 0 17px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:30px;height:30px;border:2px solid var(--navy);border-radius:50%;background:white;box-shadow:0 2px 6px #172f5130}input[type=range]::-moz-range-thumb{width:27px;height:27px;border:2px solid var(--navy);border-radius:50%;background:white}.range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.primary-wide,.secondary-wide{display:flex;align-items:center;justify-content:center;width:100%;gap:10px;min-height:54px;border-radius:20px;padding:13px 18px;font-size:16px;text-decoration:none}.primary-wide{background:linear-gradient(110deg,#203c60,#172f51);color:white}.secondary-wide{background:#fff;border:1px solid var(--line)}.inline-help{font-size:14px;margin-bottom:14px;color:#944535}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(430px,100%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(var(--nav) + env(safe-area-inset-bottom));padding:11px 8px calc(10px + env(safe-area-inset-bottom));background:#fdfbf7f7;border-top:1px solid #f0ece4;border-radius:24px 24px 0 0;z-index:20;backdrop-filter:blur(10px)}.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;padding:3px 0;color:#7e8087}.bottom-nav b{font-size:13px;font-weight:400;white-space:nowrap}.bottom-nav button.active{color:var(--navy)}.bottom-nav button.active b{font-weight:700}.bottom-nav button[data-go=home].active svg,.bottom-nav button[data-go=collection].active svg{fill:var(--navy);stroke:var(--navy)}.app-shell[data-current=mood] .bottom-nav,.app-shell[data-current=welcome] .bottom-nav{display:none}.app-shell[data-current=mood] .app-screen{padding-bottom:30px}.app-screen[data-screen=playlist]{padding:0 0 calc(var(--nav) + env(safe-area-inset-bottom) + 20px)}.playlist-hero{position:relative;height:290px;background:linear-gradient(135deg,#284d75,#8dafcd);overflow:hidden}.playlist-art{position:absolute;inset:0;width:100%;background-image:linear-gradient(90deg,rgba(20,43,72,.38),transparent 72%),url(./art/rooftop-sunset-v12.png);background-size:cover;background-position:50% 36%}.playlist-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2e5075 22%,#365d7e90 48%,transparent 70%)}.playlist-hero .back-button{position:absolute;z-index:2;top:16px;left:20px;color:white}.playlist-hero-copy{position:absolute;z-index:2;top:88px;left:25px;color:white;max-width:65%;text-shadow:0 1px 4px #172f5140}.playlist-hero-copy h2{font-size:23px;font-weight:500;letter-spacing:.08em}.playlist-hero-copy p{font-size:14px;line-height:1.65;margin-top:6px}.playlist-body{position:relative;margin:-15px 14px 0;padding:12px 10px 15px;border-radius:21px;background:#fffdf9;z-index:3}.playlist-summary{display:grid;grid-template-columns:44px minmax(0,1fr) 40px;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #efece6}.playlist-summary h2{font-size:18px;line-height:1.4;overflow-wrap:anywhere}.playlist-summary p{font-size:13px;color:var(--muted);margin-top:3px}.hero-play{width:44px;height:44px;border-radius:50%;background:var(--navy);color:white}.save-button{width:40px;height:44px;background:none;font-size:27px}.curator-note{font-size:13px;color:var(--muted);padding:12px 3px;line-height:1.6}.track-list{list-style:none;margin:3px 0 16px;padding:0}.track-row{display:grid;grid-template-columns:17px 45px minmax(0,1fr) auto;gap:7px;align-items:center;min-height:64px;border-bottom:1px solid #f0ece5;padding:7px 0}.track-no{font-size:13px;text-align:center}.track-art{width:45px;height:45px;border-radius:8px;object-fit:cover;background:#e4eaf1}.track-copy{min-width:0}.track-title{font-size:14px;line-height:1.4;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0}.track-artist{font-size:13px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0}.track-album{display:none}.track-actions{display:flex;gap:0}.preview-btn,.apple-link{display:grid;place-items:center;width:33px;height:40px;border-radius:50%;background:none;font-size:16px;color:var(--navy);text-decoration:none}.apple-link{width:24px}.track-row.active{background:#edf2f8;border-radius:9px}.playlist-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.playlist-actions button{background:none;border:0;padding:6px 0;min-height:40px;font-size:13px;color:var(--navy)}.apple-affiliate-disclosure,.amazon-associate-disclosure,.small-note,.history-help{font-size:13px;color:var(--muted);line-height:1.7;margin-top:14px}.apple-affiliate-disclosure a{color:var(--navy)}.save-message{padding:10px 12px;border-radius:10px;background:#edf4ec;font-size:14px;margin:10px 0}.save-message.error{background:#fae9e1;color:#9a483a}.gear-header{display:flex;justify-content:space-between;gap:12px;margin:12px 3px 22px}.gear-header h2{font-size:24px;line-height:1.5}.gear-header p{font-size:14px;color:var(--muted);line-height:1.65;margin-top:9px}.amazon-a{position:relative;font:800 65px/1 "Noto Sans JP",sans-serif;color:#121826}.amazon-a:after{content:"";position:absolute;top:50px;left:-2px;width:41px;height:12px;border-bottom:4px solid #e29b29;border-radius:50%;transform:rotate(-10deg)}.gear-list{display:grid;gap:12px}.gear-card{position:relative;overflow:hidden;min-height:290px;border:1px solid #eee7db;border-radius:19px;background:linear-gradient(140deg,#e4edf5,#fff3dc)}.gear-visual{position:absolute;right:0;top:0;bottom:0;width:55%;background-size:1448% auto;background-position:80.4% 62.6%}.gear-1 .gear-visual{background-position:80.4% 42.5%}.gear-2 .gear-visual{background-position:80.2% 76.8%}.gear-0{background:linear-gradient(125deg,#efeaf7,#f5f0e4)}.gear-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fbf7ee 5%,#fbf7eedb 37%,transparent 65%);pointer-events:none}.gear-copy{position:relative;z-index:1;min-height:290px;padding:16px;display:flex;flex-direction:column;align-items:flex-start}.gear-copy>span{font-size:13px;line-height:1.5;border-radius:7px;padding:2px 8px;background:var(--navy);color:white}.gear-copy h3{font-size:20px;line-height:1.45;max-width:65%;margin:10px 0 6px;white-space:pre-line}.gear-copy p{font-size:13px;line-height:1.75;max-width:54%;color:#5f6a7a;margin-bottom:14px}.gear-copy a{margin-top:auto;display:flex;align-items:center;border-radius:99px;background:var(--navy);color:white;text-decoration:none;padding:8px 17px;font-size:14px;min-height:40px}.collection-header{display:flex;align-items:center;justify-content:space-between;margin:16px 2px 25px}.collection-header h2{font-size:23px}.icon-button{font-size:28px;width:42px;height:42px;background:none}.collection-tabs{display:flex;justify-content:space-between;gap:7px;margin-bottom:20px}.collection-tabs button{font-size:13px;padding:9px 10px;border-radius:10px;background:#f0ede7;color:#787d88;white-space:nowrap}.collection-tabs button.active{background:var(--navy);color:white}.history-help{margin:15px 0}.history-list{display:grid;gap:12px}.history-item{display:grid;grid-template-columns:minmax(0,1fr) 32px;background:#fffdf9;border-radius:17px;overflow:hidden;min-height:115px}.history-main{border:0;background:none;display:grid;grid-template-columns:94px minmax(0,1fr);text-align:left;gap:13px;align-items:center;padding:0;cursor:pointer}.history-art{height:115px;width:94px;object-fit:cover;background:#e4eaf1}.history-copy{min-width:0;padding:12px 0}.history-title{font-size:15px;font-weight:700;line-height:1.6;overflow-wrap:anywhere}.history-meta{display:block;font-size:13px;color:#7d8595;margin-top:8px}.history-actions{display:flex;flex-direction:column;justify-content:center;gap:12px;padding-right:3px}.history-actions button{background:none;min-height:32px;font-size:20px;padding:0}.history-delete{color:#858b94}.empty-history{padding:38px 18px;background:#fffdf9;border-radius:18px;font-size:15px;color:var(--muted);text-align:center;line-height:1.8}.status-module{position:fixed;z-index:30;bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 12px);left:50%;transform:translateX(-50%);width:min(382px,calc(100% - 28px));display:flex;align-items:center;gap:10px;background:#172f51f5;color:white;border-radius:16px;padding:12px 15px;box-shadow:0 4px 18px #172f5120;font-size:14px}.status-module.error{background:#7d3e34}.spinner{border:2px solid #ffffff70;border-top-color:white;border-radius:50%;width:19px;height:19px;flex:none;animation:spin 1s linear infinite}.status-module.error .spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}.now-playing{position:fixed;z-index:25;bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 8px);left:50%;transform:translateX(-50%);width:min(390px,calc(100% - 24px));border-radius:17px;display:grid;grid-template-columns:44px minmax(0,1fr) 40px;gap:10px;align-items:center;padding:10px;background:#172f51;color:white;box-shadow:0 3px 20px #172f5130}.now-playing img{width:44px;height:44px;object-fit:cover;border-radius:8px}.now-playing b,.now-playing small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.now-playing>div>span{display:none}.now-playing button{background:none;color:white;width:40px;height:40px}.app-shell[data-current=mood] .status-module,.app-shell[data-current=mood] .now-playing{bottom:12px}dialog{width:min(400px,calc(100% - 26px));max-height:85dvh;border:1px solid var(--line);border-radius:22px;padding:0;color:#142640;background:var(--paper)}dialog::backdrop{background:#172f5166;backdrop-filter:blur(3px)}.dialog-card{padding:22px}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.dialog-head h2{font-size:22px}.round-button{border-radius:50%;background:#efece7;font-size:26px;line-height:1;width:40px;height:40px}.micro-label{font-size:13px;color:var(--muted)}.dialog-card label{display:block;font-size:14px}input[type=search]{width:100%;min-height:50px;border:1px solid #d8d8d5;border-radius:12px;background:white;color:#142640;padding:10px 12px;font-size:16px;margin-top:8px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.ghost-button,.solid-button{min-height:46px;font-size:14px;border-radius:14px;padding:10px;background:#fff;border:1px solid var(--line)}.solid-button{background:var(--navy);color:white}.city-results{display:grid;gap:8px;margin-top:16px}.city-item{background:#fff;border:1px solid var(--line);border-radius:12px;text-align:left;padding:12px}.city-item small{display:block;font-size:13px;color:var(--muted);margin-top:3px}.settings-item{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:55px;background:transparent;border-bottom:1px solid var(--line);font-size:15px;text-align:left}.welcome-screen{position:relative;background:linear-gradient(#17375f,#274b70 60%,#172f51);color:#fff;padding:0;overflow:hidden;min-height:100dvh}.welcome-art{position:absolute;inset:0;width:100%;height:100%;background-image:url(./art/rooftop-sunset-v12.png);background-size:cover;background-position:50% 50%}.welcome-title{position:relative;text-align:center;padding:50px 16px 0;text-shadow:0 2px 5px #17375f99}.welcome-title svg{width:80px;height:65px;stroke-width:3}.welcome-title h1{font:700 36px/1.08 "Noto Sans JP",sans-serif;letter-spacing:.1em;margin:16px 0}.welcome-title p{font-size:18px;line-height:1.9;letter-spacing:.12em}.welcome-bottom{position:absolute;bottom:30px;left:25px;right:25px;text-align:center}.welcome-bottom p{font-size:13px;margin-bottom:16px}.welcome-bottom button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;min-height:58px;background:#fffefa;border-radius:99px;color:var(--navy);font-size:17px;font-weight:700}.welcome-bottom span{position:absolute;right:22px;font-weight:400}@media(max-width:360px){.app-screen{padding-left:15px;padding-right:15px}.mood{min-height:160px}.mood img{width:62px;height:62px}.mood b{font-size:19px}.screen-header h2{font-size:18px}.collection-tabs{gap:4px}.collection-tabs button{padding:8px}.gear-copy h3{font-size:18px}.history-main{grid-template-columns:80px minmax(0,1fr)}.history-art{width:80px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* v12.0.2 — one-line greeting + unmistakable map icon */
.home-header{
  align-items:center;
  gap:10px;
  padding-bottom:22px;
}
.home-greeting{
  min-width:0;
  flex:1 1 auto;
}
.home-header .home-greeting h1{
  margin-top:4px;
  white-space:nowrap;
  font-size:clamp(16px,4.35vw,19px);
  line-height:1.35;
  letter-spacing:-.045em;
}
.map-button{
  flex:0 0 43px;
  background:#5e6c82;
  color:#fff;
}
.avatar-button.map-button .map-icon{
  width:25px;
  height:25px;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:1.85!important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.avatar-button.map-button .map-icon path{
  fill:none!important;
  stroke:#fff!important;
}
@media (max-width:374px){
  .home-header .home-greeting h1{
    font-size:15px;
    letter-spacing:-.055em;
  }
  .map-button{flex-basis:40px;width:40px;height:40px}
  .avatar-button.map-button .map-icon{width:23px;height:23px}
}

/* v12.0.3 Noto Sans JP */
html,body,button,input,select,textarea,a{font-family:"Noto Sans JP",sans-serif!important;}
.weather-main>strong,.daily-card:after,.quote-mark,.amazon-a,.welcome-title h1{font-family:"Noto Sans JP",sans-serif!important;}


/* v12.0.4 — home greeting title only: Noto Serif JP */
.home-header .home-greeting h1{
  font-family:"Noto Serif JP",serif!important;
  font-weight:700;
}

/* v12.0.5: replace music-note decoration with softer bird icon */


/* v12.0.6 — greeting typography */
.home-header .home-greeting h1{
  margin-top:4px!important;
  white-space:nowrap!important;
  font-size:clamp(16px,4.35vw,29px)!important;
  line-height:1.35!important;
  letter-spacing:-.045em!important;
  font-family:"Noto Serif JP",serif!important;
  font-weight:700!important;
}
.home-header .home-greeting #greeting,
.home-header .home-greeting small{
  font-family:"Noto Serif JP",serif!important;
  font-weight:700!important;
  font-size:15px!important;
  line-height:1.35!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
}
@media (max-width:374px){
  .home-header .home-greeting h1{
    font-size:clamp(16px,4.35vw,29px)!important;
  }
}


/* v12.0.7 — clean daily card + restore temperature display */
.daily-card:after{
  content:none!important;
  display:none!important;
  background-image:none!important;
}
.daily-message{
  max-width:100%!important;
}
.weather-main>strong{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  letter-spacing:-.055em!important;
}


/* v12.0.8 FINAL FIX — daily card clean / temperature exact */
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}
.daily-card{
  padding-right:18px!important;
}
.daily-card .daily-message{
  max-width:none!important;
  width:100%!important;
}
.weather-card .weather-main>strong,
.weather-main #temperature,
#temperature{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:100px!important;
  font-weight:400!important;
  line-height:.95!important;
  letter-spacing:-7px!important;
  color:#112039!important;
}
@media(max-width:360px){
  .weather-card .weather-main>strong,
  .weather-main #temperature,
  #temperature{
    font-size:88px!important;
    letter-spacing:-6px!important;
  }
}


/* v12.0.9 — Today's Word: refined music icon restored */
.daily-card:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:15px!important;
  top:19px!important;
  width:46px!important;
  height:46px!important;
  opacity:.55!important;
  transform:none!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M27 14v31.5c0 5-4.8 8.5-10.2 8.5C11.4 54 7 50.9 7 46.5S11.4 39 16.8 39c2.1 0 4 .4 5.6 1.2V19.5L49 14v24.5c0 5-4.8 8.5-10.2 8.5-5.4 0-9.8-3.1-9.8-7.5s4.4-7.5 9.8-7.5c2.1 0 4 .4 5.6 1.2V9.5L27 14Z' stroke='%238BAECC' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
.daily-message{
  max-width:86%!important;
}


/* ==========================================================
   v12.1.0 — high quality gear images / playlist typography
   ========================================================== */

/* Playlist hero typography */
.playlist-hero-copy{
  max-width:72%!important;
  text-shadow:0 2px 9px rgba(12,31,55,.34)!important;
}
.playlist-hero-copy h2{
  font-family:"Noto Serif JP",serif!important;
  font-size:29px!important;
  font-weight:700!important;
  line-height:1.22!important;
  letter-spacing:.015em!important;
  color:#fff!important;
  margin:0 0 9px!important;
}
.playlist-hero-copy p{
  font-family:"Noto Sans JP",sans-serif!important;
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.85!important;
  letter-spacing:.015em!important;
  color:rgba(255,255,255,.95)!important;
  margin:0!important;
}
.playlist-hero-copy #heroCount{
  font-family:"Noto Serif JP",serif!important;
  font-weight:700!important;
  font-size:1.08em!important;
  color:#fff4df!important;
  letter-spacing:.03em!important;
}

/* Use the actual high-resolution generated art, no sprite/cropped reference image. */
.gear-card{
  min-height:300px!important;
  background:#fbf7ee!important;
  border-color:#eadfce!important;
}
.gear-visual{
  position:absolute!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:56%!important;
  overflow:hidden!important;
  background:none!important;
}
.gear-visual img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  image-rendering:auto!important;
  transform:translateZ(0);
}
.gear-0 .gear-visual img{object-position:50% 50%!important}
.gear-1 .gear-visual img{object-position:50% 49%!important}
.gear-2 .gear-visual img{object-position:50% 50%!important}
.gear-card:after{
  background:linear-gradient(90deg,#fbf7ee 4%,rgba(251,247,238,.97) 35%,rgba(251,247,238,.72) 48%,transparent 68%)!important;
}
.gear-copy{
  min-height:300px!important;
  padding:17px!important;
}
.gear-copy h3{
  max-width:57%!important;
  font-size:19px!important;
  line-height:1.45!important;
  letter-spacing:-.015em!important;
}
.gear-copy p{
  max-width:53%!important;
  font-size:13px!important;
  line-height:1.8!important;
}
.gear-copy a{
  position:relative!important;
  z-index:3!important;
}

/* Collection tabs: requested tighter distribution.
   CSS does not support a negative gap, so use 0 gap with space-evenly. */
.collection-tabs{
  display:flex!important;
  justify-content:space-evenly!important;
  gap:0!important;
  margin-bottom:20px!important;
}
.collection-tabs button{
  margin-inline:-2px!important;
}

@media(max-width:360px){
  .playlist-hero-copy h2{font-size:27px!important}
  .playlist-hero-copy p{font-size:14px!important}
  .gear-visual{width:55%!important}
  .gear-copy h3{font-size:18px!important}
  .collection-tabs button{margin-inline:-3px!important;padding-left:7px!important;padding-right:7px!important}
}


/* v12.1.1 — collection image fit + map button position */
.history-art{
  height:auto!important;
  width:94px!important;
  object-fit:contain!important;
}
.map-button{
  align-self:flex-start!important;
  transform:translateY(-8px)!important;
}
@media(max-width:360px){
  .history-art{width:80px!important;height:auto!important;object-fit:contain!important}
  .map-button{transform:translateY(-7px)!important}
}


/* v12.1.2 — Amazon affiliate block after track 5 */
.playlist-amazon-ad{
  list-style:none;
  margin:10px -2px 12px;
  padding:0;
}
.playlist-amazon-wrap{
  border-radius:18px;
  background:#f7efe2;
  border:1px solid #eadfce;
  padding:13px 12px 12px;
  overflow:hidden;
}
.playlist-amazon-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.playlist-amazon-head span{
  display:block;
  font-size:11px;
  line-height:1;
  letter-spacing:.12em;
  color:#7b8290;
  font-weight:700;
}
.playlist-amazon-head h3{
  margin:6px 0 0;
  font-family:"Noto Serif JP",serif;
  font-size:17px;
  line-height:1.35;
  color:#172f51;
}
.playlist-amazon-head>b{
  flex:none;
  padding:4px 8px;
  border-radius:999px;
  background:#172f51;
  color:#fff;
  font-size:11px;
  font-weight:700;
}
.playlist-amazon-rail{
  display:flex;
  gap:9px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:1px;
}
.playlist-amazon-rail::-webkit-scrollbar{display:none}
.playlist-amazon-card{
  flex:0 0 74%;
  min-width:0;
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  column-gap:10px;
  align-items:start;
  text-decoration:none;
  color:#172f51;
  background:#fffdf9;
  border:1px solid #e8dece;
  border-radius:15px;
  padding:8px;
}
.playlist-amazon-image{
  grid-row:1/4;
  width:86px;
  height:86px;
  object-fit:cover;
  border-radius:11px;
  background:#eee7dd;
}
.playlist-amazon-type{
  font-size:10px;
  color:#818895;
  letter-spacing:.09em;
  font-weight:700;
  margin-top:2px;
}
.playlist-amazon-card strong{
  font-size:13px;
  line-height:1.4;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.playlist-amazon-cta{
  align-self:end;
  font-size:11px;
  font-weight:700;
  color:#172f51;
  margin-top:7px;
}
@media(max-width:360px){
  .playlist-amazon-card{flex-basis:82%;grid-template-columns:78px minmax(0,1fr)}
  .playlist-amazon-image{width:78px;height:78px}
}


/* ==========================================================
   v12.1.3 — premium weather + Amazon inline guaranteed
   ========================================================== */
.weather-card{
  min-height:360px!important;
  padding:17px 17px 15px!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.16) 46%,rgba(255,252,245,.70)),
    url('./art/weather-premium-bg.webp') center 48%/cover no-repeat!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 10px 28px rgba(23,47,81,.09)!important;
}
.weather-card:before,.weather-card:after{
  content:none!important;
  display:none!important;
}
.weather-card>*{position:relative;z-index:2}
.weather-location-line{
  padding:7px 9px!important;
  margin:-2px -2px 7px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.74)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.location-label{color:#12284a!important;font-weight:700!important}
.weather-location-line>span{color:#65768a!important;font-weight:500!important}
.weather-main{
  min-height:244px!important;
  display:grid!important;
  grid-template-columns:1fr 1.18fr!important;
  align-content:center!important;
  align-items:center!important;
  gap:0 5px!important;
  padding:8px 6px 2px!important;
  text-shadow:0 1px 0 rgba(255,255,255,.80);
}
.weather-glyph{
  justify-self:center!important;
  font-size:78px!important;
  filter:drop-shadow(0 3px 3px rgba(23,47,81,.08));
}
.weather-main>strong{
  justify-self:start!important;
  font-size:100px!important;
  line-height:.92!important;
  color:#0e2341!important;
  text-shadow:0 2px 1px rgba(255,255,255,.86)!important;
}
.weather-main>div{
  grid-column:1/-1!important;
  margin-top:7px!important;
  padding:9px 12px 8px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.69)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.weather-main b{font-size:18px!important;color:#12284a!important}
.weather-main small{font-size:13px!important;color:#394d68!important}
.location-cta{
  min-height:39px!important;
  padding:7px 16px!important;
  border:1px solid rgba(23,47,81,.10)!important;
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#173257!important;
  font-weight:700!important;
}
.daily-card{
  min-height:170px!important;
  background:
    linear-gradient(90deg,rgba(255,250,239,.92),rgba(255,250,239,.66)),
    url('./art/daily-premium-bg.webp') center 60%/cover no-repeat!important;
  border:1px solid rgba(229,213,190,.78)!important;
  box-shadow:0 8px 22px rgba(91,76,55,.05)!important;
}
.daily-card h2,.quote-mark,.daily-message{
  text-shadow:0 1px 0 rgba(255,255,255,.78);
}
.playlist-amazon-ad{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  margin:12px 0 14px!important;
}
.playlist-amazon-wrap{
  display:block!important;
  background:#f8efe1!important;
  border:1px solid #eadbc5!important;
  box-shadow:0 7px 18px rgba(80,61,33,.06)!important;
}
.playlist-amazon-rail{display:flex!important}
.playlist-amazon-card{display:grid!important}
.playlist-amazon-image{display:block!important}
@media(max-width:380px){
  .weather-card{min-height:344px!important}
  .weather-main{min-height:228px!important}
  .weather-main>strong{font-size:88px!important}
  .weather-glyph{font-size:70px!important}
}


/* ==========================================================
   v12.1.4 — remove gray block, clean Today's Word
   ========================================================== */

/* Home weather card: scenic top, warm paper bottom. No gray block. */
.weather-card{
  min-height:308px!important;
  padding:14px 14px 12px!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.08) 18%,
      rgba(255,248,239,.00) 46%,
      rgba(255,249,241,.92) 46%,
      rgba(255,249,241,.97) 70%,
      #fff8ef 100%
    ),
    url('./art/weather-premium-bg.webp') center top/cover no-repeat!important;
  border:1px solid rgba(255,255,255,.70)!important;
  box-shadow:0 10px 28px rgba(23,47,81,.07)!important;
}
.weather-location-line{
  padding:6px 8px!important;
  margin:0 0 4px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.70)!important;
}
.weather-main{
  min-height:202px!important;
  grid-template-columns:.96fr 1.14fr!important;
  gap:0 2px!important;
  padding:4px 4px 0!important;
}
.weather-glyph{
  font-size:66px!important;
}
.weather-main>strong{
  font-size:82px!important;
  line-height:.94!important;
}
.weather-main>div{
  margin-top:4px!important;
  padding:8px 12px 6px!important;
  border-radius:12px!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.weather-main b{
  font-size:17px!important;
}
.weather-main small{
  font-size:13px!important;
  margin-top:4px!important;
}
.location-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:8px!important;
  min-height:0!important;
  padding:11px 18px!important;
  background:#fff!important;
  border:1px solid #e3dfd7!important;
  box-shadow:0 2px 8px rgba(23,47,81,.06)!important;
  font-size:13px!important;
}

/* Today's Word: no icon at all. */
.daily-card{
  min-height:auto!important;
  background:
    linear-gradient(90deg, rgba(255,249,239,.94), rgba(255,249,239,.82)),
    url('./art/daily-premium-bg.webp') center 60%/cover no-repeat!important;
  border:1px solid #eedfcb!important;
}
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}
.daily-card h2{
  font-size:16px!important;
  margin-bottom:4px!important;
}
.quote-mark{
  display:block!important;
  height:auto!important;
  font-size:24px!important;
  line-height:1!important;
  margin-bottom:2px!important;
}
.daily-message{
  max-width:100%!important;
  font-size:14px!important;
  line-height:1.75!important;
}

/* Mobile tuning */
@media(max-width:380px){
  .weather-card{min-height:296px!important}
  .weather-main{min-height:194px!important}
  .weather-main>strong{font-size:76px!important}
  .weather-glyph{font-size:60px!important}
}


/* ==========================================================
   v12.1.5 — reference-style weather card rebuild
   ========================================================== */
.weather-card{
  min-height:286px!important;
  padding:12px 14px 13px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  text-align:center!important;
  background:url('./ui/weather-card.svg') center/cover no-repeat!important;
  border:1px solid #e8dfd2!important;
  box-shadow:0 7px 22px rgba(23,47,81,.055)!important;
}
.weather-card:before,
.weather-card:after{
  content:none!important;
  display:none!important;
}
.weather-location-line{
  min-height:34px!important;
  margin:0!important;
  padding:5px 7px!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.70)!important;
  box-shadow:none!important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.location-label{
  font-size:13px!important;
  color:#173257!important;
  font-weight:700!important;
}
.weather-location-line>span{
  font-size:12px!important;
  color:#728094!important;
}
.weather-main{
  min-height:222px!important;
  display:grid!important;
  grid-template-columns:42% 58%!important;
  grid-template-rows:125px auto!important;
  align-items:center!important;
  align-content:center!important;
  padding:2px 7px 0!important;
  gap:0!important;
}
.weather-glyph{
  display:block!important;
  width:94px!important;
  height:86px!important;
  margin:auto!important;
  font-size:0!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  filter:drop-shadow(0 3px 5px rgba(23,47,81,.10));
}
.weather-main>strong{
  display:block!important;
  justify-self:start!important;
  overflow:visible!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  font-size:86px!important;
  line-height:.94!important;
  letter-spacing:-.065em!important;
  color:#102544!important;
  text-shadow:0 2px 0 rgba(255,255,255,.78)!important;
  white-space:nowrap!important;
}
.weather-main>div{
  grid-column:1/-1!important;
  margin-top:-2px!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.weather-main b{
  display:block!important;
  font-size:17px!important;
  line-height:1.35!important;
  letter-spacing:.02em!important;
  color:#173257!important;
}
.weather-main small{
  display:block!important;
  margin-top:6px!important;
  font-size:12px!important;
  line-height:1.5!important;
  color:#425670!important;
}
.location-cta{
  margin:6px auto 0!important;
}

/* vector weather icons instead of emoji */
.weather-card[data-weather="clear"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Ccircle cx='60' cy='48' r='23' fill='%23F7B43B'/%3E%3Cg stroke='%23F7B43B' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M60 8v12M60 76v12M20 48h12M88 48h12M32 20l9 9M79 67l9 9M88 20l-9 9M41 67l-9 9'/%3E%3C/g%3E%3C/svg%3E")!important;
}
.weather-card[data-weather="cloudy"] .weather-glyph,
.weather-card[data-weather="fog"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Ccircle cx='72' cy='33' r='18' fill='%23F7B43B'/%3E%3Cpath d='M26 70c0-14 11-25 25-25 6-11 19-16 31-10 10 5 15 16 12 27 10 2 17 10 17 20H34c-5-3-8-7-8-12Z' fill='%23A9C8E6'/%3E%3C/svg%3E")!important;
}
.weather-card[data-weather="rain"] .weather-glyph,
.weather-card[data-weather="storm"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M22 53c0-13 11-24 24-24 7-11 20-15 31-9 9 5 14 15 12 25 10 3 16 10 16 19H30c-5-3-8-6-8-11Z' fill='%238FB2D5'/%3E%3Cg stroke='%235F88B0' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M42 73l-5 11M60 73l-5 11M78 73l-5 11'/%3E%3C/g%3E%3C/svg%3E")!important;
}
.weather-card[data-weather="snow"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M22 51c0-13 11-24 24-24 7-11 20-15 31-9 9 5 14 15 12 25 10 3 16 10 16 19H30c-5-3-8-6-8-11Z' fill='%23B7CCE0'/%3E%3Cg fill='%237DA2C7'%3E%3Ccircle cx='43' cy='78' r='4'/%3E%3Ccircle cx='62' cy='83' r='4'/%3E%3Ccircle cx='80' cy='76' r='4'/%3E%3C/g%3E%3C/svg%3E")!important;
}

/* Today's Word: same reference feel, no decorative music note */
.daily-card{
  min-height:145px!important;
  background:url('./ui/daily-card.svg') center/cover no-repeat!important;
  border:1px solid #eedfcb!important;
  box-shadow:0 6px 18px rgba(91,76,55,.045)!important;
}
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
.daily-card h2{
  font-size:16px!important;
  margin-bottom:4px!important;
}
.quote-mark{
  display:block!important;
  height:auto!important;
  font-size:24px!important;
  line-height:1!important;
  margin-bottom:2px!important;
}
.daily-message{
  max-width:100%!important;
  font-size:14px!important;
  line-height:1.75!important;
}

@media(max-width:380px){
  .weather-card{min-height:276px!important}
  .weather-main{min-height:212px!important}
  .weather-main>strong{font-size:78px!important}
  .weather-glyph{width:86px!important;height:78px!important}
}


/* ==========================================================
   v12.1.6 — premium photographic weather card
   ========================================================== */
.weather-card{
  min-height:292px!important;
  padding:12px 14px 13px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  text-align:center!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.05) 40%,rgba(255,249,239,.74) 69%,#fff8ef 100%),
    url('./art/weather-sky-premium.webp') center 39%/cover no-repeat!important;
  border:1px solid #eadfce!important;
  box-shadow:0 8px 24px rgba(23,47,81,.07)!important;
}
.weather-card:before,
.weather-card:after{
  content:none!important;
  display:none!important;
}
.weather-location-line{
  min-height:34px!important;
  margin:0 0 6px!important;
  padding:6px 8px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.74)!important;
  border:1px solid rgba(255,255,255,.66)!important;
  box-shadow:0 3px 10px rgba(23,47,81,.05)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}
.location-label{
  font-size:13px!important;
  color:#173257!important;
  font-weight:700!important;
}
.weather-location-line>span{
  font-size:12px!important;
  color:#687990!important;
}
.weather-main{
  min-height:212px!important;
  display:grid!important;
  grid-template-columns:38% 62%!important;
  grid-template-rows:126px auto!important;
  align-items:center!important;
  align-content:center!important;
  gap:0!important;
  padding:1px 6px 0!important;
}
.weather-glyph{
  width:92px!important;
  height:82px!important;
  margin:auto!important;
  font-size:0!important;
  background-position:center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  filter:drop-shadow(0 3px 6px rgba(23,47,81,.08))!important;
}
.weather-main>strong{
  justify-self:start!important;
  overflow:visible!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  font-size:88px!important;
  line-height:.93!important;
  letter-spacing:-.065em!important;
  color:#102544!important;
  white-space:nowrap!important;
  text-shadow:0 2px 0 rgba(255,255,255,.72)!important;
}
.weather-main>div{
  grid-column:1/-1!important;
  margin-top:-3px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.weather-main b{
  display:block!important;
  font-size:17px!important;
  line-height:1.35!important;
  letter-spacing:.02em!important;
  color:#173257!important;
}
.weather-main small{
  display:block!important;
  margin-top:6px!important;
  font-size:12px!important;
  line-height:1.5!important;
  color:#3f536d!important;
}
.location-cta{
  margin:5px auto 0!important;
  min-height:38px!important;
  padding:8px 16px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid #e4ddd3!important;
  box-shadow:0 3px 9px rgba(23,47,81,.06)!important;
  color:#173257!important;
  font-size:13px!important;
  font-weight:700!important;
}

/* clear / cloudy icons remain crisp SVG, but refined */
.weather-card[data-weather="clear"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Ccircle cx='60' cy='48' r='22' fill='%23F6B438'/%3E%3Cg stroke='%23F6B438' stroke-width='4.5' stroke-linecap='round'%3E%3Cpath d='M60 9v11M60 76v11M21 48h11M88 48h11M32 20l8 8M80 68l8 8M88 20l-8 8M40 68l-8 8'/%3E%3C/g%3E%3C/svg%3E")!important;
}
.weather-card[data-weather="cloudy"] .weather-glyph,
.weather-card[data-weather="fog"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Ccircle cx='70' cy='33' r='17' fill='%23F6B438'/%3E%3Cpath d='M25 69c0-13 10-23 23-23 6-10 18-15 29-9 9 5 14 14 12 24 9 2 16 9 16 18H33c-5-2-8-6-8-10Z' fill='%23A8C4E2'/%3E%3C/svg%3E")!important;
}
.weather-card[data-weather="rain"] .weather-glyph,
.weather-card[data-weather="storm"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M23 51c0-13 10-23 23-23 6-10 18-15 29-9 9 5 14 14 12 24 9 2 16 9 16 18H31c-5-2-8-6-8-10Z' fill='%238FAFD0'/%3E%3Cg stroke='%235B83AA' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M43 72l-5 10M61 72l-5 10M79 72l-5 10'/%3E%3C/g%3E%3C/svg%3E")!important;
}
.weather-card[data-weather="snow"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M23 51c0-13 10-23 23-23 6-10 18-15 29-9 9 5 14 14 12 24 9 2 16 9 16 18H31c-5-2-8-6-8-10Z' fill='%23B7CADC'/%3E%3Cg fill='%237B9DBD'%3E%3Ccircle cx='43' cy='78' r='3.5'/%3E%3Ccircle cx='61' cy='82' r='3.5'/%3E%3Ccircle cx='79' cy='77' r='3.5'/%3E%3C/g%3E%3C/svg%3E")!important;
}

/* Today's Word: premium, subtle, no music-note decoration. */
.daily-card{
  min-height:142px!important;
  margin:14px 0 24px!important;
  padding:14px 18px 16px!important;
  border-radius:18px!important;
  background:
    linear-gradient(90deg,rgba(255,249,239,.92),rgba(255,249,239,.82)),
    url('./art/daily-sky-premium.webp') center/cover no-repeat!important;
  border:1px solid #eedfcb!important;
  box-shadow:0 7px 20px rgba(91,76,55,.05)!important;
}
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}
.daily-card h2{
  font-size:16px!important;
  margin-bottom:4px!important;
}
.quote-mark{
  display:block!important;
  height:auto!important;
  font-size:24px!important;
  line-height:1!important;
  margin-bottom:2px!important;
}
.daily-message{
  max-width:100%!important;
  font-size:14px!important;
  line-height:1.75!important;
}

@media(max-width:380px){
  .weather-card{min-height:282px!important}
  .weather-main{min-height:204px!important}
  .weather-main>strong{font-size:80px!important}
  .weather-glyph{width:84px!important;height:76px!important}
}


/* ==========================================================
   v12.1.7 — use the provided sample as the exact weather guide
   ========================================================== */
.home-header .home-greeting{
  max-width:78%;
}
.home-header .home-greeting small{
  display:block;
  margin-bottom:3px;
}
.map-button{
  margin-top:-6px!important;
  align-self:flex-start!important;
}

/* Weather card rebuilt to mirror the provided sample */
.weather-card{
  min-height:296px!important;
  padding:10px 10px 12px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:url('./ui/weather-card-reference.webp') center/cover no-repeat!important;
  border:1px solid #e8dece!important;
  box-shadow:0 7px 20px rgba(23,47,81,.05)!important;
  text-align:center!important;
}
.weather-card::before,
.weather-card::after{
  content:none!important;
  display:none!important;
}
.weather-location-line{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:35px!important;
  margin:0 0 6px!important;
  padding:4px 11px!important;
  border-radius:11px!important;
  background:rgba(236,243,248,.92)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:none!important;
}
.location-label{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#173257!important;
  font-size:13px!important;
  font-weight:700!important;
}
.pin-icon{
  width:14px!important;
  height:14px!important;
  fill:#173257!important;
  flex:none!important;
}
.location-label b{
  font-weight:700!important;
}
.weather-location-line>span{
  font-size:12px!important;
  color:#7b8798!important;
  white-space:nowrap!important;
}

.weather-main{
  min-height:206px!important;
  display:grid!important;
  grid-template-columns:42% 58%!important;
  grid-template-rows:122px auto!important;
  align-items:center!important;
  align-content:center!important;
  gap:0!important;
  padding:4px 8px 0!important;
}
.weather-glyph{
  width:88px!important;
  height:82px!important;
  margin:auto!important;
  font-size:0!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  filter:drop-shadow(0 3px 5px rgba(23,47,81,.08))!important;
}
.weather-main>strong{
  justify-self:start!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  font-size:84px!important;
  line-height:.93!important;
  letter-spacing:-.065em!important;
  color:#102544!important;
  white-space:nowrap!important;
  text-shadow:0 1px 0 rgba(255,255,255,.84)!important;
}
.weather-main>div{
  grid-column:1/-1!important;
  margin-top:-3px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}
.weather-main b{
  display:block!important;
  font-size:17px!important;
  line-height:1.35!important;
  color:#173257!important;
}
.weather-main small{
  display:block!important;
  margin-top:6px!important;
  font-size:12px!important;
  line-height:1.4!important;
  color:#41536a!important;
}

.location-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:8px auto 0!important;
  min-height:0!important;
  padding:10px 18px!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid #e2ddd5!important;
  box-shadow:0 2px 8px rgba(23,47,81,.05)!important;
  color:#173257!important;
  font-size:13px!important;
  font-weight:700!important;
}
.location-cta.hidden{
  display:none!important;
}

/* Weather icons with the same visual language as the sample */
.weather-card[data-weather="clear"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Ccircle cx='65' cy='40' r='22' fill='%23F7B43B'/%3E%3Cg stroke='%23F7B43B' stroke-width='4.3' stroke-linecap='round'%3E%3Cpath d='M65 7v10M65 73v10M32 40h10M88 40h10M41 17l7 7M82 58l7 7M89 17l-7 7M48 58l-7 7'/%3E%3C/g%3E%3C/svg%3E")!important;
}
.weather-card[data-weather="cloudy"] .weather-glyph,
.weather-card[data-weather="fog"] .weather-glyph{
  background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Ccircle cx='67' cy='33' r='17' fill='%23F7B43B'/%3E%3Cpath d='M28 71c0-13 10-23 23-23 6-10 18-15 29-9 9 5 14 14 12 24 9 2 16 9 16 18H35c-5-2-7-5-7-10Z' fill='%23ABC6E4'/%3E%3C/svg%3E\")!important;
}
.weather-card[data-weather="rain"] .weather-glyph,
.weather-card[data-weather="storm"] .weather-glyph{
  background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M27 52c0-13 10-23 23-23 6-10 18-15 29-9 9 5 14 14 12 24 9 2 16 9 16 18H34c-5-2-7-5-7-10Z' fill='%2399B7D5'/%3E%3Cg stroke='%235E84AB' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M46 73l-5 10M63 73l-5 10M80 73l-5 10'/%3E%3C/g%3E%3C/svg%3E\")!important;
}
.weather-card[data-weather="snow"] .weather-glyph{
  background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M27 52c0-13 10-23 23-23 6-10 18-15 29-9 9 5 14 14 12 24 9 2 16 9 16 18H34c-5-2-7-5-7-10Z' fill='%23B8CBDE'/%3E%3Cg fill='%23789CBC'%3E%3Ccircle cx='47' cy='79' r='3.5'/%3E%3Ccircle cx='64' cy='83' r='3.5'/%3E%3Ccircle cx='81' cy='78' r='3.5'/%3E%3C/g%3E%3C/svg%3E\")!important;
}

/* Today's word stays clean and without the music-note icon */
.daily-card{
  min-height:142px!important;
  padding:13px 18px 16px!important;
}
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
}

@media(max-width:380px){
  .weather-main>strong{font-size:80px!important}
  .weather-glyph{width:84px!important;height:78px!important}
}


/* =========================================================
   v12.1.8 — weather matched premium backgrounds
   ========================================================= */

/* User requested exact size */
.home-feature-media{
  width:100%!important;
  aspect-ratio:194 / 170!important;
  border-radius:15px!important;
  position:relative!important;
  overflow:hidden!important;
  background-image:url(./art/rooftop-sunset-v12.png)!important;
  background-size:cover!important;
  background-position:50% 43%!important;
}

/* User requested exact mood-image size */
.mood img{
  width:102px!important;
  height:102px!important;
  object-fit:contain!important;
  margin-bottom:5px!important;
}

/* No screenshot or text is baked into these backgrounds. */
.weather-card{
  min-height:296px!important;
  padding:10px 10px 12px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  text-align:center!important;
  background-color:#f8f5ef!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:cover!important;
  border:1px solid #e8dece!important;
  box-shadow:0 7px 20px rgba(23,47,81,.05)!important;
}
.weather-card::before,
.weather-card::after{
  content:none!important;
  display:none!important;
}

/* Weather-dependent, same-quality high-resolution backgrounds */
.weather-card[data-weather="clear"]{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(255,249,239,.22) 53%,rgba(255,249,239,.84) 84%,#fff8ef 100%),
    url('./weather/bg-clear.webp')!important;
}
.weather-card[data-weather="cloudy"]{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,249,239,.28) 53%,rgba(255,249,239,.86) 84%,#fff8ef 100%),
    url('./weather/bg-cloudy.webp')!important;
}
.weather-card[data-weather="fog"]{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,249,239,.35) 53%,rgba(255,249,239,.88) 84%,#fff8ef 100%),
    url('./weather/bg-fog.webp')!important;
}
.weather-card[data-weather="rain"]{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(246,248,250,.22) 52%,rgba(255,249,239,.88) 84%,#fff8ef 100%),
    url('./weather/bg-rain.webp')!important;
}
.weather-card[data-weather="storm"]{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(239,244,249,.26) 52%,rgba(255,249,239,.90) 84%,#fff8ef 100%),
    url('./weather/bg-storm.webp')!important;
}
.weather-card[data-weather="snow"]{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(250,252,254,.28) 52%,rgba(255,249,239,.90) 84%,#fff8ef 100%),
    url('./weather/bg-snow.webp')!important;
}

/* Before weather is known */
.weather-card:not([data-weather]){
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,249,239,.82)),
    url('./weather/bg-cloudy.webp')!important;
}

/* Current location row – same proportions as the reference */
.weather-location-line{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:35px!important;
  margin:0 0 6px!important;
  padding:4px 11px!important;
  border-radius:11px!important;
  background:rgba(236,243,248,.90)!important;
  border:1px solid rgba(255,255,255,.80)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}
.location-label{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:0!important;
  background:transparent!important;
  color:#173257!important;
  font-size:13px!important;
  font-weight:700!important;
}
.pin-icon{
  width:14px!important;
  height:14px!important;
  fill:#173257!important;
  flex:none!important;
}
.weather-location-line>span{
  font-size:12px!important;
  color:#748197!important;
  white-space:nowrap!important;
}

/* Live weather HTML */
.weather-main{
  min-height:206px!important;
  display:grid!important;
  grid-template-columns:42% 58%!important;
  grid-template-rows:122px auto!important;
  align-items:center!important;
  align-content:center!important;
  gap:0!important;
  padding:4px 8px 0!important;
}
.weather-glyph{
  width:88px!important;
  height:82px!important;
  margin:auto!important;
  font-size:0!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  filter:drop-shadow(0 3px 5px rgba(23,47,81,.08))!important;
}
.weather-main>strong{
  justify-self:start!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  font-size:84px!important;
  line-height:.93!important;
  letter-spacing:-.065em!important;
  color:#102544!important;
  white-space:nowrap!important;
  text-shadow:0 1px 0 rgba(255,255,255,.84)!important;
}
.weather-main>div{
  grid-column:1/-1!important;
  margin-top:-3px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.weather-main b{
  display:block!important;
  font-size:17px!important;
  line-height:1.35!important;
  color:#173257!important;
}
.weather-main small{
  display:block!important;
  margin-top:6px!important;
  font-size:12px!important;
  line-height:1.4!important;
  color:#41536a!important;
}
.location-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:8px auto 0!important;
  padding:10px 18px!important;
  min-height:0!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid #e2ddd5!important;
  box-shadow:0 2px 8px rgba(23,47,81,.05)!important;
  color:#173257!important;
  font-size:13px!important;
  font-weight:700!important;
}
.location-cta.hidden{display:none!important}

/* Refined weather icons, not emoji */
.weather-card[data-weather="clear"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Ccircle cx='65' cy='40' r='22' fill='%23F7B43B'/%3E%3Cg stroke='%23F7B43B' stroke-width='4.3' stroke-linecap='round'%3E%3Cpath d='M65 7v10M65 73v10M32 40h10M88 40h10M41 17l7 7M82 58l7 7M89 17l-7 7M48 58l-7 7'/%3E%3C/g%3E%3C/svg%3E")!important;
}
.weather-card[data-weather="cloudy"] .weather-glyph,
.weather-card[data-weather="fog"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Ccircle cx='67' cy='33' r='17' fill='%23F7B43B'/%3E%3Cpath d='M28 71c0-13 10-23 23-23 6-10 18-15 29-9 9 5 14 14 12 24 9 2 16 9 16 18H35c-5-2-7-5-7-10Z' fill='%23ABC6E4'/%3E%3C/svg%3E")!important;
}
.weather-card[data-weather="rain"] .weather-glyph,
.weather-card[data-weather="storm"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M27 52c0-13 10-23 23-23 6-10 18-15 29-9 9 5 14 14 12 24 9 2 16 9 16 18H34c-5-2-7-5-7-10Z' fill='%2399B7D5'/%3E%3Cg stroke='%235E84AB' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M46 73l-5 10M63 73l-5 10M80 73l-5 10'/%3E%3C/g%3E%3C/svg%3E")!important;
}
.weather-card[data-weather="snow"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M27 52c0-13 10-23 23-23 6-10 18-15 29-9 9 5 14 14 12 24 9 2 16 9 16 18H34c-5-2-7-5-7-10Z' fill='%23B8CBDE'/%3E%3Cg fill='%23789CBC'%3E%3Ccircle cx='47' cy='79' r='3.5'/%3E%3Ccircle cx='64' cy='83' r='3.5'/%3E%3Ccircle cx='81' cy='78' r='3.5'/%3E%3C/g%3E%3C/svg%3E")!important;
}

/* Today's Word follows the current weather. No decorative note/icon. */
.daily-card{
  min-height:142px!important;
  margin:14px 0 24px!important;
  padding:13px 18px 16px!important;
  border-radius:18px!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:cover!important;
  border:1px solid #eedfcb!important;
  box-shadow:0 7px 20px rgba(91,76,55,.05)!important;
}
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}
.daily-card[data-weather="clear"]{
  background-image:linear-gradient(90deg,rgba(255,249,239,.86),rgba(255,249,239,.74)),url('./weather/daily-clear.webp')!important;
}
.daily-card[data-weather="cloudy"]{
  background-image:linear-gradient(90deg,rgba(255,249,239,.88),rgba(255,249,239,.77)),url('./weather/daily-cloudy.webp')!important;
}
.daily-card[data-weather="fog"]{
  background-image:linear-gradient(90deg,rgba(255,249,239,.90),rgba(255,249,239,.80)),url('./weather/daily-fog.webp')!important;
}
.daily-card[data-weather="rain"]{
  background-image:linear-gradient(90deg,rgba(250,249,244,.90),rgba(250,249,244,.82)),url('./weather/daily-rain.webp')!important;
}
.daily-card[data-weather="storm"]{
  background-image:linear-gradient(90deg,rgba(249,248,244,.91),rgba(249,248,244,.84)),url('./weather/daily-storm.webp')!important;
}
.daily-card[data-weather="snow"]{
  background-image:linear-gradient(90deg,rgba(255,252,246,.90),rgba(255,252,246,.82)),url('./weather/daily-snow.webp')!important;
}
.daily-card:not([data-weather]){
  background-image:linear-gradient(90deg,rgba(255,249,239,.88),rgba(255,249,239,.77)),url('./weather/daily-cloudy.webp')!important;
}
.daily-message{
  max-width:100%!important;
}

@media(max-width:380px){
  .weather-main>strong{font-size:80px!important}
  .weather-glyph{width:84px!important;height:78px!important}
  .mood img{width:102px!important;height:102px!important}
}


/* =========================================================
   v12.1.9 — remove duplicated background under weather card
   ========================================================= */

/* Weather remains weather-themed. */
.weather-card{
  background-position:center 43%!important;
}

/* Today's Word is intentionally NOT another weather image. */
.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  min-height:auto!important;
  margin:14px 0 24px!important;
  padding:14px 18px 16px!important;
  border-radius:18px!important;
  background:
    linear-gradient(135deg,#fff1da 0%,#fff8ec 58%,#f7f2e9 100%)!important;
  border:1px solid #eedfcb!important;
  box-shadow:0 6px 18px rgba(91,76,55,.045)!important;
  background-image:linear-gradient(135deg,#fff1da 0%,#fff8ec 58%,#f7f2e9 100%)!important;
}

/* No icon or pseudo-image on Today's Word. */
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}

.daily-card h2{
  color:#173257!important;
}

.quote-mark{
  color:#173257!important;
}

.daily-message{
  max-width:100%!important;
  color:#273b55!important;
}


/* =========================================================
   v12.2.0 — Today's Word matches the reference design
   ========================================================= */

/* Today's Word: scenic background, not plain cream. */
.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  position:relative!important;
  min-height:150px!important;
  margin:14px 0 24px!important;
  padding:14px 72px 16px 18px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(255,249,239,.88) 0%,rgba(255,249,239,.72) 64%,rgba(255,249,239,.40) 100%),
    url('./art/daily-word-premium.webp') center 46%/cover no-repeat!important;
  border:1px solid #eedfcb!important;
  box-shadow:0 6px 18px rgba(91,76,55,.05)!important;
}

/* No music note. Use a small elegant bird, like the reference. */
.daily-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:17px!important;
  top:19px!important;
  width:48px!important;
  height:48px!important;
  opacity:.82!important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M7 39c10-2 19-8 26-19 3 6 4 11 3 16 7-3 13-8 18-15 1 12-5 22-16 29-9 6-20 7-31 4 9-3 17-8 23-15-8 3-16 3-23 0Z' fill='%236F99C2'/%3E%3C/svg%3E")
    center/contain no-repeat!important;
}
.daily-card::after{
  content:none!important;
  display:none!important;
}
.daily-card h2{
  position:relative!important;
  z-index:2!important;
  font-size:16px!important;
  color:#173257!important;
  margin-bottom:4px!important;
}
.quote-mark{
  position:relative!important;
  z-index:2!important;
  color:#173257!important;
  font-size:24px!important;
  line-height:1!important;
  margin-bottom:2px!important;
}
.daily-message{
  position:relative!important;
  z-index:2!important;
  max-width:100%!important;
  font-size:14px!important;
  line-height:1.75!important;
  color:#273b55!important;
}

/* Recommendation card: do not reuse the playlist hero image. */
.home-feature-media{
  width:100%!important;
  aspect-ratio:194 / 170!important;
  border-radius:15px!important;
  position:relative!important;
  overflow:hidden!important;
  background:#dfe9f3!important;
}
.home-feature-media::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,transparent 58%,rgba(20,43,74,.30))!important;
  z-index:1!important;
  pointer-events:none!important;
}
.home-feature-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  position:relative!important;
  z-index:0!important;
}
.round-play{
  z-index:3!important;
}

/* Preserve requested mood image size. */
.mood img{
  width:102px!important;
  height:102px!important;
  object-fit:contain!important;
  margin-bottom:5px!important;
}

@media(max-width:380px){
  .daily-card{
    padding-right:64px!important;
  }
  .daily-card::before{
    width:42px!important;
    height:42px!important;
    right:14px!important;
  }
}


/* =========================================================
   v12.2.1 — clean accidental UI overlays
   ========================================================= */

/* No blue pill behind location/time. */
.weather-location-line{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:5px 4px!important;
}
.location-label,
.location-label b,
.weather-location-line>span{
  text-shadow:0 1px 3px rgba(255,255,255,.94)!important;
}

/* Recommendation image contains no baked-in title. */
.home-feature-media{
  background:none!important;
}
.home-feature-media.reference-art{
  background-image:none!important;
}
.home-feature-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:50% 48%!important;
}

/* Preserve requested sizing */
.home-feature-media{
  width:100%!important;
  aspect-ratio:194 / 170!important;
  border-radius:15px!important;
  position:relative!important;
  overflow:hidden!important;
}
.mood img{
  width:102px!important;
  height:102px!important;
  object-fit:contain!important;
  margin-bottom:5px!important;
}


/* =========================================================
   v12.2.2 — location line exact requested sizing
   ========================================================= */

.location-label,
.location-label b,
.weather-location-line > span{
  text-shadow:none!important;
}

.weather-location-line > span{
  font-size:21px!important;
  color:#ffffff!important;
  white-space:nowrap!important;
}

.pin-icon{
  width:34px!important;
  height:34px!important;
  fill:#3288ff!important;
  flex:none!important;
}


/* =========================================================
   v12.2.3 — clearly recognizable bird icon
   ========================================================= */
.daily-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:15px!important;
  top:16px!important;
  width:54px!important;
  height:54px!important;
  opacity:.86!important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='%236F99C2'%3E%3Cpath d='M10 43c12-1 21-5 29-13 4-4 7-9 9-15 4 7 4 14 1 21 7-4 12-9 16-16 2 12-3 22-13 29-10 8-24 9-42 5 10-2 18-6 25-12-9 3-17 3-25 1Z'/%3E%3Cellipse cx='48' cy='37' rx='10' ry='6' transform='rotate(-14 48 37)'/%3E%3Ccircle cx='58' cy='32' r='5'/%3E%3Cpath d='M63 31l8 2-8 3Z'/%3E%3Cpath d='M39 40l-10 12 16-7Z'/%3E%3C/g%3E%3C/svg%3E")
    center/contain no-repeat!important;
}


/* =========================================================
   v12.2.5 — requested exact sizing + bird image
   ========================================================= */

/* 現在地ラベル */
.location-label{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:0!important;
  background:transparent!important;
  color:#ffffff!important;
  font-size:16px!important;
  font-weight:700!important;
}
.location-label b{
  color:#ffffff!important;
  font-size:16px!important;
  font-weight:700!important;
}

/* 時刻 */
.location-label,
.location-label b,
.weather-location-line>span{
  text-shadow:none!important;
}
.weather-location-line>span{
  font-size:21px!important;
  color:#ffffff!important;
  white-space:nowrap!important;
}

/* ピン */
.pin-icon{
  width:34px!important;
  height:34px!important;
  fill:#3288ff!important;
  flex:none!important;
}

/* 天気アイコン：指定値そのまま */
.weather-glyph{
  width:170px!important;
  height:177px!important;
  margin:auto!important;
  font-size:0!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  filter:drop-shadow(0 3px 5px rgba(23,47,81,.08))!important;
}

/* 今日の一言：SVGの鳥ではなく生成画像を使用 */
.daily-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:12px!important;
  top:12px!important;
  width:78px!important;
  height:78px!important;
  opacity:1!important;
  background:url('./art/daily-bird-image.png') 78% 10%/310px auto no-repeat!important;
  border-radius:50%!important;
}

/* 画像内の鳥だけを見せるため、背景は透過寄りに */
.daily-card::after{
  content:none!important;
  display:none!important;
}


/* v12.2.6 — pin color */
.pin-icon{
  width:34px!important;
  height:34px!important;
  fill:#c13e3e!important;
  flex:none!important;
}


/* =========================================================
   v12.2.7 — real transparent bird image
   ========================================================= */
.daily-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:12px!important;
  top:12px!important;
  width:76px!important;
  height:76px!important;
  opacity:.95!important;
  background:url('./art/daily-bird-image.png') center/contain no-repeat!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.daily-card::after{
  content:none!important;
  display:none!important;
}


/* v12.2.8 — location pin color */
.pin-icon{
  width:34px!important;
  height:34px!important;
  fill:#aa3131!important;
  flex:none!important;
}


/* =========================================================
   v12.2.9 — approved Today's Word background
   ========================================================= */
.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  position:relative!important;
  min-height:150px!important;
  margin:14px 0 24px!important;
  padding:14px 92px 16px 18px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  border:1px solid #eedfcb!important;
  box-shadow:0 6px 18px rgba(91,76,55,.045)!important;
  background:
    linear-gradient(
      90deg,
      rgba(255,249,239,.98) 0%,
      rgba(255,249,239,.95) 42%,
      rgba(255,249,239,.74) 62%,
      rgba(255,249,239,.18) 100%
    ),
    url('./art/daily-word-approved.webp') right center / cover no-repeat!important;
}

/* Bird is already part of the approved background image. */
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}

.daily-card h2,
.quote-mark,
.daily-message{
  position:relative!important;
  z-index:2!important;
}

.daily-card h2{
  color:#173257!important;
}

.quote-mark{
  color:#173257!important;
}

.daily-message{
  max-width:100%!important;
  color:#273b55!important;
  line-height:1.78!important;
}


/* =========================================================
   v12.3.0 — Today's Word background with ZERO baked-in text
   ========================================================= */
.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  position:relative!important;
  min-height:150px!important;
  margin:14px 0 24px!important;
  padding:14px 90px 16px 18px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  border:1px solid #eedfcb!important;
  box-shadow:0 6px 18px rgba(91,76,55,.045)!important;
  background:
    linear-gradient(
      90deg,
      rgba(255,249,239,.99) 0%,
      rgba(255,249,239,.97) 46%,
      rgba(255,249,239,.78) 64%,
      rgba(255,249,239,.16) 100%
    ),
    url('./art/daily-word-clean.webp') right center / cover no-repeat!important;
}

/* No extra bird image / pseudo decoration: bird is in the clean background only */
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}

.daily-card h2,
.quote-mark,
.daily-message{
  position:relative!important;
  z-index:2!important;
}

.daily-message{
  max-width:100%!important;
  color:#273b55!important;
  line-height:1.78!important;
}


/* =========================================================
   v12.3.1 — sharper Today's Word background
   ========================================================= */
.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  min-height:150px!important;
  padding:14px 96px 16px 18px!important;
  background:
    linear-gradient(
      90deg,
      rgba(255,249,239,.995) 0%,
      rgba(255,249,239,.97) 42%,
      rgba(255,249,239,.72) 57%,
      rgba(255,249,239,.22) 71%,
      rgba(255,249,239,0) 100%
    ),
    url('./art/daily-word-clean-v2.webp') right center / cover no-repeat!important;
}

/* Keep the approved bird/background crisp: no extra overlays. */
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

.daily-card h2,
.quote-mark,
.daily-message{
  position:relative!important;
  z-index:2!important;
}

.daily-message{
  color:#213754!important;
  line-height:1.78!important;
}


/* =========================================================
   v12.3.2 — re-cropped Today's Word artwork
   ========================================================= */
.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  position:relative!important;
  min-height:150px!important;
  margin:14px 0 24px!important;
  padding:14px 96px 16px 18px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  border:1px solid #eedfcb!important;
  box-shadow:0 6px 18px rgba(91,76,55,.045)!important;

  background:
    linear-gradient(
      90deg,
      rgba(255,249,239,.995) 0%,
      rgba(255,249,239,.97) 42%,
      rgba(255,249,239,.68) 58%,
      rgba(255,249,239,.18) 72%,
      rgba(255,249,239,0) 100%
    ),
    url('./art/daily-word-clean-v3.webp') right center / cover no-repeat!important;
}

/* No extra overlay/bird layer. */
.daily-card::before,
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}

.daily-card h2,
.quote-mark,
.daily-message{
  position:relative!important;
  z-index:2!important;
}


/* =========================================================
   v12.3.3 — reduce top gap + fix top map button tap
   ========================================================= */
.app-screen{
  padding-top:max(10px, env(safe-area-inset-top))!important;
}
.home-screen{
  padding-top:max(8px, env(safe-area-inset-top))!important;
}
.home-header{
  position:relative!important;
  z-index:20!important;
  padding:2px 3px 16px!important;
  align-items:flex-start!important;
}
.home-greeting{
  position:relative!important;
  z-index:21!important;
}
.avatar-button.map-button,
#topLocationBtn{
  position:relative!important;
  z-index:30!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  min-width:48px!important;
  min-height:48px!important;
  flex:0 0 48px!important;
}
.avatar-button.map-button svg,
#topLocationBtn svg,
.avatar-button.map-button .map-icon,
#topLocationBtn .map-icon{
  pointer-events:none!important;
}
.weather-card{
  position:relative!important;
  z-index:1!important;
}
@media (max-width: 430px){
  .app-screen{
    padding-top:max(6px, env(safe-area-inset-top))!important;
  }
  .home-screen{
    padding-top:max(4px, env(safe-area-inset-top))!important;
  }
  .home-header{
    padding-bottom:14px!important;
  }
}


/* =========================================================
   v12.3.5 — 40px top space + cat-style bird illustration
   ========================================================= */

/* User requested exact top spacing */
.app-screen{
  padding-top:max(40px, env(safe-area-inset-top))!important;
}

/* Today's Word: keep the scenic background, remove old baked-in bird */
.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  position:relative!important;
  min-height:150px!important;
  padding:14px 112px 16px 18px!important;
  background:
    linear-gradient(
      90deg,
      rgba(255,249,239,.995) 0%,
      rgba(255,249,239,.97) 42%,
      rgba(255,249,239,.65) 59%,
      rgba(255,249,239,.12) 76%,
      rgba(255,249,239,0) 100%
    ),
    url('./art/daily-word-clean-nobird.webp') right center/cover no-repeat!important;
}

/* New bird: painterly touch matched to the cat illustration */
.daily-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:8px!important;
  top:4px!important;
  width:128px!important;
  height:112px!important;
  opacity:1!important;
  background:url('./art/daily-bird-catstyle.png') center/contain no-repeat!important;
  border-radius:0!important;
  box-shadow:none!important;
  z-index:3!important;
  pointer-events:none!important;
}
.daily-card::after{
  content:none!important;
  display:none!important;
}

.daily-card h2,
.quote-mark,
.daily-message{
  position:relative!important;
  z-index:4!important;
}

@media(max-width:380px){
  .daily-card{
    padding-right:104px!important;
  }
  .daily-card::before{
    width:116px!important;
    height:104px!important;
    right:6px!important;
    top:7px!important;
  }
}


/* =========================================================
   v12.3.6 — bird size / position refinement
   ========================================================= */
.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  padding-right:92px!important;
}

.daily-card::before{
  width:88px!important;
  height:78px!important;
  right:12px!important;
  top:10px!important;
  background-position:center!important;
  background-size:contain!important;
  transform:none!important;
}

@media(max-width:380px){
  .daily-card{
    padding-right:88px!important;
  }
  .daily-card::before{
    width:82px!important;
    height:74px!important;
    right:10px!important;
    top:10px!important;
  }
}


/* =========================================================
   v12.3.8 — recommendation copy/arrow overlap fix
   ========================================================= */
.home-feature-copy{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 34px!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 3px 4px!important;
}
.home-feature-text{
  min-width:0!important;
}
.home-feature-copy b{
  display:block!important;
  margin:0!important;
  font-size:16px!important;
  line-height:1.45!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.home-feature-copy small{
  display:block!important;
  margin-top:4px!important;
  font-size:13px!important;
  line-height:1.55!important;
  color:var(--muted)!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.feature-arrow{
  position:static!important;
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border:1px solid #e7dfd3!important;
  border-radius:50%!important;
  font-size:24px!important;
  line-height:1!important;
  flex:none!important;
  align-self:center!important;
}


/* =========================================================
   v12.3.9 — clean weather icon + clean daily card visual
   ========================================================= */

/* Weather card: fix icon/text overlap and keep the icon elegant */
.weather-main{
  min-height: 212px !important;
  display: grid !important;
  grid-template-columns: 120px minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
  padding: 12px 10px 6px !important;
}

.weather-glyph{
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 112px !important;
  height: 112px !important;
  margin: 0 auto !important;
  font-size: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 3px 5px rgba(23,47,81,.08)) !important;
}

.weather-main > strong{
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  font-size: 88px !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  color: #102544 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.weather-main > div{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center !important;
}

.weather-main b{
  display:block !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  color: #173257 !important;
}

.weather-main small{
  display:block !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #41536a !important;
}

/* Slightly cleaner weather illustrations */
.weather-card[data-weather="clear"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 110'%3E%3Ccircle cx='60' cy='48' r='26' fill='%23F4B53F'/%3E%3Cg stroke='%23F4B53F' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M60 10v12M60 86v12M22 48h12M86 48h12M33 21l8 8M79 67l8 8M87 21l-8 8M41 67l-8 8'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.weather-card[data-weather="cloudy"] .weather-glyph,
.weather-card[data-weather="fog"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 110'%3E%3Ccircle cx='84' cy='33' r='19' fill='%23F4B53F'/%3E%3Cpath d='M35 76c0-15 12-27 27-27 7-11 20-17 33-10 10 5 17 15 16 28 10 2 18 10 18 20H43c-5 0-8-5-8-11Z' fill='%23A7C1E0'/%3E%3C/svg%3E") !important;
}
.weather-card[data-weather="rain"] .weather-glyph,
.weather-card[data-weather="storm"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 110'%3E%3Cpath d='M35 58c0-15 12-27 27-27 7-11 20-17 33-10 10 5 17 15 16 28 10 2 18 10 18 20H43c-5 0-8-5-8-11Z' fill='%23A2BDD8'/%3E%3Cg stroke='%235F87AF' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M54 82l-6 12M74 82l-6 12M94 82l-6 12'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.weather-card[data-weather="snow"] .weather-glyph{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 110'%3E%3Cpath d='M35 58c0-15 12-27 27-27 7-11 20-17 33-10 10 5 17 15 16 28 10 2 18 10 18 20H43c-5 0-8-5-8-11Z' fill='%23B8CBDE'/%3E%3Cg fill='%23789CBC'%3E%3Ccircle cx='56' cy='88' r='4'/%3E%3Ccircle cx='74' cy='94' r='4'/%3E%3Ccircle cx='92' cy='88' r='4'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Today's Word: remove strange bird overlay and keep a clean scenic crop */
.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  min-height: 156px !important;
  padding: 16px 20px 18px !important;
  background:
    linear-gradient(90deg,
      rgba(255,250,242,.98) 0%,
      rgba(255,250,242,.94) 46%,
      rgba(255,250,242,.72) 66%,
      rgba(255,250,242,.24) 84%,
      rgba(255,250,242,.06) 100%),
    url('./art/daily-word-clean-nobird.webp') right center/cover no-repeat !important;
  border:1px solid #eedfcb !important;
  box-shadow:0 6px 18px rgba(91,76,55,.05) !important;
  overflow:hidden !important;
}

.daily-card::before,
.daily-card::after{
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

.daily-card h2,
.quote-mark,
.daily-message{
  position: relative !important;
  z-index: 2 !important;
}

.daily-message{
  max-width: 100% !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: #273b55 !important;
}

@media (max-width: 430px){
  .weather-main{
    grid-template-columns: 104px minmax(0,1fr) !important;
    min-height: 196px !important;
    padding: 10px 8px 4px !important;
  }
  .weather-glyph{
    width: 96px !important;
    height: 96px !important;
  }
  .weather-main > strong{
    font-size: 76px !important;
  }
}


/* =========================================================
   v12.4.0 — keep bird, fit completely inside Today's Word
   ========================================================= */

.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  position:relative!important;
  overflow:hidden!important;
  min-height:156px!important;
  padding:16px 112px 18px 20px!important;

  background:
    linear-gradient(
      90deg,
      rgba(255,250,242,.98) 0%,
      rgba(255,250,242,.94) 46%,
      rgba(255,250,242,.70) 66%,
      rgba(255,250,242,.20) 84%,
      rgba(255,250,242,.04) 100%
    ),
    url('./art/daily-word-clean-nobird.webp') right center / cover no-repeat!important;
}

/* Keep the bird. Entire silhouette stays inside the card. */
.daily-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;

  top:12px!important;
  right:22px!important;

  width:78px!important;
  height:78px!important;

  background:
    url('./art/daily-bird-catstyle.png')
    center center / contain
    no-repeat!important;

  opacity:1!important;
  z-index:2!important;
  pointer-events:none!important;

  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
}

/* No second decorative layer. */
.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}

.daily-card h2,
.daily-card .quote-mark,
.daily-card .daily-message{
  position:relative!important;
  z-index:3!important;
}

.daily-card .daily-message{
  max-width:100%!important;
}

/* Narrow iPhones */
@media(max-width:380px){
  .daily-card{
    padding-right:100px!important;
  }

  .daily-card::before{
    width:70px!important;
    height:70px!important;
    right:18px!important;
    top:12px!important;
  }
}


/* =========================================================
   v12.4.2 — clean bird + clean background + weather overlap fix
   ========================================================= */

/* -------- WEATHER: icon and temperature never overlap -------- */
.weather-main{
  min-height:212px!important;
  display:grid!important;
  grid-template-columns:120px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:8px!important;
  row-gap:5px!important;
  padding:12px 10px 6px!important;
}

.weather-glyph{
  grid-column:1!important;
  grid-row:1!important;
  width:108px!important;
  height:108px!important;
  margin:0 auto!important;
  font-size:0!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  filter:drop-shadow(0 3px 5px rgba(23,47,81,.08))!important;
}

.weather-main > strong{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  margin:0!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  font-size:88px!important;
  line-height:.92!important;
  letter-spacing:-.06em!important;
  color:#102544!important;
  white-space:nowrap!important;
}

.weather-main > div{
  grid-column:1/-1!important;
  grid-row:2!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  background:transparent!important;
}

.weather-main b{
  display:block!important;
  font-size:18px!important;
  line-height:1.35!important;
  color:#173257!important;
}

.weather-main small{
  display:block!important;
  margin-top:6px!important;
  font-size:13px!important;
  line-height:1.45!important;
  color:#41536a!important;
}

/* -------- DAILY: clean scene + complete bird -------- */
.daily-card,
.daily-card[data-weather="clear"],
.daily-card[data-weather="cloudy"],
.daily-card[data-weather="fog"],
.daily-card[data-weather="rain"],
.daily-card[data-weather="storm"],
.daily-card[data-weather="snow"],
.daily-card:not([data-weather]){
  position:relative!important;
  min-height:156px!important;
  overflow:hidden!important;
  padding:16px 112px 18px 20px!important;

  background:
    linear-gradient(
      90deg,
      rgba(255,250,242,.995) 0%,
      rgba(255,250,242,.97) 45%,
      rgba(255,250,242,.72) 63%,
      rgba(255,250,242,.18) 82%,
      rgba(255,250,242,0) 100%
    ),
    url('./art/daily-word-sunset-clean.webp')
    right center / cover no-repeat!important;

  border:1px solid #eedfcb!important;
  box-shadow:0 6px 18px rgba(91,76,55,.05)!important;
}

/* Complete bird, with whole body/tail/wings visible */
.daily-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:13px!important;
  right:16px!important;

  width:92px!important;
  height:92px!important;

  background:
    url('./art/daily-bird-full.png')
    center center / contain no-repeat!important;

  opacity:1!important;
  z-index:2!important;
  pointer-events:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
}

.daily-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

.daily-card h2,
.daily-card .quote-mark,
.daily-card .daily-message{
  position:relative!important;
  z-index:3!important;
}

.daily-card .daily-message{
  max-width:100%!important;
  line-height:1.82!important;
}

/* Narrow phones */
@media(max-width:430px){
  .weather-main{
    grid-template-columns:104px minmax(0,1fr)!important;
    min-height:198px!important;
    padding:10px 8px 5px!important;
  }

  .weather-glyph{
    width:96px!important;
    height:96px!important;
  }

  .weather-main > strong{
    font-size:76px!important;
  }

  .daily-card{
    padding-right:104px!important;
  }

  .daily-card::before{
    width:84px!important;
    height:84px!important;
    right:14px!important;
    top:14px!important;
  }
}