@layer reset{
  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{ margin:0; }
  img,svg,video,canvas{ display:block; max-width:100%; }
  button,input,select,textarea{ font:inherit; color:inherit; }
  a{ color:inherit; text-decoration:none; }
  ul,ol{ padding-left: 1.25em; }
}

@layer base{
  :root{ color-scheme: light; }
  body{
    font-family: var(--font-sans);
    font-size: var(--text-15);
    line-height: var(--lh-normal);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  
  body.modal-open{ overflow: hidden; }
/* Selection */
  ::selection{ background: rgba(17,17,17,.14); }

  /* Typography */
  h1,h2,h3{ letter-spacing:-0.02em; margin:0; }
  h1{ font-size: clamp(28px, 4vw, var(--text-40)); line-height: 1.05; }
  h2{ font-size: clamp(20px, 2.6vw, var(--text-32)); line-height: 1.15; }
  h3{ font-size: var(--text-20); line-height: 1.2; }
  p{ margin: 0; color: var(--text-2); }

  .muted{ color: var(--text-3); }
  .k{ font-family: var(--font-mono); font-size: 0.95em; }
  .kbd{
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-bottom-color: var(--border-2);
    border-radius: 7px;
    background: var(--bg-elev);
    box-shadow: var(--shadow-1);
    color: var(--text);
  }

  /* Focus */
  :focus-visible{
    outline: none;
    box-shadow: 0 0 0 4px var(--focus);
    border-radius: 10px;
  }

  /* Helpers */
  .hidden{ display:none !important; }
  .soft{ color: var(--text-2); }
  .link{
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(17,17,17,.25);
  }
  .link:hover{ text-decoration-color: rgba(17,17,17,.45); }

  /* Default container sizing */
  .wrap{
    width: min(var(--wrap), calc(100% - 2*var(--space-20)));
    margin: 0 auto;
  }
  .guide-article h2, .guide-article h3{ scroll-margin-top: calc(var(--sticky-top, 64px) + 18px); }


}