.practice-guide { color: var(--pg-ink); margin: 20px 0; font-size: var(--fs-lg); line-height: 1.55; }
.practice-guide h3 { font-size: var(--fs-2xl); margin: 0 0 8px; color: var(--pg-ink); }
.practice-guide p { margin: 8px 0; }
.practice-guide .pg-note { font-size: var(--fs-md); color: var(--n-700); line-height: 1.55; }
.practice-guide .pg-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.practice-guide button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--pg-line); border-radius: var(--r-sm); background: var(--n-0); color: var(--pg-ink); cursor: pointer; font: inherit; }
.practice-guide button:hover { filter: brightness(.94); }
.practice-guide button:disabled { opacity: .45; cursor: default; }
.practice-guide :is(button,summary):focus-visible { outline: 3px solid var(--accent-500); outline-offset: 3px; }
.practice-guide .pg-narration { border-left: 3px solid var(--pg-active); padding: 10px 14px; background: var(--n-50); min-height: 132px; }
.practice-guide .pg-signals { display: grid; grid-template-columns: repeat(auto-fit,minmax(175px,1fr)); gap: 8px; margin: 14px 0; }
.practice-guide .pg-signal { display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--pg-line); border-radius: var(--r-sm); font-size: var(--fs-sm); overflow-wrap: anywhere; background: var(--n-50); }
.practice-guide .pg-bit { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border: 2px solid var(--n-500); border-radius: 50%; font: bold var(--fs-xl) var(--font-mono); }
.practice-guide .pg-on { background: var(--ok-bg); border-color: var(--ok); }
.practice-guide .pg-on .pg-bit { color: var(--n-0); background: var(--accent-700); border-color: var(--accent-700); }
.practice-guide code { color: inherit; font-weight: bold; background: transparent; }
.practice-guide .pg-help { margin-top: 24px; }
.practice-guide details { border-bottom: 1px solid var(--pg-line); padding: 4px 0; }
.practice-guide summary { cursor: pointer; padding: 11px 4px; min-height: 44px; box-sizing: border-box; font-weight: 600; }
.practice-guide details p, .practice-guide details ul { padding: 0 14px 10px; }
.practice-guide details ul { padding-left: 28px; }
@media(max-width:480px) { .practice-guide .pg-signals { grid-template-columns: 1fr 1fr; gap: 5px; } .practice-guide .pg-signal { gap: 5px; padding: 6px; font-size: var(--fs-xs); } .practice-guide .pg-bit { flex-basis: 24px; height: 24px; } }