.button-playground-page{container-type:inline-size}.button-playground-page .catalog-heading h1{font-size:clamp(42px,4.4vw,67px)}.button-playground-page .catalog-heading>p{max-width:510px;font-size:12px}.button-playground-workspace{grid-template-columns:minmax(220px,280px) minmax(0,1fr);align-items:start;gap:20px;margin-top:30px;display:grid}.button-playground-controls{border:1px solid var(--line);border-radius:7px;gap:22px;min-width:0;padding:21px;display:grid}.button-playground-panel-heading,.button-playground-preview-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.button-playground-panel-heading h2,.button-playground-preview-top h2{margin:0;font-size:12px;font-weight:550}.button-playground-reset{border:1px solid var(--line);min-height:32px;color:var(--muted);background:0 0;border-radius:4px;padding:5px 9px;font-size:10px}.button-playground-reset:hover{background:var(--surface);color:var(--ink)}.button-playground-field{min-width:0;color:var(--ink);gap:9px;font-size:11px;display:grid}.button-playground-field>span{justify-content:space-between;align-items:center;gap:10px;display:flex}.button-playground-field input[type=text],.button-playground-field select{border:1px solid var(--line);background:var(--paper);width:100%;min-width:0;min-height:43px;color:var(--ink);border-radius:4px;padding:11px 10px;font-size:12px}.button-playground-optional{color:var(--muted);font-variant-numeric:tabular-nums;font-size:9px}.button-playground-fieldset{border:0;min-width:0;margin:0;padding:0}.button-playground-fieldset legend{margin-bottom:10px;padding:0;font-size:11px}.button-playground-palettes,.button-playground-sizes{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.button-playground-palettes>button,.button-playground-sizes>button{border:1px solid var(--line);min-width:0;min-height:40px;color:var(--muted);background:0 0;border-radius:4px;justify-content:center;align-items:center;gap:5px;padding:7px 5px;font-size:10px;display:flex}.button-playground-palettes>button[aria-pressed=true],.button-playground-sizes>button[aria-pressed=true]{border-color:var(--ink);background:var(--surface);color:var(--ink)}.button-playground-palette-dot{width:20px;height:20px;font-family:var(--serif);border:1px solid #00000014;border-radius:50%;flex-shrink:0;place-items:center;font-size:16px;line-height:1;display:grid}.button-playground-colors{gap:9px;margin-top:16px;display:grid}.button-playground-colors>label{min-width:0;color:var(--muted);justify-content:space-between;align-items:center;gap:10px;font-size:10px;display:flex}.button-playground-color-input{color:var(--ink);font-variant-numeric:tabular-nums;align-items:center;gap:8px;font-size:10px;display:flex}.button-playground-color-input input{border:1px solid var(--line);background:var(--paper);cursor:pointer;border-radius:4px;width:30px;height:30px;padding:2px}.button-playground-field-note{color:var(--muted);margin:11px 0 0;font-size:9px;line-height:1.7}.button-playground-sizes>button{text-transform:capitalize}.button-playground-radius output{color:var(--muted);font-variant-numeric:tabular-nums;font-size:10px}.button-playground-radius input{width:100%;min-height:30px;accent-color:var(--ink);margin:0}.button-playground-checkbox{align-items:center;gap:9px;min-height:30px;font-size:11px;display:flex}.button-playground-checkbox input{width:16px;height:16px;accent-color:var(--ink);margin:0}.button-playground-preview-panel{min-width:0;position:sticky;top:95px}.button-playground-preview-top{min-height:54px;padding-inline:3px}.button-playground-preview-top>span{color:var(--muted);letter-spacing:.8px;align-items:center;gap:6px;font-size:7px;display:flex}.button-playground-preview{border:1px solid var(--line);background-color:var(--surface);background-image:radial-gradient(var(--line) .8px, transparent .8px);background-size:17px 17px;border-radius:7px 7px 0 0;flex-direction:column;justify-content:center;align-items:center;gap:34px;min-height:370px;padding:65px 30px 50px;display:flex;position:relative}.button-playground-preview-index{color:var(--muted);letter-spacing:.9px;font-variant-numeric:tabular-nums;font-size:8px;position:absolute;top:23px;left:23px}.button-playground-button{place-items:center;width:100%;min-width:0;display:grid}.button-playground-button>button{min-width:0}.button-playground-button .ac-magnetic-button__surface{overflow-wrap:anywhere;min-width:0}.button-playground-button .ac-rolling-text__word{overflow-wrap:anywhere}.button-playground-activation{max-width:260px;min-height:2.8em;color:var(--muted);text-align:center;margin:0;font-size:10px;line-height:1.6}.button-playground-preview-bottom{border:1px solid var(--line);border-top:0;border-radius:0 0 7px 7px;justify-content:space-between;align-items:center;gap:15px;padding:21px 23px;display:flex}.button-playground-preview-bottom h3{margin:0 0 7px;font-size:12px;font-weight:550}.button-playground-preview-bottom p{color:var(--muted);margin:0;font-size:10px;line-height:1.7}.button-playground-preview-bottom>a{border:1px solid var(--line);border-radius:50%;flex-shrink:0;place-items:center;width:36px;height:36px;display:grid}.button-playground-preview-bottom>a:hover{border-color:var(--ink)}.button-playground-access-note{color:var(--muted);margin:17px 3px 0;font-size:9px;line-height:1.8}.button-playground-source{border-top:1px solid var(--line);min-width:0;margin-top:44px;padding-top:29px}.button-playground-source-intro{justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px;display:flex}.button-playground-source-intro h2{font-family:var(--serif);letter-spacing:-.5px;margin:10px 0;font-size:32px;font-weight:400}.button-playground-source-intro p{color:var(--muted);margin:0;font-size:11px;line-height:1.8}.button-playground-source-intro p a{text-underline-offset:3px;text-decoration:underline}.button-playground-install{min-height:40px;color:var(--muted);white-space:nowrap;align-items:center;gap:12px;font-size:10px;display:inline-flex}.button-playground-install:hover{color:var(--ink)}.button-playground-source pre{overscroll-behavior:contain;max-width:100%;max-height:440px;color:var(--code-ink);tab-size:2;scrollbar-width:thin;scrollbar-color:#5b6550 transparent;margin:0;padding:20px;font:11px/1.9 SFMono-Regular,Consolas,Liberation Mono,monospace;overflow:auto}.button-playground-source code{font:inherit}@container (max-width:650px){.button-playground-workspace{grid-template-columns:minmax(0,1fr)}.button-playground-preview-panel{position:static}.button-playground-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.button-playground-panel-heading,.button-playground-controls>.button-playground-fieldset:first-of-type{grid-column:1/-1}.button-playground-preview{min-height:300px}}@container (max-width:380px){.button-playground-controls{grid-template-columns:minmax(0,1fr);gap:19px;padding:18px}.button-playground-preview{padding-inline:20px}.button-playground-source-intro{display:block}.button-playground-install{margin-top:8px}.button-playground-source-intro h2{font-size:29px}}