:root {
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Noto Sans JP', Arial, sans-serif;
  --bg: #f1f5f9;
  --bg-alt: #ffffff;
  --text: #0f172a;
  --border: #d9e1ec;
  --accent: #0d9488;
  --accent-grad: linear-gradient(135deg, rgba(13,148,136,0.15), rgba(13,148,136,0.05));
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  color-scheme: light dark;
}
:root.dark {
  --bg: #0f172a;
  --bg-alt: #1e293b;
  --text: #f1f5f9;
  --border: #334155;
  --accent: #4dd4c4;
  --accent-grad: linear-gradient(135deg, rgba(77,212,196,0.20), rgba(77,212,196,0.05));
}
html,body { margin:0; padding:0; font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding: clamp(14px,4vw,30px) clamp(16px,5vw,42px); }
.logo { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height:1; margin:0; font-weight:800; letter-spacing:-1px; }
.container { max-width: 1280px; margin:0 auto; padding: 0 clamp(18px,5vw,56px) 70px; }

/* Background refinement */
html,body { background: radial-gradient(at 30% 20%, #f8fafc, #eef2f6 55%, #e2e8f0); min-height:100vh; }
:root.dark body { background: radial-gradient(at 30% 20%, #0f172a, #16273a 55%, #1e293b); }
.logo { font-size: clamp(1.9rem, 4.4vw, 2.6rem); background:linear-gradient(90deg,var(--accent),#10b981); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-1.2px; }

.intro h2 { margin:0 0 4px; font-size:1.1rem; letter-spacing:.5px; opacity:.7; text-transform:uppercase; }
.intro p { margin:0 0 28px; font-size:.95rem; line-height:1.6; max-width:680px; opacity:.85; }
.tiles { display:grid; gap:26px; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); margin-bottom:60px; }
.tile { position:relative; display:flex; background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-lg); padding:24px 22px 26px; text-decoration:none; color:inherit; min-height:160px; box-shadow:0 6px 16px -6px rgba(0,0,0,.15); transition:.3s; overflow:hidden; }
.tile::before { content:''; position:absolute; inset:0; background: var(--accent-grad); opacity:.6; }
.tile:hover { transform: translateY(-4px); box-shadow:0 12px 28px -10px rgba(0,0,0,.22); }
.tile-body { position:relative; z-index:1; }
.tile h3 { margin:0 0 6px; font-size:1.2rem; font-weight:700; letter-spacing:.5px; }
.tile-desc { margin:0; font-size:.78rem; line-height:1.5; opacity:.75; }
.tile-arrow { position:absolute; right:18px; bottom:16px; font-size:1.4rem; font-weight:600; z-index:1; opacity:.55; }
.tile.placeholder { background: repeating-linear-gradient(135deg, var(--bg-alt), var(--bg-alt) 6px, rgba(0,0,0,0.04) 6px, rgba(0,0,0,0.04) 12px); box-shadow:none; border-style:dashed; }
.tile.placeholder::before { display:none; }
.site-footer { padding:30px 20px 40px; font-size:.65rem; letter-spacing:.5px; text-align:center; opacity:.6; }
.container.minimal { display:grid; place-items:start center; min-height:60vh; }
.single { display:flex; justify-content:flex-start; padding-top: clamp(30px,10vh,120px); }
.single-tile { position:relative; display:inline-grid; gap:10px; align-content:start; background: var(--bg-alt); border:1px solid var(--border); border-radius: 30px; padding:34px 40px 40px; min-width: min(420px,85vw); text-decoration:none; color:inherit; box-shadow:0 10px 30px -12px rgba(0,0,0,.25),0 4px 12px -6px rgba(0,0,0,.15); transition:.35s cubic-bezier(.4,.6,.2,1); }
.single-tile:hover { transform:translateY(-4px); box-shadow:0 18px 46px -14px rgba(0,0,0,.45); }
.single-tile:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 55%, transparent); outline-offset:5px; }
.dark .single-tile { background:#1e293b; }
.st-title { font-size: clamp(1.6rem,4.2vw,2.4rem); font-weight:800; letter-spacing:-1px; }
.st-desc { font-size:.7rem; font-weight:600; letter-spacing:.5px; opacity:.65; text-transform:uppercase; }
.st-arrow { position:absolute; right:24px; bottom:22px; font-size:1.8rem; font-weight:600; opacity:.4; transition:.4s; }
.single-tile:hover .st-arrow { transform:translateX(6px); opacity:.75; }
.site-footer { padding:40px 20px 60px; font-size:.6rem; letter-spacing:.45px; text-align:center; opacity:.55; }
.theme-toggle { background: var(--bg-alt); border:1px solid var(--border); color:inherit; border-radius: 40px; padding:10px 14px; font-size:.8rem; font-weight:600; cursor:pointer; box-shadow:0 4px 14px -6px rgba(0,0,0,.3); }
.theme-toggle:hover { transform:translateY(-2px); }
.theme-toggle:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 55%, transparent); outline-offset:3px; }

/* Accessibility / Motion */
@media (prefers-reduced-motion: reduce) {
  .tile, .cta { transition:none !important; }
  .tile:hover, .cta:hover { transform:none !important; }
}

/* Time calc specific (shared) */
.time-wrap { max-width:980px; margin:0 auto; padding: clamp(10px,4vw,30px) clamp(16px,5vw,42px) 70px; }
.calc-header { margin:0 0 18px; }
.radio-group { display:flex; gap:14px; flex-wrap:wrap; }
.radio-group label { background: var(--bg-alt); border:1px solid var(--border); padding:16px 24px; border-radius:20px; font-size:1rem; font-weight:700; cursor:pointer; display:flex; gap:10px; align-items:center; transition:.25s; letter-spacing:.5px; }
.radio-group input { display:none; }
.radio-group label[data-active="true"] { background: var(--accent); color:#fff; box-shadow:0 0 0 2px inset rgba(255,255,255,.4); }
.time-picker { position:relative; background: var(--bg-alt); border:1px solid var(--border); padding:22px 24px 28px; border-radius: var(--radius-lg); box-shadow:0 6px 18px -6px rgba(0,0,0,.15); }
.time-picker input { width:100%; font:inherit; font-size: clamp(1.8rem,4vw,2.8rem); font-weight:800; border:none; background:var(--accent-grad); color: var(--accent); padding:18px 22px; border-radius:24px; letter-spacing:2px; box-shadow:0 8px 24px -10px rgba(0,0,0,.3); outline:none; border:1px solid var(--border); }
.time-picker button.now-btn { position:absolute; top:12px; right:12px; font-size:.65rem; font-weight:600; background:rgba(255,255,255,.85); border:1px solid var(--border); padding:6px 10px; border-radius:40px; cursor:pointer; }
.results { display:grid; gap:24px; margin-top:28px; }
@media (min-width:760px){ .results { grid-template-columns: 1fr 1fr; } }
.result-card { position:relative; background: var(--bg-alt); border:1px solid var(--border); padding:28px 26px 34px; border-radius: var(--radius-lg); box-shadow:0 8px 22px -8px rgba(0,0,0,.15); overflow:hidden; }
.result-card h2 { margin:0 0 6px; font-size:1rem; font-weight:800; letter-spacing:.5px; display:flex; align-items:center; gap:10px; }
.badge { font-size:.55rem; font-weight:700; letter-spacing:.6px; border:1px solid currentColor; padding:5px 9px; border-radius:30px; background: rgba(255,255,255,.14); text-transform:uppercase; }
.result-time { font-size: clamp(2.2rem,5vw,3.2rem); font-weight:900; letter-spacing:2px; margin:4px 0 0; line-height:1; }
.next-day { font-size:.7rem; font-weight:600; margin-left:10px; opacity:.7; }
.footer-note { margin-top:40px; font-size:.6rem; opacity:.6; text-align:center; }
.back-link { position:absolute; top:14px; left:16px; font-size:.7rem; font-weight:600; letter-spacing:.5px; background: rgba(255,255,255,.75); text-decoration:none; padding:8px 14px; border-radius:40px; color:inherit; border:1px solid var(--border); }
:root.dark .back-link { background:#0f172a; }

/* Warn button */
.warn-btn { margin-top:12px; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid #f59e0b55; background:#fff7e6; color:#7a4d00; font-size:.8rem; font-weight:700; letter-spacing:.4px; cursor:pointer; }
.warn-btn:hover { filter:brightness(0.98); }
.dark .warn-btn { background:#3a2d0a; color:#ffd48a; border-color:#f59e0b88; }

/* Modal */
.modal { position:fixed; inset:0; display:none; }
.modal[aria-hidden="false"] { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.modal-dialog { position:relative; z-index:1; max-width: min(520px, 92vw); margin: 12vh auto 0; background: var(--bg-alt); color: inherit; border:1px solid var(--border); border-radius: 18px; padding: 18px 18px 16px; box-shadow:0 18px 48px -12px rgba(0,0,0,.5); }
.dark .modal-dialog { background:#1e293b; }
.modal-title { margin:0 0 6px; font-size:1.1rem; font-weight:800; }
.modal-body { margin:6px 0 12px; font-size:.95rem; font-weight:700; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.modal-actions .button { padding:10px 14px; border-radius:10px; border:1px solid var(--border); background: var(--accent); color:#fff; font-weight:700; }

@media (max-width:520px){
  .single-tile { padding:30px 30px 36px; min-width: unset; width:100%; }
  .st-title { font-size: clamp(1.8rem, 8.5vw, 2.3rem); }
}