/* Talents Forever polish lab (branch polish-lab, local only).
   Every rule hangs off html.lab-on-<idea>, so with every switch off the page is the live site.
   One motion language for all of it: 120 ms for a press, 180 for a tick, 300 for a reveal, 600 for a moment,
   ease-out cubic-bezier(.2,.7,.2,1), and nothing loops. */

/* ---------- the lab's own panel: plain, dense, clearly not part of the site ---------- */
.labbtn{position:fixed;left:14px;bottom:14px;z-index:90;display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:6px;font:700 12px/1 "Open Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#d7f7ff;background:#10242b;box-shadow:inset 0 0 0 1px #2f7f95,0 6px 18px rgba(0,0,0,.6);cursor:pointer}
.labbtn:hover{background:#15323c}
.labbtn i{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;color:#8fd3e6}
.labbtn.peek{background:#3a2a10;box-shadow:inset 0 0 0 1px #c89b1a,0 6px 18px rgba(0,0,0,.6);color:#ffd75e}
.labpanel{position:fixed;left:14px;bottom:56px;z-index:91;width:min(400px,calc(100vw - 28px));max-height:min(78vh,760px);display:flex;flex-direction:column;border-radius:8px;background:#11181b;color:#dfe9ec;box-shadow:inset 0 0 0 1px #2f7f95,0 18px 50px rgba(0,0,0,.75);font:400 12.5px/1.4 "Open Sans",system-ui,sans-serif}
.labpanel[hidden]{display:none}
.labpanel header{display:flex;align-items:baseline;gap:8px;padding:10px 12px 8px;border-bottom:1px solid #24414b}
.labpanel header b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#d7f7ff}
.labpanel header span{color:#8fb3be;font-size:11.5px}
.labpanel header button{margin-left:auto;color:#8fb3be;font-size:18px;line-height:1;padding:0 4px}
.labpanel .lbody{overflow:auto;overscroll-behavior:contain;padding:4px 12px 8px}
.labpanel h4{margin:12px 0 4px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6fb6c9;display:flex;align-items:center;gap:8px}
.labpanel h4 button{margin-left:auto;font-size:10.5px;letter-spacing:.04em;text-transform:none;color:#8fb3be;text-decoration:underline;text-underline-offset:2px}
.labpanel label{display:grid;grid-template-columns:34px 1fr;gap:0 9px;align-items:start;padding:5px 0;cursor:pointer;border-top:1px solid #1a282d}
.labpanel label:first-of-type{border-top:0}
.labpanel label b{font-weight:600;color:#eef6f8}
.labpanel label small{display:block;color:#93a9b0;font-size:11.5px;line-height:1.35}
.labpanel label em{font-style:normal;color:#e0b65a;font-size:10.5px;margin-left:6px;white-space:nowrap}
.labpanel input{position:absolute;opacity:0;width:0;height:0}
.labpanel .sw{position:relative;width:30px;height:17px;margin-top:2px;border-radius:9px;background:#26363c;box-shadow:inset 0 0 0 1px #3b545d;transition:background .12s}
.labpanel .sw::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#8aa0a7;transition:transform .12s,background .12s}
.labpanel input:checked+.sw{background:#1d6a80}
.labpanel input:checked+.sw::after{transform:translateX(13px);background:#e8fbff}
.labpanel input:focus-visible+.sw{outline:2px solid #ffd100;outline-offset:2px}
.labpanel footer{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px 10px;border-top:1px solid #24414b}
.labpanel footer button{padding:5px 10px;border-radius:4px;font-weight:600;font-size:12px;color:#eef6f8;background:#1c2b31;box-shadow:inset 0 0 0 1px #35505a}
.labpanel footer button:hover{background:#24373e}
.labpanel footer small{flex-basis:100%;color:#8fb3be;font-size:11.5px}
.labpanel kbd{border:1px solid #3b545d;border-radius:3px;padding:0 4px;background:#0c1214;font-family:inherit;font-size:11px}
@media (max-width:640px){.labbtn{left:8px;bottom:8px;padding:6px 9px}.labbtn i{display:none}.labpanel{left:8px;right:8px;bottom:46px;width:auto;max-height:70vh}}
@media print{.labbtn,.labpanel{display:none}}

/* the lab's own toast: like the site's, but it can hold a button (Undo) */
.labtoast{position:fixed;left:50%;bottom:22px;z-index:80;transform:translate(-50%,8px);display:flex;align-items:center;gap:12px;padding:7px 8px 7px 14px;border-radius:4px;background:#000;color:#fff;border:1px solid #555;font-size:13px;opacity:0;pointer-events:none;transition:opacity .15s,transform .18s cubic-bezier(.2,.7,.2,1)}
.labtoast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.labtoast button{padding:4px 10px;border-radius:3px;font-weight:700;color:#1a1400;background:var(--gold)}
.labtoast button:hover{filter:brightness(1.08)}
.labtoast kbd{margin-left:2px;color:#bdbdbd;font:inherit;font-size:11.5px}
@media (prefers-reduced-motion:reduce){.labtoast{transition:none}}
.lablive{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- how a click feels ---------- */
/* press: the tile gives under the pointer, before the click lands */
html.lab-on-press .trees .talent,html.lab-on-press #legacyTrees .talent{transition:transform .09s cubic-bezier(.2,.7,.2,1)}
html.lab-on-press .trees .talent:active,html.lab-on-press #legacyTrees .talent:active{transform:scale(.94)}
html.lab-on-press .talent .rk.bump{animation:none}
.talent .rk .lab-was{position:absolute;inset:0;font-style:normal;text-align:center;pointer-events:none}
.talent .rk .lab-now{display:inline-block}
.lab-ring{position:absolute;inset:-3px;border-radius:8px;border:2px solid var(--green2);pointer-events:none;z-index:1}
.lab-ring.gold{border-color:var(--gold)}.lab-ring.red{border-color:var(--red)}.lab-ring.dash{border-style:dashed}
@media (prefers-reduced-motion:reduce){html.lab-on-press .trees .talent,html.lab-on-press #legacyTrees .talent{transition:none}html.lab-on-press .trees .talent:active,html.lab-on-press #legacyTrees .talent:active{transform:none}}

/* counts: numbers need a box of their own to move in */
html.lab-on-counts .thead .c b,html.lab-on-counts #ptsLeft,html.lab-on-counts #split,html.lab-on-counts #lvlneed,html.lab-on-counts .bbar b{display:inline-block}

/* refuse: what is missing is said where you look */
.thead .nr.lab-need{color:#ff9a9a}
.lab-flash-red{animation:labred .5s ease-out}
@keyframes labred{0%{background:rgba(255,77,77,.35)}100%{background:transparent}}

/* copied: the button says it */
.lab-said{position:relative;color:var(--gold)!important}
.lab-said svg{width:13px;height:13px;margin-right:5px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lab-said svg path{stroke-dasharray:20;stroke-dashoffset:20;animation:labcheck .22s .04s ease-out forwards}
@keyframes labcheck{to{stroke-dashoffset:0}}
#copyAI.lab-said,.btn.primary.lab-said{color:#1a1400!important}
@media (prefers-reduced-motion:reduce){.lab-said svg path{animation:none;stroke-dashoffset:0}}

/* done: the last point. The unpicked talents go down slowly, a light crosses the banner once, and the link is offered */
html.lab-on-done body.lab-doning .trees .talent img,html.lab-on-done body.lab-doning .trees .talent .ab,html.lab-on-done body.lab-doning .trees .talent .lab-spr{transition:filter .5s ease}
html.lab-on-done body.lab-doning .trees .talent{transition:box-shadow .5s ease}
.lab-sweep{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit}
.lab-sweep::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:26%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,215,94,.22) 40%,rgba(255,240,190,.5) 50%,rgba(255,215,94,.22) 60%,transparent);animation:labsweep .75s cubic-bezier(.4,0,.2,1) forwards}
@keyframes labsweep{to{left:120%}}
.lab-offer{animation:laboffer 2.4s ease-out}
@keyframes laboffer{0%,60%{box-shadow:inset 0 0 0 1px var(--gold),0 0 14px rgba(255,209,0,.55)}100%{box-shadow:inset 0 0 0 1px transparent,0 0 0 rgba(255,209,0,0)}}
/* a full build: a gold tick and one word beside the spec, plain text, nothing that looks like a button */
.lab-complete{display:inline-flex;align-items:center;gap:5px;margin-left:2px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--gold2);white-space:nowrap}
.lab-complete::before{content:"";width:9px;height:5px;margin:-3px 1px 0 2px;border:solid var(--gold2);border-width:0 0 2px 2px;transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.lab-sweep{display:none}.lab-offer{animation:none}}

/* softer tooltips: a number that just changed is white for a moment */
.tip .lab-chg{animation:labchg .9s ease-out}
@keyframes labchg{0%{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.8)}100%{color:inherit;text-shadow:none}}
@media (prefers-reduced-motion:reduce){.tip .lab-chg{animation:none}}

/* hold to fill: the fill shows on the tile while the button is down */
.lab-holdbar{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 5px 5px;background:var(--green2);transform-origin:left;pointer-events:none;z-index:1}
.lab-holdbar.drain{background:#ff9a9a}

/* ---------- motion that explains ---------- */
.lab-ring.blue{border-color:#60a5fa}
.trees.lab-moving .tree{overflow:visible}
.trees.lab-moving .tree .thead{border-radius:4px 4px 0 0}
.lab-replay{padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold2)}
.lab-replay:hover{background:#3a3323}
@media (prefers-reduced-motion:reduce){.lab-replay{display:none}}
/* class switch: only the class's own parts cross-fade, the rest of the page holds still */
html.lab-vt .trees{view-transition-name:tf-trees}
html.lab-vt .banner,html.lab-vt .lab-head{view-transition-name:tf-banner}
html.lab-vt::view-transition-old(root),html.lab-vt::view-transition-new(root){animation:none}
html.lab-vt::view-transition-group(tf-trees),html.lab-vt::view-transition-group(tf-banner){animation-duration:.2s}
html.lab-vt::view-transition-old(tf-trees),html.lab-vt::view-transition-new(tf-trees),html.lab-vt::view-transition-old(tf-banner),html.lab-vt::view-transition-new(tf-banner){animation-duration:.2s;animation-timing-function:ease-out}
/* your spec takes the banner */
.lab-bgold{position:absolute!important;inset:0;z-index:0!important;background:center/cover no-repeat;pointer-events:none}
/* the header settles: each loop plays a few times and rests where it started; a hover plays it again */
html.lab-on-calm .mbookw::before{animation-iteration-count:2;opacity:.2}
html.lab-on-calm .mbookw::after{animation-iteration-count:2;opacity:.14}
html.lab-on-calm .gift .ring::before{animation-iteration-count:3}
html.lab-on-calm .gift::after{animation-iteration-count:3;opacity:.7}
html.lab-on-calm .gift:hover .ring::before{animation:labspin 1.6s linear infinite}
html.lab-on-calm .pin .pico::after,html.lab-on-calm .gift.addon .pico::after{animation-iteration-count:4}
@keyframes labspin{to{transform:rotate(360deg)}}

/* the panel open on a wide screen: the page moves over so the panel never covers a tree */
html.lab-docked .app{margin-left:424px;margin-right:12px;max-width:min(1200px,calc(100vw - 436px))}
html.lab-docked .labpanel{bottom:14px;top:14px;max-height:none}
html.lab-docked .labbtn{display:none}

/* ---------- layout ---------- */
/* row gates */
.lab-gates{position:absolute;inset:0;pointer-events:none}
.lab-gate{position:absolute;left:-2px;right:-2px;height:0;margin-top:-2px;border-top:1px dashed rgba(255,255,255,.05)}
.lab-gate i{position:absolute;right:0;top:-7px;display:block;padding:0 4px;border-radius:3px;font-style:normal;font-size:10px;font-weight:700;line-height:13px;color:#8d8d8d;background:rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.lab-gate.open{border-top-color:rgba(255,215,94,.12)}
.lab-gate.open i{color:#c9a94a}
.lab-gate.next{border-top-color:rgba(255,255,255,.13)}
.lab-gate.next i{color:#fff;box-shadow:0 0 0 1px #4a4a4a}
/* section links */
.lab-sections{position:fixed;z-index:19;box-sizing:border-box;display:flex;align-items:center;gap:2px;padding:3px 8px;border-radius:0 0 6px 6px;background:rgba(20,20,20,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 -1px 0 #333,0 10px 18px rgba(0,0,0,.5);overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-size:12.5px}
.lab-sections::-webkit-scrollbar{display:none}
.lab-sections[hidden]{display:none}
.lab-sections .who{display:inline-flex;align-items:center;gap:6px;margin-right:10px;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:13px;letter-spacing:.03em;color:#ffd75e}
.lab-sections .who img{width:18px;height:18px;border-radius:4px;border:1px solid #000}
.lab-sections button{padding:5px 10px;border-radius:4px;color:var(--ink2);font-weight:600}
.lab-sections button:hover{color:#fff;background:#2a2a2a}
.lab-sections button.on{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
@media (max-width:820px){.lab-sections{z-index:6;border-radius:0;padding:3px 6px}.lab-sections .who{display:none}}
/* phone: classes in one row */
@media (max-width:820px){
  html.lab-on-classrow .classes{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:8px 10px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 30px),transparent 100%)}
  html.lab-on-classrow .classes::-webkit-scrollbar{display:none}
  html.lab-on-classrow .classes a{flex:0 0 auto;scroll-snap-align:center;padding:8px 13px 8px 8px}
  html.lab-on-classrow .classes a img{width:26px;height:26px}
}
/* phone: one tree at a time */
.lab-ttabs{display:none}
@media (max-width:820px){
  html.lab-on-phonetrees .trees{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  html.lab-on-phonetrees .trees::-webkit-scrollbar{display:none}
  html.lab-on-phonetrees .trees .tree{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always}
  .lab-ttabs{position:sticky;top:var(--lab-st,58px);z-index:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px;background:var(--panel);box-shadow:0 6px 12px rgba(0,0,0,.45)}
  .lab-ttabs button{display:flex;align-items:center;gap:6px;min-width:0;min-height:40px;padding:5px 8px;border-radius:5px;background:#2a2a2a;box-shadow:inset 0 0 0 1px #333;color:var(--ink2);font-weight:600;font-size:13px}
  .lab-ttabs button img{width:24px;height:24px;border-radius:50%;border:1px solid #000;flex:none}
  .lab-ttabs button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
  .lab-ttabs button b{display:inline-block;font-variant-numeric:tabular-nums;color:#fff}
  .lab-ttabs button.spent b{color:var(--gold)}
  .lab-ttabs button.on{background:#4a4229;color:#fff;box-shadow:inset 0 0 0 1px var(--gold)}
  html.lab-on-phonetrees .status{box-shadow:none}
  html.lab-on-phonetrees .trees .thead{padding:4px 10px;gap:8px}
  html.lab-on-phonetrees .trees .thead>img{display:none}
  html.lab-on-phonetrees .trees .thead .n{font-size:0;flex-direction:row}
  html.lab-on-phonetrees .trees .thead .n .nr{font-size:11.5px}
}
/* pick rates as light */
html.lab-on-heat .trees.lab-heat .talent.avail img,html.lab-on-heat .trees.lab-heat .talent.locked img,html.lab-on-heat .trees.lab-heat .talent.avail .ab,html.lab-on-heat .trees.lab-heat .talent.locked .ab,html.lab-on-heat .trees.lab-heat .talent.avail .lab-spr,html.lab-on-heat .trees.lab-heat .talent.locked .lab-spr{filter:grayscale(calc(1 - var(--heat,0))) brightness(calc(.4 + .6*var(--heat,0)))}
html.lab-on-heat .trees.lab-heat .talent .pr img{display:none}
html.lab-on-heat .trees.lab-heat .talent .pr{left:-8px;top:-8px;padding:0 4px;font-size:10px;line-height:14px}
html.lab-on-heat .trees.lab-heat .talent .pr.mid{background:rgba(0,0,0,.8);color:#e9d38a}
/* the class folds stand on their own, and Racials is the heading of the races */
.lab-classfolds{margin-top:10px;background:var(--panel);border-radius:4px;padding:10px 12px}
.lab-classfolds #classRacials{border-bottom:0;margin-bottom:0;padding-bottom:0}

/* ---------- the first visit ---------- */
html.lab-on-iconfade .trees .talent{background:radial-gradient(circle at 50% 32%,#1c1c1c,#040404 70%)}
html.lab-on-iconfade .trees .talent:has(img,.lab-spr) .ab{visibility:hidden}
html.lab-on-iconfade .trees .talent img,html.lab-on-iconfade .trees .thead img{transition:opacity .22s ease-out}
html.lab-on-iconfade .trees img.lab-wait{opacity:0}
.lab-spr{position:absolute;inset:0;border-radius:5px;background-repeat:no-repeat;opacity:0}
.trees.lab-spr-ready .lab-spr{opacity:1}
html.lab-on-iconfade .lab-spr{transition:opacity .22s ease-out}
.talent.locked .lab-spr{filter:grayscale(1) brightness(.55)}
body.done .trees .talent.avail .lab-spr{filter:grayscale(1) brightness(.55)}
body.cmp .talent.same .lab-spr{filter:grayscale(.6) brightness(.75)}
@media (prefers-reduced-motion:reduce){html.lab-on-iconfade .trees .talent img,html.lab-on-iconfade .trees .thead img,html.lab-on-iconfade .lab-spr{transition:none}}

/* ---------- more ---------- */
/* keys */
.lab-keysbtn{margin-left:6px!important;margin-right:auto!important;padding:4px 7px!important}
.status .sreset:has(+.lab-keysbtn){margin-right:0}
.lab-keysbtn kbd,.lab-keys kbd{display:inline-block;min-width:16px;padding:0 4px;border:1px solid #555;border-radius:3px;background:#1a1a1a;font:inherit;font-size:11px;line-height:15px;text-align:center;color:#ddd}
.lab-keys{position:fixed;right:18px;bottom:18px;z-index:85;width:300px;max-width:calc(100vw - 36px);border-radius:6px;background:rgba(14,14,16,.96);border:1px solid var(--tip-line);box-shadow:inset 0 1px 0 rgba(255,215,94,.4),0 14px 36px rgba(0,0,0,.75);font-size:13px;color:var(--ink)}
.lab-keys[hidden]{display:none}
.lab-keys header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #2c2618}
.lab-keys header b{font-family:Cinzel,Georgia,serif;color:#ffd75e;letter-spacing:.03em}
.lab-keys header button{color:#aaa;font-size:18px;line-height:1;padding:0 4px}
.lab-keys dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;padding:10px 12px 12px}
.lab-keys dt{white-space:nowrap}.lab-keys dd{margin:0;color:var(--ink2)}
/* what is in the way */
.talent.lab-need{box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold),0 0 12px rgba(255,209,0,.55)!important}
.talent.lab-need::after{content:"";position:absolute;inset:-5px;border-radius:9px;border:1px dashed rgba(255,215,94,.8);pointer-events:none}
.arrows .lab-need{stroke:var(--gold);opacity:1;stroke-dasharray:4 3}
/* the level slider */
.lab-scrub{display:flex;align-items:center;gap:10px;margin:2px 0 10px;padding:6px 10px;border-radius:4px;background:#171717;box-shadow:inset 0 0 0 1px #303030;font-size:12.5px;color:var(--ink2)}
.lab-scrub .play{width:24px;height:24px;flex:none;border-radius:50%;background:#2e2a1f;box-shadow:inset 0 0 0 1px var(--gold2);color:var(--gold);display:grid;place-items:center}
.lab-scrub .play:hover{background:#3a3323}
.lab-scrub .play svg{width:11px;height:11px;fill:currentColor}
.lab-scrub .play .p2,.lab-scrub .play.on .p1{display:none}.lab-scrub .play.on .p2{display:block}
.lab-scrub .lab{font-weight:600}
.lab-scrub input{flex:1;min-width:80px;max-width:520px;height:18px;margin:0;appearance:none;-webkit-appearance:none;background:none;cursor:pointer;--at:100%}
.lab-scrub input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gold) var(--at),#3a3a3a var(--at))}
.lab-scrub input::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gold) var(--at),#3a3a3a var(--at))}
.lab-scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#ffe9a6;border:1px solid #000;box-shadow:0 0 0 1px var(--gold2),0 2px 5px rgba(0,0,0,.6)}
.lab-scrub input::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#ffe9a6;border:1px solid #000;box-shadow:0 0 0 1px var(--gold2)}
.lab-scrub output{min-width:20px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.lab-scrub .pts{color:var(--muted);white-space:nowrap}
.lab-scrub .back{margin-left:auto;padding:3px 10px;border-radius:4px;font-weight:700;font-size:12px;color:#1a1400;background:var(--gold);white-space:nowrap}
.lab-scrub.viewing{box-shadow:inset 3px 0 0 var(--gold)}
.lvlist li.lab-later{opacity:.35}
.lvlist li.lab-at{background:rgba(255,209,0,.1);box-shadow:inset 2px 0 0 var(--gold)}
html.lab-on-scrub .lvlist li{cursor:pointer}
@media (max-width:640px){.lab-scrub{flex-wrap:wrap;gap:6px 10px}.lab-scrub .pts{display:none}.lab-scrub .back{margin-left:0}}
/* small fixes: what Reduce Motion missed */
@media (prefers-reduced-motion:reduce){
  html.lab-on-fixes .gift.addon .pico::after,html.lab-on-fixes .talent .rk.bump,html.lab-on-fixes .talent .un,html.lab-on-fixes .stt,html.lab-on-fixes .pgface.in::after{animation:none}
  html.lab-on-fixes .gift{transition:none}
}
html.lab-on-fixes .stt{font-family:inherit}

/* ---------- spellbook: a plainer, crafted book. Nothing glows, sweeps or floats; brass is flat, the page is paper ---------- */
html.lab-on-book .sheen,html.lab-on-book .motes{display:none}
html.lab-on-book .btab.on{animation:none;box-shadow:inset 0 0 0 1px #c9a24a,2px 2px 6px rgba(0,0,0,.55)}
html.lab-on-book .bookcover{border-radius:6px;background:linear-gradient(180deg,#3b2415,#24140b);box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 0 1px #140a05,inset 0 0 0 3px #6e4f25,inset 0 0 0 4px #140a05}
html.lab-on-book .bookcover::before,html.lab-on-book .bookcover::after{width:9px;height:9px;left:6px;background:#a8853f;box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,235,170,.45),0 0 0 1px #140a05}
html.lab-on-book .page{background:linear-gradient(90deg,rgba(40,20,5,.4),rgba(40,20,5,.1) 5%,transparent 12%),radial-gradient(100% 100% at 100% 100%,rgba(110,70,25,.28),transparent 55%),radial-gradient(90% 80% at 0 0,rgba(110,70,25,.16),transparent 60%),#dcc89a;box-shadow:inset 0 0 40px rgba(80,50,15,.4),inset 0 0 0 1px rgba(60,35,10,.45)}
html.lab-on-book .page::before{opacity:.75}
html.lab-on-book .page::after{box-shadow:none;border-color:rgba(90,60,20,.3)}
html.lab-on-book .pgtitle{text-shadow:none;color:#3f280e}
html.lab-on-book .rule i{background:#a8853f;box-shadow:0 0 0 2px #dcc89a,0 0 0 3px rgba(90,60,20,.55)}
html.lab-on-book .sgrid li{animation:none;border-radius:3px}
@keyframes labbookin{from{opacity:0}to{opacity:1}}
html.lab-on-book .sgrid li:hover,html.lab-on-book .sgrid li.tipon{background:rgba(90,60,20,.1)}
html.lab-on-book .sgrid .ico{border-radius:3px;box-shadow:0 0 0 1px #0e0804,0 0 0 2px #7d6230,0 0 0 3px #1e1208,0 1px 3px rgba(0,0,0,.5);transition:none}
html.lab-on-book .sgrid .ico::before{display:none}
html.lab-on-book .sgrid .ico::after{background:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 0 6px rgba(0,0,0,.45)}
/* the hover the game uses: a square of light laid over the icon, nothing moves */
html.lab-on-book .sgrid li:hover .ico,html.lab-on-book .sgrid li.tipon .ico{transform:none;box-shadow:0 0 0 1px #0e0804,0 0 0 2px #d9b65a,0 0 0 3px #1e1208,0 1px 3px rgba(0,0,0,.5)}
html.lab-on-book .sgrid li:hover .ico img,html.lab-on-book .sgrid li.tipon .ico img{filter:brightness(1.18)}
html.lab-on-book .sgrid li:hover .ico::after,html.lab-on-book .sgrid li.tipon .ico::after{box-shadow:inset 0 0 0 2px rgba(255,245,210,.6),inset 0 0 8px rgba(255,235,170,.35)}
html.lab-on-book .sgrid li:hover .txt b{color:#2a1a08;text-shadow:none}
html.lab-on-book .sgrid .lv i{border-radius:2px}
html.lab-on-book .sgrid .lv i.cur{box-shadow:none;background:#4a2f10;color:#f0d68a}
html.lab-on-book .sgrid .tal{background:#b8913f;box-shadow:0 0 0 1px #2a1808;border-radius:2px}
html.lab-on-book .pgfoot button{background:#2c1a0c;box-shadow:0 0 0 1px #140a05,0 0 0 2px #8a6a30,0 1px 3px rgba(0,0,0,.5);transition:none}
html.lab-on-book .pgfoot button[data-pg="1"]::after{border-left-color:#e2bd62}
html.lab-on-book .pgfoot button[data-pg="-1"]::after{border-right-color:#e2bd62}
html.lab-on-book .pgfoot button:hover:not(:disabled){transform:none;background:#3c2412;box-shadow:0 0 0 1px #140a05,0 0 0 2px #d9b65a,0 1px 3px rgba(0,0,0,.5)}
html.lab-on-book .pgfoot button:active:not(:disabled){transform:translateY(1px)}
html.lab-on-book .btab{border-radius:0 5px 5px 0;transition:transform .12s}
html.lab-on-book .btab span{border-radius:3px;transition:none}
html.lab-on-book .book.open .bookcover{animation:labbookin .25s ease-out both}
html.lab-on-book .bkctl .seg button[aria-pressed="true"]{background:#5a4a1e;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold2)}
html.lab-on-book .bkctl .seg{border-radius:5px}html.lab-on-book .bkctl .seg button{border-radius:4px}
/* the tooltip: the same box the talents use */
html.lab-on-book .stt{padding:9px 12px;border-radius:6px;background:rgba(10,10,12,.94);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--tip-line);box-shadow:inset 0 1px 0 rgba(255,215,94,.45),0 12px 34px rgba(0,0,0,.75);font-family:inherit;font-size:13px;line-height:1.38;animation:none}
html.lab-on-book .stt .sttn b{color:#ffd75e;font-size:15px;letter-spacing:.02em;text-shadow:0 1px 0 #5a4210}
html.lab-on-book .stt .sttl{color:#ddd}html.lab-on-book .stt .sttd{color:var(--gold);margin-top:6px}
@media (max-width:760px){html.lab-on-book .stt.inline{animation:none}}

/* ---------- the foot of the page: three plain panels and the two asks side by side ---------- */
html.lab-on-foot .foot2>section{display:none}
.lab-foot{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;margin-top:10px;font-size:13px;color:var(--ink2)}
.lf-p{background:var(--panel);border-radius:4px;padding:0 14px 14px;min-width:0}
.lf-how{grid-column:span 5}.lf-src{grid-column:span 4}.lf-nav{grid-column:span 3}.lf-ask{grid-column:span 6}
.lf-p header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.lf-p h3{margin:0;font-family:Cinzel,Georgia,serif;font-size:15px;letter-spacing:.04em;color:#ffd75e}
.lf-how dl{display:grid;grid-template-columns:auto 1fr;margin:0}
.lf-how dt,.lf-how dd{margin:0;padding:6px 0;border-top:1px solid #2a2a2a}
.lf-how dt:first-of-type,.lf-how dt:first-of-type+dd{border-top:0}
.lf-how dt{padding-right:18px;font-weight:600;color:var(--ink);white-space:nowrap}
.lab-foot kbd{display:inline-block;padding:0 6px;border:1px solid #555;border-bottom-width:2px;border-radius:3px;background:#1a1a1a;font:inherit;font-size:12px;line-height:18px;color:#eee}
.lf-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.lf-chips span{display:flex;flex-direction:column;gap:1px;padding:6px 9px;border-radius:4px;background:#171717;box-shadow:inset 0 0 0 1px #333;min-width:0}
.lf-chips small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lf-chips b{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-steps .cvs{margin:0;padding:0;border:0}.lf-steps .steps{grid-template-columns:1fr;gap:10px}
.lf-press{display:flex;align-items:center;gap:9px;margin-top:12px;padding:8px 10px;border-radius:4px;background:#171717;box-shadow:inset 3px 0 0 var(--gold2);color:var(--ink2);text-decoration:none}
.lf-press:hover{color:#fff}.lf-press b{color:var(--ink)}.lf-press img{border-radius:3px;flex:none}
.lf-fine{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.lab-foot .lf-fine a,.lf-nav li a{color:var(--gold2);text-decoration:none;border-bottom:1px solid #5a4614}
.lab-foot .lf-fine a:hover,.lf-nav li a:hover{color:var(--gold)}
.lf-cls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.lf-cls a{display:block;border-radius:5px;box-shadow:0 0 0 1px #000,0 0 0 2px #4a4334}.lf-cls a:hover{box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold)}
.lf-cls a:hover{background:#2c2c2c;color:#fff}
.lf-cls img{display:block;width:30px;height:30px;border-radius:5px}
.lf-cls span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lf-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.lf-ask{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;background:var(--panel);border-radius:4px;padding:12px 14px}
.lf-ask img{width:48px;height:48px;border-radius:6px;border:1px solid #6b5a2a;box-shadow:0 0 0 1px #000;justify-self:center}
.lf-ask.lf-tip img.gob{width:auto;height:62px;border:0;box-shadow:none;border-radius:0;margin:-8px 0}
.lf-ask div{display:flex;flex-direction:column;gap:2px;min-width:0}.lf-ask b{font-size:15px;color:var(--ink)}.lf-ask span{font-size:12px;line-height:1.4;color:var(--muted)}
.lf-ask .lpill{padding:9px 18px;font-size:14px;white-space:nowrap;cursor:pointer}
@media (max-width:1000px){.lf-how,.lf-src,.lf-nav,.lf-ask{grid-column:1/-1}.lf-ask{grid-template-columns:48px 1fr}.lf-ask .lpill{grid-column:1/-1;text-align:center}}

/* the section bar carries the site's name, so a stream shows it on any part of the page */
.lab-sections .lab-site{position:sticky;right:0;margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:2px 4px 2px 14px;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:13px;letter-spacing:.05em;color:#ffd75e;text-decoration:none;background:linear-gradient(90deg,transparent,rgba(20,20,20,.98) 12px)}
.lab-sections .lab-site img{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold2)}

/* ---------- racials as a race picker, new abilities on a level line ---------- */
html.lab-on-cards #factions,html.lab-on-cards #raceAll{display:none!important}
html.lab-on-cards #foldAbilities .ltrees,html.lab-on-cards #foldAbilities .lab-abil~.ltrees{display:none}
.lab-races{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.lab-races.stack{grid-template-columns:1fr;gap:12px}
.lr-fac{--fc:#c0392b;--fb:#e6432f;min-width:0}.lr-fac.alliance{--fc:#2f6fd0;--fb:#3d8bff}
.lr-fac h3{margin:0 0 8px;padding-bottom:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fb);border-bottom:1px solid var(--line)}
.lr-cards{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;align-items:stretch}
.lr-card{display:flex;flex-direction:column;min-width:0;border-radius:4px;background:#191919;box-shadow:inset 0 0 0 1px #2e2e2e,inset 0 3px 0 var(--fc);overflow:hidden}
.lr-card.no{opacity:.45}
.lr-card header{display:flex;align-items:center;gap:10px;padding:14px 10px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 26%,#191919),#191919)}
.lr-card header img{width:52px;height:52px;border-radius:50%;border:2px solid #000;box-shadow:0 0 0 2px var(--fb),0 4px 10px rgba(0,0,0,.6);flex:none}
.lr-card header b{display:block;font-family:Cinzel,Georgia,serif;font-size:17px;letter-spacing:.03em;color:#ffd75e;line-height:1.1}
.lr-card header em{display:block;font-style:normal;font-size:11.5px;color:var(--ink2)}.lr-card header small{display:block;font-size:11px;color:var(--muted)}
.lr-card ul{list-style:none;margin:0;padding:0 6px 6px}
.lr-card li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:0 8px;padding:5px 4px;border-top:1px solid #272727;border-radius:3px;cursor:pointer;font-size:12.5px}
.lr-card li:hover,.lr-card li:focus-visible{background:#262626;outline:0}
.lr-card li img,.lr-card li .noic{width:30px;height:30px;border-radius:4px;border:1px solid #000;box-shadow:0 0 0 1px #4a4334;background:#0a0a0a;display:block}
.lr-card li b{font-weight:600;color:var(--ink);line-height:1.2;overflow-wrap:anywhere}
.lr-card li i,.lr-key i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;padding:0 5px;line-height:16px;border-radius:3px}
.lr-card li i.act,.lr-key i.act{color:#1a1400;background:var(--gold)}
.lr-card li i.pas,.lr-key i.pas{color:#9a9a9a;box-shadow:inset 0 0 0 1px #3d3d3d}
.lr-card h5{display:flex;align-items:center;gap:6px;margin:auto 0 0;padding:6px 10px 5px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:#221e12;border-top:1px solid #4a4020}
.lr-card h5 img{width:16px;height:16px;border-radius:3px;border:1px solid #000}
.lr-card h5+ul{background:#1d1a12;padding-top:0}.lr-card h5+ul li:first-child{border-top:0}
.lr-card li.own img{box-shadow:0 0 0 1px var(--gold2)}
.lr-key{grid-column:1/-1;margin:8px 0 0;font-size:11.5px;color:var(--muted)}.lr-key i{margin:0 4px 0 0}.lr-key i.pas{margin-left:14px}
@media (max-width:1000px){.lab-races{grid-template-columns:1fr;gap:12px}}
@media (max-width:820px){.lr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.lr-card header img{width:44px;height:44px}.lr-card header b{font-size:15px}.lr-card li{grid-template-columns:26px minmax(0,1fr);cursor:pointer}.lr-card li img,.lr-card li .noic{width:26px;height:26px}.lr-card li i{grid-column:2;justify-self:start;margin-top:2px}}
.lr-plates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-size:13px;align-content:start}
.lr-plates li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;align-items:start;padding:9px 11px;border-radius:4px;background:#141414;box-shadow:inset 0 0 0 1px #2c2c2c}
.lr-plates li img,.lr-plates li .noic{width:40px;height:40px;border-radius:4px;border:1px solid #000;box-shadow:0 0 0 1px #6b5a2a;background:#0a0a0a;display:block}
.lr-plates li b{display:block;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:14px;letter-spacing:.02em;color:#ffd75e;line-height:1.2}
.lr-plates .lab-d{display:block;color:var(--ink2);line-height:1.4}
.lab-meta{display:flex!important;flex-wrap:wrap;gap:4px;margin:4px 0 3px}
.lab-meta i{font-style:normal;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:0 6px;line-height:16px;border-radius:3px;color:#cfcfcf;background:#262626;box-shadow:inset 0 0 0 1px #3a3a3a}
/* new abilities: where on the road to 60 each one arrives */
.lab-abil h4{margin:14px 0 8px;font-size:14px;color:var(--gold)}.lab-abil h4:first-child{margin-top:0}.lab-abil h4 small{color:var(--muted);font-weight:400;font-size:12px}
.la-line{padding:26px 22px 22px;margin-bottom:8px;border-radius:4px;background:#141414;box-shadow:inset 0 0 0 1px #2c2c2c}
.la-track{position:relative;height:4px;border-radius:2px;background:linear-gradient(90deg,#3a3a3a,var(--gold2))}
.la-track i{position:absolute;top:9px;transform:translateX(-50%);font-style:normal;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.la-track i::before{content:"";position:absolute;left:50%;top:-9px;width:1px;height:6px;background:#666}
.la-track span{position:absolute;top:calc(-13px - var(--k,0)*0px);transform:translate(calc(-50% + var(--k,0)*22px),0)}
.la-track span img{display:block;width:30px;height:30px;border-radius:4px;border:1px solid #000;box-shadow:0 0 0 1px var(--gold2),0 3px 8px rgba(0,0,0,.7)}
.la-new li{grid-template-columns:44px 40px minmax(0,1fr)}
.la-lv{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:40px;border-radius:4px;background:#2e2a1f;box-shadow:inset 0 0 0 1px var(--gold2);font-weight:700;font-size:17px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.la-lv small{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#c9a94a;margin-bottom:2px}
.la-ren{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 18px;font-size:13px}
.la-ren li{display:flex;align-items:center;gap:9px;padding:4px 0;border-bottom:1px solid #2a2a2a;min-width:0}
.la-ren img{width:26px;height:26px;border-radius:4px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a;flex:none}
.la-ren span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.la-ren s{color:var(--muted);font-size:12px;text-decoration-color:#6a6a6a}.la-ren b{color:var(--ink);font-weight:600}
.la-note,.la-gone{margin:8px 0 0;font-size:12px;color:var(--muted)}.la-gone{font-size:13px;color:var(--ink2)}
@media (max-width:820px){.lr-pick{grid-template-columns:1fr;gap:10px}.lr-row button{padding:3px 10px 3px 3px;font-size:13px;min-height:44px}.lr-row button img{width:36px;height:36px}
  .lr-detail{grid-template-columns:1fr;padding:12px}.lr-who{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:4px 10px}.lr-who>img{width:52px;height:52px;margin:0}.lr-can{margin:0;flex-basis:100%}.lr-can div{justify-content:flex-start}
  .lr-plates,.la-ren{grid-template-columns:1fr}.la-line{padding:24px 18px 20px}}

/* ---------- the foot of the page: three plain panels and the two asks side by side ---------- */
html.lab-on-foot .foot2>section{display:none}
.lab-foot{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;margin-top:10px;font-size:13px;color:var(--ink2)}
.lf-p{background:var(--panel);border-radius:4px;padding:0 14px 14px;min-width:0}
.lf-how{grid-column:span 5}.lf-src{grid-column:span 4}.lf-nav{grid-column:span 3}.lf-ask{grid-column:span 6}
.lf-p header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.lf-p h3{margin:0;font-family:Cinzel,Georgia,serif;font-size:15px;letter-spacing:.04em;color:#ffd75e}
.lf-how dl{display:grid;grid-template-columns:auto 1fr;margin:0}
.lf-how dt,.lf-how dd{margin:0;padding:6px 0;border-top:1px solid #2a2a2a}
.lf-how dt:first-of-type,.lf-how dt:first-of-type+dd{border-top:0}
.lf-how dt{padding-right:18px;font-weight:600;color:var(--ink);white-space:nowrap}
.lab-foot kbd{display:inline-block;padding:0 6px;border:1px solid #555;border-bottom-width:2px;border-radius:3px;background:#1a1a1a;font:inherit;font-size:12px;line-height:18px;color:#eee}
.lf-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.lf-chips span{display:flex;flex-direction:column;gap:1px;padding:6px 9px;border-radius:4px;background:#171717;box-shadow:inset 0 0 0 1px #333;min-width:0}
.lf-chips small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lf-chips b{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-steps .cvs{margin:0;padding:0;border:0}.lf-steps .steps{grid-template-columns:1fr;gap:10px}
.lf-press{display:flex;align-items:center;gap:9px;margin-top:12px;padding:8px 10px;border-radius:4px;background:#171717;box-shadow:inset 3px 0 0 var(--gold2);color:var(--ink2);text-decoration:none}
.lf-press:hover{color:#fff}.lf-press b{color:var(--ink)}.lf-press img{border-radius:3px;flex:none}
.lf-fine{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.lab-foot .lf-fine a,.lf-nav li a{color:var(--gold2);text-decoration:none;border-bottom:1px solid #5a4614}
.lab-foot .lf-fine a:hover,.lf-nav li a:hover{color:var(--gold)}
.lf-cls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.lf-cls a{display:block;border-radius:5px;box-shadow:0 0 0 1px #000,0 0 0 2px #4a4334}.lf-cls a:hover{box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold)}
.lf-cls a:hover{background:#2c2c2c;color:#fff}
.lf-cls img{display:block;width:30px;height:30px;border-radius:5px}
.lf-cls span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lf-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.lf-ask{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;background:var(--panel);border-radius:4px;padding:12px 14px}
.lf-ask img{width:48px;height:48px;border-radius:6px;border:1px solid #6b5a2a;box-shadow:0 0 0 1px #000;justify-self:center}
.lf-ask.lf-tip img.gob{width:auto;height:62px;border:0;box-shadow:none;border-radius:0;margin:-8px 0}
.lf-ask div{display:flex;flex-direction:column;gap:2px;min-width:0}.lf-ask b{font-size:15px;color:var(--ink)}.lf-ask span{font-size:12px;line-height:1.4;color:var(--muted)}
.lf-ask .lpill{padding:9px 18px;font-size:14px;white-space:nowrap;cursor:pointer}
@media (max-width:1000px){.lf-how,.lf-src,.lf-nav,.lf-ask{grid-column:1/-1}.lf-ask{grid-template-columns:48px 1fr}.lf-ask .lpill{grid-column:1/-1;text-align:center}}

/* the section bar carries the site's name, so a stream shows it on any part of the page */
.lab-sections .lab-site{position:sticky;right:0;margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:2px 4px 2px 14px;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:13px;letter-spacing:.05em;color:#ffd75e;text-decoration:none;background:linear-gradient(90deg,transparent,rgba(20,20,20,.98) 12px)}
.lab-sections .lab-site img{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold2)}

/* ---------- racials and new abilities as plates ---------- */
html.lab-on-cards .race.rc{padding:9px 12px;border-radius:4px}
html.lab-on-cards .race.rc .strip{gap:6px;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end}
.lab-rchip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 2px;border-radius:4px;background:#171717;box-shadow:inset 0 0 0 1px #343434;font-size:12px;color:var(--ink2);white-space:nowrap}
.lab-rchip em{font-style:normal}
html.lab-on-cards .race.rc .lab-rchip img{width:22px;height:22px;border-radius:3px;box-shadow:none}
html.lab-on-cards .race.rc:hover .lab-rchip{box-shadow:inset 0 0 0 1px #4a4334;color:var(--ink)}
html.lab-on-cards .race.rc.open .strip{display:none}
html.lab-on-cards .race.rc.open ul,html.lab-on-cards #foldAbilities .ltree ul,html.lab-on-cards #foldClassRacials .ltree ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
html.lab-on-cards .race li,html.lab-on-cards #foldAbilities .ltree li,html.lab-on-cards #foldClassRacials .ltree li{grid-template-columns:36px 1fr;gap:10px;padding:8px 10px;border-radius:4px;background:#171717;box-shadow:inset 0 0 0 1px #303030}
html.lab-on-cards .race li img,html.lab-on-cards .race li .ab,html.lab-on-cards #foldAbilities .ltree li img,html.lab-on-cards #foldClassRacials .ltree li img{width:36px;height:36px;border-radius:4px;box-shadow:0 0 0 1px #6b5a2a}
html.lab-on-cards .race li b,html.lab-on-cards #foldAbilities .ltree li b,html.lab-on-cards #foldClassRacials .ltree li b{display:block;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:13.5px;letter-spacing:.02em;color:#ffd75e;line-height:1.2}
.lab-meta{display:flex!important;flex-wrap:wrap;gap:4px;margin:4px 0 3px}
.lab-meta i{font-style:normal;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:0 6px;line-height:16px;border-radius:3px;color:#cfcfcf;background:#262626;box-shadow:inset 0 0 0 1px #3a3a3a}
html.lab-on-cards .ltree li .lab-d,html.lab-on-cards .race li .lab-d{line-height:1.4}
html.lab-on-cards #foldAbilities .ltree,html.lab-on-cards #foldClassRacials .ltree{background:none;padding:0}
@media (max-width:820px){.lab-rchip em{display:none}.lab-rchip{padding:2px}html.lab-on-cards .race.rc.open ul,html.lab-on-cards #foldAbilities .ltree ul,html.lab-on-cards #foldClassRacials .ltree ul{grid-template-columns:1fr}}
/* who made it, and where to find him */
.lf-me{grid-column:1/-1;display:grid;grid-template-columns:64px minmax(0,1fr) auto auto auto;align-items:center;gap:12px 16px;background:var(--panel);border-radius:4px;padding:12px 16px;box-shadow:inset 3px 0 0 var(--gold2)}
.lf-me>img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 2px #000,0 0 0 4px var(--gold2),0 0 0 5px #3a2a08}
.lf-me>div{display:flex;flex-direction:column;min-width:0}
.lf-me small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lf-me>div>b{font-family:Cinzel,Georgia,serif;font-size:19px;letter-spacing:.03em;color:#ffd75e;line-height:1.15}
.lf-me>div>span{font-size:12.5px;color:var(--ink2)}
.lf-soc{display:flex;align-items:center;gap:10px;min-width:176px;padding:9px 16px 9px 12px;border-radius:5px;background:#171717;box-shadow:inset 0 0 0 1px var(--gold2);text-decoration:none;color:var(--ink)}
.lf-soc:hover{background:#2e2a1f;box-shadow:inset 0 0 0 1px var(--gold)}
.lf-soc svg{width:24px;height:24px;flex:none;fill:none;stroke:#ffd75e;stroke-width:2.2;stroke-linecap:round}.lf-soc svg .f{fill:#ffd75e;stroke:none}
.lf-soc span{display:flex;flex-direction:column;line-height:1.2}.lf-soc b{font-size:14px}.lf-soc em{font-style:normal;font-size:12px;color:var(--gold2)}
@media (max-width:820px){.lf-me{grid-template-columns:56px minmax(0,1fr)}.lf-me>img{width:56px;height:56px}.lf-soc{grid-column:1/-1;min-width:0}}

.lf-soc svg.lg-x{fill:#fff;stroke:none;width:22px;height:22px}.lf-soc svg.lg-yt{stroke:none;width:28px;height:28px}

/* spellbook: a clean turn. The turning leaf is the page itself (same paper, grain, frame and spine shade), the new spread lies still
   under it, and nothing fades or pops while the leaf is in the air */
html.lab-on-book .page.turning .sgrid li,html.lab-on-book .lfw .sgrid li{animation:none!important}
html.lab-on-book .lf,html.lab-on-book .lf.s{background:none;box-shadow:none}
html.lab-on-book .lfw{height:100%!important;background:linear-gradient(90deg,transparent calc(50% - 35px),rgba(70,40,10,.14) calc(50% - 7px),rgba(70,40,10,.32) 50%,rgba(70,40,10,.14) calc(50% + 7px),transparent calc(50% + 35px)),linear-gradient(90deg,rgba(40,20,5,.4),rgba(40,20,5,.1) 5%,transparent 12%),radial-gradient(100% 100% at 100% 100%,rgba(110,70,25,.28),transparent 55%),radial-gradient(90% 80% at 0 0,rgba(110,70,25,.16),transparent 60%),#dcc89a;box-shadow:inset 0 0 40px rgba(80,50,15,.4),inset 0 0 0 1px rgba(60,35,10,.45)}
html.lab-on-book .lfw::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.75;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html.lab-on-book .lfw::after{content:"";position:absolute;inset:10px 12px 10px 14px;pointer-events:none;border:1px solid rgba(90,60,20,.3);border-radius:2px}
html.lab-on-book .lfw .pgface{position:relative;z-index:1;height:100%}
html.lab-on-book .leaf.fwd,html.lab-on-book .leaf.bwd{animation-duration:.62s;animation-timing-function:cubic-bezier(.4,.1,.25,1)}
html.lab-on-book .leaf .lf::after{animation-duration:.62s!important}
html.lab-on-book .leaf .lf{box-shadow:none;animation:lableafsh .62s linear both}
@keyframes lableafsh{0%,100%{box-shadow:0 0 0 rgba(0,0,0,0)}12%,88%{box-shadow:0 0 22px rgba(0,0,0,.35)}}
html.lab-on-book .sgrid li.none{background:none;box-shadow:none;color:#7a5a2a;font-style:italic;justify-content:center;padding:28px 0;grid-column:1/-1;animation:none}

/* header icons in one ring: the game icon is cut round (its own black edge trimmed off) and the ring is the only frame */
html.lab-on-chips .masthead .pico{border-radius:50%!important;box-shadow:0 0 0 1.5px var(--c,#d9b24a),0 2px 6px rgba(0,0,0,.5);background:#000}
html.lab-on-chips .masthead .gift.tome .pico{--c:#d9b24a}
html.lab-on-chips .masthead .pico img{border:0!important;box-shadow:none!important;border-radius:50%!important;transform:scale(1.2);clip-path:circle(41.6%)}
html.lab-on-chips .masthead .pin{padding:0;background:none;box-shadow:none}
html.lab-on-chips .masthead .pin:hover,html.lab-on-chips .masthead .pin[aria-expanded="true"]{box-shadow:0 0 16px color-mix(in srgb,var(--c) 45%,transparent)}
html.lab-on-chips .masthead .pin .pico{box-shadow:0 0 0 2px var(--c),0 2px 6px rgba(0,0,0,.5)}
@media (min-width:481px){html.lab-on-chips .masthead .pin .pico,html.lab-on-chips .masthead .pin .pico img{width:24px;height:24px}html.lab-on-chips .masthead .pin .pico{box-shadow:0 0 0 1.5px var(--c),0 2px 6px rgba(0,0,0,.5)}html.lab-on-chips .masthead .pin{min-height:0}}
@media (max-width:480px){html.lab-on-chips .masthead .pin .pico,html.lab-on-chips .masthead .pin .pico img,html.lab-on-chips .masthead .gift.addon .pico,html.lab-on-chips .masthead .gift.addon .pico img{width:34px;height:34px}html.lab-on-chips .masthead .gift.addon{background:none;box-shadow:none;padding:0}}

.lf-soc svg.lg-rd{stroke:none;width:26px;height:26px}
/* What's new: Blizzard's lines carry the blue mark, not the word */
html.lab-on-blizz .src.blue b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* turning back: the half that stays is the right one. The site pins it left (.lf's inset:0 beats the inline right:0), so the old right page showed on the left */
html.lab-on-book .lf.s.r,html.lab-on-fixes .lf.s.r{left:50%!important;right:auto!important}
/* phones have no leaf: the page slides the way you turned it, the old one out and the new one in, with no blank page between */
@media (max-width:760px){
html.lab-on-book .pgface.out{animation:labpgout .14s ease-in forwards}
html.lab-on-book .pgface.in{animation:labpgin .2s cubic-bezier(.2,.7,.2,1) both}
html.lab-on-book .pgface.out::after,html.lab-on-book .pgface.in::after{display:none}
html.lab-on-book .book{--pgd:1}html.lab-on-book .book[data-dir="b"]{--pgd:-1}
}
@keyframes labpgout{to{transform:translateX(calc(var(--pgd,1)*-7%));opacity:0}}
@keyframes labpgin{from{transform:translateX(calc(var(--pgd,1)*7%));opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){html.lab-on-book .pgface.out,html.lab-on-book .pgface.in{animation:none}}
/* banner: talentsforever.com keeps the middle and the banner keeps its height. The class text stops short of the sign: name (and
   Build complete) on one line, the spec on the next, the guide pill on the third and never wrapped. The point split is read off the
   trees on the right, which are bigger so the two sides weigh the same */
@media (min-width:901px){
html.lab-on-banner .banner{container-type:inline-size}
html.lab-on-banner .banner .bbars{margin-left:auto;width:230px;gap:4px}
html.lab-on-banner .banner .bbar{grid-template-columns:24px 1fr 24px;gap:9px;font-size:14px}
html.lab-on-banner .banner .bbar img{width:24px;height:24px;box-sizing:border-box}
html.lab-on-banner .banner .bbar .tk{height:6px}
html.lab-on-banner .banner .bguide{flex-wrap:nowrap;white-space:nowrap}
html.lab-on-banner .banner .btext{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;gap:0 10px}
html.lab-on-banner .banner .btext h2{grid-column:1;white-space:nowrap}
html.lab-on-banner .banner .bsum{display:contents}
html.lab-on-banner .banner .bsum .split{display:none}
html.lab-on-banner .banner .bsum .spec,html.lab-on-banner .banner .bsum .hint{grid-column:1/-1;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html.lab-on-banner .banner .bsum .lab-complete{grid-column:2;grid-row:1;margin:0}
html.lab-on-banner .banner .bguide{grid-column:1/-1}
@container (min-width:800px){html.lab-on-banner .banner .btext{flex:0 1 auto;max-width:calc(50cqw - 226px)}html.lab-on-banner .banner .bbars{width:calc(50cqw - 200px);max-width:250px}}
@container (min-width:800px) and (max-width:1100px){html.lab-on-banner .banner .bguide span{display:none}}
html.lab-on-banner .banner .bguide.soon span{font-size:0}
html.lab-on-banner .banner .bguide.soon span::after{content:"soon";font-size:12px}
@container (max-width:799.9px){html.lab-on-banner .banner .bsite{display:none}html.lab-on-banner .banner .bbars{width:190px}}
}

/* racials, the closer read: click a line and its panel opens under that row of cards, pointing at the line it came from */
.lr-card li{position:relative;transition:background .1s}
.lr-card li:active{background:#303030}
.lr-card li.sel{background:#2b2718;box-shadow:inset 2px 0 0 var(--gold)}
.lr-card li.sel b{color:#ffd75e}
.lab-races.reading .lr-card li:not(.sel){opacity:.72}
.lab-races.reading .lr-card li:not(.sel):hover{opacity:1}
.lr-tiphint{margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:#9a9a9a}
.lr-deep{--fc:#c0392b;grid-column:1/-1;position:relative;box-sizing:border-box;margin:2px 0 4px;padding:14px 16px 14px;border-radius:4px;background:#1d1b14;box-shadow:inset 0 0 0 1px #4a4020,inset 0 2px 0 var(--gold2)}
.lr-deep.alliance{--fc:#2f6fd0}
.lr-deep::before{content:"";position:absolute;top:-6px;left:var(--nx,40px);width:10px;height:10px;transform:rotate(45deg);background:#1d1b14;box-shadow:inset 1px 1px 0 var(--gold2)}
.lr-deep header{display:flex;align-items:center;gap:12px}
.lr-deep header img{width:44px;height:44px;flex:none;border-radius:5px;border:1px solid #000;box-shadow:0 0 0 1px var(--gold2)}
.lr-deep h4{margin:0;font-family:Cinzel,Georgia,serif;font-size:18px;letter-spacing:.03em;color:#ffd75e;line-height:1.15}
.lr-deep header small{display:block;margin-top:2px;font-size:12px;color:var(--ink2)}
.lrd-x{margin-left:auto;align-self:flex-start;width:30px;height:30px;border:0;border-radius:4px;background:#2a2a2a;color:var(--ink2);font-size:20px;line-height:1;cursor:pointer}
.lrd-x:hover,.lrd-x:focus-visible{background:#3a3a3a;color:#fff;outline:0;box-shadow:inset 0 0 0 1px var(--gold2)}
.lrd-facts{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.lrd-facts div{min-width:84px;padding:5px 10px 6px;border-radius:4px;background:#141414;box-shadow:inset 0 0 0 1px #333}
.lrd-facts dt{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lrd-facts dd{margin:1px 0 0;font-size:14px;font-weight:700;color:var(--gold)}
.lrd-text{margin-top:12px;max-width:760px}
.lrd-text p{margin:0 0 5px;font-size:14px;line-height:1.5;color:#e2e2e2}
.lrd-text p b,.lrd-row b{color:#fff;font-weight:700}
.lrd-more{margin-top:10px;padding-top:10px;border-top:1px solid #38321c;display:grid;gap:6px;max-width:760px}
.lrd-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.45;color:var(--ink2)}
.lrd-row>span:first-child{color:var(--muted)}
.lrd-row.was>span:last-child{color:#a9a9a9}
.lrd-lv{display:flex;flex-wrap:wrap;gap:4px}
.lrd-lv i{font-style:normal;min-width:22px;text-align:center;padding:0 5px;border-radius:3px;background:#141414;box-shadow:inset 0 0 0 1px #333;color:var(--ink);font-weight:700;font-size:12px;line-height:20px}
@media (max-width:820px){.lr-deep{padding:12px}.lr-deep h4{font-size:16px}.lrd-row{grid-template-columns:1fr;gap:1px}.lrd-facts div{min-width:0;flex:1 1 40%}}
@media (prefers-reduced-motion:reduce){.lr-card li{transition:none}}
/* the foot's What's new: the last words of its own sentence, a link like the others in the panel, with the small dot that says there is news */
.lab-foot .lf-steps li>div{display:block}
.lab-foot .lf-steps li>div>b{display:block}
.lab-foot .lf-steps li>div>span{display:inline}
.lab-foot .wnpill{display:inline;align-self:auto;height:auto;margin:0 0 0 .3em;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;font-weight:600;line-height:inherit;color:var(--gold2);border-bottom:1px solid #5a4614;white-space:nowrap}
.lab-foot .wnpill:hover,.lab-foot .wnpill:focus-visible{color:var(--gold);border-bottom-color:var(--gold2);outline:0}
.lab-foot .wnpill i{display:inline-block;width:5px;height:5px;margin:0 0 0 5px;vertical-align:middle;box-shadow:none;animation:none}
.lf-chips small{font-size:9.5px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-chips b{font-size:12.5px;white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.25}

/* a race's class-only spells sit behind a bar on every class's page: open where the class is yours, closed (and countable) elsewhere */
.lr-card h5{padding:0}
.lr-fold{display:flex;align-items:center;gap:6px;width:100%;padding:6px 10px 5px;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left;cursor:pointer}
.lr-fold:hover,.lr-fold:focus-visible{background:#2b2616;outline:0}
.lr-fold span{min-width:0}
.lr-fold small{margin-left:auto;min-width:16px;padding:0 4px;border-radius:8px;background:#141414;box-shadow:inset 0 0 0 1px #4a4020;color:var(--ink2);font-size:10px;line-height:16px;text-align:center;letter-spacing:0}
.lr-fold i{width:7px;height:7px;margin:0 2px 2px 4px;border-right:2px solid var(--gold2);border-bottom:2px solid var(--gold2);transform:rotate(45deg);transition:transform .12s}
.lr-fold[aria-expanded="true"] i{transform:rotate(-135deg);margin-bottom:-3px}
.lr-fold[aria-expanded="false"]{color:#b9a15a}
.lr-card ul[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.lr-fold i{transition:none}}
/* race cards: one width and one height across both factions, and a long name wraps between words, never inside one */
.lr-fac{display:flex;flex-direction:column}
.lr-cards{flex:1}
.lr-card li b{overflow-wrap:normal;word-break:normal;hyphens:none}
.lr-card li{grid-template-columns:30px minmax(0,1fr) auto}
.lr-card li i{justify-self:end}
@media (max-width:1000px){.lab-races{grid-template-columns:1fr!important}}
/* the two asks: the button answers the pointer and the press, and the picture beside it wakes with it */
.lf-ask .lpill{transition:background .12s,color .12s,box-shadow .12s,transform .08s}
.lf-ask:hover img:not(.gob){box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold2)}
.lf-ask img.gob{transition:transform .15s;transform-origin:50% 100%}
.lf-ask:hover img.gob{transform:scale(1.06)}
.lf-ask .lpill:hover,.lf-ask .lpill:focus-visible{background:var(--gold);color:#1a1400;box-shadow:inset 0 0 0 1px #6b4a12,0 2px 10px rgba(0,0,0,.5);outline:0}
.lf-ask .lpill:active{transform:translateY(1px) scale(.98);background:#d9a93a;box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.lf-ask .lpill,.lf-ask img.gob{transition:none}.lf-ask:hover img.gob{transform:none}.lf-ask .lpill:active{transform:none}}
/* spellbook, warmer and rounder (the game's two books, old and new, put together): soft corners on the cover, the page and the tabs,
   a page toasted at its edges, no studs. The turning leaf wears the same page, so the swap stays exact. */
html.lab-on-book .bookcover{--pgr:14px;--pgbg:linear-gradient(90deg,rgba(60,30,8,.34),rgba(60,30,8,.08) 5%,transparent 12%),radial-gradient(120% 100% at 50% 40%,rgba(255,238,190,.35),transparent 62%),#ddc18a;--pgsh:inset 0 0 0 1px rgba(70,40,12,.4),inset 0 0 22px 5px rgba(128,76,24,.42),inset 0 0 80px rgba(110,66,20,.3);
  border-radius:18px;padding:14px 0 14px 14px;background:linear-gradient(180deg,#402716,#2a170c);box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 0 1px #160b05,inset 0 0 0 2px #7a5a2c,inset 0 0 0 3px #160b05,inset 0 1px 0 3px rgba(255,220,150,.06)}
html.lab-on-book .bookcover::before,html.lab-on-book .bookcover::after{display:none}
html.lab-on-book .page{border-radius:var(--pgr);background:var(--pgbg);box-shadow:var(--pgsh)}
html.lab-on-book .page::after,html.lab-on-book .lfw::after{inset:11px 13px 11px 15px;border:1px solid rgba(110,70,24,.26);border-radius:9px;box-shadow:none}
html.lab-on-book .lfw{border-radius:var(--pgr);background:linear-gradient(90deg,transparent calc(50% - 35px),rgba(70,40,10,.14) calc(50% - 7px),rgba(70,40,10,.32) 50%,rgba(70,40,10,.14) calc(50% + 7px),transparent calc(50% + 35px)),var(--pgbg);box-shadow:var(--pgsh)}
html.lab-on-book .lfw::before{border-radius:var(--pgr)}
html.lab-on-book .page::before{border-radius:var(--pgr)}
html.lab-on-book .btab{border-radius:0 11px 11px 0}
html.lab-on-book .btab img{border-radius:8px}
html.lab-on-book .btab span{border-radius:6px}
html.lab-on-book .sgrid li{border-radius:8px}
html.lab-on-book .sgrid .ico,html.lab-on-book .sgrid .ico img,html.lab-on-book .sgrid .ico::after{border-radius:7px}
html.lab-on-book .sgrid .lv i{border-radius:4px}
html.lab-on-book .sgrid .tal{border-radius:4px}
html.lab-on-book .pgfoot button{border-radius:9px;background:linear-gradient(180deg,#3a2413,#26160b);box-shadow:0 0 0 1px #160b05,0 0 0 2px #8a6a30,0 1px 3px rgba(0,0,0,.45)}
html.lab-on-book .pgfoot button:hover:not(:disabled){background:linear-gradient(180deg,#4a2f18,#301c0e)}
@media (max-width:760px){html.lab-on-book .bookcover{border-radius:14px;padding:12px 12px 0}html.lab-on-book .btab{border-radius:9px 9px 0 0}}
/* What's new is the one chip that is always there: it wears the same round icon and ring as its neighbours, and a thin rule sets it
   apart from the ones that come and go, so its place at the end reads as meant */
@media (min-width:481px){
html.lab-on-chips .masthead .whatsnew{position:relative;box-sizing:border-box;min-height:32px;margin-left:26px;padding:2px 14px 2px 4px;gap:8px;background:#26231a;box-shadow:inset 0 0 0 1px #6b5a2a;transition:background .12s,box-shadow .12s,color .12s}
html.lab-on-chips .masthead .whatsnew::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:#000 url(/assets/icons/inv_scroll_03.jpg?i=2) center/120% no-repeat;box-shadow:0 0 0 1.5px #d9b24a,0 2px 6px rgba(0,0,0,.5)}
html.lab-on-chips .masthead .whatsnew::after{content:"";position:absolute;left:-14px;top:50%;width:1px;height:22px;margin-top:-11px;background:linear-gradient(180deg,transparent,#5a4a1e 25%,#5a4a1e 75%,transparent);pointer-events:none}
html.lab-on-chips .masthead .whatsnew:hover,html.lab-on-chips .masthead .whatsnew:focus-visible{background:#332d1e;box-shadow:inset 0 0 0 1px var(--gold2);color:#ffe58a;outline:0}
html.lab-on-chips .masthead .whatsnew:active{transform:translateY(1px)}
html.lab-on-chips .masthead .whatsnew[aria-expanded="true"]{background:#3a3323;box-shadow:inset 0 0 0 1px var(--gold)}
}
/* class and spec effects in the banner: under the words, over the art */
.banner>canvas.lab-aura{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* race cards lift as you come to them */
.lr-card{transition:transform .14s ease-out,box-shadow .14s ease-out}
.lr-card header img{transition:box-shadow .14s,transform .14s}
@media (hover:hover){
.lr-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc) 55%,#2e2e2e),inset 0 3px 0 var(--fb),0 10px 22px rgba(0,0,0,.55)}
.lr-card:hover header img{transform:scale(1.05);box-shadow:0 0 0 2px #fff3c0,0 0 0 4px var(--fb),0 6px 14px rgba(0,0,0,.6)}
.lr-card.no:hover{opacity:.7}
}
@media (prefers-reduced-motion:reduce){.lr-card,.lr-card header img{transition:none}.lr-card:hover{transform:none}.lr-card:hover header img{transform:none}}

/* phones: all nine classes on one row, by their icons, nothing to scroll; the chosen one is named in the banner under it */
@media (max-width:820px){
html.lab-on-classrow .classes{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;overflow:visible;padding:8px;-webkit-mask-image:none;mask-image:none;scroll-snap-type:none}
html.lab-on-classrow .classes a{flex:none;justify-content:center;padding:4px 0;min-width:0;scroll-snap-align:none}
html.lab-on-classrow .classes a img{width:100%;max-width:34px;height:auto;aspect-ratio:1;border-radius:5px}
html.lab-on-classrow .classes a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
html.lab-on-classrow .classes a[aria-pressed="true"]{background:#4a4229;box-shadow:inset 0 0 0 1.5px var(--gold)}
}
/* phones: Build complete takes its own line under the spec, clear of it */
@media (max-width:900px){.banner .bsum{row-gap:3px}.banner .bsum .lab-complete{order:9;margin:0;line-height:18px}}
/* phones: the section bar keeps to its links, a thumb high, and the way home is the book alone at its right end */
@media (max-width:820px){
.lab-sections{padding:2px 0 2px 4px;gap:0;font-size:13.5px;touch-action:pan-x;overscroll-behavior-x:contain;overflow-y:hidden}   /* a thumb sliding along the bar moves the bar only, never the page under it */
.lab-sections button:last-of-type{margin-right:40px}   /* room to slide the last link out from under the book */
.lab-sections button{padding:9px 11px}
.lab-sections .lab-site{font-size:0;letter-spacing:0;gap:0;padding:4px 10px 4px 22px;background:linear-gradient(90deg,transparent,rgba(20,20,20,.98) 18px)}
.lab-sections .lab-site img{width:26px;height:26px}
}
@media (max-width:820px){.lab-sections{background:#151515;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* the portrait answers: it leans in with a nod, its ring lights, the name warms */
.lf-me>img{transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s;transform-origin:50% 90%}
@media (hover:hover){
.lf-me>img:hover{animation:lfnod .7s cubic-bezier(.3,.6,.3,1) both;box-shadow:0 0 0 2px #000,0 0 0 4px var(--gold),0 0 0 5px #3a2a08,0 0 18px rgba(255,209,0,.35),0 8px 18px rgba(0,0,0,.5)}
.lf-me:has(>img:hover) h3,.lf-me:has(>img:hover) b{color:#fff1c2}
}
.lf-me>img:active{transform:scale(.97)}
@keyframes lfnod{0%{transform:none}30%{transform:scale(1.12) rotate(-5deg)}55%{transform:scale(1.1) rotate(4deg)}78%{transform:scale(1.09) rotate(-1.5deg)}100%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.lf-me>img{transition:none}.lf-me>img:hover{animation:none}}

/* Racials: the checkbox as a two-way switch. Each side says what it shows and how many. */
.racials .rh.lab-segon>label,.racials .rh.lab-segon>.cnt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lab-seg{display:inline-flex;padding:2px;border-radius:6px;background:#141414;box-shadow:inset 0 0 0 1px #3a3a3a}
.lab-seg button{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:0;border-radius:4px;background:none;color:var(--ink2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.lab-seg button:hover{color:#fff}
.lab-seg button small{min-width:18px;padding:1px 5px;border-radius:9px;background:#2c2c2c;color:var(--muted);font-size:11px;font-weight:700;text-align:center}
.lab-seg button[aria-pressed="true"]{background:#3a3217;color:var(--gold2);box-shadow:inset 0 0 0 1px #6b5a2a}
.lab-seg button[aria-pressed="true"] small{background:var(--gold2);color:#1a1608}
.lab-seg button:active{transform:translateY(1px)}
.lab-seg button:focus-visible{outline:2px solid var(--gold2);outline-offset:1px}
@media (max-width:520px){.lab-seg{width:100%}.lab-seg button{flex:1;justify-content:center;padding:7px 6px}}