:root{
    --bg:#f8f6fb;
    --ink:#1d1d1f;
    --sub:#6b6b6b;
    --key:#6f69ff;
    --line:#ebe8f6;
    --card:#fff;
    --shadow:0 12px 30px rgba(92,77,226,.12);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(1000px 500px at 80% -20%, #ece9ff 0%, transparent 70%),
      radial-gradient(800px 400px at 10% 20%, #ffeafd 0%, transparent 60%),
      var(--bg);
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:32px 16px;
  }
  .wrap{width:min(900px,100%)}
  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
  }
  .hidden{display:none}
  
  /* --- スタート画面 --- */
  .start-card{
    text-align:center;
    background:
      linear-gradient(180deg, #f0f0ff 0%, #ffffff 100%),
      var(--card);
    max-width: 500px;
    margin: 0 auto;
  }
  .start-title{
    margin:0 0 .6em;
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 800;
    line-height: 1.2;
  }
  .start-lead{
    margin:0 0 32px;
    color:var(--ink);
    font-size: 16px;
    line-height: 1.5;
  }
  .start-btn{
    width:100%;
    padding:20px 0;
    border-radius:8px;
    border:1px solid #999;
    background:#f4f4f4;
    color:#111;
    font-weight:800;
    font-size:20px;
    cursor:pointer;
    transition:.2s;
    margin-bottom: 16px;
  }
  .start-btn:hover{
    background:#eaeaea;
  }
  .start-note{
    font-size:12px;
    color:#999;
    margin:0;
    text-align:left;
  }
  
  /* --- 設問 --- */
  .head{margin-bottom:12px}
  .qpos{font-weight:700;color:var(--sub);margin-bottom:8px}
  .bar{height:8px;background:#f0eef9;border-radius:999px;overflow:hidden}
  .bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#9a95ff,#ffc7fa);transition:width .3s ease}
  .stage{padding:8px 2px 12px}
  .q h2{font-size:18px;margin:0 0 12px}
  .option{
    display:block;padding:14px 16px;margin:10px 0;
    border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
    transition:box-shadow .15s,border-color .15s;
  }
  .option:hover{box-shadow:0 2px 8px rgba(0,0,0,.04)}
  .input{display:none}
  .input:checked + .option{border-color:#cfcaff;box-shadow:0 0 0 3px #efeaff inset}
  .actions{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
  .btn{
    border:none;background:var(--key);color:#fff;
    padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer;
  }
  .btn.ghost{background:#f7f6fb;color:var(--ink);border:1px solid var(--line)}
  .btn:disabled{opacity:.5;cursor:not-allowed}
  
  /* --- 結果 --- */
  .pill{display:inline-block;font-weight:700;color:#5a48ff;background:#efeaff;padding:6px 10px;border-radius:999px;margin:0 0 6px}
  .percent{font-size:44px;font-weight:800;margin:.2em 0 .3em;color:#6b50ff}
  .zone{font-size:18px;margin:0 0 10px}
  .hint{color:#4c72ff;margin:0 0 14px}
  .type-text{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
  .note{margin:14px 0 0;padding:14px;border-radius:12px;background:#f7f5ff;border:1px solid #eee9ff}
  
  .foot{
    position:fixed;left:0;right:0;bottom:8px;
    text-align:center;color:var(--sub);font-size:12px;
  }