:root{
    color-scheme:dark;
    --ink:#0a0908;
    --pitch:#0e0d0b;
    --forge:#15130f;
    --slab:#1b1813;
    --steel:#2e2a22;
    --steel-lit:#443d31;
    --gold:#c8a24a;
    --gold-pale:#e6d6a8;
    --gold-dim:#8a7238;
    --silver:#a3a8a6;
    --bone:#e9e5db;
    --mute:#8d887c;
    --crimson:#b03a3f;
    --amber:#c98b2e;
    --moss:#7e9c62;
    --shadow:0 24px 70px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    margin:0;
    min-height:100vh;
    color:var(--bone);
    font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:16px;
    line-height:1.5;
    background:
      radial-gradient(ellipse at 50% -8%, rgba(200,162,74,.10), transparent 46%),
      radial-gradient(ellipse at 88% 12%, rgba(176,58,63,.055), transparent 38%),
      var(--ink);
  }

  /* Soot grain: the only ambient texture. */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.5;
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 5px);
    mask-image:radial-gradient(ellipse at 50% 22%, rgba(0,0,0,.85), transparent 78%);
  }

  button,input{font:inherit;color:inherit;}
  button{touch-action:manipulation;cursor:pointer;}

  :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  .wrap{
    width:min(1000px,100%);
    margin:0 auto;
    padding:34px 18px 64px;
  }

  /* ---------------- masthead ---------------- */
  .mast{text-align:center;margin-bottom:26px;}

  .sigil{
    width:34px;height:34px;
    margin:0 auto 14px;
    border:1px solid var(--gold-dim);
    transform:rotate(45deg);
    position:relative;
    background:linear-gradient(135deg,rgba(200,162,74,.14),transparent 60%);
  }
  .sigil::after{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(200,162,74,.5);
    background:rgba(176,58,63,.3);
  }

  .kicker{
    margin:0 0 6px;
    color:var(--gold-dim);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.34em;
    text-transform:uppercase;
  }

  h1{
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.9rem,4.4vw,2.9rem);
    font-weight:600;
    letter-spacing:-.012em;
    color:var(--gold-pale);
  }

  .dek{
    max-width:46ch;
    margin:10px auto 0;
    color:var(--mute);
    font-size:.94rem;
  }

  /* ---------------- search ---------------- */
  .console{
    position:relative;
    margin:24px 0 0;
  }

  .field{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px;
    border:1px solid var(--steel-lit);
    border-radius:2px;
    background:linear-gradient(180deg,var(--slab),var(--forge));
    box-shadow:inset 0 1px rgba(255,255,255,.04), var(--shadow);
    transition:border-color .22s ease, box-shadow .22s ease;
  }

  .field:focus-within{
    border-color:var(--gold);
    box-shadow:inset 0 1px rgba(255,255,255,.05), 0 0 0 1px rgba(200,162,74,.28), var(--shadow);
  }

  .field .glyph{
    color:var(--gold-dim);
    font-size:1.1rem;
    line-height:1;
    flex:0 0 auto;
  }

  #q{
    flex:1 1 auto;
    min-width:0;
    padding:17px 0;
    border:0;
    background:none;
    font-size:1.06rem;
    letter-spacing:.005em;
  }
  #q::placeholder{color:#6b665c;}
  #q:focus{outline:none;}

  .clear{
    flex:0 0 auto;
    padding:6px 9px;
    border:1px solid var(--steel);
    border-radius:2px;
    background:transparent;
    color:var(--mute);
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease,border-color .2s ease,color .2s ease;
  }
  .clear.on{opacity:1;pointer-events:auto;}
  .clear:hover{border-color:var(--gold-dim);color:var(--gold-pale);}

  .hint{
    margin:9px 2px 0;
    color:#6f6a5f;
    font-size:.78rem;
  }
  .hint b{color:var(--silver);font-weight:600;}

  /* ---------------- answer slab ---------------- */
  #answer{margin-top:20px;}

  .slab{
    position:relative;
    overflow:hidden;
    border:1px solid var(--steel-lit);
    border-left:3px solid var(--gold);
    border-radius:2px;
    background:linear-gradient(180deg,var(--slab),var(--pitch));
    box-shadow:var(--shadow);
  }
  .slab.is-caution{border-left-color:var(--amber);}
  .slab.is-conflict{border-left-color:var(--crimson);}
  .slab.is-none{border-left-color:var(--steel-lit);}

  .slab-in{animation:slabIn .5s cubic-bezier(.2,.85,.28,1) both;}

  @keyframes slabIn{
    from{opacity:0;transform:translateY(10px);clip-path:inset(0 0 68% 0);}
    to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0);}
  }

  .slab-head{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    padding:14px 20px;
    border-bottom:1px solid rgba(68,61,49,.7);
    background:rgba(0,0,0,.22);
  }

  .chip{
    padding:4px 9px;
    border:1px solid currentColor;
    border-radius:2px;
    font-size:.63rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .chip.verified{color:var(--moss);}
  .chip.strong{color:var(--gold);}
  .chip.uncertain{color:var(--amber);}
  .chip.conflict{color:var(--crimson);}

  .slab-title{
    font-family:Georgia,serif;
    font-size:1.02rem;
    color:var(--bone);
    letter-spacing:.01em;
  }

  .matched{
    margin-left:auto;
    color:var(--mute);
    font-size:.74rem;
    letter-spacing:.04em;
  }
  .matched em{color:var(--gold-pale);font-style:normal;}

  /* the answer itself */
  .verdict{
    padding:30px 20px 26px;
    text-align:center;
  }

  .give{
    margin:0 0 4px;
    color:var(--gold-dim);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.3em;
    text-transform:uppercase;
  }

  .rule{
    width:100%;
    max-width:280px;
    height:1px;
    margin:12px auto;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    transform:scaleX(0);
    animation:ruleOut .55s cubic-bezier(.2,.85,.28,1) .12s forwards;
  }
  @keyframes ruleOut{to{transform:scaleX(1);}}

  .npc{
    margin:0;
    font-family:Georgia,serif;
    font-size:clamp(2.5rem,8.5vw,4.2rem);
    font-weight:600;
    line-height:1.02;
    letter-spacing:-.02em;
    color:var(--gold-pale);
    text-shadow:0 0 34px rgba(200,162,74,.2);
  }

  .npc.unknown{
    font-size:clamp(1.5rem,4.4vw,2.1rem);
    color:var(--amber);
  }

  .npc-role{
    margin:9px 0 0;
    color:var(--silver);
    font-size:.9rem;
  }
  .npc-role span{color:var(--mute);}

  .oneline{
    margin:14px auto 0;
    max-width:52ch;
    color:var(--mute);
    font-size:.87rem;
  }

  /* detail rows */
  .detail{
    margin:0;
    padding:4px 20px 18px;
    border-top:1px solid rgba(68,61,49,.7);
  }
  .detail.hide{display:none;}

  .row{
    display:grid;
    grid-template-columns:170px 1fr;
    gap:16px;
    padding:13px 0;
    border-bottom:1px solid rgba(68,61,49,.4);
  }
  .row:last-child{border-bottom:0;}

  .row dt{
    color:var(--gold-dim);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
    padding-top:2px;
  }
  .row dd{margin:0;font-size:.9rem;color:#cfcabd;}

  .row.warn dd{color:#f0cdb0;}
  .row.warn dt{color:var(--crimson);}

  .slab-foot{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:14px 20px;
    border-top:1px solid rgba(68,61,49,.7);
    background:rgba(0,0,0,.2);
  }

  .act{
    padding:9px 14px;
    border:1px solid var(--steel-lit);
    border-radius:2px;
    background:var(--forge);
    color:var(--silver);
    font-size:.76rem;
    font-weight:600;
    letter-spacing:.06em;
    transition:border-color .2s ease,color .2s ease,background .2s ease,transform .16s ease;
  }
  .act:hover{border-color:var(--gold-dim);color:var(--gold-pale);background:#1d1a14;}
  .act:active{transform:translateY(1px);}
  .act.done{border-color:var(--moss);color:var(--moss);}

  .srcbox{
    padding:0 20px 18px;
    display:none;
  }
  .srcbox.on{display:block;animation:slabIn .34s ease both;}
  .srcbox a{
    display:block;
    padding:8px 0;
    border-bottom:1px dotted var(--steel);
    color:#b9b3a4;
    font-size:.8rem;
    text-decoration:none;
  }
  .srcbox a:hover{color:var(--gold-pale);}
  .srcbox a span{color:var(--gold-dim);}

  /* ---------------- tabs ---------------- */
  .tabs{
    display:flex;
    gap:2px;
    margin:34px 0 0;
    border-bottom:1px solid var(--steel);
  }

  .tab{
    padding:11px 16px;
    border:0;
    border-bottom:2px solid transparent;
    background:none;
    color:var(--mute);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    transition:color .2s ease,border-color .2s ease;
  }
  .tab:hover{color:var(--gold-pale);}
  .tab[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold);}

  .panel{padding-top:20px;}
  .panel[hidden]{display:none;}

  .panel-note{
    margin:0 0 16px;
    color:var(--mute);
    font-size:.83rem;
  }

  /* ---------------- cipher grid ---------------- */
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
    gap:9px;
  }

  .card{
    position:relative;
    overflow:hidden;
    padding:13px 14px;
    border:1px solid var(--steel);
    border-left:2px solid var(--steel-lit);
    border-radius:2px;
    background:linear-gradient(180deg,var(--forge),var(--pitch));
    text-align:left;
    transition:border-color .2s ease,transform .2s cubic-bezier(.2,.85,.28,1),background .2s ease;
    animation:cardIn .4s cubic-bezier(.2,.85,.28,1) both;
    animation-delay:calc(var(--i,0) * 28ms);
  }

  @keyframes cardIn{
    from{opacity:0;transform:translateY(9px);}
    to{opacity:1;transform:translateY(0);}
  }

  .card:hover{
    border-color:var(--steel-lit);
    border-left-color:var(--gold);
    background:linear-gradient(180deg,#1c1913,var(--forge));
    transform:translateY(-2px);
  }

  .card[aria-pressed="true"]{
    border-color:var(--gold-dim);
    border-left-color:var(--gold);
    background:linear-gradient(180deg,#221d14,#15120d);
  }

  .card.vconflict{border-left-color:var(--crimson);}
  .card.vuncertain{border-left-color:var(--amber);}
  .card.vverified{border-left-color:var(--moss);}
  .card.vstrong{border-left-color:var(--gold);}

  .card b{
    display:block;
    font-family:Georgia,serif;
    font-size:1.02rem;
    font-weight:600;
    color:var(--bone);
  }

  .card i{
    display:block;
    margin-top:3px;
    font-style:normal;
    font-size:.8rem;
    color:var(--gold);
  }
  .card i.dim{color:var(--mute);}

  .card u{
    display:block;
    margin-top:6px;
    text-decoration:none;
    font-size:.63rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#6f6a5f;
  }

  .card.hidden{display:none;}

  /* ---------------- npc roster ---------------- */
  .roster{display:grid;gap:9px;}

  .npcrow{
    display:grid;
    grid-template-columns:200px 1fr;
    gap:18px;
    padding:15px 16px;
    border:1px solid var(--steel);
    border-left:2px solid var(--gold-dim);
    border-radius:2px;
    background:linear-gradient(180deg,var(--forge),var(--pitch));
    animation:cardIn .4s cubic-bezier(.2,.85,.28,1) both;
    animation-delay:calc(var(--i,0) * 40ms);
  }

  .npcrow h3{
    margin:0;
    font-family:Georgia,serif;
    font-size:1.32rem;
    font-weight:600;
    color:var(--gold-pale);
  }
  .npcrow h3 + p{
    margin:3px 0 0;
    color:var(--mute);
    font-size:.8rem;
  }

  .words{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start;}

  .word{
    padding:4px 9px;
    border:1px solid var(--steel-lit);
    border-radius:2px;
    background:rgba(0,0,0,.3);
    color:#c6c0b1;
    font-size:.79rem;
    transition:border-color .18s ease,color .18s ease,background .18s ease;
  }
  .word:hover{border-color:var(--gold-dim);color:var(--gold-pale);background:#1d1a14;}

  .npcrow .also{
    margin:9px 0 0;
    color:var(--mute);
    font-size:.78rem;
  }
  .npcrow .also b{color:var(--silver);font-weight:600;}

  /* ---------------- collapsibles ---------------- */
  details.fold{
    margin-top:10px;
    border:1px solid var(--steel);
    border-radius:2px;
    background:var(--forge);
  }
  details.fold summary{
    padding:14px 16px;
    color:var(--gold);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    cursor:pointer;
  }
  details.fold summary::marker{color:var(--gold-dim);}
  .fold-body{padding:0 16px 16px;color:#bdb7a9;font-size:.88rem;}
  .fold-body h4{
    margin:14px 0 5px;
    color:var(--gold-pale);
    font-size:.82rem;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .fold-body p{margin:0 0 9px;}
  .fold-body ul{margin:0 0 9px;padding-left:19px;}
  .fold-body li{margin:4px 0;}
  .fold-body a{color:#b9b3a4;}
  .fold-body a:hover{color:var(--gold-pale);}

  .tierlist{display:grid;gap:7px;margin:8px 0 4px;}
  .tier{
    display:grid;
    grid-template-columns:96px 1fr;
    gap:12px;
    padding:9px 11px;
    border:1px solid var(--steel);
    border-radius:2px;
    background:var(--pitch);
    font-size:.81rem;
  }
  .tier b{font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;}
  .tier.t1 b{color:var(--moss);}
  .tier.t2 b{color:var(--gold);}
  .tier.t3 b{color:var(--amber);}
  .tier.t4 b{color:var(--crimson);}

  /* ---------------- footer ---------------- */
  .meta{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:30px;
    padding-top:18px;
    border-top:1px solid var(--steel);
    text-align:center;
  }
  .meta b{display:block;color:var(--bone);font-size:.86rem;font-weight:600;}
  .meta span{color:var(--mute);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;}

  .brand{
    margin-top:26px;
    text-align:center;
  }
  .brand b{
    color:var(--gold);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.3em;
  }
  .brand p{margin:5px 0 0;color:#6f6a5f;font-size:.74rem;}

  .sr{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  /* ---------------- responsive ---------------- */
  @media (max-width:720px){
    .wrap{padding:24px 13px 48px;}
    .row{grid-template-columns:1fr;gap:4px;}
    .npcrow{grid-template-columns:1fr;gap:11px;}
    .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
    .meta{grid-template-columns:1fr;gap:12px;}
    .tabs{overflow-x:auto;}
    .tab{white-space:nowrap;padding:11px 12px;}
    .tier{grid-template-columns:1fr;gap:3px;}
    #q{padding:15px 0;font-size:1rem;}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
    }
    .rule{transform:scaleX(1);}
  }


  /* ---------- final utility pass: keep the answer fast, context optional ---------- */
  .browse-fold{margin-top:32px;}
  .browse-fold > summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .browse-fold > summary::after{
    content:"Optional reference";
    color:var(--mute);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .browse-inner{padding:0 16px 18px;}
  .browse-inner .tabs{margin-top:2px;}
  .browse-inner .panel{padding-bottom:2px;}
  .detail.hide{display:none;}

  .eu-topbar{
    position:sticky;top:0;z-index:60;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    height:52px;padding:0 clamp(13px,3vw,22px);
    border-bottom:1px solid rgba(168,120,255,.18);
    background:rgba(10,4,22,.86);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    font-family:"Inter","Segoe UI",system-ui,sans-serif;
  }
  .eu-topbar a{text-decoration:none;}
  .eu-back{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 13px 7px 10px;
    border:1px solid rgba(168,120,255,.18);
    border-radius:9px;
    background:rgba(255,255,255,.025);
    color:#E8DFF5;font-size:.85rem;font-weight:650;
    transition:color .2s,background .2s,border-color .2s,box-shadow .2s,transform .2s;
  }
  .eu-back:hover{
    color:#F6F1FF;
    background:rgba(255,91,225,.08);
    border-color:rgba(255,91,225,.34);
    box-shadow:0 0 16px rgba(157,92,255,.12);
    transform:translateY(-1px);
  }
  .eu-back svg{transition:transform .25s cubic-bezier(.22,1,.36,1);}
  .eu-back:hover svg{transform:translateX(-3px);}
  .eu-brand{
    display:flex;align-items:baseline;gap:6px;
    font-family:"Archivo","Segoe UI",system-ui,sans-serif;
    font-weight:800;font-size:.78rem;letter-spacing:.16em;
  }
  .eu-brand span{color:#F6F1FF;}
  .eu-brand em{
    font-style:normal;
    background:linear-gradient(100deg,#FF5BE1,#9D5CFF 45%,#4CA8FF 78%,#45E5F0);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .eu-yt{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 13px;border-radius:9px;
    border:1px solid rgba(255,120,235,.34);
    background:linear-gradient(180deg,rgba(255,91,225,.16),rgba(157,92,255,.09));
    color:#F6F1FF;font-size:.8rem;font-weight:600;
    transition:box-shadow .25s,border-color .25s,transform .25s cubic-bezier(.22,1,.36,1);
  }
  .eu-yt:hover{transform:translateY(-1px);border-color:#FF5BE1;box-shadow:0 0 20px rgba(255,91,225,.34);}
  .eu-topbar :focus-visible{outline:2px solid #45E5F0;outline-offset:2px;}
  @media (max-width:560px){ .eu-brand{display:none;} }
  @media (prefers-reduced-motion:reduce){
    .eu-topbar *{transition-duration:.001ms !important;}
  }