:root{--bg:#1e1e22;--bg2:#26262c;--bg3:#16161a;--line:#3a3a44;--fg:#d8d8e0;--dim:#8a8a98;--acc:#00e5ff;--font:'IBM Plex Mono',monospace;--zx:'Press Start 2P',monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:13px;overflow:hidden}
button{font-family:inherit;color:inherit}
#menubar{display:flex;align-items:center;gap:10px;height:34px;background:var(--bg3);border-bottom:1px solid var(--line);padding:0 10px;position:relative;z-index:20}
.brand{font-family:var(--zx);font-size:11px;color:#fff;white-space:nowrap}.brand span{color:var(--acc);margin-left:4px}
#menus{display:flex}
.menu{position:relative}
.menu-btn{background:none;border:0;padding:8px 10px;cursor:pointer;font-weight:500}
.menu-btn:hover,.menu.open .menu-btn{background:var(--bg2);color:var(--acc)}
.menu-list{display:none;position:absolute;top:100%;left:0;min-width:240px;background:var(--bg2);border:1px solid var(--line);padding:4px;box-shadow:0 8px 24px #0008}
.menu.open .menu-list{display:block}
.menu-list button{display:flex;justify-content:space-between;width:100%;background:none;border:0;padding:6px 10px;text-align:left;cursor:pointer}
.menu-list button:hover{background:var(--acc);color:#000}
.menu-list hr{border:0;border-top:1px solid var(--line);margin:4px 0}
kbd{font-family:inherit;color:var(--dim);font-size:11px}
.menu-list button:hover kbd{color:#000}
#title{margin-left:auto;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stripe{display:flex;height:4px}.stripe i{flex:1}
.stripe i:nth-child(1){background:#d70000}.stripe i:nth-child(2){background:#d7d700}.stripe i:nth-child(3){background:#00d700}.stripe i:nth-child(4){background:#00d7d7}
#main{display:flex;height:calc(100% - 34px - 4px - 26px)}
#tools{width:46px;background:var(--bg3);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:4px;gap:3px;overflow:auto}
#tools button{width:36px;height:34px;background:var(--bg2);border:1px solid var(--line);cursor:pointer;font-size:16px;flex-shrink:0}
#tools button:hover{box-shadow:0 0 8px var(--acc)}
#tools button.active{background:var(--acc);color:#000;border-color:var(--acc)}
#workspace{flex:1;position:relative;overflow:hidden;background:
 repeating-conic-gradient(#232328 0 25%,#1b1b1f 0 50%) 0 0/20px 20px}
#canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
#dropHint{position:absolute;inset:10px;border:2px dashed var(--acc);display:none;align-items:center;justify-content:center;font-family:var(--zx);color:var(--acc);background:#000a;pointer-events:none}
#workspace.drag #dropHint{display:flex}
#panel{width:240px;background:var(--bg3);border-left:1px solid var(--line);overflow:auto;padding:8px}
.pblock{border:1px solid var(--line);background:var(--bg2);padding:8px;margin-bottom:8px}
.pblock h3{margin:0 0 8px;font-family:var(--zx);font-size:8px;color:var(--acc);letter-spacing:1px;text-transform:uppercase}
.inkpaper{position:relative;height:52px;margin-bottom:6px}
#paperSq,#inkSq{position:absolute;width:34px;height:34px;border:2px solid #fff;outline:1px solid #000}
#inkSq{left:0;top:0;z-index:2}#paperSq{left:16px;top:16px}
#swapBtn{position:absolute;left:62px;top:12px;background:var(--bg3);border:1px solid var(--line);cursor:pointer;padding:4px 8px}
.pal{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin-bottom:2px}
.pal button{height:22px;border:1px solid #000;cursor:pointer;padding:0;position:relative}
.pal button.ink::after{content:'I';position:absolute;inset:0;font-size:9px;font-weight:700;color:#fff;mix-blend-mode:difference}
.pal button.pap::before{content:'P';position:absolute;right:2px;bottom:0;font-size:9px;font-weight:700;color:#fff;mix-blend-mode:difference}
.hint{color:var(--dim);font-size:11px;margin:4px 0}
.toggles{display:flex;flex-direction:column;gap:3px;margin:8px 0}
.toggles input{accent-color:var(--acc)}
.row{display:flex;gap:6px;align-items:center}
select,input[type=text],.ai input{background:var(--bg3);color:var(--fg);border:1px solid var(--line);font-family:inherit;padding:3px}
#nav{width:100%;image-rendering:pixelated;border:1px solid #000;display:block}
#insp{margin:0;font-size:11px;line-height:1.5;white-space:pre-wrap}
#layerList{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.lrow{display:flex;align-items:center;gap:6px;padding:4px 6px;background:var(--bg3);border:1px solid var(--line);cursor:pointer;font-size:12px}
.lrow:hover{border-color:#5a5a66}
.lrow.on{border-color:var(--acc);box-shadow:inset 3px 0 0 var(--acc);color:#fff}
.lrow .eye{background:none;border:0;cursor:pointer;color:var(--acc);padding:0 2px;font-size:13px}
.lname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbar{display:flex;gap:2px}
.lbar button{flex:1;background:var(--bg3);border:1px solid var(--line);cursor:pointer;padding:3px 0}
.lbar button:hover{border-color:var(--acc);box-shadow:0 0 6px var(--acc)}
#status{height:26px;display:flex;align-items:center;gap:14px;padding:0 10px;background:var(--bg3);border-top:1px solid var(--line);font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden}
#status .grow{flex:1}
#status a{color:var(--acc)}
.zb{display:flex;align-items:center;gap:4px}
.zb button{background:var(--bg2);border:1px solid var(--line);width:22px;cursor:pointer}
#zoomR{width:90px;accent-color:var(--acc)}
#stTest.ok{color:#00d700}#stTest.bad{color:#ff4040}
.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:50}
.hidden{display:none!important}
.mbox{background:var(--bg2);border:1px solid var(--line);padding:16px;max-width:680px;width:94%;max-height:94vh;overflow:auto;box-shadow:0 0 0 4px #000,0 0 40px #00e5ff33}
.mbox h2{font-family:var(--zx);font-size:12px;color:var(--acc);margin:0 0 12px}
.mgrid{display:flex;gap:14px;flex-wrap:wrap}
#prev{width:384px;max-width:100%;image-rendering:pixelated;border:4px solid #000;background:#000}
.mctl{flex:1;min-width:180px;display:flex;flex-direction:column;gap:8px}
.mctl label{display:flex;flex-direction:column;gap:3px}
.mctl button,.mact button{background:var(--bg3);border:1px solid var(--line);padding:6px 12px;cursor:pointer}
.mctl button:hover,.mact button:hover{border-color:var(--acc)}
.ai{display:flex;gap:4px}.ai input{flex:1;min-width:0}
.mact{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.cmp{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
.cmp th,.cmp td{border:1px solid var(--line);padding:6px;text-align:left;vertical-align:top}
.cmp th{color:var(--acc);font-family:var(--zx);font-size:8px}
.cmp .hi{color:#00d700}.cmp .lo{color:#ff6060}
.primary{background:var(--acc)!important;color:#000;font-weight:700}
#toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(20px);background:#000;border:1px solid var(--acc);color:var(--acc);padding:8px 14px;font-family:var(--zx);font-size:9px;opacity:0;transition:.25s;pointer-events:none;z-index:60}
#toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width:760px){
 #title,.credit,#stCell,#stMode{display:none}
 #main{flex-direction:column;height:calc(100% - 34px - 4px - 26px)}
 #tools{width:100%;flex-direction:row;order:3;border:0;border-top:1px solid var(--line);height:46px;overflow-x:auto}
 #workspace{order:1;flex:1;min-height:200px}
 #panel{order:2;width:100%;max-height:36vh;border:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:6px}
 .pblock{margin:0}

 .brand span{display:none}
 .menu-btn{padding:8px 6px}
}