.px-page{padding-bottom:26px}
.px-page button,.px-page a,.px-page select,.px-page input{touch-action:manipulation}
.px-heading h1{max-width:100%;overflow-wrap:anywhere}
.px-toolbar,.px-block-heading,.px-result-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.px-toolbar{margin-bottom:18px}
.px-toolbar>a,.px-link,.px-single button{color:var(--blue);font-size:13px;font-weight:700}
.px-link,.px-single button{min-height:40px;padding:3px}
.px-picker{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.px-picker select{background:white;border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;min-height:42px;padding:3px 12px;cursor:pointer}
.px-columns{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(230px,1fr);gap:18px;align-items:start}
.px-panel,.px-work{border:1px solid var(--line);background:var(--white);border-radius:16px;padding:clamp(17px,2vw,26px);min-width:0}
.px-panel h2,.px-work h2{font-size:20px;line-height:1.6;letter-spacing:-.5px;margin:0}
.px-panel p,.px-work p{font-size:14px;line-height:1.9;color:var(--muted)}
.px-modes,.px-side{display:grid;gap:12px}
.px-modes{margin-top:14px}
.px-mode{width:100%;display:flex;align-items:center;text-align:right;gap:14px;border:1px solid var(--line);padding:13px;border-radius:12px;background:#fafbf7;color:var(--ink)}
.px-mode-copy{display:grid;gap:2px}
.px-mode-copy strong{font-size:17px}
.px-mode-copy>span{font-size:12px;color:#546254}
.px-mode-end{font-size:12px;font-weight:650;color:var(--blue);margin-inline-start:auto;white-space:nowrap}
.px-glyph{display:grid;place-items:center;width:46px;height:51px;border-radius:4px;background:#dfe8ff;color:#244ba9;font:bold 22px Georgia,serif;flex:none;box-shadow:inset 4px 0 0 #0001}
.px-sentence .px-glyph{background:#dceadd;color:#386248;font-family:Georgia,serif;font-size:18px}
.px-quiz .px-glyph{background:#f2e2d1;color:#895d30}
.px-mode:hover,.px-secondary:hover,.px-tile:hover:not(:disabled){border-color:#819776}
.px-single{font-size:12px!important;margin:8px 0 0!important}
.px-single button{font-size:12px}
.px-block-heading>span,.px-tag{display:inline-block;color:#34523b;background:#e5eedb;border-radius:16px;padding:3px 11px;font-weight:680;font-size:12px}
.px-history,.px-mistakes{padding:0;list-style:none;margin:12px 0}
.px-history li,.px-mistakes li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.px-history small,.px-mistakes small{display:block;color:var(--muted);font-size:11px}
.px-mistakes bdi{font:20px Georgia,serif}
.px-primary,.px-secondary,.px-sound{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;min-height:44px;padding:8px 16px;font-weight:680;font-size:14px}
.px-primary{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.px-secondary{border:1px solid var(--line);background:#fff;color:var(--green)}
.px-sound{background:var(--lime);color:#273e20;border:1px solid #b7d66e}
.px-track{height:6px;max-width:760px;background:#e0e5dc;border-radius:6px;margin:0 auto 11px;overflow:hidden}
.px-track i{height:100%;display:block;background:var(--blue)}
.px-work{max-width:760px;margin-inline:auto;padding:clamp(20px,4vw,42px)}
.px-work .px-prompt{margin:16px 0;font-size:clamp(19px,2.6vw,29px)}
.px-work form{display:flex;flex-direction:column;align-items:stretch;gap:15px}
.px-work form>.px-primary,.px-work form>.px-sound{align-self:flex-start}
.px-input-label{font-size:13px;color:var(--muted);margin-bottom:-8px}
.px-input{width:100%;max-width:500px;border:1px solid #b9c6b7;border-radius:9px;padding:10px 14px;font:22px/1.4 Georgia,serif;background:#fafbf7;color:var(--ink)}
.px-word{font:clamp(32px,6vw,55px)/1.2 Georgia,serif!important;margin:1px 0!important;color:var(--blue)!important;overflow-wrap:anywhere}
.px-options{padding:0;border:0;margin:0;display:grid;gap:8px;grid-template-columns:1fr 1fr;min-width:0}
.px-options label{display:flex;align-items:center;min-height:50px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;gap:8px;cursor:pointer;position:relative;font-size:14px}
.px-options label:has(input:checked){border-color:var(--blue);background:#eef3ff;color:var(--blue-dark)}
.px-options label:has(input:focus-visible){outline:3px solid #c47c00;outline-offset:2px}
.px-options input,.px-visually-hidden{position:absolute;inset:auto;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.px-options small{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#ebefe8;flex:none;color:var(--green)}
.px-translation{font-weight:650;color:var(--ink)!important;margin:0}
.px-built,.px-word-bank{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:7px}
.px-built{background:#f5f7f1;border:1px dashed #a9b7a0;border-radius:9px;min-height:65px;padding:9px}
.px-built>span{color:var(--muted);font-size:13px;margin-inline-start:auto}
.px-tile{padding:6px 12px;min-height:42px;min-width:38px;border:1px solid #c5d2bf;border-radius:8px;font:19px Georgia,serif;color:var(--ink);background:#fff}
.px-built .px-tile{border-color:#9caf8e;background:#eaf2e3}
.px-hint{font-size:12px;color:var(--muted)}
.px-response h2,.px-score h2{margin:14px 0 9px}
.px-pair{margin:12px 0;display:grid;gap:6px}
.px-pair>div{display:grid;grid-template-columns:minmax(60px,90px) 1fr;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.px-pair dt{font-size:13px;color:var(--muted)}
.px-pair dd{margin:0;overflow-wrap:anywhere;text-align:start;font-size:16px}
.px-pair dd[dir=ltr]{font:23px/1.4 Georgia,serif}
.px-pair mark{padding:0 1px;background:#fae2a6;border-radius:2px;color:inherit}
.px-again .px-tag{color:#795016;background:#fbe8bb}
.px-mark{font-weight:800;font-size:clamp(48px,7vw,82px);letter-spacing:-2px;color:var(--blue);line-height:1.5}
.px-mark small{font-size:17px;letter-spacing:0;color:var(--muted)}
.px-result-actions{justify-content:flex-start}
.px-alert{border:1px solid #ddc6ae;background:#fff4e9;color:#6a3e1d;border-radius:10px;line-height:1.8;font-size:14px;padding:10px 14px}
@media(max-width:760px){.px-columns{grid-template-columns:minmax(0,1fr)}.px-side{grid-template-columns:1fr 1fr}.px-mode{gap:10px}}
@media(max-width:570px){.px-side,.px-options{grid-template-columns:minmax(0,1fr)}.px-work{padding:18px 15px}.px-mode{padding:11px 9px}.px-glyph{width:36px;height:44px;font-size:19px}.px-mode-copy strong{font-size:15px}.px-mode-copy>span,.px-mode-end{font-size:11px}.px-input{font-size:20px}.px-result-actions>*{width:100%}.px-work form>.px-primary{width:100%}.px-mode-end{white-space:normal}.px-toolbar>a{min-height:40px;display:flex;align-items:center}}
