.fx-accent,[data-cat],[data-arrt]{--cat: var(--primary-400);--cat-fill: var(--primary-400);--cat-soft: var(--primary-100);--cat-faint: var(--primary-50);--cat-ink: var(--primary-600)}[data-cat=SA],[data-arrt=SA]{--cat: var(--amber-400);--cat-fill: var(--amber-400);--cat-soft: var(--amber-100);--cat-faint: var(--amber-50);--cat-ink: var(--amber-600)}[data-cat=IP],[data-arrt=IP]{--cat: var(--teal-400);--cat-fill: var(--teal-400);--cat-soft: var(--teal-100);--cat-faint: var(--teal-50);--cat-ink: var(--teal-600)}[data-cat=PR],[data-arrt=PR]{--cat: var(--coral-400);--cat-fill: var(--coral-400);--cat-soft: var(--coral-100);--cat-faint: var(--coral-50);--cat-ink: var(--coral-600)}[data-cat=PC],[data-arrt=PC]{--cat: var(--sky-400);--cat-fill: var(--sky-400);--cat-soft: var(--sky-100);--cat-faint: var(--sky-50);--cat-ink: var(--sky-600)}[data-cat] .page-header .ph-tile{background:var(--cat-soft);border-color:var(--cat);color:var(--cat-ink);box-shadow:0 3px 0 var(--cat)}[data-cat] .page-header .ph-eyebrow{color:var(--cat-ink)}.fx-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-pill);background:var(--cat-soft);color:var(--cat-ink);font-size:var(--type-body-sm);font-weight:800;line-height:1.4}.fx-tag:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cat);flex:none}.fx-icon{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--cat-fill);color:var(--ink)}.fx-icon--brand{background:var(--brand);color:var(--surface)}.fx-icon--gold{background:var(--gold-400);color:var(--ink)}.fx-icon--ink{background:var(--ink);color:var(--surface)}.fx-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0}.fx-steps>*{flex:1 1 0;min-width:10px;height:12px;border-radius:var(--radius-pill);background:var(--surface-muted);box-shadow:inset 0 -3px 0 var(--border)}.fx-steps>.is-right{background:var(--success);box-shadow:inset 0 -3px 0 var(--success-500)}.fx-steps>.is-wrong{background:var(--coral-400);box-shadow:inset 0 -3px 0 var(--coral-500)}.fx-steps>.is-now{background:var(--cat-soft);box-shadow:inset 0 0 0 2px var(--cat)}.fx-bar{display:block;width:100%;height:12px;border-radius:var(--radius-pill);background:var(--surface-muted);overflow:hidden}.fx-bar>span{display:block;height:100%;width:calc(var(--fx-done, 0) * 100%);border-radius:inherit;background:var(--success);transition:width .3s ease}.fx-num{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:var(--radius-pill);background:var(--cat-faint);color:var(--cat-ink);font-size:var(--type-body-sm);font-weight:800}.fx-num b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cat-fill);color:var(--ink);font-family:var(--font-mono);font-weight:700}.practice-input{flex:1;min-width:0;min-height:52px;padding:0 16px;border:2px solid var(--border-hover);border-radius:var(--radius-input);box-shadow:inset 0 3px 0 var(--surface-muted);font:inherit;font-size:var(--type-body-lg);font-weight:700;background:var(--surface);color:var(--ink)}.practice-input::-moz-placeholder{font-weight:600;color:var(--ink-muted)}.practice-input::placeholder{font-weight:600;color:var(--ink-muted)}.practice-input:focus{outline:none;border-color:var(--brand);box-shadow:var(--shadow-focus)}.practice-input:disabled{background:var(--bg)}.fx-check{min-height:52px;padding:0 28px}.practice-result{position:relative;padding:14px 16px 14px 56px;border-radius:var(--radius-md);font-size:var(--type-body);line-height:1.5;border:2px solid}.practice-result:before{position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:var(--type-body-md)}.practice-result.is-correct{background:var(--success-100);color:var(--success-600);border-color:var(--success-400);box-shadow:0 4px 0 var(--success-400)}.practice-result.is-correct:before{content:"✓";background:var(--success);color:var(--ink)}.practice-result.is-wrong{background:var(--coral-100);color:var(--coral-600);border-color:var(--coral-400);box-shadow:0 4px 0 var(--coral-400)}.practice-result.is-wrong:before{content:"✕";background:var(--coral-500);color:var(--surface)}.practice-result.is-info{background:var(--surface);color:var(--ink-muted);border-color:var(--border);padding-left:16px}.practice-result strong{color:inherit}.practice-result .practice-extra{margin:6px 0 0;font-size:var(--type-body-sm)}@media(prefers-reduced-motion:no-preference){.practice-result.is-correct,.practice-result.is-wrong{animation:fx-pop .26s cubic-bezier(.34,1.56,.64,1)}}.fx-press{border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:0 4px 0 var(--border);text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}a.fx-press:hover,button.fx-press:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--border)}a.fx-press:active,button.fx-press:active{transform:translateY(4px);box-shadow:none}.fx-press:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}@keyframes fx-pop{0%{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fx-flip{0%{transform:perspective(700px) rotateY(-90deg)}to{transform:perspective(700px) rotateY(0)}}@keyframes fx-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media(prefers-reduced-motion:reduce){.fx-press,.fx-bar>span{transition:none}a.fx-press:hover,a.fx-press:active,button.fx-press:hover,button.fx-press:active{transform:none}}