@charset "UTF-8";
:root{font-family:"Microsoft YaHei UI","Segoe UI",sans-serif;color:#263d36;background:#f3f5f0;font-synthesis:none;--green:#285f48;--muted:#76867d;--border:#dce3db}
*{box-sizing:border-box}body{margin:0}main{max-width:1220px;margin:auto;padding:42px 40px 24px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--green);margin:0 0 10px}h1{font-weight:600;font-size:30px;letter-spacing:1px;margin:0}.subtitle{font-size:14px;color:var(--muted);margin:10px 0 0}.badge{font-size:11px;color:#557060;background:#e7eee5;border:1px solid #d8e3d5;padding:9px 13px;border-radius:30px}.workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);gap:24px}.device-panel,.control-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px}.section-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;margin-bottom:24px}.live{font-size:11px;font-weight:400;color:#3c8a62}.live:before{content:"";display:inline-block;background:currentColor;width:5px;height:5px;border-radius:50%;margin-right:6px}.device{max-width:460px;margin:36px auto 26px;background:linear-gradient(145deg,#394a40,#25382e);padding:30px 30px 20px;border:1px solid #435748;border-radius:26px;box-shadow:0 20px 32px #1c332b20,inset 0 1px #6b7a6b}.device-brand{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#b7c6b9;margin-bottom:26px}.device-brand span{color:#8c9f90}.screen-bezel{padding:14px;background:#101b16;border:1px solid #526153;border-radius:9px;box-shadow:inset 0 3px 10px #0008}canvas{display:block;width:100%;aspect-ratio:4;image-rendering:pixelated;background:#07120e;filter:drop-shadow(0 0 3px #b8e9c520)}.screen-meta{display:flex;justify-content:space-between;font-size:9px;color:#889d8d;letter-spacing:1.5px;margin:10px 2px 25px}.keys{display:flex;justify-content:space-between;gap:26px;padding:4px 13px 28px}.keys button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:74px;height:66px;border-radius:13px;background:linear-gradient(#536658,#405246);border:1px solid #637365;box-shadow:0 5px #17281e;font-size:28px;line-height:1;color:#dce9df;cursor:pointer;touch-action:none;user-select:none}.keys button.confirm{background:linear-gradient(#c8d5bf,#a8bda1);color:#294431;border-color:#d3e0cb}.keys button small{font-size:9px;font-weight:400}.keys button:active,.keys button.pressed{transform:translateY(3px);box-shadow:0 2px #17281e}.device-footer{border-top:1px solid #536452;padding-top:15px;display:flex;align-items:center;gap:6px;font-size:9px;color:#a4b5a7}.device-footer>span:last-child{margin-left:auto;letter-spacing:1.2px}#valve-indicator{color:#829389}#valve-indicator.open{color:#b3e9a0}.interaction{text-align:center;min-height:77px}.step-tag{background:#eef3eb;padding:5px 12px;border-radius:20px;font-size:11px;color:#477657}.interaction p{font-size:12px;color:var(--muted);margin:15px 0}.key-guide{display:flex;flex-wrap:wrap;gap:14px;padding:18px 0;border-top:1px solid #edf0eb;border-bottom:1px solid #edf0eb}.key-guide>div{display:flex;gap:6px;align-items:center;font-size:11px;color:#7a887e}kbd{border:1px solid #dce2d9;border-bottom-width:2px;border-radius:4px;padding:2px 5px;font-family:inherit;background:#f8faf6;font-size:10px}.dot{width:5px;height:5px;background:#a1b29e;border-radius:50%}.events{margin-top:24px}.events .section-head{margin-bottom:12px}#event-log{list-style:none;padding:0;margin:0;min-height:92px;max-height:155px;overflow:auto;font-size:11px;color:#718075}#event-log li{padding:7px 0;border-bottom:1px solid #f0f3ee}#event-log time{color:#a0aba1;margin-right:13px;font-variant-numeric:tabular-nums}aside{display:flex;flex-direction:column;gap:20px}.control-card .section-head{margin-bottom:18px}.small-label{font-size:10px;color:#8b998e;font-weight:400}label{display:block;font-size:12px;color:#677b6e;margin:15px 0}label>span{display:flex;justify-content:space-between}output{color:#315c43;font-variant-numeric:tabular-nums}select,input[type=number],input[type=datetime-local]{width:100%;margin-top:8px;border:1px solid #dce4da;border-radius:7px;padding:10px;background:#fbfcf9;color:#3a5041;font:inherit;font-size:12px}input[type=range]{width:100%;margin-top:12px;accent-color:var(--green);height:4px;cursor:pointer}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.two-columns label{margin:8px 0}.actions{display:flex;gap:8px}.secondary{border:1px solid #dce4da;background:#f5f8f1;border-radius:6px;padding:8px 12px;color:#52715b;font-size:11px;cursor:pointer}.text-button{border:0;background:transparent;color:#71876e;font-size:11px;cursor:pointer;padding:2px 0}.switch-row{display:flex;justify-content:space-between;align-items:center;margin:8px 0}.switch-row label{font-size:11px;display:flex;align-items:center;gap:5px}input[type=checkbox]{accent-color:var(--green)}.note{font-size:10px;line-height:1.8;color:#93a08f;margin:10px 0 0}.param-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f3ee;font-size:11px}.param-row:last-child{border-bottom:0}.param-row .param-name{color:#7b8b7d}.param-row .param-value{font-variant-numeric:tabular-nums;color:#3e5845}.param-row.active{background:#edf4e9;border-radius:4px;padding-left:7px;padding-right:7px}.param-row .shared{font-size:8px;color:#96a38e;margin-left:7px}footer{display:flex;justify-content:space-between;font-size:10px;color:#94a190;margin-top:26px;padding-top:18px;border-top:1px solid #dde5d9}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #76a287;outline-offset:3px}
@media(max-width:900px){main{padding:24px}.workspace{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr}.device{margin-top:20px}.badge{display:none}}
@media(max-width:600px){main{padding:20px 14px}h1{font-size:25px}.device-panel,.control-card{padding:18px}aside{display:flex}.device{padding:24px 20px 18px}.keys{gap:16px}.keys button{width:70px}.key-guide{gap:12px}footer{display:block;line-height:2}footer span{display:block}header{margin-bottom:24px}}