@import url('https://fonts.googleapis.com/css2?family=VT323&family=JetBrains+Mono:wght@400;700&display=swap');

:root{
  --gray:#c0c0c0; --gray2:#bdbdbd; --hi:#ffffff; --sh:#808080;
  --teal:#008080;
  --amber:#c87b00;
  --int:#0b50d0; --bool:#7a1fa2; --char:#b5651d; --unit:#2e8b57;
  --red:#cc2222;
  --crt:#36ff7a;
}
*{box-sizing:border-box}
html,body{margin:0;background:#0e6d6d;background-image:
  radial-gradient(circle at 20% 10%, #0a8a8a 0, #075c5c 60%);
  min-height:100%;}
body{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;color:#111;
  display:flex;justify-content:center;padding:18px 10px 60px;}
.wrap{max-width:900px;width:100%;margin:0 auto;}

.win{background:var(--gray);padding:4px;
  box-shadow:inset -2px -2px var(--sh), inset 2px 2px var(--hi), 6px 8px 0 rgba(0,0,0,.35);}
.titlebar{background:linear-gradient(90deg,#00007a,#1084d0);color:#fff;
  font-family:'VT323',monospace;font-size:24px;letter-spacing:1px;line-height:1;
  padding:6px 8px;display:flex;align-items:center;gap:8px;}
.titlebar .ico{width:18px;height:18px;display:inline-block;background:var(--gray);
  box-shadow:inset -1px -1px var(--sh),inset 1px 1px var(--hi);
  color:#000;text-align:center;font-size:15px;line-height:18px;}
.titlebar .sp{flex:1}
.tbtn{width:18px;height:18px;background:var(--gray);font-family:monospace;font-weight:700;
  font-size:12px;line-height:14px;color:#000;border:0;cursor:default;
  box-shadow:inset -1px -1px var(--sh),inset 1px 1px var(--hi);}
.menubar{font-size:12px;padding:3px 6px;display:flex;gap:14px;background:var(--gray);
  border-bottom:1px solid var(--sh)}
.menubar span{cursor:default}
.menubar u{text-decoration:underline}

.inner{padding:8px;}
.sunk{box-shadow:inset 2px 2px var(--sh), inset -2px -2px var(--hi);}
.raise{box-shadow:inset -2px -2px var(--sh), inset 2px 2px var(--hi);}

.hud{display:flex;align-items:center;justify-content:space-between;
  padding:6px 8px;margin-bottom:8px;}
.led{font-family:'VT323',monospace;background:#000;color:#ff2a2a;
  font-size:34px;line-height:30px;padding:3px 7px 1px;letter-spacing:2px;
  box-shadow:inset 2px 2px #2a0000, inset -1px -1px #500;
  text-shadow:0 0 6px #ff2a2a99;min-width:74px;text-align:right;}
.led.t{color:#39d6ff;text-shadow:0 0 6px #39d6ff99;box-shadow:inset 2px 2px #001a22,inset -1px -1px #035;}
.smiley{width:46px;height:46px;font-size:24px;line-height:42px;text-align:center;
  background:var(--gray);cursor:pointer;user-select:none;
  box-shadow:inset -2px -2px var(--sh), inset 2px 2px var(--hi);}
.smiley:active{box-shadow:inset 2px 2px var(--sh), inset -1px -1px var(--hi);}

.boardframe{padding:9px;display:flex;justify-content:center;overflow:auto;}
.board{position:relative;}
.grid{display:grid;position:relative;z-index:2;}
.svg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible;}

.cell{position:relative;background:var(--gray2);user-select:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset -2px -2px var(--sh), inset 2px 2px var(--hi);}
.cell.rev{cursor:default;background:#cfcfcf;
  box-shadow:inset 1px 1px var(--sh);}
.cell.boom{background:var(--red);box-shadow:inset 1px 1px #600;}
.cell .hole{font-size:1.15em;color:#4a4a4a;font-weight:700;opacity:.6;
  font-family:'JetBrains Mono',monospace;}
.chip{position:absolute;font-size:9px;line-height:1;font-weight:700;
  padding:1px 2px;border-radius:2px;font-family:'JetBrains Mono',monospace;}
.chip.shp{top:1px;left:1px;color:var(--teal);}
.chip.shp.clue{background:var(--teal);color:#fff;}
.chip.shp.ghost{color:#055;background:#cfe8e8;border:1px dotted var(--teal);}
.chip.lf{bottom:1px;right:1px;color:var(--amber);}
.chip.lf.clue{background:var(--amber);color:#fff;}
.chip.lf.ghost{color:#7a4d00;background:#f4e4c6;border:1px dotted var(--amber);}
.chip.lf.val{letter-spacing:.2px;max-width:none;}
.chip.shp.cons{background:#6b3fa0;color:#fff;border-radius:2px;letter-spacing:.1px;
  font-size:8px;max-width:calc(100% - 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:0 0 0 1px #2226;}
.chip.lf.bcons{background:#b3357a;color:#fff;border-radius:2px;letter-spacing:.1px;font-size:8px;
  box-shadow:0 0 0 1px #2226;}
.chip .syn{opacity:.7;font-size:8px;margin-left:1px;}
.cell.seed{outline:2px solid #00000022;}
.cell.assistReady{background:#fcf7cf;box-shadow:inset -2px -2px #b8a83a, inset 2px 2px #fff;}
.cell.annotated{background:#f3e8f7;}
.amk{color:#b3357a;font-weight:800;font-family:'JetBrains Mono',monospace;}

.ty{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.92em;}
.ty .br{color:#666}
.ty .ck{position:absolute;top:0px;right:2px;font-size:8px;color:#0a8a3a}
.ty{white-space:normal;font-size:.74em;line-height:1.02;text-align:center;
  display:inline-block;max-width:100%;word-spacing:-1px;}
.lp.Int{color:var(--int)} .lp.Bool{color:var(--bool)} .lp.Char{color:var(--char)} .lp.Unit{color:var(--unit)}
.fn{font-weight:700}
.fn.Maybe{color:#0a8a8a} .fn.IO{color:#b0207a} .fn.fMap{color:#7a5a12}

.annot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.45em;color:#b3357a;text-shadow:0 1px 0 #fff;}

.console{margin-top:10px;background:#06120c;color:var(--crt);font-family:'VT323',monospace;
  font-size:18px;line-height:1.18;padding:8px 10px;min-height:96px;white-space:pre-wrap;
  position:relative;overflow:hidden;box-shadow:inset 2px 2px #000, inset -1px -1px #0a3;}
.console::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,#0000 0 2px,#00000040 2px 3px);}
.console .err{color:#ff5a5a;text-shadow:0 0 5px #ff000066}
.console .ok{color:#6effa0}
.console .dim{color:#1f9e5a}
.console .car{color:#ffd24d}
.cursor{display:inline-block;width:9px;height:16px;background:var(--crt);vertical-align:-2px;
  animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.btn{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;background:var(--gray);
  padding:5px 10px;cursor:pointer;color:#000;
  box-shadow:inset -2px -2px var(--sh), inset 2px 2px var(--hi);}
.btn:active{box-shadow:inset 2px 2px var(--sh), inset -1px -1px var(--hi);}
.btn.on{box-shadow:inset 2px 2px var(--sh), inset -1px -1px var(--hi);background:#d6d6b0}
.seg{display:flex}
.seg .btn{margin:0}
#newBtn{margin-left:auto}
label.cb{font-size:12px;display:flex;align-items:center;gap:5px;cursor:pointer}
.legend .assistrow{margin-top:10px;padding-top:8px;border-top:1px solid #0002;color:#333}

.legend{margin-top:10px;font-size:12.5px;line-height:1.5;background:var(--gray);padding:10px 12px;}
.legend .row{display:flex;gap:8px;align-items:flex-start;margin:4px 0}
.tag{font-weight:700;padding:1px 5px;border-radius:2px;color:#fff;white-space:nowrap;font-size:11px}
.tag.t{background:var(--teal)} .tag.a{background:var(--amber)}
.legend code{background:#00000010;padding:0 3px;border-radius:2px}
.legend .cchip{background:#5b3aa8;color:#fff;padding:0 4px;border-radius:2px;font-size:11px;font-weight:700}
.wirekey{display:inline-block;width:22px;height:4px;border-radius:2px;vertical-align:middle}
details summary{cursor:pointer;font-weight:700;font-family:'VT323',monospace;font-size:20px}
.sig{font-size:12px;color:#dfffff;opacity:.8;text-align:center;margin:6px 0 14px;font-family:'JetBrains Mono',monospace}
.foot{font-size:11px;color:#bfffff;opacity:.6;text-align:center;margin-top:14px}