:root{color-scheme:dark;font-family:Segoe UI,Arial,sans-serif;background:#080f19;color:#dce7f5}*{box-sizing:border-box}body{margin:0}header{padding:22px 30px;border-bottom:1px solid #26364b;display:flex;justify-content:space-between;align-items:center}header strong{font-size:23px}header span{margin-left:16px;color:#93a7c1;font-size:14px}button,select,input{font:inherit}button,select{background:#18283d;color:#dce7f5;border:1px solid #334a65;border-radius:6px;padding:9px 14px;cursor:pointer}button:hover{filter:brightness(1.25)}button:focus-visible{outline:2px solid #52b9ff;outline-offset:2px}.actions{display:flex;gap:10px}main{max-width:1100px;margin:24px auto;padding:0 20px}nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}nav button.active{background:#244768;border-color:#66baff}#viewport{position:relative;margin:auto;overflow:hidden;border:1px solid #314660;border-radius:9px;box-shadow:0 20px 70px #0008}#screen{position:relative;transform-origin:top left;overflow:hidden}.hmi{position:absolute;margin:0;padding:0;box-sizing:border-box;border-radius:0;font-family:Arial,sans-serif;overflow:hidden}.hmi.text{display:flex;pointer-events:none}.hmi.control{display:flex;align-items:center;justify-content:center;touch-action:manipulation}.hmi.control:active,.hmi.pressed{filter:brightness(1.5);box-shadow:inset 0 0 0 2px #9bd5ff}.hmi.icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.hmi.list{padding:8px;overflow:auto;font-size:11px;background:#0d192a;color:#c8daf0;border:1px solid #315782}.recipe-row{display:block;width:100%;font-size:12px;margin-bottom:5px;padding:8px;text-align:left}.recipe-row.selected{background:#28567c}footer{display:flex;justify-content:space-between;gap:15px;color:#8096b3;font-size:12px;margin:15px 0}details{border-top:1px solid #25354b;padding-top:15px;color:#a5b7ce;font-size:13px}summary{cursor:pointer;margin-bottom:15px}details label{margin-right:18px}details p{line-height:1.6}dialog{background:#13223a;color:#e3edfa;border:1px solid #52799f;border-radius:12px;min-width:300px}dialog::backdrop{background:#0009}dialog input{width:100%;padding:12px;background:#09121f;color:white;border:1px solid #52799f;border-radius:5px}#edit-error{color:#ff9a9a}.popup-shade{position:absolute;inset:0;background:#0008;z-index:999}.popup{position:absolute;z-index:1000;box-shadow:0 12px 40px #000a}@media(max-width:700px){header{padding:15px;gap:10px}header span{display:block;margin:3px 0}main{padding:0 10px}footer{flex-direction:column}.actions button{font-size:12px}}
:root .hmi.control{pointer-events:auto}
.hmi{border:0;appearance:none}
.hmi.control:active,.hmi.pressed{box-shadow:none}
.hmi.description-label{pointer-events:auto;cursor:help}
.description-label:hover{text-decoration:underline;text-decoration-style:dotted}
.description-label:focus-visible{outline:2px solid #52b9ff}
#field-description{margin:18px 0;padding:18px 20px;background:#101e30;border:1px solid #2c435e;border-radius:8px}
#description-title{margin:0 0 8px;font-size:18px}#description-body{margin:0;line-height:1.6;color:#c5d4e8}#description-source{font-size:12px;color:#8aa4c4;margin-top:12px}#description-tag{font-size:12px;color:#8aa4c4;overflow-wrap:anywhere;margin-top:5px}
#editor{padding:8px;min-width:0;width:244px;border:5px ridge #4383d5;border-radius:0;background:#070b10;color:#fff;font-family:Arial,sans-serif;box-shadow:0 8px 25px #0009}
#editor h2{font-size:16px;font-weight:400;margin:0 0 6px;padding:2px 0}
#editor #edit-value{border:4px ridge #4383d5;border-radius:0;background:#eeeadd;color:#171717;text-align:right;font-size:24px;padding:6px;width:100%;height:48px}
#edit-range{font-size:14px;margin:5px 0 10px;color:#fff}
#keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid #e1e0d6}
#keypad button{background:#0a1016;color:#f5f3e8;border:3px outset #dfdfd5;border-radius:0;padding:0;height:60px;font-family:Arial,sans-serif;font-size:30px;font-weight:bold;touch-action:manipulation}
#keypad button:active{border-style:inset;background:#25394b}
#keypad button[data-key="escape"]{font-size:19px}
#editor #edit-error{font-size:12px;margin:6px 0 0;min-height:0}
#editor #edit-error:empty{display:none}
/* The manual surrounds the original dark HMI with a light document surface. */
body{background:#e8edf2;color:#243447;min-height:100vh}
header{background:#fff;border-bottom-color:#c8d2df;color:#182c43}
header span{color:#52677e}
header button{background:#f0f4f8;color:#243c57;border-color:#bdcbd9}
#viewport{border:3px solid #697d93;box-shadow:0 10px 28px #20344e24}
footer{display:none}
#field-description{background:#fff;border-color:#c2cfdc;margin-top:24px;box-shadow:0 3px 12px #20344e0a}
#description-body{color:#354a60}
#description-source,#description-tag{color:#60758c}
details{border-top-color:#bdcbd9;color:#405870;margin-top:22px}
details button,details select{background:#fff;color:#243c57;border-color:#bdcbd9}
#alarm-reference{background:white;border:1px solid #c2cfdc;border-radius:8px;padding:18px;margin-top:18px}
.alarm-filters{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
#alarm-search{background:#fff;color:#243c57;border:1px solid #bdcbd9;border-radius:5px;padding:8px;flex:1}
#alarm-results{max-height:300px;overflow:auto}.alarm-reference-row{display:block;width:100%;text-align:left;margin:6px 0;line-height:1.45;font-size:13px}
#description-body{white-space:pre-line}
main{max-width:1800px}
#manual-layout{display:flex;flex-direction:column;gap:24px;margin:auto;align-items:flex-start}
#manual-layout.side-by-side{flex-direction:row}
#viewport{flex-shrink:0;margin:0}
#manual-info{min-width:0;flex-shrink:0}
#manual-info #field-description{margin-top:0}
[hidden]{display:none!important}
#manual-info{display:flex;flex-direction:column;gap:18px}
#manual-info #field-description{margin:0;flex-shrink:0}
#alarm-reference{margin:0;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#alarm-reference h2,#preview-options h2{font-size:18px;margin:0 0 12px}
#alarm-reference p{margin:0 0 12px;font-size:13px;line-height:1.5}
#alarm-results{max-height:none;min-height:0;flex:1;overflow:auto}
#preview-options{background:white;border:1px solid #c2cfdc;border-radius:8px;padding:18px;color:#405870}
#preview-options button,#preview-options select{background:white;color:#243c57;border-color:#bdcbd9}
#alarm-reference .alarm-reference-row,#alarm-reference select{background:#fff;color:#243c57;border-color:#bdcbd9}
@keyframes hmi-blink{50%{color:var(--blink-fore);background:var(--blink-back);border-color:var(--blink-fore)}}