@font-face { font-family:"Yomogi"; src:url("./fonts/Yomogi-ui.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
:root { color-scheme: light; --ink:#292e29; --muted:#656b63; --paper:#f7f8f5; --line:#dde1d8; --accent:#d5e66c; --olive:#647224; font-family:"Manrope","Zen Kaku Gothic New","Hiragino Sans",sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-weight:400; }
button { font:inherit; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
a { color:inherit; }
button:disabled { cursor:wait; opacity:.5; }
::selection { background:var(--accent); }
:focus-visible { outline:2px solid var(--olive); outline-offset:4px; }
.topbar { height:68px; margin:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:18px; font-weight:600; letter-spacing:.04em; text-decoration:none; }
.brand-icon { display:block; width:40px; height:58px; flex:none; overflow:visible; }
.brand-icon img { display:block; width:40px; height:60px; max-width:none; object-fit:contain; transform-origin:50% 80%; transition:transform .3s ease; }
.brand:hover .brand-icon img { transform:rotate(-6deg); }
.brand-word { white-space:nowrap; }
@media (prefers-reduced-motion:reduce) { .brand-icon img { transition:none; } }
.day-meta { display:flex; align-items:center; gap:10px; }
.day-orb { position:relative; display:block; width:36px; height:36px; flex:none; color:#c69a3e; transition:color .4s ease; }
.day-orb.is-night { color:#667584; }
.day-orb > span { position:absolute; inset:0; display:grid; place-items:center; font-family:Georgia,serif; font-size:22px; line-height:1; transition:opacity .4s ease,transform .4s ease; }
.orb-moon,.day-orb.is-night .orb-sun { opacity:0; transform:rotate(-35deg) scale(.7); }
.day-orb.is-night .orb-moon { opacity:1; transform:rotate(0) scale(1); font-size:27px; }
.sun-icon { display:block; width:40px; height:40px; overflow:visible; }
.sun-core { fill:#e6a335; filter:drop-shadow(0 0 2px #e9ba5b70); }
.sun-heat path { fill:none; stroke:#d89630; stroke-width:2.4; stroke-linecap:round; opacity:.9; transform-box:fill-box; transform-origin:center; vector-effect:non-scaling-stroke; }
.day-orb:not(.is-night,.is-cloudy,.is-rainy,.is-snowy) .sun-heat path { animation:sun-heat-breathe 2.5s ease-in-out infinite; }
.orb-moon::before,.orb-moon::after { content:"✦"; position:absolute; color:#a2acc5; font-family:Georgia,serif; font-size:12px; line-height:1; opacity:0; }
.orb-moon::before { top:-3px; right:-6px; animation:moon-sparkle 3.2s ease-in-out infinite; }
.orb-moon::after { bottom:0; left:-6px; font-size:8px; animation:moon-sparkle 3.2s ease-in-out 1.5s infinite; }
.weather-icon { position:absolute; inset:-2px; width:40px; height:40px; overflow:visible; opacity:0; transform:scale(.8); transition:opacity .35s ease,transform .35s ease; pointer-events:none; }
.cloud-shape { fill:#e9eeec; stroke:#788b90; stroke-width:2.2; stroke-linejoin:round; }
.orb-rain .cloud-shape,.orb-snow .cloud-shape { fill:#dfe8e9; }
.rain-drops { fill:none; stroke:#568baa; stroke-width:2.6; stroke-linecap:round; }
.snowflakes { fill:#9ab6c8; }
.day-orb:is(.is-cloudy,.is-rainy,.is-snowy) > .orb-sun,.day-orb:is(.is-cloudy,.is-rainy,.is-snowy) > .orb-moon { opacity:0; }
.day-orb.is-cloudy > .orb-cloud,.day-orb.is-rainy > .orb-rain,.day-orb.is-snowy > .orb-snow { opacity:1; transform:scale(1); }
.day-orb.is-rainy .rain-drops { animation:rain-fall 1.6s ease-in-out infinite; }
.day-orb.is-snowy .snowflakes { animation:snow-fall 2.5s ease-in-out infinite; }
@keyframes sun-heat-breathe { 0%,100% { transform:scale(.72); } 50% { transform:scale(1.36); } }
@keyframes moon-sparkle { 0%,28%,72%,100% { transform:scale(.6); opacity:0; } 46%,54% { transform:scale(1); opacity:.9; } }
@keyframes rain-fall { 0%,100% { transform:translateY(-1px); opacity:.65; } 50% { transform:translateY(2px); opacity:1; } }
@keyframes snow-fall { 0%,100% { transform:translateY(-1px); } 50% { transform:translateY(1px); } }
@media (prefers-reduced-motion:reduce) { .day-orb,.day-orb > span,.weather-icon { transition:none; } .day-orb > span,.sun-heat path,.orb-moon::before,.orb-moon::after,.rain-drops,.snowflakes { animation:none; } .sun-heat path { transform:none; } .orb-moon::before { opacity:.7; } }
.clock { margin:0; font-size:17px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.app-shell { width:100%; max-width:1800px; margin:auto; display:grid; grid-template-columns:minmax(330px,32%) minmax(0,1fr); gap:34px; padding:24px 32px; }
.control-panel { min-width:0; padding:4px 12px 12px 0; }
.edition-note { display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:12px; color:var(--muted); letter-spacing:.08em; }
.edition-note span:first-child { color:var(--ink); font-size:14px; font-weight:600; }
.edition-note span+span { padding-left:12px; border-left:1px solid var(--line); }
.eyebrow { font-size:12px; letter-spacing:.12em; color:var(--muted); margin:0 0 12px; font-weight:500; }
h1 { font-family:"Zen Kaku Gothic New",sans-serif; font-size:clamp(30px,3.05vw,48px); line-height:1.4; font-weight:500; letter-spacing:-.045em; margin:0; }
h1 span { color:var(--olive); }
.intro>p:last-child { font-size:16px; line-height:1.8; color:var(--muted); margin:14px 0 0; }
.mood-visual { display:none; }
.mood-picker { border:0; margin:20px 0 16px; padding:0; }
.mood-picker legend { padding:0; margin-bottom:12px; font-size:14px; font-weight:500; }
.mood-grid { display:flex; flex-wrap:wrap; gap:8px; }
.mood-chip { display:flex; gap:5px; align-items:center; min-height:42px; padding:8px 13px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); font-size:14px; transition:background .18s,border-color .18s; }
.mood-chip span { font-family:sans-serif; font-size:17px; width:18px; text-align:center; }
.mood-chip:hover { background:#eef1e8; border-color:#a6af99; }
.mood-chip.is-active { color:var(--ink); background:var(--accent); border-color:var(--accent); font-weight:600; }
.location-box { display:flex; flex-direction:column; gap:10px; padding:13px 0; border-block:1px solid var(--line); }
.location-label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.location-box strong { display:block; font-weight:500; font-size:16px; }
.location-box small { display:block; color:var(--muted); margin-top:4px; font-size:12px; }
.location-actions { display:flex; gap:8px; }
.locate-button,.adjust-button { min-height:40px; font-size:14px; border:1px solid var(--line); border-radius:7px; padding:8px 14px; color:var(--ink); background:#fff; }
.locate-button:hover,.adjust-button:hover { border-color:var(--olive); background:#f0f3e7; }
.range-picker { display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin-top:17px; }
.range-picker>span { width:100%; font-size:12px; color:var(--muted); margin-bottom:4px; }
.range-picker button { min-height:36px; border:1px solid transparent; border-radius:6px; padding:6px 9px; font-size:14px; color:var(--muted); background:transparent; }
.range-picker button:hover { background:#ecefe6; }
.range-picker button.is-active { background:#e9eddf; border-color:#d2dac1; color:#46532e; }
.action-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:21px; }
.primary-button { min-height:46px; border:0; border-radius:8px; background:var(--ink); color:#fff; font-weight:500; padding:11px 20px; font-size:14px; transition:background .18s; }
.primary-button:hover { background:#46532e; }
.status { font-size:14px; line-height:1.7; color:var(--muted); margin:12px 0 0; }
.result-panel { min-width:0; min-height:0; display:grid; grid-template-rows:minmax(125px,23%) minmax(180px,29%) auto minmax(0,1fr); border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.moment-photo { position:relative; overflow:hidden; min-height:125px; background:#dbe5d2; }
.moment-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.moment-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(21,41,30,.33),transparent 52%); pointer-events:none; }
.moment-photo-label { position:absolute; z-index:1; bottom:14px; left:20px; color:#fff; font-size:14px; font-weight:500; letter-spacing:.05em; text-shadow:0 1px 6px #14251a99; }
.map-wrap { position:relative; min-height:180px; background:#e9eee5; border-bottom:1px solid var(--line); }
#map { width:100%; height:100%; min-height:180px; }
.leaflet-container { font-family:inherit; background:#e9eee5; }
.leaflet-tile-pane { filter:saturate(.32) contrast(.94); }
.leaflet-control-attribution { font-size:10px; background:rgba(255,255,255,.9)!important; }
.leaflet-bar { border:1px solid var(--line)!important; box-shadow:0 2px 8px #292e2910!important; }
.leaflet-bar a { color:var(--ink)!important; }
.map-label { position:absolute; top:18px; left:18px; z-index:500; display:flex; gap:8px; align-items:center; padding:9px 14px; border:1px solid #fff; border-radius:8px; background:rgba(255,255,255,.94); color:var(--muted); font-size:12px; box-shadow:0 4px 20px #292e2910; }
.map-label span { color:var(--ink); font-size:18px; font-weight:600; }
.spot-marker { display:grid!important; place-items:center; border:1px solid #c9d2bc; border-radius:50%; background:#fff; box-shadow:0 3px 10px #292e2920; font-size:18px; }
.location-marker { display:grid!important; place-items:center; background:transparent; border:0; }
.location-halo { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#3988ed30; }
.location-dot { display:block; width:19px; height:19px; border:3px solid #fff; border-radius:50%; background:#2582e7; box-shadow:0 1px 8px #164a8155; }
.location-marker.is-demo .location-halo { background:#5d70612a; }
.location-marker.is-demo .location-dot { background:#5d7061; }
.map-wrap.is-adjusting { outline:3px solid var(--olive); outline-offset:-3px; }
.map-wrap.is-adjusting::after { content:"正しい位置をタップ"; position:absolute; z-index:600; bottom:18px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; border-radius:7px; padding:9px 16px; font-size:14px; pointer-events:none; white-space:nowrap; }
.results-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:19px 24px 17px; }
.results-head .eyebrow { font-size:12px; letter-spacing:.04em; margin-bottom:6px; }
.results-head h2 { font-size:clamp(21px,2vw,28px); font-weight:500; line-height:1.4; letter-spacing:-.02em; margin:0; }
.icon-button { width:38px; height:38px; flex-shrink:0; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:22px; }
.icon-button:hover { background:#f0f3e7; }
.recommendations { min-height:0; overflow-y:auto; padding:0 24px 18px; scrollbar-width:thin; scrollbar-color:#c0c9b1 transparent; }
.result-card { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:14px; border-top:1px solid var(--line); padding:17px 0; animation:appear .28s ease both; }
.card-index { font-size:12px; color:#747b6e; margin-bottom:7px; text-align:center; font-variant-numeric:tabular-nums; }
.card-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#f1f4ea; font-size:20px; }
.card-main { min-width:0; }
.card-topline { display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:12px; color:var(--muted); }
.card-kind { letter-spacing:.09em; }
.card-distance::before { content:"·"; margin-right:9px; color:#a8afa0; }
.card-time { padding:2px 7px; border-radius:4px; background:#edf2df; color:#5e6c47; font-size:11px; letter-spacing:0; white-space:nowrap; }
.card-time[hidden] { display:none; }
.card-name { font-size:18px; line-height:1.5; font-weight:500; letter-spacing:-.015em; margin:4px 0; overflow-wrap:anywhere; }
.card-action { font-size:16px; line-height:1.65; margin:0; color:#4e5749; }
.card-address { margin:6px 0 0; font-size:12px; color:var(--muted); line-height:1.5; }
.empty-state { padding:24px 0; font-size:16px; line-height:1.8; color:var(--muted); }
.skeleton-card div { height:40px; background:#eef1e9; border-radius:6px; animation:pulse 1s ease-in-out infinite alternate; }
.skeleton-card div:nth-child(2) { height:65px; }
footer { padding:18px 32px; display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
footer a { text-underline-offset:3px; }
@keyframes appear { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { to { opacity:.45; } }
@media (min-width:981px) {
  .app-shell { height:calc(100svh - 68px); min-height:610px; }
  .control-panel { overflow-y:auto; scrollbar-width:thin; }
}
@media (min-width:981px) and (max-height:800px) {
  .app-shell { padding-block:18px; }
  .edition-note { margin-bottom:12px; }
  h1 { font-size:clamp(30px,2.65vw,40px); line-height:1.35; }
  .intro>p:last-child { display:none; }
  .mood-picker { margin-block:18px 15px; }
  .location-box { padding-block:12px; gap:8px; }
  .mood-chip { min-height:38px; padding:6px 10px; }
  .range-picker { margin-top:12px; }
  .action-row { margin-top:14px; }
}
@media (max-width:980px) {
  .app-shell { grid-template-columns:1fr; padding:20px 24px; gap:20px; }
  .control-panel { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; padding:0; }
  .intro { grid-column:1; grid-row:1 / 4; }
  .mood-picker { margin:0 0 14px; }
  .location-box,.range-picker { grid-column:2; }
  .action-row,.status { grid-column:1 / -1; }
  .result-panel { height:740px; grid-template-rows:145px 205px auto minmax(0,1fr); }
}
@media (max-width:580px) {
  .topbar { height:58px; margin-inline:18px; }
  .brand { font-size:16px; }
  .clock { font-size:15px; }
  .app-shell { padding:18px; gap:18px; }
  .control-panel { display:block; }
  .edition-note { margin-bottom:8px; }
  .intro .eyebrow { display:none; }
  h1 { font-size:30px; line-height:1.3; }
  h1 br { display:none; }
  h1 span { display:inline-block; }
  .intro>p:last-child { display:none; }
  .intro>p:last-child br { display:none; }
  .mood-picker { margin:18px 0 14px; }
  .mood-grid { gap:6px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:#c0c9b1 transparent; }
  .mood-chip { flex:0 0 auto; }
  .mood-chip { padding:7px 10px; min-height:40px; }
  .location-box { padding-block:11px; gap:10px; }
  .location-box>div:first-child { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px; }
  .location-label { margin:0; }
  .location-box small { grid-column:1 / -1; }
  .location-actions { width:100%; }
  .locate-button,.adjust-button { flex:1; }
  .range-picker { margin-top:12px; gap:3px; }
  .range-picker button { padding-inline:7px; }
  .action-row { margin-top:14px; gap:15px; }
  .status { margin-top:9px; }
  .result-panel { height:680px; border-radius:12px; grid-template-rows:120px 175px auto minmax(0,1fr); }
  .moment-photo-label { left:14px; bottom:10px; font-size:12px; }
  .results-head { padding:15px 16px; }
  .recommendations { padding-inline:16px; }
  .result-card { grid-template-columns:32px minmax(0,1fr); gap:11px; }
  .card-icon { width:32px; height:34px; font-size:18px; }
  .card-name { font-size:17px; }
  footer { padding:18px; flex-direction:column; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* A lived-in photograph sets the scene; the product stays immediately usable. */
.app-shell { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:20px 32px 26px; }
.hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,48%); min-height:450px; overflow:hidden; border-radius:14px; background:#c7d9c4; }
.hero-photo,.hero-photo img { position:absolute; inset:0; width:100%; height:100%; }
.hero-photo img { display:block; object-fit:cover; object-position:left center; }
.hero::before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(0deg,rgba(16,37,31,.45),transparent 43%); pointer-events:none; }
.intro { position:absolute; z-index:2; left:clamp(28px,4vw,68px); bottom:clamp(26px,4vw,52px); max-width:45%; color:#fff; }
.intro .edition-note,.intro .eyebrow,.intro>p:last-child { color:#fff; }
.intro .edition-note { margin-bottom:15px; }
.intro .edition-note span:first-child { color:#fff; }
.intro .edition-note span+span { border-color:#ffffff70; }
.intro .eyebrow { letter-spacing:.2em; margin-bottom:13px; }
.intro h1 { font-size:clamp(34px,3.9vw,58px); line-height:1.34; text-shadow:0 2px 20px #15271d30; }
.intro h1 span { color:#fff; }
.intro>p:last-child { margin-top:13px; font-size:14px; line-height:1.75; text-shadow:0 1px 8px #15271d55; }
.hero-note { position:absolute; z-index:3; top:9px; right:40px; width:314px; margin:0; padding:10px 14px 11px; transform:rotate(3deg); border-radius:8px 16px 10px 14px; background:#fff9dbf0; box-shadow:0 7px 24px #14291d22; color:#36523d; font-family:"Yomogi","Hiragino Maru Gothic ProN",cursive; font-size:17px; line-height:1.43; letter-spacing:-.055em; white-space:nowrap; pointer-events:none; }
.hero-note .note-music { color:#db704c; font-size:1.3em; line-height:0; }
.note-mobile { display:none; }
.control-panel { position:relative; z-index:2; grid-column:2; width:calc(100% - 44px); max-width:570px; margin:22px 22px 22px auto; padding:102px 25px 16px; overflow:visible; border:1px solid #ffffffcc; border-radius:11px; background:#fcfdf9f5; box-shadow:0 18px 46px #162a2022; }
.profile-picker { display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:9px; min-width:0; margin:0 0 13px; }
.profile-picker h2 { margin:0; color:var(--ink); font-size:18px; font-weight:700; letter-spacing:-.04em; white-space:nowrap; }
.choice-groups { display:grid; grid-template-columns:minmax(0,2.35fr) minmax(126px,1fr); align-items:start; gap:8px; margin-bottom:10px; }
.mood-picker,.place-picker { min-width:0; margin:0; padding:0; border:0; }
.place-picker { padding-top:35px; }
.mood-picker legend { min-height:27px; margin-bottom:8px; padding:0; color:var(--ink); font-size:18px; font-weight:700; letter-spacing:-.04em; }
.mood-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.mood-chip { width:100%; min-width:0; min-height:38px; padding:5px; font-size:12px; border-radius:6px; background:#fff; white-space:nowrap; text-align:left; line-height:1.25; transition:transform .22s cubic-bezier(.2,.75,.3,1),background .22s,border-color .22s,box-shadow .22s; }
.mood-chip span { flex:none; width:16px; font-size:16px; }
.mood-chip.is-active { background:#dfeea5; border-color:#a9c158; box-shadow:inset 0 0 0 1px #b6ca6b,0 3px 9px #738d4230; animation:chip-settle .24s ease-out; }
.place-grid { display:grid; gap:6px; }
.place-chip { display:flex; align-items:center; gap:6px; width:100%; height:38px; min-height:38px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:#f0f4ec; color:#455446; font-size:13px; text-align:left; white-space:nowrap; transition:transform .22s cubic-bezier(.2,.75,.3,1),background .22s,border-color .22s,box-shadow .22s; }
.place-chip span { flex:none; width:18px; font-size:16px; text-align:center; }
.place-chip:hover { background:#e5eddf; border-color:#b7c3aa; }
.place-chip.is-active { background:#d9e9d2; border-color:#8dad7c; color:#243c2d; font-weight:700; box-shadow:inset 0 0 0 1px #a8c69a,0 3px 9px #6d9c6830; animation:chip-settle .24s ease-out; }
@media (hover:hover) { .mood-chip:hover,.place-chip:hover { transform:translateY(-2px); box-shadow:0 6px 14px #354b3422; } }
.mood-chip:active,.place-chip:active { transform:scale(.97); }
@keyframes chip-settle { from { transform:scale(.96); } to { transform:scale(1); } }
@media (min-width:681px) and (max-width:1100px) { .choice-groups { grid-template-columns:1fr; gap:10px; } .place-picker { padding-top:0; } .place-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.mood-text-row { display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:6px 9px; margin-bottom:8px; }
.mood-text-row label { color:var(--muted); font-size:12px; font-weight:600; white-space:nowrap; }
.mood-text-row input,.profile-fields select { min-width:0; width:100%; height:34px; padding:5px 9px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); font:inherit; font-size:13px; transition:border-color .2s,box-shadow .2s,background .2s; }
.mood-text-row input:focus,.profile-fields select:focus { border-color:#9aac72; box-shadow:0 0 0 3px #b4cb8b3b; background:#fffefa; outline:0; }
.mood-text-row input::placeholder { color:#9b9f98; }
.mood-feedback { display:none; grid-column:2; margin:0; color:#53663b; font-size:11px; line-height:1.4; }
.mood-feedback:not(:empty) { display:block; }
.profile-fields { display:grid; grid-template-columns:1fr 1fr; gap:6px; min-width:0; }
.location-box { flex-direction:row; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; }
.location-box strong { font-size:15px; }
.location-actions { flex-shrink:0; }
.locate-button,.adjust-button { min-height:35px; padding:6px 9px; font-size:12px; }
.locate-button::before { content:"📍"; display:inline-block; margin-right:5px; font-size:14px; line-height:1; vertical-align:-1px; }
.range-picker { display:block; margin-top:10px; }
.range-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.range-head label { color:var(--muted); font-size:12px; font-weight:600; }
.range-head output { color:#3d573b; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.radius-slider { appearance:none; display:block; width:100%; height:6px; margin:0; border:0; border-radius:99px; background:linear-gradient(90deg,#a5c55c 0 var(--progress,25%),#e4e9dc var(--progress,25%) 100%); cursor:pointer; }
.radius-slider::-webkit-slider-thumb { appearance:none; width:20px; height:20px; border:3px solid #fff; border-radius:50%; background:#5e763d; box-shadow:0 1px 7px #30442d50; }
.radius-slider::-moz-range-thumb { width:14px; height:14px; border:3px solid #fff; border-radius:50%; background:#5e763d; box-shadow:0 1px 7px #30442d50; }
.range-ticks { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); margin-top:9px; color:#71786e; font-size:11px; font-variant-numeric:tabular-nums; }
.range-ticks span { text-align:center; }
.range-ticks span:first-child { text-align:left; }
.range-ticks span:last-child { text-align:right; }
.range-note { display:block; margin-top:5px; color:var(--muted); font-size:11px; line-height:1.4; }
.range-note:empty { display:none; }
.action-row { margin-top:13px; }
.primary-button { min-height:42px; padding:9px 18px; background:#2f503d; box-shadow:0 4px 12px #23453027; transition:transform .22s,background .22s,box-shadow .22s; }
.primary-button:hover { background:#1d3c2b; }
.primary-button:active { transform:translateY(1px) scale(.99); box-shadow:0 2px 5px #23453024; }
.status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.status.is-visible { position:static; width:auto; height:auto; margin:8px 0 0; overflow:visible; clip-path:none; white-space:normal; color:#a54b39; font-size:13px; line-height:1.5; }
.result-panel { height:305px; min-height:0; display:grid; grid-template-columns:minmax(280px,38%) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); border-radius:12px; }
.map-wrap { grid-column:1; grid-row:1 / 3; min-height:0; border-right:1px solid var(--line); border-bottom:0; }
#map { min-height:0; }
.results-head { grid-column:2; grid-row:1; padding:14px 22px 10px; }
.results-head .eyebrow { margin-bottom:2px; }
.results-head h2 { font-size:22px; }
.recommendations { grid-column:2; grid-row:2; padding:0 22px 14px; }
.result-card { padding:10px 0; }
.card-name { font-size:16px; margin:1px 0; }
.card-action { font-size:13px; line-height:1.4; }
.card-address { margin-top:3px; }
.map-label { top:14px; left:14px; }
@media (min-width:981px) {
  .app-shell { height:auto; min-height:0; }
}
@media (max-width:980px) {
  .app-shell { display:grid; padding:16px 24px 24px; gap:14px; }
  .hero { grid-template-columns:minmax(0,1fr) minmax(0,52%); min-height:500px; }
  .intro { grid-column:auto; grid-row:auto; max-width:43%; }
  .hero-note { top:8px; right:31px; width:265px; font-size:15px; }
  .control-panel { display:block; width:calc(100% - 36px); margin:18px 18px 18px auto; padding:100px 18px 18px; }
  .location-box { flex-direction:column; align-items:stretch; }
  .result-panel { height:330px; grid-template-columns:38% 62%; grid-template-rows:auto minmax(0,1fr); }
}
@media (max-width:680px) {
  .topbar { height:58px; margin-inline:18px; padding-top:0; align-items:center; }
  .day-meta { position:static; gap:10px; }
  .day-orb { width:34px; height:34px; }
  .sun-icon { width:38px; height:38px; }
  .day-orb > span { font-size:19px; }
  .weather-icon { width:38px; height:38px; }
  .day-orb.is-night .orb-moon { font-size:25px; }
  .clock { position:static; font-size:15px; }
  .app-shell { padding:12px 14px 22px; }
  .hero { display:flex; flex-direction:column; overflow:visible; min-height:0; border-radius:0; background:transparent; }
  .hero-photo { position:relative; height:255px; flex:none; overflow:hidden; border-radius:12px; }
  .hero-photo img { object-position:left center; }
  .hero::before { inset:0 0 auto; height:255px; border-radius:12px; background:linear-gradient(0deg,rgba(16,37,31,.58),transparent 65%); }
  .intro { position:absolute; top:0; bottom:auto; left:0; width:100%; max-width:none; height:255px; display:flex; flex-direction:column; justify-content:end; padding:18px; }
  .intro .edition-note { margin-bottom:6px; font-size:11px; }
  .intro .edition-note span:first-child { font-size:12px; }
  .intro .eyebrow,.intro>p:last-child { display:none; }
  .intro h1 { font-size:clamp(27px,7vw,36px); line-height:1.3; }
  .intro h1 br { display:initial; }
  .intro h1 span { display:inline; }
  .hero-note { top:13px; right:14px; width:205px; padding:8px 10px; font-size:15px; line-height:1.35; transform:rotate(-3deg); }
  .note-desktop { display:none; }
  .note-mobile { display:block; }
  .control-panel { position:relative; inset:auto; width:calc(100% - 20px); margin:-13px auto 0; padding:17px; overflow:visible; border-radius:10px; box-shadow:0 8px 28px #162a2016; }
  .profile-picker { grid-template-columns:1fr; gap:7px; margin-bottom:13px; }
  .profile-picker h2 { font-size:14px; }
  .choice-groups { grid-template-columns:1fr; gap:11px; margin-bottom:12px; }
  .place-picker { padding-top:0; }
  .mood-picker legend { min-height:0; margin-bottom:7px; font-size:14px; line-height:1.4; }
  .place-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .place-chip { min-width:0; justify-content:center; gap:4px; height:38px; padding:5px 4px; font-size:12px; }
  .place-chip span { width:16px; font-size:15px; }
  .mood-grid { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; padding:0; }
  .mood-chip { min-height:40px; padding:5px; font-size:12px; }
  .mood-text-row { grid-template-columns:1fr; gap:5px; margin-bottom:10px; }
  .mood-feedback { grid-column:1; }
  .location-box { padding:10px 0; }
  .location-box>div:first-child { display:block; }
  .location-box small { margin-top:3px; }
  .range-picker { margin-top:9px; }
  .action-row { margin-top:12px; }
  .result-panel { height:590px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:210px auto minmax(0,1fr); }
  .map-wrap { grid-column:1; grid-row:1; min-height:210px; border-right:0; border-bottom:1px solid var(--line); }
  .map-wrap::before { display:none; }
  .results-head { grid-column:1; grid-row:2; padding:13px 16px 9px; }
  .recommendations { grid-column:1; grid-row:3; padding:0 16px 14px; }
}
@media (max-width:360px) {
  .control-panel { width:calc(100% - 8px); padding:13px; }
  .mood-chip { gap:2px; padding:4px 3px; font-size:11.5px; }
  .mood-chip span { width:14px; font-size:14px; }
}
@media (min-width:681px) and (max-width:1100px) {
  .hero-photo img { object-position:25% center; }
}
@media (min-width:1200px) {
  .result-panel { height:auto; grid-template-rows:auto auto; overflow:visible; }
  .map-wrap { position:sticky; top:20px; align-self:start; height:440px; overflow:hidden; border-radius:12px 0 0 0; }
  .recommendations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:0 20px; overflow:visible; }
  .result-card { min-width:0; padding-block:16px; }
}
.result-card { position:relative; grid-template-columns:96px minmax(0,1fr); align-items:start; gap:12px; margin-inline:-10px; padding:12px 10px; border-radius:10px; transition:background .18s ease; }
.result-card:not(.has-photo) { grid-template-columns:minmax(0,1fr); }
.result-card:hover,.result-card:focus-within { background:#edf2e8; }
.result-card:focus-within { outline:2px solid #819b66; outline-offset:-2px; }
.card-route { position:absolute; z-index:1; inset:0; border-radius:10px; cursor:pointer; }
.card-route:focus-visible { outline:0; }
.card-photo { display:grid; place-items:center; width:96px; height:100px; overflow:hidden; border-radius:7px; background:linear-gradient(145deg,#dfe8db,#f0f2e9); }
.result-card:not(.has-photo) .card-photo { display:none; }
.card-photo-image { display:block; width:100%; height:100%; object-fit:cover; }
.card-photo-image[hidden] { display:none; }
.card-main { min-width:0; }
.card-topline { gap:6px; }
.card-index { margin:0 5px 0 0; }
.card-photo-status { color:#9aa397; font-size:10px; }
.result-card.has-photo .card-photo-status { display:none; }
.card-name { display:flex; align-items:flex-start; gap:7px; margin:5px 0 4px; }
.card-title { min-width:0; }
.card-icon { flex:none; width:25px; height:25px; border-radius:6px; font-size:15px; }
.photo-credit { position:relative; z-index:2; grid-column:1 / -1; margin-top:-5px; color:#6c756b; font-size:10px; line-height:1.4; overflow-wrap:anywhere; }
.photo-credit[hidden] { display:none; }
.photo-credit a { text-underline-offset:2px; }
@media (max-width:680px) {
  .result-card { grid-template-columns:78px minmax(0,1fr); gap:10px; }
  .card-photo { width:78px; height:90px; }
}