: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, .btn { 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; }
.top { display:flex; gap:.5rem; align-items:center; padding:.6rem 16px; border-bottom:1px solid var(--border); }
.home { font-weight:bold; }
.banner { padding:.5rem 16px; background:rgba(57,255,20,.1); border-bottom:1px solid var(--green); }
.tabs { display:none; }
/* answer row is capped (it scrolls) so the terminal and its VM buttons always keep room;
   min-height lets short windows (e.g. 1366x768 at 125-150% scaling) scroll the page instead of clipping */
.layout { display:grid; grid-template-columns:260px minmax(0,1fr) minmax(0,1fr); grid-template-rows:fit-content(55%) minmax(16rem,1fr); gap:0; height:calc(100vh - 44px); min-height:36rem; }
.list-pane { grid-row:1 / span 2; 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; }
.progress-io { display:flex; gap:.4rem; padding:.5rem; border-top:1px solid var(--border); }
.pane { padding:.8rem 1rem; overflow:auto; min-height:0; }
.challenge-pane { grid-column:2; grid-row:1 / span 2; border-right:1px solid var(--border); }
.answer-pane { grid-column:3; grid-row:1; border-bottom:1px solid var(--border); }
.term-pane { grid-column:3; grid-row:2; position:relative; display:flex; flex-direction:column; padding:.4rem; }
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 { color:var(--green); }
.read { margin:.6rem 0; padding:.4rem .6rem; border-left:3px solid var(--border); color:var(--dim); font-size:.9rem; }
pre { background:#000; border:1px solid var(--border); padding:.5rem; white-space:pre-wrap; overflow-wrap:anywhere; max-height:14rem; overflow:auto; }
details summary { cursor:pointer; color:var(--dim); }
textarea { width:100%; background:#000; color:var(--green); border:1px solid var(--border); font:inherit; padding:.5rem; resize:vertical; tab-size:4; }
.actions { display:flex; gap:.5rem; align-items:center; margin:.4rem 0; flex-wrap:wrap; }
.case { border-left:3px solid var(--border); padding:.3rem .6rem; margin:.3rem 0; white-space:pre-wrap; font-size:.85rem; }
.case.ok { border-color:var(--green); } .case.bad { border-color:var(--bad); }
.del { color:var(--bad); } .ins { color:var(--green); }
.term-bar { display:flex; gap:.4rem; align-items:center; font-size:.8rem; padding-bottom:.3rem; }
#term { flex:1; min-height:12rem; }
.line-input { display:none; gap:.3rem; margin-top:.3rem; } .line-input input { flex:1; background:#000; color:var(--green); border:1px solid var(--border); font:inherit; padding:.3rem; }
.boot { position:absolute; inset:2.2rem .4rem .4rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.5rem; background:rgba(11,15,10,.92); }
.boot[hidden] { display:none; }
@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, .answer-pane.show { display:block; }
  .term-pane { height:60vh; }
  .line-input { display:flex; }
}
#term { overflow:hidden; } .xterm .xterm-viewport { background:#000 !important; scrollbar-color: var(--border) #000; scrollbar-width: thin; }
.coffee-line { color:var(--dim); font-size:.95rem; margin:.6rem 0 0; }
.coffee-link { color:var(--green); text-decoration:none; border-bottom:1px dashed currentColor; white-space:nowrap; } .coffee-link:hover { border-bottom-style:solid; }