@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');

.eb-devre-1 *,.eb-devre-1 *::before,.eb-devre-1 *::after{box-sizing:border-box}
.eb-devre-1{--bg:#eef2f5; --panel:#ffffff; --ink:#1d2733; --muted:#5b6876; --line:#d3dbe3;
  --grid:rgba(29,39,51,.05); --plus:#d7263d; --minus:#1f6feb; --float:#9aa6b2;
  --lamp:#ffc93c; --lampOff:#f4e7d3; --dot:#ffb000; --btnOn:#1d2733; --btnOnText:#fff;
  
  box-sizing:border-box; color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;font-size:16px;text-align:left;margin:1.5em 0}
.eb-devre-1 button{all:unset;box-sizing:border-box;display:inline-block;cursor:pointer;text-align:center;font-family:inherit;line-height:1.4}
.eb-devre-1 table,.eb-devre-1 th,.eb-devre-1 td{border:0;background:none;margin:0}
.eb-devre-1 p{margin:0 0 1em} .eb-devre-1 h2,.eb-devre-1 h3{color:var(--ink);font-family:inherit;text-transform:none;letter-spacing:normal;padding:0}
.eb-devre-1 canvas{max-width:100%}
.eb-devre-1 .lead{color:var(--muted);margin:0 0 18px;max-width:68ch}
.eb-devre-1 .board{background:var(--panel);border:1px solid var(--line);border-radius:clamp(8px,2vw,14px);padding:clamp(3px,1.2vw,10px);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:20px 20px}
.eb-devre-1 canvas{display:block;width:100%;height:auto;cursor:pointer;touch-action:manipulation}
.eb-devre-1 .controls{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px;align-items:center}
.eb-devre-1 .sw{font:inherit;font-weight:500;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  border-radius:999px;padding:6px 14px;cursor:pointer;min-width:92px}
.eb-devre-1 .sw[aria-pressed="true"]{background:var(--btnOn);color:var(--btnOnText)}
.eb-devre-1 .sw:focus-visible,.eb-devre-1 .ghost:focus-visible{outline:3px solid var(--minus);outline-offset:2px}
.eb-devre-1 .run{font:inherit;font-weight:600;border:0;background:var(--minus);color:#fff;border-radius:8px;padding:7px 18px;cursor:pointer;min-width:110px}
.eb-devre-1 .run.on{background:var(--plus)}
.eb-devre-1 .run:focus-visible{outline:3px solid var(--minus);outline-offset:2px}
.eb-devre-1 .ghost{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;padding:6px 12px;cursor:pointer}
.eb-devre-1 .spacer{flex:1}
.eb-devre-1 .status{margin:14px 0 0;font-size:1.05em;min-height:3em}
.eb-devre-1 .readout{width:100%;border-collapse:collapse;margin-top:14px;font-variant-numeric:tabular-nums}
.eb-devre-1 .wrap{overflow-x:auto}
.eb-devre-1 .readout th,.eb-devre-1 .readout td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.eb-devre-1 .readout th{color:var(--muted);font-weight:500}
.eb-devre-1 .bar{height:8px;border-radius:4px;background:var(--lampOff);overflow:hidden;min-width:80px}
.eb-devre-1 .bar i{display:block;height:100%;background:var(--lamp)}
.eb-devre-1 .legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.9em;margin-top:14px}
.eb-devre-1 .legend span::before{content:"";display:inline-block;width:18px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--c)}