:root{
  --bg:#0c0e11;
  --panel:#14171c;
  --panel2:#181c22;
  --edge:#262c35;
  --edge2:#2d3540;
  --ink:#e8e2d5;
  --dim:#9aa3ad;
  --dim2:#6b7480;
  --amber:#ffb454;
  --amber2:#ffd9a8;
  --copper:#8a6d3b;
  --copper2:#b08d4f;
  --flow:#ffd9a0;
  --red:#ff4438;
  --redoff:#3a100d;
  --green:#4ade80;
  --cream:#e9ddc0;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:#2d3540 transparent}
body{
  background:
    radial-gradient(1200px 500px at 50% -100px, rgba(255,180,84,.05), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.45;
}
.mono{font-family:var(--mono)}
.amber{color:var(--amber)}
.dim{color:var(--dim)}

header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 22px 10px;max-width:1660px;margin:0 auto;
}
h1{font-size:22px;font-weight:700;letter-spacing:.2px}
.chipname{color:var(--amber);text-shadow:0 0 18px rgba(255,180,84,.35)}
.slash{color:var(--dim2);font-weight:400}
.sub{color:var(--dim);font-size:13px;max-width:720px;margin-top:3px}
.hd-right{display:flex;align-items:center;gap:10px;padding-top:4px}
.pill{
  font-family:var(--mono);font-size:12px;color:var(--amber2);
  border:1px solid #4a3a22;background:#201a10;border-radius:999px;
  padding:4px 12px;letter-spacing:.12em;
}
.led{
  width:11px;height:11px;border-radius:50%;display:inline-block;
  background:var(--redoff);border:1px solid #4a1512;flex:none;
}
.led.on{background:var(--red);box-shadow:0 0 8px var(--red);border-color:var(--red)}

.controls{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding:10px 22px 14px;max-width:1660px;margin:0 auto;
}
.ctl-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctl-group.grow{flex:1;justify-content:flex-end}
.ctl-label{font-size:11px;color:var(--dim2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.btn{
  font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink);
  background:var(--panel2);border:1px solid var(--edge2);border-radius:7px;
  padding:6px 12px;cursor:pointer;transition:all .12s;letter-spacing:.04em;
}
.btn:hover{border-color:var(--copper2);color:var(--amber2)}
.btn:active{transform:translateY(1px)}
.btn.accent{background:#2a1e0e;border-color:#6b4d22;color:var(--amber2)}
.btn.accent:hover{background:#3a2a12}
.btn.danger{background:#231014;border-color:#5a2323;color:#ff8f84}
.btn.demo{border-color:var(--edge2)}
input[type=range]{accent-color:var(--amber);width:110px}

main{
  display:grid;grid-template-columns:330px minmax(0,1fr) 360px;
  gap:14px;padding:4px 22px 24px;max-width:1660px;margin:0 auto;align-items:start;
}
main > *{min-width:0}
.card{
  background:var(--panel);border:1px solid var(--edge);border-radius:12px;
  padding:12px;margin-bottom:14px;min-width:0;
}
#panels .card{margin-bottom:14px}
.card-title{
  font-size:10.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

#calc{display:flex;flex-direction:column;gap:14px;position:sticky;top:10px}

.display{
  background:#0a0b0c;border:1px solid #20242a;border-radius:10px;
  padding:12px 14px 18px;box-shadow:inset 0 2px 10px rgba(0,0,0,.6);
}
.disp-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.model{color:var(--dim2);font-size:9px;letter-spacing:.35em}
.digits{display:flex;gap:3px;padding:4px 6px;background:#050607;border-radius:6px}
.digit{position:relative;width:27px;height:48px}
.digit .s{
  position:absolute;left:7px;right:7px;height:4.5px;
  background:var(--redoff);border-radius:2px;transition:background .12s,box-shadow .12s;
}
.digit .s.on{background:var(--red);box-shadow:0 0 6px var(--red)}
.digit .s.a{top:0}
.digit .s.g{top:calc(50% - 2.25px)}
.digit .s.d{bottom:0}
.digit .s.b{left:auto;right:0;top:5px;bottom:22px;width:4.5px;height:auto}
.digit .s.c{left:auto;right:0;top:22px;bottom:5px;width:4.5px;height:auto}
.digit .s.f{left:0;top:5px;bottom:22px;width:4.5px;height:auto}
.digit .s.e{left:0;top:22px;bottom:5px;width:4.5px;height:auto}
.digit .dp{
  position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--redoff);transition:background .12s;
}
.digit .dp.on{background:var(--red);box-shadow:0 0 5px var(--red)}

.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:2px}
.key{
  font-family:var(--mono);font-size:19px;font-weight:600;
  color:#241f14;background:linear-gradient(180deg,#efe4c8,#e3d5b2);
  border:1px solid #b9a77f;border-bottom-width:3px;border-radius:9px;
  padding:13px 0;cursor:pointer;transition:all .08s;box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.key:hover{filter:brightness(1.06)}
.key:active{transform:translateY(2px);border-bottom-width:1px}
.key.press{transform:translateY(2px);border-bottom-width:1px;background:#f6eed8}
.key.op{background:linear-gradient(180deg,#d9a05c,#c98d44);border-color:#a06f32;color:#241a0c}
.key.fn{background:linear-gradient(180deg,#e07a6a,#cf6555);border-color:#a34a3d;color:#2a0f0b}
.key.eq{
  grid-column:1 / -1;background:linear-gradient(180deg,#e2711d,#c96212);
  border-color:#9c4d0d;color:#fff;font-size:20px;
}

.hint{font-size:10px;color:var(--dim2);text-align:center}

.svgwrap{overflow-x:auto}
#schematic{width:100%;height:auto;display:block;min-width:1000px}
.chip{fill:#12161b;stroke:#39424e;stroke-width:2}
.chip-title{fill:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}
.block rect{fill:#161b22;stroke:#2d3540;stroke-width:1.4}
.block .inner{fill:#12161c;stroke:#2d3540}
.block{transition:filter .15s}
.block.hl rect{fill:#221a0f;stroke:var(--amber);stroke-width:2}
.block.hl{filter:drop-shadow(0 0 7px rgba(255,180,84,.4))}
.bttl{fill:var(--amber2);font-family:var(--mono);font-size:11.5px;font-weight:600}
.bsub{fill:var(--dim);font-family:var(--mono);font-size:9px}
.pcv{fill:var(--amber);font-family:var(--mono);font-size:11px;font-weight:600}

.wire{stroke:var(--copper);stroke-width:1.6;fill:none}
.wire.on{stroke:var(--copper2);stroke-width:2}
.flowp{
  stroke:var(--flow);stroke-width:2.6;fill:none;
  stroke-dasharray:6 300;opacity:0;pointer-events:none;
}
.flowp.on{opacity:1;animation:flow .85s linear 1}
@keyframes flow{to{stroke-dashoffset:-306}}
.wl{fill:var(--dim2);font-family:var(--mono);font-size:8.5px}

.kcell{fill:#1a1f26;stroke:#2d3540;stroke-width:1}
.kcell.scan{fill:#2f2410;stroke:var(--amber)}
.kcell.hit{fill:#4a3410;stroke:var(--amber2)}
.region{fill:#1d232b;stroke:#2d3540;stroke-width:1}
.region.on{fill:#3a2c12;stroke:var(--amber)}
.region.hit{fill:#4a3510;stroke:var(--amber2)}
.regtxt{fill:var(--dim2);font-family:var(--mono);font-size:7.5px;pointer-events:none}

.sdg{fill:#2a0a08;stroke:#3a1310;stroke-width:1}
.sdg.lit{fill:var(--red);filter:drop-shadow(0 0 3px var(--red))}

.regrow{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.reglabel{font-size:9.5px;color:var(--dim2);width:38px;flex:none;text-transform:uppercase}
.strip{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto}
.cell{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--dim);
  width:21px;height:24px;display:flex;align-items:center;justify-content:center;
  background:#101318;border:1px solid var(--edge);border-radius:4px;flex:none;
}
.cell.hi{color:var(--amber);background:#221a0f;border-color:var(--amber);box-shadow:0 0 6px rgba(255,180,84,.35)}
.cell.carry{color:var(--red);border-color:#5a2323;background:#231014}
.ledrow{display:flex;align-items:center;gap:8px;margin:10px 0 8px}
.ledrow .led{width:12px;height:12px}
.flagrow{display:flex;align-items:center;gap:6px;margin-top:6px}
.flagstrip{display:flex;gap:2px}
.fbit{
  width:8px;height:8px;border-radius:2px;background:#16191e;border:1px solid var(--edge);
}
.fbit.on{background:var(--amber);box-shadow:0 0 4px var(--amber);border-color:var(--amber)}

.instr .instr-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.big{font-size:15px;font-weight:600}
#decode{font-size:11px;margin-bottom:10px}
.rombar{display:flex;gap:3px}
.romseg{
  flex:1;font-family:var(--mono);font-size:7.5px;text-align:center;padding:4px 0;
  background:#1a1f26;border:1px solid #2d3540;color:var(--dim2);border-radius:3px;
  transition:all .15s;white-space:nowrap;overflow:hidden;
}
.romseg.on{background:#3a2c12;color:var(--amber);border-color:var(--amber)}

.trace{
  height:300px;overflow:auto;font-size:10.5px;line-height:1.65;
  background:#0d1013;border:1px solid var(--edge);border-radius:8px;padding:8px 10px;
  min-width:0;
}
.tline{display:grid;grid-template-columns:46px 62px minmax(0,1fr);column-gap:8px;white-space:nowrap}
.tline .pc{color:var(--dim2)}
.tline .mne{color:var(--amber);font-weight:600}
.tline .arg{color:var(--ink);overflow:hidden;text-overflow:ellipsis;min-width:0}
.tline.fresh{animation:tin .25s ease}
@keyframes tin{from{opacity:0;transform:translateY(3px)}to{opacity:1}}

.notes ul{list-style:none;margin:0 0 10px}
.notes li{
  font-size:11.5px;color:var(--dim);padding-left:14px;position:relative;margin-bottom:7px;
}
.notes li::before{content:"▸";position:absolute;left:0;color:var(--amber)}
.notes b{color:var(--ink)}
.notes .src{font-size:10px;color:var(--dim2);word-break:break-all}
.notes a{color:var(--amber2);text-decoration:none;border-bottom:1px dotted #6b4d22}
.notes a:hover{color:var(--amber)}

footer{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:0 22px 26px;max-width:1660px;margin:0 auto;
  color:var(--dim2);font-size:10.5px;
}

@media (max-width:1500px){
  main{grid-template-columns:330px minmax(0,1fr)}
  #panels{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
  #panels .card{margin-bottom:0}
}
@media (max-width:860px){
  main{grid-template-columns:minmax(0,1fr)}
  #panels{grid-column:auto;grid-template-columns:minmax(0,1fr)}
  #calc{position:static}
  h1{font-size:18px}
  .controls .ctl-group.grow{justify-content:flex-start}
  header{flex-wrap:wrap}
}