:root{
--btn-size:48px;
--btn-bg: #0b5ed7;
--btn-fg: #fff;
--btn-shadow: 0 6px 18px rgba(11,94,215,0.25);
--btn-radius: 999px;
}
html{scroll-behavior:smooth}
body{font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; line-height:1.45; margin:0; padding:0}


/* Demo content styling */
/* main{max-width:900px; margin:40px auto; padding:0 16px}
h1{font-size:clamp(1.25rem,2.4vw,2rem); margin-top:0}
p{margin:0 0 1rem} */


/* Back-to-top button */
.back-to-top{
position:fixed;
right:20px;
bottom:20px;
width:var(--btn-size);
height:var(--btn-size);
display:inline-grid;
place-items:center;
background:var(--btn-bg);
color:var(--btn-fg);
border-radius:var(--btn-radius);
box-shadow:var(--btn-shadow);
border:0;
cursor:pointer;
transform:translateY(16px) scale(.9);
opacity:0;
pointer-events:none;
transition:opacity .25s ease, transform .25s cubic-bezier(.2,.9,.2,1);
}
.back-to-top.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}


.back-to-top:focus{outline:3px solid rgba(255,255,255,0.25); outline-offset:3px}
.back-to-top svg{width:22px; height:22px; display:block}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.back-to-top{transition:none}
}


/* Small screens tweak */
@media (max-width:480px){
.back-to-top{right:12px; bottom:12px; --btn-size:44px}
}