/* The shell every inner page wears: the same black, the same liquid light,
   the same pill nav and footer as the homepage. Loaded after guide.css (or
   tour.html's own styles) and only overrides; the content styles underneath
   stay. Classes are prefixed sh- so they never collide with a page's own
   .nav / .header / .btn. */
:root {
  --bg: #000;
  --bg-2: #000;
  --surface: rgba(20, 22, 26, 0.72);
  --inset: rgba(12, 13, 16, 0.7);
  --raise: rgba(30, 33, 40, 0.8);
  --line: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.07);
  --sh-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --sh-display: "Handjet", "Silkscreen", monospace;
  --sh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sh-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
html { background: #000; }
body {
  background: #000;
  font-family: var(--sh-font);
  -webkit-font-smoothing: antialiased;
}
.sh-bg { position: fixed; inset: 0; background: #000; overflow: hidden; z-index: 0; }
.sh-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.grain { z-index: 1; }
main, .article, section, .wrap { position: relative; z-index: 2; }

/* ---------- header ---------- */
header.sh-header {
  /* Static, not sticky: a transparent pill bar floating over scrolled text
     read as clutter on the long pages. */
  position: relative; z-index: 20;
  background: transparent; border: 0; backdrop-filter: none;
  padding: clamp(14px, 2vh, 22px) clamp(14px, 3vw, 32px) 6px;
  animation: sh-slideDown 0.7s var(--sh-ease) both;
}
.sh-row {
  width: 100%; max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.8vw, 28px);
}
.sh-logo {
  width: clamp(40px, 4.4vw, 46px); height: clamp(40px, 4.4vw, 46px); border-radius: 50%;
  background: #fff; box-shadow: var(--sh-shadow); display: grid; place-items: center; flex-shrink: 0;
  text-decoration: none; transition: transform 0.25s var(--sh-ease);
}
.sh-logo:hover { transform: scale(1.04); }
.sh-logo svg { width: 72%; height: 72%; }
.sh-logo path { fill: none; stroke: #0e1013; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sh-nav {
  flex: 1; max-width: 430px; height: clamp(44px, 5.2vw, 48px);
  background: #fff; border-radius: 999px; padding: 4px 8px; box-shadow: var(--sh-shadow);
  display: flex; align-items: center; justify-content: space-around;
}
.sh-nav a {
  position: relative; padding: 8px 10px; font-weight: 500; font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: -0.01em; color: #2e2e2e; opacity: 0.5; text-decoration: none; transition: opacity 0.2s;
}
.sh-nav a:hover { opacity: 0.75; }
.sh-nav a.active { opacity: 1; }
.sh-nav a.active::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: #000; box-shadow: -5px 0 0 #000, 5px 0 0 #000;
}
.sh-pill {
  height: clamp(44px, 5.2vw, 48px); padding: 0 18px; border-radius: 999px; border: 0;
  background: #28282a; color: #c8c8c8; font-weight: 500; font-size: clamp(13px, 1.4vw, 14.5px);
  display: inline-flex; align-items: center; white-space: nowrap; box-shadow: var(--sh-shadow);
  text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s var(--sh-ease);
}
.sh-pill:hover { background: #323234; color: #fff; transform: translateY(-1px); }
.sh-burger { display: none; }

/* ---------- content on glass ---------- */
.article {
  background: rgba(10, 11, 14, 0.62);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 44px);
  margin: clamp(18px, 3vh, 36px) auto 0;
  max-width: 820px;
}
.article h1 {
  font-family: var(--sh-display); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05;
  font-size: clamp(38px, 5.4vw, 64px);
  font-variation-settings: "ELGR" 1, "ELSH" 2, "wght" 500;
}
.article h2 { letter-spacing: -0.02em; }
.crumb a { color: #ef7fa5; }
.article a:not(.btn) { color: #ff8fb4; }
.btn { border-radius: 999px; }
.note, .cta, .steps li::before { backdrop-filter: blur(10px); }
.cta { background: rgba(20, 22, 26, 0.7); border-radius: 20px; }
table { background: rgba(0, 0, 0, 0.2); border-radius: 12px; overflow: hidden; }

/* ---------- footer ---------- */
footer.sh-foot {
  position: relative; z-index: 2; border: 0; margin: 64px 0 0; padding: 0 clamp(14px, 3vw, 32px) 44px;
}
.sh-links {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: #6f747c;
}
.sh-links a { text-decoration: none; color: inherit; }
.sh-links a:hover { color: #c4c2c3; }
.sh-disclaimer { margin: 14px auto 0; max-width: 620px; text-align: center; font-size: 11.5px; color: #55595f; line-height: 1.6; }

/* ---------- mobile ---------- */
.sh-menu {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: sh-overlayIn 0.28s var(--sh-ease) both;
}
.sh-menu[hidden] { display: none; }
.sh-sheet {
  position: absolute; left: 14px; right: 14px; top: 84px; background: #fff; color: #111;
  border-radius: 28px; padding: 22px 18px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: sh-menuIn 0.38s var(--sh-ease) both; display: flex; flex-direction: column; gap: 4px;
}
.sh-sheet a {
  position: relative; padding: 12px 10px; border-radius: 12px; font-weight: 500; font-size: 16px; color: #2e2e2e;
  text-decoration: none; opacity: 0; animation: sh-linkIn 0.4s var(--sh-ease) forwards;
}
.sh-sheet a:nth-child(1) { animation-delay: 0.05s; }
.sh-sheet a:nth-child(2) { animation-delay: 0.1s; }
.sh-sheet a:nth-child(3) { animation-delay: 0.15s; }
.sh-sheet a:nth-child(4) { animation-delay: 0.2s; }
.sh-sheet a:nth-child(5) { animation-delay: 0.25s; }
.sh-sheet a.active::after {
  content: ""; position: absolute; left: 10px; bottom: 8px; width: 3px; height: 3px;
  border-radius: 50%; background: #000; box-shadow: 5px 0 0 #000, 10px 0 0 #000;
}
.sh-sheet a.sh-pill { justify-content: center; margin-top: 8px; height: 48px; width: 100%; color: #fff; background: #111; }
@keyframes sh-overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sh-menuIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sh-linkIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sh-slideDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .sh-row { justify-content: space-between; max-width: none; }
  .sh-nav, .sh-row > .sh-pill { display: none; }
  .sh-logo { width: 48px; height: 48px; }
  .sh-burger {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0;
    background: #28282a; cursor: pointer; position: relative;
    box-shadow: var(--sh-shadow), 0 0 0 1px rgba(255, 255, 255, 0.22);
    transition: background 0.25s;
  }
  .sh-burger span { display: block; width: 18px; height: 1.5px; background: #fff; margin: 2.5px 0; transition: transform 0.3s var(--sh-ease), background 0.25s, opacity 0.2s; }
  .sh-burger[aria-expanded="true"] { background: #fff; }
  .sh-burger[aria-expanded="true"] span { background: #000; }
  .sh-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .sh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .sh-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .article { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  header.sh-header, .sh-menu, .sh-sheet, .sh-sheet a { animation: none !important; opacity: 1 !important; transform: none !important; }
}