:root{
  --bg:#FAFAF7; --surface:#FFFFFF; --surface-raised:#FFFFFF; --ink:#1B1E27; --ink-soft:#5B6070;
  --ink-faint:#8A8F9C; --border:#E3E0D6; --border-strong:#D2CEC0; --indigo:#2C3A63; --indigo-soft:#EDF0F8;
  --amber:#C97A22; --amber-bright:#D98E2B; --amber-soft:#FBF0DF; --live:#3F8F5F; --danger:#B3492E;
  --radius-s:4px; --radius-m:8px;
  --shadow-panel: 0 1px 2px rgba(27,30,39,0.04), 0 8px 24px -12px rgba(27,30,39,0.12);
  --font-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#13151A; --surface:#191C23; --surface-raised:#20232C; --ink:#ECEDEF; --ink-soft:#A7ACB9;
    --ink-faint:#717685; --border:#2A2E38; --border-strong:#383D4A; --indigo:#8DA0DD; --indigo-soft:#1C2333;
    --amber:#E8A33D; --amber-bright:#E8A33D; --amber-soft:#2C2416; --live:#5FBE84; --danger:#E08064;
    --shadow-panel: 0 1px 2px rgba(0,0,0,0.3), 0 8px 30px -12px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --bg:#13151A; --surface:#191C23; --surface-raised:#20232C; --ink:#ECEDEF; --ink-soft:#A7ACB9;
  --ink-faint:#717685; --border:#2A2E38; --border-strong:#383D4A; --indigo:#8DA0DD; --indigo-soft:#1C2333;
  --amber:#E8A33D; --amber-bright:#E8A33D; --amber-soft:#2C2416; --live:#5FBE84; --danger:#E08064;
  --shadow-panel: 0 1px 2px rgba(0,0,0,0.3), 0 8px 30px -12px rgba(0,0,0,0.5);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit;}
button{font-family:inherit;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:2px solid var(--amber-bright); outline-offset:2px; border-radius:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;} }

.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
@media (max-width:640px){ .wrap{padding:0 18px;} }

header.site-header{position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--border);}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px;}
.logo{display:flex; align-items:center; gap:8px; font-family:var(--font-serif); font-weight:600; font-size:19px; letter-spacing:-0.01em; text-decoration:none; color:var(--ink); flex-shrink:0;}
.logo-mark{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--ink); position:relative; flex-shrink:0;}
.logo-mark::before, .logo-mark::after{content:''; position:absolute; background:var(--amber-bright); border-radius:1px;}
.logo-mark::before{width:1.5px; height:8px; top:5px; left:12.25px;}
.logo-mark::after{width:1.5px; height:6px; top:13px; left:12.25px; transform:rotate(45deg); transform-origin:top; background:var(--ink);}
nav.primary-nav{display:flex; align-items:center; gap:28px;}
nav.primary-nav a{font-size:14.5px; font-weight:500; text-decoration:none; color:var(--ink-soft); padding:6px 2px; border-bottom:2px solid transparent;}
nav.primary-nav a:hover{color:var(--ink);}
nav.primary-nav a.active{color:var(--ink); border-bottom-color:var(--amber-bright);}
.header-actions{display:flex; align-items:center; gap:10px;}
.theme-toggle{width:36px; height:36px; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft);}
.theme-toggle:hover{border-color:var(--border-strong); color:var(--ink);}
.hamburger{display:none; width:36px; height:36px; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface); cursor:pointer; align-items:center; justify-content:center;}
.hamburger span, .hamburger span::before, .hamburger span::after{content:''; display:block; width:16px; height:1.5px; background:var(--ink); position:relative;}
.hamburger span::before{position:absolute; top:-5px;}
.hamburger span::after{position:absolute; top:5px;}
.mobile-menu{display:none; flex-direction:column; gap:2px; padding:8px 0 16px 0; border-top:1px solid var(--border);}
.mobile-menu a{padding:12px 4px; text-decoration:none; color:var(--ink); font-size:15px; font-weight:500; border-bottom:1px solid var(--border);}
@media (max-width:760px){ nav.primary-nav{display:none;} .hamburger{display:flex;} .mobile-menu.open{display:flex;} }

footer.site-footer{border-top:1px solid var(--border); margin-top:80px; padding:48px 0 32px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:28px;} }
.footer-brand p{color:var(--ink-soft); font-size:14px; max-width:280px; margin:10px 0 0;}
.footer-col h4{font-size:13px; font-weight:600; margin:0 0 12px; color:var(--ink-faint); letter-spacing:0.01em;}
.footer-col a{display:block; font-size:14px; color:var(--ink-soft); text-decoration:none; margin-bottom:9px;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{margin-top:40px; padding-top:20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--ink-faint); font-size:13px;}

.breadcrumbs{padding:20px 0 0; font-size:13.5px; color:var(--ink-faint);}
.breadcrumbs a{text-decoration:none; color:var(--ink-faint);}
.breadcrumbs a:hover{color:var(--ink-soft); text-decoration:underline;}
.breadcrumbs .sep{margin:0 7px;}
.breadcrumbs .current{color:var(--ink-soft);}

.hero{padding:44px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:36px;} }
.hero h1{font-family:var(--font-serif); font-size:44px; line-height:1.08; font-weight:600; letter-spacing:-0.015em; margin:0 0 18px; max-width:11ch;}
@media (max-width:900px){ .hero h1{font-size:34px;} }
.hero-sub{font-size:17px; color:var(--ink-soft); max-width:42ch; margin:0 0 28px;}
.hero-sub strong{color:var(--ink); font-weight:600;}
.quicklinks{display:flex; flex-wrap:wrap; gap:8px;}
.pill{font-size:13.5px; font-weight:500; padding:7px 13px; border-radius:100px; border:1px solid var(--border); text-decoration:none; color:var(--ink-soft); background:var(--surface);}
.pill:hover{border-color:var(--border-strong); color:var(--ink);}

.converter-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow-panel); overflow:hidden;}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); background:var(--surface-raised);}
.panel-head-title{font-size:13px; font-weight:600; letter-spacing:0.01em; color:var(--ink-soft);}
.live-dot-wrap{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-faint);}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); flex-shrink:0;}
.live-dot.on{background:var(--live); box-shadow:0 0 0 3px rgba(63,143,95,0.2);}
.panel-body{padding:20px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
@media (max-width:420px){ .field-row{grid-template-columns:1fr;} }
.field label{display:block; font-size:12px; font-weight:600; color:var(--ink-faint); margin-bottom:6px; letter-spacing:0.01em;}
.field input, .field select{width:100%; padding:10px 11px; border:1px solid var(--border-strong); border-radius:var(--radius-s); background:var(--bg); color:var(--ink); font-size:15px; font-family:var(--font-mono);}
.field select{font-family:var(--font-sans); font-size:14.5px;}
.field input:focus, .field select:focus{border-color:var(--indigo); outline:none;}
.swap-row{display:flex; align-items:center; gap:10px; margin:14px 0;}
.swap-line{flex:1; height:1px; background:var(--border);}
.dest-field{margin-bottom:4px;}
.now-btn{background:none; border:1px solid var(--border-strong); color:var(--ink-soft); font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:100px; cursor:pointer;}
.now-btn:hover{border-color:var(--indigo); color:var(--indigo);}

.result-card{margin-top:18px; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--indigo-soft); padding:16px 18px;}
.result-label{font-size:11.5px; font-weight:600; color:var(--ink-faint); letter-spacing:0.03em; margin-bottom:4px;}
.result-time{font-family:var(--font-mono); font-size:28px; font-weight:600; color:var(--ink); line-height:1.2; letter-spacing:-0.01em;}
.result-date{font-size:13.5px; color:var(--ink-soft); margin-top:2px;}
.rollover-tag{display:inline-block; font-size:11px; font-weight:600; padding:2px 7px; border-radius:100px; background:var(--amber-soft); color:var(--amber); margin-left:8px; vertical-align:middle;}
.result-meta{display:flex; gap:14px; margin-top:12px; flex-wrap:wrap;}
.result-meta-item{font-size:12.5px; color:var(--ink-faint);}
.result-meta-item b{color:var(--ink-soft); font-weight:600;}
.panel-actions{display:flex; gap:8px; margin-top:14px;}
.btn{font-size:13.5px; font-weight:600; padding:9px 14px; border-radius:var(--radius-s); cursor:pointer; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); display:inline-flex; align-items:center; gap:6px;}
.btn:hover{border-color:var(--indigo);}
.btn.primary{background:var(--indigo); border-color:var(--indigo); color:#fff;}
.btn.primary:hover{opacity:0.92;}
.copy-feedback{font-size:12.5px; color:var(--live); margin-left:4px; font-weight:600;}

section.block{padding:56px 0;}
section.block.tight{padding:36px 0;}
section.block h2{font-family:var(--font-serif); font-size:28px; font-weight:600; letter-spacing:-0.01em; margin:0 0 8px;}
.section-lede{color:var(--ink-soft); font-size:15.5px; max-width:60ch; margin:0 0 28px;}
.divider{border-top:1px solid var(--border); margin:0;}

.dest-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
@media (max-width:900px){ .dest-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:500px){ .dest-grid{grid-template-columns:1fr;} }
.dest-card{display:block; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:18px; position:relative;}
.dest-card:hover{border-color:var(--border-strong); background:var(--surface-raised);}
.dest-card .code{font-family:var(--font-mono); font-size:12px; color:var(--amber); font-weight:600; margin-bottom:8px; display:block;}
.dest-card .name{font-size:15.5px; font-weight:600; margin-bottom:4px;}
.dest-card .live-time{font-family:var(--font-mono); font-size:20px; font-weight:500; color:var(--ink-soft);}
.dest-card .offset{font-size:12.5px; color:var(--ink-faint); margin-top:6px;}

.tool-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden;}
@media (max-width:760px){ .tool-list{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .tool-list{grid-template-columns:1fr;} }
.tool-item{background:var(--surface); padding:18px; text-decoration:none; color:var(--ink);}
.tool-item:hover{background:var(--surface-raised);}
.tool-item .t-name{font-size:14.5px; font-weight:600; margin-bottom:4px;}
.tool-item .t-desc{font-size:13px; color:var(--ink-faint); line-height:1.4;}

.table-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-m); -webkit-overflow-scrolling:touch;}
table.ref-table{width:100%; border-collapse:collapse; font-size:14px; min-width:420px;}
table.ref-table th{text-align:left; padding:10px 14px; background:var(--surface-raised); font-size:12px; font-weight:600; color:var(--ink-faint); letter-spacing:0.02em; border-bottom:1px solid var(--border); position:sticky; top:0;}
table.ref-table td{padding:9px 14px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:13.5px;}
table.ref-table tr:last-child td{border-bottom:none;}
table.ref-table td.prev-day{color:var(--amber);}
table.ref-table td.next-day{color:var(--indigo);}
.table-legend{display:flex; gap:16px; margin-top:10px; font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap;}
.table-legend span{display:inline-flex; align-items:center; gap:5px;}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block;}

.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){ .info-grid{grid-template-columns:1fr;} }
.info-card{border:1px solid var(--border); border-radius:var(--radius-m); padding:20px; background:var(--surface);}
.info-card h3{font-size:15px; font-weight:600; margin:0 0 8px;}
.info-card p{font-size:14px; color:var(--ink-soft); margin:0; line-height:1.6;}
.info-card .big-stat{font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--indigo); margin-bottom:6px;}

.faq-item{border-bottom:1px solid var(--border);}
.faq-item:first-child{border-top:1px solid var(--border);}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:16px 2px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:15px; font-weight:500; color:var(--ink);}
.faq-q .icon{flex-shrink:0; width:18px; height:18px; position:relative;}
.faq-q .icon::before, .faq-q .icon::after{content:''; position:absolute; background:var(--ink-faint); top:50%; left:50%;}
.faq-q .icon::before{width:12px; height:1.5px; transform:translate(-50%,-50%);}
.faq-q .icon::after{width:1.5px; height:12px; transform:translate(-50%,-50%); transition:transform .15s;}
.faq-item.open .icon::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq-a{overflow:hidden; transition:max-height .18s ease;}
.faq-a p{margin:0 0 16px 2px; font-size:14.5px; color:var(--ink-soft); line-height:1.65; max-width:65ch;}
/* No-JS baseline: FAQ answers are visible by default so content is crawlable and usable without JS.
   app.js progressively turns this into an accordion. */
.faq-item:not(.js-ready) .faq-a{max-height:none !important;}

.cta-band{border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface-raised); padding:32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band h3{font-family:var(--font-serif); font-size:22px; font-weight:600; margin:0 0 6px;}
.cta-band p{color:var(--ink-soft); font-size:14.5px; margin:0;}

/* Formula / code blocks (Excel, SQL, etc.) */
.formula-block{
  border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); overflow:hidden; margin-bottom:14px;
}
.formula-head{
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
  background:var(--surface-raised); border-bottom:1px solid var(--border);
}
.formula-label{font-size:12px; font-weight:600; color:var(--ink-faint); letter-spacing:0.02em;}
.copy-chip{
  font-size:12px; font-weight:600; padding:5px 10px; border-radius:100px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--ink-soft); cursor:pointer; display:inline-flex; align-items:center; gap:5px;
}
.copy-chip:hover{border-color:var(--indigo); color:var(--indigo);}
.copy-chip .copied-label{color:var(--live); display:none; font-weight:600;}
.copy-chip.copied .copied-label{display:inline;}
.copy-chip.copied .default-label{display:none;}
.formula-code{
  display:block; padding:14px 16px; font-family:var(--font-mono); font-size:14.5px; color:var(--ink);
  overflow-x:auto; white-space:pre; -webkit-overflow-scrolling:touch; margin:0; background:var(--bg);
}

/* Cell-reference example table */
.cell-table{width:100%; border-collapse:collapse; font-size:14px; margin-top:4px;}
.cell-table th{text-align:left; padding:9px 12px; background:var(--surface-raised); font-size:12px; font-weight:600; color:var(--ink-faint); border-bottom:1px solid var(--border);}
.cell-table td{padding:9px 12px; border-bottom:1px solid var(--border);}
.cell-table td:first-child{font-family:var(--font-mono); font-weight:600; color:var(--indigo); width:60px;}
.cell-table code{font-family:var(--font-mono); font-size:13px; background:var(--indigo-soft); padding:2px 6px; border-radius:3px;}
.cell-table tr:last-child td{border-bottom:none;}

/* DST toggle-style explainer */
.dst-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
@media (max-width:700px){ .dst-cards{grid-template-columns:1fr;} }
.dst-card{border:1px solid var(--border); border-radius:var(--radius-m); padding:18px; background:var(--surface);}
.dst-card h4{margin:0 0 6px; font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px;}
.dst-card .tag{font-size:11px; font-weight:600; padding:2px 8px; border-radius:100px;}
.dst-card.standard .tag{background:var(--indigo-soft); color:var(--indigo);}
.dst-card.daylight .tag{background:var(--amber-soft); color:var(--amber);}
.dst-card p{margin:6px 0 0; font-size:13.5px; color:var(--ink-soft); line-height:1.6;}

.related-tools{display:flex; flex-wrap:wrap; gap:10px;}
.related-tools a{
  font-size:13.5px; font-weight:500; padding:9px 14px; border-radius:var(--radius-s); border:1px solid var(--border);
  text-decoration:none; color:var(--ink); background:var(--surface); display:inline-flex; align-items:center; gap:6px;
}
.related-tools a:hover{border-color:var(--indigo); background:var(--surface-raised);}
.related-tools a .arrow{color:var(--ink-faint); font-size:12px;}

.callout{display:flex; gap:12px; padding:16px 18px; border:1px solid var(--border); border-left:3px solid var(--amber-bright); border-radius:var(--radius-s); background:var(--amber-soft);}
.callout p{margin:0; font-size:14px; color:var(--ink); line-height:1.6;}
.callout strong{color:var(--amber);}

main{min-height:60vh;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--indigo); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 var(--radius-s) 0;}
.skip-link:focus{left:0;}

.nf-wrap{text-align:center; padding:80px 0;}
.nf-wrap h1{font-family:var(--font-serif); font-size:32px; margin-bottom:10px;}