*{box-sizing:border-box}:root{color-scheme:light;--demo-body-background:#f8fafc;--demo-body-color:#18181b;--demo-panel-background:#ffffffdb;--demo-panel-border:#e4e4e7;--demo-label-color:#71717a;--demo-note-color:#71717a;--demo-control-background:#fff;--demo-control-border:#e4e4e7;--demo-stage-background:radial-gradient(circle at 50% 10%, #fff 0, #f4f4f5 48%, #e4e4e7 100%);--demo-board-background:#fff;--demo-board-shadow:0 18px 50px #1014182e;--demo-page-background:transparent;--demo-page-color:#0f172a;--demo-page-size-color:#18181b;--demo-readout-background:#0f172a;--demo-readout-color:#e2e8f0;--demo-screen-background:linear-gradient(145deg, #f4f4f5, #fff 55%, #e4e4e7);--demo-navigation-background:#ededed;--demo-navigation-color:#000;--demo-tab-background:#f7f7f7;--demo-tab-border:#d8d8d8;--demo-tab-color:#7a7e83;--demo-tab-active:#07c160;--demo-theme-toggle-background:#e2e8f0;--demo-theme-toggle-border:#94a3b8;--demo-theme-toggle-selected:#fff;--demo-theme-toggle-selected-color:#0f172a}:root[data-theme=dark]{color-scheme:dark;--demo-body-background:#09090b;--demo-body-color:#fafafa;--demo-panel-background:#18181be6;--demo-panel-border:#27272a;--demo-label-color:#a1a1aa;--demo-note-color:#a1a1aa;--demo-control-background:#18181b;--demo-control-border:#3f3f46;--demo-stage-background:radial-gradient(circle at 50% 10%, #27272a 0, #18181b 46%, #09090b 100%);--demo-board-background:#18181b;--demo-board-shadow:0 18px 50px #0000006b;--demo-page-background:transparent;--demo-page-color:#e2e8f0;--demo-page-size-color:#fafafa;--demo-readout-background:#09090b;--demo-readout-color:#e4e4e7;--demo-screen-background:linear-gradient(145deg, #27272a, #18181b 55%, #09090b);--demo-navigation-background:#18181b;--demo-navigation-color:#fff;--demo-tab-background:#18181b;--demo-tab-border:#27272a;--demo-tab-color:#a1a1aa;--demo-tab-active:#fafafa;--demo-theme-toggle-background:#18181b;--demo-theme-toggle-border:#3f3f46;--demo-theme-toggle-selected:#27272a;--demo-theme-toggle-selected-color:#fafafa}body{height:100vh;min-height:100vh;color:var(--demo-body-color);background:var(--demo-body-background);margin:0;font:13px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif;display:flex}.panel{background:var(--demo-panel-background);border-right:1px solid var(--demo-panel-border);backdrop-filter:blur(18px);flex:none;width:340px;padding:24px;overflow:auto}.panel h1{letter-spacing:-.025em;margin:0;font-size:17px}.panel__header{justify-content:space-between;align-items:start;gap:12px;display:flex}.github-link{border:1px solid var(--demo-control-border);color:var(--demo-body-color);white-space:nowrap;border-radius:6px;padding:5px 8px;font-size:11px;font-weight:600;text-decoration:none}.demo-intro{color:var(--demo-note-color);margin:8px 0 20px;font-size:12px;line-height:1.45}.device-directory-link{color:var(--demo-body-color);margin:-8px 0 16px;font-size:12px;font-weight:600;display:block}.device-profile{border:1px solid var(--demo-panel-border);background:color-mix(in srgb, var(--demo-panel-background) 92%, #f4f4f5);border-radius:10px;margin:16px 0;padding:14px}.device-profile h2{margin:0 0 10px;font-size:13px}.device-profile dl{margin:0}.device-profile dl>div{justify-content:space-between;gap:12px;padding:4px 0;display:flex}.device-profile dt{color:var(--demo-label-color)}.device-profile dd{text-align:right;margin:0;font-weight:600}.device-directory-page{height:auto;min-height:100vh;display:block}.device-directory{width:min(100% - 32px,960px);margin:0 auto;padding:64px 0}.device-directory__eyebrow{color:var(--demo-label-color);letter-spacing:.09em;text-transform:uppercase;margin:0 0 10px;font-size:11px;font-weight:700}.device-directory h1{letter-spacing:-.035em;margin:0;font-size:clamp(28px,5vw,44px)}.device-directory__intro{max-width:720px;color:var(--demo-note-color);margin:16px 0;font-size:16px}.device-directory__home{color:var(--demo-body-color);font-weight:600}.device-directory__list{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin:32px 0 0;padding:0;list-style:none;display:grid}.device-directory__list li{border:1px solid var(--demo-panel-border);background:var(--demo-panel-background);border-radius:10px;padding:14px}.device-directory__list a{color:var(--demo-body-color);font-weight:700;display:block}.device-directory__list span{color:var(--demo-note-color);margin-top:5px;font-size:12px;display:block}.panel__eyebrow,.control-section__title,.stage__label{color:var(--demo-label-color);letter-spacing:.09em;text-transform:uppercase;font-size:10px;font-weight:700}.page__eyebrow{color:var(--demo-page-muted-color,var(--demo-label-color));letter-spacing:.09em;text-transform:uppercase;font-size:10px;font-weight:700}.panel__eyebrow{margin-bottom:10px}.control-section{border:1px solid var(--demo-panel-border);background:color-mix(in srgb, var(--demo-panel-background) 92%, #f4f4f5);border-radius:10px;margin:16px 0;padding:14px}.control-section__title{margin-bottom:12px}.field{margin-bottom:10px;display:block}.field>span{color:var(--demo-label-color);margin-bottom:4px;font-size:12px;display:block}.field--inline{align-items:center;gap:8px;display:flex}.field--inline>span{color:var(--demo-body-color);margin:0;font-size:13px}.field select,.field input[type=number],.field input[type=text],.field input[type=range]{width:100%}.theme-readout{border:1px solid var(--demo-control-border);color:var(--demo-note-color);border-radius:6px;padding:7px 9px;font-size:11px;line-height:1.35;display:block}.field select,.field input[type=number],.field input[type=text]{box-sizing:border-box;border:1px solid var(--demo-control-border);background:var(--demo-control-background);min-height:34px;color:var(--demo-body-color);border-radius:6px;padding:6px 9px}.theme-switch{border:0;padding:0}.theme-switch legend{color:var(--demo-label-color);margin-bottom:4px;font-size:12px}.theme-switch label{min-width:0;color:var(--demo-label-color);cursor:pointer;justify-content:center;align-items:center;display:inline-flex;position:relative}.theme-switch__options{border:1px solid var(--demo-theme-toggle-border);background:var(--demo-theme-toggle-background);border-radius:6px;grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow:hidden}.theme-switch input{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.theme-switch label span{width:100%;color:inherit;text-align:center;padding:5px 8px;display:block}.theme-switch input:checked+span{background:var(--demo-theme-toggle-selected);color:var(--demo-theme-toggle-selected-color);box-shadow:inset 0 0 0 1px var(--demo-theme-toggle-border)}.theme-switch input:focus-visible+span{outline-offset:-2px;outline:2px solid}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.note{color:var(--demo-note-color);margin:16px 0;font-size:12px}.readout__head{color:var(--demo-label-color);justify-content:space-between;margin:12px 0 4px;font-size:12px;display:flex}.readout pre{background:var(--demo-readout-background);max-height:220px;color:var(--demo-readout-color);border-radius:6px;margin:0;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.45;overflow:auto}.stage{background:var(--demo-stage-background);flex:1;justify-content:center;align-items:center;min-width:0;padding:48px;display:flex;position:relative;overflow:auto}.stage__label{position:absolute;top:24px;left:32px}.theme-toggle{z-index:1;border:1px solid var(--demo-panel-border);background:var(--demo-panel-background);width:34px;height:34px;color:var(--demo-body-color);cursor:pointer;border-radius:7px;place-items:center;padding:0;display:grid;position:absolute;top:18px;right:24px;box-shadow:0 1px 2px #00000014}.theme-toggle:hover{background:var(--demo-control-background)}.theme-toggle:focus-visible{outline:2px solid var(--demo-body-color);outline-offset:2px}.theme-toggle svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:16px;height:16px}.theme-toggle__moon,:root[data-theme=dark] .theme-toggle__sun{display:none}:root[data-theme=dark] .theme-toggle__moon{display:block}.stage__scaler{transform-origin:0 0;position:absolute;top:0;left:0}.stage__viewport{flex:none;position:relative}.stage__preview{flex-direction:column;flex:none;align-items:center;display:flex}.stage__attribution{color:var(--demo-note-color);margin:14px 0 0;font-size:11px}.stage__attribution a{color:inherit;text-underline-offset:3px;font-weight:650}.stage--overflow{justify-content:flex-start;align-items:flex-start}.stage__scaler--embedded{background:var(--demo-board-background);width:390px;height:760px;box-shadow:var(--demo-board-shadow);border-radius:12px;overflow:hidden}.page{box-sizing:border-box;height:100%;padding:16px calc(var(--device-safe-area-right) + 16px) calc(max(var(--device-safe-area-bottom) - var(--device-tab-bar-height), 0px) + 16px) calc(var(--device-safe-area-left) + 16px);background:var(--demo-page-background);color:var(--demo-page-color);overflow:auto}.page h2{letter-spacing:-.03em;margin:6px 0 10px;font-size:20px}.page p{margin:0 0 8px;font-size:13px}.page__size{color:var(--demo-page-size-color);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.safe-area-overlay{position:absolute;inset:0}.safe-area-overlay__band[hidden]{display:none}.safe-area-overlay__band{color:#fff;text-shadow:0 1px 2px #0009;justify-content:center;align-items:center;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;position:absolute}.safe-area-overlay__band--top{height:var(--device-safe-area-top);background:#ef444459;top:0;left:0;right:0}.safe-area-overlay__band--bottom{height:var(--device-safe-area-bottom);background:#10b98159;bottom:0;left:0;right:0}.safe-area-overlay__band--left{width:var(--device-safe-area-left);writing-mode:vertical-rl;background:#eab30859;top:0;bottom:0;left:0}.safe-area-overlay__band--right{width:var(--device-safe-area-right);writing-mode:vertical-rl;background:#3b82f659;top:0;bottom:0;right:0}@media (width<=800px){body{height:auto;display:block}.panel{border-right:0;border-bottom:1px solid var(--demo-panel-border);width:100%;max-height:none}.stage{min-height:720px;padding:48px 24px 24px}}