/* Site guides: Piper (PP), Velvet (BIOANTLER), Gus (Suppwise). Same layout rules as Will. */
.g-guide{--g-ink:#141312;--g-paper:#F3EFE7;--g-card:#fff;--g-muted:#5E584F;--g-line:#CFC6B6;--g-accent:#8B2A2A;--g-orb:#8B2A2A;--g-bar-a:#EAE3D6;--g-bar-b:#C9A9A0;--g-ring:#8B2A2A;--g-head:#141312;--g-head-ink:#F3EFE7;--g-close:#8B2A2A;--g-close-ink:#F3EFE7;--g-vh:100dvh;--g-kb:0px;font-family:Inter,system-ui,sans-serif;color:var(--g-ink);font-size:14px;line-height:1.5}
.g-guide *{box-sizing:border-box}.g-guide [hidden]{display:none!important}
/* Piper: Project Proprietor is dark only */
.g-pp{--g-ink:#F2EEE6;--g-paper:#171715;--g-card:#0F0F0E;--g-muted:#A9A39A;--g-line:#34322F;--g-accent:#F2EEE6;--g-orb:#F2EEE6;--g-bar-a:#0B0B0A;--g-bar-b:#6E685F;--g-ring:#D8D1C5;--g-head:#171715;--g-head-ink:#F2EEE6;--g-close:#D8D1C5;--g-close-ink:#0B0B0A}
/* Velvet: oxblood and bone, follows the device setting like bioantler.com */
@media(prefers-color-scheme:dark){.g-bioantler{--g-ink:#ECE5D8;--g-paper:#1B1916;--g-card:#12110F;--g-muted:#A39B8F;--g-line:#36312B;--g-accent:#D06A60;--g-ring:#D06A60;--g-head:#1B1916;--g-head-ink:#ECE5D8}}
/* Gus: Suppwise blues, follows the device setting */
.g-suppwise{--g-ink:#10202B;--g-paper:#F5F8FA;--g-card:#fff;--g-muted:#4A5A64;--g-line:#DCE4EA;--g-accent:#1A6399;--g-ring:#1E72B0;--g-head:#10202B;--g-head-ink:#fff;--g-close:#1E72B0;--g-close-ink:#fff}
@media(prefers-color-scheme:dark){.g-suppwise{--g-ink:#E6EEF0;--g-paper:#182830;--g-card:#121E26;--g-muted:#93A4AC;--g-line:#24343D;--g-accent:#6CC0EA;--g-ring:#5DB8E6;--g-head:#0B141A;--g-head-ink:#E6EEF0;--g-close:#5DB8E6;--g-close-ink:#06131D}}
/* Launcher */
.g-guide .g-launcher{position:fixed;z-index:50;left:calc(100% - 80px);top:calc(100% - 80px);width:58px;height:58px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;display:block;color:var(--g-ink);cursor:pointer;font:inherit}
.g-orb{position:absolute;inset:0;border-radius:50%;background:var(--g-orb);box-shadow:0 0 0 1px color-mix(in srgb,var(--g-ring) 30%,transparent),0 10px 26px #0000002e;display:flex;align-items:center;justify-content:center;gap:3px;transition:transform .2s ease}
.g-launcher:hover .g-orb,.g-launcher:focus-visible .g-orb{transform:scale(1.05)}
.g-ring{position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--g-ring);opacity:.6;animation:g-breathe 3.4s ease-in-out infinite;pointer-events:none}
@keyframes g-breathe{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.2);opacity:0}}
.g-bars{display:flex;align-items:center;justify-content:center;gap:3px}
.g-bars i{display:block;width:3px;height:6px;border-radius:2px;background:var(--g-bar-a);animation:g-bar 1.8s ease-in-out infinite}
.g-bars i:nth-child(even){background:var(--g-bar-b)}
.g-bars i:nth-child(1){--h:12px}.g-bars i:nth-child(2){--h:20px;animation-delay:.2s}.g-bars i:nth-child(3){--h:16px;animation-delay:.4s}.g-bars i:nth-child(4){--h:10px;animation-delay:.6s}
@keyframes g-bar{0%,100%{height:5px}50%{height:var(--h,16px)}}
.g-label{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);opacity:0;pointer-events:none;white-space:nowrap;padding:6px 13px;border-radius:999px;background:var(--g-card);color:var(--g-ink);border:1px solid var(--g-line);font-size:12.5px;font-weight:500;letter-spacing:.02em;box-shadow:0 6px 18px #0000001f;transition:opacity .2s ease,transform .2s ease}
.g-launcher.g-left .g-label{right:auto;left:calc(100% + 12px);transform:translate(-6px,-50%)}
.g-launcher:hover .g-label,.g-launcher:focus-visible .g-label,.g-launcher.g-hint .g-label{opacity:1;transform:translate(0,-50%)}
.g-guide.g-kind-orb .g-launcher[aria-expanded=true]{visibility:hidden}
/* Character launcher (Gus): sits on his semicircle, waves when you come near */
.g-guide.g-kind-character .g-launcher{width:104px;height:98px;border-radius:0;overflow:visible}
.g-figure{position:absolute;right:0;bottom:0;width:104px;height:98px;pointer-events:none}
.g-pose{position:absolute;right:0;bottom:0;height:auto;opacity:0;transform-origin:50% 100%;transition:opacity .15s ease,transform .3s cubic-bezier(.3,1.5,.5,1);transform:translateY(8px) scale(.96);filter:drop-shadow(0 6px 14px #0000002e);user-select:none}
.g-pose{width:104px}
/* The front-facing sit and wave were drawn with a larger semicircle; scaled so Gus stays the same size */
.g-sit,.g-hi{width:126px;right:-11px}
/* Gus looks at the visitor at rest and when waving; reactions are drawn facing the page */
.g-guide[data-pose=sit] .g-sit,.g-guide[data-pose=hi] .g-hi,.g-guide[data-pose=doze] .g-doze,.g-guide[data-pose=yawn] .g-yawn,.g-guide[data-pose=hop] .g-hop{opacity:1;transform:none}
.g-guide[data-pose=sit] .g-sit{animation:g-idle 4s ease-in-out infinite}
@keyframes g-idle{0%,100%{transform:none}50%{transform:translateY(-2px)}}
.g-kind-character .g-label{right:calc(100% + 4px);top:auto;bottom:24px;transform:translate(6px,0)}
.g-kind-character .g-launcher:hover .g-label,.g-kind-character .g-launcher:focus-visible .g-label,.g-kind-character .g-launcher.g-hint .g-label{transform:none}
.g-kind-character.g-guide[data-pose=hop] .g-label,.g-kind-character.g-guide[data-pose=doze] .g-label{opacity:0}
.g-guide.g-kind-character .g-orb-close{display:none}
.g-guide.g-kind-character:not(.g-tab) .g-header .g-close{display:block}
/* Open state: the orb becomes a close control */
.g-guide .g-orb-close{position:fixed;z-index:1;width:58px;height:58px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--g-close);color:var(--g-close-ink);font-size:28px;line-height:1;display:grid;place-items:center;box-shadow:0 10px 26px #00000040;cursor:pointer}
/* Panel */
.g-panel{position:fixed;inset:auto 20px 20px auto;margin:0;width:360px;max-width:calc(100vw - 32px);max-height:calc(var(--g-vh) - 32px);padding:0;border:1px solid var(--g-line);border-radius:20px;background:var(--g-card);color:var(--g-ink);box-shadow:0 24px 70px #00000038;overflow:visible}
.g-panel[open]{display:flex;flex-direction:column}
.g-panel::backdrop{background:#0000001f}
.g-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:19px 19px 0 0;background:var(--g-head);color:var(--g-head-ink)}
.g-header h2{margin:0;flex:1;font-family:inherit;font-size:19px;letter-spacing:-.01em;font-weight:600;color:inherit;line-height:1.2}
.g-mark{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--g-ring);background:#ffffff0f;gap:2px}
.g-mark i{width:2px}.g-mark i:nth-child(1){--h:9px}.g-mark i:nth-child(2){--h:14px}.g-mark i:nth-child(3){--h:9px}
.g-pp .g-mark i,.g-bioantler .g-mark i{background:var(--g-head-ink)}.g-pp .g-mark i:nth-child(even),.g-bioantler .g-mark i:nth-child(even){background:var(--g-ring)}
.g-avatar{width:40px;height:40px;object-fit:cover;object-position:50% 0;border-radius:50%;background:var(--g-paper);flex-shrink:0}
.g-grab{display:none}
.g-guide .g-close{display:none;font:inherit;font-size:26px;width:44px;min-height:44px;padding:0;border:0;background:transparent;color:inherit;line-height:1;cursor:pointer}
.g-content{padding:20px 22px;overflow-y:auto;max-height:calc(var(--g-vh) - 118px);overscroll-behavior:contain;border-radius:0 0 19px 19px}
.g-intro{margin:0 0 16px;color:var(--g-muted);font-size:14px;line-height:1.6}
.g-guide .g-quick{position:static;inset:auto;transform:none;width:auto;height:auto;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:0;background:none;border:0;box-shadow:none}
.g-guide a{color:var(--g-accent);font-weight:600;text-decoration:none}
.g-guide a:hover{text-decoration:underline}
.g-quick>a{display:flex;align-items:center;padding:10px 14px;min-height:44px;border:1px solid var(--g-line);border-radius:999px;line-height:1.4;font-size:13px;background:var(--g-paper);color:var(--g-ink)}
.g-note{color:var(--g-muted);font-size:12px;line-height:1.6;margin:14px 0 0}
.g-guide :focus-visible{outline:2px solid var(--g-accent);outline-offset:3px}
/* Mobile: right-edge Help tab and bottom sheet */
.g-guide.g-tab .g-launcher{left:auto!important;top:auto!important;right:0;bottom:calc(80px + env(safe-area-inset-bottom));width:30px;height:68px;padding:0;overflow:visible;border:1px solid var(--g-line);border-right:0;border-radius:10px 0 0 10px;background:var(--g-card);box-shadow:inset 3px 0 0 var(--g-ring),-4px 6px 18px #0000001a;visibility:visible}
.g-tab .g-orb,.g-tab .g-ring,.g-tab .g-figure,.g-tab .g-orb-close{display:none}
.g-tab .g-label{position:absolute;left:50%;top:50%;right:auto;bottom:auto;display:block;opacity:1;transform:translate(-50%,-50%) rotate(-90deg)!important;padding:0 0 0 2px;border:0;border-radius:0;background:none;box-shadow:none;font-size:11px;line-height:1;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--g-ink);transition:none}
.g-tab .g-panel{inset:auto 0 var(--g-kb) 0;width:100%;max-width:100%;max-height:calc(var(--g-vh) - 24px);border:0;border-top:1px solid var(--g-line);border-radius:18px 18px 0 0;box-shadow:0 -18px 50px #00000033;overflow:hidden}
.g-tab .g-panel::backdrop{background:#00000080}
.g-tab .g-grab{display:block;position:absolute;left:50%;top:7px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:#ffffff59;z-index:1}
.g-tab .g-header{position:relative;padding:20px 14px 14px 18px;border-radius:0}
.g-tab .g-close{display:block}
.g-tab .g-content{padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-height:calc(var(--g-vh) - 100px);border-radius:0}
.g-z{position:absolute;left:14px;top:-34px;font:600 12px/1 Georgia,serif;letter-spacing:3px;color:var(--g-ring);opacity:0;transition:opacity .4s ease;white-space:nowrap}
.g-guide[data-pose=doze] .g-z{opacity:.9;animation:g-zz 2.6s ease-in-out infinite}
@keyframes g-zz{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.g-figure.g-bob{animation:g-bob .42s cubic-bezier(.3,1.4,.5,1)}.g-figure.g-jolt{animation:g-jolt .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes g-bob{0%{transform:translateY(8px)}55%{transform:translateY(-10px)}100%{transform:none}}
@keyframes g-jolt{0%{transform:none}35%{transform:translateY(-14px) scaleY(1.05)}70%{transform:scaleY(.96)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.g-bars i{animation:none;height:var(--h,12px)}.g-ring{animation:none;opacity:.45}.g-orb,.g-label,.g-pose{transition:none}.g-guide[data-pose=sit] .g-sit,.g-figure.g-bob,.g-figure.g-jolt,.g-guide[data-pose=doze] .g-z{animation:none}}