:root{font-family:'Microsoft YaHei',sans-serif;color:#eaf4ff;background:#030b16;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}.hmi-preview{display:flex;flex-direction:column;gap:16px;max-width:calc(100vw - 24px)}.preview-heading{display:flex;justify-content:space-between;font-size:12px;color:#9cbad2;gap:32px}.viewport{position:relative}.hmi-device{width:854px;height:480px;transform-origin:top left;position:relative;overflow:hidden;background:#061b2e;box-shadow:0 16px 60px #0008}.hmi-device>svg{display:block}.design-control{position:absolute;border:0;background:transparent;color:inherit;border-radius:12px;cursor:pointer;padding:0;touch-action:manipulation}.design-control:hover:not(:disabled){background:#b5efff0a}.design-control:active:not(:disabled){background:#a2e9ff1c}.design-control:focus-visible{outline:2px solid #b8f8ff;outline-offset:-3px}.design-control:disabled{cursor:wait}.home-control{left:773px;top:1px;width:65px;height:38px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hmi-toast{position:absolute;bottom:82px;left:50%;transform:translateX(-50%);border:1px solid #438ca7;background:#092d43;color:#eafaff;padding:12px 22px;border-radius:12px;font-size:16px;max-width:740px;white-space:nowrap}.input-control{position:absolute;left:45px;top:144px;width:760px;height:51px;border:1px solid #436982;border-radius:10px;background:#102b40;color:#edf8ff;padding:0 18px;font-size:19px;outline-color:#65e2f2}.preview-bottom{font-size:11px;color:#7f9bb1;display:flex;justify-content:space-between;gap:20px;max-width:854px;position:relative}.preview-bottom summary{cursor:pointer;color:#bad3e5;white-space:nowrap}.preview-bottom nav{position:absolute;right:0;top:24px;width:580px;max-width:90vw;max-height:340px;overflow:auto;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px;background:#0d2234;border:1px solid #45677f;border-radius:12px}.preview-bottom nav button{padding:10px 8px;background:#17364b;color:#d9edf8;border:1px solid #36596f;border-radius:6px;text-align:left;font-size:12px;cursor:pointer}.preview-bottom nav button[aria-current=page]{border-color:#59dff1;color:#71eaff}@media(max-width:600px){.preview-heading{font-size:10px}.preview-bottom{font-size:10px}.preview-bottom nav{grid-template-columns:repeat(2,1fr)}}
.value-slider{position:absolute;left:440px;top:232px;width:354px;height:145px}.value-slider.full-slider{left:122px;top:260px;width:610px}.value-slider input{display:block;width:100%;height:48px;margin:0;appearance:none;background:transparent;cursor:grab;touch-action:pan-y}.value-slider input:active{cursor:grabbing}.value-slider input::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,#28d9ed 0 var(--fill),#274d67 var(--fill) 100%);border:1px solid #47758f}.value-slider input::-webkit-slider-thumb{appearance:none;width:30px;height:30px;border:3px solid #c5faff;border-radius:50%;margin-top:-12px;background:#18bcd6;box-shadow:0 0 0 5px #2adaee18}.value-slider input:focus-visible{outline:2px solid #a2f8ff;outline-offset:4px;border-radius:6px}.slider-ticks{position:relative;height:42px;margin:0 15px}.slider-ticks button{position:absolute;transform:translateX(-50%);border:0;background:none;color:#aecbdd;font-size:17px;padding:6px 0;white-space:nowrap;cursor:pointer}.slider-ticks button.active{color:#70e7fa;font-weight:700}.slider-ticks small{font-size:12px}.slider-specials{display:flex;gap:12px;align-items:center;margin-top:9px}.slider-specials button{width:96px;height:44px;border:1px solid #47758f;border-radius:10px;background:#122d43;color:#bed9e8;cursor:pointer}.slider-specials button[aria-pressed=true]{border-color:#55ddf3;color:#74e9fc;background:#086380}.slider-specials span{font-size:12px;color:#91b1c8}.full-slider .slider-specials{justify-content:center}
.slider-ticks span{position:absolute;transform:translateX(-50%);color:#aecbdd;font-size:16px;padding:6px 0;white-space:nowrap}
.collapse-menu-icon{position:absolute;left:23px;top:14px;width:32px;height:32px;transform:rotate(-90deg);pointer-events:none}

.input-control{left:32px;top:143px;width:790px;height:48px;padding:0 16px;line-height:normal;z-index:2}.input-control::placeholder{color:#adc8df;opacity:1}


.keyboard-case{position:absolute;right:32px;top:195px;height:24px;padding:0 10px;background:#122d43;border:1px solid #47758f;border-radius:6px;color:#bed9e8;font-size:12px;cursor:pointer}