:root { --bg:#0b0f0a; --fg:#c8e6c9; --dim:#7aa07e; --green:#39ff14; --border:#1f2a1f; --bad:#ff7b72; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
a { color:var(--green); text-decoration:none; }
button, select { font:inherit; color:var(--green); background:#000; border:1px solid var(--border); padding:.25rem .6rem; cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
.dim { color:var(--dim); } .grow { flex:1; } .small { font-size:.8rem; }
.top { display:flex; gap:.5rem; align-items:center; padding:.6rem 16px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.home { font-weight:bold; }
.coffee-link { color:var(--green); border-bottom:1px dashed currentColor; white-space:nowrap; } .coffee-link:hover { border-bottom-style:solid; }
.banner { padding:.5rem 16px; background:rgba(57,255,20,.1); border-bottom:1px solid var(--green); }
.tabs { display:none; }
/* like the Bash app: fixed-height desktop layout, but never smaller than 36rem (short windows scroll the page) */
.layout { display:grid; grid-template-columns:260px minmax(0,1fr) minmax(0,1.2fr); height:calc(100vh - 44px); min-height:36rem; }
.list-pane { border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0; }
.filters { display:flex; gap:.4rem; padding:.5rem; } .filters select { flex:1; min-width:0; width:0; }
.list { list-style:none; margin:0; padding:0; overflow:auto; flex:1; }
.list li { display:flex; gap:.5rem; padding:.35rem .6rem; border-bottom:1px solid var(--border); cursor:pointer; font-size:.85rem; }
.list li:hover, .list li.on { background:rgba(57,255,20,.08); }
.list li.head { cursor:default; color:var(--dim); font-size:.75rem; background:rgba(57,255,20,.03); }
.list .ok { color:var(--green); width:1ch; } .list .n { color:var(--dim); min-width:2.2ch; }
.pane { padding:.8rem 1rem; overflow:auto; min-height:0; }
.challenge-pane { border-right:1px solid var(--border); }
.code-pane { position:relative; display:flex; flex-direction:column; }
h1 { font-size:1.1rem; margin:.2rem 0; color:var(--green); }
.badges span { font-size:.75rem; border:1px solid var(--border); padding:0 .4rem; margin-right:.3rem; color:var(--dim); }
.desc code, .read code, .ex code { color:var(--green); }
.read { margin:.6rem 0; padding:.4rem .6rem; border-left:3px solid var(--border); color:var(--dim); font-size:.9rem; }
details summary { cursor:pointer; color:var(--dim); }
pre { background:#000; border:1px solid var(--border); padding:.5rem; white-space:pre-wrap; overflow-wrap:anywhere; margin:.3rem 0; max-height:16rem; overflow:auto; }
.ex { margin:.4rem 0; font-size:.85rem; }
.editor-bar { display:flex; gap:.4rem; align-items:center; padding-bottom:.3rem; font-size:.8rem; }
textarea { width:100%; flex:1 1 20rem; min-height:14rem; background:#000; color:var(--fg); border:1px solid var(--border); font:inherit; padding:.5rem; resize:vertical; tab-size:4; white-space:pre; }
textarea:focus { outline:1px solid var(--green); }
.actions { display:flex; gap:.5rem; align-items:center; margin:.4rem 0; flex-wrap:wrap; }
#results { flex:0 1 auto; overflow:auto; max-height:45%; }
.case { border-left:3px solid var(--border); padding:.3rem .6rem; margin:.3rem 0; white-space:pre-wrap; font-size:.85rem; overflow-wrap:anywhere; }
.case.ok { border-color:var(--green); } .case.bad { border-color:var(--bad); }
.bad-text { color:var(--bad); }
.coffee-line { color:var(--dim); font-size:.95rem; margin:.6rem 0 0; }
.boot { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.5rem; background:rgba(11,15,10,.94); text-align:center; padding:1rem; }
.boot[hidden] { display:none; }
.boot progress { width:min(22rem, 90%); }
@media (max-width: 800px) {
  .tabs { display:flex; border-bottom:1px solid var(--border); } .tabs button { flex:1; border:0; }
  .tabs button.on { background:rgba(57,255,20,.12); }
  .layout { display:block; height:auto; min-height:0; }
  .list-pane { max-height:30vh; border-right:0; border-bottom:1px solid var(--border); }
  .pane { display:none; } .pane.show { display:flex; flex-direction:column; }
  .challenge-pane.show { display:block; }
  .code-pane { min-height:70vh; }
}