@font-face{font-family:Inter;src:url('/Inter.woff2')}*{box-sizing:border-box}body{margin:0;background:#0d1517;color:#e2eee8;font:14px Inter,system-ui;line-height:1.6}main{max-width:1200px;margin:48px auto;padding:0 24px}header{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:28px}small{letter-spacing:.16em;color:#9ac5ad}h1{font-size:34px;line-height:1.2;letter-spacing:-1px;margin:14px 0}h2{font-size:20px;font-weight:550;margin:0 0 18px}p{color:#a1b5ac}nav,.buttons{display:flex;gap:10px;flex-wrap:wrap}a{color:#b9ebcf}button,nav a{font:inherit;padding:10px 15px;border:1px solid #476050;border-radius:9px;background:#21352b;color:#d8eddf;text-decoration:none;cursor:pointer}button:hover:enabled{background:#355442}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #bdf1ca;outline-offset:3px}#start,#export{background:#a8dfbf;color:#153521}#clear{background:transparent}.controls,.card,.metrics section{border:1px solid #314b3c;border-radius:18px;background:#17241f;padding:24px}.connection{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:20px}#recording{border-radius:30px;background:#2d3e35;padding:5px 12px}.recording #recording{background:#ffcb82;color:#35200a}.controls p{font-size:12px;margin-bottom:0}#status{color:#abc7b7}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}.metrics span{display:block;color:#99b8a7;font-size:12px}.metrics strong{display:block;font-size:30px;font-variant-numeric:tabular-nums;margin-top:8px}.card{margin-bottom:20px}.card-heading{display:flex;justify-content:space-between;gap:12px}.card-heading span,.hint{font-size:12px;color:#9cb3a5}.keyboard{position:relative;aspect-ratio:15/6.25;background:#3a4443;border-radius:12px;margin:12px 0 24px;container-type:inline-size}.key{position:absolute;background:#26332d;border:1px solid #526358;border-radius:6px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;overflow:hidden;color:#eef9f1}.key span{font-size:1.3cqw}.key b{font:500 1.3cqw Inter,system-ui;margin-top:3px}.key.small span{font-size:.8cqw}.key.half b{display:none}.key.half span{font-size:1.2cqw}.key.iso{clip-path:polygon(0 0,100% 0,100% 100%,17% 100%,17% 50%,0 50%)}table{width:100%;border-collapse:collapse;text-align:left}th{font-size:12px;color:#a2bfad;font-weight:500}td,th{padding:9px 12px;border-bottom:1px solid #2b4034}td:nth-child(n+2){font-variant-numeric:tabular-nums}aside{font-size:12px;margin-top:30px;max-width:950px}@media(max-width:700px){main{margin:24px auto;padding:0 12px}header{display:block}h1{font-size:26px}.controls,.card{padding:16px}.metrics{gap:8px}.metrics section{padding:12px}.metrics strong{font-size:22px}.card-heading{display:block}.key{border-radius:3px}.key span,.key b{font-size:1.8cqw}.key.small span{font-size:1.1cqw}.buttons button{flex:1}}