/* Shared controls: comfortably tappable without depending on a drag gesture. */
.compare-modes{display:flex;gap:6px;padding:10px;background:var(--cream,#fff8ed);flex-wrap:wrap}
.compare-modes button{flex:1;min-height:44px;padding:8px 10px;border:1px solid #b6a58a;border-radius:10px;background:#fffaf0;color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.compare-modes button[aria-pressed=true]{background:var(--green);color:#fff;border-color:var(--green)}
.compare-line::after{content:'‹ ›';width:48px;height:48px;border:3px solid var(--green);box-shadow:0 2px 8px #0003;font-size:22px;line-height:1}
.compare-full .compare-line{visibility:hidden}
.compare-tag[hidden]{display:none}
.compare-hit{touch-action:pan-y}
.lesson-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 4px;padding:14px 0;border-top:1px solid var(--line)}
.lesson-pagination button{min-height:44px;color:var(--ink);white-space:normal}
.lesson-pagination span{font-size:13px;color:#665947;white-space:nowrap}
.lesson-pagination button:disabled{opacity:.45;cursor:default;transform:none}
#topic-main h2{scroll-margin-top:100px}
.compare-modes button:focus-visible,.lesson-pagination button:focus-visible,.feature-card:focus-visible,.recipe-card:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .feature-card,.gear-card,.recipe-card{position:relative;isolation:isolate}
 .feature-card::before,.gear-card::before,.recipe-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(240px circle at var(--spot-x,50%) var(--spot-y,50%),#fff9,transparent 75%);opacity:0;transition:opacity .18s ease;z-index:-1}
 .is-spotlit::before{opacity:1}
}
@media(prefers-reduced-motion:no-preference){
 .js-motion .page.active .reveal-target{transition-duration:.32s;transition-timing-function:cubic-bezier(.2,.7,.3,1)}
 .feature-card:active,.recipe-card:active{transform:scale(.985)}
 .compare-modes button{transition:background-color .16s ease,color .16s ease}
}
@media(pointer:coarse){
 .feature-card:active,.recipe-card:active,.gear-card:active{box-shadow:inset 0 0 0 2px var(--green);background-color:#e5ebd6}
}
@media(max-width:600px){.lesson-pagination{gap:6px}.lesson-pagination button{padding:10px;font-size:13px}.compare-modes{padding:8px;gap:5px}.compare-modes button{padding:8px 5px}}