:root{
    --bg:#0E0D10; --panel:#1B1A20; --panel2:#151419; --text:#F6E9E0;
    --muted:#CFC0C7; --accent:#FF2E6E; --accent2:#FF7A3C;
    --border:rgba(235,156,255,.28); --ok:#8ee28e; --warn:#ffd27a; --hi:#FF7A6E;
  }
  *{box-sizing:border-box}
  body{
    margin:0; background-color:#0E0D10;
    background-image:
      radial-gradient(1100px 700px at 12% -10%, rgba(255,46,110,.35) 0%, transparent 60%),
      radial-gradient(900px 600px at 105% 15%, rgba(255,122,60,.30) 0%, transparent 58%),
      radial-gradient(800px 600px at 50% 115%, rgba(190,26,92,.35) 0%, transparent 60%);
    background-attachment:fixed;
    color:var(--text); font-family:"Segoe UI",system-ui,Arial,sans-serif; line-height:1.5;
    padding:24px 16px 80px;
  }
  .wrap{max-width:1200px;margin:0 auto}
  header.top{text-align:center;padding:20px 0 8px}
  header.top h1{font-size:1.8rem;margin:0;background:linear-gradient(90deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  header.top p{color:var(--muted);max-width:720px;margin:8px auto 0}
  .ver{display:inline-block;background:var(--panel2);border:1px solid var(--border);color:var(--muted);
    font-size:.72rem;font-weight:600;letter-spacing:.06em;padding:2px 10px;border-radius:20px;margin-top:10px}
  .legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:.85rem;color:var(--muted);margin-top:8px}
  .legend b{color:var(--text)}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin:18px 0;min-width:0}
  h2{font-size:1.2rem;margin:0 0 4px;color:var(--accent2)}
  .hint{color:var(--muted);font-size:.92rem;margin:0 0 8px}
  .namebox{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .namebox input{flex:1;min-width:200px;background:var(--panel2);border:1px solid var(--border);
    color:var(--text);padding:11px 14px;border-radius:10px;font-size:1rem}
  .namebox button{width:auto}
  .status{color:var(--muted);font-size:.85rem;min-height:1.2em;margin-top:8px}
  .privacy-note{background:var(--panel2);border:1px dashed var(--border);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:.9rem;color:var(--muted)}
  .privacy-note b{color:var(--ok)}
  .modal-overlay{display:none;position:fixed;inset:0;z-index:50;background:rgba(8,6,16,.72);
    align-items:center;justify-content:center;padding:20px}
  .modal-overlay.show{display:flex}
  .modal{background:var(--panel);border:1px solid var(--accent);border-radius:16px;padding:26px 26px 22px;
    max-width:460px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.6)}
  .modal h3{margin:0 0 10px;color:var(--accent2)}
  .modal p{color:var(--muted);font-size:.95rem;margin:0 0 18px}
  .modal button{font-size:.95rem}
  .cat{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:14px 0;transition:opacity .2s}
  .cat.skipped .qs,.card.skipped .qs{display:none}
  .cat.skipped{padding-bottom:10px}
  .cat h4{margin:0 0 4px;color:var(--accent);font-size:1.02rem;display:inline}
  .cat .k{color:var(--muted);font-size:.72rem;margin-left:6px}
  /* floating jump buttons */
  #jumpBottom{position:fixed;left:18px;bottom:18px;z-index:60;width:48px;height:48px;border-radius:50%;
    border:1px solid var(--accent);background:rgba(27,26,32,.9);color:var(--accent2);
    display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;
    padding:0;margin:0;
    transition:opacity .25s;box-shadow:0 6px 22px rgba(0,0,0,.55)}
  #jumpBottom svg,#jumpTop svg{width:26px;height:26px;flex:0 0 auto}
  #jumpBottom.show{opacity:1;pointer-events:auto}
  #jumpBottom:hover{background:rgba(34,32,40,.95);border-color:var(--accent2)}
  #jumpTop{position:fixed;left:18px;bottom:68px;z-index:60;width:48px;height:48px;border-radius:50%;
    border:1px solid var(--accent);background:rgba(27,26,32,.9);color:var(--accent2);
    display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;
    padding:0;margin:0;
    transition:opacity .25s;box-shadow:0 6px 22px rgba(0,0,0,.55)}
  #jumpTop.show{opacity:1;pointer-events:auto}
  #jumpTop:hover{background:rgba(34,32,40,.95);border-color:var(--accent2)}
  /* scroll mini-map: clickable horizontal lines down the left edge, full-height compressed */
  #prog{position:fixed;left:12px;top:60px;bottom:70px;z-index:59;
    display:flex;flex-direction:column;gap:1px;overflow:hidden;
    padding:4px 2px;background:rgba(27,26,32,.35);border:1px solid var(--border);border-radius:8px}
  #prog .pline{width:12px;flex:1 1 auto;min-height:1px;border-radius:2px;cursor:pointer;
    background:transparent;border:1px solid var(--muted);transition:transform .12s,border-color .12s}
  #prog .pline:hover{transform:scaleX(1.3);border-color:var(--accent2)}
  #prog .pline.ans{background:var(--ok);border-color:var(--ok)}
  #prog .pline.skip{background:var(--warn);border-color:var(--warn)}
  #prog .pline.cur{box-shadow:0 0 0 2px var(--accent2);border-color:var(--accent2);transform:scaleX(1.3)}
  .skipbtn{margin-left:12px;font-size:.72rem;padding:4px 12px;border-radius:20px;font-weight:700;cursor:pointer;
    background:transparent;border:1px solid var(--border);color:var(--muted)}
  .skipbtn:hover{border-color:var(--warn);color:var(--warn)}
  .skipbtn.on{background:var(--warn);color:#150d24;border-color:var(--warn)}
  .skipbtn .skiplabel{display:inline}
  .skipbtn.on .skiplabel{display:none}
  .skipbtn .unskiplabel{display:none}
  .skipbtn.on .unskiplabel{display:inline}
  ol.qs{list-style:none;counter-reset:q;margin:8px 0 0;padding:0}
  ol.qs li{counter-increment:q;padding:9px 0;border-bottom:1px dashed var(--border)}
  ol.qs li:last-child{border-bottom:none}
  ol.qs li::before{content:counter(q) ".";font-weight:700;color:var(--accent);margin-right:8px}
  ol.qs li .qtext{display:block}
  ol.qs li.disabled{opacity:.35}
  .subhead{display:flex;align-items:center;gap:10px;margin:26px 0 2px;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
  .subhead:not(:first-of-type){border-top:1px solid var(--border);padding-top:22px}
  .sliderrow{display:flex;align-items:center;gap:12px;margin-top:8px}
  .sliderwrap{position:relative;flex:1;min-width:60px}
  .sliderwrap .ticks{position:absolute;top:-9px;left:0;right:0;height:5px;pointer-events:none}
  .sliderwrap .ticks i{position:absolute;top:0;bottom:0;width:2px;border-radius:1px;background:var(--muted);opacity:.55}
  .sliderwrap .ticks .t0{left:calc(10px + (100% - 20px)*0)}
  .sliderwrap .ticks .t25{left:calc(10px + (100% - 20px)*0.25)}
  .sliderwrap .ticks .t50{left:calc(10px + (100% - 20px)*0.5)}
  .sliderwrap .ticks .t75{left:calc(10px + (100% - 20px)*0.75)}
  .sliderwrap .ticks .t100{left:calc(10px + (100% - 20px)*1)}
  .sliderwrap input[type=range]{width:100%}
  .sliderrow input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;
    background:linear-gradient(90deg,var(--panel2),var(--border));border-radius:6px;outline:none}
  .sliderrow input[type=range]:disabled{cursor:not-allowed}
  .sliderrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
    width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--accent2),var(--accent));
    cursor:pointer;border:2px solid var(--text);box-shadow:0 0 8px var(--accent2)}
  .sliderrow input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,var(--accent2),var(--accent));cursor:pointer;border:2px solid var(--text)}
  .val{min-width:64px;text-align:center;font-weight:700;color:var(--accent2);font-variant-numeric:tabular-nums}
  .val small{display:block;font-size:.6rem;color:var(--muted);font-weight:400}
  .btnrow{text-align:center;margin:22px 0 6px}
  button{border:0;cursor:pointer;font-size:1rem;font-weight:700;padding:12px 22px;border-radius:30px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));color:#150d24;margin:6px}
  button.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
  button:hover{filter:brightness(1.1)}
  .note{color:var(--muted);font-size:.9rem}
  .rrow{display:grid;grid-template-columns:minmax(0,1fr) auto 150px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--border);gap:10px}
  .rrow:last-child{border-bottom:none}
  .rrow .g1{display:flex;align-items:baseline;gap:8px;min-width:0}
  .rrow .g1 .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rrow .g1 .grp{color:var(--muted);font-size:.78rem;white-space:nowrap}
  .rrow .g2{min-width:0;width:200px}
  .rrow .g3{display:flex;align-items:center;justify-content:flex-end;gap:8px}
  .rrow .score{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
  .rrow .score b{color:var(--text)}
  @media(max-width:560px){
    .rrow{grid-template-columns:1fr;gap:4px 0}
    .rrow .g2{width:100%}
    .rrow .g2 .bars{flex:1 1 auto;width:100%;min-width:0;max-width:none}
    .rrow .g3{justify-content:space-between}
  }
  .tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap}
  .tag.low{background:#3a1030;color:#ff9cb8}
  .tag.mid{background:#3a2e10;color:var(--warn)}
  .tag.hi{background:#12362a;color:var(--ok)}
  .tag.skip{background:#2a2440;color:var(--muted)}
  .bars{height:10px;background:#0f0c1c;border-radius:6px;overflow:hidden;flex:0 0 200px;width:200px;min-width:200px;max-width:200px}
  .bars i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s}
  .overall-box{text-align:center;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--panel2);margin-top:10px}
  .overall-box .big{font-size:2.4rem;font-weight:800;background:linear-gradient(90deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .overall-box .band{font-size:1.15rem;font-weight:700;color:var(--accent2)}
  #familyResults{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;min-width:0}
  #familyResults .card,.grid2 > *,.cardbox > *{min-width:0}
  .radarwrap{flex:1;min-width:0}
  .radarwrap canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#0f0c1c;border-radius:12px;border:1px solid var(--border)}
  canvas#radar{display:block;margin:14px auto 0;max-width:100%;width:100%;height:auto;aspect-ratio:1/1;background:#0f0c1c;border-radius:12px;border:1px solid var(--border)}
  @media(min-width:1200px){#familyResults{grid-template-columns:1fr 1fr}}
  .familyhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .familyhead .count{color:var(--muted);font-size:.85rem}
  .radarrow{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:8px}
  .cardbox{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
  .cardbox .txt{flex:1;min-width:0}
  .results{display:none}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  footer{text-align:center;color:var(--muted);font-size:.82rem;margin-top:28px}
  .backmenu{position:fixed;top:14px;left:14px;z-index:70;display:inline-flex;align-items:center;gap:6px;
    font-size:.82rem;font-weight:700;color:var(--muted);text-decoration:none;padding:7px 14px;border-radius:20px;
    background:rgba(27,26,32,.9);border:1px solid var(--border);transition:color .15s,border-color .15s}
  .backmenu:hover{color:var(--accent2);border-color:var(--accent2)}
  @media(min-width:560px){.backmenu{position:fixed;top:14px;left:14px}}