:root {
  color-scheme: light;
  --paper:#f8f5ee; --card:#fffdfa; --ink:#2b2020; --muted:#716561; --line:#e9dfd5;
  --wine:#751f27; --red:#952b32; --gold:#edbb67;
  --serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",Georgia,serif;
  --sans:"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-family:var(--sans); font-synthesis:none; background:var(--paper); color:var(--ink);
}
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible { outline:2px solid #b77724; outline-offset:3px; }
a { color:inherit; text-decoration:none; }
svg { display:block; flex:none; }
.shell { display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100vh; }
.sidebar {
  position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; z-index:4;
  padding:27px 18px 15px; color:#fff4e5; background:linear-gradient(165deg,#811f26,#681a22 50%,#59151e);
  border-right:1px solid #60202a;
}
.brand { display:flex; align-items:center; gap:11px; padding:0 4px; width:max-content; max-width:100%; }
.brand img { object-fit:contain; filter:drop-shadow(0 2px 4px #46111480); }
.brand strong,.brand small { display:block; white-space:nowrap; }
.brand strong { font:700 22px/1.2 var(--serif); letter-spacing:.06em; }
.brand small { color:#f3c782; font:700 9px/1.5 var(--sans); letter-spacing:.19em; margin-top:5px; }
.sidebar-rule { margin:24px 2px 21px; height:1px; flex:none; background:#ecb66435; }
.places-title { display:flex; align-items:center; justify-content:space-between; padding:0 6px 12px; font-size:13px; font-weight:700; letter-spacing:.08em; }
.places-title small { color:#eebc7f; font-size:9px; letter-spacing:.11em; }
.search { display:flex; align-items:center; gap:9px; background:#47101854; border:1px solid #f9ddaa39; border-radius:9px; margin:0 2px 12px; padding:0 11px; color:#e6bd9a; }
.search:focus-within { border-color:var(--gold); }
.search input { min-width:0; width:100%; height:39px; background:none; border:0; outline:0; color:#fff6ea; font-size:13px; }
.search input::placeholder { color:#e6bdad; opacity:1; }
.city-list { overflow:auto; flex:1; padding:0 2px 6px; scrollbar-width:thin; scrollbar-color:#bd785d transparent; }
.city-group { margin:0 0 12px; }
.city-group h2 { display:flex; align-items:center; gap:7px; margin:9px 0 4px; padding-left:9px; color:#f1ba82; font-size:10px; letter-spacing:.16em; }
.city-group h2::after { content:""; width:15px; border-top:1px solid #e5b48755; }
.city { display:flex; align-items:center; gap:9px; width:100%; min-height:33px; padding:6px 9px; background:transparent; color:#fae6db; border:1px solid transparent; border-radius:7px; text-align:left; font-size:13px; transition:background .2s,color .2s; }
.city:hover { background:#ffffff15; }
.city svg { color:#dfad91; }
.city[aria-current="true"] { color:#fff2d2; background:#eeb65a22; border-color:#f3c27257; font-weight:700; }
.city[aria-current="true"] svg { color:#ffcb78; }
.city[aria-current="true"]::after { content:""; margin-left:auto; width:6px; height:6px; border-radius:50%; background:#ffd187; box-shadow:0 0 9px #edba6f77; }
.empty-search { color:#fae6db; padding:8px; font-size:13px; }
.side-bottom { display:flex; align-items:center; gap:8px; flex:none; color:#f2c8af; font-size:11px; letter-spacing:.06em; padding:11px 7px 0; border-top:1px solid #e3b28a38; }
.side-star { color:#ffcc77; font-size:16px; }
.main { min-width:0; background:radial-gradient(ellipse at 92% 5%,#efdfcc56,transparent 55%),var(--paper); }
.topbar { height:61px; border-bottom:1px solid #eadfd4; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,4.2vw,65px); background:#fffcf6ad; }
.breadcrumb,.top-date { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }
.breadcrumb svg,.top-date svg { color:var(--wine); }
.breadcrumb strong { color:var(--ink); }
.slash { color:#a08a7d; }
.timezone { color:#826c61; font-size:9px; letter-spacing:.09em; border:1px solid #ddcdbf; border-radius:4px; padding:3px 5px; }
.menu-toggle,.mobile-brand { display:none; }
.content { width:min(100%,1320px); margin:auto; padding:27px clamp(22px,4.2vw,65px) 0; }
.hero { --h1:#65202b; --h2:#99443d; --h3:#bc7658; position:relative; isolation:isolate; overflow:hidden; min-height:306px; color:#fff3e5; background:linear-gradient(115deg,var(--h1),var(--h2) 65%,var(--h3)); border-radius:16px; box-shadow:0 9px 25px #5f262a22; }
.hero[data-theme="sun"],.hero[data-theme="partly"] { --h1:#681d28; --h2:#a1493c; --h3:#c28255; }
.hero[data-theme="night"],.hero[data-theme="moon"] { --h1:#351a32; --h2:#583049; --h3:#9a6571; }
.hero[data-theme="cloud"],.hero[data-theme="fog"] { --h1:#4e2835; --h2:#764550; --h3:#a97a76; }
.hero[data-theme="rain"],.hero[data-theme="thunder"] { --h1:#362036; --h2:#594158; --h3:#8a738a; }
.hero[data-theme="snow"] { --h1:#493145; --h2:#775c76; --h3:#ab94aa; }
.hero-scene,.sky-grid,.stars,.particles { position:absolute; inset:0; pointer-events:none; }
.hero-scene { z-index:-1; overflow:hidden; }
.sky-grid { opacity:.28; background-image:linear-gradient(#ffe6c729 1px,transparent 1px),linear-gradient(90deg,#ffe6c729 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(95deg,transparent,#000 75%); }
.hero-scene::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#4a14233d 0%,transparent 64%),linear-gradient(0deg,#34142735,transparent 48%); }
.landscape { position:absolute; inset:auto 0 0; height:68%; background:url("./sky-landscape.svg") center bottom / 100% 100% no-repeat; opacity:.88; }
.orbit { position:absolute; width:192px; aspect-ratio:1; right:17%; top:45%; transform:translate(50%,-50%); border-radius:50%; border:1px solid #ffe2ac50; }
.orbit-two { width:237px; opacity:.65; border-style:dashed; }
.orbit-three { width:282px; opacity:.45; }
.scene-icon { position:absolute; top:44%; right:17%; transform:translate(50%,-50%); width:143px; height:143px; display:grid; place-items:center; color:#ffdda5; filter:drop-shadow(0 0 22px #ffd99076); --icon-sun:#ffd28a; --icon-moon:#ffdfaa; --icon-cloud:#fff1d5; --icon-rain:#c8defb; }
.hero[data-theme="night"] .scene-icon { --icon-sun:#e5cffa; --icon-moon:#f3dcff; }
.scene-icon > svg { animation:float 7s ease-in-out infinite; }
.star { position:absolute; color:#ffe4a9; opacity:.7; font-size:var(--size); left:var(--x); top:var(--y); animation:twinkle 4s ease-in-out var(--delay) infinite; }
.particle { display:none; position:absolute; top:-28px; left:var(--x); width:1px; height:20px; background:#e7eeff9a; transform:rotate(16deg); animation:fall 2s linear var(--delay) infinite; }
.hero:is([data-theme="rain"],[data-theme="thunder"],[data-theme="snow"]) .particle { display:block; }
.hero[data-theme="snow"] .particle { width:4px; height:4px; border-radius:50%; animation-duration:5s; }
@keyframes float { 50% { transform:translateY(-8px); } }
@keyframes twinkle { 50% { opacity:.27; } }
@keyframes fall { to { transform:translate(-75px,350px) rotate(16deg); } }
.hero-inner { padding:28px 32px 20px; display:flex; flex-direction:column; min-height:306px; align-items:flex-start; }
.eyebrow { display:flex; align-items:center; gap:8px; color:#ffe0b2; font-size:11px; font-weight:700; letter-spacing:.12em; }
.eyebrow i { width:6px; height:6px; border-radius:50%; background:#ffd080; box-shadow:0 0 10px #ffd080aa; }
.eyebrow span { margin-left:3px; font-size:9px; letter-spacing:.16em; opacity:.88; }
.hero-place { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.hero-place h1 { margin:0; font:700 clamp(38px,5.4vw,67px)/1.13 var(--serif); letter-spacing:.075em; text-shadow:0 4px 12px #4013234f; }
.hero-place > span { font-size:11px; padding:5px 8px; border:1px solid #ffd6ad63; border-radius:5px; color:#ffecd6; background:#42152438; }
.hero-reading { display:flex; align-items:center; gap:22px; margin:7px 0 13px; }
.temperature { display:flex; align-items:flex-start; font:600 clamp(53px,7vw,88px)/.96 Georgia,serif; letter-spacing:-.06em; font-variant-numeric:lining-nums tabular-nums; }
.temperature sup { margin:6px 0 0 5px; font:500 clamp(19px,2.6vw,30px)/1 var(--sans); letter-spacing:-.07em; color:#f7d3a8; }
.conditions { min-width:0; padding-top:6px; }
.conditions strong { display:block; font-size:clamp(13px,1.45vw,19px); }
.temperature-range { display:flex; gap:10px; font-size:11px; margin-top:5px; color:#ffe3c3; white-space:nowrap; }
.hero-foot { display:flex; align-items:center; gap:13px; margin-top:auto; padding-top:4px; }
.coordinates { font-size:10px; letter-spacing:.09em; color:#f6d8bd; }
.refresh { display:flex; align-items:center; gap:5px; border-radius:6px; border:1px solid #ffe0b55c; color:#fff1dd; background:#41182642; padding:5px 8px; font-size:10px; }
.refresh:hover { background:#4515229b; }
.refresh:disabled { opacity:.62; }
.status-line { min-height:31px; display:flex; align-items:center; justify-content:flex-end; padding:3px 1px; color:var(--muted); font-size:11px; }
.status-line[data-state="error"] { color:#942e36; justify-content:flex-start; font-weight:700; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:19px; }
.metric,.panel { background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 3px 12px #632a1910; }
.metric { display:flex; gap:11px; align-items:center; min-height:85px; padding:12px 13px; }
.metric-icon,.section-icon { color:var(--red); background:#f8eee7; border:1px solid #f3e3da; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; flex:none; }
.metric-label { font-size:11px; color:var(--muted); white-space:nowrap; }
.metric-value { font:700 25px/1.15 Georgia,serif; white-space:nowrap; margin-top:3px; font-variant-numeric:lining-nums tabular-nums; }
.metric-value small { margin-left:3px; font:600 11px var(--sans); color:var(--muted); }
.panel { margin-bottom:19px; overflow:hidden; --icon-sun:#aa601b; --icon-moon:#79568f; --icon-cloud:#786d86; --icon-rain:#42799e; --icon-snow:#42799e; --icon-lightning:#a7671b; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px 11px; }
.panel-heading { display:flex; align-items:center; gap:10px; }
.panel-heading h2 { font:700 19px/1.25 var(--serif); margin:0; letter-spacing:.06em; }
.panel-heading p { margin:3px 0 0; color:var(--muted); font-size:10px; }
.scroll-controls { display:flex; gap:6px; }
.scroll-controls button { display:grid; place-items:center; background:#fffdf8; color:var(--wine); border:1px solid var(--line); width:32px; height:32px; border-radius:7px; }
.scroll-controls button:hover:enabled { background:#f6ebe2; }
.scroll-controls button:disabled { opacity:.4; }
.hourly-track { display:flex; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#dfc2b5 transparent; margin:0 13px 10px; padding:3px 2px 7px; }
.hour { flex:0 0 max(69px,12.5%); text-align:center; min-height:109px; padding:8px 4px 7px; color:var(--muted); font-size:11px; border-right:1px solid #f1e9e0; }
.hour:last-child { border-right:0; }
.hour.is-now { border-radius:8px; background:#fbefe7; border-right-color:transparent; color:#8a2932; }
.hour > svg { margin:6px auto 5px; }
.hour.is-night { --icon-sun:#79568f; }
.hour strong { display:block; font-size:17px; line-height:1.15; color:var(--ink); }
.hour small { display:flex; justify-content:center; align-items:center; gap:2px; margin-top:5px; color:#366784; font-size:10px; }
.weekly-rows { padding:0 18px 7px; }
.week-key { display:flex; gap:6px; align-items:center; white-space:nowrap; font-size:10px; color:var(--muted); }
.week-key span { width:22px; height:4px; border-radius:5px; background:linear-gradient(90deg,#b289a3,#d87c49); }
.day { display:grid; grid-template-columns:minmax(73px,1fr) 30px minmax(85px,1fr) 57px 35px minmax(60px,1.5fr) 35px; gap:10px; align-items:center; min-height:49px; border-top:1px solid #efe5dc; font-size:12px; }
.day strong { font-size:13px; }
.day-date,.day-label { color:var(--muted); }
.day-date { font-size:10px; margin-left:5px; }
.day-rain { display:flex; align-items:center; gap:3px; color:#366784; font-size:11px; white-space:nowrap; }
.day-min,.day-max { text-align:center; font-weight:700; white-space:nowrap; }
.day-min { color:#71556a; }
.day-max { color:#902c30; }
.temp-bar { background:#f2e9e5; height:5px; border-radius:5px; position:relative; }
.temp-bar span { position:absolute; left:var(--start); width:var(--width); min-width:3px; height:100%; border-radius:5px; background:linear-gradient(90deg,#ac83a0,#d78853); }
.panel-message { margin:0; padding:17px 7px 20px; color:var(--muted); font-size:12px; }
.footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:13px; padding:16px 0 22px; color:var(--muted); font-size:11px; }
.footer b { color:var(--wine); }
.footer a { display:flex; align-items:center; gap:4px; }
.footer a:hover { text-decoration:underline; }
[hidden] { display:none!important; }
.view-nav { display:flex; gap:5px; margin:0 0 16px; padding:4px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:11px; background:#fffaf4; }
.view-nav a { display:flex; align-items:center; justify-content:center; gap:7px; border-radius:7px; padding:8px 14px; color:#6d4e4e; font-size:12px; font-weight:700; white-space:nowrap; --icon-sun:#a16b37; }
.view-nav a:hover { background:#f5e9e1; }
.view-nav a[aria-current] { color:#fff5e4; background:var(--wine); --icon-sun:#fbd08b; }
.hazard-breadcrumb { display:none; }
body:is([data-view="typhoon"],[data-view="earthquake"]) .breadcrumb:not(.hazard-breadcrumb) { display:none; }
body:is([data-view="typhoon"],[data-view="earthquake"]) .hazard-breadcrumb { display:flex; }
.hazard-header { position:relative; isolation:isolate; overflow:hidden; min-height:183px; padding:28px 31px; border-radius:16px; color:#fff3e5; background:linear-gradient(112deg,#3e233f,#794753 75%,#af786a); box-shadow:0 9px 25px #5f262a22; }
.hazard-header[data-kind="earthquake"] { background:linear-gradient(112deg,#5e212d,#92483c 75%,#bd7959); }
.hazard-header h1 { margin:12px 0 7px; font:700 clamp(35px,5.2vw,61px)/1.1 var(--serif); letter-spacing:.075em; }
.hazard-header p { margin:0; color:#ffead5; font-size:13px; }
.hazard-header-art { display:grid; place-items:center; position:absolute; right:8%; top:50%; transform:translateY(-50%); width:205px; height:205px; border:1px solid #ffe1af46; border-radius:50%; color:#ffdeab; z-index:-1; }
.hazard-header-art::before,.hazard-header-art::after { content:""; position:absolute; inset:17px; border:1px dashed #ffe1af43; border-radius:50%; }
.hazard-header-art::after { inset:-21px; border-style:solid; }
.hazard-header-art > svg { animation:float 7s ease-in-out infinite; filter:drop-shadow(0 0 10px #ffe1af70); }
.hazard-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 0; min-height:57px; }
.hazard-status { color:var(--muted); font-size:12px; }
.hazard-status[data-state="ready"]::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; vertical-align:2px; background:#637947; border-radius:50%; }
.hazard-status[data-state="error"] { color:var(--red); }
.hazard-refresh { display:flex; gap:6px; align-items:center; padding:6px 9px; color:var(--wine); background:var(--card); border:1px solid var(--line); border-radius:7px; font-size:11px; white-space:nowrap; }
.hazard-refresh:hover:enabled { background:#f5e9e1; }
.hazard-refresh:disabled { opacity:.55; }
.hazard-empty { padding:22px; color:var(--muted); font-size:13px; margin-top:0; }
.storm-card { padding:18px; }
.storm-heading { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.storm-title { margin:0; color:var(--wine); font:700 26px/1.3 var(--serif); }
.storm-name,.storm-observed { margin:6px 0; color:var(--muted); font-size:12px; }
.hazard-date { background:#f8eee7; color:#79433e; border:1px solid #f1e3d8; border-radius:6px; padding:5px 7px; font-size:10px; white-space:nowrap; }
.storm-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:14px 0 10px; }
.storm-fact { background:#fcf7f1; border:1px solid #f0e6db; border-radius:8px; padding:9px 10px; }
.storm-fact dt { color:var(--muted); font-size:10px; }
.storm-fact dd { margin:4px 0 0; font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.official-link { display:inline-flex; align-items:center; gap:5px; margin-top:6px; color:var(--wine); font-size:12px; font-weight:700; }
.official-link:hover { text-decoration:underline; }
.quake-list { margin-top:0; padding:0 16px; list-style:none; }
.quake-row { display:grid; grid-template-columns:66px minmax(0,1fr) 65px; align-items:center; gap:14px; min-height:85px; padding:9px 0; }
.quake-row + .quake-row { border-top:1px solid var(--line); }
.intensity,.quake-magnitude { display:grid; place-items:center; gap:2px; border-radius:8px; padding:6px 3px; text-align:center; }
.intensity { background:#f7ece6; color:#793d39; }
.intensity:is([data-intensity="4"],[data-intensity="5弱"]) { background:#f7e6c4; color:#77501e; }
.intensity:is([data-intensity="5強"],[data-intensity="6弱"],[data-intensity="6強"],[data-intensity="7"]) { background:#8b303b; color:#fff7e9; }
.intensity span,.quake-magnitude span { font-size:10px; }
.intensity strong,.quake-magnitude strong { font-size:21px; line-height:1.1; white-space:nowrap; }
.quake-magnitude { color:#715669; }
.quake-magnitude strong { font:700 19px Georgia,serif; }
.quake-location { margin:2px 0 3px; font:700 19px/1.2 var(--serif); overflow-wrap:anywhere; }
.quake-time,.quake-issued { margin:0; font-size:10px; color:var(--muted); }
.noscript { position:fixed; bottom:0; background:#fff; padding:10px; }
@media(max-width:1040px) {
  .shell { grid-template-columns:219px minmax(0,1fr); }
  .sidebar { padding-left:14px; padding-right:14px; }
  .brand strong { font-size:19px; }
  .brand img { width:39px; height:39px; }
  .metric { gap:7px; padding:10px 8px; }
  .metric-icon { width:30px; height:30px; }
  .metric-value { font-size:22px; }
}
@media(max-width:850px) {
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .shell { display:block; }
  .sidebar { display:none; position:absolute; top:56px; left:0; right:0; height:min(530px,calc(100dvh - 60px)); padding-top:16px; box-shadow:0 15px 25px #37142055; }
  .sidebar.is-open { display:flex; }
  .sidebar-rule { margin:12px 2px; }
  .topbar { height:56px; padding:0 15px; gap:10px; position:relative; z-index:5; }
  .menu-toggle { display:flex; align-items:center; gap:5px; padding:7px; background:#f7eae0; color:var(--wine); border:1px solid #efdccf; border-radius:7px; font-size:11px; font-weight:700; white-space:nowrap; }
  .breadcrumb { display:none; }
  body:is([data-view="typhoon"],[data-view="earthquake"]) .hazard-breadcrumb { display:none; }
  .view-nav { width:100%; margin-bottom:10px; }
  .view-nav a { flex:1 1 0; padding:8px 5px; gap:4px; }
  .hazard-header { min-height:145px; padding:20px 16px; }
  .hazard-header-art { right:3%; width:116px; height:116px; opacity:.52; }
  .hazard-header-art > svg { width:64px; height:64px; }
  .hazard-header p { font-size:11px; }
  .storm-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .storm-card { padding:13px; }
  .quake-list { padding:0 11px; }
  .quake-row { grid-template-columns:52px minmax(0,1fr) 46px; gap:9px; }
  .quake-location { font-size:17px; }
  .mobile-brand { display:flex; align-items:center; gap:5px; color:var(--wine); font:700 15px/1 var(--serif); white-space:nowrap; }
  .mobile-brand img { width:23px; height:23px; padding:3px; border-radius:5px; background:var(--wine); }
  .top-date { gap:5px; font-size:10px; }
  .top-date > span:first-child,.timezone { display:none; }
  .content { padding:15px 15px 0; }
  .hero,.hero-inner { min-height:260px; }
  .hero-inner { padding:22px 18px 17px; }
  .hero-place { gap:7px; }
  .hero-place h1 { font-size:clamp(30px,8.5vw,52px); }
  .orbit,.scene-icon { right:19%; top:45%; }
  .orbit { width:112px; }
  .orbit-two { width:145px; }
  .orbit-three { width:178px; }
  .scene-icon,.scene-icon > svg { width:89px; height:89px; }
  .hero-reading { gap:11px; }
  .landscape { background-size:auto 100%; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:13px; }
  .metric { padding:9px 10px; min-height:64px; }
  .panel { margin-bottom:13px; }
  .panel-head { padding:12px 10px 8px; }
  .weekly-rows { padding:0 10px 5px; }
  .day { grid-template-columns:66px 24px 42px 25px minmax(22px,1fr) 25px; gap:5px; min-height:45px; }
  .day-weather-icon > svg { width:23px; height:23px; }
  .day-label { display:none; }
  .day-date { margin-left:3px; }
  .footer { font-size:10px; flex-wrap:wrap; }
}
@media(max-width:380px) {
  .hero-place > span { display:none; }
  .hero-kicker span { font-size:8px; }
  .scene-icon,.orbit { right:17%; }
  .scene-icon,.scene-icon > svg { width:73px; height:73px; }
  .temperature-range { gap:5px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}