:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--font-body:"Avenir Next", "Segoe UI", sans-serif;--font-code:"SFMono-Regular", "Cascadia Code", "Liberation Mono", monospace;--paper:#f5f6f1;--ink:#17211d;--muted:#627069;--panel:#fffffa;--panel-2:#ecefe7;--line:#17211d24;--green:#175c52;--red:#b53a2d;--blue:#2f6fbb;--amber:#b66b11;--shadow:0 18px 50px #17211d14}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:linear-gradient(90deg, #17211d0a 1px, transparent 1px), linear-gradient(180deg, #17211d09 1px, transparent 1px), radial-gradient(circle at 15% 10%, #2f6fbb29, transparent 28rem), radial-gradient(circle at 82% 18%, #b53a2d1f, transparent 22rem), var(--paper);min-height:100vh;color:var(--ink);font-family:var(--font-body);background-size:32px 32px,32px 32px,auto,auto,auto;margin:0}a{color:inherit}button,input,textarea,select{font:inherit}.shell{width:min(1420px,100% - 48px);margin:0 auto;padding:28px 0 72px}.topbar{z-index:10;border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);background:#fffffae6;border-radius:8px;justify-content:space-between;align-items:center;gap:20px;padding:10px;display:flex;position:sticky;top:12px}.brand,.topbar a{text-decoration:none}.brand{letter-spacing:0;padding:8px 10px;font-weight:800}.topbar nav{flex-wrap:wrap;gap:6px;display:flex}.topbar nav a{color:var(--muted);border-radius:6px;padding:8px 10px;font-size:.92rem;font-weight:700}.topbar nav a.active{background:var(--ink);color:#fff}.masthead{grid-template-columns:minmax(0,1.1fr) minmax(280px,.7fr);align-items:end;gap:32px;min-height:260px;padding:64px 0 34px;display:grid}.library-heading{min-height:220px}.eyebrow{color:var(--green);font-family:var(--font-code);letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px;font-size:.82rem;font-weight:800}h1{letter-spacing:0;max-width:820px;margin:0;font-size:clamp(3rem,8vw,7.5rem);line-height:.88}.masthead p:not(.eyebrow){max-width:560px;color:var(--muted);margin:0;font-size:1.12rem;line-height:1.6}.library-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.library-tile{border:1px solid var(--line);background:var(--panel);min-height:210px;box-shadow:var(--shadow);border-radius:8px;flex-direction:column;justify-content:space-between;padding:18px;text-decoration:none;transition:transform .16s,border-color .16s;display:flex}.library-tile:hover{border-color:#175c5280;transform:translateY(-2px)}.library-tile span{font-size:clamp(1.7rem,4vw,3rem);font-weight:850;line-height:.95}.library-tile small{color:var(--muted);font-family:var(--font-code)}.library-tile.html{border-top:6px solid var(--green)}.library-tile.shadcn{border-top:6px solid var(--ink)}.library-tile.mantine{border-top:6px solid var(--blue)}.library-tile.material-ui{border-top:6px solid var(--red)}.examples{gap:22px;display:grid}.setup-row,.example-row{grid-template-columns:minmax(360px,.92fr) minmax(420px,1.08fr);align-items:start;gap:18px;display:grid}.code-pane,.output-pane{border:1px solid var(--line);min-width:0;box-shadow:var(--shadow);background:#fffffaeb;border-radius:8px;overflow:hidden}.code-pane{position:sticky;top:88px}.pane-header{border-bottom:1px solid var(--line);background:var(--panel-2);justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:10px 12px;display:flex}.pane-header span{font-size:.92rem;font-weight:850}.pane-header small{color:var(--muted);font-family:var(--font-code);white-space:nowrap;font-size:.72rem}.code-pane p{color:var(--muted);margin:0;padding:14px 16px 0;line-height:1.55}.code-block,.code-block pre{color:#e9eee8;font-family:var(--font-code);background:#17211d;margin:0;padding:16px;font-size:.82rem;line-height:1.65;overflow-x:auto}.code-block pre{padding:0;background:0 0!important}.code-block code{font-family:inherit}.shiki-code{background:#17211d}.output-pane{background:linear-gradient(135deg, #175c5214, transparent 42%), var(--panel)}.intro-output,.preview-surface{padding:18px}.intro-output{min-height:100%}.intro-output p{color:var(--muted);margin:0;line-height:1.65}.intro-output .output-kicker{color:var(--ink);margin-bottom:12px;font-size:1.4rem;font-weight:850;line-height:1.1}.preview-surface{min-height:360px}.preview-surface form{gap:14px;display:grid}.preview-surface form>div[style]{border-radius:8px}.preview-surface fieldset{min-width:0}.preview-html label,.preview-html form>div,.preview-html fieldset{gap:7px;display:grid}.preview-html input,.preview-html textarea,.preview-html select{border:1px solid var(--line);background:#fff;border-radius:7px;width:100%;min-height:42px;padding:10px 12px}.preview-html textarea{resize:vertical;min-height:104px}.preview-html input[type=checkbox]{width:18px;min-height:18px;accent-color:var(--green)}.preview-html button{background:var(--green);color:#fff;cursor:pointer;border:0;border-radius:7px;width:fit-content;padding:11px 16px;font-weight:800}.preview-html p,.preview-html span{color:var(--muted)}.preview-html [role=alert]{color:var(--red)}.preview-shadcn select{background:#fff;border:1px solid #d2d8d0;border-radius:7px;width:100%;min-height:42px;padding:10px 12px}.shadcn-field{gap:7px;display:grid}.shadcn-label{color:#171717;font-size:.92rem;font-weight:750}.shadcn-control{background:#fff;border:1px solid #d2d8d0;border-radius:7px;width:100%;min-height:42px;padding:10px 12px}textarea.shadcn-control{resize:vertical;min-height:104px}.shadcn-checkbox{accent-color:#171717;width:18px;height:18px}.shadcn-button{color:#fff;cursor:pointer;background:#171717;border:0;border-radius:7px;width:fit-content;padding:11px 16px;font-weight:800}.shadcn-description{color:var(--muted);margin:0;font-size:.88rem}.shadcn-error{color:var(--red);margin:0;font-size:.88rem}.shadcn-alert{background:#fff;border:1px solid #d2d8d0;border-radius:7px;padding:10px 12px}.shadcn-skeleton{background:linear-gradient(90deg,#ecefe7,#d8ded4,#ecefe7);border-radius:999px;height:12px}.shadcn-fieldset{border:1px solid var(--line);border-radius:8px;padding:14px}.preview-mantine form,.preview-material-ui form{gap:16px}.preview-material-ui .MuiTextField-root,.preview-material-ui .MuiFormControl-root,.preview-material-ui .MuiInputBase-root{width:100%}@media (max-width:980px){.shell{width:min(100% - 28px,760px)}.masthead,.setup-row,.example-row{grid-template-columns:1fr}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.code-pane{position:static}}@media (max-width:620px){.shell{width:min(100% - 20px,760px);padding-top:14px}.topbar{flex-direction:column;align-items:stretch}.topbar nav{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.topbar nav a{text-align:center}.masthead{min-height:0;padding:42px 0 24px}h1{font-size:clamp(2.6rem,18vw,4.2rem)}.library-grid{grid-template-columns:1fr}.library-tile{min-height:150px}.pane-header{flex-direction:column;align-items:flex-start}}