:root {
    --bg:#0e1117; --card:#121826; --trans:#131a26cc; --text:#e8ecf1; --muted:#98a3b7; --accent:#7aa2ff;
    --ok:#7bd389; --warn:#f5c26b; --chip:#1b2231; --rail:#222a3b; --x:#111; --discord:#5865F2;
  }
  @media (prefers-color-scheme: light) {
    :root { --bg:#f6f7fb; --card:#ffffff; --trans:#ffffffcc; --text:#1f2430; --muted:#5a6578; --accent:#1a73e8; --chip:#eef2f7; --rail:#e9eef6; --x:#111; }
  }
  *{box-sizing:border-box} body{margin:0;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}
  .wrap{max-width:960px;margin:0 auto;padding:20px}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  
  .logo{font-weight:900;letter-spacing:.2px}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .lead{color:var(--muted);line-height:1.6;font-size:clamp(16px,2.4vw,18px)}
  .card{background:var(--card);border-radius:16px;padding:18px;box-shadow:0 16px 50px rgba(0,0,0,.35)}
  .card-translucent{background:var(--trans);backdrop-filter: blur(10px)}
  .footer{padding:24px;text-align:center}
  .tiny-muted{color:var(--muted);font-size:12px}
  .muted{color:var(--muted)}
  .sm{font-size:13px}
  
  .btn,button{cursor:pointer;border:0;border-radius:12px;padding:12px 16px;font-weight:800;text-decoration:none;color:inherit;background:transparent;outline:2px solid var(--accent);display:inline-flex;gap:8px;align-items:center}
  .btn.primary,.primary{background:var(--accent);color:#fff;outline:none}
  .btn.ghost,.ghost{color:var(--accent)}
  .btn.icon{padding:10px 12px}
  .btn.lg{padding:14px 20px;font-size:18px}
  .btn.x{background:var(--x);color:#fff;outline:none}
  .btn.discord{background:var(--discord);color:#fff;outline:none}
  .ic{width:1.2em;height:1.2em;display:inline-block;vertical-align:-3px}
  
  .progress{height:10px;background:rgba(122,162,255,.25);border-radius:6px;overflow:hidden;margin:8px 0}
  .progress.stick{position:sticky;top:0;z-index:5}
  .bar{height:100%;width:0;background:var(--accent);transition:width .25s ease}
  
  .grid{display:grid;grid-template-columns:1fr;gap:10px}
  .q{border-left:3px solid rgba(122,162,255,.35);padding:12px 12px 8px}
  .q h3{margin:0 0 8px;font-size:16px}
  .scale{display:flex;flex-wrap:wrap;gap:8px}
  .scale label{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border-radius:10px;padding:6px 10px}
  .scale input{transform:translateY(1px)}
  .controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
  .head-row{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:8px}
  
  .pill{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:800;background:rgba(123,211,137,.18);color:var(--ok);margin-right:8px}
  .pill-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
  .type-pill{display:inline-flex;align-items:center;justify-content:center;min-width:108px;height:44px;border-radius:12px;padding:0 12px;background:linear-gradient(135deg,#7aa2ff,#9cc6ff);color:#061022;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas;font-weight:900;font-size:28px;letter-spacing:1.5px}
  .type-name{font-weight:800;font-size:clamp(18px,2.6vw,22px);opacity:.9;margin-left:8px}
  
  .score-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
  .score-cell{background:var(--chip);border-radius:14px;padding:12px}
  .score-list{display:grid;gap:10px}
  .score-line{display:grid;grid-template-columns:42px 62px 1fr;align-items:center;gap:10px;background:rgba(0,0,0,.06);border-radius:12px;padding:8px 10px}
  .bar-rail{height:10px;background:var(--rail);border-radius:6px;overflow:hidden}
  .bar-fill{height:100%;width:0;background:var(--accent);transition:width .5s cubic-bezier(.25,.1,.25,1)}
  .chart{display:block;margin:6px auto;max-width:100%;height:auto;background:radial-gradient(transparent,rgba(255,255,255,.02));border-radius:12px}
  
  .matches{display:grid;grid-template-columns:1fr;gap:10px}
  .match-card{background:var(--chip);border-radius:12px;padding:10px}
  .match-card .tag{font-size:12px;color:var(--muted)}
  .insights{padding-left:20px;margin:8px 0}
  .share-row{display:flex;flex-wrap:wrap;gap:10px}
  .hide{display:none}
  
  .bg-hero{overflow:hidden;position:relative;min-height:100vh}
  .site-header{text-align:center;padding:72px 20px;position:relative;z-index:2}
  .hero-canvas{position:absolute;inset:0;pointer-events:none}
  .glow{position:absolute;width:40vmax;height:40vmax;border-radius:50%;filter:blur(60px);opacity:.55}
  .glow-a{left:-12vmax;top:-10vmax;background:radial-gradient(circle,rgba(122,162,255,.45),transparent 60%)}
  .glow-b{right:-14vmax;bottom:-12vmax;background:radial-gradient(circle,rgba(123,211,137,.35),transparent 60%)}
  
  @media (max-width: 720px){
    .wrap{padding:16px}
    .score-grid{grid-template-columns:1fr}
    .type-pill{min-width:96px;font-size:24px}
  }