*{box-sizing:border-box}body{font-family:system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;background:#f4f6f8;color:#17202a;margin:0;line-height:1.7}
a{color:#1a5276}.wrap{max-width:820px;margin:0 auto;padding:20px 16px 48px}
header.site{display:flex;justify-content:space-between;align-items:center;padding:6px 0 14px}
.logo{font-weight:800;font-size:19px;text-decoration:none;color:#17202a}
.card{background:#fff;border:1px solid #d5dbdb;border-radius:14px;padding:20px;margin:16px 0}
h1{font-size:26px;margin:8px 0}h2{font-size:20px;margin:26px 0 8px}
.keys{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;align-items:center}
.keycap{min-width:52px;text-align:center;padding:10px;border:1px solid #aeb6bf;border-bottom:4px solid #aeb6bf;border-radius:10px;font-weight:700;font-size:17px;background:#fbfcfc}
.keycap.on{background:#fdebd0;border-color:#e67e22;border-bottom-color:#e67e22}
.keycap.done{background:#d5f5e3;border-color:#1a7f4b;border-bottom-color:#1a7f4b}
.plus{font-weight:700;color:#5d6d7e}
.box{border:2px dashed #2e86c1;border-radius:12px;padding:24px;text-align:center;font-size:16px;background:#eaf2f8;outline:none;cursor:pointer}
.box:focus{border-style:solid;background:#d6eaf8}.box.success{border-color:#1a7f4b;background:#d5f5e3}.box.miss{border-color:#c0392b;background:#fadbd8}
.status{min-height:28px;text-align:center;margin-top:10px;font-weight:600}
.note{font-size:13px;color:#5d6d7e}table{border-collapse:collapse;width:100%}th,td{border:1px solid #d5dbdb;padding:8px 10px;text-align:left}th{background:#f2f4f4;width:22%}
button,select.btn{font-size:15px;padding:8px 14px;border-radius:8px;border:1px solid #aeb6bf;background:#fff;cursor:pointer}
button.primary{background:#1a7f4b;color:#fff;border-color:#1a7f4b}
.toggle{display:inline-flex;border:1px solid #aeb6bf;border-radius:8px;overflow:hidden}
.toggle button{border:0;border-radius:0}.toggle button.sel{background:#2e86c1;color:#fff}
ul.keylist{list-style:none;padding:0}ul.keylist li{padding:8px 0;border-bottom:1px solid #eaeded}
.badge{display:inline-block;background:#eaf2f8;border:1px solid #aed6f1;border-radius:20px;padding:1px 10px;font-size:12px;margin-left:6px}
.check{color:#1a7f4b;font-weight:800}
.crumb{font-size:13px;color:#5d6d7e}
.searchbox{width:100%;font-size:16px;padding:12px;border:1px solid #aeb6bf;border-radius:10px}
.practice-mobile{display:none}
@media (max-width:640px){h1{font-size:22px}}