/* layout: hymnal reader — sticky top bar with search; index column + reading column; notation blocks styled like the printed Buku Ende (overline for half beats, dots for octaves) */
:root{
  --paper:#f4f5f8; --sheet:#ffffff; --ink:#161a22; --ink-2:#586070; --rule:#dde1e8;
  --gorga:#1f4f8f; --gorga-soft:#e7eef8; --on-accent:#ffffff;
  --warn:#85580a; --warn-soft:#f7eed9; --ok:#2b6a45; --ok-soft:#e3efe6;
  --hl:#ffe7a0;
  --f-display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --f-body:'IBM Plex Sans',system-ui,'Segoe UI',sans-serif;
  --f-num:'Source Serif 4',Georgia,serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0f1218; --sheet:#171b23; --ink:#e7eaf0; --ink-2:#9aa3b2; --rule:#272d38;
  --gorga:#86aee8; --gorga-soft:#1b2a40; --on-accent:#0f1218;
  --warn:#e2b54d; --warn-soft:#2d2714; --ok:#86c79c; --ok-soft:#1d2e23;
  --hl:#4f4417; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0f1218; --sheet:#171b23; --ink:#e7eaf0; --ink-2:#9aa3b2; --rule:#272d38;
  --gorga:#86aee8; --gorga-soft:#1b2a40; --on-accent:#0f1218;
  --warn:#e2b54d; --warn-soft:#2d2714; --ok:#86c79c; --ok-soft:#1d2e23;
  --hl:#4f4417; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--sheet)}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--sheet);border-bottom:1px solid var(--rule)}
.topbar-in{max-width:1120px;margin:0 auto;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-body);font-weight:600;font-size:18px;letter-spacing:-.005em;white-space:nowrap}
.brand .mark{width:22px;height:22px;flex:none}
.brand small.dev{font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--warn-soft);color:var(--warn)}
.search{flex:1 1 220px;min-width:0;display:flex}
.search input{width:100%;font:inherit;font-size:15px;padding:8px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink)}
.theme-btn{flex:none;width:38px;height:38px;display:inline-grid;place-items:center;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer;padding:0}
.theme-btn:hover{border-color:var(--gorga)}
.theme-btn:focus-visible{outline:2px solid var(--gorga);outline-offset:2px}
.theme-btn svg{width:20px;height:20px}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (max-width:640px){.theme-btn{order:1;margin-left:auto}.search{order:2;flex-basis:100%}}
.search input:focus-visible{outline:2px solid var(--gorga);outline-offset:1px}
.wrap{max-width:1120px;margin:0 auto;padding-block:20px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px}
@media (max-width:820px){.wrap{grid-template-columns:minmax(0,1fr)}}
.index{align-self:start;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--tb,64px) + 14px);min-width:0}
@media (max-width:820px){.index{position:static}}
.index .count{font-size:13px;color:var(--ink-2);margin:-4px 0 10px}
.loading{color:var(--ink-2);padding:20px 0}
.index ol{max-height:calc(100vh - var(--tb,64px) - 190px);overflow-y:auto;scrollbar-width:thin}
@media (max-width:820px){.index ol{max-height:340px}}
.index h2{font-size:14px;color:var(--ink);margin:0 0 4px;font-weight:600}
.index ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.index a{display:grid;grid-template-columns:38px minmax(0,1fr);gap:6px;align-items:baseline;padding:7px 10px;border-radius:8px;color:var(--ink);text-decoration:none}
.index a:hover{background:var(--gorga-soft)}
.index a[aria-current="page"]{background:var(--gorga-soft)}
.index a[aria-current="page"] .t{font-weight:600}
.index .n{font-family:var(--f-body);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.index .t{font-size:15px;line-height:1.3}
.index .st{grid-column:2;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.index .empty{color:var(--ink-2);font-size:14px;padding:8px 10px}
.pilot-note{margin-top:16px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:12px}
main{min-width:0}
.hymn-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.hymn-no{grid-row:span 2;font-family:var(--f-body);font-weight:600;font-size:34px;line-height:1;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:2.2ch}
.hymn-head h1{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,3.6vw,32px);line-height:1.15;margin:0;text-wrap:balance}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--ink-2)}
.meta b{color:var(--ink);font-weight:600}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--tb,64px));z-index:4;background:var(--paper);padding-block:12px;box-shadow:0 1px 0 var(--rule)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--sheet)}
.seg button{font:inherit;font-size:14px;padding:7px 12px;border:0;background:none;color:var(--ink);cursor:pointer}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.btn{font:inherit;font-size:14px;padding:7px 14px;border-radius:8px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.btn.primary{background:var(--gorga);border-color:var(--gorga);color:var(--on-accent);font-weight:500}
.btn:focus-visible,.seg button:focus-visible{outline:2px solid var(--gorga);outline-offset:2px}
.tempo{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.tempo input{width:110px;accent-color:var(--gorga)}
.vbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 2px}
.vbar .vl{font-size:13px;color:var(--ink-2);margin-right:2px}
.vchips{display:flex;flex-wrap:wrap;gap:6px}
.vchips button{font:inherit;font-size:14px;font-variant-numeric:tabular-nums;min-width:36px;height:34px;padding:0 10px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);color:var(--ink);cursor:pointer}
.vchips button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vchips button.nomatch{border-style:dashed;color:var(--ink-2)}
.vchips button:focus-visible{outline:2px solid var(--gorga);outline-offset:2px}
.vall{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);cursor:pointer}
.vall input{accent-color:var(--gorga)}
.vtag{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--gorga);margin-left:8px;white-space:nowrap}
.vnote{margin:0 0 10px;padding:10px 12px;border:1px dashed var(--rule);border-radius:8px;font-size:14px;color:var(--ink-2)}
.vnote q{display:block;margin-top:4px;font-family:var(--f-display);font-size:16px;color:var(--ink);quotes:none}
.verse.cur .vn{color:var(--gorga)}
.verse.cur{box-shadow:inset 3px 0 0 var(--gorga);padding-left:6px;margin-left:-9px}
.status{display:flex;gap:10px;align-items:flex-start;background:var(--warn-soft);border-radius:8px;padding:10px 14px;font-size:14px;margin:14px 0 4px}
.status b{color:var(--warn)}
.status ul{margin:6px 0 0;padding-left:18px}
.block{margin-top:26px}
.block > h2{font-size:14px;color:var(--ink);margin:0 0 10px;font-weight:600}
/* ---- not angka ---- */
.angka{background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:18px 16px 10px;overflow-x:auto}
.sec-label{font-size:12px;color:var(--ink-2);margin:0 0 16px;display:flex;gap:8px;align-items:center}
.sec-label .tag{font-weight:600;color:var(--ink)}
.flow{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:14px;margin-bottom:18px}
.bar{display:flex;align-items:flex-start}
.barline{width:0;border-left:1.5px solid var(--ink);align-self:stretch;margin:4px 6px 0;height:46px}
.barline.rep{border-left-width:4px;box-shadow:-5px 0 0 -3.5px var(--ink);position:relative;margin-left:12px}
.barline.rep::before{content:":";position:absolute;left:-14px;top:10px;font-weight:700;font-size:20px;line-height:1}
.barline.fin{border-left:5px double var(--ink);width:4px}
.beat{position:relative;display:flex;padding-top:7px}
.beat.split2::after{content:"";position:absolute;top:-2px;left:5px;right:5px;border-top:1.6px solid var(--ink)}
.beat.split::before{content:"";position:absolute;top:2px;left:5px;right:5px;border-top:1.6px solid var(--ink)}
.el{display:flex;flex-direction:column;align-items:center;min-width:28px;padding:0 3px;border-radius:5px}
.el .up,.el .dn{height:8px;line-height:8px;font-size:12px;letter-spacing:-1px;color:var(--ink)}
.el .dg{font-family:var(--f-num);font-size:23px;font-weight:600;line-height:1.05;font-variant-numeric:tabular-nums lining-nums;position:relative}
.el.hold .dg,.el.rest .dg{color:var(--ink-2)}
.el.sharp .dg::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;border-top:1.6px solid var(--ink);transform:rotate(-55deg)}
.el.flat .dg::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;border-top:1.6px solid var(--ink);transform:rotate(55deg)}
.el .syl{font-size:15px;line-height:1.35;white-space:nowrap;min-height:1.35em;color:var(--ink)}
.el .syl.r2{color:var(--ink-2);font-style:italic}
.el .syl:first-of-type{margin-top:6px}
.el.playing{background:var(--hl)}
.flow.sep .beat.split::before,.flow.sep .beat.split2::after{display:none}
.el.hb .dg::before,.el.hb2 .dg::before{content:"";position:absolute;left:-2px;right:-2px;top:1px;border-top:1.6px solid var(--ink)}
.el.hb2 .dg::before{height:5px;border-bottom:1.6px solid var(--ink)}
.staff .abcjs-note.hl path,.staff .abcjs-rest.hl path{fill:var(--gorga)!important;stroke:var(--gorga)!important}
.staff .abcjs-note.hl,.staff .abcjs-rest.hl{filter:drop-shadow(0 0 3px var(--gorga))}
.breath{font-family:var(--f-num);font-size:22px;line-height:1;margin:6px 1px 0 -2px;color:var(--ink)}
svg.slurs{position:absolute;inset:0;pointer-events:none;overflow:visible}
svg.slurs path{fill:none;stroke:var(--ink);stroke-width:1.5}
/* ---- staff ---- */
.staff{background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:8px 6px;overflow-x:auto}
.staff .abcjs-container{max-width:100%}
.staff text.abcjs-lyric,.staff .abcjs-lyric text{font-family:var(--f-body)!important;font-weight:400!important;font-size:15px!important}
/* ---- lyrics ---- */
.verses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px 32px}
.verse{margin:0;font-family:var(--f-display);font-size:18px;line-height:1.5;display:grid;grid-template-columns:28px minmax(0,1fr)}
.verse .vn{font-family:var(--f-body);font-weight:600;font-size:15px;color:var(--ink-2);padding-top:.2em}
.verse span.l{display:block}
.refs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.refs li{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:2px solid var(--rule)}
.refs a{color:var(--gorga);font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.refs a:hover{text-decoration:underline}
.refs span{font-size:14px;color:var(--ink-2)}
.credit{margin-top:14px;font-style:italic;color:var(--ink-2);font-family:var(--f-display);text-align:right}
/* ---- scan + edit ---- */
details.panel{margin-top:22px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet)}
details.panel summary{cursor:pointer;padding:12px 16px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:10px}
details.panel summary::-webkit-details-marker{display:none}
details.panel summary::after{content:"+";color:var(--ink-2);font-size:20px;line-height:1}
details.panel[open] summary::after{content:"–"}
.panel-body{padding:0 16px 16px}
.scans{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.scans figure{margin:0;flex:0 0 auto;width:min(100%,460px)}
.scans img{display:block;width:100%;background:#fff;border:1px solid var(--rule);border-radius:6px}
:root[data-theme="dark"] .scans img{filter:invert(.92) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .scans img{filter:invert(.92) hue-rotate(180deg)}}
.scans figcaption{font-size:13px;color:var(--ink-2);margin-top:4px}
.edit label{display:block;font-size:13px;color:var(--ink-2);margin:12px 0 4px}
.edit textarea{width:100%;min-height:64px;font-family:ui-monospace,Consolas,monospace;font-size:13px;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);resize:vertical}
.edit .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
.edit .msg{font-size:13px;color:var(--ok)}
.edit .msg.bad{color:var(--gorga)}
.legend{font-size:13px;color:var(--ink-2);margin-top:10px}
.legend code{font-family:ui-monospace,Consolas,monospace;background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:0 4px}
footer{grid-column:1/-1;font-size:13px;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:14px}
footer a{color:var(--gorga)}

/* ---- prod: pita gorga, catatan, navigasi lagu, daftar di HP ---- */
.brand small{font-family:var(--f-body);font-weight:400;font-size:13px;color:var(--ink-2);margin-left:2px}
.hymn-head{margin-top:4px}
.chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--warn-soft);color:var(--warn)}
details.notes{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
details.notes summary{cursor:pointer;display:inline-flex;flex-wrap:wrap;gap:6px 10px;align-items:center;list-style:none;padding:4px 0}
details.notes summary::-webkit-details-marker{display:none}
details.notes summary::after{content:"Lihat";font-size:13px;color:var(--gorga);text-decoration:underline;text-underline-offset:3px}
details.notes[open] summary::after{content:"Tutup"}
details.notes summary:focus-visible{outline:2px solid var(--gorga);outline-offset:3px;border-radius:4px}
details.notes ul{margin:8px 0 0;padding:12px 16px 12px 32px;background:var(--warn-soft);border-radius:10px;color:var(--ink);display:flex;flex-direction:column;gap:6px;max-width:72ch}
.verse{font-size:19px;line-height:1.55}
.verses{gap:24px 40px}
.pager{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:28px}
.pager a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);color:var(--ink);text-decoration:none;min-width:0}
.pager a:hover{border-color:var(--gorga)}
.pager a:focus-visible{outline:2px solid var(--gorga);outline-offset:2px}
.pager a.next{text-align:right;grid-column:2}
.pager .lbl{font-size:13px;color:var(--ink-2)}
.pager .ttl{font-family:var(--f-display);font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pager .ttl b{color:var(--ink-2);font-family:var(--f-body);font-weight:500;font-size:14px;margin-right:8px}
.list-toggle{display:none}
@media (max-width:820px){
  .index{background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:6px 12px}
  .index h2{display:none}
  .list-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;font:inherit;font-weight:500;font-size:15px;background:none;border:0;color:var(--ink);padding:8px 0;cursor:pointer}
  .list-toggle::after{content:"+";font-size:20px;line-height:1;color:var(--ink-2)}
  .index.open .list-toggle::after{content:"\2013"}
  .list-toggle:focus-visible{outline:2px solid var(--gorga);outline-offset:2px;border-radius:4px}
  .index:not(.open) ol,.index:not(.open) .pilot-note,.index:not(.open) .count{display:none}
  .index .count{margin:0 0 8px}
}
@media (max-width:520px){
  .search{flex-basis:100%}
  .tempo .tl{display:none}
  .tempo input{width:90px}
  .hymn-head{align-items:center;column-gap:14px}
  .hymn-no{grid-row:auto;font-size:30px}
  .hymn-head h1{font-size:25px}
  .hymn-head .meta{grid-column:1/-1;margin-top:6px}
  .verse{font-size:18px}
  .pager .ttl{font-size:15px}
}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ---- cetak: kertas F4 (215 x 330 mm), dua versi: not angka lalu not balok ---- */
#printView{position:absolute;left:-10000px;top:0;width:187mm;visibility:hidden} /* dibangun saat beforeprint, lebar = lebar isi F4 agar busur legato terukur benar */
.pv-staff{display:block!important;overflow:visible!important}
@media print{
  @page{size:215mm 330mm;margin:13mm 14mm 15mm}
  :root,:root[data-theme="dark"]{--paper:#fff;--sheet:#fff;--ink:#000;--ink-2:#3a3a3a;--rule:#b8b8b8;--gorga:#000;--gorga-soft:#fff;--hl:transparent;color-scheme:light}
  html,body{background:#fff!important;color:#000}
  body::before,.topbar,.index{display:none!important}
  .wrap{display:block;max-width:none;margin:0;padding:0}
  #main > :not(#printView){display:none!important}
  #printView{position:static;left:auto;width:auto;visibility:visible}
  .pv-part + .pv-part{break-before:page}
  .hymn-head{padding-bottom:4mm;border-bottom:.4mm solid #000}
  .hymn-no{font-size:26pt}
  .hymn-head h1{font-size:20pt}
  .meta{font-size:9.5pt;color:#000}
  .pv-part h2{font-size:9pt;text-transform:uppercase;letter-spacing:.08em;color:#3a3a3a;margin:6mm 0 2.5mm}
  .pv-angka .bar,.sec-label{break-inside:avoid}
  .sec-label{break-after:avoid}
  .pv-staff > div,.pv-staff svg{break-inside:avoid}
  .pv-staff svg [fill]:not([fill="none"]){fill:#000!important}
  .pv-staff svg [stroke]:not([stroke="none"]){stroke:#000!important}
  .pv-staff text.abcjs-lyric,.pv-staff .abcjs-lyric text{font-family:var(--f-body)!important;font-size:15px!important}
  .pv-keep{break-inside:avoid} /* judul "Ayat 2" selalu bersama baris ayat pertamanya */
  .pv-verses{display:grid;grid-template-columns:1fr 1fr;column-gap:10mm;align-items:start;break-inside:avoid;margin-bottom:3.5mm}
  .pv-verses .verse{font-size:11pt;line-height:1.45;margin:0}
  .credit{font-size:9.5pt;break-before:avoid}
  .print-foot{display:block;margin-top:6mm;padding-top:1.5mm;border-top:.2mm solid #b8b8b8;font-size:7.5pt;color:#3a3a3a;break-before:avoid}
  a{color:inherit;text-decoration:none}
}

/* ---- beranda ---- */
.home{display:flex;flex-direction:column;gap:24px}
.home h2{margin:0 0 10px;font-size:14px;font-weight:600}
.hero{position:relative;background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:30px 28px;overflow:hidden}
.hero h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(36px,6vw,52px);line-height:1.04;letter-spacing:-.01em}
.hero .lead{margin:10px 0 22px;max-width:54ch;font-size:17px;color:var(--ink-2)}
.go{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.go label{font-family:var(--f-display);font-size:19px;margin-right:2px}
.board{display:inline-flex}
.board input{width:4.2ch;box-sizing:content-box;font-family:var(--f-num);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em;text-align:center;padding:3px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink)}
.board input::placeholder{color:var(--ink-2);opacity:.6}
.board input:focus{outline:2px solid var(--gorga);outline-offset:1px;border-color:var(--gorga)}
.go .btn{font-size:15px;padding:9px 18px}
.go-msg{flex-basis:100%;margin:0;font-size:14px;color:var(--warn)}
.go-msg:empty{display:none}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;background:var(--sheet);border:1px solid var(--rule);border-radius:12px}
.stats div{display:flex;flex-direction:column;gap:2px;padding:14px 18px;min-width:0}
.stats dd{order:-1}
.stats div+div{border-left:1px solid var(--rule)}
.stats dd{margin:0;font-family:var(--f-num);font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stats dt{font-size:13px;color:var(--ink-2);line-height:1.3}
.today{background:var(--gorga-soft);border-radius:12px;padding:22px 24px 24px}
.today h2{color:var(--gorga)}
.today-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;align-items:baseline;color:var(--ink);text-decoration:none}
.today-head .no{font-family:var(--f-body);font-weight:600;font-size:34px;line-height:1;color:var(--gorga);font-variant-numeric:tabular-nums;min-width:2.2ch}
.today-head .tt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-width:0}
.today-head .t{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,3.2vw,28px);line-height:1.2}
.today-head .lg{font-size:14px;color:var(--ink-2)}
.today-head:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.today-head:focus-visible{outline:2px solid var(--gorga);outline-offset:4px}
.today-v{margin:12px 0 18px;font-family:var(--f-display);font-size:18px;line-height:1.6;max-width:60ch}
.today-v span{display:block}
.home a.btn{text-decoration:none}
.ranges{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.rng{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;color:var(--ink);text-decoration:none;min-width:0}
.rng:hover{border-color:var(--gorga)}
.rng:focus-visible{outline:2px solid var(--gorga);outline-offset:2px}
.rng .rn{font-family:var(--f-num);font-weight:700;font-size:19px;font-variant-numeric:tabular-nums}
.rng .rt{font-family:var(--f-display);font-size:15px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.feats div{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:14px 16px}
.feats h3{margin:0 0 4px;font-family:var(--f-display);font-size:18px;font-weight:600}
.feats p{margin:0;font-size:14px;color:var(--ink-2)}
@media (max-width:640px){.hero{padding:24px 18px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats div:nth-child(3){border-left:0}.stats div:nth-child(n+3){border-top:1px solid var(--rule)}.feats{grid-template-columns:minmax(0,1fr)}.today{padding:18px}.today-head .no{font-size:28px}}