/* var.32 — Modern UI Phase 16: Navigation & Content Polish */
html { scroll-padding-top: clamp(76px, 9vw, 112px); }
body { overflow-anchor: auto; }
.ui-scroll-progress { position:fixed; inset:0 0 auto; height:3px; z-index:10020; pointer-events:none; transform-origin:left center; transform:scaleX(0); background:currentColor; color:var(--accent,#2f7d57); opacity:.72; transition:transform 80ms linear,opacity .2s ease; }
.ui-scroll-progress[hidden] { display:none; }
.ui-back-to-top { position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(18px,calc(env(safe-area-inset-bottom) + 18px)); width:46px; height:46px; border:0; border-radius:999px; display:grid; place-items:center; z-index:10010; cursor:pointer; background:var(--accent,#2f7d57); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .18s ease,transform .18s ease,visibility .18s; }
.ui-back-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.ui-back-to-top:hover { transform:translateY(-2px); }
.ui-back-to-top:active { transform:translateY(0) scale(.96); }
.ui-back-to-top svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.25; }
:where(main,article,section) :is(h2,h3,h4)[id] { scroll-margin-top:clamp(84px,10vw,120px); }
:where(p,li,dd,figcaption)>a { text-underline-offset:.16em; text-decoration-thickness:.08em; }
:where(p,li,dd,figcaption)>a:hover { text-decoration-thickness:.13em; }
@media (max-width:640px) { .ui-back-to-top { width:44px; height:44px; right:max(12px,env(safe-area-inset-right)); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; } .ui-back-to-top,.ui-scroll-progress { transition:none!important; } }
@media print { .ui-scroll-progress,.ui-back-to-top { display:none!important; } }