:root{font-family:Arial,sans-serif;color:#17212b;background:#f4f6f8}*{box-sizing:border-box}body{margin:0}.page{max-width:760px;margin:auto;padding:40px 24px}.logo{font-size:18px;font-weight:700}.logo span{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:7px;color:#fff;background:#2074f2;border-radius:6px}.page header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce2e8;padding-bottom:24px}.page header p,footer{color:#687784;font-size:13px}.intro{text-align:center;padding:58px 0 30px}.intro h1{font-size:36px;margin:0 0 12px}.intro p{color:#687784}.system-stats{background:#fff;border:1px solid #dce2e8;border-radius:10px;padding:22px;margin-bottom:16px;contain:content}.section-title{display:flex;justify-content:space-between;align-items:start}.section-title h2{font-size:18px;margin:0 0 5px}.section-title p{color:#687784;font-size:12px;margin:0}.refresh-stats{border:1px solid #cbd5de;background:#fff;border-radius:6px;padding:8px 12px;cursor:pointer;color:#2074f2}.refresh-stats:disabled{opacity:.55;cursor:wait}.device-tables{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}.device-table{border:1px solid #e1e6eb;border-radius:7px;overflow:hidden}.device-table h3{font-size:14px;margin:0;padding:13px 14px;background:#f7f9fa;border-bottom:1px solid #e1e6eb}.device-table table{width:100%;border-collapse:collapse}.device-table th,.device-table td{text-align:left;padding:11px 14px;border-bottom:1px solid #edf0f2;font-size:12px}.device-table tr:last-child th,.device-table tr:last-child td{border-bottom:0}.device-table th{color:#687784;font-weight:400;width:48%}.device-table td{font-weight:600;overflow-wrap:anywhere}.stats-note{color:#687784;font-size:11px;line-height:1.5;margin:15px 0 0}.test-mode{display:flex;align-items:center;gap:8px;margin:16px 0;color:#687784;font-size:12px}.mode-button{border:1px solid #cbd5de;background:#fff;color:#687784;border-radius:6px;padding:8px 12px;cursor:pointer}.mode-button.active{background:#2074f2;border-color:#2074f2;color:#fff}.test-mode small{margin-left:auto}.progress-bar{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:12px}.progress-bar>span{height:8px;flex:1;background:#dce2e8;border-radius:8px;overflow:hidden}.progress-bar i{display:block;width:0;height:100%;background:#32c875;transition:width .2s}.test-list{display:grid;gap:12px}.test-card{width:100%;border:1px solid #dce2e8;background:#fff;border-radius:10px;padding:21px;display:flex;align-items:center;text-align:left;cursor:pointer;transition:color .15s,border-color .15s}.test-card:hover{border-color:#2074f2}.test-card:focus-visible,.refresh-stats:focus-visible,.close:focus-visible,.secondary:focus-visible,.color-controls button:focus-visible,.sound-buttons button:focus-visible{outline:3px solid #8bb8ff;outline-offset:2px}.card-icon{width:42px;height:42px;border-radius:8px;background:#eaf2ff;color:#2074f2;display:grid;place-items:center;font-size:23px;margin-right:16px}.test-card strong,.test-card small{display:block}.test-card strong{font-size:16px;margin-bottom:5px}.test-card small{color:#687784;font-size:13px}.test-card>b{margin-left:auto;color:#2074f2;font-size:22px}footer{display:flex;justify-content:space-between;margin-top:45px}.modal{display:none;position:fixed;inset:0;padding:20px;background:#17212bcc;z-index:2;align-items:center;justify-content:center}.modal.open{display:flex}.modal-box{position:relative;width:min(470px,100%);max-height:95vh;overflow:auto;background:#fff;border-radius:12px;padding:32px}.modal-box.wide{width:min(900px,100%)}.modal-box canvas{display:block;width:100%;height:290px;border:1px solid #ccd5dd;border-radius:6px;margin-bottom:14px}.modal-box canvas:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;margin:0}.modal .close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:28px;color:#687784;cursor:pointer}.modal h2{margin:0 0 8px}.modal p{margin:0 0 20px;color:#687784}.key-status{font-size:13px;color:#687784;margin-bottom:12px}.key-status span{font-weight:bold;color:#2074f2}.keyboard{width:100%;outline:none}.key-row{display:flex;gap:clamp(2px,.55vw,5px);margin:5px 0;width:100%}.key{height:42px;min-width:0;flex:1;padding:0 4px;border:1px solid #cbd5de;border-radius:5px;background:#f7f9fa;display:grid;place-items:center;font-size:clamp(8px,1.1vw,11px);line-height:1.05;text-align:center;color:#344653;overflow:hidden}.key:first-child{min-width:0}.key.long{font-size:clamp(6px,.85vw,9px);overflow-wrap:anywhere}.key.pressed{background:#32c875;border-color:#1fa35b;color:#fff}.key.space{flex:5}.secondary,.color-controls button,.sound-buttons button{border:1px solid #cbd5de;background:#fff;border-radius:6px;padding:10px 14px;cursor:pointer}.secondary{margin-top:18px}.color-controls{display:flex;gap:8px;flex-wrap:wrap}.color-controls button{font-weight:bold}.color-controls button[data-color="#e53935"]{color:#c9222d}.color-controls button[data-color="#35c759"]{color:#16863c}.color-controls button[data-color="#2778ff"]{color:#1760cf}.camera-view{height:350px;background:#18232c;border-radius:7px;display:grid;place-items:center;overflow:hidden;color:#fff;margin-bottom:14px}.camera-view video{width:100%;height:100%;object-fit:contain}.sound-buttons{display:grid;gap:10px}.sound-buttons button{font-size:15px;text-align:left}.sound-buttons button:hover,.sound-buttons button.playing{background:#2074f2;color:#fff;border-color:#2074f2}.sound-note{font-size:12px;color:#687784;margin-top:17px}.level-track{height:20px;border-radius:12px;background:#dce2e8;overflow:hidden;margin:24px 0 10px}.level-track i{display:block;width:0;height:100%;background:#32c875}.pointer-pad,.touch-pad{height:220px;border:2px dashed #b8c5cf;border-radius:8px;background:#f7f9fa;display:grid;place-items:center;color:#687784;position:relative;touch-action:none}.pointer-status{font-size:12px;color:#687784;margin-top:12px}.touch-pad i{position:absolute;width:18px;height:18px;border-radius:50%;background:#2074f2;transform:translate(-50%,-50%)}@media(max-width:600px){.page{padding:24px 16px}.page header,footer{display:block}.page header p{margin-top:12px}.intro{padding-top:40px}.device-tables{grid-template-columns:1fr}.test-mode small{display:none}.key{height:34px;font-size:8px}.key.long{font-size:6px}.modal-box canvas{height:230px}}@media(prefers-reduced-motion:reduce){.test-card,.progress-bar i{transition:none}}