:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#292b27;background:#f7f7f4;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--muted: #777b72;--line: #e5e6df;--green: #4d6b4a;--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{min-width:280px;overflow:hidden;overscroll-behavior:none}#root{display:flex;justify-content:center}button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button,input{-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.4}button,input{outline-offset:3px}:focus-visible{outline:2px solid #68875e}h1,h2,h3,p,dl{margin:0}.app-shell{width:min(100%,1100px);height:100vh;height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;position:relative}.trainer-panel{flex:1;min-width:0;min-height:0;display:grid;grid-template-rows:48px minmax(0,1fr) 56px 32px;padding:0 clamp(10px,2vw,24px);border:1px solid var(--line);border-radius:9px;background:#fff}.trainer-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}h1{font-size:16px;font-weight:500;letter-spacing:-.3px}.trainer-tools{display:flex;align-items:center;flex-shrink:0}.icon-button{display:inline-grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:#70796a}.icon-button:hover:not(:disabled){background:#f0f2eb;color:#384b2e}.drill-content{position:relative;min-height:0;min-width:0;container-type:size}.drill-input{width:100%;height:100%}.drill-board{--columns: 3;--card-rows: 3;--choice-weight: 2;--card-gap: clamp(8px, 2cqw, 18px);--board-gap: clamp(10px, 2cqh, 24px);--card-width: min(240px, calc((100cqw - 2 * var(--card-gap)) / var(--columns)), calc((100cqh - 24px - 2 * var(--board-gap) - (var(--choice-weight) - 1) * var(--card-gap) - 12px) * 1.6 / var(--card-rows)));display:grid;grid-template-rows:max-content 24px max-content;align-content:center;gap:var(--board-gap);width:100%;height:100%;padding:4px 0}.prompt-pair{display:flex;align-items:center;justify-content:center;gap:var(--card-gap);min-height:0}.prompt-card,.card-choice{width:var(--card-width);flex-shrink:0;border:1px solid #dedfd7;border-radius:6px;background:#fff}.set-card{display:block;width:100%;height:auto}.choice-divider{display:flex;align-items:center;gap:14px;justify-self:center;width:min(100%,480px);color:#92988a;font-size:11px}.choice-divider:before,.choice-divider:after{content:"";height:1px;flex:1;background:#e9ece3}.choices-grid{display:grid;grid-template-columns:repeat(var(--columns),var(--card-width));align-content:center;justify-content:center;gap:var(--card-gap);min-height:0}.card-choice{position:relative;display:block;padding:0;min-height:44px;line-height:0;transition:border-color .12s,background-color .12s}.card-choice:hover:not(:disabled){border-color:#8e9b83;background:#fafbf8}.card-choice:disabled{opacity:1}.card-choice--correct{border-color:#6f9064;background:#f3f7ef}.card-choice--incorrect{border-color:#c17c70;background:#fcf4f1}.card-choice--muted{opacity:.4!important}.choice-key{position:absolute;top:8px;left:9px;color:#a0a398;font:10px/1 var(--mono)}.choice-mark{position:absolute;top:5px;right:8px;color:var(--green);font-size:15px;line-height:1}.card-choice--incorrect .choice-mark{color:#aa5a4d}.answer-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #eef0e9}.feedback{display:flex;align-items:center;gap:12px;font-size:13px}.feedback-correct{color:var(--green)}.feedback-incorrect{color:#aa5a4d}.feedback-time{font:11px var(--mono);color:#8a8f82}.keyboard-hint{color:#909789;font-size:11px}kbd{font:11px var(--mono)}.next-button,.primary-button{min-height:44px;padding:8px 18px;border:1px solid #d6dbce;border-radius:6px;background:#f4f6ef;color:#52664a;font-size:13px}.next-button{min-width:100px}.next-button:hover:not(:disabled),.primary-button:hover{border-color:#8da17e}.next-button>span{margin-left:18px;color:#8c9a82}.axis-feedback{display:grid;grid-template-columns:repeat(4,max-content);align-content:start;justify-content:center;gap:4px 18px;padding-top:3px;color:#969c8d;font-size:11px}.axis-feedback b{font-weight:400;color:#68725e}.axis-feedback .axis-mismatch,.axis-feedback .axis-mismatch b{color:#aa5a4d}.drill-hidden{visibility:hidden}.pause-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;background:#fff;color:#7e8674;font-size:15px}.empty-trainer{grid-row:2 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#89927d;font-size:14px}.builder-board{--card-gap: clamp(8px, 2cqw, 18px);--builder-gap: clamp(20px, 4cqh, 36px);--trait-height: clamp(44px, calc((100cqh - 180px)/4) , 100px);--selector-gap: clamp(8px, 2cqh, 14px);--selector-label-height: 18px;--selector-heading-gap: 8px;--selector-height: calc(var(--selector-label-height) + var(--selector-heading-gap) + 3 * var(--trait-height) + 2 * var(--selector-gap));--card-width: min(180px, calc((100cqw - 2 * var(--card-gap)) / 3), calc((100cqh - var(--selector-height) - var(--builder-gap) - 28px) * 1.6));display:grid;grid-template-rows:max-content max-content;align-content:center;gap:var(--builder-gap);width:100%;height:100%;padding:4px 0}.builder-reference{display:flex;justify-content:center;align-items:center;gap:var(--card-gap);padding-bottom:18px}.builder-preview{position:relative;width:var(--card-width);aspect-ratio:160 / 100;display:grid;place-items:center;border:1px dashed #cfd6c6;border-radius:6px;background:#fafbf8}.builder-preview:has(.set-card){border-style:solid}.builder-placeholder{color:#b3bcaa;font:24px var(--mono)}.builder-preview--correct{border-color:#6f9064;background:#f3f7ef}.builder-preview--incorrect{border-color:#c17c70;background:#fcf4f1}.builder-preview-label{position:absolute;top:calc(100% + 6px);left:0;width:100%;color:#929b86;font-size:10px;text-align:center}.builder-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2cqw,18px);width:100%;height:var(--selector-height)}.builder-axis{display:grid;grid-template-rows:var(--selector-label-height) minmax(0,1fr);align-items:stretch;gap:var(--selector-heading-gap);min-width:0;color:#7b8570;font-size:12px;text-align:center}.builder-fields .trait-switch{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--selector-gap);padding:0;background:none}.builder-fields .trait-switch label>span{height:100%;min-height:44px;padding:0;border-color:#e1e5da;background:#f8f9f5}.builder-fields .trait-switch input:checked+span{border-color:#aabb9b;background:#f5f8f0}.builder-fields .trait-switch input:disabled+span{opacity:.65}.trait-symbol{height:clamp(30px,calc(var(--trait-height) * .7),72px);width:auto}.trait-number{font:clamp(22px,calc(var(--trait-height) * .4),36px) var(--mono)}.trait-swatch{width:clamp(22px,calc(var(--trait-height) * .45),40px);aspect-ratio:1;border-radius:50%}.menu-dialog{width:min(480px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));left:env(safe-area-inset-left);right:env(safe-area-inset-right);max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:auto;padding:0;border:1px solid #d9ddd2;border-radius:12px;background:#fdfdfb;color:inherit;overscroll-behavior:contain}.menu-dialog::backdrop{background:#1e221947}.menu-heading{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:4px 8px 4px 20px;border-bottom:1px solid var(--line)}.menu-heading h2{font-size:15px;font-weight:550}.menu-title{display:flex;align-items:baseline;gap:12px}.menu-title>span{color:#858e7b;font-size:11px}.settings-content{display:grid;gap:24px;padding:20px}.settings-secondary{display:grid;align-content:start;gap:16px;min-width:0}.settings-section{min-width:0;margin:0;padding:0;border:0}.settings-section legend{margin-bottom:12px;padding:0;color:#5f6b55;font-size:12px}.axis-filters{display:grid;gap:6px}.axis-filter{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:8px;font-size:12px}.axis-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:2px;border-radius:7px;background:#eeefe9}.axis-switch label{position:relative;min-width:0;cursor:pointer}.axis-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.axis-switch label>span{display:grid;place-items:center;min-height:44px;padding:4px 2px;border:1px solid transparent;border-radius:5px;color:#7b8072;font-size:12px}.axis-switch input:checked+span{border-color:#dddfd5;background:#fff;color:#394431}.axis-switch input:focus-visible+span{outline:2px solid #68875e;outline-offset:-2px}.pattern-count{padding-left:56px}.settings-note{margin-top:10px;color:#858d7b;font-size:11px;line-height:1.5}.strategy-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:3px;border-radius:7px;background:#eeefe9}.strategy-switch button{min-height:44px;padding:6px;border:1px solid transparent;border-radius:5px;background:transparent;color:#7b8072;font-size:12px}.strategy-switch button[aria-pressed=true]{border-color:#dddfd5;background:#fff;color:#394431}.text-button{min-height:44px;padding:4px 8px;border:0;background:none;color:var(--muted);font-size:12px}.text-button:hover:not(:disabled){color:#292b27}.stats-content{display:grid;gap:18px;padding:20px 20px 0}.stats-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.stats-summary .strategy-switch{grid-column:1 / -1}.session-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:8px 0}.session-stats dt{margin-bottom:7px;color:var(--muted);font-size:10px;white-space:nowrap}.session-stats dd{margin:0;font:21px/1 var(--mono);letter-spacing:-.8px}.unit{color:#92958b}.new-session-button{font-size:11px}.pattern-table{width:100%;border-collapse:collapse;table-layout:fixed}.pattern-table th,.pattern-table td{text-align:right}.pattern-table thead th{height:28px;border-bottom:1px solid var(--line);color:#8b9380;font-size:10px;font-weight:400}.pattern-table th:first-child{width:55%;text-align:left}.pattern-table th:nth-child(2){width:10%}.pattern-table tbody th{height:32px;font-size:11px;font-weight:400}.pattern-table td{padding:0;color:#758267;font:11px var(--mono)}.stats-pagination{display:flex;align-items:center;justify-content:space-between;color:#929a86;font:10px var(--mono)}.stats-pagination>div{display:flex}.stats-pagination .icon-button{font-size:23px}.progress-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:0 12px 0 20px;border-top:1px solid var(--line);color:#8b937f;font-size:11px}.clear-confirmation{display:flex;align-items:center;gap:4px}.danger{color:#aa5a4d}.storage-error{position:absolute;left:24px;bottom:max(8px,env(safe-area-inset-bottom));background:#fff;color:#aa5a4d;font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:600px)and (orientation:portrait){.drill-board{--columns: 2;--card-rows: 4;--choice-weight: 3}}@media(max-height:560px)and (orientation:landscape){.builder-board{--trait-height: clamp(44px, calc((100cqh - 40px) / 3), 80px);--selector-gap: 4px;--selector-label-height: 14px;--selector-heading-gap: 4px;--card-width: min(150px, calc((100cqw - 16px)*.325) , calc((100cqh - 42px) * 1.6 / 3));grid-template-columns:minmax(0,.65fr) minmax(208px,1.35fr);grid-template-rows:minmax(0,1fr);gap:16px;align-items:center}.builder-reference,.builder-reference .prompt-pair{flex-direction:column;gap:6px}.builder-fields{gap:6px}.builder-axis{font-size:11px}.drill-board{--card-width: min(220px, calc((100cqw - 2 * var(--board-gap) - 1px - 2 * var(--card-gap)) / 4), calc((100cqh - var(--card-gap) - 12px) * 1.6 / 2));grid-template-columns:var(--card-width) 1px calc(3 * var(--card-width) + 2 * var(--card-gap));grid-template-rows:minmax(0,1fr);justify-content:center;column-gap:var(--board-gap)}.prompt-pair{flex-direction:column}.choices-grid{--columns: 3}.choice-divider{height:80%;width:1px;align-self:center;background:#e9ece3}.choice-divider:before,.choice-divider:after,.choice-divider span{display:none}}@media(max-width:400px){h1{font-size:14px}.trainer-panel{grid-template-rows:48px minmax(0,1fr) 56px 42px}.axis-feedback{grid-template-columns:repeat(2,max-content);column-gap:24px;font-size:10px}.choice-key{top:6px;left:7px;font-size:9px}.feedback{gap:8px;font-size:12px}.feedback-time{font-size:10px}}@media(max-height:560px)and (min-width:480px){.menu-dialog{width:min(680px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))}.menu-heading{min-height:48px;padding-top:0;padding-bottom:0}.settings-content{grid-template-columns:1fr 1fr;padding:16px;gap:20px}.axis-filter{grid-template-columns:40px minmax(0,1fr)}.axis-switch label>span{font-size:11px}.pattern-count{padding-left:48px}.stats-content{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:20px;padding:8px 16px 0}.stats-summary{grid-template-columns:1fr;gap:6px}.new-session-button{justify-self:start}.session-stats{gap:8px;padding:6px 0}.session-stats dt{margin-bottom:4px;font-size:9px}.session-stats dd{font-size:19px}.pattern-table thead th{height:24px}.pattern-table tbody th{height:28px;font-size:10px}.pattern-table td{font-size:10px}.progress-actions{min-height:44px}}@media(max-height:600px)and (orientation:portrait){.settings-content{padding:16px;gap:16px}.settings-secondary{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.axis-filters{gap:4px}.axis-switch{padding:1px}}@media(max-height:560px)and (min-width:480px){.settings-content{padding-top:8px;padding-bottom:8px}}@media(max-height:400px)and (min-width:480px){.trainer-panel--build{grid-template-rows:44px minmax(0,1fr) 48px 24px}.trainer-panel--build .axis-feedback{font-size:10px}.axis-section>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.axis-filters{gap:2px}.axis-switch{padding:0}.pattern-count{margin-top:4px}}@media(pointer:coarse){.keyboard-hint,.next-button>span{display:none}.card-choice:hover:not(:disabled){background:#fff;border-color:#dedfd7}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}