@layer foundation, layout, content;
@layer foundation {
  :root { color-scheme: light; font-family: var(--font-inter); color: var(--ink); background: var(--background); }
  body { margin:0; font-size:1rem; line-height:1.7; }
  a { color:var(--accent); text-underline-offset:.2em; }
  a:hover { text-decoration-thickness:2px; }
  :focus-visible { outline:3px solid var(--accent); outline-offset:4px; border-radius:3px; }
  ::selection { background:var(--border); color:var(--ink); }
  .skip { position:fixed; top:8px; left:16px; padding:10px 16px; background:var(--surface); border:1px solid var(--line); z-index:3; transform:translateY(-150%); }
  .skip:focus { transform:translateY(0); }
}
@layer layout {
  .topbar { min-block-size:76px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; padding-inline:clamp(20px,4vw,64px); border-block-end:1px solid var(--line); background:var(--surface); }
  .wordmark { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-size:1.25rem; font-weight:650; letter-spacing:-.055em; }
  .wordmark span { display:grid; place-items:center; inline-size:29px; block-size:29px; background:var(--accent); color:white; border-radius:9px; font-size:1.35rem; font-weight:500; line-height:1; }
  .divider { block-size:20px; inline-size:1px; background:var(--line); }
  .docs-label { text-decoration:none; color:var(--muted); font-size:.875rem; }
  .studio-link { margin-inline-start:auto; color:var(--ink); text-decoration:none; font-size:.875rem; padding-block:12px; }
  .studio-link span { margin-inline-start:8px; }
  .layout { max-inline-size:1220px; margin-inline:auto; display:grid; grid-template-columns:232px minmax(0,1fr); column-gap:64px; padding:48px 32px; }
  .sidebar { align-self:start; position:sticky; top:24px; display:flex; flex-direction:column; gap:5px; font-size:.875rem; }
  .sidebar > a { display:block; color:var(--muted); text-decoration:none; padding:9px 14px; border-radius:9px; }
  .sidebar > a:hover { color:var(--ink); background:var(--subtle); }
  .sidebar > a[aria-current] { color:var(--accent); background:var(--subtle); font-weight:600; }
  .sidebar-note { margin-block-start:40px; padding-inline:14px; font-size:.75rem; line-height:1.8; color:var(--muted); }
  main { max-inline-size:780px; min-inline-size:0; }
  .breadcrumb { display:flex; flex-wrap:wrap; gap:9px; color:var(--muted); font-size:.75rem; margin-block-end:24px; }
  .breadcrumb a { color:inherit; text-decoration:none; }
  .page-footer { margin-block-start:64px; padding-block-start:20px; border-block-start:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 20px; font-size:.75rem; color:var(--muted); }
  .page-footer p { margin:0; flex:1 1 230px; }
  @media (width < 900px) { .layout { grid-template-columns:190px minmax(0,1fr); gap:32px; padding-inline:24px; } }
  @media (width < 680px) {
    .topbar { gap:12px; padding-inline:20px; min-block-size:68px; }
    .divider,.docs-label { display:none; }
    .layout { display:block; padding:20px; }
    .sidebar { position:static; display:flex; flex-flow:row wrap; gap:4px; border-block-end:1px solid var(--line); padding-block-end:20px; margin-block-end:32px; }
    .sidebar > a { padding:8px 10px; font-size:.8rem; }
    .sidebar-note { display:none; }
  }
}
@layer content {
  h1,h2 { line-height:1.2; font-weight:600; letter-spacing:-.035em; text-wrap:balance; }
  h1 { margin:0 0 14px; font-size:clamp(2.2rem,1.65rem + 1.8vw,3.35rem); }
  h2 { margin:40px 0 14px; font-size:1.25rem; }
  p { margin:0 0 18px; }
  .subtitle { font-size:1.125rem; color:var(--muted); margin-block-end:32px; line-height:1.6; }
  .lead { font-size:1rem; }
  .notice { background:var(--subtle); border:1px solid var(--border); border-radius:12px; padding:20px 22px; margin-block:28px; font-size:.875rem; }
  .notice strong { color:var(--ink-secondary); display:block; margin-block-end:6px; }
  .notice p { margin:0; }
  .steps { list-style:none; padding:0; margin-block:24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .steps li { margin:0; padding-block-start:14px; border-block-start:2px solid var(--border); }
  .steps strong { display:block; font-size:.875rem; margin-block-end:6px; }
  .steps span { display:block; color:var(--muted); font-size:.8rem; line-height:1.65; }
  .link-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .link-grid a { display:block; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; text-decoration:none; }
  .link-grid a:hover { border-color:var(--text-muted); }
  .link-grid strong { display:block; font-size:.875rem; color:var(--ink); margin-block-end:7px; }
  .link-grid span { display:block; color:var(--muted); font-size:.8rem; line-height:1.6; }
  code { font: .875em/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; background:var(--background); padding:.15em .35em; border-radius:4px; }
  pre { overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:20px; margin-block:20px; tab-size:2; }
  pre code { font-size:.8rem; display:block; background:none; padding:0; white-space:pre-wrap; overflow-wrap:anywhere; }
  ol,ul { padding-inline-start:24px; }
  li { padding-inline-start:3px; margin-block:12px; }
  .table-wrap { max-inline-size:100%; overflow:auto; margin-block:20px; }
  table { border-collapse:collapse; inline-size:100%; font-size:.8125rem; line-height:1.65; background:var(--surface); }
  caption { text-align:start; color:var(--muted); margin-block-end:12px; font-size:.75rem; }
  th { font-weight:600; color:var(--ink); background:var(--background); text-align:start; }
  td,th { border-block-end:1px solid var(--line); vertical-align:top; padding:12px 14px; }
  th:first-child,td:first-child { min-inline-size:115px; }
  td code { font-size:.85em; }
  dt { font-size:.875rem; font-weight:600; margin-block-start:18px; }
  dd { margin:3px 0 0; color:var(--muted); font-size:.875rem; }
  .next-link { margin-block-start:28px; }
  @media (width < 680px) { .steps { grid-template-columns:1fr; gap:14px; } .link-grid { grid-template-columns:1fr; } .notice { padding:18px; } }
}