.device-example{min-width:0;margin:0}.device-example-link{display:block;text-decoration:none;border-radius:12px}.device-example-link:focus-visible{outline:3px solid hsl(var(--ring));outline-offset:6px}.example-browser{overflow:hidden;border:1px solid #c4ccd4;border-radius:10px;background:#fff;box-shadow:0 12px 28px #15324716}.example-browser-toolbar{display:flex;align-items:center;gap:12px;min-height:36px;padding:7px 12px;background:#e5e9ed;border-bottom:1px solid #c4ccd4;color:#465360;font:10px/1.2 Arial,sans-serif}.example-browser-tab{white-space:nowrap}.example-browser-address{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;border:1px solid #d0d6dc;border-radius:5px;padding:4px;background:#f8fafb}.example-window-controls{display:flex;gap:9px;align-items:center}.device-example-image{display:block;width:100%;height:auto}.device-example-mobile{width:100%;max-width:242px;justify-self:center}.example-phone{position:relative;padding:7px;overflow:hidden;border:1px solid #4a525c;border-radius:32px;background:#13191f;box-shadow:inset 0 0 0 2px #333c46,0 14px 26px #15324720}.example-phone .device-example-image{border-radius:0 0 19px 19px}.example-phone-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:27px;padding:0 10px;border-radius:24px 24px 0 0;background:#f8fafb;color:#13191f;font:600 10px/1 Arial,sans-serif}.example-phone-camera{position:absolute;left:50%;top:5px;width:48px;height:13px;border-radius:20px;transform:translate(-50%);background:#13191f}.example-phone-signals{display:flex;align-items:center;gap:2px}.example-phone-bottom{display:flex;align-items:center;justify-content:center;height:18px}.example-phone-bottom span{width:39%;height:3px;border-radius:4px;background:#e8edf0}@media (max-width: 639px){.device-example-mobile{max-width:210px}.example-browser-toolbar{gap:7px;padding:6px 8px;min-height:30px;font-size:8px}.example-browser-tab{display:none}.example-window-controls{gap:7px}}.fp-directory{--fp-bg: #f7f7f2;--fp-surface: #fdfdfa;--fp-text: #172b2b;--fp-muted: #54645f;--fp-line: #d8dfd7;--fp-accent: #176750;--fp-soft: #e6eee6;--fp-code: #eef1eb;background:var(--fp-bg);color:var(--fp-text);font-family:IBM Plex Sans,sans-serif;padding:24px;border-radius:8px;margin-top:24px}.fp-directory *{box-sizing:border-box}.fp-directory :is(a,button,input,textarea):focus-visible{outline:2px solid var(--fp-accent);outline-offset:4px}.fp-primary{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:13px 18px;min-height:48px;border-radius:6px;background:var(--fp-accent);color:#fafcf6;font-size:14px;font-weight:500}.fp-library{display:grid;grid-template-columns:210px minmax(0,1fr);gap:32px;scroll-margin-top:110px}.fp-sidebar{position:sticky;top:100px;align-self:start;max-height:calc(100dvh - 120px);overflow-y:auto;scrollbar-width:thin;padding:4px;margin:-4px}.fp-category-nav{display:grid;gap:4px}.fp-category-nav button{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;width:100%;min-height:44px;padding:10px 12px;border-radius:5px;font-size:13px}.fp-category-nav button span:last-child{font-size:11px;font-variant-numeric:tabular-nums;color:var(--fp-muted)}.fp-category-nav button:hover{background:var(--fp-code)}.fp-category-nav button[aria-pressed=true]{background:var(--fp-soft);color:var(--fp-accent);font-weight:600}.fp-index{border-top:1px solid var(--fp-line);padding-top:24px;margin-top:24px}.fp-index a{display:flex;gap:10px;align-items:baseline;min-height:36px;padding:8px 4px;color:var(--fp-muted);font-size:12px;line-height:1.4}.fp-index a span{font-family:monospace;font-size:10px;color:var(--fp-accent)}.fp-index a:hover{color:var(--fp-accent);text-decoration:underline}.fp-results{min-width:0}.fp-results-header h2{font-family:TT Supermolot Neue,sans-serif;text-transform:uppercase;font-size:25px;font-weight:600;line-height:1.2}.fp-search{display:flex;align-items:center;gap:12px;background:var(--fp-surface);border:1px solid var(--fp-line);border-radius:7px;padding:0 14px;margin-top:23px;color:var(--fp-muted)}.fp-search input{color:var(--fp-text);min-width:0;width:100%;background:transparent;padding:15px 0;font-size:14px;border:0;border-radius:0}.fp-search input::-moz-placeholder{color:var(--fp-muted);opacity:1}.fp-search input::placeholder{color:var(--fp-muted);opacity:1}.fp-search input::-webkit-search-cancel-button{display:none}.fp-search button{display:grid;place-items:center;min-height:44px;min-width:36px}.fp-result-count{font-size:12px;color:var(--fp-muted);margin-top:12px}.fp-group{margin-top:36px}.fp-group-heading{margin-bottom:18px}.fp-group-heading h2{font-family:TT Supermolot Neue,sans-serif;text-transform:uppercase;font-size:21px;line-height:1.3;font-weight:600}.fp-cards{display:grid;gap:14px}.fp-card{background:var(--fp-surface);border:1px solid var(--fp-line);border-radius:8px;scroll-margin-top:110px;overflow:hidden}.fp-card:target{border-color:var(--fp-accent)}.fp-card-top{display:flex;align-items:start;gap:15px;padding:24px 22px 13px}.fp-number{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border:1px solid var(--fp-line);border-radius:5px;color:var(--fp-accent);font:12px monospace}.fp-card-heading{flex:1;min-width:0}.fp-card h3{font-family:IBM Plex Sans,sans-serif;text-transform:none;font-size:17px;font-weight:600;line-height:1.5}.fp-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}.fp-card-heading p{font-size:13px;line-height:1.65;color:var(--fp-muted);margin-top:5px}.fp-copy{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--fp-line);border-radius:5px;padding:8px 10px;min-height:40px;font-size:12px;color:var(--fp-text)}.fp-copy:hover{background:var(--fp-soft);border-color:var(--fp-accent)}.fp-example{margin:8px 22px}.fp-example>a{display:block;color:var(--fp-accent)}.fp-example img{display:block;width:100%;height:auto;border:1px solid var(--fp-line);border-radius:6px;background:#f1f4f3}.fp-example>a>span{display:inline-flex;min-height:44px;align-items:center;gap:6px;font-size:12px;text-decoration:underline;text-underline-offset:3px}.fp-example figcaption{margin-top:0;color:var(--fp-muted);font-size:13px;line-height:1.6}.fp-card-bottom{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;padding:0 22px 10px 67px}.fp-disclosure{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:12px;color:var(--fp-accent)}.fp-rotated{transform:rotate(180deg)}.fp-prompt-body{border-top:1px solid var(--fp-line);background:var(--fp-code);padding:16px 22px 20px}.fp-prompt-body textarea{display:block;width:100%;min-height:200px;max-height:650px;resize:vertical;padding:4px;border:none;background:transparent;color:var(--fp-text);font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:12px;line-height:1.8}.fp-feedback{border-top:1px solid var(--fp-line);margin:0;padding:12px 22px;font-size:12px;line-height:1.6;color:var(--fp-accent)}.fp-empty{padding:42px 20px;text-align:center;border:1px dashed var(--fp-line);border-radius:8px;margin-top:24px}.fp-empty h3{font-size:20px;font-weight:600}.fp-empty p{margin:10px 0 20px;color:var(--fp-muted)}@media (prefers-reduced-motion: no-preference){.fp-copy,.fp-category-nav button{transition:background-color .15s ease}}@media (prefers-color-scheme: dark){.fp-directory{--fp-bg: #142422;--fp-surface: #1b2d2a;--fp-text: #edf1e9;--fp-muted: #b4c2b9;--fp-line: #3b4e46;--fp-accent: #9ad6b8;--fp-soft: #2b4338;--fp-code: #20352f}.fp-directory .fp-primary{background:#9ad6b8;color:#142422}}@media (max-width: 1023px){.fp-library{grid-template-columns:190px minmax(0,1fr);gap:30px}.fp-card-top{flex-wrap:wrap}.fp-card-heading{flex-basis:calc(100% - 45px)}.fp-copy{margin-left:45px}}@media (max-width: 767px){.fp-directory{padding:16px;margin-inline:-16px}.fp-library{grid-template-columns:1fr;gap:26px;padding-top:28px}.fp-sidebar{position:static;max-height:none;overflow:visible}.fp-category-nav{display:flex;flex-wrap:wrap;gap:6px}.fp-category-nav button{width:auto;border:1px solid var(--fp-line);font-size:12px;min-height:44px;gap:8px;padding:8px 10px}.fp-index,.fp-sidebar-note{display:none}.fp-results-header h2{font-size:24px}.fp-card-top{padding:18px 16px 10px;gap:12px}.fp-card-heading{flex-basis:calc(100% - 42px)}.fp-card h3{font-size:16px}.fp-example{margin-inline:16px}.fp-copy{margin-left:42px;min-height:44px}.fp-card-bottom{padding-inline:58px 16px}.fp-prompt-body{padding:14px 16px}.fp-prompt-body textarea{font-size:13px}.fp-disclosure{min-height:44px}}