* { box-sizing: border-box; }
html { scroll-padding-top: var(--space-l); }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-weight: 400; }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--color-green-evening); }
:focus-visible { outline: 2px solid var(--color-ws-blue); outline-offset: 5px; }
::selection { background: var(--color-green-dawn); color: var(--color-text); }
.page-width { width: min(calc(100% - var(--gutter) * 2), var(--max-width)); margin-inline: auto; }
.skip-link { position: absolute; top: var(--space-s); left: var(--space-s); z-index: 1; padding: var(--space-s); background: var(--color-white); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { min-height: 7rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); border-bottom: 1px solid var(--color-border); }
.brand { display: inline-flex; padding: var(--space-m) 0; }
.logo__graphic { display: block; width: 10.625rem; height: 1.875rem; }
.header-label { font-size: var(--prose-size-small); color: var(--color-text-muted); }
.introduction { padding-block: var(--space-2xl) var(--space-xl); }
.eyebrow { font-size: var(--prose-size-small); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.introduction h1 { max-width: 24ch; margin: var(--space-s) 0 0; color: var(--color-text); font-size: var(--prose-size-h2); font-weight: 600; line-height: var(--prose-leading-h2); letter-spacing: -0.01em; }
.prose .lead { max-width: 56ch; margin-top: var(--space-s); font-size: var(--prose-size-lead); line-height: var(--prose-leading-lead); }
.start-link { display: inline-flex; align-items: center; gap: var(--space-s); margin-top: var(--space-m); font-size: var(--prose-size-small); font-weight: 600; }
.guide-layout { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, var(--prose-max)); gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-2xl); border-top: 1px solid var(--prose-color-rule); }
.contents { font-size: var(--prose-size-small); line-height: 1.5; }
.contents .eyebrow { margin: 0 0 var(--space-m); }
.contents ol { list-style: decimal-leading-zero; margin: 0; padding-left: var(--space-m); }
.contents li { padding-left: var(--space-3xs); }
.contents li + li { margin-top: var(--space-xs); }
.contents a { text-decoration: none; }
.contents a:hover { text-decoration: underline; }
.contents-note { max-width: 25ch; margin-top: var(--space-xl); color: var(--color-text-muted); }
.prose { max-width: var(--prose-max); font-size: var(--prose-size-body); line-height: var(--prose-leading-body); color: var(--prose-color-soft); }
.prose p, .prose h2, .prose h3, .prose ul, .prose ol, .prose pre { margin: 0; }
.prose p + *, .prose h2 + *, .prose h3 + *, .prose ul + *, .prose ol + *, .prose pre + *, .prose table + * { margin-top: var(--space-s); }
.prose h2, .prose h3 { color: var(--prose-color-text); font-weight: 600; letter-spacing: -0.01em; }
.prose h2 { font-size: var(--prose-size-h2); line-height: var(--prose-leading-h2); }
.prose h3 { font-size: var(--prose-size-h3); line-height: var(--prose-leading-h3); }
.prose * + h3 { margin-top: var(--space-l); }
.prose strong { color: var(--prose-color-text); font-weight: 600; }
.prose ul, .prose ol { padding-left: var(--space-s); }
.prose li + li { margin-top: var(--space-2xs); }
.prose section + section { margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: 1px solid var(--color-border); }
.prose .section-number { margin-bottom: var(--space-xs); font-size: var(--prose-size-small); color: var(--color-text-muted); }
.section-number + h2 { margin-top: 0; }
.method { margin-top: var(--space-l); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-s); background: var(--color-green-dawn); color: var(--color-green-nightfall); font-size: var(--prose-size-small); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--prose-size-small); }
.prose caption { margin-bottom: var(--space-xs); text-align: left; color: var(--prose-color-text); font-weight: 600; }
.prose th, .prose td { padding: var(--space-xs) var(--space-s) var(--space-xs) 0; text-align: left; vertical-align: top; }
.prose th { color: var(--prose-color-text); font-weight: 600; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose tbody th { width: 42%; font-weight: 400; }
.prose tr { border-bottom: 1px solid var(--prose-color-rule); }
.note { margin-top: var(--space-l); padding: var(--space-m); background: var(--color-beige-dawn); }
.steps li + li { margin-top: var(--space-s); }
.prose code { padding: 0.125rem 0.375rem; background: var(--prose-color-plate); color: var(--prose-color-text); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.875em; overflow-wrap: anywhere; }
.prose pre { padding: var(--space-s); background: var(--prose-color-plate); overflow-x: auto; }
.prose pre code { padding: 0; background: none; overflow-wrap: normal; }
.prose .prompt code { white-space: pre-wrap; overflow-wrap: anywhere; }
details { margin-top: var(--space-l); border-block: 1px solid var(--prose-color-rule); }
summary { padding-block: var(--space-s); cursor: pointer; color: var(--color-text); font-weight: 600; }
.terminal-guide { min-width: 0; padding-block: var(--space-xs) var(--space-m); }
.help { margin-top: var(--space-2xl); padding: var(--space-l); background: var(--color-green-nightfall); color: var(--color-white-80); }
.help h2 { color: var(--color-white); }
.site-footer { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); align-items: baseline; padding-block: var(--space-l); border-top: 1px solid var(--color-border); font-size: var(--prose-size-small); color: var(--color-text-muted); }
.site-footer > :first-child { color: var(--color-text); font-weight: 600; }
.site-footer a { margin-left: auto; }
@media (max-width: 800px) {
  .page-width { width: calc(100% - var(--space-m) * 2); }
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .contents ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-m); }
  .contents li + li { margin-top: 0; }
  .contents-note { display: none; }
}
@media (max-width: 480px) {
  .site-header { align-items: flex-start; flex-direction: column; gap: 0; padding-block: var(--space-xs) var(--space-m); }
  .brand { padding-block: var(--space-s); }
  .introduction { padding-top: var(--space-xl); }
  .contents ol { grid-template-columns: minmax(0, 1fr); }
  .note, .help { padding: var(--space-s); }
  .site-footer a { margin-left: 0; flex-basis: 100%; }
}