*{box-sizing:border-box}
:root{
  --ink:#111;
  --paper:#fff;
  --grid:#b7d0ff;
  --accent:#ff7a00;
  --btn:#2ea2ff;
  --btn-hover:#168ef0;
  --ok:#1fbe5f;
  --bad:#ff3b3b;
  --card:#ffffffcc;
}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}

/* notebook grid */
body{
  background-image:
    linear-gradient(transparent 31px, var(--grid) 32px),
    linear-gradient(90deg, transparent 31px, var(--grid) 32px);
  background-size:32px 32px,32px 32px;
}

/* hero with chalkboard */
.hero{position:relative;padding:12px 12px 0}
.hero-inner{display:flex;gap:16px;align-items:flex-end;max-width:1100px;margin:0 auto}
.logo{width:64px;height:64px;border-radius:14px;box-shadow:0 4px 12px #0003;object-fit:cover;border:3px solid #7abbff}
.board{flex:1;max-height:120px;border-radius:10px;object-fit:cover;box-shadow:0 6px 14px #0002}
.title-wrap{position:absolute;left:96px;right:16px;bottom:10px;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.title{margin:0;font-weight:800;font-size:clamp(18px,4.5vw,34px);letter-spacing:.2px;text-shadow:0 2px 4px #0004;color:#fff}
.title span{color:#ffe08a}
.subtitle{margin:2px 0 0;color:#e6f2ff;text-shadow:0 1px 2px #0007;font-size:clamp(12px,2.6vw,14px)}

.container{max-width:1100px;margin:16px auto;padding:12px}
.results{position:sticky;top:8px;background:var(--card);backdrop-filter:blur(4px);padding:10px 14px;border-radius:12px;border:1px solid #e7eefc;display:inline-block;box-shadow:0 4px 12px #0001}
.blocks{display:flex;flex-direction:column;gap:18px;margin-top:10px}
.block{border:2px dashed #c8d7ff;border-radius:14px;background:#fff;box-shadow:0 8px 18px #0001}
.block h2{margin:14px 14px 0;font-size:20px}
.q{padding:12px 14px;border-top:1px dashed #e6edff}
.prompt{margin:0 0 10px 0;font-size:18px}
.options{display:flex;flex-wrap:wrap;gap:10px}
.btn{appearance:none;border:none;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;transition:.15s;font-size:16px}
.opt{background:var(--btn);color:#fff;box-shadow:0 6px 12px #1e66ff35}
.opt:hover{background:var(--btn-hover);transform:translateY(-1px)}
.opt.ok{background:var(--ok) !important}
.opt.bad{background:var(--bad) !important}
.controls{display:flex;justify-content:center;margin:18px 0}
.reset{background:var(--accent);color:#fff;box-shadow:0 8px 18px #ff7a0033}
.reset:hover{filter:brightness(1.05)}
.footer{opacity:.7;text-align:center;margin:24px 0 40px}

/* responsive layout */
@media (min-width:900px){
  .block{padding-bottom:8px}
  .q{display:grid;grid-template-columns:1.2fr 2.2fr;align-items:center}
  .prompt{margin:0}
}