@layer reset, foundation, shell, components, feature, utilities;

@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body,h1,h2,h3,p,ul,ol,pre,table{margin:0}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
}

@layer foundation {
  body{min-width:320px;background:var(--color-canvas);color:var(--color-ink);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:var(--type-body);line-height:1.65}
  button{font:inherit}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip-link{position:fixed;z-index:30;top:var(--space-2);left:var(--space-2);transform:translateY(-160%);border-radius:var(--radius-control);background:var(--color-action);color:var(--color-surface);padding:var(--space-2) var(--space-3)}
  .skip-link:focus{transform:translateY(0);outline:none;box-shadow:var(--focus-ring)}
  :focus-visible{outline:none;box-shadow:var(--focus-ring)}
}

@layer shell {
  .topbar{position:sticky;z-index:20;top:0;height:68px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-line);background:rgb(245 246 245 / 94%);padding:0 var(--space-6);backdrop-filter:blur(16px)}
  .brand{min-height:44px;display:inline-flex;align-items:center;gap:var(--space-3)}
  .brand>span{display:grid;line-height:1.08}.brand b{font-size:var(--type-callout);letter-spacing:.08em}.brand small{color:var(--color-ink-secondary);font-size:var(--type-caption)}
  .nesta-mark{width:24px;height:24px;border-radius:50% 50% 50% 8px;background:var(--nesta-mark-fill);box-shadow:var(--shadow-nesta-inset)}
  .top-actions{display:flex;align-items:center;gap:var(--space-2)}.top-actions>a{min-height:44px;display:inline-flex;align-items:center;padding:0 var(--space-3);color:var(--color-ink-secondary);font-size:var(--type-support)}
  .menu-button{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:var(--radius-control);align-items:center;justify-content:center;color:var(--color-ink)}
  .menu-button>span:first-child,.menu-button>span:first-child::before,.menu-button>span:first-child::after{display:block;width:20px;height:2px;background:currentColor;content:"";transition:transform var(--motion-press)}
  .menu-button>span:first-child{position:relative}.menu-button>span:first-child::before{position:absolute;top:-6px}.menu-button>span:first-child::after{position:absolute;top:6px}
  .site-shell{width:min(1440px,100%);margin:auto;display:grid;grid-template-columns:260px minmax(0,1fr)}
  .sidebar{position:sticky;top:68px;height:calc(100dvh - 68px);display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--color-line);padding:var(--space-8) var(--space-4);overflow:auto}
  .sidebar nav>p{margin:0 var(--space-3) var(--space-3);color:var(--color-ink-tertiary);font-size:var(--type-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  .sidebar nav>a{min-height:48px;display:flex;align-items:center;gap:var(--space-3);border-radius:var(--radius-control);padding:0 var(--space-3);font-size:var(--type-callout)}
  .sidebar nav>a span{color:var(--color-ink-tertiary);font-size:var(--type-caption)}
  .sidebar nav>a[aria-current=page]{background:var(--color-surface-subtle);font-weight:650}.sidebar nav>a:hover{background:var(--color-surface)}
  .source-note{border-top:1px solid var(--color-line);padding:var(--space-4) var(--space-3) 0}.source-note b{font-size:var(--type-support)}.source-note p{margin-top:var(--space-1);color:var(--color-ink-secondary);font-size:var(--type-caption)}
  main{min-width:0;background:var(--color-surface)}
}

@layer feature {
  .document{width:min(980px,100%);margin:auto;padding:clamp(var(--space-8),7vw,88px) clamp(var(--space-4),6vw,72px) var(--space-8)}
  .document-header{max-width:760px;padding-bottom:var(--space-8);border-bottom:1px solid var(--color-line)}.document-header>span{color:var(--color-ink-tertiary);font-size:var(--type-caption);font-weight:700;letter-spacing:.1em}.document-header h1{margin-top:var(--space-3);font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.035em}.document-header p{max-width:650px;margin-top:var(--space-4);color:var(--color-ink-secondary);font-size:var(--type-section)}
  .document-layout{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:var(--space-12);padding-top:var(--space-8)}.document-layout.no-toc{grid-template-columns:1fr}
  .prose{min-width:0;font-size:var(--type-callout)}.prose>*+*{margin-top:var(--space-4)}.prose h2{margin-top:var(--space-12);font-size:26px;line-height:1.25;letter-spacing:-.02em}.prose h3{margin-top:var(--space-8);font-size:var(--type-title)}.prose p,.prose li{color:var(--color-ink-secondary)}.prose strong{color:var(--color-ink)}.prose ul,.prose ol{padding-left:var(--space-6)}.prose li+li{margin-top:var(--space-2)}.prose a{text-decoration:underline;text-decoration-color:var(--color-line);text-underline-offset:3px}.prose code{border-radius:var(--radius-compact);background:var(--color-surface-subtle);padding:2px var(--space-1);font-family:"SFMono-Regular",Consolas,monospace;font-size:var(--type-support);color:var(--color-ink)}
  .prose pre{max-width:100%;overflow:auto;border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-surface-subtle);padding:var(--space-4)}.prose pre code{padding:0;background:transparent;white-space:pre}
  .prose table{width:100%;border-collapse:collapse;font-size:var(--type-body)}.prose th,.prose td{border-bottom:1px solid var(--color-line);padding:var(--space-3);text-align:left;vertical-align:top}.prose th{color:var(--color-ink);font-size:var(--type-support)}
  .prose img{width:100%;margin:var(--space-8) 0;border:1px solid var(--color-line);border-radius:var(--radius-panel);background:var(--color-canvas)}
  .page-toc{position:relative}.page-toc nav{position:sticky;top:100px;border-left:1px solid var(--color-line);padding-left:var(--space-4)}.page-toc p{margin-bottom:var(--space-2);font-size:var(--type-support);font-weight:650}.page-toc a{min-height:36px;display:flex;align-items:center;color:var(--color-ink-secondary);font-size:var(--type-caption)}.page-toc a.level-3{padding-left:var(--space-3)}
  .page-navigation{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-line)}.page-navigation>a{min-height:76px;display:grid;align-content:center;border:1px solid var(--color-line);border-radius:var(--radius-card);padding:var(--space-4)}.page-navigation>a:last-child{text-align:right}.page-navigation span{color:var(--color-ink-tertiary);font-size:var(--type-caption)}.page-navigation b{font-size:var(--type-callout)}
  .document-footer{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-line);color:var(--color-ink-tertiary);font-size:var(--type-caption)}
}

@layer utilities {
  @media (max-width:880px){.topbar{padding:0 var(--space-4)}.top-actions>a{display:none}.menu-button{display:flex}.site-shell{display:block}.sidebar{position:fixed;z-index:15;top:68px;right:0;bottom:0;left:0;height:auto;transform:translateX(-102%);border-right:0;background:var(--color-canvas);transition:transform var(--motion-press)}.nav-open{overflow:hidden}.nav-open .sidebar{transform:translateX(0)}.nav-open .menu-button>span:first-child{background:transparent}.nav-open .menu-button>span:first-child::before{top:0;transform:rotate(45deg)}.nav-open .menu-button>span:first-child::after{top:0;transform:rotate(-45deg)}.document-layout{grid-template-columns:1fr}.page-toc{order:-1}.page-toc nav{position:static;border-left:0;border-bottom:1px solid var(--color-line);padding:0 0 var(--space-4)}.page-toc a{display:inline-flex;margin-right:var(--space-3)}.prose table{display:block;overflow-x:auto}.document{padding-right:var(--space-4);padding-left:var(--space-4)}}
  @media (max-width:480px){.document-header h1{font-size:34px}.page-navigation{grid-template-columns:1fr}.page-navigation>span{display:none}.page-navigation>a:last-child{text-align:left}.document-footer{display:grid}.prose img{border-radius:var(--radius-card)}}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sidebar,.menu-button>span:first-child,.menu-button>span:first-child::before,.menu-button>span:first-child::after{transition:none}}
}