:root{--accent:#56B4E9;--accent-2:#0072B2}
.pg-alpha{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center}
.pg-alpha-grid{display:grid;grid-template-columns:repeat(6,48px);gap:12px;color:#9ca3af}
.pg-alpha-grid svg{width:48px;height:48px;display:block}
.pg-alpha figcaption,.fp-note{color:var(--muted);font-size:.85rem;max-width:42ch;text-align:center}
.pg-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:820px){.pg-demo{grid-template-columns:1fr}}
.pg-form,.pg-panel{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px}
.pg-form label{font-weight:500}
.pg-field{display:flex;align-items:center;color:#9ca3af}
.pg-field input{flex:1;font:inherit;font-family:var(--mono);padding:11px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--bg-elev);color:var(--text)}
.pg-field input:focus-visible,.pg-panel input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pg-field .passglyph-glyph{margin-inline-start:10px}
.pg-field .passglyph-mismatch{outline:2px dashed #D55E00;outline-offset:3px;border-radius:4px}
.pg-field .passglyph-match{outline:2px solid #009E73;outline-offset:3px;border-radius:4px}
.pg-status{min-height:1.6em;color:var(--text-2);margin:6px 0}
.pg-status.ok{color:#6fdc9a}.pg-status.bad{color:#f5c56b}
.pg-panel input[type=range]{accent-color:var(--accent);width:100%}
.pg-trade th{text-align:left;font-weight:500;color:var(--text-2)}
.pg-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--panel-2)}
.pg-bar span{display:block;height:100%}
#bar-miss{background:#009E73}#bar-leak{background:#D55E00;margin-left:auto}
.pg-list li{margin:.5em 0}
#alphabet{width:384px;height:192px;max-width:100%}
.pg-field{position:relative}
.pg-field input{font-size:20px}
.pg-mode{border:0;padding:0;margin:6px 0;display:flex;gap:16px;align-items:center}.pg-mode legend{float:left;margin-right:8px;font-weight:500}
.pg-check{font-weight:400!important}
.pg-naive{border:1px dashed #D55E00;border-radius:var(--r-sm);padding:12px;color:var(--text-2)}
#naive-cv{width:600px;height:40px;max-width:100%}