.guide-intro { max-width: 850px; margin-bottom: 3rem; }
.guide-intro h1 { margin: 1rem 0 0; font-size: clamp(2.7rem, 6vw, 4.3rem); line-height: 1.04; letter-spacing: -.04em; }
.guide-intro p { max-width: 760px; margin: 1.2rem 0 0; color: rgb(255 255 255 / 64%); font-size: 1.05rem; line-height: 1.75; }
.examples-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; min-width: 0; }
.example-sidebar { position: sticky; top: 1.5rem; padding: 1.2rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: 1.5rem; background: rgb(255 255 255 / 3%); }
.example-sidebar nav { display: grid; gap: .35rem; margin-top: .8rem; }
.example-sidebar a { display: flex; gap: .7rem; align-items: start; padding: .65rem; border-radius: .7rem; color: rgb(255 255 255 / 62%); font-size: .78rem; line-height: 1.4; }
.example-sidebar a:hover { background: rgb(255 255 255 / 5%); color: #fff; }
.example-sidebar a span { color: #ff6477; font-size: .65rem; }
.example-list { display: grid; gap: 2rem; min-width: 0; }
.example-card { min-width: 0; max-width: 100%; padding: clamp(1.25rem, 3vw, 2rem); scroll-margin-top: 1.5rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: 1.7rem; background: rgb(255 255 255 / 3%); }
.example-card > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.example-card h2 { margin: .65rem 0 0; font-size: 1.85rem; letter-spacing: -.025em; }
.example-card header > a { color: rgb(255 255 255 / 36%); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; }
.example-summary { max-width: 780px; color: rgb(255 255 255 / 62%); line-height: 1.75; }
.example-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.example-notes li { padding: 1rem; border: 1px solid rgb(255 255 255 / 7%); border-radius: .8rem; background: rgb(0 0 0 / 20%); color: rgb(255 255 255 / 55%); font-size: .78rem; line-height: 1.55; }
@media (max-width: 900px) { .examples-layout { grid-template-columns: minmax(0, 1fr); } .example-sidebar { position: static; } .example-sidebar nav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .example-sidebar nav, .example-notes { grid-template-columns: 1fr; } .example-card > header { flex-direction: column; } }