/* The lesson leaves the real action in a quiet spotlight and keeps the rest of the page legible. */
.demo-guide-shade { position: fixed; z-index: 2147483000; background: rgb(29 42 38 / 30%); pointer-events: auto; }
.demo-guide-spotlight { position: fixed; z-index: 2147483000; box-sizing: border-box; border: 1px solid rgb(73 116 88 / 35%); border-radius: 12px; box-shadow: 0 0 0 3px rgb(85 137 96 / 16%); pointer-events: none; }
.demo-guide-card { position: fixed; z-index: 2147483001; box-sizing: border-box; width: min(348px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px; border: 1px solid #d5dfd8; border-radius: 16px; background: #fffefa; color: #193d30; box-shadow: 0 8px 28px rgb(18 40 31 / 16%); font: 15px/1.5 system-ui, sans-serif; }
.demo-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 12px; font-weight: 650; }
.demo-guide-label { color: #637268; font-weight: 400; }
.demo-guide-card p { margin: 0; color: #465e50; }
.demo-guide-card strong { display: block; margin: 14px 0 6px; font-size: 18px; line-height: 1.3; text-wrap: balance; }
.demo-guide-card progress { display: block; width: 100%; height: 4px; border: 0; border-radius: 4px; overflow: hidden; background: #e7eee7; accent-color: #397345; }
.demo-guide-card progress::-webkit-progress-bar { background: #e7eee7; }
.demo-guide-card progress::-webkit-progress-value { border-radius: 4px; background: #397345; }
.demo-guide-card progress::-moz-progress-bar { border-radius: 4px; background: #397345; }
.demo-guide-actions { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 12px -8px -8px; }
.demo-guide-card button { min-height: 44px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #56675c; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.demo-guide-card button:hover { background: #edf3ec; color: #193d30; }
.demo-guide-card button:focus-visible { outline: 2px solid #397345; outline-offset: 1px; }
.demo-guide-card [data-guide-resume] { color: #245735; }
.demo-guide-card [data-guide-retry] { width: 100%; margin-top: 12px; padding: 10px 14px; background: #245735; color: #fff; text-align: center; font-size: 15px; }
.demo-guide-card[hidden], .demo-guide-card [hidden], .demo-guide-spotlight[hidden] { display: none; }
.demo-guide-on :is(.dv-next, .stand-guide-next).demo-guide-active { outline: none !important; box-shadow: 0 0 0 3px rgb(85 137 96 / 28%) !important; }
.demo-guide-on :is(.dv-next, .stand-guide-next).demo-guide-active:focus-visible { outline: 2px solid #397345 !important; outline-offset: 3px !important; }
.demo-learning-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 16px; }
.demo-learning-grid .dv-card { display: flex; flex-direction: column; }
.demo-learning-grid .btn { margin-top: auto; }
.demo-learning-badge { color: #356b43; font-weight: 600; }
.demo-learning-ledger { padding-left: 22px; }
.demo-learning-ledger li { margin: 16px 0; }
.demo-learning-ledger p { margin: 4px 0; }
@media (max-width: 400px) { .demo-guide-card { padding: 14px; } .demo-guide-card strong { font-size: 17px; } }