/* The keyboard editor belongs to the desktop controls screen. */
html.phone #pvKeysOptions{display:none!important}
body:has(#pause:not([hidden]),#opts:not([hidden]),#keys:not([hidden])) #tut{display:none!important}
.pv-opts-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
html:not(.phone) #keys:not([hidden]){justify-content:safe center;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;gap:14px}
html:not(.phone) #keys>*{flex-shrink:0}
html:not(.phone) #keys .cols{width:min(870px,100%);grid-template-columns:minmax(0,1.55fr) minmax(230px,1fr);align-items:start;gap:14px}
html:not(.phone) #keys>.panel:not(#touchHelp){width:min(870px,100%);padding:12px 16px;gap:6px}
#keys .pv-key-editor{width:100%;min-width:0;padding:16px;gap:10px}
.pv-key-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pv-key-header p{margin:4px 0 0;color:#e8e0d1;font:600 14px/1.25 BarlowSC,Arial,sans-serif}
#pvKeysReset{flex-shrink:0}
.pv-key-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pv-key-row{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;min-height:39px;padding:5px 7px 5px 9px;border:1px solid #d8cdb34d;border-radius:3px;background:#292e38;color:#fff3da;text-align:left;font:700 15px/1.15 BarlowSC,Arial,sans-serif;cursor:pointer}
.pv-key-row:hover,.pv-key-row[aria-pressed="true"]{border-color:#f6efda;background:#42313b}
.pv-key-row:focus-visible{outline:2px solid #ffc766;outline-offset:1px}
.pv-key-row kbd{flex-shrink:0;min-width:26px;max-width:64%;padding:4px 6px;border:1px solid #f6efda99;border-radius:2px;background:#f6efda;color:#211c24;text-align:center;overflow-wrap:anywhere;font:700 14px/1 BarlowSC,Arial,sans-serif}
.pv-key-row[aria-pressed="true"] kbd{background:#ffc766;border-color:#ffc766}
.pv-key-status{min-height:2.35em;margin:0;font:600 14px/1.18 BarlowSC,Arial,sans-serif;color:#e8e0d1}
.pv-key-status[data-kind="success"]{color:#b8f0c5}
.pv-key-status[data-kind="error"]{color:#ffc0bd}
@media(max-width:690px){html:not(.phone) #keys .cols{grid-template-columns:1fr}html:not(.phone) #keys .cols>.panel{width:100%}}
@media(max-height:700px),(max-width:690px){
 html:not(.phone) #keys{scroll-padding-bottom:66px}
 html:not(.phone) #keys>.row:has(#keysBack){position:sticky;bottom:0;z-index:2;width:min(870px,100%);padding:7px 0;background:#1b2029f5}
}
@media(max-width:410px){.pv-key-header{flex-wrap:wrap}.pv-key-grid{grid-template-columns:1fr}}