:root{
  --bg:#0a0c0f; --text:#ece3cf; --muted:#b9ad93;
  --gold:#ffd100; --gold-2:#c9a227; --gold-3:#8a6d1c;
  --druid:#ff7c0a; --heal:#1eff00; --poor:#9d9d9d;
  --edge:#4a4a5a;
  --display:"Cinzel",Georgia,serif; --body:"Alegreya",Georgia,serif; --ui:"Alegreya Sans",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;color:var(--text);font:18px/1.65 var(--body);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  background:
    radial-gradient(1100px 600px at 75% -8%,rgba(46,130,96,.32),transparent 62%),
    radial-gradient(900px 520px at 5% 2%,rgba(84,62,150,.22),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(#0e1218,#0a0c0f 45%,#0c0a08);
  background-color:var(--bg);
}
::selection{background:rgba(255,124,10,.45);color:#fff}
a{color:var(--druid)}
a:hover{color:var(--gold)}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}

/* Header */
header.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid;border-image:linear-gradient(90deg,transparent,var(--gold-2) 20%,var(--gold-2) 80%,transparent) 1}
.brand{display:flex;align-items:center;gap:10px;font:700 1.3rem var(--display);letter-spacing:.05em;color:var(--gold);text-shadow:0 2px 0 #000}
.brand img{width:36px;height:36px;flex:none;border-radius:50%;border:2px solid var(--gold-2);box-shadow:0 0 0 1px #000,0 0 10px rgba(255,124,10,.35)}
nav{display:flex;flex-wrap:wrap;gap:6px 18px}
nav a{white-space:nowrap;text-decoration:none;color:var(--muted);font:700 .74rem var(--display);letter-spacing:.14em;text-transform:uppercase}
nav a:hover{color:var(--gold);text-shadow:0 0 10px rgba(255,209,0,.55)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:36px;align-items:center;padding:56px 0 36px}
.portrait{position:relative;margin:0;width:270px;justify-self:end}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:390/476;object-fit:cover;border-radius:135px 135px 10px 10px;border:3px solid var(--gold-2);background:radial-gradient(circle at 50% 30%,#2a4a44,#0b1412 75%);box-shadow:0 0 0 1px #000,0 0 0 5px rgba(201,162,39,.25),0 0 40px rgba(255,124,10,.22),0 16px 30px rgba(0,0,0,.7)}
.portrait::after{content:"";position:absolute;inset:3px 3px 32px;border-radius:132px 132px 8px 8px;box-shadow:inset 0 0 40px 14px rgba(5,10,9,.85);pointer-events:none}
.portrait figcaption{margin-top:10px;text-align:center;font:700 .72rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){.hero{grid-template-columns:1fr;padding-top:32px}.portrait{order:-1;justify-self:center;width:200px}.portrait img{border-radius:100px 100px 8px 8px}.portrait::after{border-radius:97px 97px 6px 6px}}
.eyebrow{font:700 .78rem var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--druid);text-shadow:0 0 12px rgba(255,124,10,.35)}
h1{
  font:800 clamp(2.1rem,6vw,3.5rem)/1.08 var(--display);letter-spacing:.01em;margin:.3em 0 .45em;
  background:linear-gradient(180deg,#fff7cf 0%,#ffd100 48%,#b07d08 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.9)) drop-shadow(0 0 22px rgba(255,180,0,.18));
}
.lead{max-width:640px;font-size:1.15rem;color:var(--text)}
.countdown{display:flex;gap:12px;margin:28px 0 8px;flex-wrap:wrap}
.cd{min-width:84px;text-align:center;padding:10px 14px;border-radius:4px;background:linear-gradient(#1b1f2a,#0b0d13);border:1px solid var(--gold-3);box-shadow:inset 0 0 0 2px rgba(0,0,0,.85),inset 0 0 0 3px rgba(201,162,39,.28),0 6px 14px rgba(0,0,0,.6)}
.cd b{display:block;font:700 1.9rem/1.2 var(--display);color:var(--gold);text-shadow:0 2px 0 #000}
.cd span{font:700 .66rem var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.small{font:.9rem/1.5 var(--ui);color:var(--muted)}
@media (max-width:480px){.countdown{gap:8px}.cd{flex:1 1 0;min-width:0;padding:10px 4px}.cd b{font-size:1.4rem}}

/* Section headings */
h2{display:flex;align-items:center;gap:14px;margin:68px 0 14px;font:700 clamp(1.5rem,3.6vw,2rem)/1.2 var(--display);letter-spacing:.03em;color:var(--gold);text-shadow:0 2px 0 #000,0 0 18px rgba(255,209,0,.15)}
h2::before{content:"";flex:none;width:10px;height:10px;transform:rotate(45deg);background:var(--druid);box-shadow:0 0 10px var(--druid)}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-2),transparent)}

/* Tooltip-style panels */
.card,.macro,.legend,.pair{background:linear-gradient(180deg,rgba(17,24,44,.96),rgba(6,9,19,.96));border:1px solid var(--edge);border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.55)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:18px}
.grid.roles{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{padding:16px 18px;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--gold-2);transform:translateY(-2px)}
.card h3{margin:0 0 6px;font:700 1.05rem/1.3 var(--display);color:#fff;letter-spacing:.02em}
.card p{margin:0 0 12px;color:var(--muted);font-size:.98rem}

/* Tags: resource-bar colors and item quality */
.tag{display:inline-block;margin-bottom:10px;padding:2px 10px;border-radius:3px;border:1px solid rgba(0,0,0,.8);font:700 .68rem var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.tag.heal{background:linear-gradient(#4ee23a,#167d08)}
.tag.range{background:linear-gradient(#5b8cff,#1532a8)}
.tag.bear{background:linear-gradient(#ff4a3d,#8f0d06)}
.tag.cat{background:linear-gradient(#ffe866,#b89300);color:#2a2000;text-shadow:none}
.tag.soon{margin:0;padding:0;border:0;box-shadow:none;background:none;color:var(--poor);font:italic 400 .95rem var(--body);letter-spacing:0;text-transform:none;text-shadow:none}

/* Game-style red button */
.btn,.copy{display:inline-block;cursor:pointer;text-decoration:none;font:700 .72rem var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 0 #000;padding:7px 14px;border-radius:4px;border:1px solid var(--gold-2);background:linear-gradient(#b3170f,#6b0b06 55%,#4a0704);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.6)}
.btn:hover,.copy:hover{color:#fff3a0;filter:brightness(1.18)}
.copy.done{background:linear-gradient(#2f9a1c,#145a08)}

/* Video */
.video{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;border:1px dashed var(--edge);border-radius:5px;background:rgba(6,9,19,.6);color:var(--poor);font:italic 1rem var(--body)}
.video.embed{padding:0;overflow:hidden;border:1px solid var(--gold-3);box-shadow:0 0 0 3px rgba(0,0,0,.75),0 0 0 4px rgba(201,162,39,.35),0 12px 30px rgba(0,0,0,.65)}
.video.embed iframe{width:100%;height:100%;border:0;display:block}

/* Quest-parchment notes */
.note{margin:16px 0;padding:12px 16px;border-radius:3px;border:1px solid var(--gold-3);background:linear-gradient(#efe0b6,#d9c08a);color:#3b2a14;font:1rem/1.55 var(--body);box-shadow:inset 0 0 34px rgba(120,80,20,.38),0 8px 18px rgba(0,0,0,.5)}
.note b{color:#5a1a00;font-family:var(--display);font-size:.92em}
.note a{color:#7a2e00}

/* UI setup steps */
.steps{list-style:none;counter-reset:step;padding:0;margin:20px 0}
.steps>li{counter-increment:step;position:relative;margin:0 0 6px 15px;padding:0 0 18px 44px;border-left:2px solid rgba(201,162,39,.3)}
.steps>li:last-child{border-left-color:transparent}
.steps>li::before{content:counter(step);position:absolute;left:-16px;top:0;width:30px;height:30px;border-radius:50%;text-align:center;font:700 .95rem/30px var(--display);color:#3b2a00;border:1px solid #5c4600;background:radial-gradient(circle at 35% 30%,#fff3a0,#ffd100 42%,#9a7400);box-shadow:0 2px 6px rgba(0,0,0,.7)}
.steps h3{margin:2px 0 6px;font:700 1.08rem/1.3 var(--display);color:#fff}
.steps ul{margin:0;padding-left:18px;color:var(--muted);font-size:.98rem}
.steps ul li{margin-bottom:4px}
.steps b{color:var(--gold);font-weight:500}
@media (max-width:480px){.steps>li{padding-left:28px}}

/* Macros */
.pairs{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.pair{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;font:1rem var(--body)}
.pair .small{min-width:56px;font:700 .68rem var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--druid)}
.pair b{color:#fff;font-weight:500}
.pair .arrow{color:var(--gold)}
.legend{margin:18px 0;padding:12px 18px}
.legend summary{cursor:pointer;font:700 .9rem var(--display);letter-spacing:.06em;color:var(--gold)}
.legend dl{margin:12px 0 0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px 16px;font-size:.98rem}
.legend dt{margin:0}.legend dd{margin:0;color:var(--muted)}
@media (max-width:600px){.legend dl{grid-template-columns:1fr}.legend dd{margin-bottom:6px}}
code{font:.86em ui-monospace,Consolas,monospace;color:#f3c76b}
.macros{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:16px;margin-top:18px}
.macro{padding:14px 16px;min-width:0}
.macro header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.macro h3{margin:0;font:700 1.1rem var(--display);color:var(--gold);text-shadow:0 2px 0 #000}
.macro pre{margin:0 0 12px;padding:12px 14px;background:#000;border:1px solid #2e2e36;border-radius:3px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;box-shadow:inset 0 0 14px rgba(0,0,0,.9)}
.macro pre code{color:#e8e8e8}
.tok-meta{color:#ff7c0a}.tok-cmd{color:#ffd100}.tok-cond{color:#69ccf0}
.macro p{margin:0;color:var(--muted);font-size:.98rem}
.macro p b{color:var(--heal);font-weight:500}

/* Footer */
footer{margin:72px 0 24px;padding-top:18px;text-align:center;border-top:1px solid;border-image:linear-gradient(90deg,transparent,var(--gold-3),transparent) 1}

/* Keyboard diagram of Regent's keybinds */
.keymap{margin:28px 0 18px;padding:18px 20px;border:1px solid var(--edge);border-radius:5px;background:radial-gradient(120% 90% at 20% 0%,rgba(46,110,60,.28),transparent 65%),linear-gradient(180deg,rgba(14,20,18,.96),rgba(6,9,10,.96));box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.55)}
.keymap h3{margin:0 0 16px;font:700 1.15rem var(--display);color:var(--gold);text-shadow:0 2px 0 #000}
.kb{--u:32px;--g:4px;display:flex;flex-wrap:wrap;gap:16px 22px;align-items:flex-start;padding:14px;border-radius:10px;background:linear-gradient(#1a1d22,#0d0f12);border:1px solid #2d3036;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.6)}
.kb-main{flex:1 1 470px;max-width:560px;display:grid;gap:var(--g)}
.kr{display:flex;gap:var(--g)}
.k{position:relative;flex:var(--w,1) 1 0;min-width:0;height:var(--u);display:flex;align-items:center;justify-content:center;border-radius:5px;background:linear-gradient(#2b2f37,#1c1f25);border:1px solid #0a0b0d;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #0a0b0d;font:600 .78rem var(--ui);color:#6f7480;white-space:nowrap;overflow:hidden}
.k img{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:3px;border:1px solid #000}
.kb-num{flex:0 0 auto;width:calc(4 * var(--u) + 3 * var(--g));display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:var(--u);gap:var(--g)}
.kb-num .tall{grid-row:span 2;height:auto}
.kb-num .wide{grid-column:span 2}
.k.b1,.sw.b1{background:linear-gradient(#ffe066,#c9a227);color:#2a2000;border-color:#5c4600}
.k.b2,.sw.b2{background:linear-gradient(#ff9a3d,#d45a00);color:#2a1000;border-color:#5c2600}
.k.np,.sw.np{background:linear-gradient(#5b8cff,#1532a8);color:#fff;border-color:#0a1a55}
.k.mv,.sw.mv{background:linear-gradient(#4ee23a,#167d08);color:#062b00;border-color:#0a3a04}
.k.alt,.sw.alt{background:linear-gradient(#b48cff,#6a3fc4);color:#fff;border-color:#2c1660}
.k.sp,.sw.sp{background:linear-gradient(#5ee0d8,#16897f);color:#042b28;border-color:#06403b}
.k.b1,.k.b2,.k.np,.k.mv,.k.alt,.k.sp{font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #000,0 0 8px rgba(255,255,255,.08)}
.k.lock{color:var(--gold);outline:2px dashed var(--gold-2);outline-offset:-4px}
.kb-legend{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px 22px;font:.92rem/1.4 var(--ui);color:var(--muted)}
.kb-legend li{position:relative;padding-left:26px}
.kb-legend b{color:var(--text)}
.sw{position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:4px;border:1px solid}
.k em{position:absolute;right:3px;bottom:1px;font:700 .62rem/1 var(--ui);font-style:normal;color:#5dff6a;text-shadow:0 0 4px rgba(60,255,90,.8),0 1px 1px #000}
.k.np.spare{background:linear-gradient(#2e3f66,#1a2440);color:#8ea6dd;border-color:#0a1a55;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 #000}


/* No-macro tip: 2-button side plate mapped to Shift and Ctrl */
.nomacro p{margin:0 0 14px;max-width:760px}
.nomacro{--u:34px;--g:5px}
.plate-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px}
.plate{position:relative;display:flex;gap:6px;padding:46px 30px 18px 34px;border-radius:60% 40% 30% 50% / 70% 60% 40% 30%;background:radial-gradient(140% 120% at 40% 30%,#24272c,#0b0c0e);border:1px solid #2d3036;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -10px 20px rgba(0,0,0,.6),0 10px 24px rgba(0,0,0,.6)}
.plate::before{content:"";position:absolute;left:28%;right:22%;top:12px;height:24px;border-radius:10px 10px 18px 18px;background:repeating-linear-gradient(45deg,#1a1c20 0 2px,#22252a 2px 4px);opacity:.9}
.pb{display:flex;flex-direction:column;align-items:center;gap:3px}
.pb b{display:flex;align-items:center;justify-content:center;width:58px;height:30px;border-radius:14px 6px 6px 14px;background:linear-gradient(#2b2f35,#14161a);border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 #000;font:700 .9rem var(--ui);color:#cfd3da}
.pb:last-child b{border-radius:6px 14px 14px 6px}
.pb i{font-style:normal;color:var(--gold);font-weight:700;transform:rotate(90deg);line-height:1}
.pb .k{flex:none;width:58px;height:28px}
.layers{display:grid;gap:8px;flex:1 1 300px}
.layer{display:grid;grid-template-columns:110px auto 1fr;align-items:center;gap:12px}
.layer .hold{font:600 .85rem var(--ui);color:var(--muted)}
.layer .hold b{font-weight:700}
.sp-t{color:#5ee0d8}.alt-t{color:#b48cff}
.layer .keys{display:flex;gap:var(--g)}
.layer .keys .k{flex:none;width:var(--u)}
.layer .to{font:700 .78rem var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}

/* Numpad -> arrows -> Naga side buttons, inside the keyboard picture */
.kb-side{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.kb-arrows{flex:none;width:46px;height:110px;filter:drop-shadow(0 0 4px rgba(60,255,90,.75))}
.mouse{display:flex;flex-direction:column;align-items:center;padding:14px 18px 8px 14px;border-radius:16px 48px 48px 16px;background:radial-gradient(130% 120% at 30% 50%,#22252a,#0b0c0e);border:1px solid #2d3036;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -10px 20px rgba(0,0,0,.6),0 8px 18px rgba(0,0,0,.6)}
.mouse-grid{display:grid;grid-template-columns:repeat(4,var(--u));grid-auto-rows:var(--u);gap:var(--g)}
.mb{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px;background:linear-gradient(#24272c,#121417);border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #000;line-height:1}
.mb b{font:700 .78rem var(--ui);color:#5dff6a;text-shadow:0 0 6px rgba(60,255,90,.85)}
.mb i{margin-top:2px;padding:0 3px;border-radius:2px;background:#1a3a9e;font:700 .55rem var(--ui);font-style:normal;color:#dbe6ff}
.mouse-name{margin-top:6px;font:700 .6rem var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#6f7480}
@media (max-width:640px){.kb-side{flex-basis:100%;justify-content:center}.kb-arrows{width:30px;height:80px}.mouse{padding:10px 12px 6px 10px;border-radius:12px 32px 32px 12px}.mb b{font-size:.62rem}.mb i{font-size:.46rem;padding:0 2px}.keymap{padding:14px 12px}.kb{--u:24px;--g:3px;padding:8px}.k{font-size:.6rem;border-radius:3px}.k img{display:none}.kb-main{flex-basis:100%}.k em{font-size:.5rem;right:1px}.nomacro{--u:30px;--g:4px}.layer{grid-template-columns:76px auto;row-gap:2px}.layer .to{grid-column:2}.plate{margin:0 auto}}