.list-example{--example-green:var(--claimed-text);--example-green-soft:var(--claimed-surface);min-width:0;color:var(--text-primary);scroll-margin-top:95px}.example-toolbar{justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px;display:flex}.example-toolbar>p{align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.example-toolbar>span{color:var(--text-secondary);font-size:12px}.example-tabs{isolation:isolate;min-width:340px;display:grid;position:relative}.example-tab-indicator{background:var(--primary-50);pointer-events:none;z-index:-1;transition:transform .18s var(--ease-out);border-radius:6px;position:absolute;inset:0 auto 0 0}.example-tabs button{min-height:44px;color:var(--text-secondary);border-radius:6px;padding:10px 16px;font-size:12px;font-weight:600;transition:color .16s,background .16s}.example-tabs button[aria-selected=true]{color:var(--primary-700)}.example-tabs button:hover{color:var(--primary-600)}.example-scene{background:var(--example-scene-color);isolation:isolate;border-radius:12px;grid-template-columns:1fr minmax(420px,44%);align-items:center;padding:30px;display:grid;position:relative}.example-photo{border-radius:12px 0 0 12px;width:64%;position:absolute;inset:0 auto 0 0;overflow:hidden}.example-photo img{-o-object-position:46% center;object-position:46% center}.example-sheet{border:1px solid rgb(var(--shadow-rgb) / 7%);background:var(--surface-base);box-shadow:0 8px 24px rgb(var(--shadow-rgb) / 8%);border-radius:8px;grid-column:2;position:relative}.example-heading{padding:22px 24px 17px}.example-category{color:var(--text-secondary);justify-content:space-between;gap:12px;font-size:10px;font-weight:500;display:flex}.example-category>span:last-child{text-transform:uppercase;letter-spacing:.1em}.example-heading h2{font-family:var(--font-bricolage), sans-serif;letter-spacing:-.02em;margin:14px 0 8px;font-size:29px;font-weight:600;line-height:1.18}.example-heading>p{color:var(--text-secondary);font-size:12px;line-height:1.7}.example-people{align-items:center;gap:9px;margin-top:14px;display:flex}.example-people>p{color:var(--text-secondary);font-size:10px}.example-avatars{padding-left:3px;display:flex}.example-avatars span{border:2px solid var(--surface-base);background:var(--primary-100);width:27px;height:27px;color:var(--primary-700);border-radius:50%;place-items:center;margin-left:-3px;font-size:9px;font-weight:700;display:grid}.example-avatars span:nth-child(2){color:#734f33;background:#ecd0b5}.example-avatars span:nth-child(3){color:#496843;background:#d3dfd0}.example-items{border-top:1px solid var(--border-base)}.example-item{border-bottom:1px solid var(--border-base);align-items:center;gap:11px;min-height:70px;padding:12px 22px;transition:background .18s;display:flex}.example-item:last-child{border-bottom:0}.example-item[data-claimed=true]{background:var(--example-green-soft)}.example-item-mark{width:20px;height:20px;color:var(--example-green);flex-shrink:0;place-items:center;display:grid;position:relative}.example-item-mark>span{border:1px solid var(--gray-300);border-radius:50%;width:16px;height:16px;transition:opacity .14s;position:absolute}.example-item-mark svg{opacity:0;transition:opacity .14s ease, transform .18s var(--ease-out);transform:scale(.95)}.example-item-copy{flex:1;min-width:0}.example-item-copy h3{font-size:12px;font-weight:600;line-height:1.5}.example-item-copy p{color:var(--text-secondary);margin-top:2px;font-size:10px;line-height:1.6}.example-claim,.example-claimed-by{border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;min-width:58px;min-height:44px;padding:6px 8px;font-size:11px;font-weight:600;display:inline-flex}.example-claim{border:1px solid var(--border-base);color:var(--primary-700);background:var(--surface-base);transition:color .16s,background .16s,border-color .16s}.example-claim:hover{background:var(--primary-50);border-color:var(--primary-300)}.example-claim[aria-pressed=true]{color:var(--example-green);background:0 0;border-color:#0000}.example-claim[aria-pressed=true]:hover{border-color:var(--example-green)}.example-claimed-by{color:var(--example-green)}.example-summary{border-top:1px solid var(--border-base);color:var(--text-secondary);justify-content:space-between;align-items:center;gap:20px;padding:17px 24px;font-size:10px;display:flex}.example-progress{background:var(--border-base);border-radius:4px;width:98px;height:4px;overflow:hidden}.example-progress>span{background:var(--example-green);border-radius:inherit;transform-origin:0;width:100%;height:100%;transition:transform .22s var(--ease-out);display:block}.example-footnote{color:var(--text-secondary);justify-content:space-between;gap:20px;margin-top:15px;font-size:11px;line-height:1.7;display:flex}.example-footnote>span{color:var(--text-primary);font-weight:600}.example-footnote>p{text-align:right}.dark .list-example{--example-green:var(--claimed-text);--example-green-soft:var(--claimed-surface)}.dark .example-tabs button[aria-selected=true]{color:var(--primary-100)}.dark .example-tabs button:hover{color:var(--primary-200)}.dark .example-scene{background:color-mix(in srgb, var(--example-scene-color) 16%, var(--background-base))}.dark .example-sheet{border-color:var(--border-base);box-shadow:0 12px 32px rgb(var(--shadow-rgb) / 22%)}.dark .example-claim{color:var(--primary-200)}.dark .example-claim:hover{background:var(--primary-900)}@media (max-width:1000px){.example-scene{grid-template-columns:1fr minmax(370px,53%);padding:24px}.example-photo{width:60%}.example-heading{padding-inline:20px}.example-item{gap:9px;padding-inline:17px}}@media (max-width:700px){.example-toolbar{flex-direction:column;align-items:flex-start;gap:9px}.example-toolbar>p{font-size:12px}.example-toolbar>span{display:none}.example-tabs{justify-content:space-between;gap:0;width:100%;min-width:0}.example-tabs button{padding-inline:12px;font-size:11px}.example-scene{flex-direction:column;padding:0 14px 14px;display:flex}.example-photo{border-radius:10px 10px 0 0;width:calc(100% + 28px);height:230px;position:relative}.example-photo img{-o-object-position:center 45%;object-position:center 45%}.example-sheet{width:100%;margin-top:-24px}.example-heading{padding:20px 18px 15px}.example-heading h2{font-size:26px}.example-item{gap:8px;padding:11px 13px}.example-item-copy h3{font-size:11px}.example-item-copy p{font-size:10px}.example-item-mark{width:16px;position:relative}.example-claim,.example-claimed-by{min-width:52px;padding-inline:6px;font-size:10px}.example-summary{gap:12px;padding:15px 18px}.example-progress{width:65px}.example-footnote{display:block}.example-footnote>span{display:none}.example-footnote>p{text-align:center}}.example-heading h2{padding-block:.08em}.example-item[data-claimed=true] .example-item-mark>span{opacity:0}.example-item[data-claimed=true] .example-item-mark svg{opacity:1;transform:scale(1)}.example-summary{font-variant-numeric:tabular-nums}.dark .example-tab-indicator{background:var(--primary-900)}@media (hover:none),(pointer:coarse){.example-tabs button:hover{background:0 0}}
html[data-darkreader-scheme=dark]:not(.dark) .example-sheet{--text-secondary:var(--gray-700);background:var(--gray-300);border-color:var(--gray-900)}html[data-darkreader-scheme=dark]:not(.dark) .example-claim:not([aria-pressed=true]),html[data-darkreader-scheme=dark]:not(.dark) .example-item-mark>span{border-color:currentColor}html[data-darkreader-scheme=dark]:not(.dark) .example-claim:not([aria-pressed=true]){background:var(--gray-100);color:var(--gray-900)}html[data-darkreader-scheme=dark]:not(.dark) .example-claim:not([aria-pressed=true]):hover{background:var(--gray-200)}html[data-darkreader-scheme=dark]:not(.dark) .example-progress>span{color:var(--example-green);background:currentColor}
