:root{
  --bg:#0c0c11;
  --panel:#16161f;
  --panel2:#1e1e2b;
  --line:#2a2a3a;
  --text:#e6e6ef;
  --dim:#8b8ba3;
  --accent:#ffcc00;
  --green:#00d15a;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:
    radial-gradient(circle at 20% -10%, #1a1030 0%, transparent 55%),
    radial-gradient(circle at 90% 0%, #06202a 0%, transparent 50%),
    var(--bg);
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  display:flex;flex-direction:column;min-height:100vh;
  -webkit-user-select:none;user-select:none;
}

/* header */
#topbar{padding:14px 18px 0;}
.title-wrap h1{
  margin:0;font-family:'VT323',monospace;
  font-size:2.6rem;letter-spacing:1px;line-height:1;
  color:#fff;text-shadow:2px 2px 0 #ff1e1e,4px 4px 0 #00b4ff;
}
.subtitle{margin:4px 0 10px;color:var(--dim);font-size:.8rem;}
.rainbow{height:6px;border-radius:3px;
  background:linear-gradient(90deg,#ff1e1e 0 25%,#ffcc00 25% 50%,#00d15a 50% 75%,#00c8ff 75% 100%);}

/* layout */
#layout{flex:1;display:grid;grid-template-columns:56px 1fr 320px;gap:12px;padding:12px 18px;align-items:start;}
aside,section{background:var(--panel);border:1px solid var(--line);border-radius:10px;}

/* toolbar */
#toolbar{padding:8px 6px;display:flex;flex-direction:column;gap:14px;align-items:center;position:sticky;top:8px;}
.tool-group{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center;}
.tool,.act{
  width:40px;height:40px;border:1px solid var(--line);background:var(--panel2);
  color:var(--text);border-radius:8px;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.12s;
}
.tool:hover,.act:hover{border-color:var(--accent);transform:translateY(-1px);}
.tool.active{background:var(--accent);color:#000;border-color:var(--accent);}
.actions{border-top:1px solid var(--line);padding-top:12px;}
.act{font-size:.8rem;}

/* stage */
#stage{padding:14px;display:flex;flex-direction:column;gap:12px;align-items:center;min-height:60vh;}
#canvas-wrap{position:relative;line-height:0;background:#000;padding:0;border:2px solid #333;box-shadow:0 0 0 4px #000,0 10px 40px rgba(0,0,0,.6);}
#canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;}
#gridOverlay{position:absolute;left:0;top:0;pointer-events:none;image-rendering:pixelated;}
#gridOverlay.scanlines{
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 4px);
}
#readout{display:flex;gap:16px;font-size:.75rem;color:var(--dim);flex-wrap:wrap;justify-content:center;}
#readout span{background:var(--panel2);padding:3px 8px;border-radius:6px;border:1px solid var(--line);}
#zoomctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;font-size:.75rem;}
#zoomctl button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:4px 10px;cursor:pointer;}
#zoomctl button:hover{border-color:var(--accent);}
#zoomval{min-width:34px;text-align:center;color:var(--accent);}
.chk{display:flex;align-items:center;gap:4px;color:var(--dim);cursor:pointer;}

/* attr panel */
#attrpanel{padding:14px;display:flex;flex-direction:column;gap:12px;position:sticky;top:8px;max-height:calc(100vh - 20px);overflow:auto;}
#attrpanel h2{margin:0;font-family:'VT323',monospace;font-size:1.5rem;color:var(--accent);letter-spacing:1px;}
#attrpanel h2.mt{margin-top:6px;border-top:1px solid var(--line);padding-top:12px;}
.swatch-block label{display:block;font-size:.7rem;color:var(--dim);margin-bottom:5px;text-transform:uppercase;letter-spacing:1px;}
.swatch-row{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;}
.swatch{aspect-ratio:1;border:2px solid #000;border-radius:5px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.swatch.sel-ink{outline:3px solid var(--accent);outline-offset:1px;}
.swatch.sel-paper{outline:3px solid #00c8ff;outline-offset:1px;}
.toggles{display:flex;gap:8px;}
.tgl{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px;cursor:pointer;font-size:.8rem;font-weight:600;}
.tgl span{display:block;font-size:.6rem;color:var(--dim);font-weight:400;}
.tgl.on{background:var(--green);color:#000;border-color:var(--green);}
.tgl.on span{color:#053;}

/* byte display */
.byte-display{background:#000;border:1px solid var(--line);border-radius:8px;padding:10px;}
.byte-bits{display:flex;gap:4px;justify-content:center;}
.byte-bits .bit{width:28px;height:34px;display:flex;align-items:center;justify-content:center;font-family:'VT323',monospace;font-size:1.4rem;border-radius:5px;font-weight:700;}
.bit.f{background:#ff1e1e33;color:#ff8080;}
.bit.b{background:#ffcc0033;color:#ffe680;}
.bit.p{background:#00c8ff33;color:#8fe1ff;}
.bit.i{background:#00d15a33;color:#7fffb0;}
.byte-legend{display:flex;justify-content:center;gap:4px;margin-top:4px;font-size:.6rem;color:var(--dim);}
.byte-legend span{width:auto;text-align:center;}
.byte-legend span:nth-child(1){width:28px;}
.byte-legend span:nth-child(2){width:28px;}
.byte-val{text-align:center;margin-top:6px;font-size:.85rem;color:var(--dim);}
.byte-val b{color:var(--accent);font-family:'VT323',monospace;font-size:1.3rem;}
.hint{font-size:.68rem;color:var(--dim);line-height:1.4;margin:0;}
.hint code{background:#000;padding:1px 5px;border-radius:4px;color:var(--accent);}

/* dropzone / sliders */
#dropzone{border:2px dashed var(--line);border-radius:8px;padding:16px;text-align:center;font-size:.78rem;color:var(--dim);cursor:pointer;transition:.12s;}
#dropzone.over{border-color:var(--accent);background:#ffcc0011;color:var(--text);}
#dropzone button{background:none;border:none;color:var(--accent);cursor:pointer;text-decoration:underline;font:inherit;}
.slider{display:flex;flex-direction:column;font-size:.7rem;color:var(--dim);gap:3px;}
.slider input{width:100%;accent-color:var(--accent);}
button.big{width:100%;background:var(--accent);color:#000;border:none;border-radius:8px;padding:10px;font-weight:700;cursor:pointer;font-family:'IBM Plex Mono',monospace;}
button.big:disabled{opacity:.4;cursor:not-allowed;}
button.big:hover:not(:disabled){filter:brightness(1.1);}

/* export */
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.export-grid button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px;cursor:pointer;font:inherit;font-size:.8rem;}
.export-grid button:hover{border-color:var(--accent);color:var(--accent);}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal.hidden{display:none;}
.modal-inner{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:min(700px,100%);max-height:85vh;display:flex;flex-direction:column;}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);}
.modal-head h3{margin:0;font-family:'VT323',monospace;font-size:1.4rem;color:var(--accent);}
.modal-head button{background:none;border:none;color:var(--dim);font-size:1.3rem;cursor:pointer;}
#codeArea{flex:1;min-height:300px;background:#000;color:#7fffb0;border:none;padding:14px;font-family:'IBM Plex Mono',monospace;font-size:.75rem;resize:none;}
.modal-foot{padding:12px 16px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line);}
.modal-foot button{background:var(--accent);color:#000;border:none;border-radius:8px;padding:8px 18px;cursor:pointer;font:inherit;font-weight:600;}
.modal-foot button:hover{filter:brightness(1.1);}

/* footer */
#footer{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--dim);border-top:1px solid var(--line);flex-wrap:wrap;gap:8px;}
#footer a{color:var(--accent);text-decoration:none;}
#footer a:hover{text-decoration:underline;}

/* responsive */
@media(max-width:900px){
  #layout{grid-template-columns:1fr;}
  #toolbar{flex-direction:row;flex-wrap:wrap;position:static;}
  .tool-group{flex-direction:row;flex-wrap:wrap;}
  .actions{border-top:none;border-left:1px solid var(--line);padding-top:0;padding-left:12px;}
  #attrpanel{position:static;max-height:none;}
  .title-wrap h1{font-size:2rem;}
}
</parameter>
</invoke>