:root{color-scheme:dark;--bg: #10141a;--panel: #1a202a;--line: #303b49;--text: #e4ebf3;--muted: #9caec2;--blue: #9acfff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Microsoft YaHei,sans-serif}header{min-height:80px;border-bottom:1px solid var(--line);padding:20px 4%;display:flex;gap:32px;align-items:center}.brand{font-size:27px;font-weight:800;letter-spacing:1px}.brand span{font-size:12px;font-weight:500;margin-left:14px;color:var(--muted);letter-spacing:2px}.header-note{font-size:14px;color:var(--muted)}.badge{margin-left:auto;font-size:13px;border:1px solid #455a71;padding:3px 12px;border-radius:20px;color:var(--blue)}main{display:grid;grid-template-columns:minmax(400px,1.25fr) minmax(340px,1fr);gap:36px;max-width:1440px;margin:auto;padding:32px 4%}.section-line{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-line>span{color:var(--muted);font-size:13px}h1{font-size:23px;margin:0}h2{font-size:17px;margin:0}button,select,input{font:inherit;color:inherit;background:#202a36;border:1px solid #465466;border-radius:5px;padding:7px 12px}button{cursor:pointer;font-size:14px}button:hover{background:#314153;border-color:var(--blue)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.toolbar{margin:22px 0 24px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#151b23}.toolbar-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:12px;color:#c2cdd9}.toolbar-heading span{color:var(--muted)}.control-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:10px}.control-card{--accent: #9acfff;--tint: #1b2c3d;--edge: #3b607e;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-width:0;min-height:94px;padding:12px;border:1px solid var(--edge);border-radius:8px;background:var(--tint);text-align:left}.control-reboot{--accent: #f6ce88;--tint: #332b20;--edge: #79603b}.control-backlight{--accent: #d5b4ff;--tint: #2b233c;--edge: #665080}.control-title{display:flex;gap:7px;align-items:center;color:var(--accent);font-size:13px;font-weight:650;line-height:1.4}.control-icon{display:inline-grid;place-items:center;flex:0 0 23px;height:23px;border:1px solid var(--edge);border-radius:6px;font-size:16px;line-height:1}.control-description{font-size:11px;line-height:1.5;color:#c4cbd5}.control-language select{width:100%;min-width:0;padding:5px 4px;border-color:var(--edge);background:#132333;font-size:12px;cursor:pointer}.control-card:is(button):hover{background:var(--tint);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.control-card:focus-visible,.control-language select:focus-visible{outline-color:var(--accent)}.control-card:is(button):active{transform:translateY(1px)}.control-backlight[data-screen=off] .control-icon{opacity:.55}@media(max-width:520px){.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.control-language{grid-column:1 / -1;min-height:0;flex-direction:row;align-items:center}.control-language select{width:56%}.control-card{padding:10px}}.device{max-width:552px;margin:auto;background:#222a33;border:1px solid #556170;padding:24px 30px 28px;border-radius:14px;box-shadow:0 20px 50px #0005,inset 0 1px #ffffff18}.device-label{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:650;letter-spacing:2px;margin-bottom:22px;color:#bec9d6}.device-label span+span{font-size:11px;color:#8997a6;letter-spacing:1px}.screen-frame{background:#060909;padding:14px;border:1px solid #475460;max-width:420px;margin:0 auto 28px;border-radius:4px;box-shadow:inset 0 0 0 3px #12181c}canvas{display:block;width:100%;aspect-ratio:5/4;background:#000;image-rendering:pixelated}.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.buttons button{height:62px;padding:5px 0;font-size:12px;letter-spacing:1px;background:linear-gradient(#3b4654,#2b3540);border-color:#657386;box-shadow:0 3px #0e141a;user-select:none;touch-action:none}.buttons button span{display:block;font-size:18px;line-height:1.3;color:#d8e6f8}.buttons button.pressed,.buttons button:active{transform:translateY(2px);box-shadow:0 1px #0e141a;background:#192532}.keyboard{text-align:center;font-size:13px;color:var(--muted);margin:24px 0 14px}.hint{padding:12px 16px;background:#1d3044;border-left:3px solid var(--blue);font-size:14px;min-height:48px}.muted{font-size:13px;color:var(--muted)}.inspector{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:8px;margin-bottom:20px}#breadcrumb{font-size:14px;color:var(--blue);padding-bottom:12px;border-bottom:1px solid var(--line)}#mapping{font-size:14px;overflow-wrap:anywhere}#mapping a{color:var(--blue)}#mapping div{margin:5px 0}code{color:#c1d5eb;font-size:13px}pre{background:#10151c;border:1px solid var(--line);padding:12px;font:12px/1.65 Consolas,monospace;max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:#c3d5e9}details{font-size:14px;margin-top:18px}summary{cursor:pointer;color:#bcd0e7}li{margin:7px 0}#values{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}#values div{background:#101720;padding:9px 12px;border-radius:4px;font-size:13px;color:var(--muted)}#values strong{display:block;font-size:20px;color:var(--text);font-weight:500}#events{font-size:13px;max-height:150px;overflow:auto;padding-left:22px;color:var(--muted)}.inputs{display:flex;gap:12px;margin-top:14px}.inputs label{font-size:13px;color:var(--muted);width:50%}.inputs input{display:block;width:100%;margin-top:6px}footer{border-top:1px solid var(--line);padding:20px 4%;font-size:12px;color:var(--muted)}@media(max-width:900px){main{grid-template-columns:1fr;max-width:650px;padding:24px 5%;gap:24px}.header-note{display:none}.section-line{flex-wrap:wrap}.device{padding:20px}.badge{font-size:12px}.toolbar{gap:8px}.screen-frame{padding:10px}}@media(prefers-reduced-motion:no-preference){button{transition:background .1s,transform .1s}}main{display:block;max-width:780px}footer{text-align:center}footer a{color:var(--muted);margin-left:12px}.demo-notice{text-align:center}