/* A transparent body and a sharp, rounded inner rim make thickness visible without extra blur surfaces. */
.scroll-atmosphere .glass,.scroll-atmosphere .approach-card,.scroll-atmosphere .task-recommendation,.scroll-atmosphere .chapter{border-color:rgb(255 255 255 / .8);background:linear-gradient(125deg,rgb(255 255 255 / .32),transparent 24%,rgb(255 255 255 / .08) 68%,rgb(216 184 124 / .13)),linear-gradient(145deg,rgb(var(--tone-panel)/.72),rgb(var(--tone-panel-2)/.52));box-shadow:inset 0 1px 1px #ffffffee,inset 1px 0 1px #ffffff99,inset 0 -1px 1px #b8cbd2aa,inset -2px -2px 5px #8a9ba524,inset 0 0 18px #ffffff26,0 12px 30px #17232b15}
.tone-panel-dark .glass,.tone-panel-dark .approach-card,.tone-panel-dark .task-recommendation,.tone-panel-dark .chapter{border-color:#d5e4ef70;box-shadow:inset 0 1px 1px #eff8ffbb,inset 1px 0 1px #e0eeff55,inset 0 -1px 1px #d8b87c88,inset -2px -2px 6px #0002,0 14px 34px #0003}
.pointer-card-light:after{background:radial-gradient(ellipse 280px 220px at var(--pointer-light-x,50%) var(--pointer-light-y,50%),#ffffff80 0%,#fff3d650 18%,#e9c98730 38%,transparent 76%),linear-gradient(125deg,transparent 20%,#ffffff12 38%,#ffffff44 41%,#ffffff09 44%,transparent 60%);box-shadow:inset 0 1px 8px #ffffff44,inset 0 -2px 8px #d8b87c20}
.button:before{background:linear-gradient(110deg,transparent 25%,#d8b87c00 36%,#eacb8c55 46%,#fff7e0aa 49%,#eacb8c55 53%,transparent 65%)}.button:after{opacity:.85}
.scroll-atmosphere .orb{box-shadow:inset 3px 3px 12px #ffffff99,inset -2px -2px 4px #7999b199,inset 0 -1px 1px #d8b87c88,8px 12px 24px #17232b20}
@media(max-width:720px){.scroll-atmosphere .glass,.scroll-atmosphere .approach-card,.scroll-atmosphere .task-recommendation,.scroll-atmosphere .chapter{background:linear-gradient(130deg,#ffffff38,transparent 35%,#d8b87c12),linear-gradient(145deg,rgb(var(--tone-panel)/.86),rgb(var(--tone-panel-2)/.72));box-shadow:inset 0 1px 1px #ffffffee,inset 1px 0 1px #ffffff88,inset 0 -1px 2px #b2c4cc99,0 9px 22px #17232b12}}