/* === Theme === */
:root{
  --bg:#0f1221; --panel:#151936; --panel-2:#1b1f44; --ink:#e9ecff; --muted:#aab2ff;
  --accent:#8ad1ff; --accent-2:#98ffa5; --warn:#ffd479; --danger:#ff8f8f;
  --shadow:0 20px 50px rgba(0,0,0,.35);
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --round: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: radial-gradient(1200px 600px at 10% -10%, #1a1f46 0%, transparent 60%),
  radial-gradient(1000px 600px at 110% 10%, #122245 0%, transparent 60%), var(--bg);
  color:var(--ink); font: 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}
.header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(15,18,33,.9), rgba(15,18,33,.5));
  border-bottom: 1px solid #2a2f63;
}
.wrap{max-width:1200px; margin-inline:auto; padding:18px 18px;}
h1{margin:6px 0 2px; font-size: clamp(24px, 3vw, 32px);}
.subtitle{color:var(--muted)}
.grid{display:grid; gap:16px}
@media (min-width:900px){ .grid-2{grid-template-columns:1.1fr .9fr} }

/* Cards */
.card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid #2a2f63; border-radius: var(--round); box-shadow: var(--shadow);
  padding:16px;
}
.card h2{margin:0 0 8px}
.muted{color:var(--muted)}
.tag{display:inline-block; border:1px solid #2f3573; padding:2px 8px; border-radius:999px; margin-right:8px; color:#cbd2ff; font-size:12px}

/* Scope House */
.house{
  position:relative; height:340px; border-radius:var(--round);
  background:
    radial-gradient(400px 220px at 70% 0%, rgba(152,255,165,.08), transparent 60%),
    linear-gradient(180deg, #10163a, #0e1330);
  overflow:hidden; border:1px solid #29306b;
}
.room{position:absolute; border:2px dashed #3a4291; border-radius:12px; padding:10px; color:#dce0ff; font: 14px var(--mono); opacity:.85}
.label{position:absolute; top:-12px; left:12px; background:#161b3b; border:1px solid #3a4291; padding:2px 8px; border-radius:999px; font-size:12px}
.global{inset:18px}
.kitchen{left:28px; top:80px; width:45%; height:55%}
.bedroom{right:28px; top:80px; width:45%; height:55%}

/* House appear animation */
.room{transform:translateY(20px) scale(.98); opacity:0; animation:pop .9s ease forwards}
.kitchen{animation-delay:.25s} .bedroom{animation-delay:.45s}
@keyframes pop{to{transform:none; opacity:1}}

/* Two-phase animation */
.phase{
  height:320px; border-radius:var(--round); border:1px solid #2a2f63; position:relative; overflow:hidden;
  background: linear-gradient(180deg,#10163a,#0f1534);
}
.phase .lane{position:absolute; inset:12px; border-radius:10px; border:1px dashed #37408f}
.bubble{
  position:absolute; left:16px; right:16px; margin:auto; width:max-content; max-width:86%;
  border:1px solid #3a4291; background:#151a3d; padding:6px 10px; border-radius:10px;
  font: 13px var(--mono); color:#e9ecff; box-shadow:0 8px 20px rgba(0,0,0,.25)
}
.decl{--yStart: 220px; --yEnd: 20px; top: var(--yStart); animation: rise 2.4s ease forwards}
.exec{--yStart: 260px; --yEnd: 240px; top: var(--yStart); animation: drop 2.4s ease forwards}
.bubble small{display:block; color:var(--muted)}
@keyframes rise{to{top: var(--yEnd);}}
@keyframes drop{to{top: var(--yEnd);}}

.phase .legend{position:absolute; right:12px; top:12px; font-size:12px}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; background:var(--accent)}
.dot.exec{background:var(--warn)}

/* Playground */
.toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px}
button, select{
  background:#1e2450; color:#e9ecff; border:1px solid #3340a3; border-radius:10px; padding:8px 12px; cursor:pointer;
}
button:hover{filter:brightness(1.06)}
textarea{
  width:100%; height:220px; resize:vertical; background:#0c0f24; color:#dfe5ff; border:1px solid #2a2f63;
  border-radius:12px; padding:12px; font:14px/1.4 var(--mono);
}
.runner{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:900px){ .runner{grid-template-columns: 1.2fr .8fr}}
.screen{
  height:260px; background: #0b0f22; border:1px solid #2a2f63; border-radius:12px; overflow:hidden; position:relative;
}
.screen h3{font-size:13px; letter-spacing:.4px; color:#cbd2ff; margin:0; padding:8px 10px; background:#141a3d}
.console{height: calc(100% - 28px); overflow:auto; padding:10px; font:13px var(--mono); color:#d1d9ff}
.console .line{padding:3px 0; border-bottom:1px dashed #233; white-space:pre-wrap}
.console .err{color:var(--danger)}
.console .warn{color:var(--warn)}

/* Quiz */
.quiz q{display:block; font-weight:600; margin-bottom:8px}
.opt{display:block; padding:8px 10px; border:1px solid #313b89; margin:6px 0; border-radius:10px; cursor:pointer}
.opt:hover{background:#141a36}
.opt.correct{outline:2px solid #40e58f}
.opt.wrong{outline:2px solid #ff8686}

.footer{opacity:.7; text-align:center; padding:16px 0; color:#c5ccff}