/* Yeqerun visual refresh: warmer editorial canvas, clearer surfaces, consistent focus and motion. */
:root{
  --bg:#f7f6f2;--bg2:#eeece5;--ink:#252b25;--muted:#68716a;
  --accent:#a4532e;--accent2:#c47b45;--on-accent:#fffaf3;
  --card:#fffefa;--line:rgba(38,45,38,.13);--chip:#f3eee4;
  --surface-shadow:0 12px 36px rgba(48,42,29,.055);
}
@media(prefers-color-scheme:dark){
  :root{--bg:#141914;--bg2:#1a211b;--ink:#edf1e8;--muted:#b3bdae;--accent:#e0a16d;--accent2:#d49a57;--on-accent:#201810;--card:#1c241d;--line:rgba(237,241,232,.13);--chip:#242d24;--surface-shadow:0 16px 40px rgba(0,0,0,.18)}
}
html{scroll-padding-top:86px}
body{background-color:var(--bg);background-image:radial-gradient(ellipse at 85% -5%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 35rem),linear-gradient(180deg,var(--bg),var(--bg2) 125%);background-attachment:scroll}
.wrap{max-width:1120px}
.top{background:color-mix(in srgb,var(--bg) 91%,transparent);backdrop-filter:blur(14px);box-shadow:0 5px 22px rgba(34,39,32,.035)}
.bar{height:72px}
.logo{height:40px}
.nav a{transition:color .18s,border-color .18s}
.btn{box-shadow:0 5px 15px -10px var(--accent);transition:transform .18s,box-shadow .18s,background-color .18s}
.btn:hover{box-shadow:0 10px 24px -10px var(--accent)}
.btn-ghost{box-shadow:none}
.hero{padding:clamp(54px,8vw,92px) 0 clamp(48px,7vw,78px)}
.hero h1{max-width:14ch;letter-spacing:-.035em}
.lead{max-width:38em;line-height:1.95;color:var(--muted)}
.kicker{font-size:15px}
.coin-a,.coin-b{filter:saturate(.8);opacity:.14}
section{padding:clamp(40px,6vw,68px) 0}
h2{letter-spacing:-.02em}
.cards{gap:18px}
.cards article,.hub-grid a,.related a,.faq details,.vids,.answer,.toc,.app-hero,.app-footer-cta,.tool-card,.aside-box,.calc-shell,.chart-box,.table-section,.tool-cta{
  box-shadow:var(--surface-shadow)
}
.cards article,.hub-grid a,.related a{border-radius:20px;transition:transform .2s,border-color .2s,box-shadow .2s}
.cards article:hover,.hub-grid a:hover,.related a:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:0 16px 38px rgba(48,42,29,.09)}
.cards h3,.hub-grid h3{color:var(--ink)}
.cards h3:before{content:"";display:inline-block;width:7px;height:7px;margin-inline-end:9px;vertical-align:middle;border-radius:50%;background:var(--accent2)}
.cta .wrap{max-width:820px;border-radius:28px;padding:clamp(28px,5vw,52px) 22px;background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--chip) 68%,var(--card)));box-shadow:var(--surface-shadow)}
footer{padding-top:36px}
.crumbs{margin-top:22px}
.article{padding-bottom:54px}
.article .wrap{max-width:800px}
.article h1{letter-spacing:-.035em;line-height:1.45}
.article h2{margin-top:46px;padding-top:5px}
.answer{border-radius:18px;padding:20px 22px;background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--chip) 55%,var(--card)))}
.toc{border-radius:18px;background:var(--card)}
.tbl th{background:var(--chip)}
.tbl th,.tbl td{padding:11px 14px}
.faq details{padding:8px 18px;border-radius:16px}
.faq summary{padding:10px 0}
.related a{height:100%}
.app-footer-cta{border-radius:20px;background:linear-gradient(110deg,var(--chip),var(--card));padding:20px 22px}
.app-hero{background:radial-gradient(ellipse at 95% 0%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 55%),linear-gradient(135deg,var(--chip),var(--card));border-radius:30px}
.app-page .app-current{border-bottom-color:var(--line)}
:where(input,select,textarea,button){font:inherit}
:where(input,select,textarea){border-radius:12px;transition:border-color .18s,box-shadow .18s,background-color .18s}
:where(input,select,textarea):focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.tool-page .tool-intro{padding-block:32px 22px}
.tool-page .tool-intro h1{letter-spacing:-.025em}
.tool-page .calc-shell{border-radius:24px;overflow:hidden}
.tool-page .calc-input,.tool-page .calc-output{padding:clamp(20px,3vw,30px)}
.tool-page .field{margin-bottom:16px}
.tool-page .calc-buttons{gap:12px}
.tool-page .result-summary{border-radius:18px}
.tool-page .tool-cards{gap:16px}
.tool-page .tool-card{border-radius:20px;transition:transform .2s,border-color .2s,box-shadow .2s}
.tool-page .tool-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
@media(max-width:760px){
  .wrap{padding-inline:18px}
  .bar{height:64px}
  .hero h1{max-width:16ch}
  .cards{gap:13px}
  .app-footer-cta{align-items:flex-start}
}
@media(max-width:560px){
  body{font-size:16px}
  .logo{height:34px}
  .hero{padding-top:46px}
  .hero h1{font-size:clamp(34px,10vw,48px)}
  .actions .btn{padding-inline:20px}
  .article h2{margin-top:36px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}