.cad-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.cad-settings label{font-size:14px;font-weight:750}.cad-settings select{display:block;width:100%;padding:12px;margin-top:8px;border:1px solid var(--line);border-radius:10px;font:inherit}.cad-help{font-size:14px;color:#61748a;line-height:1.6}[hidden]{display:none!important}
.harm-row{border:1px solid #dce5ee;border-radius:14px;padding:10px;margin:16px 0;background:#fff;overflow-x:auto}.harm-stave .result-notation{border:0!important;padding:0!important;margin:0!important}.harm-stave .result-notation>strong{font-size:13px;color:#52677f}.harm-stave svg{max-height:260px}.harm-slots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 4px 20%;min-width:460px}.harm-slot{min-height:72px;background:#f0f5fb;border:2px solid #b8c9dc;border-radius:10px;color:#183b68;padding:9px;cursor:pointer}.harm-slot small{display:block;font:500 12px system-ui;margin:3px 0}.harm-slot strong{font:800 20px system-ui}.harm-slot[aria-pressed=true]{background:#e7f2ff;border-color:#245c96;box-shadow:0 0 0 2px #a2bfdc}.harm-slot.given{opacity:1;background:#183b68;color:#fff;border-color:#183b68;cursor:default}.harm-slot.correct{background:#eaf7f0;border-color:#19734b}.harm-slot.wrong{background:#fff0f0;border-color:#b32d36}.harm-choice-panel{border-radius:14px;background:#f2f6fb;padding:16px;margin:18px 0}.harm-choice-panel h3{margin:0;font-size:17px}.harm-choice-panel .lab-options{margin-bottom:0}.harm-slot:focus-visible{outline:3px solid #b67816;outline-offset:3px}.harm-choice-panel .lab-options strong{font-size:18px}.game{scroll-margin-top:90px}body.present .harm-slot{font-size:24px}body.present .harm-stave svg{max-height:330px}@media(max-width:650px){.cad-settings{grid-template-columns:1fr}.harm-row{padding:6px}.harm-slots{margin-left:130px;min-width:440px;gap:8px}.harm-stave svg{min-width:600px!important}.harm-choice-panel{padding:12px}.harm-slot strong{font-size:17px}.harm-choice-panel .lab-options strong{font-size:16px}.game{scroll-margin-top:120px}}

.harm-line{width:100%}.harm-slots{min-width:0;gap:6px}.harm-stave svg,body.present .harm-stave svg{min-width:0!important;max-height:none}.harm-scroll-hint{font-size:12px;color:#61748a;margin:4px 0 14px}@media(min-width:1100px){.harm-scroll-hint{display:none}}
.harm-advice{margin-top:18px;padding:16px;border-left:4px solid #4779a3;border-radius:8px;background:#eaf3fc;color:#183b68}.harm-advice h4{margin:0 0 8px}.harm-advice p{line-height:1.6}