:root{
  --bg:#0e1116; --bg2:#151a21; --bg3:#1b222c; --line:#26303d;
  --fg:#e6edf3; --mut:#8b98a9; --accent:#00add8; --accent2:#5dc9e2;
  --ok:#3fb950; --err:#f85149; --warn:#d29922;
  --mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.hidden{display:none !important}
.view{display:none}
.view.on{display:block}
.mono{font-family:var(--mono);font-size:.92em;background:var(--bg3);padding:1px 5px;border-radius:4px}
.muted{color:var(--mut)}

/* header */
.top{background:linear-gradient(180deg,#101720,#0e1116);border-bottom:1px solid var(--line);padding:18px 0}
.top .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between}
.brand{display:flex;gap:14px;align-items:center}
.gopher{font-size:34px;line-height:1}
h1{font-size:19px;margin:0;letter-spacing:-.2px}
.sub{margin:2px 0 0;color:var(--mut);font-size:13px}
.prog{min-width:210px;flex:1;max-width:300px}
.bar{height:7px;border-radius:99px;background:var(--bg3);overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#7ee0a0);transition:width .35s}
#ptext{font-size:12px;color:var(--mut);display:block;margin-top:5px}

/* tabs */
.tabs{display:flex;gap:6px;padding-top:14px;padding-bottom:0;overflow-x:auto}
.tabs button{
  background:transparent;border:1px solid transparent;border-bottom:none;color:var(--mut);
  padding:9px 14px;border-radius:9px 9px 0 0;font-size:14px;cursor:pointer;white-space:nowrap;
}
.tabs button.on{background:var(--bg2);border-color:var(--line);color:var(--fg)}
main{padding:18px 16px 40px}

/* panels & cards */
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
.panel h2{font-size:16px;margin:0 0 10px}
.levels{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.levels button{
  background:var(--bg2);border:1px solid var(--line);color:var(--mut);
  padding:7px 12px;border-radius:99px;font-size:13px;cursor:pointer
}
.levels button.on{color:var(--fg);border-color:var(--accent);background:#0d2b35}
.levels button .n{opacity:.65;font-size:12px;margin-left:5px}
#cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.card{
  background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:14px;cursor:pointer;
  transition:border-color .15s,transform .15s;position:relative
}
.card:hover{border-color:var(--accent);transform:translateY(-1px)}
.card h3{margin:0 0 6px;font-size:14.5px;padding-right:22px}
.card .tags{margin-top:8px}
.card.solved{border-color:#245b2f}
.card .check{position:absolute;top:12px;right:12px;color:var(--ok);font-size:15px}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tags span{background:var(--bg3);color:var(--mut);font-size:11px;padding:2px 7px;border-radius:99px;font-family:var(--mono)}
.pill{display:inline-block;background:#0d2b35;color:var(--accent2);border:1px solid #1d4f5e;
  font-size:11.5px;padding:2px 9px;border-radius:99px;margin-bottom:8px}

/* exercise detail */
#back{margin-bottom:12px}
.exo-head h2{margin:0 0 6px;font-size:19px}
.brief{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:9px;padding:13px 15px;margin:12px 0}
.brief code{font-family:var(--mono);font-size:.9em;background:var(--bg3);padding:1px 5px;border-radius:4px}
.editor-wrap{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg2)}
.editor-bar{display:flex;align-items:center;gap:7px;padding:8px 11px;border-bottom:1px solid var(--line);background:#11161d}
.dot{width:10px;height:10px;border-radius:50%;background:#33404f}
.dot:nth-child(1){background:#ff5f56}.dot:nth-child(2){background:#ffbd2e}.dot:nth-child(3){background:#27c93f}
.fname{font-family:var(--mono);font-size:12px;color:var(--mut);margin-left:6px}
.spacer{flex:1}
.hint-key{font-size:11.5px;color:var(--mut)}
#code{
  width:100%;min-height:340px;border:0;outline:0;resize:vertical;padding:13px;
  background:#0b0f14;color:#e6edf3;font-family:var(--mono);font-size:13px;line-height:1.55;
  tab-size:4;-moz-tab-size:4;white-space:pre;overflow-wrap:normal;overflow-x:auto;display:block
}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
button{
  font:inherit;font-size:14px;border-radius:8px;padding:9px 15px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg3);color:var(--fg);transition:filter .12s
}
button:hover{filter:brightness(1.18)}
button:disabled{opacity:.5;cursor:default;filter:none}
button.primary{background:var(--accent);border-color:var(--accent);color:#04222b;font-weight:600}
button.ghost{background:transparent}
#stdin-row{margin-bottom:10px}
#stdin{width:100%;background:#0b0f14;color:var(--fg);border:1px solid var(--line);border-radius:8px;
  padding:9px;font-family:var(--mono);font-size:13px}
.hints div{background:#1e1a0d;border:1px solid #3d3316;color:#e8d9a8;border-radius:8px;
  padding:9px 12px;margin-bottom:8px;font-size:13.5px}
.output{
  background:#07090c;border:1px solid var(--line);border-radius:9px;padding:12px;
  font-family:var(--mono);font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  max-height:460px;overflow:auto;margin:0 0 14px
}
.output.ok{border-color:#245b2f}.output.bad{border-color:#6b2620}
.output .tag{display:block;font-weight:700;margin-bottom:7px;font-size:12px;letter-spacing:.4px}
.output .tag.ok{color:var(--ok)}.output .tag.bad{color:var(--err)}
.reveal{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:16px;margin-top:6px}
.reveal h3{font-size:14px;margin:0 0 9px;color:var(--accent2)}
.reveal pre{background:#07090c;border:1px solid var(--line);border-radius:8px;padding:12px;
  overflow-x:auto;font-family:var(--mono);font-size:12.5px;margin:0 0 14px}
.reveal .expl{font-size:14px}
.reveal .expl code{font-family:var(--mono);font-size:.9em;background:var(--bg3);padding:1px 5px;border-radius:4px}

/* diagnostic */
.q{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:15px;margin-bottom:12px}
.q h3{margin:0 0 8px;font-size:14.5px;font-weight:600}
.q .qcode{background:#07090c;border:1px solid var(--line);border-radius:8px;padding:11px;
  font-family:var(--mono);font-size:12.5px;overflow-x:auto;white-space:pre;margin:0 0 11px;color:#cfe4ef}
.q label{display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:14px}
.q label:hover{background:var(--bg3)}
.q label input{margin-top:4px;accent-color:var(--accent)}
.q .theme{font-size:11px;color:var(--mut);float:right;font-family:var(--mono)}
.res-correct{border-color:#245b2f !important}
.res-wrong{border-color:#6b2620 !important}
.expl{margin-top:10px;background:#0b0f14;border-left:3px solid var(--accent);border-radius:6px;padding:10px 12px;font-size:13.5px;color:#cbd6e2}
.expl b{color:#fff}

/* results */
.score{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.big{font-size:44px;font-weight:700;line-height:1;color:var(--accent)}
.themes{width:100%;margin-top:6px}
.theme-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:13.5px}
.theme-row .name{width:170px;color:var(--mut)}
.theme-row .mini{flex:1;height:8px;background:var(--bg3);border-radius:99px;overflow:hidden}
.theme-row .mini i{display:block;height:100%;border-radius:99px}

/* plan */
.steps,.rules{margin:0;padding-left:22px}
.steps li,.rules li{margin-bottom:9px}
.weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.week{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:13px}
.week h3{margin:0 0 6px;font-size:13.5px;color:var(--accent2)}
.week p{margin:0;font-size:13.5px;color:#cbd6e2}

footer{padding:20px 16px 40px;font-size:12.5px}
@media (max-width:640px){
  #code{min-height:300px;font-size:12.5px}
  .top .wrap{gap:10px}
  .theme-row .name{width:110px}
}