@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/_next/static/media/ibm-plex-mono-latin-400-normal.06ac09dc.woff2) format("woff2"),url(/_next/static/media/ibm-plex-mono-latin-400-normal.e32cf7a4.woff) format("woff")}@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;src:url(/_next/static/media/instrument-serif-latin-400-italic.7cb8e1b9.woff2) format("woff2"),url(/_next/static/media/instrument-serif-latin-400-italic.4acb39b8.woff) format("woff")}@font-face{font-family:Inter Tight Variable;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-tight-latin-wght-normal.woff2) format("woff2")}.demo-banner{background:#232720;color:#f5f5e9;min-height:38px;justify-content:space-between;padding:4px 25px;gap:18px;font:10px IBM Plex Mono,monospace}.demo-banner,.demo-banner a{display:flex;align-items:center}.demo-banner a{gap:7px;min-height:30px}.demo-wrap{max-width:1500px;margin:auto;padding-inline:clamp(22px,5vw,80px)}.demo-section-title{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:25px;border-top:1px solid;margin-bottom:30px}.demo-section-title h2{font-weight:450;font-size:33px;letter-spacing:-1px}.demo-section-title .mono{font-size:9px}.demo-projects{display:grid;grid-template-columns:1fr 1.6fr;gap:45px}.demo-project-list button{display:flex;align-items:center;gap:18px;width:100%;border-bottom:1px solid #b9bda9;padding:22px 0;text-align:left;min-height:70px}.demo-project-list button>span:nth-child(2){margin-right:auto;font-size:20px;letter-spacing:-.5px}.demo-project-list button .mono{font-size:9px}.demo-project-list button[aria-pressed=true]{font-weight:650;border-bottom-color:currentColor}.demo-project-list button:not([aria-pressed=true]){opacity:.8}[data-brand=brand] .demo-project-list button:not([aria-pressed=true]){opacity:1}.demo-project-detail>img{width:100%;aspect-ratio:1.4;object-fit:cover}.demo-project-detail>div{padding-top:20px}.demo-project-detail>div>p:last-child{max-width:580px;font-size:15px;line-height:1.7;margin-top:12px}.demo-disclaimer{font-size:11px;line-height:1.7;margin-top:60px;max-width:620px}@media (max-width:700px){.demo-banner{padding-inline:15px;font-size:8px;gap:10px;flex-wrap:wrap}.demo-banner>span{display:none}.demo-wrap{padding-inline:22px}.demo-section-title h2{font-size:26px}.demo-section-title .mono{font-size:8px;max-width:120px}.demo-projects{grid-template-columns:1fr;gap:25px}.demo-project-list button{min-height:60px;padding-block:17px}.demo-project-list button>span:nth-child(2){font-size:19px}.demo-disclaimer{margin-top:40px;font-size:10px}}.demo-banner a{min-height:44px}.demo-book .demo-control-select,.demo-book .demo-project-list{display:block}@media (max-width:360px){.demo-banner{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;padding-block:8px}.demo-banner a:nth-of-type(2n){justify-content:flex-end}}.demo-note{margin:0;padding:12px 16px 80px;font:12px/1.4 system-ui,sans-serif;text-align:center;opacity:.7}.demo-pill{position:fixed;z-index:80;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));transform:translateY(calc(-1 * var(--demo-pill-lift, 0px)));padding:3px;background:#fff;color:#111;border:1px solid rgb(0 0 0/.16);border-radius:999px;box-shadow:0 6px 20px rgb(0 0 0/.18);font:500 13px/1 system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:0;text-transform:none}.demo-pill,.demo-pill-items{display:flex;align-items:center;gap:2px}.demo-pill-items[hidden]{display:none}.demo-pill a,.demo-pill button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:inherit;font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer}.demo-pill .demo-pill-toggle{padding:0}.demo-pill [aria-expanded=true]:not(.demo-pill-toggle),.demo-pill a:hover,.demo-pill button:hover{background:#ececec}.demo-pill a:focus-visible,.demo-pill button:focus-visible{outline:2px solid #111;outline-offset:-2px}.demo-pill-panel{position:fixed;z-index:79;left:max(12px,env(safe-area-inset-left));right:12px;bottom:calc(max(12px, env(safe-area-inset-bottom)) + var(--demo-pill-lift, 0px) + 60px);max-width:680px;max-height:calc(100dvh - 96px);overflow:auto;overscroll-behavior:contain;box-shadow:0 12px 40px rgb(0 0 0/.25)}.demo-pill-panel[data-side=right],.demo-pill[data-side=right]{left:auto;right:max(12px,env(safe-area-inset-right))}.demo-pill-panel[data-side=right]{left:12px;margin-left:auto}@media (max-width:360px){.demo-pill a,.demo-pill button{padding-inline:10px}}