:root{color-scheme:dark;--font-sans:Inter, ui-sans-serif, system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--page:#0c0c0d;--surface:#111112;--surface-raised:#151516;--line:#29292b;--line-soft:#202022;--text:#f4f4f5;--muted:#8d8d92;--quiet:#626267;--accent:#9f8cff;--accent-soft:#282338;--danger:#f87171;font-family:var(--font-sans);background:var(--page);color:var(--text)}:root[data-theme=light]{color-scheme:light;--page:#f7f7f6;--surface:#fff;--surface-raised:#fafafa;--line:#dedede;--line-soft:#e9e9e8;--text:#171718;--muted:#737377;--quiet:#9b9b9f;--accent:#6651d7;--accent-soft:#ece8ff;--danger:#dc2626}*{box-sizing:border-box}html{background:var(--page);overflow-x:clip}body{background:var(--page);min-width:320px;margin:0;overflow-x:clip}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}.app{width:min(760px,100% - 32px);margin:0 auto;padding:28px 0 56px}.top-links{justify-content:flex-end;gap:8px;display:flex}.icon-button,.copy-button,.preview-toggle{border:1px solid var(--line);background:var(--surface);width:34px;height:34px;color:var(--muted);cursor:pointer;border-radius:10px;place-items:center;display:inline-grid}.icon-button:hover,.copy-button:hover,.preview-toggle:hover{color:var(--text);background:var(--surface-raised)}.icon-button svg,.copy-button svg,.preview-toggle svg{width:16px;height:16px}.hero{text-align:center;justify-items:center;padding:52px 0 34px;display:grid}.mark{border:1px solid var(--line);background:var(--surface);width:58px;height:58px;color:var(--accent);border-radius:18px;place-items:center;margin-bottom:18px;display:grid}.mark svg{width:30px;height:30px}h1{letter-spacing:-.055em;margin:0;font-size:clamp(2.2rem,8vw,3.25rem);font-weight:590}.subtitle{color:var(--muted);margin:9px 0 0;font-size:.92rem}.author-note{color:var(--quiet);margin:12px 0 0;font-size:.75rem}.author-note a{color:var(--muted);text-underline-offset:3px}.segmented{border:1px solid var(--line);background:var(--surface);border-radius:12px;gap:2px;width:fit-content;padding:3px;display:flex;position:relative}.segmented button{min-height:30px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:0 13px;font-size:.78rem}.segmented button[aria-selected=true],.segmented button[aria-pressed=true],.segmented button[data-active=true]{background:var(--accent-soft);color:var(--text)}.family-tabs{margin:0 auto 18px}.example-stack{gap:10px;display:grid}.example-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.example-cell,.preview-surface,.vue-surface,.astro-surface{border:1px solid var(--line-soft);background:linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px), var(--surface);background-size:32px 32px;border-radius:18px;place-items:center;min-height:190px;display:grid;position:relative;overflow:hidden}.example-cell--large{min-height:250px}[data-family-panel][hidden]{display:none}.section{margin-top:56px}.section-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;display:flex}.section-heading h2{letter-spacing:-.02em;margin:0;font-size:1rem;font-weight:580}.section-heading p{color:var(--quiet);margin:0;font-size:.72rem}.code-block{border:1px solid var(--line);background:var(--surface);border-radius:14px;align-items:center;min-height:54px;display:flex;position:relative;overflow:auto}.code-block pre{color:var(--muted);white-space:pre-wrap;margin:0;padding:16px 52px 16px 16px;font:.76rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.code-block .copy-button{position:absolute;top:9px;right:9px}.controls{border:1px solid var(--line);background:var(--surface);border-radius:16px;gap:18px;padding:18px;display:grid}.control-row{grid-template-columns:86px 1fr;align-items:center;gap:12px;display:grid}.control-label{color:var(--quiet);font-size:.72rem}.control-options{flex-wrap:wrap;gap:5px;display:flex}.control-options button{border:1px solid var(--line);background:var(--surface-raised);min-height:29px;color:var(--muted);cursor:pointer;border-radius:9px;padding:0 10px;font-size:.73rem}.control-options button[data-active=true]{border-color:color-mix(in srgb, var(--accent) 45%, var(--line));background:var(--accent-soft);color:var(--text)}.range-control{grid-template-columns:1fr 44px;align-items:center;gap:12px;display:grid}.range-control input{width:100%;accent-color:var(--accent)}.range-control output{color:var(--muted);text-align:right;font:.7rem ui-monospace,monospace}.playground-preview{margin-top:10px;position:relative}.preview-surface{min-height:310px}.preview-toolbar{gap:6px;display:flex;position:absolute;bottom:12px;right:12px}.variant-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.variant-card{border:1px solid var(--line-soft);background:var(--surface);border-radius:16px;place-items:center;min-height:150px;padding:18px;display:grid}.variant-label{color:var(--quiet);text-align:center;margin-top:9px;font:.66rem ui-monospace,monospace}.integration-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.integration-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:18px}.integration-card h3{margin:0 0 7px;font-size:.88rem;font-weight:580}.integration-card p{color:var(--muted);margin:0;font-size:.76rem;line-height:1.55}.vue-surface{min-height:240px;margin-top:10px}.framework-demos{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;display:grid}.framework-demos .vue-surface,.framework-demos .astro-surface{min-height:240px;margin-top:0}.footer{border-top:1px solid var(--line-soft);color:var(--quiet);text-align:center;margin-top:64px;padding-top:20px;font-size:.72rem}.mock-chat{border:1px solid var(--line);background:var(--surface-raised);width:min(420px,100% - 36px);box-shadow:inset 0 0 42px color-mix(in srgb, var(--text) 2%, transparent);border-radius:18px;padding:12px}.mock-chat input{width:100%;min-height:58px;color:var(--text);background:0 0;border:0;outline:0}.mock-chat-bottom{align-items:center;gap:6px;display:flex}.mock-chip,.mock-action,.mock-button,.mock-search,.mock-search-shell{border:1px solid var(--line);background:var(--surface-raised);color:var(--muted)}.mock-chip{border-radius:8px;padding:5px 8px;font-size:.68rem}.mock-action{width:30px;height:30px;color:var(--text);border-radius:9px;place-items:center;margin-left:auto;display:grid}.mock-button{min-height:38px;color:var(--text);border-radius:11px;padding:0 16px}.mock-button--round{border-radius:50%;width:46px;height:46px;min-height:0;padding:0}.mock-button--pill{border-radius:999px}.mock-search{border-radius:13px;outline:0;width:min(260px,100% - 32px);min-height:42px;padding:0 14px}.mock-search-shell{border-radius:13px;align-items:center;width:min(260px,100% - 32px);min-height:42px;padding:0 14px;display:flex}.mock-search-shell input{width:100%;min-width:0;color:var(--text);background:0 0;border:0;outline:0}.mock-card{border:1px solid var(--line);background:var(--surface-raised);border-radius:16px;width:min(310px,100% - 32px);padding:18px}.mock-card strong{font-size:.82rem;font-weight:580;display:block}.mock-card span{color:var(--muted);margin-top:6px;font-size:.72rem;display:block}@media (width<=640px){.app{width:min(100% - 20px,760px)}.hero{padding-top:34px}.example-grid,.variant-grid,.integration-grid,.framework-demos{grid-template-columns:1fr}.control-row{grid-template-columns:1fr;gap:8px}.example-cell{min-height:170px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.beam-host{place-items:center;max-width:100%;display:grid}.beam-host--wide{width:min(290px,100% - 24px)}.beam-host--card{width:min(340px,100% - 24px)}.beam-host--preview{width:min(440px,100% - 32px)}.variant-host{max-width:100%}.variant-host--card{width:100%}[data-beam-bloom]{pointer-events:none}.inset-specimen{box-shadow:inset 0 0 0 var(--specimen-inset) var(--surface), inset 0 0 0 calc(var(--specimen-inset) + 1px) var(--line)}.astro-beam-button{border:1px solid var(--line);background:var(--surface-raised);min-height:44px;color:var(--text);border-radius:13px;padding:0 18px}.beam-ui-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.beam-ui-example{border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 88%, transparent);border-radius:16px;min-width:0;padding:16px}.beam-ui-caption{color:var(--text);justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:.75rem;font-weight:580;display:flex}.beam-ui-caption small{color:var(--muted);font:.64rem var(--font-mono);font-weight:450}.beam-ui-control{border:1px solid var(--line);background:var(--surface-raised);min-height:44px;color:var(--text);border-radius:12px;align-items:center;gap:10px;padding:0 12px;transition:border-color .16s,background-color .16s,box-shadow .16s,transform .1s;display:flex}.beam-ui-control:hover{border-color:color-mix(in srgb, var(--text) 20%, var(--line));background:color-mix(in srgb, var(--surface-raised) 92%, var(--accent))}.beam-ui-control:focus-within{border-color:color-mix(in srgb, var(--accent) 58%, var(--line));box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent)}.beam-ui-control:active{transform:translateY(1px)}.beam-ui-control input,.beam-ui-control select,.beam-ui-control textarea{width:100%;min-width:0;color:var(--text);font:inherit;background:0 0;border:0;outline:0}.beam-ui-control input::placeholder,.beam-ui-control textarea::placeholder{color:var(--muted)}.beam-ui-input>svg,.beam-ui-select>svg{fill:none;width:16px;stroke:var(--muted);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;flex:0 0 16px}.beam-ui-input kbd{border:1px solid var(--line);background:var(--surface);color:var(--muted);font:.62rem var(--font-mono);border-radius:6px;flex:none;padding:2px 6px}.beam-ui-select select{appearance:none;cursor:pointer}.beam-ui-select select option{background:var(--surface)}.beam-ui-status-dot{background:var(--accent);width:7px;height:7px;box-shadow:0 0 10px color-mix(in srgb, var(--accent) 65%, transparent);border-radius:50%;flex:0 0 7px}.beam-ui-inline{justify-content:space-between;align-items:center;gap:16px;min-height:44px;display:flex}.beam-ui-inline>div{gap:3px;min-width:0;display:grid}.beam-ui-inline strong{color:var(--text);font-size:.78rem;font-weight:560}.beam-ui-inline>div>span{color:var(--muted);font-size:.68rem}.beam-ui-switch{border:1px solid var(--line);background:var(--surface-raised);cursor:pointer;border-radius:999px;flex:0 0 44px;width:44px;height:26px;padding:3px;transition:border-color .16s,background-color .16s}.beam-ui-switch>span{background:var(--muted);width:18px;height:18px;box-shadow:0 1px 4px color-mix(in srgb, var(--page) 55%, transparent);border-radius:50%;transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .16s;display:block}.beam-ui-switch[aria-checked=true]{border-color:color-mix(in srgb, var(--accent) 55%, var(--line));background:color-mix(in srgb, var(--accent) 30%, var(--surface-raised))}.beam-ui-switch[aria-checked=true]>span{background:var(--text);transform:translate(18px)}.beam-ui-switch:focus-visible,.beam-ui-number button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.beam-ui-slider input{appearance:none;cursor:pointer;background:0 0;height:20px}.beam-ui-slider input::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0 var(--range-value), var(--line) var(--range-value) 100%);border-radius:999px;height:4px}.beam-ui-slider input::-webkit-slider-thumb{appearance:none;border:3px solid var(--surface-raised);background:var(--text);width:14px;height:14px;box-shadow:0 0 0 1px var(--accent);border-radius:50%;margin-top:-5px}.beam-ui-slider input::-moz-range-track{background:var(--line);border-radius:999px;height:4px}.beam-ui-slider input::-moz-range-progress{background:var(--accent);border-radius:999px;height:4px}.beam-ui-slider input::-moz-range-thumb{border:3px solid var(--surface-raised);background:var(--text);width:10px;height:10px;box-shadow:0 0 0 1px var(--accent);border-radius:50%}.beam-ui-slider output,.beam-ui-number output{color:var(--muted);font:.67rem var(--font-mono)}.beam-ui-number{justify-content:space-between}.beam-ui-number button{border:1px solid var(--line);background:var(--surface);width:28px;height:28px;color:var(--text);cursor:pointer;border-radius:8px;transition:border-color .14s,background-color .14s,transform .1s}.beam-ui-number button:hover{border-color:color-mix(in srgb, var(--accent) 46%, var(--line));background:color-mix(in srgb, var(--surface) 86%, var(--accent))}.beam-ui-number button:active{transform:scale(.94)}.beam-ui-textarea{align-items:flex-end;min-height:88px;padding-block:11px}.beam-ui-textarea textarea{resize:none;min-height:58px}.beam-ui-textarea>span{color:var(--muted);font:.62rem var(--font-mono);flex:none}@media (prefers-reduced-motion:reduce){.beam-ui-control,.beam-ui-switch,.beam-ui-switch>span,.beam-ui-number button{transition:none}}@media (width<=640px){.beam-ui-grid{grid-template-columns:1fr;padding-inline:16px}}.beam-ui-control:has(:disabled),.beam-ui-switch:disabled{cursor:not-allowed;opacity:.48}.beam-ui-control[data-state=loading]{cursor:progress;opacity:.72}.beam-ui-control[data-state=error]{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent)}.beam-ui-control[data-state=success]{border-color:color-mix(in srgb, var(--accent) 65%, var(--line));box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent)}.vue-beam-demo[data-v-f1ed2380]{justify-items:center;gap:24px;display:grid}.vue-beam-button[data-v-f1ed2380]{border:1px solid var(--line);background:var(--surface-raised);min-height:44px;color:var(--text);cursor:pointer;border-radius:13px;padding:0 18px}label[data-v-f1ed2380]{color:var(--muted);grid-template-columns:auto 120px 36px;align-items:center;gap:10px;font-size:.7rem;display:grid}input[data-v-f1ed2380]{accent-color:var(--accent)}output[data-v-f1ed2380]{font-family:ui-monospace,monospace}