/* Spider Groove "Ask the Roadie" help: guitar-pick button (bottom right, every page) + help dialog. Self-contained, needs no other sg file. */
.sgh *,.sgh *::before,.sgh *::after{box-sizing:border-box}
.sgh-fab,.sgh{--h-ink:#0e0c12;--h-ink2:#16131b;--h-line:rgba(255,255,255,.09);--h-text:#f4efe8;--h-muted:#b4aab8;--h-grad:linear-gradient(100deg,#FFB23F 0%,#FF6A1A 35%,#FF2E4D 65%,#E0218A 100%);--h-ease:cubic-bezier(.22,1,.36,1);--h-head:var(--sg-head,"Saira Condensed","Arial Narrow",sans-serif);--h-body:"Manrope",system-ui,sans-serif;--h-mono:"JetBrains Mono",ui-monospace,monospace}

/* ---------- floating button: gradient pick in a spinning ring, sound waves rolling out ---------- */
.sgh-fab{position:fixed;right:22px;bottom:22px;z-index:99990;width:62px;height:62px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a2230,#0b090e 70%);box-shadow:0 14px 34px -10px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06),0 0 28px -6px rgba(255,74,46,.55);cursor:pointer;display:grid;place-items:center;transition:transform .5s var(--h-ease),box-shadow .5s var(--h-ease);-webkit-tap-highlight-color:transparent}
.sgh-fab:hover,.sgh-fab:focus-visible{transform:translateY(-3px) scale(1.06);box-shadow:0 18px 40px -10px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1),0 0 40px -4px rgba(255,74,46,.8)}
.sgh-fab:focus-visible{outline:2px solid #FFB23F;outline-offset:4px}
.sgh-fab__ring{position:absolute;inset:-2px;border-radius:50%;padding:2px;background:conic-gradient(from var(--sgh-a,0deg),#FFB23F,#FF2E4D,#E0218A,transparent 55%,transparent 75%,#FFB23F);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sghSpin 4s linear infinite}
@property --sgh-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes sghSpin{to{--sgh-a:360deg}}
.sgh-fab__wave{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,106,26,.55);opacity:0;animation:sghWave 3.4s var(--h-ease) infinite;pointer-events:none}
.sgh-fab__wave--b{animation-delay:1.7s;border-color:rgba(224,33,138,.5)}
@keyframes sghWave{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.sgh-fab__pick{position:relative;width:30px;height:33px;filter:drop-shadow(0 4px 8px rgba(255,46,77,.45));transform-origin:50% 40%;animation:sghStrum 8s var(--h-ease) infinite;transition:transform .5s var(--h-ease)}
.sgh-fab__pick text{font:800 21px/1 var(--h-head);fill:#140a08}
.sgh-fab__shine{stroke-dasharray:16 40;animation:sghShine 4s ease-in-out infinite}
@keyframes sghShine{0%,60%{stroke-dashoffset:16}100%{stroke-dashoffset:-40}}
/* a little strum every 8 seconds so it gets noticed without nagging */
@keyframes sghStrum{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-16deg)}92%{transform:rotate(11deg)}95%{transform:rotate(-5deg)}}
.sgh-fab:hover .sgh-fab__pick{animation:none;transform:rotate(-12deg) scale(1.08)}
.sgh-fab__tip{position:absolute;right:calc(100% + 14px);top:50%;display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:12px;background:rgba(14,12,18,.92);border:1px solid var(--h-line);box-shadow:0 12px 30px -10px rgba(0,0,0,.8);white-space:nowrap;text-align:left;font:500 12px/1.2 var(--h-body);color:var(--h-muted);opacity:0;transform:translate(10px,-50%);pointer-events:none;transition:opacity .35s var(--h-ease),transform .45s var(--h-ease);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sgh-fab__tip b{font:700 15px/1 var(--h-head);letter-spacing:.04em;text-transform:uppercase;background:var(--h-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sgh-fab:hover .sgh-fab__tip,.sgh-fab:focus-visible .sgh-fab__tip{opacity:1;transform:translate(0,-50%)}
html.sgh-open .sgh-fab{transform:scale(.6);opacity:0;pointer-events:none}

/* ---------- dialog ---------- */
.sgh{box-sizing:border-box;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:var(--h-text);overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none}
.sgh::-webkit-scrollbar{display:none}
.sgh[open]{display:grid;grid-template-columns:minmax(0,1fr);place-items:start center}
.sgh::backdrop{background:rgba(5,4,7,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sgh__box{position:relative;width:min(1080px,100%);min-width:0;margin:auto 0;padding:44px 44px 34px;border-radius:24px;background:radial-gradient(700px 360px at 85% 0%,rgba(255,90,31,.12),transparent 65%),radial-gradient(600px 400px at 0% 100%,rgba(224,33,138,.1),transparent 65%),var(--h-ink);border:1px solid var(--h-line);box-shadow:0 40px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;font:400 15px/1.55 var(--h-body)}
.sgh__box::before{content:"";position:absolute;left:44px;right:44px;top:0;height:1px;background:var(--h-grad);opacity:.7}
.sgh[open] .sgh__box{animation:sghIn .6s var(--h-ease) both}
.sgh.is-closing .sgh__box{animation:sghOut .3s var(--h-ease) both}
.sgh.is-closing::backdrop{opacity:0;transition:opacity .3s}
@keyframes sghIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sghOut{to{opacity:0;transform:translateY(16px) scale(.98)}}
.sgh__x{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid var(--h-line);background:rgba(255,255,255,.03);color:var(--h-text);display:grid;place-items:center;cursor:pointer;transition:transform .45s var(--h-ease),background .3s,border-color .3s}
.sgh__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sgh__x:hover,.sgh__x:focus-visible{transform:rotate(90deg);background:rgba(255,74,46,.14);border-color:rgba(255,106,26,.5)}
.sgh__eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 12px/1 var(--h-mono);letter-spacing:.22em;text-transform:uppercase;color:#FFB23F}
.sgh__eyebrow i{width:8px;height:8px;border-radius:50%;background:#FF4A2E;box-shadow:0 0 10px #FF4A2E;animation:sghDot 2.4s ease-in-out infinite}
@keyframes sghDot{50%{opacity:.35}}
.sgh .sgh__title{margin:0;padding:0;font:800 clamp(34px,4.4vw,56px)/.95 var(--h-head);text-transform:uppercase;letter-spacing:.01em;color:var(--h-text)}
.sgh__title em{font-style:normal;background:var(--h-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sghShift 6s ease-in-out infinite alternate}
@keyframes sghShift{to{background-position:100% 0}}
.sgh__lead{max-width:620px;margin:12px 0 22px;color:var(--h-muted);font-size:16px}

/* pills */
.sgh__pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.sgh__pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--h-line);background:rgba(255,255,255,.03);color:var(--h-muted);font:600 14px/1 var(--h-body);cursor:pointer;transition:color .3s,background .35s var(--h-ease),border-color .3s,transform .35s var(--h-ease)}
.sgh__pill i{font:600 11px/1 var(--h-mono);font-style:normal;padding:4px 6px;border-radius:999px;background:rgba(255,255,255,.07);transition:background .3s,color .3s}
.sgh__pill:hover{color:var(--h-text);border-color:rgba(255,178,63,.4);transform:translateY(-1px)}
.sgh__pill.is-on{color:#140a08;background:var(--h-grad);border-color:transparent;box-shadow:0 8px 22px -10px rgba(255,74,40,.8)}
.sgh__pill.is-on i{background:rgba(20,10,8,.18);color:#140a08}
.sgh__pill:focus-visible{outline:2px solid #FFB23F;outline-offset:3px}

/* cards */
.sgh__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sgh-card{position:relative;padding:22px 22px 18px;border-radius:18px;background:var(--h-ink2);border:1px solid var(--h-line);overflow:hidden;transition:transform .5s var(--h-ease),border-color .4s,box-shadow .5s var(--h-ease);animation:sghCard .55s var(--h-ease) both;animation-delay:calc(var(--n,0) * 45ms)}
.sgh-card[hidden]{display:none}
@keyframes sghCard{from{opacity:0;transform:translateY(14px)}}
/* soft spotlight that follows the pointer */
.sgh-card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,106,26,.13),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.sgh-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--h-grad);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--h-ease)}
.sgh-card:hover{transform:translateY(-4px);border-color:rgba(255,140,60,.3);box-shadow:0 22px 44px -22px rgba(255,74,46,.45)}
.sgh-card:hover::before{opacity:1}
.sgh-card:hover::after{transform:scaleY(1)}
.sgh-card__ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid var(--h-line);color:#FFB23F;transition:transform .55s var(--h-ease),background .4s,color .3s,border-color .3s}
.sgh-card__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sgh-card:hover .sgh-card__ico{transform:rotate(-8deg) scale(1.06);background:var(--h-grad);border-color:transparent;color:#140a08}
.sgh .sgh-card__t{margin:0 0 10px;font:700 21px/1.05 var(--h-head);letter-spacing:.03em;text-transform:uppercase;color:var(--h-text)}
.sgh-card__list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sgh-card__list li{position:relative;padding:5px 8px 5px 26px;margin:0 -8px;border-radius:9px;color:var(--h-muted);font-size:14.5px;line-height:1.5;transition:color .3s,background .35s var(--h-ease),transform .35s var(--h-ease)}
/* each bullet is a tiny guitar pick that lights up */
.sgh-card__list li::before{content:"";position:absolute;left:8px;top:11px;width:10px;height:11px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:rgba(255,178,63,.35);clip-path:path("M5 0C2 0 0 1.4 0 3.4 0 6 2.6 9.3 4.3 10.8a1 1 0 0 0 1.4 0C7.4 9.3 10 6 10 3.4 10 1.4 8 0 5 0z");transition:background .3s,transform .45s var(--h-ease)}
.sgh-card__list li:hover{color:var(--h-text);background:rgba(255,255,255,.035);transform:translateX(3px)}
.sgh-card__list li:hover::before{background:#FF6A1A;transform:rotate(-20deg) scale(1.2)}
.sgh-card__list b{color:var(--h-text);font-weight:700}
.sgh__foot{margin:22px 0 0;color:var(--h-muted);font-size:14px;text-align:center}
.sgh__foot a{color:#FFB23F;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--h-ease)}
.sgh__foot a:hover{background-size:100% 1px}
html.sgh-open,html.sgh-open body{overflow:hidden}

@media (max-width:980px){.sgh__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
	.sgh{padding:10px}
	.sgh__box{padding:30px 18px 22px;border-radius:20px}
	.sgh__box::before{left:18px;right:18px}
	.sgh__x{top:12px;right:12px}
	.sgh__grid{grid-template-columns:1fr}
	.sgh__pills{flex-wrap:nowrap;overflow-x:auto;margin:0 -18px 20px;padding:2px 18px;scrollbar-width:none}
	.sgh__pills::-webkit-scrollbar{display:none}
	.sgh__pill{flex:none}
	.sgh-fab{right:14px;bottom:14px;width:54px;height:54px}
	.sgh-fab__tip{display:none}
}
@media (prefers-reduced-motion:reduce){
	.sgh-fab__ring,.sgh-fab__wave,.sgh-fab__pick,.sgh-fab__shine,.sgh__eyebrow i,.sgh__title em{animation:none}
	.sgh-fab__wave{display:none}
	.sgh[open] .sgh__box,.sgh.is-closing .sgh__box,.sgh-card{animation:none}
	.sgh-fab,.sgh-card,.sgh-card__ico,.sgh-card__list li,.sgh__x{transition:none}
}