@import"https://fonts.googleapis.com/css2?family=VT323&display=swap";:root{--easy-body: #b8babc;--easy-dark: #2a2a2a;--easy-blue: #005691;--lcd-bg: #9ea71c;--lcd-pixel: #1a1a1a;--lcd-inactive: rgba(26, 26, 26, .12);--terminal-gold: #d4af37;--bg-wall: #dcdcdc}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-wall);background-image:radial-gradient(#bbb 1px,transparent 1px);background-size:20px 20px;font-family:Segoe UI,Arial,sans-serif;user-select:none;-webkit-user-select:none}.lcd-screen{width:264px;height:128px;background-color:#9ea71c;font-family:VT323,monospace;font-size:24px;line-height:32px;color:#1a1a1a;padding:0;box-shadow:inset 2px 2px 6px #00000026;position:relative;overflow:hidden;display:flex;flex-direction:column;cursor:default}.lcd-rail{position:absolute;top:0;bottom:0;width:3px;background:#1a1a1a;opacity:.8;z-index:5}.lcd-char.cursor-edit{animation:lcd-blink .5s step-end infinite}@keyframes lcd-blink{50%{opacity:0}}.lcd-char.power-active{font-weight:900;text-shadow:0 0 1px rgba(0,0,0,.5)}.lcd-frame{background:#2a2a2a;padding:6px;border-radius:4px;box-shadow:0 2px 6px #00000080;display:inline-block}.lcd-screen{width:264px;height:128px;background-color:#9ea71c;font-family:VT323,monospace;font-size:22px;line-height:32px;color:#1a1a1a;padding:0;box-shadow:inset 2px 2px 6px #00000026;position:relative;overflow:hidden;display:flex;flex-direction:column;cursor:default}.lcd-scanlines{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);background-size:4px 4px;pointer-events:none;z-index:10}.lcd-rail{position:absolute;top:0;bottom:0;width:3px;background:#1a1a1a;opacity:.7;z-index:5}.lcd-rail-left{left:4px}.lcd-rail-right{right:4px}.lcd-row{display:flex;height:32px;z-index:3;position:relative}.lcd-char{width:22px;height:32px;display:flex;align-items:center;justify-content:center;font-size:22px;letter-spacing:0}.lcd-char.cursor-select{background-color:#1a1a1a;color:#9ea71c}.lcd-char.cursor-edit{opacity:0}.lcd-char.power-active{font-weight:900;color:#000;text-shadow:0 0 2px rgba(0,0,0,.4)}.eaton-chassis{width:420px;background:#b8babc;border-radius:5px;box-shadow:inset 1px 1px 3px #fff9,inset -1px -1px 3px #00000026,10px 12px 30px #00000059;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10}.terminal-strip{background:#222;padding:4px 8px}.top-strip{border-bottom:2px solid #111;border-radius:5px 5px 0 0}.bottom-strip{border-top:2px solid #111;border-radius:0 0 5px 5px}.terminal-inner{display:flex;justify-content:space-around;align-items:center;padding:4px 0}.terminal-slot{display:flex;flex-direction:column;align-items:center;position:relative;min-width:22px}.screw{width:14px;height:14px;background:radial-gradient(circle at 35% 35%,#fff 5%,#d4af37 30%,#a07c1c 70%,#6b5313);border-radius:50%;border:1px solid #333;position:relative}.screw:after{content:"";position:absolute;top:50%;left:15%;width:70%;height:1.5px;background:#444;transform:rotate(-45deg) translateY(-50%)}.terminal-label{font-size:7.5px;color:#bbb;font-family:Arial,Helvetica,sans-serif;letter-spacing:.3px;white-space:nowrap}.top-label{margin-top:3px}.bottom-label{margin-bottom:3px;order:-1}.face{padding:8px 14px 6px;display:flex;flex-direction:column;gap:4px}.spec-text{display:flex;justify-content:space-between;font-size:7px;color:#666;font-family:Arial,sans-serif;padding:0 2px}.spec-text-right{font-size:7px;color:#666;font-family:Arial,sans-serif;text-align:right;margin-top:-2px;padding-right:2px}.brand{font-weight:900;font-style:italic;font-size:18px;font-family:Arial Black,Impact,sans-serif;margin:2px 0 6px 2px;letter-spacing:-.5px}.brand-e{color:#c00}.brand-rest{color:#555}.main-area{display:flex;gap:10px;align-items:center}.lcd-zone{flex-shrink:0}.controls-zone{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}.btn-pair{display:flex;gap:6px}.hw-btn{width:38px;height:22px;background:#2a2a2a;border:1px solid #111;border-radius:4px;color:#eee;font-size:8px;font-weight:700;font-family:Arial,sans-serif;cursor:pointer;box-shadow:0 2px #000;transition:transform .08s,box-shadow .08s;letter-spacing:.3px;line-height:1;display:flex;align-items:center;justify-content:center}.hw-btn:active{transform:translateY(2px);box-shadow:none}.dpad{position:relative}.dpad-circle{width:82px;height:82px;border-radius:50%;background:#3a3a3a;border:3px solid #2a2a2a;box-shadow:inset 0 2px 5px #0006,0 3px 6px #00000040;position:relative;overflow:hidden}.dpad-zone{position:absolute;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:11px;padding:0;z-index:2}.dpad-zone:hover{background:#ffffff14}.dpad-zone:active{background:#ffffff2e}.dpad-up{top:0;left:50%;transform:translate(-50%);width:30px;height:28px;border-radius:15px 15px 0 0}.dpad-down{bottom:0;left:50%;transform:translate(-50%);width:30px;height:28px;border-radius:0 0 15px 15px}.dpad-left{left:0;top:50%;transform:translateY(-50%);width:28px;height:30px;border-radius:15px 0 0 15px}.dpad-right{right:0;top:50%;transform:translateY(-50%);width:28px;height:30px;border-radius:0 15px 15px 0}.dpad-center-diamond{position:absolute;top:50%;left:50%;width:22px;height:22px;background:#555;border:1px solid #444;transform:translate(-50%,-50%) rotate(45deg);z-index:1;border-radius:2px}.dpad-diamond-arrow{font-size:9px;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.5)}.model-row{margin-top:8px;display:flex;align-items:baseline;gap:0;padding-left:2px}.model-easy{font-style:italic;font-size:15px;color:#666;font-family:Arial,sans-serif;font-weight:400}.model-num{font-size:14px;color:#005691;font-weight:700;font-family:Arial,sans-serif}.model-info{display:flex;justify-content:space-between;font-size:8px;color:#888;font-family:Arial,sans-serif;padding:0 2px 4px}.input-panel{display:flex;flex-direction:row;align-items:center;gap:16px;background:#e8e8e8;padding:12px 24px;border:2px solid #999;border-radius:6px;box-shadow:4px 4px 12px #00000026}.panel-title{font-family:Arial,sans-serif;font-size:14px;font-weight:700;color:#555;letter-spacing:2px;border-right:2px solid #bbb;padding-right:16px;border-bottom:none;padding-bottom:0}.input-unit{display:flex;align-items:center;gap:10px;background:#ddd;padding:8px 10px;border:1px solid #aaa;border-radius:4px}.input-label{font-family:VT323,monospace;font-size:18px;font-weight:700;color:#333;min-width:24px}.toggle-switch{width:32px;height:52px;background:#2a2a2a;position:relative;cursor:pointer;border-radius:3px;box-shadow:inset 0 1px 3px #00000080}.toggle-switch .toggle-handle{width:100%;height:50%;background:linear-gradient(to bottom,#eee,#ccc);position:absolute;transition:top .12s ease;border:1px solid #999;border-radius:2px}.toggle-switch.off .toggle-handle{top:50%;border-bottom:3px solid #888}.toggle-switch.on .toggle-handle{top:0;border-top:3px solid #fff;background:linear-gradient(to bottom,#81c784,#66bb6a)}.push-button{width:36px;height:36px;border-radius:50%;border:3px solid #222;cursor:pointer;box-shadow:0 3px #111;transition:transform .1s,box-shadow .1s}.push-button:active,.push-button.pressed{transform:translateY(3px);box-shadow:0 0 #111}.push-button.blue{background:radial-gradient(circle at 30% 30%,#4dabf7,#1971c2)}.push-button.yellow{background:radial-gradient(circle at 30% 30%,#ffd43b,#f59f00)}.status-led{width:8px;height:8px;border-radius:50%;background:#555;border:1px solid #333;flex-shrink:0}.status-led.active{background:#2ecc71;box-shadow:0 0 6px #2ecc71}.output-panel{display:flex;flex-direction:row;align-items:center;gap:16px;background:#e8e8e8;padding:12px 24px;border:2px solid #999;border-radius:6px;box-shadow:4px 4px 12px #00000026}.panel-title{font-family:Arial,sans-serif;font-size:14px;font-weight:700;color:#555;letter-spacing:2px;border-right:2px solid #bbb;padding-right:16px}.output-unit{background:#1a1a1a;padding:10px;border-radius:4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.output-label{color:#ccc;font-family:VT323,monospace;font-size:16px;font-weight:700}.indicator-lamp{width:36px;height:36px;border-radius:50%;background:#333;border:2px solid #111;position:relative;transition:background .15s,box-shadow .15s}.lamp-reflection{position:absolute;top:4px;left:6px;width:12px;height:8px;background:#ffffff26;border-radius:50%}.indicator-lamp.green.on{background:radial-gradient(circle at 40% 35%,#5dfc6e,#2ecc71,#1a9c50);box-shadow:0 0 12px #2ecc71,0 0 24px #2ecc7166}.indicator-lamp.green.on .lamp-reflection{background:#ffffff59}.indicator-lamp.red.on{background:radial-gradient(circle at 40% 35%,#ff6b6b,#e74c3c,#c0392b);box-shadow:0 0 12px #e74c3c,0 0 24px #e74c3c66}.indicator-lamp.red.on .lamp-reflection{background:#ffffff59}.indicator-lamp.orange.on{background:radial-gradient(circle at 40% 35%,#feca57,#f39c12,#e67e22);box-shadow:0 0 12px #f39c12,0 0 24px #f39c1266;animation:lamp-pulse .8s ease-in-out infinite alternate}.indicator-lamp.orange.on .lamp-reflection{background:#ffffff59}@keyframes lamp-pulse{0%{box-shadow:0 0 12px #f39c12,0 0 24px #f39c1266}to{box-shadow:0 0 16px #f39c12,0 0 32px #f39c1299}}.indicator-lamp.blue.on{background:radial-gradient(circle at 40% 35%,#74b9ff,#0984e3,#0652dd);box-shadow:0 0 12px #0984e3,0 0 24px #0984e366}.indicator-lamp.blue.on .lamp-reflection{background:#ffffff59}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px}.app-header{text-align:center;margin-bottom:30px}.app-header h1{font-family:VT323,monospace;font-size:2.2rem;color:#222;background:#fff;padding:8px 24px;border:2px solid #444;box-shadow:4px 4px #333;text-transform:uppercase;letter-spacing:2px;margin:0}.subtitle{display:block;font-family:Arial,sans-serif;font-size:.85rem;color:#777;margin-top:6px;letter-spacing:1px}.workspace{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;flex-wrap:nowrap}.help-bar{margin-top:30px;display:flex;gap:20px;flex-wrap:wrap;justify-content:center;background:#fff;padding:10px 20px;border:1px solid #ccc;border-radius:4px;max-width:700px}.help-item{font-family:Arial,sans-serif;font-size:12px;color:#555;display:flex;align-items:center;gap:4px}.help-item kbd{background:#eee;border:1px solid #ccc;border-radius:3px;padding:1px 6px;font-family:monospace;font-size:11px;box-shadow:0 1px #aaa}
