/* Keep the original charcoal, indigo and brass palette.
   These additions dress the reading guide and retain accessibility. */
header { padding:42px 24px 24px; }
.study-route { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px auto 0; max-width:1100px; text-align:left; }
.study-route > div { flex:1 1 220px; border:1px solid #d4af3740; border-left:3px solid #d4af37; border-radius:10px; padding:12px 16px; background:linear-gradient(115deg,#d4af3714,#15151f55); box-shadow:inset 0 1px #f6d86018,0 8px 20px #0003; }
.study-route strong { display:block; color:#f6d860; font-size:.88rem; margin-bottom:4px; }
.study-route p, .study-note { font:400 .83rem/1.6 'Source Code Pro',monospace; color:#b0b0b8; text-shadow:none; }
button, a, select { transition:box-shadow .2s,border-color .2s,background-color .2s,color .2s; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid #f6d860; outline-offset:3px; }
select { color-scheme:dark; }
select option { background:#191922; color:#e8e8e8; }
* { scrollbar-width:thin; scrollbar-color:#b8941f #15151e; }
@media(max-width:650px) { header { padding:74px 8px 20px; } .study-route { gap:8px; } .study-route > div { flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.algo-description { text-shadow:none; }
#canvas-tone { display:block; width:100%; margin-top:9px; padding:10px; border-radius:8px; background:#191922; color:#e8e8e8; border:1px solid #d4af3760; }
.algo-info .study-explanation { color:#b0b0b8; }
.algo-info .study-comparison { color:#f4d03f; }