:root{ --mz-reveal-y: 22px; --mz-reveal-duration: 620ms; }

.g-nav{position:sticky;top:0;z-index:40;display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:10px 18px;margin-bottom:8px;
  background:var(--mz-surface-alt);
  border-bottom:1px solid var(--mz-border-soft)}
.g-nav a{color:var(--mz-text-muted);text-decoration:none;font-family:var(--mz-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:var(--mz-radius-sm);
  transition:color .18s ease, background .18s ease}
.g-nav a:hover,.g-nav a:focus-visible{color:var(--mz-text-strong);background:var(--mz-surface)}
.g-nav__brand{font-family:var(--mz-mono);font-size:.72rem;letter-spacing:.24em;color:var(--mz-accent);
  margin-right:auto;font-weight:600}
.g-nav__controls{margin:0;padding:0;border:0;background:none}

.g-hero{overflow:hidden}
.g-hero__body{padding:34px 30px;max-width:74ch}
.g-hero__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.g-meta{margin-top:18px}
.g-stats{margin-top:22px}

.g-sec{margin:86px 0}
.g-sec__head{display:flex;align-items:baseline;gap:16px;
  border-bottom:1px solid var(--mz-border);padding-bottom:12px;margin-bottom:28px}
.g-sec__num{font-family:var(--mz-mono);color:var(--mz-accent);font-size:.82rem;letter-spacing:.16em}
.g-gap{margin-top:20px}

.g-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px;margin-bottom:8px}
.g-swatch{border:1px solid var(--mz-border);border-radius:var(--mz-radius-sm);overflow:hidden;
  background:var(--mz-surface)}
.g-swatch__chip{height:56px;border-bottom:1px solid var(--mz-border-soft)}
.g-swatch__meta{padding:8px 10px;font-family:var(--mz-mono);font-size:.64rem;line-height:1.6}
.g-swatch__name{color:var(--mz-text-strong);word-break:break-all}
.g-swatch__val{color:var(--mz-text-muted);text-transform:uppercase}

.g-specimen{display:grid;gap:2px}
.g-specimen__row{display:grid;grid-template-columns:minmax(0,150px) 1fr;gap:18px;align-items:baseline;
  padding:16px 4px;border-bottom:1px dashed var(--mz-border-soft)}
.g-specimen__row > .mz-code{align-self:start}
.g-specimen__row .mz-title{font-size:clamp(1.7rem,4vw,2.6rem)}

.g-lab__stage{display:flex;align-items:center;justify-content:center;min-height:104px;margin:14px 0 6px;
  cursor:pointer}
.g-big{font-family:var(--mz-mono);font-size:2rem;color:var(--mz-text-strong)}

.g-fx-stage{position:relative;height:280px;overflow:hidden;
  border:1px solid var(--mz-border);border-radius:var(--mz-radius);
  background:var(--mz-surface-alt)}
.g-fx-stage--frost{background:
  repeating-linear-gradient(135deg,var(--mz-surface) 0 22px,var(--mz-surface-alt) 22px 44px)}
.g-fx-stage__hint{position:absolute;left:14px;bottom:12px;z-index:3;
  font-family:var(--mz-mono);font-size:.66rem;letter-spacing:.06em;color:var(--mz-text-muted);
  background:var(--mz-bg);padding:4px 8px;border-radius:var(--mz-radius-sm);
  border:1px solid var(--mz-border-soft)}

@media (max-width:640px){
  .g-specimen__row{grid-template-columns:1fr;gap:8px}
  .g-hero__body{padding:24px 18px}
  .g-fx-stage{height:220px}
}