:root{
    --bg:#0d0d12;
    --bg2:#14141c;
    --panel:#1b1b26;
    --panel2:#22222f;
    --line:#34344a;
    --text:#d8d4c8;
    --muted:#97938a;
    --gold:#c8a75a;
    --gold2:#e8cf8a;
    --blue:#6aa0e0;
    --yellow:#e0c060;
    --orange:#d98a4a;
    --red:#e06a5a;
    --green:#7fbf7f;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    background:radial-gradient(1200px 600px at 50% -100px, #23233a 0%, var(--bg) 55%);
    color:var(--text);
    font-family:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    line-height:1.65;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px 80px}
  header.hero{
    text-align:center;
    padding:56px 20px 40px;
    border-bottom:1px solid var(--line);
    margin-bottom:8px;
  }
  .kicker{
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--gold);
    font-size:.78rem;
    font-weight:600;
  }
  h1{
    font-size:2.5rem;
    margin:12px 0 10px;
    color:#f3efe4;
    font-weight:800;
    letter-spacing:.01em;
  }
  .sub{color:var(--muted);max-width:640px;margin:0 auto;font-size:1.02rem}
  .pill{
    display:inline-block;margin-top:18px;padding:6px 14px;border:1px solid var(--line);
    border-radius:999px;color:var(--muted);font-size:.8rem;background:var(--bg2)
  }
  section{margin-top:56px}
  h2{
    font-size:1.7rem;color:#f3efe4;margin:0 0 6px;
    display:flex;align-items:center;gap:14px;
  }
  h2 .num{
    flex:0 0 auto;width:40px;height:40px;border-radius:10px;
    background:linear-gradient(180deg,var(--gold2),var(--gold));
    color:#1a1406;font-weight:800;display:grid;place-items:center;font-size:1.15rem;
    box-shadow:0 2px 10px rgba(200,167,90,.25);
  }
  .lead{color:var(--muted);max-width:760px;margin:4px 0 20px;font-size:.98rem}
  .card{
    background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:20px 22px;margin-top:16px;
  }
  .card.tint{border-color:#3a3450}
  strong{color:#efe9d8}
  b.en{color:var(--muted);font-weight:500}
  code,.en{
    font-family:"Cascadia Code", Consolas, monospace;
  }
  /* Rarity colors */
  .n{color:#e8e8e8}.m{color:var(--blue)}.r{color:var(--yellow)}.u{color:var(--orange)}

  /* Affix diagram */
  .slots{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 6px}
  .slot{
    flex:1 1 140px;min-width:130px;border-radius:10px;padding:14px 12px;text-align:center;
    border:1px solid var(--line);background:var(--bg2);
  }
  .slot .tag{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .slot .val{display:block;font-size:1.15rem;font-weight:700;margin-top:4px}
  .slot.pre .val{color:var(--gold2)}
  .slot.suf .val{color:var(--blue)}
  .diagram-note{color:var(--muted);font-size:.86rem;margin-top:6px}

  .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:720px){.cols{grid-template-columns:1fr}}
  .exhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .exhead .dot{width:10px;height:10px;border-radius:50%}
  .exhead h3{margin:0;font-size:1.05rem;color:#efe9d8}
  ul.modlist{margin:8px 0 4px;padding-left:0;list-style:none}
  ul.modlist li{padding:6px 0 6px 24px;position:relative;border-bottom:1px dashed #262636}
  ul.modlist li:last-child{border-bottom:none}
  ul.modlist li::before{content:"";position:absolute;left:6px;top:14px;width:8px;height:8px;border-radius:2px}
  ul.modlist li.pre::before{background:var(--gold)}
  ul.modlist li.suf::before{background:var(--blue)}
  .mtype{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

  /* Currency grid */
  .curr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px}
  .curr{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;
    display:flex;gap:14px;align-items:flex-start;
    transition:transform .12s ease, border-color .12s ease;
  }
  .curr:hover{transform:translateY(-2px);border-color:var(--gold)}
  .curr img{width:52px;height:52px;object-fit:contain;flex:0 0 auto;image-rendering:auto}
  .curr .cname{font-weight:700;color:#f0ecdf;font-size:.98rem}
  .curr .ename{font-size:.78rem;color:var(--muted);margin-bottom:4px}
  .curr .ceffect{font-size:.85rem;color:var(--text)}
  .curr .ceffect .hl{color:var(--gold2)}

  /* Bases */
  table.bases{width:100%;border-collapse:collapse;margin-top:8px}
  table.bases th,table.bases td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
  table.bases th{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
  table.bases td.name{font-weight:700;color:#f0ecdf}
  table.bases td.lvl{color:var(--muted);font-variant-numeric:tabular-nums}
  .defchip{display:inline-block;padding:2px 10px;border-radius:6px;font-size:.74rem;font-weight:700;letter-spacing:.04em}
  .defchip.armor{background:#3a2a1c;color:var(--orange)}
  .defchip.evasion{background:#1c3324;color:var(--green)}
  .defchip.es{background:#1d2c3c;color:var(--blue)}
  .defchip.armev{background:linear-gradient(90deg,#3a2a1c,#1c3324);color:#e0cfa8}
  .defchip.armes{background:linear-gradient(90deg,#3a2a1c,#1d2c3c);color:#c8d6e8}
  .defchip.eves{background:linear-gradient(90deg,#1c3324,#1d2c3c);color:#c8e0d0}

  .slotcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-top:18px}
  .slotcard h3{color:#f0ecdf;margin:0 0 4px;font-size:1.22rem;display:flex;align-items:baseline;gap:10px}
  .slotcard h3 .slot-en{font-size:.8rem;color:var(--muted);font-weight:400}
  .slotcard .slot-desc{color:var(--muted);font-size:.88rem;margin:0 0 14px}
  .basegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
  .basecell{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px 12px;text-align:center;display:flex;flex-direction:column;align-items:center}
  .basecell img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
  .basecell .defchip{margin-bottom:8px}
  .basecell .ru{font-weight:700;color:#f0ecdf;font-size:.9rem;line-height:1.25}
  .basecell .en{font-size:.72rem;color:var(--muted);margin-top:2px}
  .basecell .def{font-size:.76rem;color:var(--text);margin-top:7px;line-height:1.4}
  .basecell .def b{color:var(--gold2);font-weight:600}
  .basecell .variant{margin-top:9px;padding-top:9px;border-top:1px dashed #30303f;font-size:.71rem;color:var(--muted);line-height:1.4;width:100%}
  .basecell .variant b{color:#e8e2d4;font-weight:600}

  /* Item anatomy */
  .anatomy{margin-top:6px}
  .anatomy .shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000}
  .anatomy .shot img{display:block;width:100%;height:auto}
  .anatomy-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px;margin-top:16px}
  .leg{display:flex;gap:10px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
  .leg .chip{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;border:2px solid #fff}
  .leg .chip.rune{background:#2aa7a0}
  .leg .chip.pre{background:#c8a75a;color:#1a1406}
  .leg .chip.suf{background:#5a8fd0}
  .leg .chip.des{background:#96c84b}
  .leg .ltext{font-size:.87rem;line-height:1.4}
  .leg .lt{color:#f0ecdf;font-weight:600}
  .leg .ld{color:var(--muted);font-size:.8rem;display:block;margin-top:1px}

  /* Chance targets */
  .chance-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
  .chance{
    background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;
  }
  .chance .flow{display:flex;align-items:flex-start;justify-content:center;gap:10px}
  .chance .fi{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
  .chance .fi img{width:72px;height:72px;object-fit:contain;margin:0 auto}
  .chance .fi-name{font-size:.8rem;font-weight:700;color:#f0ecdf;line-height:1.2;margin-top:8px}
  .chance .fi-en{font-size:.66rem;color:var(--muted);margin-top:1px}
  .chance .flow-arrow{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding-top:22px;color:var(--gold);font-size:1.5rem;line-height:1}
  .chance .flow-arrow-sub{font-size:.52rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:4px;max-width:66px;white-space:normal;text-align:center}
  .chance .pool{font-size:.78rem;color:var(--muted);margin-top:12px;border-top:1px solid var(--line);padding-top:10px}

  /* Orb example card */
  .orb-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-top:16px}
  .orb-head{display:flex;gap:14px;align-items:flex-start}
  .orb-head img{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
  .orb-info .orb-name{font-weight:700;color:#f0ecdf;font-size:1.05rem}
  .orb-info .orb-en{font-size:.78rem;color:var(--muted);margin-bottom:4px}
  .orb-info .orb-desc{font-size:.9rem;color:var(--text);line-height:1.5}
  .orb-example{display:flex;align-items:flex-start;justify-content:center;gap:16px;margin-top:18px;flex-wrap:wrap}
  .ex-col{display:flex;flex-direction:column;align-items:center}
  .ex-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:8px;font-weight:700}
  .ex-label.after{color:var(--blue)}
  .orb-arrow{color:var(--gold);font-size:1.6rem;align-self:center;padding-top:22px;flex:0 0 auto}
  .itip{width:250px;background:linear-gradient(180deg,#12121a,#0b0b12);border:1px solid #3c3c4e;border-radius:10px;padding:12px 14px;text-align:center;line-height:1.4}
  .itip .iname{font-size:.95rem;font-weight:700}
  .itip.normal .iname{color:#e8e8e8}
  .itip.magic .iname{color:#8fb4f0}
  .itip .ibase{color:#9a927e;font-size:.72rem;margin-top:1px}
  .itip .isep{height:1px;background:#2c2c3a;margin:9px 0}
  .itip .iprop{color:#c9c3b2;font-size:.75rem}
  .itip .imod{color:#8fb4f0;font-size:.8rem;margin-top:9px;font-weight:600}
  .itip .ireq{color:#8a8270;font-size:.7rem;margin-top:9px}
  .itip.rare .iname{color:#e0c060}
  .itip.unique .iname{color:#d98a4a}
  .itip .ifract{color:#c8a75a}
  .itip .icorrupt{color:#e06a5a;font-size:.72rem;margin-top:6px;font-weight:600}

  /* Tabs + accordion */
  .tabs{position:sticky;top:0;z-index:60;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px 0;margin:0 0 4px;background:linear-gradient(180deg,rgba(13,13,18,.96),rgba(13,13,18,.84));backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .tab{background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:9px 18px;border-radius:10px;cursor:pointer;font:inherit;font-size:.95rem;font-weight:600;transition:border-color .15s}
  .tab:hover{border-color:var(--gold);color:var(--gold2)}
  .tab.active{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1406;border-color:var(--gold)}
  .tab-panel{display:none;animation:fadeIn .18s ease}
  .tab-panel.active{display:block}
  @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  .tip{
    margin-top:20px;background:linear-gradient(180deg,#221d10,#1a1710);
    border:1px solid #4a3d1c;border-radius:12px;padding:16px 20px;
  }
  .tip b{color:var(--gold2)}
  .tip .tiphead{color:var(--gold);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}

  .note{
    margin-top:20px;padding:14px 18px;border-left:3px solid var(--blue);
    background:var(--bg2);border-radius:0 10px 10px 0;color:var(--muted);font-size:.9rem;
  }

  footer{
    margin-top:64px;padding-top:20px;border-top:1px solid var(--line);
    color:var(--muted);font-size:.8rem;
  }
  footer a{color:var(--gold);text-decoration:none}
  footer a:hover{text-decoration:underline}
  .toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
  .toc a{color:var(--text);text-decoration:none;font-size:.88rem;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg2)}
  .toc a:hover{border-color:var(--gold);color:var(--gold2)}

  /* Multi-page navigation */
  .site-nav{position:sticky;top:0;z-index:60;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px 0;margin:0 0 4px;background:linear-gradient(180deg,rgba(13,13,18,.96),rgba(13,13,18,.84));backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .navlink{display:inline-block;padding:9px 18px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;transition:border-color .15s}
  .navlink:hover{border-color:var(--gold);color:var(--gold2)}
  .navlink.active{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1406;border-color:var(--gold)}

  .page-head{display:flex;align-items:baseline;gap:14px;padding:26px 0 16px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .page-head .brand{color:var(--gold);text-decoration:none;font-weight:700;letter-spacing:.05em;font-size:.92rem}
  .page-head .brand:hover{color:var(--gold2)}

  .section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px}
  .sec-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .12s}
  .sec-card:hover{border-color:var(--gold);transform:translateY(-2px)}
  .sec-card h2{margin:0 0 6px;font-size:1.2rem;color:#f0ecdf}
  .sec-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}

  /* Abyss page */
  .abyss-table{width:100%;border-collapse:collapse;margin-top:10px}
  .abyss-table th,.abyss-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
  .abyss-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
  .abyss-table img{width:42px;height:42px;object-fit:contain;vertical-align:middle;margin-right:10px}
  .abyss-table .bname{font-weight:700;color:#f0ecdf}
  .abyss-table .btarget{color:var(--text);font-size:.85rem}
  .abyss-table .btier{color:var(--muted);font-size:.8rem}
  .abyss-table tr:last-child td{border-bottom:none}

  .omen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:12px}
  .omen{display:flex;gap:12px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px}
  .omen img{width:42px;height:42px;object-fit:contain;flex:0 0 auto}
  .omen .oname{font-weight:700;color:#f0ecdf;font-size:.9rem;line-height:1.3}
  .omen .oef{color:var(--muted);font-size:.8rem;line-height:1.4;margin-top:3px}