*{box-sizing:border-box;margin:0;padding:0}body{background:#0d1b2a;color:#c8dce8;font-family:system-ui,sans-serif;overflow:hidden;height:100vh;display:flex;flex-direction:column}#header{background:#060e18;border-bottom:2px solid #1e4060;padding:6px 16px;display:flex;align-items:center;gap:16px;flex-shrink:0;height:40px}#header h1{font-size:14px;font-weight:700;letter-spacing:2px;color:#0cf;font-family:monospace}#header .version{font-size:10px;color:#3a6070;font-family:monospace}.speed-control{margin-left:auto;display:flex;align-items:center;gap:8px}.speed-label{font-size:9px;color:#3a6070;font-family:monospace;letter-spacing:1px}.speed-presets{display:flex;gap:3px}.speed-btn{padding:3px 7px;font-family:monospace;font-size:10px;font-weight:700;border:1px solid #1e3a50;background:#0a1624;color:#4a7a90;cursor:pointer;border-radius:3px;transition:all .1s}.speed-btn:hover{border-color:#2a6090;color:#acd}.speed-btn.active{background:#0d3355;border-color:#0ad;color:#0cf;box-shadow:0 0 6px #00aadd4d}.speed-info{font-size:9px;color:#0ac;font-family:monospace;min-width:60px}.share-btn{margin-left:12px;padding:4px 10px;font-family:monospace;font-size:10px;font-weight:700;border:1px solid #2a6090;background:#0d2035;color:#0ac;cursor:pointer;border-radius:3px;letter-spacing:.5px;transition:all .15s;white-space:nowrap}.share-btn:hover{background:#0d3050;color:#0cf;box-shadow:0 0 8px #00aacc4d}.header-led{width:8px;height:8px;border-radius:50%;background:#00e87a;box-shadow:0 0 6px #00e87a}#app{flex:1;display:flex;overflow:hidden}#schematic-area{flex:0 0 62%;position:relative}#main-canvas{width:100%;height:100%;display:block}#control-panel{flex:1;background:#0a1624;border-left:2px solid #1e4060;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:#1e4060 #0a1624}.ctrl-section{background:#0f1e30;border:1px solid #1e4060;border-radius:4px;padding:10px}.ctrl-title{font-size:13px;font-weight:700;color:#0cf;letter-spacing:1.5px;font-family:monospace;margin-bottom:4px}.ctrl-subtitle{font-size:10px;color:#5a8a9a;font-family:monospace;line-height:1.5}.ctrl-label{font-size:9px;color:#3a6070;letter-spacing:1px;font-family:monospace;margin-bottom:6px;border-bottom:1px solid #1a3048;padding-bottom:3px}.ctrl-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.ctrl-lbl{font-size:10px;color:#6a9ab0;font-family:monospace;min-width:50px}.ctrl-val{font-size:11px;color:#0cf;font-family:monospace;min-width:52px;text-align:right}input[type=range]{flex:1;accent-color:#0088cc;height:4px;cursor:pointer}.btn-group{display:flex;gap:4px}.mode-btn{flex:1;padding:5px 4px;font-family:monospace;font-size:10px;font-weight:700;border:1px solid #1e4060;background:#0a1624;color:#5a8aaa;cursor:pointer;border-radius:3px;letter-spacing:.5px;transition:all .15s}.mode-btn:hover{border-color:#2a6090;color:#acd}.mode-btn.active{background:#0d3355;border-color:#0ad;color:#0cf;box-shadow:0 0 8px #00aadd4d}.mode-btn-cool.active{background:#0d3050;border-color:#08c;color:#6cf;box-shadow:0 0 8px #08c6}.hint-text{font-size:9px;color:#3a5570;font-family:monospace;margin-top:4px;line-height:1.4}#hk-canvas{width:100%;border:1px solid #1a3048;border-radius:3px;margin-top:6px}.status-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:10px;font-family:monospace}.led{width:8px;height:8px;border-radius:50%;background:#1a2a3a;border:1px solid #2a4050;flex-shrink:0}.led.led-on{background:#00e87a;box-shadow:0 0 6px #00e87a;border-color:#00e87a}.led.led-amber{background:#fa0;box-shadow:0 0 6px #fa0;border-color:#fa0}.led.led-red{background:#f33;box-shadow:0 0 6px #f33;border-color:#f33}.ctrl-label-ww{font-size:9px;color:#3a6070;letter-spacing:1px;font-family:monospace;margin-bottom:8px;border-bottom:1px solid #1a3048;padding-bottom:4px;display:flex;align-items:center;justify-content:space-between}.toggle-switch{position:relative;display:inline-block;width:32px;height:16px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-track{position:absolute;top:0;right:0;bottom:0;left:0;background:#1a2a3a;border:1px solid #2a4050;border-radius:8px;cursor:pointer;transition:background .2s}.toggle-track:before{content:"";position:absolute;width:11px;height:11px;left:2px;top:1px;background:#4a6070;border-radius:50%;transition:transform .2s,background .2s}.toggle-switch input:checked+.toggle-track{background:#0d3355;border-color:#0ad}.toggle-switch input:checked+.toggle-track:before{transform:translate(15px);background:#0cf}.ctrl-select{flex:1;background:#0a1624;border:1px solid #1e4060;color:#0cf;font-family:monospace;font-size:10px;padding:3px 4px;border-radius:3px}.new-game-btn{width:100%;padding:8px;font-family:monospace;font-size:11px;font-weight:700;border:1px solid #2a6090;background:#0d2035;color:#0ac;cursor:pointer;border-radius:4px;letter-spacing:1px;transition:all .15s}.new-game-btn:hover{background:#0d3050;color:#0cf;box-shadow:0 0 10px #00aacc4d}