@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/IBMPlexSans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/IBMPlexSans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f8f4ec;--bg2:#efe8da;--card:#fffdf8;--ink:#1a1714;--ink2:#3a332b;--mut:#5c5347;
  --line:rgba(26,23,20,.24);--line-soft:rgba(26,23,20,.12);
  --acc:#9c4215;--acc-2:#75300c;--acc-ink:#ffffff;
  --cal:#1e5b70;--cal-soft:rgba(30,91,112,.12);
  --match-bg:rgba(156,66,21,.11);--err:#a11d1d;--err-bg:rgba(161,29,29,.09);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --bar:44px;--col:60rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#11100e;--bg2:#191714;--card:#1f1c18;--ink:#f2ece1;--ink2:#d6cec0;--mut:#b0a695;
  --line:rgba(242,236,225,.24);--line-soft:rgba(242,236,225,.12);
  --acc:#f0a36b;--acc-2:#ffc294;--acc-ink:#1b0d05;
  --cal:#80c4da;--cal-soft:rgba(128,196,218,.14);
  --match-bg:rgba(240,163,107,.14);--err:#ff8f8f;--err-bg:rgba(255,143,143,.12);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#11100e;--bg2:#191714;--card:#1f1c18;--ink:#f2ece1;--ink2:#d6cec0;--mut:#b0a695;
  --line:rgba(242,236,225,.24);--line-soft:rgba(242,236,225,.12);
  --acc:#f0a36b;--acc-2:#ffc294;--acc-ink:#1b0d05;
  --cal:#80c4da;--cal-soft:rgba(128,196,218,.14);
  --match-bg:rgba(240,163,107,.14);--err:#ff8f8f;--err-bg:rgba(255,143,143,.12);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
.icon-btn svg[hidden]{display:none}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.06rem/1.62 var(--serif);font-optical-sizing:auto;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:var(--acc);text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{color:var(--acc-2);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
button,input,select{font:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:.55rem 1rem;z-index:100;font:600 .88rem/1 var(--ui)}
.skip:focus{left:8px;top:8px}

section[id],.step[id]{scroll-margin-top:calc(var(--bar) + var(--browser-safe-top,env(safe-area-inset-top)) + 14px)}

.wrap{max-width:46rem;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left))}
.wide{max-width:var(--col);margin:0 auto;padding:0 max(16px,env(safe-area-inset-left))}

/* Topbar: single line, quiet IBM Plex Sans, safe-area inset aware */
.topbar{
  position:sticky;top:0;z-index:50;
  min-height:calc(var(--bar) + var(--browser-safe-top,env(safe-area-inset-top)));
  padding:var(--browser-safe-top,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  display:flex;align-items:center;gap:.6rem;
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  border-bottom:1px solid var(--line-soft);
  font:500 .9rem/1 var(--ui);
  white-space:nowrap;
}
.home{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);text-decoration:none;font-family:var(--ui);font-weight:600;flex-shrink:0}
.home svg{color:var(--acc);flex-shrink:0}
.topnav{display:flex;align-items:center;gap:.85rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto;margin-left:.35rem}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--ink2);text-decoration:none;padding:.65rem .1rem;flex-shrink:0}
.topnav a:hover,.topnav a[aria-current="true"]{color:var(--acc)}
.spacer{flex:0 0 auto}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 .7rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-family:var(--ui);font-weight:600;font-size:.82rem;flex-shrink:0}
.chip:hover{border-color:var(--acc);color:var(--acc)}
.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;padding:0;flex-shrink:0}
.icon-btn:hover{border-color:var(--acc);color:var(--acc)}
.icon-btn svg{display:block;width:15px;height:15px}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:var(--acc)}
@media (pointer:coarse){.chip{min-height:44px;min-width:44px}.icon-btn{width:44px;height:44px}}
@media (max-width:480px){.home-label{display:none}}

/* Reading rail: quiet dots in right gutter outside widest column */
.rail{display:none}
@media(min-width:1100px){
  .rail{--gut:1.25rem;display:flex;flex-direction:column;position:fixed;top:50%;left:calc(50% + var(--col)/2 + var(--gut));transform:translateY(-50%);z-index:40;margin:0;padding:.4rem 0;max-height:calc(100vh - 7rem)}
  .rail::before{content:"";position:absolute;left:calc(.875rem - .5px);top:1.1rem;bottom:1.1rem;width:1px;background:var(--line)}
  .rail-dot{position:relative;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;text-decoration:none;border-radius:50%}
  .rail-dot .dot{width:7px;height:7px;border-radius:50%;background:var(--mut);box-shadow:0 0 0 3px var(--bg);transition:transform .2s,background .2s,box-shadow .2s;flex:none}
  .rail-dot:hover .dot,.rail-dot:focus-visible .dot{background:var(--acc);transform:scale(1.25)}
  .rail-dot[aria-current="true"] .dot{background:var(--acc);transform:scale(1.45);box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px color-mix(in srgb,var(--acc) 38%,transparent)}
  .rail-dot:focus-visible{outline:2px solid var(--acc);outline-offset:-1px}
  .rail-label{position:absolute;right:calc(100% + .3rem);top:50%;transform:translate(6px,-50%);padding:.22rem .65rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.14);font:600 .8rem/1.3 var(--ui);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
  .rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1;transform:translate(0,-50%)}
}
@media(min-width:1400px){
  .rail-label{right:auto;left:calc(100% + .15rem);max-width:calc(50vw - var(--col)/2 - var(--gut) - 3.25rem);overflow:hidden;text-overflow:ellipsis;padding:.1rem .2rem;border-color:transparent;background:transparent;box-shadow:none;color:var(--mut);transform:translate(-4px,-50%)}
  .rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{color:var(--acc)}
}
@media(prefers-reduced-motion:reduce){.rail .dot,.rail-label{transition:none}}
@media(forced-colors:active){.rail::before{background:CanvasText}.rail-dot .dot{background:CanvasText;box-shadow:none}.rail-dot[aria-current="true"] .dot{background:Highlight}.rail-label{border-color:CanvasText}}

/* Hero & Opening */
.hero{padding:clamp(1.6rem,4vw,3rem) 0 1.4rem;border-bottom:1px solid var(--line-soft)}
.kicker{font:600 .74rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin:0 0 .65rem}
h1,h2,h3{font-family:var(--serif);line-height:1.12;margin:0;text-wrap:balance;font-optical-sizing:auto}
.hero h1{font-weight:460;font-size:clamp(1.85rem,4.4vw,3.15rem);letter-spacing:-.02em;max-width:24ch;font-variation-settings:"opsz" 144}
.deck{font-size:clamp(1.04rem,1.8vw,1.24rem);line-height:1.48;color:var(--ink2);max-width:42rem;margin:.9rem 0 0}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1.4rem}
.stat-pill{background:var(--card);border:1px solid var(--line-soft);border-radius:12px;padding:.75rem .9rem;min-width:0}
.stat-n{display:block;font:600 1.15rem/1.2 var(--mono);color:var(--acc);font-variant-numeric:tabular-nums}
.stat-l{display:block;font:400 .82rem/1.35 var(--ui);color:var(--mut);margin-top:.2rem}
@media (max-width:680px){.hero-stats{grid-template-columns:1fr}}

/* Main bands */
.band{padding:clamp(2rem,4.5vw,3.2rem) 0}
.band.alt{background:var(--bg2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.band h2{font-weight:480;font-size:clamp(1.45rem,3vw,2.05rem);letter-spacing:-.012em;margin:0 0 .85rem}
.band h2 a{color:inherit;text-decoration:none}
.band h2 a:hover{text-decoration:underline}
.band h3{font-weight:550;font-size:1.18rem;margin:1.5rem 0 .5rem}
.lead{font-size:1.12rem;line-height:1.5;color:var(--ink2);max-width:44rem;margin:0 0 1rem}
p{margin:0 0 1em}

/* Converter workspace */
.conv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.25rem;align-items:start;margin-top:1.1rem}
@media (max-width:860px){.conv-grid{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:1.15rem 1.25rem;min-width:0}
.seg-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.95rem;align-items:center}
.seg-lbl{font:600 .75rem/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-right:.25rem}
.seg-btn,.fit-btn,.preset-btn{appearance:none;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:999px;min-height:40px;padding:.45rem .85rem;font:500 .86rem/1.15 var(--ui);cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.seg-btn:hover,.fit-btn:hover,.preset-btn:hover{border-color:var(--acc);color:var(--acc)}
.seg-btn[aria-pressed="true"],.fit-btn[aria-pressed="true"],.seg-btn[data-on="1"],.fit-btn[data-on="1"]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
@media (pointer:coarse){.seg-btn,.fit-btn,.preset-btn{min-height:44px}}

.input-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(7rem,.85fr);gap:.65rem;align-items:end;margin-bottom:.75rem}
.input-row .clear-btn{grid-column:1 / -1;justify-self:start}
@media (max-width:460px){.input-row{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field label{font:600 .78rem/1.2 var(--ui);color:var(--mut)}
.field select,.field input{width:100%;min-height:44px;padding:.5rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:500 .98rem/1.2 var(--mono)}
.field select{font-family:var(--ui)}
.field select:focus,.field input:focus{border-color:var(--acc)}

.clear-btn{appearance:none;background:transparent;border:1px solid var(--line);color:var(--ink2);border-radius:999px;min-height:44px;padding:.45rem .85rem;font:600 .82rem/1 var(--ui);cursor:pointer;white-space:nowrap}
.clear-btn:hover{border-color:var(--acc);color:var(--acc)}

.presets{display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0 .85rem}
.preset-btn{min-height:36px;padding:.35rem .7rem;font:500 .8rem/1 var(--mono);border-color:var(--line-soft);color:var(--ink2)}
@media (pointer:coarse){.preset-btn{min-height:44px}}

.fit-group{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem}
.fit-btn{font-size:.82rem;padding:.4rem .75rem}

.err-box{margin:.6rem 0 0;padding:.55rem .75rem;border-radius:10px;background:var(--err-bg);border:1px solid var(--err);color:var(--err);font:500 .86rem/1.4 var(--ui)}

/* Result card */
.result-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem;min-width:0}
.result-card[data-user-active="1"]{border-color:var(--acc);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 28%,transparent)}
.res-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.45rem}
.res-tag{font:600 .74rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin:0}
.res-head{font:520 clamp(1.25rem,2.4vw,1.65rem)/1.2 var(--serif);margin:0 0 .85rem;color:var(--ink)}
.out-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:.75rem 0}
@media (max-width:520px){.out-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.out-cell{background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:.6rem .7rem;min-width:0}
.out-cell.primary{border-color:var(--acc);background:var(--match-bg)}
.out-k{display:block;font:600 .72rem/1.2 var(--ui);color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.out-v{display:block;font:600 1.08rem/1.25 var(--mono);color:var(--ink);margin-top:.2rem;font-variant-numeric:tabular-nums;word-break:break-word}
.res-note{font:400 .9rem/1.48 var(--ui);color:var(--ink2);margin:.75rem 0 0;padding-top:.75rem;border-top:1px solid var(--line-soft)}

/* Share row */
.share-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0;scroll-margin-top:4.75rem}
.share-lbl{font:500 .8rem/1.2 var(--ui);color:var(--mut);margin-right:.2rem}
.share-row a,.share-row button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;padding:0;text-decoration:none}
.share-row a:hover,.share-row button:hover{border-color:var(--acc);color:var(--acc)}
.share-row svg{width:17px;height:17px;display:block}
.share-status{font:400 .8rem/1.2 var(--ui);color:var(--mut);min-height:1em}
@media (pointer:coarse){.share-row a,.share-row button{width:44px;height:44px}}

/* True-scale visual ruler & card calibration */
.ruler-box{background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:1.15rem 1.25rem;margin-top:1rem;min-width:0}
.cal-status{font:500 .86rem/1.4 var(--ui);color:var(--acc);margin:0 0 .75rem;padding:.45rem .75rem;border-radius:8px;background:var(--match-bg);display:inline-block}
.cal-status.is-calibrated{color:var(--cal);background:var(--cal-soft)}
.ruler-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg);padding:.6rem}
#ruler-canvas{display:block;height:auto}

.cal-grid{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:1.25rem;align-items:center;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line-soft)}
@media (max-width:700px){.cal-grid{grid-template-columns:minmax(0,1fr)}}
.cal-card-wrap{display:flex;justify-content:center;align-items:center;min-width:0;overflow-x:auto;padding:.4rem}
.cal-card{position:relative;width:204px;height:323px;border:2px dashed var(--cal);border-radius:12px;background:var(--cal-soft);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.8rem;user-select:none;touch-action:none;flex-shrink:0}
.cal-card-title{font:600 .8rem/1.3 var(--mono);color:var(--ink)}
.cal-card-dims{font:400 .76rem/1.3 var(--mono);color:var(--mut);margin-top:.25rem}
.cal-grip{position:absolute;right:-11px;top:50%;transform:translateY(-50%);width:22px;height:56px;border-radius:999px;background:var(--cal);color:#fff;border:2px solid var(--card);cursor:ew-resize;display:grid;place-items:center;touch-action:none}
.cal-controls{display:flex;flex-direction:column;gap:.65rem;min-width:0}
.cal-controls label{font:600 .84rem/1.3 var(--ui);color:var(--ink)}
.cal-controls input[type="range"]{width:100%;accent-color:var(--cal);min-height:44px}
.cal-btns{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.btn{appearance:none;font:500 .85rem/1 var(--ui);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;min-height:40px;padding:.5rem .95rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.btn:hover{border-color:var(--acc);color:var(--acc)}
@media (pointer:coarse){.btn{min-height:44px}}

/* Phase drift canvas */
.drift-box{background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:1rem 1.1rem;margin:1.1rem 0;min-width:0}
.drift-scroll{width:100%;min-width:0;overflow-x:auto}
#drift-canvas{display:block;width:100%;height:auto;max-width:100%}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font:500 .82rem/1.35 var(--ui);color:var(--mut);margin-top:.6rem}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;background:var(--acc)}
.legend i.uk{background:var(--cal)}

/* Server-rendered tables */
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line-soft);border-radius:14px;margin:1rem 0;min-width:0}
.table-wrap:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
table{border-collapse:collapse;width:100%;font:400 .88rem/1.35 var(--ui)}
th,td{text-align:left;padding:.58rem .7rem;border-bottom:1px solid var(--line-soft);vertical-align:middle}
th{font:600 .74rem/1.25 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--mut);background:var(--bg2);position:sticky;top:0}
td.n,th.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:hover{background:color-mix(in srgb,var(--bg2) 60%,transparent)}
tbody tr.is-match{background:var(--match-bg);font-weight:600}
tbody tr.is-match td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.table-actions{margin:.65rem 0 1.2rem}

/* FAQ & Method & Sources */
.faq-list{display:grid;gap:.85rem;margin:1rem 0}
.faq-item{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:1rem 1.15rem}
.faq-item h3{margin:0 0 .45rem;font-size:1.12rem;color:var(--ink)}
.faq-item p{margin:0;color:var(--ink2)}
.steps-list{padding-left:1.25rem;margin:.75rem 0 1rem}
.steps-list li{margin:.45rem 0}
.sources{padding-left:1.25rem;margin:.75rem 0}
.sources li{margin:.45rem 0;font:400 .9rem/1.48 var(--ui);color:var(--ink2)}

/* Footer */
footer{border-top:1px solid var(--line-soft);background:var(--bg2);font:400 .86rem/1.55 var(--ui);color:var(--mut);padding:2rem 0 3rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
footer a{color:var(--ink2)}
footer a:hover{color:var(--acc)}

@media (max-width:420px){
  .panel,.result-card,.ruler-box,.drift-box{padding:.95rem .95rem}
  th,td{padding:.48rem .5rem;font-size:.82rem}
}
@media print{
  .topbar,.rail,.share-row,.clear-btn,.cal-grid,#to-top{display:none!important}
  body{background:#fff;color:#000}
}