@layer components {
  .guide-breadcrumbs { margin-block:32px; font-size:.82rem; color:var(--muted); }
  .guide-breadcrumbs ol { display:flex; flex-wrap:wrap; gap:8px 12px; list-style:none; margin:0; padding:0; }
  .guide-breadcrumbs li:not(:last-child)::after { content:"/"; margin-left:12px; color:var(--muted); }
  .guide-breadcrumbs a { color:var(--muted); text-underline-offset:4px; }
  .guide-heading { max-width:1000px; padding-block:22px 44px; }
  .guide-heading h1 { font-size:clamp(2.4rem,4.7vw,4.4rem); line-height:1.12; text-wrap:balance; margin-bottom:24px; }
  .guide-heading .guide-intro { font-size:1.12rem; max-width:70ch; color:var(--muted); }
  .guide-meta { display:flex; flex-wrap:wrap; gap:6px 22px; font-size:.8rem; color:var(--muted); margin-top:26px; }
  .guide-meta a { color:inherit; }
  .guide-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-block:12px 60px; }
  .guide-card { display:flex; flex-direction:column; padding:30px; border:1px solid var(--line); border-radius:12px; background:var(--surface); min-width:0; }
  .guide-card .guide-category { font-size:.7rem; font-weight:650; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:22px; }
  .guide-card h2,.guide-card h3 { font-size:1.5rem; line-height:1.3; letter-spacing:-.025em; margin:0 0 16px; }
  .guide-card h2 a,.guide-card h3 a { text-decoration:none; color:var(--text); }
  .guide-card h2 a:hover,.guide-card h3 a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
  .guide-card p { color:var(--muted); font-size:.94rem; }
  .guide-card .text-link { margin-top:auto; padding-top:18px; align-self:flex-start; }
  .guide-layout { display:grid; grid-template-columns:210px minmax(0,820px); gap:64px; align-items:start; padding-block:12px 80px; }
  .guide-toc { position:sticky; top:110px; border-top:1px solid var(--line); padding-top:20px; font-size:.84rem; }
  .guide-toc h2 { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 16px; color:var(--muted); }
  .guide-toc ol { list-style:none; display:grid; gap:12px; padding:0; margin:0; }
  .guide-toc a { color:var(--muted); text-decoration:none; }
  .guide-toc a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
  .guide-prose { min-width:0; font-size:1.04rem; overflow-wrap:break-word; }
  .guide-prose h2 { font-size:clamp(1.65rem,2.6vw,2.2rem); line-height:1.22; margin-block:52px 20px; letter-spacing:-.03em; }
  .guide-prose h3 { font-size:1.2rem; margin-block:30px 12px; letter-spacing:-.015em; }
  .guide-prose>h2:first-child { margin-top:0; }
  .guide-prose p,.guide-prose li { max-width:74ch; }
  .guide-prose p { margin-bottom:20px; }
  .guide-prose li { margin-block:10px; padding-left:4px; }
  .guide-prose ul,.guide-prose ol { padding-left:24px; }
  .guide-prose a { text-underline-offset:3px; }
  .guide-prose pre:focus-visible { outline-offset:-3px; }
  .guide-prose [id] { scroll-margin-top:110px; }
  .guide-answer { border-left:3px solid var(--accent); padding:24px 28px; background:var(--accent-soft); border-radius:0 8px 8px 0; margin-bottom:34px; }
  .guide-answer p:last-child { margin-bottom:0; }
  .guide-figure { margin:30px 0; }
  .guide-figure img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }
  .guide-figure figcaption { font-size:.8rem; color:var(--muted); margin-top:12px; line-height:1.55; }
  .guide-note { font-size:.88rem; color:var(--muted); }
  .guide-steps li { padding-left:8px; margin-block:22px; }
  .guide-flow { margin:30px 0; padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
  .guide-flow ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:0; counter-reset:flow; }
  .guide-flow li { padding:16px; background:var(--surface-soft); border-radius:6px; margin:0; font-size:.86rem; counter-increment:flow; }
  .guide-flow li::before { content:"0" counter(flow); display:block; margin-bottom:12px; color:var(--accent); font-size:.75rem; }
  .guide-flow strong { display:block; margin-bottom:8px; }
  .guide-flow figcaption { color:var(--muted); font-size:.8rem; margin-top:16px; }
  .guide-download { margin-block:42px; padding:28px; background:var(--surface-soft); border-radius:10px; }
  .guide-download h2 { margin:0 0 12px; font-size:1.55rem; }
  .guide-download p { font-size:.96rem; }
  .guide-download .hero-actions { margin-top:20px; flex-wrap:wrap; }
  .guide-related { padding-block:48px 12px; border-top:1px solid var(--line); }
  .guide-related>h2 { margin:0 0 24px; }
  .guide-related .guide-cards { grid-template-columns:1fr; margin-bottom:0; gap:18px; }
  .guide-related .guide-card { padding:24px; }
  .guide-related h3 { margin-top:0; }
  .guide-sources { padding-block:24px; border-top:1px solid var(--line); font-size:.88rem; }
  .guide-sources h2 { font-size:1.3rem; margin-top:18px; }
  .guide-hub-note { max-width:78ch; margin-bottom:72px; color:var(--muted); }
  .guide-hub-note h2 { font-size:clamp(1.65rem,2.6vw,2.2rem); }
}
@layer responsive {
  @media(max-width:600px) { .guide-toc h2 { font-size:.75rem; } .guide-card h2,.guide-card h3 { font-size:1.4rem; } .guide-prose h2,.guide-hub-note h2 { font-size:1.65rem; } .guide-prose .guide-download h2 { font-size:1.45rem; } .guide-prose .guide-sources h2 { font-size:1.3rem; } }
  @media(max-width:1100px) { .guide-layout { grid-template-columns:180px minmax(0,1fr); gap:36px; } .guide-card { padding:24px; } }
  @media(max-width:820px) { .guide-cards { grid-template-columns:1fr; gap:18px; } .guide-layout { grid-template-columns:1fr; gap:32px; } .guide-toc { position:static; padding:22px; border:1px solid var(--line); border-radius:8px; } .guide-toc ol { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; } .guide-heading { padding-bottom:24px; } }
  @media(max-width:600px) { .guide-breadcrumbs { margin-block:24px; font-size:.75rem; } .guide-heading { padding-top:12px; } .guide-heading h1 { font-size:clamp(2rem,8.7vw,3rem); } .guide-heading .guide-intro { font-size:1rem; } .guide-prose { font-size:.98rem; } .guide-toc ol { grid-template-columns:1fr; } .guide-answer,.guide-download { padding:22px; } .guide-flow { padding:18px; } .guide-flow ol { grid-template-columns:1fr; } .guide-related .guide-cards { grid-template-columns:1fr; } .guide-layout { padding-bottom:48px; } .guide-meta { display:grid; gap:8px; } .guide-prose h2 { margin-top:40px; } }
  @media print { .site-header,.site-footer,.guide-toc,.guide-download,.guide-related,.reading-progress { display:none; } .guide-layout { display:block; } .guide-prose { max-width:none; } .guide-heading h1 { font-size:30pt; } .guide-figure { break-inside:avoid; } }
}