/* Preserve Loaderly Graphite tokens. Refine spacing and interaction only. */
.home .landing{padding-top:42px}
.home-intro .hero{padding-block:28px 22px}
.home-shortcuts{display:flex;justify-content:center;flex-wrap:wrap;gap:9px 24px;margin:25px auto 4px;padding-top:12px;width:fit-content;max-width:100%}
.home-shortcuts a{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);padding:7px 5px;border-radius:6px}
.home-shortcuts svg{width:16px;height:16px}.home-shortcuts a:hover{color:var(--text);background:var(--surface)}
.creation-highlights,.landing-section{scroll-margin-top:100px}.home .demo-showcase{margin-top:32px}
.home .demo-heading,.home .section-intro{align-items:flex-end}
.home .demo-story-intro{max-width:29ch}
.home .demo-chapters button{position:relative}
.home .demo-chapters button::after{content:'';position:absolute;inset-inline-start:0;top:20%;bottom:20%;width:2px;border-radius:2px;background:var(--green);opacity:0}
.home .demo-chapters button[aria-current=true]::after{opacity:1}
.creation-feature{scroll-margin-top:100px}
.creation-feature figure{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0;background:var(--surface)}
.reading-progress{position:fixed;top:75px;inset-inline:0;height:2px;z-index:25;pointer-events:none;direction:ltr}
.reading-progress span{display:block;width:100%;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left}
.back-to-top{position:fixed;inset-inline-end:24px;bottom:24px;z-index:18;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);width:40px;height:40px;border-radius:10px}
.back-to-top[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
 .home-shortcuts a,.topic-card,.secondary-button,.demo-chapters button,.back-to-top{transition:background-color .18s,border-color .18s,color .18s,transform .18s}
 .topic-card:hover{transform:translateY(-3px)}
 .secondary-button:hover{transform:translateY(-1px)}
 .demo-chapters button::after{transition:opacity .2s}
 .reveal-ready{opacity:.4;translate:0 12px;transition:opacity .5s,translate .5s}
 .reveal-ready.is-revealed{opacity:1;translate:0 0}
 .home-intro .hero h1{animation:loaderly-intro .55s both}
 .home-intro .hero .lead{animation:loaderly-intro .55s .08s both}
 @keyframes loaderly-intro{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
}
@media(max-width:800px){
 .home .landing{padding-top:22px}.home-intro .hero{padding-block:18px 10px}
 .home-shortcuts{gap:4px 14px;margin-top:20px;padding-top:15px}.home-shortcuts a{font-size:11px;gap:6px}
 .home .demo-heading,.home .section-intro{align-items:flex-start}.home .demo-showcase{margin-top:26px}
 .reading-progress{top:65px}.back-to-top{inset-inline-end:16px;bottom:16px}
}