*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body)}
  .wrap{max-width:760px;margin:0 auto;padding:84px 20px 40px}
  .hero{position:relative;border-radius:20px;overflow:hidden;padding:30px 26px;margin-bottom:18px;text-align:center;
    background:linear-gradient(120deg,#0e1b2e,#101426 45%,#1a1030);border:1px solid var(--line)}
  .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(500px 180px at 50% 0%,rgba(34,211,238,.15),transparent 60%);pointer-events:none}
  .hero h1{position:relative;font-family:var(--font-head);font-weight:800;font-style:italic;text-transform:uppercase;
    font-size:clamp(22px,5vw,34px);margin:0 0 4px;background:linear-gradient(90deg,#fff 30%,var(--blue) 75%,var(--purple));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .hero .season{position:relative;font-size:13px;color:var(--text-dim)}
  .count{position:relative;display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
  .cbox{background:rgba(6,8,16,.55);border:1px solid var(--line);border-radius:14px;padding:10px 16px;min-width:76px}
  .cbox .v{font-family:var(--font-head);font-weight:800;font-size:28px;font-variant-numeric:tabular-nums}
  .cbox .l{font-size:10px;color:var(--text-faint);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
  .panel{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:16px}
  label{font-size:11.5px;color:var(--text-faint);font-weight:700;text-transform:uppercase;letter-spacing:.4px;display:block;margin:0 0 6px}
  .inrow{display:flex;gap:12px;flex-wrap:wrap}
  .inrow>div{flex:1;min-width:140px}
  input[type=number]{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--text);font-size:16px;font-family:var(--font-head);font-weight:700}
  input[type=number]:focus{outline:none;border-color:var(--blue)}
  .xp-progress{display:block;width:100%;height:14px;margin:16px 0 6px;border:0;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.08);appearance:none}
  .xp-progress::-webkit-progress-bar{background:rgba(255,255,255,.08);border-radius:8px}
  .xp-progress::-webkit-progress-value{background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:8px;transition:width .5s ease}
  .xp-progress::-moz-progress-bar{background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:8px}
  .barlab{font-size:11.5px;color:var(--text-faint);display:flex;justify-content:space-between}
  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
  .tile{background:var(--bg);border:1px solid var(--line);border-radius:13px;padding:13px 15px}
  .tile .v{font-family:var(--font-head);font-size:22px;font-weight:800}
  .tile .l{font-size:10.5px;color:var(--text-faint);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
  .xp-cd-hint{margin-top:10px}
  .xp-verdict{margin-top:14px;padding:13px 16px;border-radius:12px;font-size:14px;font-weight:600}
  .xp-verdict.is-easy{background:rgba(124,252,110,.1);border:1px solid rgba(124,252,110,.4);color:var(--cyan)}
  .xp-verdict.is-neutral{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text-dim)}
  .xp-verdict.is-medium{background:rgba(242,193,78,.1);border:1px solid rgba(242,193,78,.4);color:var(--gold)}
  .xp-verdict.is-hard{background:rgba(255,92,138,.1);border:1px solid rgba(255,92,138,.4);color:#ff8fb0}
  h2{font-family:var(--font-head);font-size:17px;margin:0 0 10px}
  .prose{font-size:13.5px;color:var(--text-dim);line-height:1.7}
  .prose strong{color:var(--text)}
  a{color:var(--blue)}
  .footer-note{text-align:center;color:var(--text-faint);font-size:12px;margin-top:28px;line-height:1.7}
  .footer-note a{color:var(--text-dim)}