/* Class guide page (/<class>/changes). Site tokens come from index.html's head; everything here is prefixed gd- so it never
   touches the calculator's rules. Game icons, the site's tree backgrounds, Cinzel for titles, Open Sans for text, no gradients.
   The chapter cards borrow the video's plates: Classic on a grey edge, Forever on a gold edge, red strike, green ink. */
body.gd .masthead .tag{font-size:15px;color:var(--ink2);margin:0}
@media (max-width:640px){body.gd .masthead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}body.gd .masthead .tag{display:none}body.gd .masthead .whatsnew{margin:0;padding:7px 12px;font-size:12.5px;white-space:nowrap}body.gd .masthead .brand{font-size:19px}}
body.gd .masthead .tag b{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* the chapter bar: one line, where you are, the places (a strip on wide screens, a menu on narrow ones), the way back */
.gd-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;margin:6px -16px 0;padding:8px 16px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.gd-bar-home{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:13px;letter-spacing:.04em;color:#ffd75e;text-decoration:none;white-space:nowrap}
.gd-bar-home b{color:var(--cc,#ffd75e);text-shadow:0 0 10px color-mix(in srgb,var(--cc,#ffd75e) 55%,transparent)}
.gd-eyebrow b{color:var(--cc,#ffd75e);font-weight:700}
.gd-bar-now{flex:1;min-width:0;font-size:13.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-bar-now::before{content:"·";margin-right:10px;color:var(--muted)}
.gd-bar-menu{position:relative}
.gd-bar-menu summary{list-style:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink);padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);white-space:nowrap}
.gd-bar-menu summary::-webkit-details-marker{display:none}
.gd-bar-menu summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg) translateY(-2px)}
.gd-bar-menu[open] summary{border-color:var(--gold)}
.gd-bar-menu ol{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;min-width:240px;list-style:none;background:#141416;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.6)}
.gd-bar-menu ol{min-width:260px;padding:8px}
.gd-bar-menu li a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink);text-decoration:none;--tc:#ffd75e}
.gd-bar-menu li a img{width:26px;height:26px;border-radius:6px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}
.gd-bar-menu li a:hover{background:var(--panel2);color:var(--tc)}
.gd-bar-menu li a[style] span{color:var(--tc)}
.gd-bar-menu li a[aria-current]{background:var(--panel2);box-shadow:inset 3px 0 0 var(--tc)}
.gd-bar-menu li a[aria-current] span{color:var(--tc)}
/* the strip: every place in one row on wide screens (the menu is its compact form), the one you are in lit in its colour, and under
   it the line that fills through the chapter you are in (the whole bar and the page where the strip is hidden) */
.gd-strip{display:none;align-items:center;gap:2px;margin:0;padding:0;list-style:none;flex:none}
.gd-strip a{position:relative;display:flex;align-items:center;gap:6px;height:30px;padding:0 9px 0 5px;border-radius:8px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;--tc:#ffd75e}
.gd-strip img{width:20px;height:20px;border-radius:5px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a;opacity:.7;filter:saturate(.6)}
.gd-strip a:hover{color:var(--ink)}
.gd-strip a:hover img,.gd-strip a[aria-current] img{opacity:1;filter:none}
.gd-strip a[aria-current]{color:var(--tc);background:color-mix(in srgb,var(--tc) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 40%,transparent)}
.gd-strip a[aria-current] img{box-shadow:0 0 0 1px var(--tc)}
.gd-strip a:focus-visible,.gd-back:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.gd-prog{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--pc,#ffd75e);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@media (min-width:861px){.gd-strip{display:flex}.gd-bar-menu{display:none}}
@media (min-width:861px) and (max-width:1179px){.gd-strip a{padding:0 5px}.gd-strip span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .gd-strip a:hover span,.gd-strip a:focus-visible span{width:auto;height:auto;overflow:visible;clip-path:none;top:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:6px;background:#141416;border:1px solid var(--line);color:var(--ink);font-size:12px;box-shadow:0 8px 20px rgba(0,0,0,.5);pointer-events:none;z-index:2}}
/* the way back: a tab that hangs from the bar after a link moved the page far, with an arrow drawn here, not a font */
.gd-back{position:absolute;left:16px;top:calc(100% + 1px);display:flex;align-items:center;gap:8px;margin:0;padding:5px 13px 6px 11px;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;opacity:0;transform:translateY(-5px);transition:opacity .2s,transform .2s,border-color .15s}
.gd-back.on{opacity:1;transform:none}
.gd-back[hidden]{display:none}
.gd-back:hover{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.gd-back i{position:relative;flex:none;width:10px;height:12px}
.gd-back i::before{content:"";position:absolute;left:1px;top:1px;width:6px;height:6px;border-left:2px solid var(--gold);border-top:2px solid var(--gold);transform:rotate(45deg)}
.gd-back i::after{content:"";position:absolute;left:4px;top:2px;width:2px;height:10px;border-radius:1px;background:var(--gold)}
.gd-back.down i{transform:rotate(180deg)}
html.gd-backon{scroll-padding-top:34px}
@media (max-width:640px){html.gd-backon{scroll-padding-top:92px}}   /* the bar and the Back tab take about 85 px on a phone: a chapter lands below them (audit 3 Oct F90) */
@media (prefers-reduced-motion:reduce){.gd-back{transition:none;transform:none}}
.gd-more{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.gd-bigfold{margin:14px 0 0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.gd-bigfold>summary{display:flex;align-items:baseline;gap:12px;padding:14px 18px;cursor:pointer;list-style:none}
.gd-bigfold>summary::-webkit-details-marker{display:none}
.gd-bigfold>summary h2{font-size:20px}
.gd-mini{display:inline-flex;flex-wrap:wrap;gap:6px}
.gd-mini i{font-style:normal;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--c,#555);color:var(--c,#bbb);--c:#bbb}
.gd-mini i.new{--c:#4ade80}.gd-mini i.changed{--c:#fbbf24}.gd-mini i.moved{--c:#60a5fa}.gd-mini i.gone{--c:#f08080}.gd-mini i.rw{--c:#c39bff}.gd-mini i.num{--c:#8bd3ff}.gd-mini i.same{--c:#999}
.gd-fold>summary b{color:var(--tc,var(--ink))}
.gd-was b,.gd-now b{display:inline-block;min-width:58px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gd-now b{color:#c9a227}
.gd-bigfold>summary small{font-size:13px;color:var(--muted)}
.gd-bigfold>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .25s}
.gd-bigfold[open]>summary::after{transform:rotate(-135deg)}
.gd-bigfold>*:not(summary){margin-left:18px;margin-right:18px}
.gd-bigfold>.gd-sub{margin-top:0}
.gd-bigfold>:last-child{margin-bottom:16px}
.gd-more h2{margin:0;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:24px;color:#ffd75e}
/* folds: one line closed, the list inside when open */
.gd-fold{margin:12px 0 0;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.gd-fold>summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;font-size:15px;color:var(--ink)}
.gd-fold>summary::-webkit-details-marker{display:none}
.gd-fold>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .25s}
.gd-fold[open]>summary::after{transform:rotate(-135deg)}
.gd-fold>summary img{width:28px;height:28px;border-radius:6px;border:1px solid #000}
.gd-fold>summary small{font-weight:400;font-size:13px;color:var(--muted)}
.gd-fold>.gd-entries,.gd-fold>.gd-hrows,.gd-fold>.gd-none,.gd-fold>.gd-same{margin:0 12px 12px}
.gd-fold .gd-entry{background:#141416}
/* the landing: the class and the figure on the yard, then the tally along the bottom like the game's bars: what the page counts,
   each plate carrying the icons of what it counts in the ledger's colours, a link into the ledger, named in a game tooltip */
.gd-head{position:relative;margin:14px 0 0;padding:38px 32px 20px;border-radius:16px;border:1px solid #2c2c2c;background:#0e0e10;overflow:hidden;isolation:isolate;min-height:480px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto}
.gd-head::before{content:"";position:absolute;inset:0;background:var(--chbg) center/cover no-repeat;opacity:.22;filter:saturate(1.1);z-index:0}
.gd-head::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,9,11,.9) 0,rgba(9,9,11,.55) 26%,rgba(9,9,11,0) 48%),radial-gradient(60% 80% at 80% 45%,rgba(120,60,40,.42) 0,rgba(14,14,16,0) 62%),linear-gradient(to right,rgba(10,10,12,.92) 0,rgba(10,10,12,.7) 48%,rgba(10,10,12,.12) 100%);z-index:0}
.gd-hero{position:absolute;right:var(--hero-r,3%);top:var(--hero-t,-10px);bottom:auto;height:var(--hero-h,520px);width:auto;z-index:1;filter:drop-shadow(0 20px 30px rgba(0,0,0,.75));pointer-events:none}
.gd-headtext{position:relative;z-index:2;align-self:center;max-width:640px;padding:0 0 30px}
.gd-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:12px;letter-spacing:.16em;white-space:nowrap;text-transform:uppercase;font-weight:700;color:#ffd75e}
.gd-eyebrow img{width:28px;height:28px;border-radius:7px;border:1px solid #000;box-shadow:0 0 0 1px #6a5a1c,0 0 12px rgba(255,209,0,.3)}
.gd-eyebrow i{flex:none;width:5px;height:5px;background:#ffd75e;opacity:.6;transform:rotate(45deg)}
.gd-title{margin:0;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.05;color:#ffd75e;text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 30px rgba(255,209,0,.18)}
.gd-lede{margin:14px 0 0;max-width:34em;font-size:18px;line-height:1.45;color:#e8e8e8;text-shadow:0 1px 4px #000}
/* the tally: the talents group and the spellbook group, every plate the same width */
.gd-tally{position:relative;z-index:3;display:grid;gap:14px;max-width:min(760px,calc(100% - 340px))}
.gd-tgroup{min-width:0}
.gd-thead{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-size:12.5px;color:var(--ink2);text-shadow:0 1px 3px #000;white-space:nowrap}
.gd-thead a{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ffd75e;text-decoration:none}
.gd-thead a:hover{text-decoration:underline}
.gd-thead b{color:var(--ink)}
.gd-tplates{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.gd-tplates li{min-width:0}
.gd-tal{position:relative;display:grid;width:100%;font:inherit;text-align:left;cursor:pointer;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;row-gap:9px;height:100%;box-sizing:border-box;padding:9px 11px 11px;border-radius:8px;background:rgba(10,10,12,.9);border:1px solid #2e2e33;box-shadow:inset 0 -2px 0 var(--sc),0 8px 22px rgba(0,0,0,.5);color:var(--ink);text-decoration:none;--sc:#888;transition:border-color .2s,transform .2s}
.gd-tal.new{--sc:#4ade80}.gd-tal.changed{--sc:#fbbf24}.gd-tal.moved{--sc:#60a5fa}.gd-tal.gone{--sc:#f08080}.gd-tal.rw{--sc:#c39bff}.gd-tal.num{--sc:#8bd3ff}
.gd-tal:hover,.gd-tal:focus-visible{border-color:color-mix(in srgb,var(--sc) 55%,#2e2e33);transform:translateY(-2px)}
.gd-tal:focus-visible{outline:2px solid #ffd75e;outline-offset:2px}
.gd-tal-n{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:26px;line-height:1;color:var(--sc);font-variant-numeric:lining-nums tabular-nums;text-shadow:0 0 14px color-mix(in srgb,var(--sc) 35%,transparent)}
.gd-tal-l{font-size:11px;line-height:1.15;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#e6e6e6}
.gd-fan{grid-column:1/-1;display:flex;align-items:center;min-width:0}
.gd-fan img,.gd-fan i{flex:none;width:28px;height:28px;margin-left:-8px;border-radius:5px;border:1px solid #000;box-shadow:0 0 0 1.5px #0b0b0d;transition:margin .2s}
.gd-fan>:first-child{margin-left:0}
.gd-fan i{display:grid;place-items:center;box-sizing:border-box;font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink2);background:#1a1a1e;border-color:#3a3a40}
.gd-fan i.more{width:auto;min-width:28px;padding:0 6px;margin-left:5px}
.gd-tal.gone .gd-fan img{filter:grayscale(.6) brightness(.8);border:1px dashed #c97a7a}
.gd-tal:hover .gd-fan img+img,.gd-tal:focus-visible .gd-fan img+img{margin-left:-4px}
/* the game tooltip: dark blue-black, a light rim, the names in gold, the use line in green */
.gd-headfoot{position:relative;z-index:2}
.gd-stamp{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.gd-stamp b{color:var(--ink2)}
/* a plate's rows in the ledger, marked for a moment on arrival */
.gd-entry{--hc:#ffd75e}.gd-entry.new{--hc:#4ade80}.gd-entry.changed{--hc:#fbbf24}.gd-entry.moved{--hc:#60a5fa}.gd-entry.gone{--hc:#f08080}.gd-entry.rw{--hc:#c39bff}.gd-entry.num{--hc:#8bd3ff}
.gd-entry.gd-lit{animation:gdHit 2.8s ease-out forwards}
@keyframes gdHit{0%,50%{box-shadow:0 0 0 2px var(--hc),0 0 18px color-mix(in srgb,var(--hc) 30%,transparent)}100%{box-shadow:0 0 0 2px transparent}}
.gd-counts{display:block;margin-top:4px;color:var(--ink2)}
.gd-since{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--gold);background:var(--panel);font-size:14px;color:var(--ink)}
.gd-since[hidden]{display:none}
.gd-sec{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line);scroll-margin-top:56px}
/* a chapter is a card with the yard behind it, soft, the plates on top like the video's board */
.gd-ch{position:relative;margin:34px 0 0;padding:14px 14px 22px;border-radius:16px;border:1px solid #2c2c2c;background:#0e0e10;scroll-margin-top:56px;overflow:hidden;isolation:isolate}
.gd-ch::before{content:"";position:absolute;inset:0;background:var(--chbg) center/cover no-repeat;opacity:.16;z-index:0;pointer-events:none}
.gd-ch::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0,rgba(14,14,16,0) 0,rgba(14,14,16,.85) 70%);z-index:0;pointer-events:none}
.gd-ch>*{position:relative;z-index:1}
/* each tree's chapter has its own accent: the buff, the pips, the bolt and the target's glow take it */
.gd-ch{--ac:#7fc7ff}
.gd-ch[data-tree="fire"]{--ac:#ff9a5c}
.gd-ch[data-tree="arcane"]{--ac:#c39bff}
.gd-tracker{position:absolute;right:14px;top:12px;z-index:2;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:12px;letter-spacing:.06em;color:#ffd75e;text-shadow:0 1px 4px #000}
/* scroll-in: each block rises once */
.gd-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.gd-chapters>li.gd-reveal:nth-child(n){transition-delay:calc(var(--i,0) * 30ms)}
.gd-reveal.in{opacity:1;transform:none}
/* the chalk ring, drawn on when it scrolls in */
.gd-ringwrap{position:relative;display:inline-block;padding:0 3px}
.gd-ringwrap svg{position:absolute;left:-7px;top:-5px;width:calc(100% + 14px);height:calc(100% + 10px);overflow:visible;pointer-events:none}
.gd-ringwrap ellipse{fill:none;stroke:#ffd75e;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s ease-out .35s;filter:drop-shadow(0 0 3px rgba(255,209,0,.5))}
.gd-ringwrap.in ellipse{stroke-dashoffset:0}
/* the done line: the video's tracker tick */
.gd-done{display:flex;align-items:center;gap:10px;margin:26px 0 0}
.gd-tick{width:34px;height:34px;flex:none}
.gd-tick path{fill:none;stroke:#7ee787;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .6s ease-out .2s}
.gd-done.in .gd-tick path{stroke-dashoffset:0}
.gd-done .gd-chalk{font-size:26px;transform:rotate(-1deg)}
.gd-sec h2{margin:0;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:24px;color:#ffd75e}
.gd-sec h3{display:flex;align-items:center;gap:10px;margin:26px 0 10px;font-size:17px;font-weight:700;color:var(--ink)}
.gd-sec h3 img{width:28px;height:28px;border-radius:6px;border:1px solid #000}
.gd-sec h3 small{font-weight:400;font-size:13px;color:var(--muted)}
.gd-sec.gd-bigfold>h3{margin-left:18px;margin-right:18px}
.gd-sub{margin:8px 0 0;max-width:820px;font-size:15px;line-height:1.5;color:var(--ink2)}
.gd-fine{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.gd-fine .gd-finehead{display:inline;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.gd-fine a,.gd-sub a,.gd-refs a,.gd-top a{color:var(--gold)}
/* watch */
.gd-video{position:relative;margin:16px 0 0;aspect-ratio:16/9;max-width:960px;background:#000;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.gd-video video,.gd-video img,.gd-video iframe{display:block;width:100%;height:100%;object-fit:cover;border:0}
.gd-video-note{position:absolute;left:0;right:0;bottom:0;margin:0;padding:22px 14px 10px;font-size:13px;line-height:1.4;color:#eee;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0))}
.gd-video-note b{color:#ffd75e}
.gd-chapters{margin:10px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;max-width:960px}
.gd-chapters a{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-size:13.5px;color:var(--ink);text-decoration:none;--tc:#ffd75e}
.gd-chapters a img{width:22px;height:22px;border-radius:5px;border:1px solid #000}
.gd-chapters a:hover{border-color:var(--tc)}
.gd-ct{flex:none;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
.gd-cn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-chapters a[style] .gd-cn{color:var(--tc)}
/* chapter sections */
/* the chapter banner: the video's chapter card, the yard behind the title */
.gd-chhead{position:relative;display:flex;align-items:flex-end;min-height:400px;max-width:1040px;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.5);background:#0d0d0d}
.gd-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 0}
.gd-chhead::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.92) 0,rgba(8,8,10,.55) 45%,rgba(8,8,10,.05) 100%)}
.gd-chhead.figured{background:radial-gradient(90% 120% at 78% 40%,rgba(120,60,40,.55) 0,rgba(14,14,16,0) 60%),var(--chbg) center/cover no-repeat #0e0e10}
.gd-chhead.figured::after{background:linear-gradient(to right,rgba(8,8,10,.88) 0,rgba(8,8,10,.55) 40%,rgba(8,8,10,.1) 100%)}
.gd-figure{position:absolute;right:2%;bottom:-6%;height:118%;width:auto;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(0,0,0,.7));z-index:1}
.gd-figure.fig-hurl{height:100%;bottom:0;right:3%}
.gd-chhead.figured .gd-chtext{z-index:2}
.gd-chhead.figured.arted{background:var(--art) left center/cover no-repeat #0e0e10}
@media (min-resolution:1.5dppx){.gd-chhead.figured.arted[style*="--art2"]{background-image:var(--art2)}}
.gd-chtext{position:relative;z-index:1;min-width:0;padding:22px 24px}
.gd-chnum{margin:0 0 6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#ffd75e;text-shadow:0 1px 4px #000}
.gd-ch h2{margin:0;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:clamp(34px,5vw,56px);line-height:1;color:#ffd75e;text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 30px rgba(255,209,0,.18)}
.gd-kicker{margin:8px 0 0;font-size:17px;color:#e8e8e8;text-shadow:0 1px 6px #000}
/* a line the video says that a later build made untrue, right beside the chapter's player (its own class: .gd-since is the head's
   "Since you were here" line) */
.gd-chsince{margin:12px 0 0;max-width:46ch;padding:7px 11px;border-left:3px solid #ffd75e;border-radius:0 8px 8px 0;background:rgba(8,8,10,.62);font-size:13.5px;line-height:1.45;color:#e8e8e8}
.gd-chsince b{color:#ffd75e;font-weight:700}
/* under the Watch player: what a later build changed since the video was recorded (video.since in the class json); a light gold tint,
   there to be read, not to alarm */
.gd-vsince{margin:12px 0 0;padding:10px 14px;border:1px solid rgba(255,209,0,.32);border-radius:8px;background:rgba(255,209,0,.07);font-size:14px;line-height:1.45;color:var(--ink)}
.gd-vsince b{color:var(--gold);font-weight:700}
.gd-guild{margin:18px 0 0;max-width:960px}.gd-guild .sprow{color:inherit}   /* the partner card under the chapter list, as wide as the video */
.gd-rxpwrap{margin:18px 0}.gd-rxp .sprow{color:inherit}   /* the RestedXP card between chapters 1 and 2 */
@media (max-width:640px){.gd-rxp .spm{display:block;margin:2px 0 0;white-space:normal}}
.gd-vsince ul{margin:4px 0 0;padding-left:18px}
.gd-vsince li+li{margin-top:2px}
/* the presenter says it */
.gd-say{position:relative;max-width:900px;padding-left:34px}
.gd-face{position:absolute;left:0;top:50%;transform:translateY(-50%);width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #b8901f;box-shadow:0 0 0 3px #0b0b0d,0 6px 18px rgba(0,0,0,.6);z-index:1}
.gd-say .gd-lead{position:relative;margin:0;padding:12px 16px 12px 46px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:16px}
/* chalk: the board's handwriting */
.gd-chalk{font-family:Caveat,"Segoe Print","Comic Sans MS",cursive;font-weight:700;font-size:24px;line-height:1;color:#ffd75e;text-shadow:0 0 6px rgba(255,209,0,.35),0 1px 2px #000;letter-spacing:.01em;transform:rotate(-2deg);display:inline-block}
.gd-chalk-tag{position:absolute;right:8px;bottom:-16px;padding:0;background:none;font-size:22px;text-shadow:0 0 8px rgba(0,0,0,.95),0 1px 2px #000,0 0 6px rgba(255,209,0,.3)}
.gd-eq{position:absolute;left:50%;top:-14px;z-index:2;transform:translateX(-50%) rotate(-3deg);padding:0;background:none;opacity:0;transition:opacity .35s;text-shadow:0 0 8px rgba(0,0,0,.95),0 1px 2px #000,0 0 6px rgba(255,209,0,.3)}
.gd-twin.eq .gd-eq{opacity:1}
.gd-twin.eq .gd-big{text-decoration:underline;text-decoration-color:rgba(255,215,94,.85);text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-style:wavy}
.gd-watchpart{display:inline-block;margin-top:14px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;background:var(--panel)}
.gd-watchpart::before{content:"";display:inline-block;width:0;height:0;margin-right:8px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--gold);vertical-align:-1px}
.gd-watchpart:hover{border-color:var(--gold)}
.gd-beat{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:22px 0 0;max-width:1040px}
.gd-beat:has(.gd-aside){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"lead lead" "w aside" "take aside";grid-template-rows:auto auto 1fr}
.gd-beat:has(.gd-aside)>.gd-take-in{grid-area:take;align-self:start;margin:0;max-width:none}
.gd-beat:has(.gd-aside)>.gd-aside{align-self:start}
.gd-beat:has(.gd-aside)>.gd-lead,.gd-beat:has(.gd-aside)>.gd-say{grid-area:lead}.gd-beat:has(.gd-aside)>.gd-w{grid-area:w}.gd-beat:has(.gd-aside)>.gd-aside{grid-area:aside}
.gd-lead{margin:0;max-width:820px;font-size:17px;line-height:1.55;color:var(--ink)}
.gd-lead b{color:#ffd75e;font-weight:600}
.gd-short p b{color:#ffd75e;font-weight:600}
.gd-take{margin:26px 0 0;padding:14px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--tc,#ffd75e) 45%,#000);background:linear-gradient(135deg,color-mix(in srgb,var(--tc,#ffd75e) 14%,#0e0e10),#0e0e10 70%);max-width:820px}
.gd-take h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:Cinzel,Georgia,serif;font-size:16px;color:var(--tc,#ffd75e)}
.gd-take h3 img.sm{width:26px;height:26px;border-radius:6px;border:1px solid #000}
.gd-take ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 18px}
.gd-take li{position:relative;padding-left:16px;font-size:14.5px;color:var(--ink2)}
.gd-take li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--tc,#ffd75e);box-shadow:0 0 8px var(--tc,#ffd75e)}
.gd-take li b{color:var(--ink);font-weight:600}
.gd-done{display:none}
.gd-w{position:relative;padding:16px;background:rgba(20,20,22,.85);border:1px solid var(--line);border-radius:10px}
.gd-aside{padding:0;min-width:0}
.gd-shot,.gd-fig img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.gd-fof{display:block}
.gd-fig{margin:0}
.gd-fig figcaption{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
/* plates: the video's tooltip cards */
.gd-plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.gd-plate{position:relative;padding:12px 14px 12px;border-radius:8px;background:#0b0b0d;border:1px solid #4a4a4a;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.gd-plate.forever{border-color:#b8901f;box-shadow:0 0 0 1px rgba(255,209,0,.25),0 6px 18px rgba(0,0,0,.45)}
.gd-plate.maxed{opacity:.75}
.gd-plate-era{position:absolute;top:-9px;left:12px;margin:0;padding:0 6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#9a9a9a;background:#0b0b0d}
.gd-plate.forever .gd-plate-era{color:#ffd75e}
.gd-plate-head{display:flex;align-items:center;gap:8px;font-size:15px;color:#fff}
.gd-plate-head img.sm{width:24px;height:24px;border-radius:5px;border:1px solid #000}
.gd-plate-rank{margin-left:auto;font-size:13px;color:#cfcfcf;font-variant-numeric:tabular-nums}
.gd-plate.classic .gd-plate-head b,.gd-plate.classic .gd-plate-rank{color:#bdbdbd}
.gd-plate-lines{display:grid;grid-template-columns:1fr auto;margin:6px 0 0;font-size:13px;color:#e8e8e8}
.gd-plate-lines span:nth-child(even){text-align:right}
.gd-plate-body{margin:6px 0 0;font-size:14px;line-height:1.5;color:#ffd75e}
.gd-plate.classic .gd-plate-body{color:#c9c9c9}
.gd-plate-body del{color:#f0a0a0;text-decoration:line-through;text-decoration-color:rgba(240,120,120,.7)}
.gd-plate-body ins{color:#9be59b;text-decoration:none;background:rgba(80,200,80,.12);border-radius:2px}
.gd-plate-body mark{background:none;color:#ffd75e;box-shadow:inset 0 -2px 0 rgba(255,209,0,.8);border-radius:2px}
.gd-plate.forever .gd-plate-body mark{box-shadow:inset 0 -2px 0 rgba(255,209,0,.9);background:rgba(255,209,0,.08)}
/* the steppers */
.gd-ctl{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:14px 0 0;font-size:14px;color:var(--ink2)}
.gd-ctl label{font-weight:600;color:var(--ink)}
.gd-ctl output{display:inline-block;min-width:1.4em;margin-left:6px;padding:1px 8px;border-radius:6px;background:#000;border:1px solid var(--line);color:var(--gold);font-variant-numeric:tabular-nums;text-align:center}
.gd-w input[type=range]{flex:1;min-width:160px;height:28px;margin:0;accent-color:var(--gold);cursor:pointer;touch-action:pan-y}
.gd-twin{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 0}
.gd-twin>div{position:relative;padding:10px 12px 14px;border-radius:8px;border:1px solid #3a3a3a;background:#0b0b0d;text-align:center}
.gd-twin>.forever{border-color:#8a6d16}
.gd-twin>.forever.maxed{opacity:.75}
.gd-big{display:block;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:30px;line-height:1.1;color:#e8e8e8;font-variant-numeric:tabular-nums}
.gd-twin>.forever .gd-big{color:#ffd75e}
.gd-under{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.gd-pips{display:inline-flex;gap:5px;margin:4px 0 2px}
.gd-pips i{width:16px;height:16px;border-radius:50%;border:1px solid #555;background:#161616;transition:background .25s,border-color .25s,transform .25s}
.gd-pips i.on{background:var(--ac,#7fc7ff);border-color:color-mix(in srgb,var(--ac,#7fc7ff) 40%,#fff);box-shadow:0 0 8px color-mix(in srgb,var(--ac,#7fc7ff) 60%,transparent)}
.gd-pips i.off{border-style:dashed;opacity:.3}
.gd-twin>.forever .gd-pips i.on{background:#ffd75e;border-color:#fff1b8;box-shadow:0 0 8px rgba(255,215,94,.6)}
/* the loop */
.gd-loop{padding:0}
.gd-stagewrap{position:relative;min-height:230px;border-radius:8px;overflow:hidden;border:1px solid #333;background:#0b0b0d}
.gd-stagewrap::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(8,8,10,.55) 0,rgba(8,8,10,.35) 60%,rgba(8,8,10,.15) 100%)}
.gd-stage{position:relative;z-index:2;min-height:250px;padding:14px 16px 12px;display:flex;flex-direction:column;justify-content:center}
.gd-yard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:14px;margin-top:6px}
.gd-yardlabel{display:block;margin-top:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#bdbdbd;text-align:center;text-shadow:0 1px 3px #000}
.gd-caster{position:relative;text-align:center;padding-top:40px}
.gd-caster .gd-face{width:64px;height:64px;box-shadow:0 0 0 3px #0b0b0d,0 6px 18px rgba(0,0,0,.6)}
.gd-casterfig{display:block;height:150px;width:auto;margin:0 auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.7))}
.gd-stage.fly .gd-casterfig,.gd-stage.lancefly .gd-casterfig{animation:gdthrow .5s ease-out}
@keyframes gdthrow{0%{transform:translateX(-4px) rotate(-3deg)}60%{transform:translateX(6px) rotate(2deg)}100%{transform:none}}
.gd-stagewrap::after{content:"";position:absolute;inset:0;background:var(--chbg) center/cover no-repeat;opacity:.22;z-index:0}
.gd-face{object-position:50% 50%}
.gd-buff{position:absolute;left:50%;top:0;transform:translate(-50%,6px) scale(.6);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1.2);display:flex;align-items:center;gap:5px;padding:3px 6px 3px 3px;border-radius:8px;background:rgba(0,0,0,.75);border:1px solid var(--ac,#7fc7ff);box-shadow:0 0 14px color-mix(in srgb,var(--ac,#7fc7ff) 55%,transparent)}
.gd-buff img.sm{width:26px;height:26px;border-radius:5px;border:1px solid #000}
.gd-buff .gd-charges{display:inline-flex;gap:3px}
.gd-buff .gd-charges i{width:9px;height:9px;border-radius:50%;background:var(--ac,#7fc7ff);box-shadow:0 0 6px color-mix(in srgb,var(--ac,#7fc7ff) 80%,transparent)}
.gd-timer{position:absolute;inset:-4px;border-radius:10px;padding:0;background:conic-gradient(color-mix(in srgb,var(--ac,#7fc7ff) 55%,transparent) var(--left,100%),transparent 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;pointer-events:none}
.gd-stage.proc .gd-buff{opacity:1;transform:translate(-50%,0) scale(1)}
.gd-stage.proc .gd-timer{animation:gdtimer 15s linear forwards}
@keyframes gdtimer{from{--left:100%}to{--left:0%}}
.gd-lane{position:relative;height:64px;align-self:center;border-bottom:1px dashed rgba(255,255,255,.18)}
.gd-bolt{position:absolute;left:0;top:14px;opacity:0;transform:translateX(0);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--ac,#7fc7ff) 90%,transparent))}
.gd-bolt img.sm{width:32px;height:32px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ac,#7fc7ff) 75%,#fff)}
.gd-bolt.lance img.sm{border-color:color-mix(in srgb,var(--ac,#7fc7ff) 35%,#fff)}
.gd-stage.fly .gd-bolt:not(.lance){animation:gdfly .9s cubic-bezier(.3,0,.7,1) forwards}
.gd-stage.lancefly .gd-bolt.lance{animation:gdfly .55s cubic-bezier(.3,0,.7,1) forwards}
@keyframes gdfly{0%{opacity:0;transform:translateX(0) scale(.7)}12%{opacity:1;transform:translateX(0) scale(1)}90%{opacity:1}100%{opacity:0;transform:translateX(calc(100% * var(--lanew,10)) )}}
.gd-lanenote{position:absolute;left:50%;top:-8px;transform:translateX(-50%) rotate(-2deg);font-size:20px;white-space:nowrap;opacity:0;transition:opacity .4s}
.gd-stage.note .gd-lanenote{opacity:1}
.gd-target{position:relative;text-align:center;width:120px;padding-right:4px}
.gd-dummyfig{display:block;height:150px;width:auto;margin:0 auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.7));transition:filter .6s}
.gd-stage.chilled .gd-dummyfig{filter:sepia(.5) hue-rotate(165deg) saturate(1.4) brightness(1.02) drop-shadow(0 0 10px rgba(127,199,255,.6))}
.gd-stage.frozen .gd-dummyfig{filter:sepia(.7) hue-rotate(170deg) saturate(1.8) brightness(1.25) contrast(.95) drop-shadow(0 0 16px rgba(200,236,255,.95))}
.gd-state{position:absolute;right:0;top:-14px;white-space:nowrap;font-family:Caveat,cursive;font-weight:700;font-size:21px;color:color-mix(in srgb,var(--ac,#7fc7ff) 75%,#fff);text-shadow:0 1px 3px #000;opacity:0;transition:opacity .4s}
.gd-stage.chilled .gd-state,.gd-stage.frozen .gd-state,.gd-stage.burn .gd-state{opacity:1}
.gd-stage.frozen .gd-state{color:#eaf7ff}
/* Fire: the target burns instead of chilling, the crit rocks it, and Pyroblast's cast bars run to scale under the yard */
.gd-stage.burn .gd-dummyfig{filter:sepia(.7) saturate(3) hue-rotate(-14deg) brightness(.98) contrast(1.05) drop-shadow(0 0 16px rgba(255,120,30,.9))}
.gd-stage.critflash .gd-dummyfig{animation:gdcritpop .6s ease-out .8s}
@keyframes gdcritpop{0%{transform:none}30%{transform:scale(1.07) rotate(-2deg)}60%{transform:scale(.98) rotate(1.5deg)}100%{transform:none}}
.gd-stage.pyrofly .gd-bolt.lance{animation:gdfly .6s cubic-bezier(.3,0,.7,1) forwards}
.gd-stage.casting .gd-casterfig{animation:none}
.gd-castbars{margin:12px 0 0;display:grid;gap:5px}
.gd-castbars:empty{display:none}
.gd-cast2{grid-template-columns:78px 1fr auto}
.gd-cast2 .gd-slowbar{background:#111;border-color:#3a3a3a;height:24px}
.gd-cast2 .prog{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w) * 1%);transform-origin:left;transform:scaleX(0);background:repeating-linear-gradient(115deg,#8f8f8f 0 3px,#5c5c5c 3px 6px)}
.gd-cast2.forever .prog{background:repeating-linear-gradient(115deg,#ffb36b 0 3px,#d9702a 3px 6px)}
.gd-cast2 .cut{position:absolute;left:calc(var(--w) * 1%);right:0;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(240,120,120,.5) 0 2px,transparent 2px 6px);border-left:1px solid #f08080}
.gd-cast2.classic .cut{display:none}
.gd-cast2 .q{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35);z-index:1}
.gd-cast2 .q:nth-of-type(1){left:25%}.gd-cast2 .q:nth-of-type(2){left:50%}.gd-cast2 .q:nth-of-type(3){left:75%}
.gd-cast2.run .prog{animation:gdprog var(--sec) linear .3s forwards}
.gd-cast2.still .prog{transform:scaleX(1)}
@keyframes gdprog{to{transform:scaleX(1)}}
.gd-cast2 .gd-slowpct{gap:6px;z-index:2}
.gd-cast2 .gd-slowpct img.sm{width:18px;height:18px;border-radius:4px;border:1px solid #000}
.gd-cast2.classic .gd-slow-num output{color:#cfcfcf}
.gd-pick{gap:4px}
.gd-pick button{padding:2px;min-height:0;width:34px;height:34px;border-radius:8px;background:#111;border:1px solid var(--line)}
.gd-pick button img.sm{display:block;width:28px;height:28px;border-radius:6px;border:1px solid #000}
.gd-pick button[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 10px rgba(255,209,0,.45)}
.gd-charges i{opacity:.25;transform:scale(.6);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1.3)}
.gd-charges i.on{opacity:1;transform:none}
/* the footer on the guide pages: the site's panel at full width, its links gold */
body.gd .foot2 .legacy.fold{grid-column:1/-1}
body.gd .foot2 .fine a,body.gd .fbrand a{color:var(--gold)}
/* the series' home. A hero (the words on the left, the live guide as a card on the right, the yard behind, motes drifting),
   the classes still to come as tiles that are the tick for "tell me when", the email panel with the message drawn beside it,
   then what a guide holds. Motion is entrance and reaction only, and none of it under reduced motion. */
.gd-hero2{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;margin:14px 0 0;padding:44px 40px 40px;border-radius:18px;border:1px solid #2c2c2c;background:#0e0e10;overflow:hidden;isolation:isolate;min-height:400px}
.gd-hero2::before{content:"";position:absolute;inset:-30px;background:var(--hbg) center 30%/cover no-repeat;filter:blur(14px) saturate(.8);opacity:.28;z-index:0}
.gd-hero2::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(14,14,16,.92) 0,rgba(14,14,16,.75) 45%,rgba(60,36,14,.35) 100%),radial-gradient(60% 80% at 80% 50%,rgba(255,209,0,.12),transparent 70%);z-index:0}
.gd-hero2>*{position:relative;z-index:2}
.gd-motes{position:absolute;inset:0;z-index:1;pointer-events:none}
.gd-motes i{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:#ffd75e;box-shadow:0 0 10px 2px rgba(255,215,94,.55);opacity:0;animation:gd-mote 11s linear infinite;left:calc(var(--x,50) * 1%)}
.gd-motes i:nth-child(1){--x:8;animation-delay:0s}.gd-motes i:nth-child(2){--x:18;animation-delay:2.2s;animation-duration:13s}.gd-motes i:nth-child(3){--x:27;animation-delay:5s}.gd-motes i:nth-child(4){--x:36;animation-delay:1.1s;animation-duration:15s}.gd-motes i:nth-child(5){--x:45;animation-delay:7s}.gd-motes i:nth-child(6){--x:53;animation-delay:3.4s;animation-duration:12s}.gd-motes i:nth-child(7){--x:61;animation-delay:8.6s}.gd-motes i:nth-child(8){--x:70;animation-delay:.6s;animation-duration:14s}.gd-motes i:nth-child(9){--x:78;animation-delay:6.1s}.gd-motes i:nth-child(10){--x:86;animation-delay:4.4s;animation-duration:16s}.gd-motes i:nth-child(11){--x:93;animation-delay:9.5s}.gd-motes i:nth-child(12){--x:64;animation-delay:10.4s;animation-duration:12.5s}
@keyframes gd-mote{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}12%{opacity:.9}60%{opacity:.5}100%{transform:translate3d(18px,-460px,0) scale(1.1);opacity:0}}
.gd-herotext{max-width:560px}
.gd-hero2 .gd-title{font-size:clamp(30px,4.4vw,48px)}
.gd-hero2 .gd-lede{font-size:18px;margin-top:12px;color:#e8e8e8}
.gd-hows{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.gd-hows li{display:flex;align-items:center;gap:12px;font-size:14.5px;line-height:1.4;color:var(--ink2)}
.gd-hows li b{color:var(--ink)}
.gd-hows img{width:34px;height:34px;border-radius:8px;border:1px solid #000;box-shadow:0 0 0 1px #4a3d1a;flex:none}
.gd-heroside{display:grid;gap:14px;justify-items:stretch}
.gd-upnow{position:relative;display:grid;grid-template-columns:1fr;gap:8px;padding:22px 24px 22px;min-height:230px;border-radius:16px;border:1px solid color-mix(in srgb,var(--cc) 55%,#000);background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 18%,#0e0e10),#0b0b0d 70%);box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 25%,transparent),0 0 40px color-mix(in srgb,var(--cc) 18%,transparent),0 20px 40px rgba(0,0,0,.5);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .3s,box-shadow .3s}
.gd-upnow:hover{transform:translateY(-3px);box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 45%,transparent),0 0 56px color-mix(in srgb,var(--cc) 30%,transparent),0 26px 44px rgba(0,0,0,.55)}
.gd-upnow::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(11,11,13,.82) 38%,rgba(11,11,13,.35) 58%,transparent 76%);pointer-events:none}
.gd-upnow>*{position:relative;z-index:2;max-width:60%}
.gd-upfig{position:absolute!important;right:var(--upfig-r,-3%);bottom:var(--upfig-b,-4%);height:var(--upfig-h,102%);width:auto;max-width:none!important;object-fit:contain;object-position:bottom;z-index:0!important;filter:drop-shadow(0 14px 24px rgba(0,0,0,.7));-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28%);mask-image:linear-gradient(to right,transparent 0,#000 28%);transition:transform .5s}
.gd-upnow:hover .gd-upfig{transform:translateY(-4px) scale(1.02)}
.gd-uptag{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0c1408;background:#6fd85a}
.gd-uptag::before{content:"";width:6px;height:6px;border-radius:50%;background:#0c1408;animation:gd-pulse 1.6s ease-in-out infinite}
@keyframes gd-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.gd-uphead{display:flex;align-items:center;gap:12px;margin-top:4px}
.gd-uphead img{width:52px;height:52px;border-radius:12px;border:1px solid #000;box-shadow:0 0 0 2px var(--cc),0 0 18px color-mix(in srgb,var(--cc) 60%,transparent)}
.gd-uphead b{font-family:Cinzel,Georgia,serif;font-size:30px;line-height:1;color:var(--cc);text-shadow:0 2px 12px rgba(0,0,0,.8)}
.gd-upmeta{font-size:13px;color:var(--ink2)}
.gd-upchs{display:flex;gap:5px;margin-top:2px}
.gd-upchs img{width:26px;height:26px;border-radius:6px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}
.gd-upgo{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-top:10px;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:700;color:#1a1408;background:linear-gradient(180deg,#ffdf7a,#d9a93a);box-shadow:0 0 0 1px #6b4a12,0 2px 8px rgba(0,0,0,.4)}
.gd-upgo i{font-style:normal;font-size:18px;line-height:1;transition:transform .25s}
.gd-upnow:hover .gd-upgo i{transform:translateX(3px)}
/* the hub's guides, slim: one short card a class under one "Up now" label, so the vote right below the hero is in reach on a phone
   (Chris, 3 Oct: "I just don't want people to miss the vote section"). Phones get the three side by side. */
.gd-heroside.slim{gap:10px;align-content:center}
.gd-uplabel{display:flex;align-items:center;gap:10px;margin:0 0 2px;font-size:13px;font-weight:600;color:var(--ink2)}
.gd-heroside.slim .gd-upnow{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;min-height:0;padding:14px 46px 14px 16px;border-radius:14px}
.gd-heroside.slim .gd-upnow>*{max-width:none}
.gd-heroside.slim .gd-upnow .gd-uptag,.gd-heroside.slim .gd-upchs,.gd-heroside.slim .gd-upgo{display:none}
.gd-heroside.slim .gd-uphead{display:contents}
.gd-heroside.slim .gd-uphead img,.gd-heroside.slim .gd-uphead b{position:relative;z-index:2}   /* out of the head's box, so they need their own place above the card's shade */
.gd-heroside.slim .gd-uphead img{grid-row:1/3;width:48px;height:48px;border-radius:11px}
.gd-heroside.slim .gd-uphead b{grid-column:2;font-size:24px}
.gd-heroside.slim .gd-upmeta{grid-column:2;font-size:12.5px}
.gd-heroside.slim .gd-upnow::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-5px;border-right:2px solid var(--cc);border-top:2px solid var(--cc);transform:rotate(45deg);z-index:3;transition:transform .25s}
.gd-heroside.slim .gd-upnow:hover::after{transform:translateX(3px) rotate(45deg)}
.gd-heroside.slim .gd-upfig{height:190%;bottom:-78%;right:34px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 40%);mask-image:linear-gradient(to right,transparent 0,#000 40%);opacity:.9}
.gd-heroside.slim .gd-upnow::before{background:linear-gradient(to right,rgba(11,11,13,.85) 45%,rgba(11,11,13,.3) 75%,transparent)}
@media (max-width:640px){
  /* four square tiles in one row (Chris, 6 Oct, the fourth guide: "make them a square tile for now since 4 at the top") */
  .gd-heroside.slim{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:4px}
  .gd-uplabel{grid-column:1/-1}
  .gd-heroside.slim .gd-upnow{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center;align-content:center;text-align:center;row-gap:4px;padding:8px 3px;aspect-ratio:1;border-radius:12px}
  .gd-heroside.slim .gd-uphead img{grid-row:auto;width:34px;height:34px;border-radius:9px}
  .gd-heroside.slim .gd-uphead b{grid-column:auto;font-size:12px;letter-spacing:.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gd-heroside.slim .gd-upmeta,.gd-heroside.slim .gd-upfig{display:none}
  .gd-heroside.slim .gd-upnow::after{position:static;margin:0;width:7px;height:7px}
}
.gd-upnow.wait{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;--cc:#ffd75e}
.gd-upnow.wait img{width:64px;height:64px;border-radius:14px;border:1px solid #000;box-shadow:0 0 0 2px #6a5a1c}
.gd-upnow.wait b{font-family:Cinzel,Georgia,serif;font-size:20px;color:#ffd75e}
.gd-upnow.wait span{max-width:none;font-size:14px;color:var(--ink2)}
/* section heads */
.gd-sechead{margin:38px 0 16px}
.gd-sechead h2{margin:0;font-family:Cinzel,Georgia,serif;font-size:clamp(22px,2.6vw,28px);color:#ffd75e}
.gd-sechead p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--ink2);max-width:640px}
/* the tiles */
.gd-tiles2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.gd-tiles2 li{min-width:0;opacity:0;transform:translateY(14px);animation:gd-up .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 55ms)}
@keyframes gd-up{to{opacity:1;transform:none}}
.gd-tiles2 li>.gd-ctile,.gd-tiles2 li>div{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:20px 10px 16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#151517,#0e0e10);color:var(--ink);min-height:186px;transition:border-color .25s,box-shadow .25s,transform .25s,background .3s}
.gd-tiles2 img{width:76px;height:76px;border-radius:16px;border:1px solid #000;box-shadow:0 0 0 2px #333,0 8px 18px rgba(0,0,0,.6);margin-bottom:10px;filter:grayscale(1) brightness(.55);transition:filter .4s,transform .4s,box-shadow .4s}
.gd-tiles2 b{font-family:Cinzel,Georgia,serif;font-size:16px;line-height:1.1;color:#a8a8a8;transition:color .3s}
.gd-tiles2 small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gd-tiles2 small .s1{display:none;color:var(--cc)}
.gd-tiles2 .gd-acts{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:12px;width:100%;justify-content:center}
.gd-tiles2 .gd-acts>*{flex:none;min-width:0;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 8px;border-radius:999px;border:1px solid var(--line);background:#111;color:var(--ink2);font:700 11.5px/1.1 "Open Sans",system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.gd-tiles2 .gd-acts>*:hover{border-color:var(--cc);color:var(--ink)}
.gd-tiles2 .gd-tellme{position:relative}
.gd-tiles2 .gd-tellme em{font-style:normal}
.gd-tiles2 .gd-tellme:has(input:checked){border-color:var(--cc);background:color-mix(in srgb,var(--cc) 18%,#0e0e10);color:var(--ink)}
.gd-tiles2 .gd-tiles2 li>.gd-ctile:hover{border-color:#5a5a5a}
.gd-tiles2 li>.gd-ctile:hover img{filter:grayscale(.35) brightness(.85);transform:scale(1.04)}
.gd-tiles2 input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.gd-tiles2 li>.gd-ctile:has(input:checked){border-color:var(--cc);background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 20%,#0e0e10),#0e0e10 80%);box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 40%,transparent),0 0 30px color-mix(in srgb,var(--cc) 30%,transparent)}
.gd-tiles2 li>.gd-ctile:has(input:checked) img{filter:none;box-shadow:0 0 0 2px var(--cc),0 0 24px color-mix(in srgb,var(--cc) 65%,transparent)}
.gd-tiles2 li>.gd-ctile:has(input:checked) b{color:var(--ink)}
.gd-tiles2 li>.gd-ctile:has(input:checked) small .s0{display:none}.gd-tiles2 li>.gd-ctile:has(input:checked) small .s1{display:inline}
.gd-tiles2 .gd-tellme:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.gd-tiles2 li.pop>.gd-ctile{animation:gd-bloom .7s ease-out}
@keyframes gd-bloom{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cc) 70%,transparent)}100%{box-shadow:0 0 0 26px transparent,0 0 30px color-mix(in srgb,var(--cc) 30%,transparent)}}
/* the email panel and the message beside it */
.gd-mail2{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;margin:18px 0 0;padding:26px 28px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(135deg,#151517,#0e0e10 60%);transition:border-color .4s,box-shadow .4s}
.gd-signup2.picked .gd-mail2{border-color:#8a7326;box-shadow:0 0 0 1px rgba(255,209,0,.18),0 0 40px rgba(255,209,0,.12)}
.gd-mailform h3{margin:0;font-family:Cinzel,Georgia,serif;font-size:22px;color:#ffd75e}
.gd-mailsub{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.gd-mailrow{display:flex;gap:8px;margin:16px 0 0}
.gd-mailrow input{flex:1 1 auto;min-width:0;font:inherit;font-size:16px;padding:12px 14px;border-radius:999px;border:1px solid var(--line);background:#0b0b0d;color:var(--ink)}
.gd-mailrow input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,209,0,.2)}
.gd-mailrow .gd-go{flex:none;white-space:nowrap;padding:12px 22px;font-size:15px}
.gd-mail2 .gd-consent{margin-top:12px;font-size:12.5px;max-width:none}
.gd-mail2 .gd-signup-out{margin-top:10px}.gd-mail2 .gd-signup-out:empty{display:none}
.gd-mail2 .gd-fine{margin-top:12px;font-size:12px}
.gd-mail2.follow .gd-follow{margin-top:14px}
/* every guide up (guide.js allDone): no message to show, the follow links alone */
.gd-mail2.solo{grid-template-columns:1fr}
/* every guide up (guide.js allDone, 22 Oct 2026): nine tiles in one row on a desktop, three by three below, each in its class colour,
   since there is nothing left to wait for; "Guide is up" would say it nine times, so only Read it stays */
.gd-pick2 ol.gd-tiles2.all{grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.gd-pick2 ol.gd-tiles2.all li>.gd-ctile{min-height:0;padding:14px 6px 12px}
.gd-pick2 ol.gd-tiles2.all img{width:56px;height:56px;margin-bottom:8px;filter:none}
.gd-pick2 ol.gd-tiles2.all b{font-size:14px;color:var(--cc)}
.gd-pick2 ol.gd-tiles2.all .gd-isup{display:none}
.gd-pick2 ol.gd-tiles2.all li>.gd-ctile:hover{border-color:var(--cc)}
@media (max-width:900px){.gd-pick2 ol.gd-tiles2.all{grid-template-columns:repeat(3,minmax(0,1fr))}}

.gd-signup2.sent .gd-mailrow,.gd-signup2.sent .gd-consent,.gd-signup2.sent .gd-mailsub{display:none}
.gd-mock{display:flex;flex-direction:column;align-items:center;gap:10px;perspective:900px}
.gd-mocklabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.gd-mockcard{width:100%;max-width:340px;border-radius:12px;overflow:hidden;background:#fbf8f1;color:#231d12;box-shadow:0 24px 40px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.6);transform:rotate(-1.5deg);transition:transform .4s}
.gd-mock:hover .gd-mockcard{transform:rotate(0) translateY(-2px)}
.gd-mockcard.nudge{animation:gd-nudge .5s ease-out}
@keyframes gd-nudge{0%{transform:rotate(-1.5deg) scale(1)}40%{transform:rotate(.5deg) scale(1.02)}100%{transform:rotate(-1.5deg) scale(1)}}
.gd-mockband{display:flex;align-items:center;gap:9px;padding:11px 14px;background:#0e0e10}
.gd-mockband img{width:30px;height:30px;border-radius:15px}
.gd-mockband b{display:block;font-family:Cinzel,Georgia,serif;font-size:14px;color:#ffd75e;line-height:1.1}
.gd-mockband small{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#bdbdbd}
.gd-mockbody{padding:16px 16px 14px;font-family:Arial,Helvetica,sans-serif}
.gd-mockbody h4{margin:0 0 8px;font-family:Georgia,'Times New Roman',serif;font-size:19px;line-height:1.2;color:#1a1408}
.gd-mockbody p{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:#231d12}
.gd-mockbtn{display:inline-block;padding:8px 14px;border-radius:999px;background:#e2b33d;border:1px solid #6b4a12;font:700 12px/1.2 Arial,Helvetica,sans-serif;color:#1a1408;cursor:pointer;transition:background .12s,transform .08s}
.gd-mockbtn:hover{background:#f0c24a}
.gd-mockbtn:active{transform:translateY(1px)}
.gd-mockbtn:focus-visible{outline:2px solid #1a1408;outline-offset:2px}
.gd-mockbtn.busy{opacity:.7;cursor:progress}
/* The window over the page (30 Sep): the guide asked for is not written yet; the ones that are up open inside it, first chapter working */
.gd-win{position:fixed;inset:0;margin:auto;width:min(620px,calc(100vw - 24px));max-height:min(88vh,860px);padding:0;border:0;border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 0 1px #000,inset 0 0 0 1px #3a3a3a;overflow:hidden;display:none;flex-direction:column;box-sizing:border-box}
.gd-win[open]{display:flex}
body:has(.gd-win[open]){overflow:hidden}
.gd-win::backdrop{background:rgba(0,0,0,.72)}
.gd-win.read{width:min(1060px,calc(100vw - 24px));max-height:min(92vh,980px)}
.gd-winhead{display:flex;align-items:flex-start;gap:14px;padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.gd-winicon{flex:none;width:44px;height:44px;border-radius:9px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}
.gd-win:not(.read) .gd-winicon{filter:grayscale(1) brightness(.6)}
.gd-wintext{flex:1;min-width:0}
.gd-win h3{margin:0;font-family:Cinzel,Georgia,serif;font-size:19px;line-height:1.25;color:#ffd75e;outline:0}
.gd-winsub{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)}
.gd-winx{flex:none;width:32px;height:32px;margin:-6px -6px 0 0;border:0;border-radius:8px;background:none;color:var(--ink2);font:400 26px/32px "Open Sans",system-ui,sans-serif;cursor:pointer}
.gd-winx:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.gd-winx:focus-visible,.gd-winback:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.gd-winpick{padding:16px 18px 18px;overflow:auto}
.gd-winpick[hidden]{display:none}
.gd-winlead{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.gd-wincards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gd-wincard{display:grid;grid-template-columns:44px minmax(0,1fr);grid-auto-rows:auto;column-gap:12px;row-gap:2px;align-items:center;text-align:left;padding:12px;border-radius:10px;border:1px solid var(--line);background:#161618;color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.gd-wincard img{grid-row:1/4;width:44px;height:44px;border-radius:9px;border:1px solid #000;box-shadow:0 0 0 2px color-mix(in srgb,var(--cc) 60%,#000)}
.gd-wincard b{display:block;font-family:Cinzel,Georgia,serif;font-size:15px;line-height:1.2;color:var(--cc)}
.gd-wincard small{display:block;font-size:12px;line-height:1.4;color:var(--ink2)}
.gd-wincard i{font-style:normal;font-size:12.5px;font-weight:700;color:#ffd75e;margin-top:2px}
.gd-wincard:hover,.gd-wincard:focus-visible{border-color:var(--cc);background:color-mix(in srgb,var(--cc) 8%,#161618);outline:0}
.gd-winread{display:flex;flex-direction:column;min-height:0;padding:12px 18px 16px}
.gd-winread[hidden]{display:none}
.gd-winbar{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:13px}
.gd-winback{flex:none;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:#161618;color:var(--ink);font:700 13px/1.2 "Open Sans",system-ui,sans-serif;cursor:pointer}
.gd-winback:hover{border-color:#5a5a5a}
.gd-winback[hidden]{display:none}
.gd-winwhat{flex:1;min-width:0;font-weight:700;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-winopen{flex:none;color:#ffd75e;font-weight:600;white-space:nowrap}
.gd-peekbox{position:relative;flex:1;min-height:0;border-radius:8px;overflow:hidden;background:#0b0b0d;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #2a2a2a}
.gd-peekbox iframe{display:block;width:100%;height:min(66vh,720px);border:0;background:#0b0b0d}
.gd-peekbox.loading::after{content:attr(data-loading);position:absolute;inset:0;display:grid;place-items:center;font-size:13.5px;color:var(--ink2);background:#0b0b0d}
.gd-winfoot{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){.gd-win,.gd-win.read{width:calc(100vw - 16px);max-height:92vh;border-radius:12px}.gd-wincards{grid-template-columns:1fr}.gd-winhead{padding:14px 14px 12px}.gd-winpick,.gd-winread{padding-left:14px;padding-right:14px}.gd-win h3{font-size:17px}.gd-peekbox iframe{height:min(62vh,640px)}.gd-winopen{font-size:12px}}
@media (prefers-reduced-motion:reduce){.gd-mockbtn,.gd-wincard{transition:none}}
.gd-mocksig{margin:14px 0 0!important;font-size:12.5px!important}
.gd-mocksig small{font-size:10.5px;color:#6b6350}
[data-mock].flip{animation:gd-flip .45s ease-out}
@keyframes gd-flip{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
/* what a guide holds */
.gd-inside{margin-bottom:10px}
.gd-everylist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.gd-everylist li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:13.5px;line-height:1.5;color:var(--ink2)}
.gd-everylist img{width:28px;height:28px;border-radius:6px;border:1px solid #000}
.gd-everylist b{color:var(--ink)}.gd-everylist a{color:var(--gold,#ffd100)}
.gd-everysrc{margin:10px 0 0;font-size:12px;color:var(--muted)}
.gd-insidegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.gd-insidegrid li{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;padding:16px 16px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);transition:border-color .25s,transform .25s}
.gd-insidegrid li:hover{border-color:#6a5a1c;transform:translateY(-2px)}
.gd-insidegrid img{grid-row:1/3;width:44px;height:44px;border-radius:10px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}
.gd-insidegrid b{font-family:Cinzel,Georgia,serif;font-size:14.5px;color:#ffd75e}
.gd-insidegrid span{font-size:13px;line-height:1.45;color:var(--ink2)}
/* reveal on scroll */
.gd-rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 60ms)}
.gd-rv.in{opacity:1;transform:none}
@media (max-width:1000px){.gd-hero2{grid-template-columns:1fr;padding:34px 26px 28px;min-height:0}.gd-herotext{max-width:none}.gd-upnow>*{max-width:66%}}
@media (max-width:760px){.gd-mail2{grid-template-columns:1fr;gap:20px;padding:20px 16px}.gd-mock{order:2}.gd-insidegrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.gd-hero2{padding:26px 16px 22px;border-radius:14px}.gd-hero2 .gd-lede{font-size:16px}.gd-hows{gap:8px;margin-top:18px}.gd-hows li{font-size:13.5px}.gd-hows img{width:30px;height:30px}.gd-upnow{padding:18px 16px;min-height:210px}.gd-upnow>*{max-width:66%}.gd-uphead b{font-size:24px}.gd-upmeta{font-size:12px}.gd-upgo{padding:9px 14px;font-size:13.5px;max-width:none;white-space:nowrap}.gd-upfig{right:var(--upfig-pr,-30%);height:var(--upfig-ph,90%);opacity:.92;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 48%);mask-image:linear-gradient(to right,transparent 0,#000 48%)}.gd-upnow::before{background:linear-gradient(to right,rgba(11,11,13,.9) 40%,rgba(11,11,13,.45) 62%,transparent 80%)}.gd-sechead{margin-top:28px}.gd-tiles2{grid-template-columns:1fr 1fr;gap:8px}.gd-tiles2 li>label,.gd-tiles2 li>div{min-height:160px;padding:16px 8px 12px;border-radius:14px}.gd-tiles2 img{width:64px;height:64px;border-radius:14px}.gd-tiles2 b{font-size:14.5px}.gd-mailrow{flex-wrap:wrap}.gd-mailrow input,.gd-mailrow .gd-go{flex:1 1 100%}.gd-mockcard{max-width:300px}.gd-insidegrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gd-motes i{animation:none;display:none}.gd-tiles2 li{opacity:1;transform:none;animation:none}.gd-rv{opacity:1;transform:none;transition:none}.gd-uptag::before{animation:none}.gd-mockcard,.gd-upnow,.gd-upfig,.gd-tiles2 img,.gd-tiles2 li>.gd-ctile{transition:none}.gd-mockcard.nudge,.gd-tiles2 li.pop>label,[data-mock].flip{animation:none}}
.gd-follow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.gd-follow a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none}
.gd-follow a:hover{border-color:var(--gold)}
.gd-follow img{width:28px;height:28px;border-radius:7px;border:1px solid #000}
.gd-follow b{display:block;font-size:14px;color:#ffd75e}
.gd-follow span{display:block;font-size:12px;color:var(--muted)}
/* the sign-up and the account page */
.gd-signup{margin:14px 0 0;max-width:760px}
.gd-signup.acct.sent .gd-ticks{display:none}
.gd-ticks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0;padding:0;list-style:none}
.gd-ticks label{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 8px;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;min-height:46px}
.gd-ticks label:has(input:checked){border-color:var(--cc);box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 30%,transparent),0 0 12px color-mix(in srgb,var(--cc) 25%,transparent)}
.gd-ticks label.up{opacity:.85;cursor:default}
.gd-ticks input{width:16px;height:16px;margin:0;accent-color:var(--cc);flex:none}
.gd-ticks img{width:28px;height:28px;border-radius:7px;border:1px solid #000;flex:none}
.gd-ticks span{font-size:14px;font-weight:600;color:var(--ink)}
.gd-ticks label:has(input:checked) span{color:var(--cc)}
.gd-ticks small{margin-left:auto;font-size:10.5px;color:var(--muted);text-align:right;line-height:1.2}
.gd-ticks small a{color:var(--gold)}
.gd-field{display:flex;flex-direction:column;gap:6px;margin:16px 0 0;max-width:420px}
.gd-field span{font-size:13px;font-weight:600;color:var(--ink)}
.gd-field input{font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0b0b0d;color:var(--ink)}
.gd-field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,209,0,.2)}
.gd-consent{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink2);cursor:pointer;max-width:640px}
.gd-consent input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--gold);flex:none}
.gd-signup-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:16px 0 0}
.gd-go{display:inline-block;font:inherit;font-size:14px;font-weight:700;padding:10px 20px;border-radius:999px;border:0;background:linear-gradient(180deg,#ffdf7a,#d9a93a);color:#1a1408;text-decoration:none;box-shadow:0 0 0 1px #6b4a12,0 2px 8px rgba(0,0,0,.4);cursor:pointer}
.gd-go:hover{filter:brightness(1.08)}
.gd-go:disabled{opacity:.6;cursor:wait}
.gd-signup-note{margin:0;flex:1 1 280px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.gd-signup-out{margin:12px 0 0;min-height:1.4em;font-size:14.5px;color:var(--ink)}
.gd-signup-out b{color:#9be59b}
.gd-account h2{margin:0}
.gd-account .gd-sub .who{color:var(--ink)}
.gd-signup.acct .gd-eralabel{margin:16px 0 8px}
.gd-acct-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.gd-acct-actions .gd-reset{margin:0;padding:8px 14px;font-size:13px}
.gd-acct-actions .gd-reset.danger{border-color:#7a3a3a;color:#f0a0a0}
body.acct .gd-sec{border-top:0;padding-top:16px}
/* the series row: nine classes, the live ones lit in their colour, the rest waiting */
.gd-classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:14px 0 0;padding:0;list-style:none}
.gd-classes li{min-width:0}
.gd-classes li>a,.gd-classcard{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;min-height:58px}
.gd-classes img{width:40px;height:40px;border-radius:9px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a;flex:none}
.gd-classes li>a>span,.gd-classcard>span{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.2}
.gd-classes b{font-size:14px;color:var(--cc,var(--ink))}
.gd-classes small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gd-classes li.here .gd-classcard,.gd-classes li.live a{border-color:color-mix(in srgb,var(--cc) 55%,#000);box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 25%,transparent),0 0 16px color-mix(in srgb,var(--cc) 20%,transparent)}
.gd-classes li.here .gd-classcard{background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 16%,#0e0e10),#0e0e10 70%)}
.gd-classes li.here small{color:var(--cc)}
.gd-classes li.live a:hover{background:var(--panel2)}
.gd-classes li.soon .gd-classcard{opacity:.55}
.gd-classes li.soon img{filter:grayscale(1) brightness(.7)}
.gd-classes li.soon b{color:var(--ink2)}
/* Your damage: the ticked lines, the spell power rows, the chalk bars hanging from the zero line */
.gd-figure.fig-bust{height:100%;bottom:0;right:0}
.gd-plate-lines.ticked span{position:relative}
.gd-plate-lines.ticked span:not(:empty)::after{content:"";display:inline-block;width:6px;height:11px;margin-left:8px;border-right:2px solid #7ee787;border-bottom:2px solid #7ee787;transform:rotate(45deg) translateY(-2px)}
.gd-sprows{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:4px 18px;margin:0 0 6px}
.gd-spchart .gd-eralabel{margin:12px 0 6px}
.gd-sprow{display:grid;grid-template-columns:24px 118px minmax(0,1fr) 44px;align-items:center;gap:8px;padding:3px 0}
.gd-sprow img.sm{width:24px;height:24px;border-radius:5px;border:1px solid #000}
.gd-sprow b{font-size:13px;line-height:1.2;color:var(--ink);text-wrap:balance}
.gd-sprow b small{font-weight:400;color:var(--muted)}
.gd-sprow .bars{display:grid;gap:2px}
.gd-sprow .bars>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px}
.gd-sprow .bars i{display:block;height:9px;border-radius:2px;width:0;background:repeating-linear-gradient(115deg,#8f8f8f 0 3px,#5c5c5c 3px 6px);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.gd-sprow .bars .forever i{background:repeating-linear-gradient(115deg,#ffe38a 0 3px,#c9a227 3px 6px)}
.gd-spchart:not(.drawn) .gd-sprow .bars i{width:0!important}
.gd-sprow .bars span{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;min-width:3.2em;text-align:right}
.gd-sprow .bars .forever span{color:#ffd75e}
.gd-sprow .ratio{font-size:18px;transform:rotate(-4deg);text-align:right}
.gd-basehead{display:flex;align-items:center;gap:8px;margin:12px 0 6px;font-size:15px;color:var(--ink)}
.gd-basehead img.sm{width:26px;height:26px;border-radius:6px;border:1px solid #000}
.gd-basehead small{font-weight:400;font-size:12.5px;color:var(--muted)}
.gd-pick.basepick{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.gd-basewrap{position:relative;padding:22px 6px 0;border-radius:8px;background:rgba(11,11,13,.6);border:1px solid #2a2a2a}
.gd-zero{position:relative;height:0;border-top:2px solid #ffd75e;box-shadow:0 0 8px rgba(255,209,0,.35)}
.gd-zero span{position:absolute;right:6px;bottom:4px;font-family:Caveat,cursive;font-weight:700;font-size:18px;color:#ffd75e}
.gd-basebars{display:flex;align-items:flex-start;gap:6px;height:190px;padding:0 4px;margin-bottom:22px}
.gd-basebar{position:relative;flex:1;min-width:0;height:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--ink2)}
.gd-basebar i{display:block;height:var(--h);margin:0 auto;width:min(100%,34px);border-radius:0 0 4px 4px;background:repeating-linear-gradient(115deg,#ff8f8f 0 3px,#c04a4a 3px 6px);box-shadow:0 0 10px rgba(240,120,120,.35);transform-origin:top;transform:scaleY(0);transition:transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.gd-basebar.zero i{height:3px;background:#7ee787;box-shadow:none}
.gd-basechart.drawn .gd-basebar i{transform:scaleY(1)}
.gd-basebar .v{position:absolute;z-index:2;left:50%;top:max(6px,calc(var(--h) - 22px));transform:translateX(-50%) rotate(-4deg);font-family:Caveat,cursive;font-weight:700;font-size:17px;line-height:1;color:#fff;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9);white-space:nowrap;opacity:0;transition:opacity .4s calc(var(--d,0ms) + .6s)}
.gd-basebar.zero .v{color:#9be59b;top:10px}
.gd-basechart.drawn .gd-basebar .v.on,.gd-basebar .v.tap,.gd-basebar:hover .v{opacity:1}
.gd-basebar small{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.gd-basenote{margin:10px 0 0;font-size:13.5px;color:var(--ink2)}
.gd-basenote b{color:var(--ink)}
/* What's new: the grid of chips, the phrase lights, the level line, the buff flips, the counts and the hit rows */
.gd-newgrid .gd-eralabel{margin:12px 0 6px}
.gd-newgrid .gd-eralabel:first-child{margin-top:0}
.gd-newrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.gd-newchip{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px 7px 7px;border-radius:10px;border:1px solid var(--line);background:rgba(11,11,13,.85);font:inherit;text-align:left;color:var(--ink);cursor:pointer;--tc:#ffd75e}
.gd-newchip img.sm{width:36px;height:36px;border-radius:8px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}
.gd-newchip span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.gd-newchip b{font-size:14px;color:var(--ink)}
.gd-newchip small{font-size:11.5px;color:var(--tc)}
.gd-newchip:hover,.gd-newchip.on{border-color:var(--tc);background:rgba(255,209,0,.06)}
.gd-newchip.on img.sm{box-shadow:0 0 0 2px var(--tc),0 0 12px color-mix(in srgb,var(--tc) 50%,transparent)}
.gd-ph{border-radius:2px;transition:background .3s,box-shadow .3s}
.gd-ph.on{background:rgba(255,209,0,.12);box-shadow:inset 0 -2px 0 rgba(255,209,0,.9)}
.gd-phbtn{font:inherit;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:#111;color:var(--ink2);cursor:pointer}
.gd-phbtn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1a1408}
.gd-lvhead{display:flex;justify-content:space-between;margin:0 0 4px 160px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gd-lvrow{display:grid;grid-template-columns:28px 120px minmax(0,1fr);align-items:center;gap:6px 8px;padding:12px 0 18px;border-top:1px solid #222}
.gd-lvrow img.sm{width:28px;height:28px;border-radius:6px;border:1px solid #000}
.gd-lvrow b{font-size:14px;color:var(--ink)}
.gd-lvtrack{position:relative;height:4px;margin:0 10px;border-radius:2px;background:linear-gradient(to right,#3a3a3a,#5a5a5a)}
.gd-lvtick{position:absolute;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--ink2)}
.gd-lvtick i{display:block;width:12px;height:12px;margin:0 auto;border-radius:50%;background:#c9c9c9;border:2px solid #0b0b0d;box-shadow:0 0 0 1px #777;transition:transform .2s,background .2s}
.gd-lvtick.talent i{border-radius:3px;background:#ffd75e;box-shadow:0 0 0 1px #b8901f,0 0 10px rgba(255,209,0,.5)}
.gd-lvtick small{position:absolute;left:50%;top:100%;transform:translate(-50%,-2px);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-lvtick em{position:absolute;left:50%;bottom:100%;transform:translate(-50%,2px);font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#ffd75e;white-space:nowrap}
.gd-lvtick:hover i,.gd-lvtick.on i{transform:scale(1.35);background:#fff}
.gd-lvtick.on small{color:var(--gold);font-weight:700}
.gd-levelline .gd-detail{margin-top:6px}
.gd-flips{display:grid;gap:8px}
.gd-flip2{display:flex;gap:12px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:rgba(11,11,13,.85)}
.gd-flip2>img,.gd-flip2>.noicon{flex:none;width:36px;height:36px;border-radius:7px;border:1px solid #000}
.gd-flip2>.noicon{border:1px dashed #8a3a3a;background:rgba(40,10,10,.6)}
.gd-flip2.gone{opacity:.8}
.gd-flip2 h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 4px;font-size:15px;color:var(--ink)}
.gd-flip2 h4 small{font-weight:400;font-size:12.5px;color:var(--muted)}
.gd-flip2 .gd-was,.gd-flip2 .gd-now{font-size:13.5px}
.gd-subch{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:34px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-family:Cinzel,Georgia,serif;font-weight:700;font-size:24px;color:#ffd75e;text-shadow:0 2px 10px rgba(0,0,0,.8);scroll-margin-top:56px}
.gd-subch span{font-family:"Open Sans",system-ui,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.gd-subch .gd-watchpart{margin:0;font-family:"Open Sans",system-ui,sans-serif;text-shadow:none}
/* The trees, before and after (Chris, 27 Sep: the counts had no subject). Each box: the tree, its Classic count, an arrow, its Forever
   count in the tree's colour, the net change, then the talents that came and went. */
.gd-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gd-counts .gd-count{display:flex;flex-direction:column;gap:12px;padding:12px 14px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--tc,#555) 40%,#000);border-top:2px solid var(--tc,#555);background:rgba(11,11,13,.85)}
.gd-count-h{display:flex;align-items:center;gap:9px;margin:0}
.gd-count-h img.sm{width:26px;height:26px;border-radius:6px;border:1px solid #000}
.gd-count-h b{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:15px;color:var(--tc)}
.gd-count-h em{margin-left:auto;padding:1px 8px;border-radius:999px;font-style:normal;font-weight:700;font-size:12px;color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,transparent);border:1px solid color-mix(in srgb,var(--tc) 38%,transparent);font-variant-numeric:tabular-nums}
.gd-count-n{display:flex;align-items:flex-end;gap:12px;margin:0}
.gd-count-n span{display:flex;flex-direction:column;gap:4px}
.gd-count-n small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#8a8a8a}
.gd-count-n .now small{color:var(--tc)}
.gd-count-n b{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:26px;line-height:1;color:#9a9a9a;font-variant-numeric:tabular-nums}
.gd-count-n .now .gd-cnt{font-size:34px;color:var(--tc);text-shadow:0 0 18px color-mix(in srgb,var(--tc) 35%,transparent)}
.gd-count-arrow{flex:none;margin-bottom:8px;fill:none;stroke:var(--tc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.gd-count-d{display:grid;gap:7px;margin:0;padding:11px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.07)}
.gd-count-d li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13px;line-height:1.2;color:var(--ink)}
.gd-count-d img.sm{width:20px;height:20px;border-radius:4px;border:1px solid #000}
.gd-count-d span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-count-d small{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--tc)}
.gd-count-d li.gone{color:var(--muted)}
.gd-count-d li.gone span{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.gd-count-d li.gone small{color:#8a8a8a}
.gd-count-d li.gone img{filter:grayscale(1);opacity:.6}
.gd-hitctl{margin-top:0}
.gd-hitctl label{font-weight:600;color:var(--ink)}
.gd-hitctl output{margin-left:-6px}
.gd-hitctl .gd-ctl-note{margin-left:-10px}
@media (max-width:640px){.gd-counts{grid-template-columns:1fr;gap:8px}.gd-counts .gd-count{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h n" "d d";align-items:end;gap:10px 12px;padding:10px 12px 12px}.gd-count-h{grid-area:h;align-self:center}.gd-count-h em{margin-left:0}.gd-count-n{grid-area:n;gap:8px}.gd-count-n b{font-size:22px}.gd-count-n .now .gd-cnt{font-size:28px}.gd-count-arrow{width:22px;margin-bottom:6px}.gd-count-d{grid-area:d;gap:7px;padding-top:10px}.gd-count-d li{font-size:12.5px}}
.gd-hitrows{display:grid;gap:8px;margin:12px 0 0}
.gd-hitrow{display:grid;grid-template-columns:26px 150px minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:rgba(11,11,13,.85)}
.gd-hitrow img.sm{width:26px;height:26px;border-radius:6px;border:1px solid #000}
.gd-hitrow b{font-size:14px;color:var(--ink)}
.gd-hitrow span{display:flex;align-items:baseline;gap:8px;padding:4px 10px;border-radius:6px;border:1px solid #3a3a3a;background:#0b0b0d}
.gd-hitrow span.forever{border-color:#8a6d16}
.gd-hitrow .gd-big{font-size:22px;color:#e8e8e8}
.gd-hitrow span.forever .gd-big{color:#ffd75e}
.gd-hitrow em{font-style:normal;font-size:11.5px;color:var(--muted)}
/* Arcane: the target takes the hit in the tree's colour, the chips under the yard carry the tooltip's numbers, the gauges are regen */
.gd-stage.hit .gd-dummyfig{filter:sepia(.5) hue-rotate(215deg) saturate(2.4) brightness(1.1) drop-shadow(0 0 14px rgba(195,155,255,.85))}
.gd-stage.cash .gd-dummyfig{filter:sepia(.5) hue-rotate(215deg) saturate(2.6) brightness(1.3) drop-shadow(0 0 22px rgba(220,200,255,1));animation:gdcritpop .6s ease-out}
.gd-abchips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.gd-abchips .gd-chip{font-size:12.5px;padding:6px 9px}
.gd-abchips .gd-chip b{color:#ffd75e;font-size:14px}
.gd-arc .gd-loopctl{flex-wrap:wrap}
.gd-arc .gd-loopctl .gd-cast{margin-left:0}
.gd-arc .gd-loopctl .gd-cast.cash{border-color:#8f6fd6;background:rgba(195,155,255,.1);color:#dcc8ff}
.gd-plates.one{grid-template-columns:1fr;max-width:640px}
.gd-pick.rolls button{width:auto;height:auto;padding:3px 6px 3px 3px;display:inline-flex;align-items:center;gap:5px}
.gd-pick.rolls button small{font-size:11.5px;font-weight:700;color:var(--ink2)}
.gd-pick.rolls button:hover{border-color:#777}
.gd-barrage .gd-castbars{margin-top:12px}
.gd-barrage .gd-cast2 .gd-slowpct{font-size:11px;white-space:nowrap;overflow:hidden;right:8px}
.gd-eqrow{margin:10px 0 16px;text-align:center}
.gd-eqrow .gd-chalk{font-size:22px}
.gd-regenhead{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:15px;color:var(--ink)}
.gd-regenhead img.sm{width:26px;height:26px;border-radius:6px;border:1px solid #000}
.gd-twin.armor{margin-top:6px}
.gd-twin+.gd-regenhead{margin-top:18px}
.gd-gauge{display:block;height:14px;margin:8px auto 4px;max-width:260px;border-radius:4px;background:#141414;border:1px solid #3a3a3a;overflow:hidden}
.gd-gauge i{display:block;height:100%;width:0;background:repeating-linear-gradient(115deg,#8f8f8f 0 3px,#5c5c5c 3px 6px);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.gd-twin>.forever .gd-gauge i{background:repeating-linear-gradient(115deg,#ffe38a 0 3px,#c9a227 3px 6px)}
.gd-renames{margin-top:8px}
.gd-renames li{font-size:13.5px}
/* two blocks side by side in one card (Combustion beside Flamestrike) */
.gd-duo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.gd-duo .gd-plates,.gd-plates.stack{grid-template-columns:1fr}
.gd-twin>div.over{opacity:.6}
.gd-twin>div.over .gd-under{color:#f0a0a0}
.gd-roll{font-size:12.5px;color:var(--muted);min-width:6em}
.gd-shatterpop{position:absolute;left:50%;bottom:16px;margin-left:-70px;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:10px;background:rgba(0,0,0,.72);border:1px solid #b8901f;box-shadow:0 0 16px rgba(255,209,0,.35);opacity:0;transform:scale(.7);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1.25)}
.gd-shatterpop img.sm{width:30px;height:30px;border-radius:6px;border:1px solid #000}
.gd-shatterpop .gd-chalk{font-size:24px;transform:none}
.gd-stage.crit .gd-shatterpop{opacity:1;transform:scale(1)}
.gd-steptitle{margin:0 0 12px;font-family:Cinzel,Georgia,serif;font-size:18px;font-weight:700;color:#ffd75e;text-shadow:0 1px 4px #000}
.gd-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gd-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;border:1px solid #444;background:rgba(11,11,13,.9);font-size:14px;color:var(--ink2);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.gd-chip img.sm{width:26px;height:26px;border-radius:6px;border:1px solid #000}
.gd-chip.on{color:var(--ink);border-color:#666}
.gd-chip.glow{border-color:#7fc7ff;box-shadow:0 0 12px rgba(127,199,255,.45)}
.gd-chip.gold{border-color:#b8901f;color:#ffd75e}
.gd-chip.note{font-size:12.5px}
.gd-chip.target{border-style:dashed}
.gd-chip.target.chilled{color:#9fd8ff;border-color:#4d8fbf}
.gd-chip.target.frozen{color:#dff4ff;border-color:#9fd8ff;background:#0f2230;box-shadow:0 0 14px rgba(159,216,255,.45)}
.gd-arrow{display:inline-block;width:22px;height:2px;background:#666;position:relative}
.gd-arrow::after{content:"";position:absolute;right:-2px;top:-4px;border-style:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent #666}
.gd-charges{display:inline-flex;gap:4px}
.gd-charges i{width:12px;height:12px;border-radius:50%;background:var(--ac,#7fc7ff);box-shadow:0 0 8px color-mix(in srgb,var(--ac,#7fc7ff) 70%,transparent)}
.gd-cap{margin:10px 0 0;min-height:3.2em;font-size:14px;line-height:1.55;color:var(--ink2)}
.gd-loopctl{display:flex;align-items:center;gap:8px;margin:10px 0 0}
.gd-loopctl button{font:inherit;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#111;color:var(--ink);cursor:pointer;min-height:36px}
.gd-loopctl .next{background:var(--gold);border-color:var(--gold);color:#1a1408}
.gd-dots{display:inline-flex;gap:6px;margin:0 4px}
.gd-dot{width:12px;height:12px;min-height:0!important;padding:0!important;border-radius:50%!important;border:1px solid #555!important;background:#222!important}
.gd-dot.here{background:var(--gold)!important;border-color:var(--gold)!important}
.gd-rank{margin-left:auto;font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.gd-rank button{padding:4px 10px;min-height:30px}
.gd-rank button[aria-pressed="true"]{background:var(--panel2);border-color:#777;color:var(--gold)}
/* the Hot Streak spell picker is also a .gd-rank inside a .gd-loopctl: its icon buttons keep the .gd-pick square frame */
.gd-loopctl .gd-pick button{padding:2px;min-height:0;border-radius:8px}
.gd-loopctl .gd-pick button[aria-pressed="true"]{background:#111;border-color:var(--gold)}
/* slows */
.gd-slows{display:grid;gap:18px}
.gd-slowpair h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px;color:var(--ink)}
.gd-slowpair h4 img.sm{width:24px;height:24px;border-radius:5px;border:1px solid #000}
.gd-slowpair h4 small{font-weight:400;font-size:12.5px;color:var(--muted)}
.gd-slowpair h4 output{color:var(--gold)}
.gd-slow{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:10px;margin:6px 0 0;font-size:13px;color:var(--ink2)}
.gd-slow-era{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#9a9a9a}
.gd-slow.forever .gd-slow-era{color:#ffd75e}
.gd-slowbar{position:relative;height:22px;border-radius:4px;background:#141414;border:1px solid #3a3a3a;overflow:hidden}
.gd-slowbar .fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--pct) * 1%);background:repeating-linear-gradient(115deg,#7fb6e0 0 3px,#3d7aa8 3px 6px);transform-origin:left;transform:scaleX(0)}
.gd-slow.forever .gd-slowbar .fill{background:repeating-linear-gradient(115deg,#ffe38a 0 3px,#c9a227 3px 6px)}
.gd-slowbar .drain{position:absolute;left:0;top:0;bottom:0;width:calc(var(--pct) * 1%);background:rgba(0,0,0,.55);transform-origin:right;transform:scaleX(0)}
.gd-slow.run .fill{animation:gdfill .35s ease-out forwards}
.gd-slow.run .drain{animation:gddrain var(--sec) linear .45s forwards}
.gd-slow.still .fill{transform:scaleX(1)}
@keyframes gdfill{to{transform:scaleX(1)}}
@keyframes gddrain{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gd-slow-num{font-variant-numeric:tabular-nums;white-space:nowrap;min-width:52px;text-align:right;color:var(--ink)}
.gd-slow-num output{font-weight:700;color:#ffd75e}
.gd-slow.classic .gd-slow-num output{color:#9fd8ff}
.gd-slow.done .gd-slow-num{color:var(--muted)}
.gd-slowpct{position:absolute;left:8px;top:0;bottom:0;display:flex;align-items:center;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none}
.gd-cast,.gd-reset{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:inherit;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid #b8901f;background:rgba(255,209,0,.1);color:#ffd75e;cursor:pointer}
.gd-cast img.sm{width:20px;height:20px;border-radius:4px;border:1px solid #000}
.gd-reset{border-color:var(--line);background:#111;color:var(--ink2);margin-left:6px}
.gd-rankpick{display:inline-flex;gap:4px;margin-left:10px}
.gd-rankpick button{font:inherit;font-size:12.5px;font-weight:700;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#111;color:var(--ink2);cursor:pointer}
.gd-rankpick button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1a1408}
.gd-ctl-note{font-size:13px;color:var(--muted)}
.gd-slowpair h4{flex-wrap:wrap}
.gd-replay,.gd-play{font:inherit;font-size:12.5px;font-weight:700;margin:10px 0 0;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#111;color:var(--ink2);cursor:pointer}
.gd-replay:hover,.gd-play:hover{color:var(--ink);border-color:#777}
.gd-slowpair input[type=range]{width:100%;max-width:320px;margin-top:8px}
/* one tree */
.gd-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px}
.gd-pair .gd-grid{height:calc(7 * 66px + 12px)}
.gd-eralabel{margin:0 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#9a9a9a}
.gd-era.forever .gd-eralabel{color:#ffd75e}
.gd-era.classic .gd-tree{filter:saturate(.6)}
.gd-rowtag{position:absolute;left:50%;top:100%;transform:translate(-50%,3px);white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#0b0b0d;background:#ffd75e;padding:1px 6px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.gd-era.classic .gd-rowtag{background:#cfcfcf}
.gd-moves{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.gd-moves li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink2)}
.gd-moves li img.sm{width:26px;height:26px;border-radius:6px;border:1px solid #000}
.gd-moves li b{color:var(--ink);white-space:nowrap}
.gd-moves li span{min-width:0}
.gd-tree.one{max-width:340px}
.gd-tree.one .gd-grid{margin:10px 8px 8px}
.gd-links{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.gd-links line.req{stroke:#e8c04a;stroke-width:3;stroke-linecap:round;opacity:.95;filter:drop-shadow(0 0 3px rgba(255,209,0,.5))}
.gd-links path.reqhead{fill:#e8c04a;stroke:none;stroke-dasharray:none;stroke-dashoffset:0;filter:drop-shadow(0 0 3px rgba(255,209,0,.5))}
.gd-treewrap{position:relative;display:grid;grid-template-columns:340px minmax(0,1fr);gap:26px;align-items:start}
.gd-callouts{position:relative;min-height:100%;padding-top:2px}
.gd-callout{position:absolute;left:0;right:0;margin:0;font-size:15px;line-height:1.45;color:var(--ink);opacity:0;transform:translateX(-6px);transition:opacity .5s .5s,transform .5s .5s}
.gd-tree.one[data-ghosts]~.gd-callouts .gd-callout{opacity:1;transform:none}
.gd-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.gd-leaders path{fill:none;stroke:rgba(255,215,94,.55);stroke-width:1.2;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset .8s ease-out .6s}
.gd-leaders circle{fill:#ffd75e}
.gd-tree.one[data-ghosts]~.gd-leaders path{stroke-dashoffset:0}
.gd-ghost{position:absolute;z-index:3;width:56px;height:56px;margin:-6px 0 0 -6px;display:grid;place-items:end center;padding-bottom:3px;border:2px dashed #9fd8ff;border-radius:8px;opacity:0;transition:opacity .4s .3s;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 12px rgba(127,199,255,.55),inset 0 0 10px rgba(127,199,255,.3)}
.gd-links{z-index:4}

.gd-tree.one[data-ghosts] .gd-ghost{opacity:.9}
.gd-ghost i{font-style:italic;font-size:10px;letter-spacing:.02em;color:#dff4ff;background:rgba(8,8,10,.75);padding:1px 5px;border-radius:4px;transform:translateY(12px)}
.gd-tile.dim img{opacity:.22}
.gd-tile.dim .m{opacity:.3}
.gd-tile.dim{pointer-events:none}
.gd-tile.focus img{box-shadow:0 0 0 2px var(--sc,#555),0 0 16px rgba(255,215,94,.55)}
.gd-onetree .gd-detail{margin-top:10px}
.gd-tree.one{overflow:visible}
/* one tree, the space around it: a points ladder between the two trees (the calculator's gate, (row - 1) x 5), and a side key beside the
   trees (under the plates when the chapter has plates): the lit tiles with the row chips their tiles wear, then every tile in the tree
   by its rim colour with the real icons. Tapping a colour lights those tiles; a lit tile's row rings it in both trees. */
.gd-onetree{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 24px}
.gd-onetree>.gd-pair{flex:0 1 680px;min-width:0}
.gd-onetree>.gd-otside{flex:1 1 250px;min-width:0}
.gd-onetree>.gd-detail{flex:1 1 100%;min-width:0;margin:0}
@media (min-width:761px){.gd-onetree>.gd-detail{order:3}}
.gd-pair{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);column-gap:8px}
.gd-ladder{position:relative;min-width:0}
.gd-ladder .gd-eralabel{text-align:center;letter-spacing:.06em;color:#8a7d55}
.gd-ladder ol{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.gd-ladder ol::before{content:"";position:absolute;left:50%;top:var(--y1,0);height:calc(var(--y7,0px) - var(--y1,0px));width:1px;background:linear-gradient(#5a5030,#2e2a1e)}
.gd-ladder li{position:absolute;left:50%;transform:translate(-50%,-50%);min-width:26px;padding:3px 0;font-family:Cinzel,Georgia,serif;font-size:12px;font-weight:700;line-height:1;text-align:center;font-variant-numeric:lining-nums tabular-nums;color:#b8a570;background:#121214;border:1px solid #34301f;border-radius:5px;transition:background .2s,color .2s,border-color .2s}
.gd-ladder li.c{background:#cfcfcf;border-color:#cfcfcf;color:#0b0b0d}
.gd-ladder li.f{background:#ffd75e;border-color:#ffd75e;color:#0b0b0d}
.gd-otside .gd-eralabel{margin:0 0 8px}
.gd-beat:has(.gd-onetree.sided)>.gd-w{align-self:start}
.gd-aside>.gd-otside{margin-top:14px;padding:14px 14px 12px;background:rgba(20,20,22,.85);border:1px solid var(--line);border-radius:10px}
.gd-otmoves{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:6px}
.gd-otmove{--sc:#555;display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"i n c" "i s s";align-items:center;column-gap:10px;row-gap:4px;width:100%;margin:0;padding:8px 10px;font:inherit;text-align:left;color:var(--ink2);background:rgba(10,10,12,.72);border:1px solid #26262b;border-radius:8px;cursor:pointer;transition:border-color .2s,background .2s}
.gd-otmove.new{--sc:#4ade80}.gd-otmove.changed{--sc:#fbbf24}.gd-otmove.moved{--sc:#60a5fa}.gd-otmove.gone{--sc:#8a3a3a}
.gd-otmove img.sm{grid-area:i;align-self:start;width:30px;height:30px;border-radius:6px;border:1px solid #000;box-shadow:0 0 0 2px var(--sc)}
.gd-otmove.gone img.sm{filter:grayscale(.6) brightness(.8);border:1px dashed #c97a7a}
.gd-otmove b{grid-area:n;min-width:0;font-size:14.5px;color:var(--ink)}
.gd-rcs{grid-area:c;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.gd-otsay{grid-area:s;font-size:13px;line-height:1.4}
.gd-otmove:hover,.gd-otmove.on{border-color:#5a5030;background:rgba(34,29,14,.62)}
.gd-otmove:focus-visible,.gd-otk:focus-visible{outline:2px solid #ffd75e;outline-offset:2px}
.gd-rc{font-size:10.5px;font-weight:700;letter-spacing:.04em;line-height:1;padding:3px 6px;border-radius:4px;color:#0b0b0d;background:#ffd75e;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.gd-rc.c{background:#cfcfcf}.gd-rc.n{background:#4ade80}
.gd-rc.x{padding:2px 5px;color:#f08080;background:rgba(40,10,10,.6);border:1px dashed #c97a7a;box-shadow:none}
.gd-rarr{position:relative;display:inline-block;width:13px;height:8px}
.gd-rarr::before{content:"";position:absolute;left:0;top:3px;width:8px;height:2px;background:#8a8a8a}
.gd-rarr::after{content:"";position:absolute;right:0;top:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #8a8a8a}
.gd-otkey{display:grid;gap:2px}
.gd-otk{--sc:#555;--st:#a0a0a0;display:grid;grid-template-columns:12px 24px auto minmax(0,1fr);align-items:center;column-gap:9px;width:100%;margin:0;padding:4px 8px;font:inherit;text-align:left;color:var(--ink2);background:none;border:1px solid transparent;border-radius:7px;cursor:pointer;transition:background .2s,border-color .2s}
.gd-otk.new{--sc:#4ade80;--st:#4ade80}.gd-otk.changed{--sc:#fbbf24;--st:#fbbf24}.gd-otk.moved{--sc:#60a5fa;--st:#60a5fa}.gd-otk.gone{--sc:#c97a7a;--st:#f08080}
.gd-otk .sw{width:12px;height:12px;box-sizing:border-box;border-radius:3px;background:#0b0b0d;box-shadow:0 0 0 2px var(--sc)}
.gd-otk.gone .sw{box-shadow:none;border:1.5px dashed var(--sc)}
.gd-otk>b{font-family:Cinzel,Georgia,serif;font-size:18px;line-height:1;text-align:right;font-variant-numeric:lining-nums tabular-nums;color:var(--st)}
.gd-otk>span:not(.gd-fan){font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#d8d8d8}
.gd-otk .gd-fan{grid-column:auto;justify-content:flex-end}
.gd-otk .gd-fan img,.gd-otk .gd-fan i{width:22px;height:22px;margin-left:-6px}
.gd-otk .gd-fan>:first-child{margin-left:0}
.gd-otk .gd-fan i.more{width:auto;min-width:22px;padding:0 5px;margin-left:4px;font-size:10px}
.gd-otk.gone .gd-fan img{filter:grayscale(.6) brightness(.8);border:1px dashed #c97a7a}
.gd-otk.same .gd-fan img{filter:saturate(.35) brightness(.75)}
.gd-otk:hover,.gd-otk[aria-pressed="true"]{background:rgba(255,255,255,.035);border-color:color-mix(in srgb,var(--sc) 45%,#2e2e33)}
.gd-otnote{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.gd-onetree[data-show="new"] .gd-tile.new:not(.out),.gd-onetree[data-show="changed"] .gd-tile.changed:not(.out),.gd-onetree[data-show="moved"] .gd-tile.moved:not(.out),.gd-onetree[data-show="same"] .gd-tile.same:not(.out),.gd-onetree[data-show="gone"] .gd-tile.gone:not(.out){pointer-events:auto}
.gd-onetree[data-show="new"] .gd-tile.new img,.gd-onetree[data-show="changed"] .gd-tile.changed img,.gd-onetree[data-show="moved"] .gd-tile.moved img,.gd-onetree[data-show="same"] .gd-tile.same img,.gd-onetree[data-show="gone"] .gd-tile.gone img,
.gd-onetree[data-show="new"] .gd-tile.new .m,.gd-onetree[data-show="changed"] .gd-tile.changed .m,.gd-onetree[data-show="moved"] .gd-tile.moved .m,.gd-onetree[data-show="same"] .gd-tile.same .m,.gd-onetree[data-show="gone"] .gd-tile.gone .m{opacity:1}
.gd-onetree[data-show="new"] .gd-tile.new img,.gd-onetree[data-show="changed"] .gd-tile.changed img,.gd-onetree[data-show="moved"] .gd-tile.moved img,.gd-onetree[data-show="same"] .gd-tile.same img,.gd-onetree[data-show="gone"] .gd-tile.gone img{box-shadow:0 0 0 2px var(--sc),0 0 16px color-mix(in srgb,var(--sc) 60%,transparent)}
.gd-onetree .gd-tile.hl img{box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(255,215,94,.45),0 0 20px rgba(255,215,94,.7)}
@media (max-width:640px){.gd-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gd-ladder,.gd-otpts{display:none}.gd-otmove{padding:7px 8px;column-gap:8px}.gd-otmove img.sm{width:26px;height:26px}.gd-otmove{grid-template-columns:26px minmax(0,1fr) auto}}
@media (max-width:960px){.gd-onetree.sided .gd-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gd-onetree.sided .gd-ladder,.gd-beat:has(.gd-onetree.sided) .gd-otpts{display:none}}
@media (prefers-reduced-motion:reduce){.gd-ladder li,.gd-otmove,.gd-otk{transition:none}}

/* in short */
.gd-short{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;counter-reset:c}
.gd-short>li{position:relative;padding:14px 16px 12px 66px;background:var(--panel);border:1px solid var(--line);border-radius:8px;counter-increment:c}
.gd-short>li>img.gd-shorticon,.gd-short>li>.noicon{position:absolute;left:14px;top:14px;width:40px;height:40px;border-radius:8px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}
.gd-short h3{margin:0 0 8px;font-size:15.5px;line-height:1.3;color:var(--ink)}
.gd-short p{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.gd-short ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.gd-short ul li{position:relative;padding-left:14px;font-size:14px;line-height:1.45;color:var(--ink2)}
.gd-short ul li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--gold2)}
.gd-short ul li b{color:#ffd75e;font-weight:600}
.gd-refs{margin-top:8px !important;font-size:12.5px !important}
/* trees */
.gd-flip{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.gd-flip button{font:inherit;font-size:13px;font-weight:700;padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);cursor:pointer;min-height:34px}
.gd-flip button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1a1408}
.gd-legend{margin-left:auto;font-size:12px;color:var(--muted);display:flex;gap:10px;align-items:center}
.gd-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.gd-legend i.new,.gd-pill.new{background:#4ade80}.gd-legend i.changed,.gd-pill.changed{background:#fbbf24}.gd-legend i.moved,.gd-pill.moved{background:#60a5fa}.gd-legend i.same,.gd-pill.same{background:#555}.gd-legend i.gone,.gd-pill.gone{background:#8a3a3a}
.gd-trees{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:12px 0 0}
.gd-tree{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0d0d0d var(--bg) center/cover no-repeat}
.gd-tree::before{content:"";position:absolute;inset:0;background:rgba(6,6,8,.62)}
.gd-tree h3{position:relative;margin:0;padding:10px 12px;font-size:15px;background:rgba(0,0,0,.35)}
.gd-grid{--rowh:62px;position:relative;height:calc(7 * 62px + 12px);margin:0 8px 8px}
.gd-tile{position:absolute;width:44px;height:44px;margin:0;padding:0;border:0;background:none;cursor:pointer;transition:left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1),opacity .5s ease;will-change:top,left}
.gd-tile img{display:block;width:44px;height:44px;border-radius:7px;border:1px solid #000;box-shadow:0 0 0 2px var(--sc,#555),0 2px 8px rgba(0,0,0,.6)}
.gd-tile.same img{filter:saturate(.35) brightness(.6)}
.gd-tile.new{--sc:#4ade80}.gd-tile.changed{--sc:#fbbf24}.gd-tile.moved{--sc:#60a5fa}.gd-tile.same{--sc:#555}.gd-tile.gone{--sc:#8a3a3a}
.gd-tile .m{position:absolute;right:-4px;bottom:-4px;min-width:16px;padding:0 3px;font-size:10px;font-weight:700;line-height:16px;text-align:center;border-radius:5px;background:#000;color:var(--ink);border:1px solid var(--line)}
.gd-tile.out{opacity:0;pointer-events:none}
.gd-grid.notrans .gd-tile{transition:none!important}
.gd-tile.gone.out{opacity:0}
.gd-tile.gone{--sc:#8a3a3a}.gd-tile.gone img{filter:grayscale(.6) brightness(.8);border-style:dashed;border-color:#c97a7a}
.gd-tile.gone .gh{display:grid;place-items:center;width:44px;height:44px;border-radius:7px;border:1px dashed #8a3a3a;background:rgba(40,10,10,.6);color:#c97a7a;font-size:11px;font-weight:700}
.gd-tile.lit img{box-shadow:0 0 0 2px #fff,0 0 14px rgba(255,255,255,.6)}
.gd-tile.focus img{box-shadow:0 0 0 2px var(--sc,#555),0 0 18px rgba(255,215,94,.6)}
.gd-links line.req{transition:opacity .4s}
.gd-detail{margin:12px 0 0;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:8px;max-width:960px}
.gd-detail[hidden]{display:none}
.gd-detail h4{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;font-size:16px}
.gd-detail h4 img{width:32px;height:32px;border-radius:6px;border:1px solid #000}
.gd-detail p{margin:6px 0 0;font-size:14px;line-height:1.5}
.gd-detail .gd-meta{color:var(--muted);font-size:12.5px}
.gd-detail a{color:var(--gold);font-size:13px}
/* ledger entries, shared by talents, spells, legacy */
.gd-ledger{margin-top:8px}
.gd-entries{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.gd-entry{display:flex;gap:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:8px;scroll-margin-top:60px}
.gd-entry>img,.gd-entry>.noicon{flex:none;width:36px;height:36px;border-radius:7px;border:1px solid #000}
.gd-entry>.noicon{border:1px dashed #8a3a3a;background:rgba(40,10,10,.6)}
.gd-entry>div{min-width:0;flex:1}
.gd-entry h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 4px;font-size:15px;color:var(--ink)}
.gd-entry h4 a.gd-tlink{color:inherit;text-decoration:none}.gd-entry h4 a.gd-tlink:hover{text-decoration:underline}
.gd-pill{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:4px;color:#111}
.gd-pill.same{color:#ddd}.gd-pill.gone{color:#f3d2d2}.gd-pill.rw{background:#c39bff}.gd-pill.num{background:#8bd3ff}.gd-pill.note{background:#666;color:#eee}
.gd-was,.gd-now{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)}
.gd-now{color:var(--ink)}
.gd-was b,.gd-now b{color:var(--muted);font-weight:600}
.gd-was del{color:#f0a0a0;text-decoration:line-through;text-decoration-color:rgba(240,120,120,.6)}
.gd-now ins{color:#9be59b;text-decoration:none;background:rgba(80,200,80,.12);border-radius:2px}
.gd-note{margin:4px 0 0;font-size:13px;color:#c39bff}
.gd-meta{margin:5px 0 0;font-size:12.5px;color:var(--muted)}
.gd-hist{display:block;margin-top:5px;font-size:12.5px;color:var(--gold2)}
.gd-same{margin:10px 0 0}
.gd-same summary{cursor:pointer;font-size:13.5px;color:var(--ink2);padding:6px 0}
.gd-same summary:hover{color:var(--ink)}
.gd-same .gd-entries{margin-top:8px}
.gd-same .gd-entry.same{background:transparent}
/* coefficients */
.gd-sp{margin:12px 0 0;font-size:14px}
.gd-sp input{width:96px;margin-left:8px;padding:7px 10px;font:inherit;font-size:15px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px}
.gd-tablewrap{overflow-x:auto;margin:10px 0 0;max-width:960px}
.gd-coef{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.gd-coef th{text-align:left;padding:8px 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.gd-coef td{padding:7px 10px;border-bottom:1px solid #2a2a2a;white-space:nowrap;color:var(--ink2)}
.gd-coef td:first-child{color:var(--ink);display:flex;align-items:center;gap:8px}
.gd-coef img.sm{width:22px;height:22px;border-radius:5px;border:1px solid #000}
.gd-coef .sp{color:var(--muted)}
.gd-coef.live .sp{color:var(--ink)}
.gd-coef.live td.sp.up{color:#9be59b}
/* races */
/* Races (Chris, 27 Sep: balance it and fill it). The head's left holds the facts and the lineup: the six faces in the game's gold
   portrait ring, a faction-coloured outer ring, one faction a group, each a jump to its card. The cards run three across, a faction
   a row, all one height; each racial is a 44 px row with its cooldown or Passive at the end. The plate lands under the tapped row. */
.gd-racetop{display:flex;flex-direction:column;gap:12px;min-width:0}
.gd-racetop .gd-sub{margin:0}
.gd-racetop .gd-sub b{color:var(--ink);font-weight:600}
.gd-lineup{display:flex;flex-wrap:wrap;gap:12px 18px;margin:2px 0 0}
.gd-lineup-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.gd-lineup-f+.gd-lineup-f{padding-left:18px;border-left:1px solid rgba(255,255,255,.08)}
.gd-lineup-f>p{margin:0 0 0 6px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--fc)}
.gd-lineup-f ul{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.gd-lineface{display:flex;flex-direction:column;align-items:center;gap:11px;width:80px;min-height:44px;padding:4px 2px 6px;border-radius:10px;font-size:12px;line-height:1.2;text-align:center;text-decoration:none;color:var(--ink2)}
.gd-lineface i{position:relative;display:block;width:64px;height:64px}
.gd-lineface img{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;background:#0b0b0d;border:2px solid #b8901f;box-shadow:0 0 0 2px #0b0b0d,0 0 0 3px color-mix(in srgb,var(--fc) 60%,transparent),0 6px 14px rgba(0,0,0,.55);transition:transform .15s ease-out,border-color .15s}
.gd-lineface .gd-newto{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%)}
.gd-lineface:hover,.gd-lineface:focus-visible{color:var(--ink)}
.gd-lineface:hover img,.gd-lineface:focus-visible img{transform:translateY(-2px);border-color:var(--gold)}
.gd-newto{display:inline-block;padding:1px 6px;border-radius:999px;font-style:normal;font-weight:700;font-size:9px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#1a1405;background:#ffd75e;box-shadow:0 0 0 2px #0b0b0d}
.gd-racehint{margin:0;font-size:13px;color:var(--muted)}
.gd-races{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 0}
.gd-race{position:relative;display:flex;flex-direction:column;padding:12px 10px 8px;background:var(--panel);border:1px solid var(--line);border-top:2px solid color-mix(in srgb,var(--fc,#555) 70%,#000);border-radius:10px;scroll-margin-top:64px;transition:border-color .3s,box-shadow .3s}
.gd-race.lit{border-color:#b8901f;box-shadow:0 0 0 1px #b8901f,0 0 24px rgba(255,209,0,.16)}
.gd-race .gd-racehead{display:flex;align-items:center;gap:12px;margin:0 0 6px;padding:0 4px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.gd-race .gd-racehead span{display:flex;flex-direction:column;gap:3px;min-width:0}
.gd-race .gd-racehead b{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:16px;line-height:1.15;color:var(--ink)}
.gd-race .gd-racehead small{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--fc)}
.gd-race .gd-racehead .gd-newto{align-self:flex-start;margin:3px 0 0 auto}
.gd-race .gd-racethumb{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;background:#0b0b0d;border:2px solid #b8901f;box-shadow:0 0 0 2px #0b0b0d,0 0 0 3px color-mix(in srgb,var(--fc) 50%,transparent)}
.gd-races .gd-racials{display:flex;flex-direction:column;gap:2px}
.gd-races .gd-racial{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:4px 10px;width:100%;min-height:44px;padding:6px 8px;border-radius:8px;border:1px solid transparent;background:none;font:inherit;font-size:13.5px;line-height:1.2;text-align:left;color:var(--ink);cursor:pointer}
.gd-races .gd-racial img.sm{width:28px;height:28px;border-radius:6px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}
.gd-races .gd-racial span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-races .gd-racial small{font-size:11px;color:var(--muted);white-space:nowrap}
.gd-races .gd-racial:hover,.gd-races .gd-racial.on{border-color:#b8901f;background:rgba(255,209,0,.08)}
.gd-races .gd-racial.on img.sm{box-shadow:0 0 0 2px var(--gold),0 0 10px rgba(255,209,0,.5)}
.gd-races .gd-racial.on small{color:var(--ink2)}
.gd-racedetail{grid-column:1/-1;margin:0;padding:12px 14px;border-radius:8px;border:1px solid #6a5a1c;background:#111}
.gd-racedetail[hidden]{display:none}
.gd-racedetail h4{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 6px;font-size:15px;color:var(--ink)}
.gd-racedetail h4 img{width:28px;height:28px;border-radius:6px;border:1px solid #000}
.gd-racedetail h4 small{font-weight:400;font-size:12px;color:var(--muted)}
.gd-racedetail p{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.gd-racedetail .gd-hist{margin-top:6px}
@media (min-width:761px) and (max-width:1060px){.gd-races .gd-racial{grid-template-columns:28px minmax(0,1fr)}.gd-races .gd-racial small{grid-column:2}}
@media (max-width:640px){.gd-lineup{flex-direction:column;gap:12px}.gd-lineup-f+.gd-lineup-f{padding:12px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.08)}.gd-lineup-f ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.gd-lineface{width:auto}.gd-races{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gd-lineface img,.gd-race{transition:none}.gd-lineface:hover img,.gd-lineface:focus-visible img{transform:none}}
/* practice */
.gd-keys{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0}
.gd-key{position:relative;width:60px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--ink2)}
.gd-key img{display:block;width:60px;height:60px;border-radius:8px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}
.gd-key .k{position:absolute;top:2px;left:4px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}
.gd-key .n{display:block;margin-top:4px;font-size:10.5px;line-height:1.2;text-align:center;white-space:normal}
.gd-key.on img{box-shadow:0 0 0 2px var(--gold),0 0 12px rgba(255,209,0,.5)}
.gd-dummy{display:flex;align-items:center;gap:12px;margin:14px 0 0;max-width:560px;font-size:13px;color:var(--muted)}
.gd-hp{flex:1;height:14px;border:1px solid var(--line);border-radius:4px;background:#1a1a1a;overflow:hidden}
.gd-hp i{display:block;height:100%;background:#3fa34d;transition:width .3s}
/* builds */
.gd-spec{display:grid;gap:8px;margin:14px 0 0;max-width:520px}
.gd-spec div{display:grid;grid-template-columns:26px 70px 1fr 44px;align-items:center;gap:10px;font-size:14px}
.gd-spec img.sm{width:26px;height:26px;border-radius:6px;border:1px solid #000}
.gd-spec b{color:var(--tc,var(--ink))}
.gd-spec i{display:block;height:12px;border-radius:3px;background:var(--tc,var(--gold2));box-shadow:0 0 10px color-mix(in srgb,var(--tc,#ffd75e) 40%,transparent)}
.gd-spec span{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)}
.gd-top{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:14px;counter-reset:b;max-width:560px}
.gd-top li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel);counter-increment:b}
.gd-top li::before{content:counter(b);font-family:Cinzel,Georgia,serif;font-weight:700;color:var(--tc,#ffd75e);width:16px}
.gd-top a{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.gd-top a img.sm{width:24px;height:24px;border-radius:6px;border:1px solid #000}
.gd-top a b{color:var(--tc,#ffd75e)}
.gd-top span{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
/* history */
.gd-build{margin-top:14px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.gd-build h3{margin:0 0 6px;font-size:16px}
.gd-hrows{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.gd-hrows li{display:flex;gap:10px;font-size:13.5px}
.gd-hrows li img.sm{flex:none;width:26px;height:26px;border-radius:6px;border:1px solid #000;margin-top:2px}
.gd-hrows li b{color:var(--ink)}
.gd-none{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.gd-blue{margin:10px 12px 12px;padding:0;list-style:none;display:grid;gap:6px;font-size:13px;line-height:1.5;color:var(--ink2)}
.gd-blue b{color:var(--ink)}
.gd-blue a{color:var(--gold)}
.gd-blue .gd-bluehot{font-size:12.5px;color:var(--muted)}
@media (max-width:760px){.gd-chapters{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.gd-chapters li{min-width:0}.gd-chapters a{min-width:0;font-size:12.5px;line-height:1.2;padding:6px 8px 6px 6px;align-items:center}.gd-chapters .gd-cn{white-space:normal;overflow:visible;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.gd-ct{display:none}.gd-pair .gd-grid{height:calc(7 * 58px + 12px)}.gd-spec div{grid-template-columns:24px 60px 1fr 40px}.gd-races{grid-template-columns:1fr}.gd-racials{gap:2px}.gd-racial{width:calc(25% - 2px)}.gd-bar-home{font-size:12px}.gd-bar-now{font-size:12.5px}.gd-race.figured{grid-template-columns:minmax(0,1fr) 96px}.gd-racefig{width:96px;max-height:240px}.gd-chhead{min-height:230px}.gd-chtext{padding:14px 16px}.gd-say{padding-left:26px}.gd-face{width:52px;height:52px}.gd-say .gd-lead{padding:10px 12px 10px 36px;font-size:15px}.gd-chalk{font-size:20px}.gd-chalk-tag{font-size:18px}.gd-beat:has(.gd-aside){grid-template-columns:1fr;grid-template-areas:"lead" "w" "aside"}.gd-duo{grid-template-columns:1fr}.gd-lvhead{margin-left:0}.gd-lvrow{grid-template-columns:24px minmax(0,1fr);padding-bottom:26px}.gd-lvrow .gd-lvtrack{grid-column:1/3;margin:14px 14px 0}.gd-counts{gap:6px}.gd-counts>div{padding:8px}.gd-counts .gd-cnt{font-size:22px}.gd-hitrow{grid-template-columns:24px minmax(0,1fr);row-gap:6px}.gd-hitrow span{grid-column:1/3}.gd-subch{font-size:21px}.gd-sprows{grid-template-columns:1fr}.gd-sprow{grid-template-columns:22px 96px minmax(0,1fr) 34px}.gd-sprow b{font-size:12px}.gd-sprow .ratio{font-size:15px}.gd-basebars{gap:3px;height:150px}.gd-basebar .v{font-size:13px}.gd-basebar small{font-size:9.5px}.gd-lead{font-size:16px}.gd-twin{grid-template-columns:1fr 1fr}.gd-big{font-size:26px}.gd-slow,.gd-cast2{grid-template-columns:62px 1fr;grid-template-rows:auto auto}.gd-slow-num{grid-column:2}.gd-rank{margin-left:0}.gd-loopctl{flex-wrap:wrap}.gd-fof{grid-template-columns:1fr}.gd-fig{max-width:420px}}
@media (max-width:640px){.gd-ch{padding:10px 10px 18px}.gd-pair{gap:8px}.gd-rowtag{font-size:9.5px;padding:1px 4px}.gd-tree.one .gd-grid{margin:8px 4px 6px}.gd-lanenote{top:auto;bottom:-30px;font-size:15px}.gd-lane{margin-bottom:22px}.gd-yard{gap:8px}.gd-caster .gd-face{width:52px;height:52px}.gd-casterfig{height:120px}.gd-lanenote{display:none}.gd-shatterpop{position:static;align-self:flex-start;margin:10px 0 0;padding:4px 8px 4px 4px;transform:none}.gd-stage.crit .gd-shatterpop{transform:none}.gd-shatterpop .gd-chalk{font-size:19px}.gd-shatterpop img.sm{width:24px;height:24px}.gd-target{width:84px}.gd-dummyfig{height:110px}.gd-figure{height:96%;right:-6%;bottom:-3%;opacity:.9}.gd-chhead.figured{min-height:250px}.gd-lanenote{font-size:16px}.gd-grid{--rowh:56px;height:calc(7 * 56px + 12px)}.gd-tile{width:40px;height:40px}.gd-tile img,.gd-tile.gone .gh{width:40px;height:40px}.gd-legend{margin-left:0}.gd-entry{padding:10px 12px}.gd-key{width:52px}.gd-key img{width:52px;height:52px}.gd-w{padding:12px}.gd-plates{grid-template-columns:1fr}}
@media (max-width:640px){.gd-tree.one .gd-tile{width:min(40px,calc(25% - 6px));height:auto;aspect-ratio:1/1}.gd-tree.one .gd-tile img,.gd-tree.one .gd-tile.gone .gh{width:100%;height:100%;border-radius:6px}.gd-tree.one .gd-tile .m{right:-3px;bottom:-3px;min-width:13px;padding:0 2px;font-size:9px;line-height:13px;border-radius:4px}.gd-tree.one .gd-rowtag{font-size:9px;padding:0 3px;transform:translate(-50%,2px)}}
@media (prefers-reduced-motion:reduce){.gd-reveal{opacity:1;transform:none;transition:none}.gd-ringwrap ellipse,.gd-tick path,.gd-links path{stroke-dashoffset:0;transition:none}.gd-stage.fly .gd-bolt:not(.lance),.gd-stage.lancefly .gd-bolt.lance{animation:none;opacity:1;transform:translateX(calc(100% * var(--lanew,10)))}.gd-stage.proc .gd-timer{animation:none}.gd-buff,.gd-shatterpop,.gd-state,.gd-lanenote,.gd-charges i{transition:none}.gd-stage.critflash .gd-dummyfig,.gd-stage.pyrofly .gd-bolt.lance,.gd-stage.cash .gd-dummyfig{animation:none}.gd-gauge i{transition:none}.gd-stage.pyrofly .gd-bolt.lance{opacity:1;transform:translateX(calc(100% * var(--lanew,10)))}.gd-cast2.run .prog{animation:none;transform:scaleX(1)}.gd-basebar i{transform:scaleY(1);transition:none}.gd-basebar .v.on{opacity:1}.gd-sprow .bars i{transition:none}.gd-tile,.gd-pips i{transition:none}.gd-slow.run .fill,.gd-slow.run .drain{animation:none;transform:scaleX(1)}.gd-slow.run .drain{transform:scaleX(0)}}
/* The video in the Watch box, and a player of one chapter's slice of the same file in every chapter: the poster frame with a play
   button in the chapter's colour, a bar under the picture that is always there (play, a track you can drag, the time in this part,
   CC, full screen), the jump to the full video. A chapter head with a player is two columns, the words left and the player right,
   the chapter's still blurred behind, no presenter render (he talks in the lines under it); one column on phones. The trees half
   and the plain sections put the player to the right of the words, under them on phones. */
.gd-video video{background:#000}
.gd-clip{position:relative;z-index:3;margin:0;width:100%;max-width:520px;--pc:var(--gold);border-radius:10px;background:#0b0b0d;border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 36px rgba(0,0,0,.55);overflow:hidden}
.gd-ch[data-tree] .gd-clip{--pc:var(--ac)}
.gd-clipbox{position:relative;aspect-ratio:16/9;background:#000}
.gd-clipbox img,.gd-clipbox video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border:0;background:#000}
.gd-clipbox video{opacity:0}
.gd-clip.on .gd-clipbox video{opacity:1}
.gd-clip.on .gd-clipbox img{visibility:hidden}
.gd-clipplay{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--pc) 70%,#fff);background:color-mix(in srgb,var(--pc) 84%,#000);box-shadow:0 0 0 7px color-mix(in srgb,var(--pc) 22%,transparent),0 8px 24px rgba(0,0,0,.6);cursor:pointer;transition:transform .2s}
.gd-clipplay:hover,.gd-clipplay:focus-visible{transform:scale(1.08)}
.gd-clipplay i{position:absolute;left:50%;top:50%;width:0;height:0;margin:-10px 0 0 -7px;border-style:solid;border-width:10px 0 10px 18px;border-color:transparent transparent transparent #0b0b0d}
.gd-clip.on .gd-clipplay{display:none}
.gd-clipbar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#141416;border-top:1px solid rgba(255,255,255,.08);color:#fff;font-size:12px}
.gd-clipbar button{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:28px;padding:0;border:0;border-radius:6px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font:700 10.5px/1 "Open Sans",system-ui,sans-serif}
.gd-clipbar button:hover{background:rgba(255,255,255,.22)}
.gd-cb-play::before{content:"";display:block;width:0;height:0;margin-left:2px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
.gd-clip.playing .gd-cb-play::before{width:9px;height:11px;margin:0;border:0;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.gd-cb-track{flex:1;position:relative;height:20px;cursor:pointer;outline-offset:2px;touch-action:none}
.gd-cb-track::before{content:"";position:absolute;left:0;right:0;top:8px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.gd-cb-track i{position:absolute;left:0;right:0;top:8px;height:4px;border-radius:2px;background:var(--pc);transform:scaleX(0);transform-origin:left}
.gd-cb-track b{position:absolute;left:0;top:4px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;border:2px solid var(--pc);box-sizing:border-box;box-shadow:0 1px 4px rgba(0,0,0,.6);opacity:0;transition:opacity .2s}
.gd-clip.on .gd-cb-track b,.gd-cb-track:hover b,.gd-clip.scrub .gd-cb-track b{opacity:1}
.gd-cb-time{flex:none;min-width:74px;text-align:center;font-variant-numeric:tabular-nums;color:#e6e6e6}
.gd-cb-cc[aria-pressed="true"]{background:var(--pc);color:#0b0b0d}
.gd-cb-full::before{content:"";display:block;width:11px;height:11px;border:2px solid #fff;border-radius:2px}
.gd-clip figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px 8px;font-size:12px;color:#c9c9c9;background:#0f0f11}
.gd-clip figcaption .gd-watchpart{margin:0;padding:4px 9px;font-size:11.5px}
.gd-clip:fullscreen{display:flex;flex-direction:column;width:100%;max-width:none;border-radius:0;border:0;background:#000}
.gd-clip:fullscreen .gd-clipbox{flex:1;aspect-ratio:auto}
.gd-clip:fullscreen .gd-clipbox video{object-fit:contain}
.gd-clip:fullscreen figcaption{display:none}
.gd-chhead.clipped{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:20px 32px;align-items:center;min-height:0;padding:26px 28px;background:var(--art,var(--chbg)) left center/cover no-repeat #0e0e10}
.gd-chhead.clipped::after{background:rgba(8,8,10,.12)}
.gd-chhead.clipped:not([style*="--art"])::after{background:rgba(8,8,10,.72)}
@media (min-resolution:1.5dppx){.gd-chhead.clipped[style*="--art2"]{background-image:var(--art2)}}
.gd-chhead.clipped .gd-kicker,.gd-chhead.clipped .gd-chnum{text-shadow:0 1px 6px #000,0 0 14px rgba(0,0,0,.8)}
.gd-chhead.clipped.compact{grid-template-columns:minmax(0,1fr) minmax(0,460px);margin-top:34px;padding:22px 28px}
.gd-chhead.clipped.compact .gd-subch{margin:0;padding:0;border:0;font-size:clamp(26px,3.4vw,38px);line-height:1.05}
.gd-chhead.clipped.compact .gd-subch .gd-watchpart{margin-left:12px}
.gd-chhead.clipped .gd-chtext{padding:0}
.gd-chhead.clipped .gd-clip{justify-self:end}
/* Races and What Mages build open with the same chapter head as the chapters above them (27 Sep): the title at chapter size, the line
   under it as a plain sub. */
.gd-sec>.gd-chhead h2{margin:0;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:clamp(34px,5vw,56px);line-height:1;color:#ffd75e;text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 30px rgba(255,209,0,.18)}
.gd-sec>.gd-chhead+.gd-afterhead{margin:14px 0 0}
.gd-subhead,.gd-sechead2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:14px 28px;align-items:center;max-width:1040px}
.gd-subhead{margin:34px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.gd-subhead .gd-subch{margin:0;padding-top:0;border-top:0}
.gd-sechead2 .gd-sub{max-width:none}
@media (max-width:760px){.gd-chhead.clipped{grid-template-columns:1fr;gap:14px;padding:16px 14px 14px;background-size:auto 100%}.gd-chhead.clipped[style*="--art"]::after{background:linear-gradient(to bottom,rgba(8,8,10,.74) 0,rgba(8,8,10,.66) 120px,rgba(8,8,10,.3) 45%,rgba(8,8,10,.2) 100%)}#races .gd-chhead.clipped,#builds .gd-chhead.clipped{background-position:0 -112px}.gd-chhead.clipped.compact{grid-template-columns:1fr}.gd-chhead.clipped .gd-chtext{padding:0 2px}.gd-chhead.clipped .gd-clip{max-width:none;justify-self:stretch}.gd-subhead,.gd-sechead2{grid-template-columns:1fr}.gd-subhead .gd-clip,.gd-sechead2 .gd-clip{max-width:none}}
@media (prefers-reduced-motion:reduce){.gd-clipplay,.gd-cb-track b{transition:none}}
/* the landing on tablets and phones: the figure top right beside the words, the tally under them across the card; on phones in
   two columns, the odd plate across both */
@media (max-width:1100px){.gd-head{min-height:0;padding:26px 22px 18px;grid-template-rows:auto auto auto}.gd-hero{right:var(--hero-tr,2%);top:var(--hero-tt,-4px);bottom:auto;height:var(--hero-th,300px)}.gd-headtext{align-self:start;max-width:none;padding:0 0 24px}.gd-headtext>*{margin-right:190px}.gd-tally{max-width:none}.gd-hero{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 97%);mask-image:linear-gradient(to bottom,#000 72%,transparent 97%)}}

/* What Mages build: the share bars and the top builds on the left, the tapped build's three trees on the right under the player
   (under the list on phones); the share bars and the build rows are buttons, the calculator link sits under each row's numbers. */
.gd-buildgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:14px 28px;align-items:start;max-width:1040px}
.gd-buildhint{margin:14px 0 0;font-size:13px;color:var(--muted)}
.gd-spec{max-width:none}
.gd-specrow{display:grid;grid-template-columns:26px 70px 1fr 44px;align-items:center;gap:10px;width:100%;padding:4px 6px;margin:0 -6px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.gd-specrow:hover,.gd-specrow:focus-visible{border-color:color-mix(in srgb,var(--tc) 45%,transparent);background:rgba(255,255,255,.03)}
.gd-top{max-width:none}
.gd-top li{display:grid;grid-template-columns:16px minmax(0,1fr);row-gap:2px;padding:6px 12px 8px;transition:border-color .2s}
.gd-top li::before{grid-row:1/3;align-self:center}
.gd-top li.on{border-color:color-mix(in srgb,var(--tc) 60%,#000);box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 25%,transparent)}
.gd-buildrow{display:flex;align-items:center;gap:8px;width:100%;padding:2px 0;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer;font-variant-numeric:tabular-nums}
.gd-buildrow img.sm{width:24px;height:24px;border-radius:6px;border:1px solid #000}
.gd-buildrow b{color:var(--tc,#ffd75e)}
.gd-pts em{font-style:normal;font-weight:700;color:var(--tc)}
.gd-pts i{font-style:normal;color:var(--muted);margin:0 3px}
.gd-buildrow small{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.gd-buildrow{flex-wrap:wrap}.gd-buildrow .gd-with{font-size:12.5px;color:var(--ink2);font-style:italic}   /* what sets apart two rows with the same split */
.gd-buildopen{width:10px;height:10px;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.gd-buildrow[aria-expanded="true"] .gd-buildopen{transform:rotate(-135deg) translateY(-2px);border-color:var(--tc)}
.gd-buildgo{grid-column:2;font-size:12px;color:var(--gold);text-decoration:none}
.gd-buildgo:hover{text-decoration:underline}
.gd-buildtrees{margin-top:14px;padding:12px 12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.gd-buildtitle{margin:0 0 10px;font-size:13.5px;color:var(--ink2)}
.gd-buildpair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gd-buildpair .gd-eralabel{margin:0 0 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);overflow-wrap:anywhere}
@media (max-width:900px){.gd-buildpair .gd-eralabel{font-size:10.5px;letter-spacing:.03em}}
.gd-buildpair .gd-eralabel b{color:var(--tc)}
.gd-buildpair .gd-tree.one{max-width:none}
.gd-buildpair .gd-grid{height:calc(7 * 40px + 12px);margin:6px 4px 4px}
.gd-buildpair .gd-tile{width:28px;height:28px;pointer-events:none}
.gd-buildpair .gd-tile img{width:28px;height:28px;border-radius:5px}
.gd-buildpair .gd-tile .m{font-size:9px;line-height:14px;min-width:14px;right:-5px;bottom:-5px}
.gd-buildpair .gd-tile.np img{opacity:.28;filter:grayscale(.7)}
.gd-buildpair .gd-tile.np .m{opacity:.35}
.gd-buildpair .gd-tile.pt img{box-shadow:0 0 0 2px var(--tc),0 0 12px color-mix(in srgb,var(--tc) 55%,transparent)}
.gd-buildpair .gd-tile.pt .m{background:var(--tc);color:#000;border-color:var(--tc)}
.gd-buildlink{display:inline-block;margin-top:12px}
/* the class row: a class still to come links to its place on the Back to Class page, where the alert is */
.gd-classes li.soon a{position:relative;transition:border-color .2s,transform .2s}
.gd-classes li.soon a:hover,.gd-classes li.soon a:focus-visible{border-color:color-mix(in srgb,var(--cc) 55%,#000);transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 25%,transparent),0 8px 18px rgba(0,0,0,.45)}
.gd-classes li.soon a:hover img,.gd-classes li.soon a:focus-visible img{filter:none}
.gd-classes li.soon a:hover b,.gd-classes li.soon a:focus-visible b{color:var(--cc)}
.gd-classes li.soon .gd-tellme{display:none;color:var(--gold);letter-spacing:.02em;text-transform:none;font-size:11.5px}
.gd-classes li.soon a:hover .gd-tellme,.gd-classes li.soon a:focus-visible .gd-tellme{display:block}
.gd-classes li.soon a:hover small:not(.gd-tellme),.gd-classes li.soon a:focus-visible small:not(.gd-tellme){display:none}
@media (max-width:900px){.gd-buildgrid{grid-template-columns:1fr}.gd-buildpair{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.gd-buildpair .gd-grid{height:calc(7 * 34px + 12px);margin:4px 2px}.gd-buildpair .gd-tile,.gd-buildpair .gd-tile img{width:24px;height:24px}.gd-buildrow small{white-space:normal}.gd-classes li.soon .gd-tellme{display:block}.gd-classes li.soon small:not(.gd-tellme){display:none}}
@media (prefers-reduced-motion:reduce){.gd-classes li.soon a,.gd-buildopen,.gd-top li{transition:none}.gd-classes li.soon a:hover{transform:none}}

/* the tally's list, under the row of plates, pointing at the plate that opened it */
.gd-tplates li.open .gd-tal{border-color:color-mix(in srgb,var(--sc) 70%,#2e2e33);background:#111114}
.gd-tal::after{content:"";position:absolute;left:12px;bottom:8px;width:0;height:0;border-style:solid;border-width:5px 4px 0 4px;border-color:var(--sc) transparent transparent transparent;opacity:.7}
.gd-tplates li.open .gd-tal::after{transform:rotate(180deg)}
.gd-talslot{position:relative;margin-top:8px}
.gd-talpanel{position:relative;padding:10px 12px 12px;border-radius:8px;background:#0f0f12;border:1px solid #2e2e33;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.gd-talpanel::before{content:"";position:absolute;left:var(--at,24px);top:-7px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:#0f0f12;border-left:1px solid #2e2e33;border-top:1px solid #2e2e33}
.gd-talpanel-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px;font-size:13px}
.gd-talpanel-t b{color:#fff}
.gd-talpanel-t a{font-size:12px;color:var(--gold);text-decoration:none;white-space:nowrap}
.gd-talpanel-t a:hover{text-decoration:underline}
.gd-talcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 16px}
.gd-talcol p{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.gd-talcol p small{font-weight:400;color:var(--muted);letter-spacing:0}
.gd-talcol ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.gd-talcol.wide ul{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.gd-talcol a{display:flex;align-items:center;gap:7px;padding:2px 4px;border-radius:5px;font-size:13px;color:var(--ink);text-decoration:none}
.gd-talcol a:hover{background:rgba(255,255,255,.05);color:#fff}
.gd-talcol img,.gd-talcol i.noicon{width:24px;height:24px;flex:none;border-radius:5px;border:1px solid #000;box-shadow:0 0 0 1px #2a2a2e}
.gd-talcol i.noicon{display:block;background:#1a1a1e}
@media (max-width:760px){.gd-talcols{grid-template-columns:1fr}.gd-talcol.wide ul{grid-template-columns:1fr}.gd-talpanel-t{flex-direction:column;gap:2px}}
@media (prefers-reduced-motion:reduce){.gd-tplates li.open .gd-tal::after{transform:none}}
@media (max-width:760px){.gd-tplates{grid-template-columns:repeat(2,minmax(0,1fr))}.gd-tplates li:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:760px){.gd-headfoot,.gd-stamp,.gd-thead{white-space:normal}}
/* At-a-glance keys (27 Sep): which side is which era in the hit rows, what the level line's two marks are, what grey and gold mean in the spell power chart, and the word that changed under Improved Scorch */
.gd-hitrow .gd-hitera{flex:none;min-width:4.8em;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#9a9a9a}
.gd-hitrow span.forever .gd-hitera{color:#ffd75e}
.gd-lvkey,.gd-spkey{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.gd-lvkey span,.gd-spkey span{display:inline-flex;align-items:center;gap:6px}
.gd-lvkey i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#c9c9c9;box-shadow:0 0 0 1px #777}
.gd-lvkey i.t{border-radius:2px;background:#ffd75e;box-shadow:0 0 0 1px #b8901f,0 0 8px rgba(255,209,0,.5)}
.gd-spkey{margin:8px 0 0}
.gd-spkey i{display:inline-block;width:22px;height:9px;border-radius:2px;background:repeating-linear-gradient(115deg,#8f8f8f 0 3px,#5c5c5c 3px 6px)}
.gd-spkey .f i{background:repeating-linear-gradient(115deg,#ffe38a 0 3px,#c9a227 3px 6px)}
.gd-spkey .c{color:var(--ink2)}.gd-spkey .f{color:#ffd75e}
.gd-pick.basepick .gd-ctl-note{align-self:center;margin-right:6px}
.gd-under b{color:var(--ink)}
/* Phones and small tablets (27 Sep): the same page as the desktop, in the hand. The hero's words get the width (the presenter stays top
   right, smaller); the reshuffle's colour key sits right under the trees it lights (under a tapped tile's plate), the lit-tile rows after it; chapter heads split evenly
   between 761 and 960 so a long title never runs under its player; the tally's list goes two across; and every tap target reaches 44 px,
   mostly by a wider invisible hit area so nothing moves. */
@media (max-width:640px){.gd-hero{height:var(--hero-ph,236px);right:var(--hero-pr,-8%);top:var(--hero-pt,-2px)}.gd-headtext>*{margin-right:0}.gd-headtext>.gd-eyebrow,.gd-headtext>.gd-title{margin-right:118px}}
@media (min-width:761px) and (max-width:960px){.gd-chhead.clipped,.gd-chhead.clipped.compact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gd-aside .gd-otmove{grid-template-areas:"i n n" "i c c" "i s s"}.gd-aside .gd-rcs{justify-self:start}}
@media (max-width:960px){.gd-onetree:not(.sided)>.gd-otside{display:contents}
  .gd-onetree:not(.sided)>.gd-otside>*{flex:1 1 100%;min-width:0}
  .gd-onetree:not(.sided)>.gd-otside>.gd-eralabel{margin-bottom:-6px}
  .gd-onetree:not(.sided)>.gd-otside>.gd-eralabel:not(:first-child),.gd-onetree:not(.sided)>.gd-otside>.gd-otkey,.gd-onetree:not(.sided)>.gd-otside>.gd-otnote{order:2}
  .gd-onetree:not(.sided)>.gd-otside>.gd-otnote{margin-top:-4px}
  .gd-onetree:not(.sided)>.gd-detail{order:1}
  .gd-onetree:not(.sided)>.gd-otside>.gd-eralabel:first-child{order:3;margin-top:6px}
  .gd-onetree:not(.sided)>.gd-otside>.gd-otmoves{order:3;margin-bottom:0}}
@media (max-width:760px){.gd-talcol ul,.gd-talcol.wide ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px}.gd-talcol a{line-height:1.2}}
@media (max-width:760px),(pointer:coarse){
  .gd-talcol a,.gd-otk,.gd-bar-menu li a,.gd-chapters a{min-height:44px;box-sizing:border-box}
  .gd-clipbar button{width:36px}
  .gd-rankpick button{width:36px;height:36px}
  .gd-rank button{min-width:36px;min-height:36px}
  .gd-pick button{width:38px;height:38px}.gd-pick button img.sm{width:30px;height:30px}
  .gd-pick.rolls button{width:auto;height:auto}.gd-pick.rolls button img.sm{width:28px;height:28px}
  .gd-w input[type=range]{height:44px;margin-top:-8px;margin-bottom:-8px}
  .gd-buildrow{min-height:40px}.gd-buildgo{justify-self:start;padding:8px 0}
  .gd-clipbar button,.gd-watchpart,.gd-thead a,.gd-talpanel-t a,.gd-bar-home,.gd-bar-menu summary,.gd-phbtn,.gd-loopctl button,.gd-rankpick button,.gd-rank button,.gd-pick button,.gd-cast,.gd-reset,.gd-specrow,.gd-buildrow,.gd-buildgo{position:relative}
  .gd-clipbar button::after,.gd-cb-track::after,.gd-watchpart::after,.gd-thead a::after,.gd-talpanel-t a::after,.gd-bar-home::after,.gd-bar-menu summary::before,.gd-back::after,.gd-phbtn::after,.gd-lvtick::after,.gd-loopctl button::after,.gd-rankpick button::after,.gd-rank button::after,.gd-pick button::after,.gd-cast::after,.gd-reset::after,.gd-specrow::after,.gd-buildrow::after,.gd-buildgo::after,.gd-dot::after{content:"";position:absolute}
  .gd-clipbar button::after{inset:-8px -4px}
  .gd-cb-track::after{inset:-12px 0}
  .gd-watchpart::after{inset:-9px -4px}
  .gd-thead a::after,.gd-talpanel-t a::after,.gd-bar-home::after{inset:-15px -6px}
  .gd-bar-menu summary::before{inset:-6px -4px}
  .gd-back::after{inset:0 -4px -14px}
  .gd-phbtn::after,.gd-cast::after,.gd-reset::after{inset:-7px -3px}
  .gd-lvtick::after{inset:-8px}
  .gd-loopctl button::after,.gd-rankpick button::after,.gd-rank button::after,.gd-specrow::after{inset:-4px}
  .gd-pick button::after{inset:-3px}
  .gd-pick.rolls button::after{inset:-5px -3px}
  .gd-loopctl .gd-dot::after{inset:-16px -3px}
  .gd-buildrow::after{inset:-6px 0 -1px}
  .gd-buildgo::after{inset:-3px -4px -8px}}
@media (max-width:899px){.gd-newrow>.gd-detail{grid-column:1/-1;margin-top:2px}}
@media (max-width:1100px){.gd-hero{filter:none}}
@media (max-width:899px){.gd-top li>.gd-buildtrees{grid-column:1/-1;margin:8px 0 2px}}
@media (max-width:899px){.gd-buildpair .gd-tile .m{font-size:8px;line-height:12px;min-width:12px;padding:0 2px;right:-4px;bottom:-4px}}
/* phones: the phrase pills on one line with their label above (Chris, 27 Sep), and a picked talent in a build's trees shown by a ring
   in its tree colour on the icon itself instead of a number blob */
@media (max-width:640px){.gd-newgrid .gd-ctl,.gd-ctl:has(.gd-phbtn){display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch}.gd-ctl:has(.gd-phbtn) .gd-ctl-note{flex:0 0 100%;order:-1;margin:0 0 2px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.gd-ctl:has(.gd-phbtn){flex-wrap:wrap}.gd-ctl:has(.gd-phbtn) .gd-phbtn{flex:0 0 auto;padding:6px 10px;font-size:12.5px;white-space:nowrap}}
@media (max-width:899px){.gd-buildpair .gd-tile .m{display:none}.gd-buildpair .gd-tile.pt img{box-shadow:0 0 0 2.5px var(--tc),0 0 0 4px #0b0b0d,0 0 10px color-mix(in srgb,var(--tc) 70%,transparent);opacity:1;filter:none}.gd-buildpair .gd-tile.np img{opacity:.22;filter:grayscale(.8)}}
/* phones: the way-back tab is hard to miss, a gold-edged bar the width of the screen under the chapter bar (Chris, 27 Sep: protect the phone reader from any tap that takes them out of view) */
@media (max-width:640px){.gd-back{left:10px;right:10px;justify-content:center;padding:10px 14px;font-weight:700;border-color:color-mix(in srgb,var(--gold) 60%,var(--line));box-shadow:0 8px 20px rgba(0,0,0,.5)}}
@media (max-width:760px){.gd-beat:has(.gd-aside){grid-template-areas:"lead" "w" "aside" "take";grid-template-rows:auto}.gd-beat:has(.gd-aside)>.gd-take-in{margin-top:14px}}
/* races with a mouse: tighter cards so the tapped plate stays near, and a game-style tooltip on hover */
@media (min-width:900px){.gd-races{gap:8px;margin-top:12px}.gd-race{padding:10px 10px 6px}.gd-race .gd-racehead{margin-bottom:4px;padding-bottom:8px}.gd-races .gd-racial{min-height:36px;padding:4px 8px;font-size:13px}.gd-races .gd-racial img.sm{width:26px;height:26px}.gd-racehint{margin-bottom:0}}
.gd-racetip{position:fixed;z-index:60;width:max-content;max-width:320px;padding:9px 12px 10px;border-radius:6px;background:rgba(6,6,18,.97);border:1px solid #7b7b8a;box-shadow:0 10px 26px rgba(0,0,0,.6);pointer-events:none;font-size:13px;line-height:1.45;color:#e6e6e6}
.gd-racetip[hidden]{display:none}
.gd-racetip h4{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:14px;color:#fff}
.gd-racetip h4 img{width:24px;height:24px;border-radius:5px;border:1px solid #000}
.gd-racetip small{display:block;margin:0 0 6px;font-size:11.5px;color:var(--muted)}
.gd-racetip p{margin:0;color:#ffd75e}
/* the spell power table on phones: the two share columns go, so the answer (damage added per cast) fits on the screen */
@media (max-width:800px){.gd-coef th:nth-child(3),.gd-coef th:nth-child(4),.gd-coef td:nth-child(3),.gd-coef td:nth-child(4){display:none}.gd-coef td:first-child{white-space:normal}}
@media (max-width:800px){.gd-coef{font-size:12.5px}.gd-coef th,.gd-coef td{padding-left:6px;padding-right:6px}}
/* the vote board on /guides and the count on each tile */
.gd-board{margin:0 0 18px;padding:16px 18px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.gd-board[hidden]{display:none}
/* one class left, no vote (19 Oct 2026): the board's place names the next class instead, in its colour (guide.js lastOne) */
.gd-nextup{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:16px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--cc) 45%,var(--line));background:radial-gradient(120% 160% at 0 0,color-mix(in srgb,var(--cc) 14%,transparent),transparent 60%) var(--panel)}
.gd-nextup>img{flex:none;width:64px;height:64px;border-radius:12px;border:1px solid #000;box-shadow:0 0 0 2px color-mix(in srgb,var(--cc) 55%,transparent)}
.gd-nextup h3{margin:2px 0 4px;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:20px;color:var(--cc)}
.gd-nextup p{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}
.gd-nextup .gd-nextlabel{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gd-tiles2 li.next>.gd-ctile{border-color:color-mix(in srgb,var(--cc) 50%,var(--line))}
@media (max-width:640px){.gd-nextup{gap:12px;padding:12px}.gd-nextup>img{width:48px;height:48px}.gd-nextup h3{font-size:18px}}
.gd-boardhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px}
.gd-boardhead h3{margin:0;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:18px;color:#ffd75e}
.gd-boardlead{margin:0;font-size:14px;color:var(--ink2)}
.gd-bars{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.gd-bars li{display:grid;grid-template-columns:28px 92px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:14px;transition:opacity .3s}
#gdBoard>.gd-bars>li{cursor:pointer;border-radius:8px;margin:0 -6px;padding:2px 6px}
#gdBoard>.gd-bars>li:hover{background:rgba(255,255,255,.04)}
.gd-bars img{width:28px;height:28px;border-radius:6px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}
.gd-bars b{color:var(--cc);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-bar2{display:block;height:12px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.gd-bar2 i{display:block;height:100%;border-radius:3px;background:var(--cc);box-shadow:0 0 10px color-mix(in srgb,var(--cc) 45%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gd-bars em{font-style:normal;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);font-weight:700}
.gd-bars em.tick{animation:gdTick .6s ease-out}
.gd-bars li.lead b{color:#ffd75e}
.gd-boardfoot{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
@keyframes gdTick{0%{color:#ffd75e;transform:scale(1.35)}100%{color:var(--ink);transform:none}}
.gd-tiles2 .gd-votes{font-size:11px;letter-spacing:.02em;color:var(--muted);text-transform:none}
.gd-tiles2 .gd-votes i{font-style:normal;font-weight:700;color:var(--ink2)}
.gd-justvote:disabled{border-color:color-mix(in srgb,var(--cc) 60%,#000);color:var(--cc);background:#0e0e10;cursor:default}
/* the two ways on a tile, in words (30 Sep): Just vote, a button, one tap; Tell me when, a tick box for the email below */
.gd-ico{flex:none;width:12px;height:12px;fill:currentColor}
.gd-tiles2 .gd-justvote,.gd-tiles2 .gd-tellme{gap:6px}
.gd-justvote .ok,.gd-justvote .v1,.gd-justvote .v2,.gd-justvote.is-voted .up,.gd-justvote.is-voted .v0,.gd-justvote.is-closed .up,.gd-justvote.is-closed .v0{display:none}
.gd-justvote.is-voted .ok,.gd-justvote.is-voted .v1,.gd-justvote.is-closed .v2{display:inline}
.gd-tellme .t1,.gd-tellme:has(input:checked) .t0{display:none}
.gd-tellme:has(input:checked) .t1{display:inline}
.gd-box{flex:none;display:inline-grid;place-items:center;width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1.5px currentColor}
.gd-box svg{width:11px;height:11px;opacity:0}
.gd-tellme:has(input:checked) .gd-box{background:var(--cc);box-shadow:none;color:#111}
.gd-tellme:has(input:checked) .gd-box svg{opacity:1}
/* a class whose guide is up, greyed in its place: it says so, and the tile is the way to it */
.gd-tiles2 li.done>.gd-ctile{text-decoration:none;color:inherit;cursor:pointer}
.gd-tiles2 li.done img{filter:grayscale(1) brightness(.5)}
.gd-tiles2 .gd-isup{color:#8ad890;border-color:rgba(87,209,99,.4)}
.gd-tiles2 .gd-readit{border-color:transparent;background:none;color:#a8925a}
.gd-tiles2 .gd-readit i{font-style:normal}
/* the same two, small, in the words above the tiles */
.gd-way{display:inline-flex;align-items:center;gap:5px;padding:1px 8px 2px;border-radius:5px;font-weight:700;font-size:.92em;line-height:1.35;white-space:nowrap;vertical-align:1px}
.gd-way.w-vote{color:#ffe7a0;background:rgba(255,215,94,.1);box-shadow:inset 0 0 0 1px rgba(255,215,94,.42)}
.gd-way.w-vote .gd-ico{width:10px;height:10px}
.gd-way.w-tell{padding:1px 2px 2px;color:#ffd75e}
.gd-way .gd-box{width:12px;height:12px;box-shadow:inset 0 0 0 1.5px #a8893a}
/* under the tiles, once something is ticked: what is on your list, and the way to the email box */
.gd-listnote{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 10px;margin:12px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink2);text-align:center}
.gd-listnote[hidden]{display:none}
.gd-listgo{display:inline-flex;align-items:center;gap:6px;padding:4px 2px;border:0;background:none;color:#ffd75e;font:700 13.5px/1.2 "Open Sans",system-ui,sans-serif;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,215,94,.4);text-underline-offset:3px}
.gd-listgo:hover{text-decoration-color:#ffd75e}
.gd-listgo:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
.gd-listgo .gd-ico{width:11px;height:11px}
/* the last round, one line in the board's head */
.gd-pastline{flex-basis:100%;margin:0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.gd-pastline[hidden]{display:none}
.gd-pastline b{color:#ffd75e;font-weight:700}
.gd-pastline b.c{color:color-mix(in srgb,var(--cc) 70%,#fff)}
@media (max-width:640px){.gd-bars li{grid-template-columns:24px 80px minmax(0,1fr) 36px;gap:8px;font-size:13px}.gd-bars img{width:24px;height:24px}.gd-board{padding:12px 12px 10px}.gd-tiles2 .gd-acts{flex-direction:column;gap:6px}.gd-tiles2 .gd-acts>*{min-height:40px;font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.gd-bar2 i{transition:none}.gd-bars em.tick{animation:none}}
.gd-boardclock{flex-basis:100%;margin:2px 0 0;font-size:13px;font-variant-numeric:tabular-nums;color:#ffd75e}
/* ---- Shared by the class chapters (first written for the Warlock, the Shaman uses them too): the trees by what happened to each talent,
   the sooner rows, the gone chips, a talent by rank, two bars Classic over Forever, the build card as one button, a file-only number. ---- */
/* the trees, by what happened to each talent */
.gd-count-h em{white-space:nowrap}
.gd-treemix .gd-count{display:flex;flex-direction:column;align-items:stretch}
.gd-treemix .gd-mixbar{width:100%;flex:none}
.gd-mixbar{display:flex;gap:2px;height:12px;margin:0;border-radius:3px;overflow:hidden}
.gd-mixbar i{display:block;min-width:4px}
.gd-mixbar .new,.gd-mixkey .new i{background:#5fd38a}.gd-mixbar .changed,.gd-mixkey .changed i{background:#ffb84d}.gd-mixbar .moved,.gd-mixkey .moved i{background:#6fb4ff}.gd-mixbar .same,.gd-mixkey .same i{background:#8a8a8a}.gd-mixkey .gone i{background:none;border:1px dashed #e07a7a}
.gd-mixkey{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px 10px;margin:0;padding:0;list-style:none}
.gd-mixkey li{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--ink2)}
.gd-mixkey i{flex:none;align-self:center;width:10px;height:10px;border-radius:2px}
.gd-mixkey b{font-family:Cinzel,Georgia,serif;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.gd-mixkey .gone{color:var(--muted)}
/* sooner: the level a talent's row opens, then and now */
.gd-soonhead{display:grid;grid-template-columns:repeat(3,1fr) 0;margin:10px 130px 2px 228px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a}
.gd-soonhead span{transform:translateX(-50%);white-space:nowrap;width:max-content}
.gd-soonrows{display:grid;gap:2px}
.gd-soonrow{display:grid;grid-template-columns:26px 170px minmax(0,1fr) 108px;align-items:center;gap:10px;padding:5px 0;border-top:1px solid rgba(255,255,255,.05)}
.gd-soonrow img.sm{width:26px;height:26px;border-radius:6px;border:1px solid #000}
.gd-soonrow b{font-size:13.5px;line-height:1.2;color:var(--ink)}
.gd-soonrow em{font-style:normal;font-size:12px;color:var(--tc);text-align:right;white-space:nowrap}
.gd-soontrack{position:relative;height:30px;margin:0 12px;background:linear-gradient(to right,rgba(255,255,255,.12) 1px,transparent 1px) 0 0/33.333% 100%;border-right:1px solid rgba(255,255,255,.12)}
.gd-soontrack .span{position:absolute;left:var(--a);width:calc(var(--b) - var(--a));top:13px;height:4px;border-radius:2px;background:linear-gradient(to right,#ffd75e,#6a6a6a);transform-origin:right;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) .2s}
.gd-soontrack .c,.gd-soontrack .f{position:absolute;top:4px;width:22px;height:22px;margin-left:-11px;border-radius:50%;display:grid;place-items:center;background:#1b1b1d;border:1px solid #777}
.gd-soontrack .c{left:var(--b)}
.gd-soontrack .f{left:var(--b);background:#ffd75e;border-color:#fff1b8;box-shadow:0 0 10px rgba(255,209,0,.5);transition:left .9s cubic-bezier(.2,.7,.2,1) .2s}
.gd-soontrack small{font-size:10.5px;font-weight:700;color:#cfcfcf;font-variant-numeric:tabular-nums}
.gd-soontrack .f small{color:#1a1408}
.gd-sooner.drawn .gd-soontrack .span{transform:none}
.gd-sooner.drawn .gd-soontrack .f{left:var(--a)}
/* the talents that are gone */
.gd-newchip.gone img.sm{filter:grayscale(.85);opacity:.8}
.gd-newchip.gone b{color:var(--ink2)}
.gd-newchip.gone.on img.sm{filter:none;opacity:1}
.gd-gonenote{padding:8px 12px;border-left:2px solid #ffd75e;background:rgba(255,209,0,.05);border-radius:0 6px 6px 0}
.gd-gonenote b{margin-right:6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#ffd75e}
/* a talent by rank */
.gd-twin.solo{grid-template-columns:minmax(0,1fr);max-width:320px}
.gd-ranks .gd-ctl{margin-top:12px}
.gd-ranks .gd-rankpick{margin-left:0}
/* two bars, Classic over Forever */
.gd-cmps{display:grid;gap:4px}
.gd-cmp{display:grid;grid-template-columns:30px 150px minmax(0,1fr) 62px;align-items:center;gap:10px;padding:6px 0;border-top:1px solid rgba(255,255,255,.05)}
.gd-cmp img.sm{width:30px;height:30px;border-radius:7px;border:1px solid #000}
.gd-cmp b{font-size:14px;line-height:1.2;color:var(--ink)}
.gd-cmp b small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
.gd-cmpbars{display:grid;gap:3px}
.gd-cmpbars>div{display:grid;grid-template-columns:minmax(0,1fr) 84px;align-items:center;gap:8px}
.gd-cmpbars i{display:block;height:12px;border-radius:2px;width:0;background:repeating-linear-gradient(115deg,#8f8f8f 0 3px,#5c5c5c 3px 6px);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.gd-cmpbars .forever i{background:repeating-linear-gradient(115deg,#ffe38a 0 3px,#c9a227 3px 6px)}
.gd-cmpbars span{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.gd-cmpbars .forever span{color:#ffd75e}
.gd-cmps.drawn .gd-cmpbars .classic i{width:100%}
.gd-cmps.drawn .gd-cmpbars .forever i{width:var(--f)}
.gd-cmp .gd-chalk{font-size:21px;text-align:right}
/* What Warlocks build: the card is the button, the calculator link is small and its own */
.gd-top li.gd-buildcard{cursor:pointer;grid-template-columns:16px minmax(0,1fr);align-items:center;padding:10px 12px}   /* the calculator link sits under the row at every width: beside it, the row's opened and saved counts ran under the pill in the narrow list column (audit 3 Oct) */
.gd-top li.gd-buildcard::before{grid-row:1}
.gd-top li.gd-buildcard:hover{border-color:color-mix(in srgb,var(--tc) 45%,#000);background:rgba(255,255,255,.03)}
.gd-top li.gd-buildcard .gd-buildrow{grid-column:2;grid-row:1}
.gd-top li.gd-buildcard a.gd-buildgo{grid-column:2;grid-row:2;justify-self:start;margin-top:4px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;border:1px solid #5a4a14;background:rgba(255,209,0,.06);font-size:11.5px;font-weight:600;color:var(--gold);white-space:nowrap}
.gd-top li.gd-buildcard a.gd-buildgo::before{content:"";width:0;height:0;border-left:6px solid var(--gold);border-top:4px solid transparent;border-bottom:4px solid transparent}
.gd-top li.gd-buildcard a.gd-buildgo:hover{background:rgba(255,209,0,.14);text-decoration:none}
.gd-top li.gd-buildcard .gd-buildopen{display:none}
.gd-top li.gd-buildcard>.gd-buildtrees{grid-column:1/-1}
@media (max-width:899px){.gd-top li.gd-buildcard{grid-template-columns:16px minmax(0,1fr)}.gd-top li.gd-buildcard a.gd-buildgo{grid-column:2;grid-row:2;justify-self:start;margin-top:4px;min-height:32px}.gd-top li.gd-buildcard .gd-buildopen{display:block}}
/* a row whose number is a file reading nobody has checked in game */
.gd-filed{color:var(--ink2);font-weight:400;font-style:italic}
@media (max-width:760px){
  .gd-soonhead{margin:10px 12px 2px 12px}
  .gd-treemix .gd-counts{grid-template-columns:1fr}
  .gd-soonrow{grid-template-columns:26px minmax(0,1fr) auto;gap:4px 8px}
  .gd-soonrow .gd-soontrack{grid-column:1/-1;grid-row:2;margin:0 12px}
  .gd-cmp{grid-template-columns:30px minmax(0,1fr) 56px;gap:4px 8px}
  .gd-cmp .gd-cmpbars{grid-column:1/-1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){.gd-soontrack .span,.gd-soontrack .f,.gd-cmpbars i{transition:none}}
/* the newest guide's row: a small New inside the class name, in the Up now green (guide.js newest(), on for GUIDE_NEW_DAYS days). It sits inside the <b> so it rides with the name in every layout (the slim hub lays the head out as display:contents) */
.gd-upnew{display:inline-block;vertical-align:middle;position:relative;top:-3px;margin-left:10px;padding:3px 8px;border-radius:999px;font-family:"Open Sans",system-ui,Segoe UI,Arial,sans-serif;font-size:10.5px;line-height:1;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#0c1408;background:#6fd85a;box-shadow:0 0 12px rgba(111,216,90,.45);text-shadow:none}
@media (max-width:640px){.gd-upnew{top:-2px;margin-left:6px;padding:2px 6px;font-size:9.5px}.gd-heroside.slim .gd-upnow .gd-upnew{display:none}   /* the square phone tiles have no room for the tag; the masthead chip's class icon says new there */}
.gd-tiles2 .gd-fromdata{font-size:11px;line-height:1.3;color:var(--ink2);text-decoration:underline;text-underline-offset:2px;margin-top:4px}.gd-tiles2 .gd-fromdata:hover{color:var(--cc)}