@font-face{font-family:MekSans;src:url("assets/fonts/MEKSans-Regular.woff2") format("woff2");font-display:block}
@font-face{font-family:MekMono;src:url("assets/fonts/MEK-Mono.woff2") format("woff2");font-display:block}
:root{--black:#050505;--bone:#e8e2c6;--dim:#8f8b79;--blood:#b51520}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--black);color:var(--bone);font-family:MekSans,monospace;font-synthesis:none}
button,a{font:inherit;color:inherit}
.menu-bar{height:42px;background:var(--bone);color:var(--black);border-top:2px solid var(--black);border-bottom:2px solid var(--black);display:flex;align-items:center;gap:28px;padding:0 16px;letter-spacing:.04em}
.menu-bar strong{font-size:18px}.menu-bar a{margin-left:auto;text-decoration:none}.menu-bar a+a{margin-left:0}
.menu-gem{width:15px;height:15px;border:2px solid;transform:rotate(45deg)}
.simulation-label{font-family:MekMono;font-size:11px;border:1px solid;padding:4px 7px}
main{height:calc(100vh - 42px);display:grid;grid-template-columns:minmax(520px,1fr) 300px;gap:14px;padding:14px;max-width:1160px;margin:auto}
.mac-window{border:2px solid var(--bone);min-height:0;background:var(--black)}
.title-bar{height:34px;background:var(--bone);color:var(--black);display:flex;align-items:center;gap:10px;padding:0 8px;letter-spacing:.08em}
.close-box{width:14px;height:14px;border:2px solid;position:relative}.close-box:after{content:"";position:absolute;width:10px;height:1px;background:currentColor;transform:rotate(45deg);left:0;top:5px}
.stripes{height:12px;flex:1;background:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 3px)}
.preview-window{display:flex;flex-direction:column}.display-shell{flex:1;display:grid;place-items:center;padding:18px;min-height:0}
.display-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.display-bezel{--pixel-scale:2;--pixel-aspect:1.25;position:relative;width:calc(240px * var(--pixel-scale) * var(--pixel-aspect));height:calc(220px * var(--pixel-scale));flex:0 0 auto;overflow:hidden;isolation:isolate;background:#000;outline:1px solid var(--dim);box-shadow:0 0 25px rgba(232,226,198,.08)}
#firmwareCanvas{position:relative;z-index:0;display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;filter:url("#firmwareSoft")}
.slot-mask{--slot-colour-image:none;--slot-colour-opacity:0;--slot-junction-image:none;--slot-junction-opacity:0;position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.slot-mask:before,.slot-mask:after{content:"";position:absolute;inset:0;background-repeat:repeat;background-position:0 0;pointer-events:none}
.slot-mask:before{background-image:var(--slot-colour-image);opacity:var(--slot-colour-opacity);mix-blend-mode:color}
.slot-mask:after{background-image:var(--slot-junction-image);opacity:var(--slot-junction-opacity);mix-blend-mode:multiply}
.raw-output #firmwareCanvas{filter:none}.raw-output .slot-mask{display:none}
.status-strip{height:34px;border-top:1px solid var(--dim);display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-family:MekMono;font-size:11px;color:var(--dim)}
.control-window{display:flex;flex-direction:column}.control-window>p{margin:20px 18px 10px;line-height:1.45;color:var(--dim)}
.power-panel{padding:16px 18px;border-bottom:1px solid var(--dim);font-family:MekMono}
.power-button{width:100%;min-height:68px;padding:12px 18px;border:2px solid var(--bone);border-radius:0;background:var(--bone);color:var(--black);font-family:MekMono;font-size:18px;letter-spacing:.12em;cursor:pointer;box-shadow:4px 4px 0 var(--dim);transition:transform 35ms linear,box-shadow 35ms linear}
.power-button:not(:disabled):active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--dim)}
.power-button:disabled{background:var(--black);color:var(--dim);border-color:var(--dim);box-shadow:none;cursor:default}
.powered-off .controller,.powered-off .preview-actions,.powered-off .control-window>p,.powered-off .micro-note{opacity:.25}
.controller{display:grid;grid-template-columns:64px 64px 64px;grid-template-rows:64px 64px 64px;justify-content:center;margin:18px 0}
.controller button,.preview-actions button{background:var(--black);border:1px solid var(--bone);cursor:pointer}.controller button{font-size:28px}.controller button:active,.controller button.active{background:var(--bone);color:var(--black)}
.controller .action{border-radius:50%;margin:7px;font-size:20px}
.preview-actions{display:grid;gap:8px;padding:0 18px}.preview-actions button{min-height:42px}.preview-actions button:hover{background:var(--bone);color:var(--black)}
.micro-note{font-family:MekMono;font-size:10px!important}.safety-box{margin:auto 18px 18px;border:1px solid var(--dim);padding:12px;display:grid;gap:8px;font-size:11px;color:var(--dim)}.safety-box strong{color:var(--bone)}
@media(max-width:820px){main{height:auto;grid-template-columns:1fr}.preview-window{min-height:70vh}.control-window{min-height:500px}.menu-bar a{display:none}}