:root{
      --bg:#0b0e14;--card:rgba(255,255,255,.06);--stroke:rgba(255,255,255,.12);
      --txt:#e8eef7;--muted:#9fb0c3;--accent:#8ab4ff;--shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:18px;--gryff:#c62828;--raven:#1565c0;--huffle:#f9a825;--slyth:#2e7d32;
    }
    *{box-sizing:border-box} html,body{height:100%}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background: radial-gradient(1200px 800px at 20% 10%, #142238 0%, #0b0e14 60%, #07090d 100%);
      color:var(--txt); line-height:1.5;}
    .container{max-width:1000px;margin:40px auto;padding:0 20px}
    .site-header{padding:28px 20px 0}
    .site-header h1{margin:0 0 8px;font-weight:800}
    .site-header .tagline{margin:0;color:var(--muted)}
    .card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);
      box-shadow:var(--shadow);backdrop-filter:blur(8px)}
    .intro{display:grid;grid-template-columns:1fr;gap:16px;padding:20px}
    .intro__content{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
    .intro__progress{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
    .progress{width:250px;height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;border:1px solid var(--stroke)}
    .progress__bar{height:100%;background:linear-gradient(90deg, var(--accent), #b38bff)}
    .progress__label{margin:0;color:var(--muted)}
    .actions{display:flex;gap:10px;flex-wrap:wrap}
    .btn{appearance:none;border:1px solid var(--stroke);background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
      color:var(--txt);padding:10px 16px;border-radius:12px;font-weight:600;cursor:pointer;box-shadow:var(--shadow);transition:.2s transform,.2s opacity,.2s background}
    .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn--ghost{background:transparent}
    .quiz{padding:8px}
    .question{padding:18px;border-bottom:1px dashed var(--stroke)}
    .question:last-child{border-bottom:none}
    .question__title{margin:0 0 10px;font-weight:700}
    .options{display:grid;gap:8px}
    .option{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid transparent;border-radius:12px;transition:border-color .2s,background .2s}
    .option input{accent-color:var(--accent);width:18px;height:18px}
    .option:hover{border-color:var(--stroke);background:rgba(255,255,255,.04)}
    .result{padding:22px;margin-top:20px}
    .result__house{font-size:1.25rem;font-weight:800;margin-bottom:10px}
    .result__desc{color:var(--muted);margin:0 0 16px}
    .house-badges{display:flex;gap:10px;flex-wrap:wrap}
    .badge{padding:8px 12px;border-radius:999px;font-weight:700;color:#0b0e14}
    .badge--gryff{background:var(--gryff)} .badge--raven{background:var(--raven)}
    .badge--huffle{background:var(--huffle)} .badge--slyth{background:var(--slyth)}
    .confetti{position:fixed;inset:0;pointer-events:none}
    .site-footer{color:var(--muted);text-align:center;padding:24px 0 40px}
    @media (min-width:840px){.intro{grid-template-columns:1fr auto}}
    @media print{body{background:#fff} .confetti,.actions #btn-start,.actions #btn-reset,.actions #btn-print{display:none}
      .card{box-shadow:none;backdrop-filter:none}}
	  .question.invalid{border:1px solid #ff6b6b;border-radius:12px;background:rgba(255,107,107,.08)}
.question.invalid .question__title{color:#ff9e9e}