:root{
    --primary:#1A67FD; --secondary:#0A0D16; --tertiary:#BFFF5A; --neutral:#FCFCFD;
    --text-primary:#0A0D16; --text-secondary:#4E5057; --text-tertiary:#74767C;
    --surface-100:#FCFCFD; --surface-200:#F8F8FC; --surface-300:#F6F6F9; --surface-400:#F0F0F9;
    --border-100:#EBEEF7; --border-200:#D5D9E8;
    --blue-300:#00B9EB; --green-300:#07BB70; --green-light-300:#73B420;
    --purple-300:#A166FF; --pink-300:#FF29D6; --orange-300:#FF7830; --red-300:#FF2203;
    --shadow-base:#0A0D1633; --shadow-panel:#0A0D1614;
    --grid-line: color-mix(in srgb, var(--border-100) 55%, var(--surface-100));
    color-scheme: light;
  }
  [data-theme="dark"]{
    --primary:#5B8FFF; --text-primary:#B8B8BC; --text-secondary:#87878B; --text-tertiary:#868688;
    --surface-100:#17171C; --surface-200:#1E1E24; --surface-300:#17171C; --surface-400:#17171C;
    --border-100:#22242A; --border-200:#292C32;
    --purple-300:#C19AFF; --pink-300:#FF9DEC; --red-300:#FF5138; --orange-300:#FFA030;
    color-scheme: dark;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:'IBM Plex Sans',system-ui,sans-serif;
    background:var(--surface-100); color:var(--text-primary);
    line-height:24px; -webkit-font-smoothing:antialiased;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size:24px 24px;
    background-position: 0 0, calc(50% - 12px) 0;
  }
  .mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
  .wrap{max-width:960px;margin:0 auto;padding:0 24px}

  /* header */
  header{position:sticky;top:0;z-index:50;background:var(--surface-100);
    box-shadow:0 1px 0 0 var(--shadow-panel)}
  .hrow{max-width:960px;margin:0 auto;height:64px;display:flex;align-items:center;
    justify-content:space-between;padding:0 24px}
  .brand{font-size:18px;font-weight:700;letter-spacing:-.5px;text-decoration:none;color:var(--text-primary)}
  .brand .host{color:var(--text-tertiary);font-weight:500}
  .brand .cndl{margin-right:6px}
  .toggle{width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
    background:var(--surface-100);border:1px solid var(--border-200);color:var(--text-secondary);
    box-shadow:2px 2px 0 0 var(--surface-400);font-size:15px;line-height:1}
  .toggle:hover{color:var(--text-primary);border-color:var(--text-primary)}
  .hnav{display:flex;align-items:center;gap:14px}
  .acct{font-size:13px;font-weight:600;color:var(--text-secondary);text-decoration:none;
    padding:6px 12px;border:1px solid var(--border-200);border-radius:9999px;box-shadow:2px 2px 0 0 var(--surface-400)}
  .acct:hover{color:var(--text-primary);border-color:var(--text-primary)}
  .acct .who{color:var(--text-primary);font-family:'IBM Plex Mono'}
  @media(max-width:560px){ .nav-page{display:none} }   /* keep header lean on phones; footer nav covers these */

  /* account (login / create) */
  .authrow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
  .authrow .fld{display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px}
  .authrow label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary)}
  .authrow input{height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--border-200);
    background:var(--surface-200);color:var(--text-primary);font-family:inherit;font-size:15px}
  .authrow input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:transparent}
  .segtoggle{display:inline-flex;padding:4px;gap:4px;margin-bottom:18px;
    border:1px solid var(--border-200);border-radius:9999px;background:var(--surface-200)}
  .segtoggle .seg{appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit;text-decoration:none;
    font-size:13px;font-weight:600;color:var(--text-tertiary);padding:7px 18px;border-radius:9999px;line-height:1}
  .segtoggle .seg:hover{color:var(--text-primary)}
  .segtoggle .seg.active{background:var(--surface-100);color:var(--text-primary);box-shadow:1px 1px 0 0 var(--border-200)}
  [data-theme="dark"] .segtoggle .seg.active{background:var(--surface-400)}
  .authbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
  .authnote{margin-top:14px;font-size:12px;color:var(--text-tertiary);line-height:1.5}
  .authnote b{color:var(--red-300)}
  .whoami{font-size:15px;color:var(--text-secondary)}
  .whoami b{color:var(--text-primary);font-family:'IBM Plex Mono'}
  .champ{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px dotted var(--border-200)}
  .champ:first-child{border-top:0}
  .champ .medal{font-size:22px;flex:0 0 auto}
  .champ .cwho{flex:1;font-weight:600;color:var(--text-primary)}
  .champ .cwho .cs{display:block;font-size:12px;font-weight:400;color:var(--text-tertiary)}
  .champ .cpts{font-family:'IBM Plex Mono';font-weight:600;color:var(--text-primary)}
  .sitestat{font-size:12px;color:var(--text-tertiary)}
  .sitestat b{color:var(--text-secondary);font-family:'IBM Plex Mono'}

  /* hero / reveal */
  .hero{text-align:center;padding:56px 0 40px}
  .eyebrow{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
    color:var(--text-tertiary)}
  .date{font-size:13px;color:var(--text-tertiary);margin-top:6px}
  .numgrid{margin:26px auto 8px;display:flex;flex-direction:column;align-items:center}
  .number{font-family:'IBM Plex Mono';font-weight:600;letter-spacing:-2px;line-height:1;
    font-size:clamp(72px,18vw,148px);color:var(--text-primary)}
  .tierpill{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 16px;
    border-radius:9999px;font-size:13px;font-weight:600;letter-spacing:.02em;
    border:1px solid var(--tier); color:var(--tier);
    background:color-mix(in srgb, var(--tier) 10%, var(--surface-100))}
  .tierpill .dot{width:8px;height:8px;border-radius:9999px;background:var(--tier)}
  .verdict{max-width:520px;margin:22px auto 0;font-size:16px;color:var(--text-secondary)}
  .stat-ep{margin-top:6px;font-size:13px;color:var(--text-tertiary)}
  .stat-ep b{color:var(--text-primary)}

  .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
  .btn{height:40px;padding:0 24px;border-radius:56px;font-family:inherit;font-size:14px;font-weight:600;
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:2px solid var(--secondary)}
  .btn-primary{background:var(--tertiary);color:#0A0D16;box-shadow:inset 0 -3px 0 0 var(--shadow-base);
    transition:box-shadow .08s ease-out}
  .btn-primary:hover{box-shadow:inset 0 0 0 0 var(--shadow-base)}
  .btn-primary:active{box-shadow:inset 0 4px 0 0 var(--shadow-base)}
  .btn-secondary{background:var(--surface-100);color:var(--text-primary);box-shadow:inset 0 -3px 0 0 var(--shadow-base)}
  .btn-secondary:hover{box-shadow:inset 0 0 0 0 var(--shadow-base)}
  /* filled neutral button (reads solid in both themes; not the lime CTA) */
  .btn-fill{background:color-mix(in srgb, var(--text-primary) 8%, var(--surface-100));color:var(--text-primary);box-shadow:inset 0 -3px 0 0 var(--shadow-base)}
  .btn-fill:hover{background:color-mix(in srgb, var(--text-primary) 14%, var(--surface-100));box-shadow:inset 0 0 0 0 var(--shadow-base)}

  .countdown{margin-top:24px;font-size:12px;color:var(--text-tertiary);letter-spacing:.04em}
  .countdown b{color:var(--text-secondary)}

  /* share button: a gentle pulse until it is first clicked */
  @keyframes nudge{
    0%,100%{transform:translateY(0);box-shadow:inset 0 -3px 0 0 var(--shadow-base)}
    50%{transform:translateY(-2px);box-shadow:inset 0 -3px 0 0 var(--shadow-base),0 0 0 6px color-mix(in srgb, var(--tertiary) 35%, transparent)}
  }
  .btn.nudge{animation:nudge 1.6s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){ .btn.nudge{animation:none} }

  /* card sections */
  .card{background:var(--surface-100);border:1px solid var(--border-100);
    box-shadow:1px 1px 0 0 var(--border-100);border-radius:16px;padding:28px;margin:16px 0}
  .card h2{font-size:22px;font-weight:700;letter-spacing:-1px;margin-bottom:4px}
  .card .sub{font-size:13px;color:var(--text-tertiary);margin-bottom:20px}
  .plist{margin:6px 0 0;padding-left:20px;font-size:14px;color:var(--text-secondary);line-height:1.65}
  .plist li{margin:0 0 10px}
  .plist li b{color:var(--text-primary)}

  /* reading list */
  .reading{display:flex;flex-direction:column;gap:0}
  .rd{display:flex;align-items:flex-start;gap:16px;padding:14px 0;border-top:1px dotted var(--border-200)}
  .rd:first-child{border-top:0}
  .rd .rk{flex:0 0 96px;display:flex;flex-direction:column;gap:2px}
  .rd .rk .tier{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--tier)}
  .rd .rk .ep{font-size:11px;color:var(--text-tertiary)}
  .rd .rt{flex:1}
  .rd .rt .nm{font-size:16px;font-weight:600}
  .rd .rt .ds{font-size:13px;color:var(--text-secondary)}
  .rd .rt .pr{font-size:11px;color:var(--text-tertiary);margin-top:2px}
  .empty{font-size:14px;color:var(--text-secondary);padding:8px 0}

  /* oracle input */
  .oracle{display:flex;gap:12px;flex-wrap:wrap}
  .oracle input{flex:1;min-width:180px;height:44px;padding:0 16px;border-radius:12px;
    border:1px solid var(--border-200);background:var(--surface-200);color:var(--text-primary);
    font-family:'IBM Plex Mono';font-size:18px;font-weight:500}
  .oracle input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:transparent}
  #oracleOut{margin-top:18px}

  /* faq */
  .faq details{border-top:1px solid var(--border-100);padding:14px 0}
  .faq details:first-of-type{border-top:0}
  .faq summary{font-size:16px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--text-tertiary);font-weight:400}
  .faq details[open] summary::after{content:"−"}
  .faq p{font-size:14px;color:var(--text-secondary);margin-top:10px}
  .faq code{font-family:'IBM Plex Mono';font-size:.9em;background:var(--surface-400);padding:1px 5px;border-radius:6px}
  [data-theme="dark"] .faq code{background:var(--surface-200);border:1px solid var(--border-200)}

  /* footer */
  footer{margin-top:40px;padding:40px 0 56px;box-shadow:0 -1px 0 0 var(--shadow-panel)}
  .foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
    font-size:13px;color:var(--text-tertiary)}
  .foot a{color:var(--text-secondary);text-decoration:none}
  .foot a:hover{color:var(--text-primary)}
  .updated{font-size:12px;color:var(--text-tertiary)}
  .footnav{display:flex;gap:16px;flex-wrap:wrap}
  .footnav a{color:var(--text-secondary);text-decoration:none;font-weight:600}
  .footnav a:hover{color:var(--text-primary)}

  .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
    background:var(--secondary);color:var(--neutral);padding:10px 18px;border-radius:9999px;
    font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:.2s;z-index:100}
  [data-theme="dark"] .toast{background:var(--neutral);color:var(--secondary)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* source line (provable draw) */
  .src{margin-top:14px;font-size:12px;color:var(--text-tertiary)}
  .src a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px}
  .src a:hover{color:var(--text-primary)}

  /* prediction game */
  .pred{display:flex;gap:12px;flex-wrap:wrap}
  .pred input{flex:1;min-width:180px;height:44px;padding:0 16px;border-radius:12px;
    border:1px solid var(--border-200);background:var(--surface-200);color:var(--text-primary);
    font-family:'IBM Plex Mono';font-size:18px;font-weight:500}
  .pred input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:transparent}
  .mine{margin-top:14px;font-size:13px;color:var(--text-secondary)}
  .mine b{color:var(--text-primary);font-family:'IBM Plex Mono'}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
  .chip{border:1px solid var(--border-200);border-radius:9999px;padding:6px 12px;font-size:12px;color:var(--text-secondary)}
  .chip b{color:var(--text-primary)}
  .result{border-radius:12px;border:1px solid var(--border-200);background:var(--surface-200);padding:16px;margin-top:16px;font-size:14px;color:var(--text-secondary);line-height:1.5}
  .result .big{font-size:16px;color:var(--text-primary);font-weight:600;margin-bottom:6px}
  .result .win{color:var(--green-light-300);font-weight:700}
  .result b.mono,.result b{color:var(--text-primary)}
  table.dist{width:100%;border-collapse:collapse;margin-top:4px;font-size:14px}
  table.dist th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--text-tertiary);font-weight:600;padding:6px 8px 6px 0}
  table.dist td{padding:9px 8px 9px 0;border-top:1px dotted var(--border-200);vertical-align:middle}
  table.dist td.n{font-family:'IBM Plex Mono';font-weight:600;color:var(--text-primary)}
  .bar{height:8px;border-radius:9999px;background:var(--tertiary);min-width:4px}

  /* subpage breadcrumb + page header (guide / account) */
  .crumb{font-size:13px;color:var(--text-tertiary);margin:24px 0 2px}
  .crumb a{color:var(--text-secondary);text-decoration:none}
  .crumb a:hover{color:var(--text-primary)}
  .crumb .sep{margin:0 8px;color:var(--border-200)}
  .pagehead{padding:14px 0 8px}
  .pagehead h1{font-size:clamp(28px,5vw,36px);font-weight:700;letter-spacing:-1px;line-height:1.1}
  .pagehead p{margin-top:10px;color:var(--text-secondary);font-size:15px;max-width:640px}

  @media(max-width:767px){
    body{background-image:none}
    .card{padding:20px}
    .rd{flex-direction:column;gap:4px}
    .rd .rk{flex-direction:row;gap:8px}
  }