:root {
  color-scheme: dark;
  --bg:#0b1220; --panel:#111c2e; --panel2:#17243a; --line:#293a55;
  --text:#edf3ff; --muted:#a5b4cc; --accent:#76e0c2; --accent2:#8eb7ff;
  --danger:#ff9b9b; --good:#91e6b0; --cell:#1c2d46;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1000px 600px at 80% -10%,#1c3150 0%,transparent 60%),var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
button,select,input{font:inherit}
button{cursor:pointer}
.app{max-width:1200px;margin:auto;padding:28px 20px 56px}
header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:#081321;font-weight:900;font-size:20px}
h1{font-size:clamp(24px,4vw,34px);line-height:1.1;margin:0}
.subtitle{color:var(--muted);margin:5px 0 0;font-size:14px}
.pill{border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--muted);font-size:13px;white-space:nowrap}
.layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:18px;align-items:start}
.card{background:linear-gradient(180deg,rgba(23,36,58,.96),rgba(17,28,46,.96));border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 16px 40px #0002}
.card h2{font-size:18px;margin:0 0 8px}
.muted{color:var(--muted)}
.levelbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.levelname{font-size:20px;font-weight:750}
.progress{height:6px;background:#263750;border-radius:20px;overflow:hidden;margin:12px 0 18px}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0;transition:width .25s}
.challenge{color:var(--muted);margin:0 0 18px}
.boards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.board-title{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}
.grid-board{display:grid;gap:6px;background:#0b1423;border:1px solid #31445f;border-radius:12px;padding:8px;min-height:190px;aspect-ratio:1.25}
.cell{border:1px dashed #415572;border-radius:6px;background:#142238;min-width:0;min-height:26px}
.cell.filled{background:linear-gradient(145deg,#2a5270,#24415f);border:1px solid #4e829e}
.cell.filled:nth-child(3n){background:linear-gradient(145deg,#315c61,#244d53)}
.target{position:relative}
.target .target-piece{border-radius:7px;background:linear-gradient(135deg,#78dfc0,#6ca8e9);color:#092034;font-size:11px;font-weight:800;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}
.target .target-piece:nth-child(2){background:linear-gradient(135deg,#9dbbff,#718fe0)}
.target .target-piece:nth-child(3){background:linear-gradient(135deg,#ffd38d,#e99b70)}
.target .target-piece:nth-child(4){background:linear-gradient(135deg,#d5a5ff,#987cdb)}
.editor{margin-top:18px}
.editor-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.editor-head h2{margin:0}
.codebox{background:#09111e;border:1px solid #31445f;border-radius:12px;padding:14px;font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:auto}
.code-line{display:flex;gap:10px;white-space:pre}
.ln{color:#62738c;user-select:none;width:18px;text-align:right}
.prop{color:#9fc3ff}.val{color:#a8e6ca}.punct{color:#d5e1f5}
.controls{display:grid;gap:12px}
.control label{display:block;color:var(--muted);font-size:13px;margin-bottom:5px}
.control select,.control input{width:100%;background:#0b1423;color:var(--text);border:1px solid #354966;border-radius:9px;padding:9px 10px}
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.btn{border:1px solid #3c5271;background:#1b2b43;color:var(--text);padding:9px 14px;border-radius:10px;font-weight:650}
.btn:hover{filter:brightness(1.15)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#082019}
.btn.ghost{background:transparent}
.feedback{min-height:48px;padding:11px 13px;border-radius:10px;background:#0b1423;border:1px solid var(--line);color:var(--muted);margin-top:14px;font-size:14px}
.feedback.good{color:var(--good);border-color:#386d55}
.feedback.bad{color:var(--danger);border-color:#74434a}
.lesson{margin-top:18px}
.lesson summary{cursor:pointer;color:var(--accent2);font-weight:650}
.lesson p{color:var(--muted);font-size:14px;margin-bottom:0}
.tip{border-left:3px solid var(--accent);padding-left:12px;margin-top:12px;color:var(--muted);font-size:14px}
footer{color:#7587a1;text-align:center;font-size:12px;margin-top:24px}
@media(max-width:850px){.layout{grid-template-columns:1fr}.boards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.app{padding:18px 12px 36px}.card{padding:15px}.boards{grid-template-columns:1fr}.grid-board{min-height:170px}.pill{display:none}}