* { box-sizing:border-box; }
body { margin:0; color:var(--brand-ink); background:var(--brand-paper); font-family:var(--font-sans); }
a { color:inherit; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.examples-hero { padding:56px 0 28px; }
.examples-hero h1 { max-width:760px; margin:14px 0; font:500 clamp(3rem,5.2vw,4.6rem)/1.04 var(--font-serif); letter-spacing:-.035em; }
.examples-hero > p { max-width:680px; margin:0; color:var(--brand-muted); font-size:16px; line-height:1.7; }
.example-search { position:relative; margin-top:28px; }
.example-search input { width:100%; min-height:58px; padding:12px 58px 12px 18px; border:1px solid var(--brand-line); border-radius:7px; background:transparent; color:var(--brand-ink); font:500 15px var(--font-sans); }
.example-search input::placeholder { color:var(--brand-muted); opacity:1; }
.example-search button { position:absolute; top:50%; right:9px; display:grid; width:40px; height:40px; padding:0; transform:translateY(-50%); place-items:center; border:0; border-radius:5px; background:transparent; color:var(--brand-muted); font:400 25px/1 var(--font-sans); cursor:pointer; }
.example-search button:hover { color:var(--brand-green); background:color-mix(in srgb,var(--brand-green),transparent 91%); }
.example-search button[hidden] { display:none; }
.example-search input:focus-visible,.example-search button:focus-visible,.example-filter-row select:focus-visible { outline:3px solid color-mix(in srgb,var(--brand-green),transparent 55%); outline-offset:2px; }
.example-filter-row { display:flex; align-items:center; gap:10px; margin-top:18px; }
.example-filter-row select { min-width:190px; min-height:42px; padding:8px 38px 8px 13px; border:1px solid var(--brand-line); border-radius:6px; background:transparent; color:var(--brand-ink); font:600 13px var(--font-sans); cursor:pointer; }
.example-select-control { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; min-width:195px; min-height:42px; overflow:hidden; flex:none; border:1px solid var(--brand-line); border-radius:6px; background:var(--brand-paper); }
.example-select-control svg { justify-self:center; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.example-filter-row .example-select-control select { width:100%; min-width:0; min-height:40px; padding:8px 38px 8px 0; border:0; border-radius:0; background:transparent; }
.example-select-control:focus-within { outline:3px solid color-mix(in srgb,var(--brand-green),transparent 55%); outline-offset:2px; }
.example-select-control select:focus-visible { outline:0; }
.examples-status { flex:none; margin:0 0 0 auto; color:var(--brand-muted); font-size:13px; }
.examples-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px; padding:0 0 64px; }
.example-card { display:flex; min-width:0; overflow:hidden; flex-direction:column; border:1px solid var(--brand-line); border-radius:8px; }
.example-card[hidden] { display:none; }
.example-visual { display:block; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--brand-line); background:var(--brand-paper); contain:layout paint; }
.example-visual img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.example-visual:hover img { transform:scale(1.015); }
.example-content { display:flex; flex-direction:column; flex:1; padding:20px; }
.example-meta { display:flex; flex-wrap:wrap; gap:7px; color:var(--brand-green); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.example-meta span + span::before { content:"·"; margin-right:7px; }
.example-content h2 { margin:10px 0; font:500 26px/1.12 var(--font-serif); letter-spacing:-.035em; }
.example-content h2 a { text-decoration:none; }
.example-content h2 a:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.example-content p { flex:1; margin:0; color:var(--brand-muted); font-size:14px; line-height:1.7; }
.example-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:20px; color:var(--brand-muted); font-size:13px; }
.example-actions { display:flex; gap:20px; }
.example-actions a { display:inline-flex; align-items:center; min-height:44px; color:var(--brand-green); font-weight:600; text-underline-offset:4px; }
.examples-cta { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-bottom:64px; padding:clamp(28px,5vw,56px); border-radius:8px; background:#e9eee2; }
.examples-cta h2 { margin:10px 0 0; font:500 clamp(2rem,4vw,3.6rem)/1.08 var(--font-serif); letter-spacing:-.035em; }
.examples-cta .primary-link { flex:none; }
@media(max-width:1080px) { .example-filter-row { align-items:flex-start; flex-wrap:wrap; } .example-filter-divider { display:none; } .examples-status { align-self:center; } .examples-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .examples-hero { padding-top:40px; } .examples-hero h1 { font-size:clamp(2.5rem,10vw,4rem); } .example-search input { min-height:52px; } .example-filter-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .example-filter-row select { min-width:0; width:100%; } .example-select-control { width:100%; min-width:0; } .examples-status { grid-column:1/-1; align-self:center; margin-left:0; } .examples-grid { grid-template-columns:1fr; } .examples-cta { align-items:flex-start; flex-direction:column; } }
@media(max-width:420px) { .example-filter-row { grid-template-columns:1fr; } .examples-status { margin-left:0; } .example-foot { align-items:flex-start; flex-direction:column; gap:4px; } .example-actions { width:100%; } }

.labs-jump a { color:var(--brand-green); font-size:14px; font-weight:600; text-underline-offset:4px; }
.examples-labs { padding:36px 0 56px; border-top:1px solid var(--brand-line); scroll-margin-top:28px; }
.labs-heading { margin-bottom:24px; }
.labs-heading h2 { margin:8px 0; font:500 38px/1.1 var(--font-serif); }
.labs-heading p { max-width:680px; color:var(--brand-muted); font-size:14px; line-height:1.7; }
.lab-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--brand-line); border-radius:8px; overflow:hidden; }
.lab-card .example-visual { border-bottom:0; border-right:1px solid var(--brand-line); }
.lab-card h3 { margin:12px 0; font:500 30px/1.15 var(--font-serif); }
.lab-card h3 a { text-decoration:none; }
.lab-card h3 a:hover { text-decoration:underline; text-underline-offset:4px; }
.lab-card .example-content { padding:clamp(20px,3vw,36px); }
@media(max-width:760px) { .lab-card { grid-template-columns:minmax(0,1fr); } .lab-card .example-visual { border-right:0; border-bottom:1px solid var(--brand-line); } }