.example-page{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--surface:#f2f0ea;--surface-raised:#e8e5dd;--surface-strong:#dcd8cd;--text:#262722;--text-muted:#67695f;--line:#c8c4b9;--accent:#a85f22;--accent-contrast:#faf8f2;--terminal:#161915;--terminal-line:#343a31;background:var(--surface);min-height:100dvh;color:var(--text)}.example-page .site-header{background:color-mix(in srgb, var(--surface) 82%, transparent)}.nav-current{color:var(--text);font-weight:700}.example-main{width:var(--container);margin-inline:auto;padding:72px 0 120px;position:relative}.example-grid{z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,#7c54281a 1px,#0000 1px),linear-gradient(#7c54281a 1px,#0000 1px);background-size:32px 32px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000 0% 68%,#0000 100%);mask-image:linear-gradient(#000 0% 68%,#0000 100%)}.example-copy{max-width:54ch}.example-copy h1{max-width:16ch;font-size:clamp(38px,4vw,58px)}.example-lede{max-width:50ch;color:var(--text-muted);margin:24px 0 0;font-size:17px;line-height:1.6}.example-facts{border:1px solid var(--line);border-radius:var(--radius);background:var(--line);gap:1px;margin:40px 0;display:grid;overflow:hidden}.example-facts>div{background:color-mix(in srgb, var(--surface-raised) 88%, transparent);padding:20px 22px}.example-facts dt{color:var(--accent);font:700 11px / 1 var(--mono);letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px}.example-facts dd{color:var(--text-muted);margin:0;font-size:14px;line-height:1.6}.example-facts code,.example-copy p code{background:var(--surface-strong);color:var(--text);font-family:var(--mono);border-radius:5px;padding:1px 5px;font-size:.92em}.example-copy pre{margin-bottom:24px}.glass-window{z-index:5;border-radius:var(--radius);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);width:calc(min(1380px,100vw - 64px)/1.62963 - clamp(48px,6vw,104px)/1.62963);transform:translate3d(var(--drag-x,0px), var(--drag-y,0px), 0);will-change:transform;background:#faf8f20f;border:1px solid #26272238;position:fixed;top:132px;right:max(32px,50vw - 640px);box-shadow:0 24px 70px #34281a2e,0 2px 8px #34281a1a}.glass-window.is-dragging{box-shadow:0 34px 90px #34281a42,0 2px 8px #34281a1f}.glass-titlebar{border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;height:34px;color:var(--text);font:11px / 1 var(--mono);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;background:#faf8f270;border-bottom:1px solid #26272224;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;display:flex}.glass-window.is-dragging .glass-titlebar{cursor:grabbing}.glass-title{white-space:nowrap;font-weight:700}.glass-status{min-width:0;color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.example-page #terminal.glass-terminal{background:0 0;height:clamp(340px,52vh,540px);padding:8px}.example-page .terminal-error{border-radius:0 0 var(--radius) var(--radius);background:color-mix(in srgb, var(--surface) 94%, transparent);color:#9c3a24;padding:20px;font-size:13px;inset:34px 0 0}@media (max-width:1100px){.glass-window{width:100%;margin-top:48px;position:static;transform:none}.glass-titlebar{cursor:default}.example-copy{max-width:none}}@media (max-width:600px){.example-main{padding:48px 0 72px}.example-page #terminal.glass-terminal{height:390px}}