:root{
    --bg:#0d1117;
    --panel:#141a22;
    --panel-2:#181f29;
    --border:#283240;
    --text:#f3f6f9;
    --muted:#8f9baa;
    --muted2:#667384;
    --accent:#e8eef5;
    --green:#44d17a;
    --green-bg:rgba(68,209,122,.10);
    --yellow:#f7c955;
    --red:#ff6b6b;
    --blue:#67a9ff;
    --radius:18px;
    --shadow:0 14px 40px rgba(0,0,0,.18);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    min-height:100vh;
    background:
      radial-gradient(circle at 78% -10%,rgba(84,111,145,.14),transparent 30%),
      linear-gradient(180deg,#0c1016 0%,#0d1117 100%);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit}
  .shell{width:min(960px,calc(100% - 32px));margin:0 auto;padding:34px 0 48px}
  .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:42px}
  .brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.14em}
  .brandmark{
    width:34px;height:34px;border:1px solid #394452;border-radius:10px;
    display:grid;place-items:center;font-size:14px;background:#121820;
  }
  .langs{display:flex;align-items:center;gap:6px}
  .lang{
    border:1px solid transparent;background:transparent;color:#929dac;
    border-radius:9px;padding:7px 8px;cursor:pointer;transition:.18s;
    font-size:16px;line-height:1;
  }
  .lang:hover,.lang.active{background:#171e27;border-color:#2b3644;color:#fff}
  .hero{margin-bottom:25px}
  .eyebrow{font-size:12px;color:#758294;font-weight:700;letter-spacing:.13em;margin-bottom:8px}
  h1{font-size:clamp(30px,5vw,48px);line-height:1.16;margin:0;font-weight:800;letter-spacing:-.04em}
  .location{margin-top:10px;font-size:14px;color:var(--muted)}
  .live-row{display:flex;align-items:center;justify-content:space-between;margin:34px 0 12px}
  .live-label{font-size:12px;font-weight:800;letter-spacing:.12em;color:#95a1b0}
  .update{border:0;background:transparent;color:#aab4c1;padding:7px 0;cursor:pointer;font-size:13px}
  .update:hover{color:#fff}
  .update.spin span{display:inline-block;animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .status{
    border:1px solid rgba(68,209,122,.25);background:var(--green-bg);
    border-radius:16px;padding:18px 20px;display:flex;align-items:flex-start;gap:13px;margin-bottom:18px;
  }
  .dot{width:9px;height:9px;border-radius:50%;background:var(--green);margin-top:7px;box-shadow:0 0 0 4px rgba(68,209,122,.08)}
  .status-title{font-size:14px;font-weight:800;margin-bottom:4px}
  .status-desc{font-size:13px;color:#a8b3c0;line-height:1.55}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .card{
    border:1px solid var(--border);
    background:linear-gradient(180deg,rgba(22,28,37,.96),rgba(18,24,32,.96));
    border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  }
  .card.full{grid-column:1/-1}
  .card-head{padding:20px 22px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .card h2{font-size:16px;margin:0;font-weight:750;letter-spacing:-.01em}
  .card-body{padding:0 22px 22px}
  .source{font-size:11px;color:#697687;margin-top:16px;line-height:1.5}
  .source a{color:#8796a8}.source a:hover{color:#c8d1dc}
  .weather-main{display:flex;align-items:center;justify-content:space-between;padding-top:5px}
  .temp{font-size:54px;font-weight:750;letter-spacing:-.06em;line-height:1}
  .weather-meta{margin-top:8px;color:#9ca8b7;font-size:13px}
  .weather-icon{font-size:52px;filter:saturate(.8)}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
  .stat{border-top:1px solid #28323e;padding-top:12px}
  .stat-label{font-size:10px;color:#687588;text-transform:uppercase;letter-spacing:.08em}
  .stat-value{font-size:14px;font-weight:700;margin-top:5px}
  .warning-none{display:flex;align-items:center;gap:10px;padding:10px 0 2px;font-size:14px;font-weight:700}
  .warning-none i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green)}
  .warning-list{display:grid;gap:8px}
  .warning-item{padding:11px 12px;border-radius:11px;background:rgba(247,201,85,.08);border:1px solid rgba(247,201,85,.22);font-size:13px}
  .official-link{display:inline-flex;margin-top:15px;color:#b8c4d1;font-size:12px;border-bottom:1px solid #536071;padding-bottom:2px}
  .hourly{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .hour{text-align:center;padding:12px 6px;border-radius:12px;background:#10161d;border:1px solid #252f3b}
  .hour-time{font-size:11px;color:#778496}
  .hour-icon{font-size:23px;margin:9px 0 7px}
  .hour-temp{font-size:14px;font-weight:750}
  .days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
  .day{text-align:center;border-right:1px solid #26303b;padding:4px 4px 1px}
  .day:last-child{border-right:0}
  .day-name{font-size:11px;color:#8491a2}
  .day-icon{font-size:24px;margin:9px 0}
  .day-hi{font-size:13px;font-weight:750}
  .day-lo{font-size:11px;color:#778496;margin-top:3px}
  .quake{display:flex;align-items:center;gap:18px}
  .mag{
    min-width:78px;height:78px;border-radius:16px;background:#10161d;border:1px solid #293441;
    display:flex;flex-direction:column;align-items:center;justify-content:center
  }
  .mag small{font-size:10px;color:#687588;font-weight:700}.mag strong{font-size:27px;line-height:1.05}
  .quake-info{min-width:0}
  .quake-place{font-size:16px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .quake-sub{font-size:12px;color:#8a97a8;margin-top:7px;line-height:1.6}
  .info-copy{font-size:13px;color:#9eabba;line-height:1.75;margin:2px 0 13px}
  .big-link{
    display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:10px;
    background:#1b2430;border:1px solid #313e4d;font-size:12px;font-weight:700;color:#d3dae3;
  }
  .big-link:hover{background:#222d3b}
  .linkhub{margin-top:18px}
  .hub-title{font-size:11px;color:#697687;font-weight:800;letter-spacing:.15em;margin:4px 0 10px}
  .link-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .link-group{border-top:1px solid #28323e;padding-top:14px}
  .link-group-title{font-size:11px;color:#7d8999;margin-bottom:8px}
  .link-list{display:grid;gap:1px}
  .link-list a{
    display:flex;justify-content:space-between;align-items:center;padding:11px 0;
    border-bottom:1px solid #222c37;font-size:13px;color:#c3ccd6;
  }
  .link-list a:hover{color:white}
  .link-list em{font-style:normal;color:#5e6c7d;font-size:11px}
  footer{font-size:10.5px;color:#5f6c7c;line-height:1.7;padding:24px 3px 0;text-align:center}
  .skeleton{background:linear-gradient(90deg,#1b222c 25%,#252e39 37%,#1b222c 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:6px;color:transparent!important}
  @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
  @media(max-width:760px){
    .shell{width:min(100% - 22px,960px);padding-top:22px}
    .topbar{margin-bottom:31px}
    .grid{grid-template-columns:1fr}
    .card.full{grid-column:auto}
    .hourly{grid-template-columns:repeat(3,1fr)}
    .days{grid-template-columns:repeat(4,1fr);row-gap:16px}
    .day{border-right:0}
    .link-cols{grid-template-columns:1fr}
    .temp{font-size:48px}
    .card-head{padding:18px 18px 12px}.card-body{padding:0 18px 19px}
  }

/* Theme controls */
.top-actions{display:flex;align-items:center;gap:10px}
.theme-toggle{
  width:36px;height:36px;border-radius:10px;border:1px solid #2b3644;
  background:#171e27;color:#e9eef4;display:grid;place-items:center;
  cursor:pointer;font-size:17px;line-height:1;transition:.18s;
}
.theme-toggle:hover{transform:translateY(-1px);border-color:#465366}
.theme-toggle:focus-visible,.lang:focus-visible,.update:focus-visible,.big-link:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px
}

/* Light theme */
html[data-theme="light"]{
  --bg:#f5f7fa;
  --panel:#ffffff;
  --panel-2:#f8fafc;
  --border:#d8e0e9;
  --text:#18202b;
  --muted:#637083;
  --muted2:#8190a3;
  --accent:#202a36;
  --green:#1c9b55;
  --green-bg:rgba(28,155,85,.08);
  --yellow:#c98a00;
  --red:#d73f3f;
  --blue:#2878d4;
  --shadow:0 12px 34px rgba(26,39,55,.08);
}
html[data-theme="light"] body{
  background:
    radial-gradient(circle at 78% -10%,rgba(84,111,145,.09),transparent 30%),
    linear-gradient(180deg,#f7f9fc 0%,#f2f5f8 100%);
}
html[data-theme="light"] .brandmark,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .lang:hover,
html[data-theme="light"] .lang.active{
  background:#fff;border-color:#d6dee8;color:#1d2631;
}
html[data-theme="light"] .card{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,252,254,.98));
}
html[data-theme="light"] .hour,
html[data-theme="light"] .mag{background:#f7f9fc;border-color:#dce3eb}
html[data-theme="light"] .stat,
html[data-theme="light"] .link-group{border-color:#dce3eb}
html[data-theme="light"] .link-list a{border-color:#e3e8ef;color:#3f4b59}
html[data-theme="light"] .big-link{background:#f1f5f9;border-color:#d5dde7;color:#26313e}
html[data-theme="light"] .big-link:hover{background:#eaf0f6}
html[data-theme="light"] .source a,
html[data-theme="light"] .official-link{color:#53657a}
html[data-theme="light"] .warning-item{background:rgba(201,138,0,.06)}
html[data-theme="light"] .skeleton{
  background:linear-gradient(90deg,#edf1f5 25%,#e1e7ee 37%,#edf1f5 63%);
  background-size:400% 100%;
}

/* Warning severity cards */
.warning-item.sev-special{
  border-color:rgba(255,107,107,.45);
  background:rgba(255,107,107,.10);
}
.warning-item.sev-warning{
  border-color:rgba(245,147,68,.38);
  background:rgba(245,147,68,.08);
}
.warning-item.sev-advisory{
  border-color:rgba(247,201,85,.30);
  background:rgba(247,201,85,.07);
}
.warning-headline{font-weight:750;line-height:1.55}
.warning-areas{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.55}
.warning-time{margin-top:5px;color:var(--muted2);font-size:11px}