.shuffle-text{align-items:center;min-width:0;line-height:1;display:inline-flex}.shuffle-text__animated,.shuffle-text.is-enabled .shuffle-text__static{display:none}.shuffle-text.is-enabled .shuffle-text__animated{white-space:nowrap;align-items:center;display:inline-flex}.shuffle-text__char{height:1em;line-height:1;display:inline-block;overflow:hidden}.shuffle-text__stack{flex-direction:column;line-height:1;display:flex;transform:translate(0,0)}.shuffle-text.is-enabled .shuffle-text__stack{will-change:transform}.shuffle-text__stack>span{flex:0 0 1em;height:1em;line-height:1;display:block}@keyframes shuffle-text-up{0%{transform:translate(0,0)}to{transform:translateY(-50%)}}@media (hover:hover) and (pointer:fine){:where(button,a,[role=button]):hover .shuffle-text.is-enabled .shuffle-text__stack{animation:shuffle-text-up var(--shuffle-duration,.35s) var(--shuffle-ease,cubic-bezier(.215, .61, .355, 1)) var(--shuffle-delay,0s) both}}:where(button,a,[role=button]):focus-visible .shuffle-text.is-enabled .shuffle-text__stack{animation:shuffle-text-up var(--shuffle-duration,.35s) var(--shuffle-ease,cubic-bezier(.215, .61, .355, 1)) var(--shuffle-delay,0s) both}@media (prefers-reduced-motion:reduce){.shuffle-text.is-enabled .shuffle-text__stack{will-change:auto;animation:none!important;transform:translate(0,0)!important}}@font-face{font-family:DM Sans;src:url(/fonts/dm-sans-400.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:DM Sans;src:url(/fonts/dm-sans-500.ttf)format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:DM Sans;src:url(/fonts/dm-sans-600.ttf)format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Instrument Serif;src:url(/fonts/instrument-serif.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Instrument Serif;src:url(/fonts/instrument-serif-italic.ttf)format("truetype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Space Mono;src:url(/fonts/space-mono-400.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Space Mono;src:url(/fonts/space-mono-700.ttf)format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Syne;src:url(/fonts/syne-700.ttf)format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Syne;src:url(/fonts/syne-800.ttf)format("truetype");font-weight:800;font-style:normal;font-display:swap}:root{color:#14110f;font-synthesis:none;text-rendering:optimizelegibility;--ink:#14110f;--paper:#fbf4e4;--panel:#fffdf7;--muted:#675f55;--accent:#ffd43b;--pink:#ff5da2;--blue:#4d96ff;--green:#3dd68c;--purple:#b388ff;--coral:#ff6547;--lime:#d9ff42;--border:3px solid var(--ink);--shadow-sm:3px 3px 0 var(--ink);--shadow:6px 6px 0 var(--ink);--shadow-lg:9px 9px 0 var(--ink);--radius:18px;--display:"Syne", "Arial Black", "PingFang SC", sans-serif;--mono:"Space Mono", "Courier New", "PingFang SC", monospace;background:#fbf4e4;font-family:Space Mono,Courier New,PingFang SC,monospace}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}button,input{font:inherit}button{letter-spacing:0}.visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}body{background:repeating-linear-gradient(135deg, #14110f06 0 1px, transparent 1px 16px), var(--paper);min-width:320px;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}html.is-library-menu-open,html.is-library-menu-open body{overscroll-behavior:none;overflow:hidden}body:before{z-index:9999;pointer-events:none;opacity:.055;mix-blend-mode:multiply;content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.app-shell{grid-template-columns:304px minmax(0,1fr);min-height:100dvh;display:grid}.sidebar{z-index:20;background:var(--paper);border-right:var(--border);height:100dvh;box-shadow:5px 0 0 var(--pink);flex-direction:column;display:flex;position:sticky;top:0;overflow:hidden}.sidebar__brand{border-bottom:var(--border);background:var(--accent);align-items:center;gap:14px;min-height:94px;padding:18px;display:flex}.sidebar__wordmark{font-family:var(--display);text-transform:uppercase;font-size:18px;font-weight:800;line-height:1;display:block}.sidebar__nav{overscroll-behavior-y:contain;scrollbar-color:var(--ink) transparent;scrollbar-width:thin;touch-action:pan-y;-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding:6px 0 24px;overflow-y:auto}.nav-group__heading{border:2px solid var(--ink);width:fit-content;box-shadow:2px 2px 0 var(--ink);color:var(--ink);background:#fff;border-radius:999px;margin-bottom:10px;padding:5px 9px;font-size:9px;font-weight:700;line-height:1.2}.nav-group:nth-child(5n+1) .nav-group__heading{background:var(--blue);color:#fff}.nav-group:nth-child(5n+2) .nav-group__heading{background:var(--yellow,var(--accent))}.nav-group:nth-child(5n+3) .nav-group__heading{background:var(--pink)}.nav-group:nth-child(5n+4) .nav-group__heading{background:var(--green)}.nav-group:nth-child(5n) .nav-group__heading{background:var(--purple)}.nav-item{width:100%;min-height:54px;color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:2px solid #0000;border-radius:11px;padding:8px 12px;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s;display:block;position:relative}.nav-item.is-active{border-color:var(--ink);background:var(--accent);box-shadow:var(--shadow-sm)}@media (hover:hover) and (pointer:fine){.nav-item:not(.is-active):hover{background-color:#ffd43b3d;transform:translate(3px)}.nav-item.is-active:hover{background-color:var(--accent)}.nav-item:active{box-shadow:1px 1px 0 var(--ink);transform:translate(1px,1px)}}.nav-item strong,.nav-item small{display:block}.nav-item strong{font-family:var(--display);font-size:13px;font-weight:800;line-height:1.15}.nav-item small{color:var(--muted);margin-top:4px;font-size:9px;font-weight:700;line-height:1.25}.nav-item.is-active strong{color:#000}.sidebar__foot{border-top:var(--border);background:var(--paper);color:var(--muted);letter-spacing:0;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:8px;padding:10px 14px 12px;font-family:DM Sans,sans-serif;font-size:10px;font-weight:500;line-height:1;display:flex;position:relative}.sidebar__credit{white-space:nowrap;padding-inline:2px}.mobile-menu-toggle{display:none}.workspace{background:linear-gradient(#ffffff5c,#ffffff5c),repeating-linear-gradient(45deg,#0000 0 24px,#4d96ff0e 24px 48px);min-width:0}.component-page{flex-direction:column;width:min(1480px,100%);height:100vh;min-height:640px;margin:0 auto;padding:22px 26px;display:flex}.component-head{flex:none;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding:0 0 22.5px;display:grid;position:relative}.component-head h1{min-width:0;font-family:var(--display);letter-spacing:0;text-transform:uppercase;margin:0;font-size:48px;font-weight:800;line-height:1;display:block}.component-english{color:var(--muted);font-family:var(--mono);letter-spacing:0;text-align:left;text-transform:uppercase;white-space:nowrap;flex:none;margin:0 0 4px;font-size:11px;font-weight:400;line-height:1}.component-tech{color:var(--muted);font-family:var(--mono);letter-spacing:0;text-align:right;white-space:nowrap;margin:0 0 4px;font-size:9px;font-weight:400;line-height:1}.demo-tool{border:var(--border);border-radius:var(--radius);background:var(--panel);min-height:0;box-shadow:var(--shadow-lg);flex-direction:column;flex:auto;display:flex;overflow:hidden}.tool-row{border-bottom:var(--border);background:var(--accent);flex:none;justify-content:space-between;align-items:center;gap:16px;min-height:58px;padding:7px 10px;display:flex}.segmented-control{border:var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:999px;padding:3px;display:flex}.segmented-control button{min-height:36px;color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:999px;align-items:center;gap:7px;padding:0 14px;font-size:10px;font-weight:700;transition:transform .12s,background .12s;display:flex}.segmented-control button.is-active{background:var(--pink)}.segmented-control button:active{transform:translateY(2px)}.tool-actions{align-items:center;gap:9px;display:flex}.icon-button{border:var(--border);width:40px;height:40px;box-shadow:var(--shadow-sm);color:var(--ink);cursor:pointer;background:#fff;border-radius:12px;flex:none;place-items:center;padding:0;transition:transform .12s,box-shadow .12s,background .12s;display:inline-grid}.icon-button:hover{background:var(--blue);color:#fff;box-shadow:5px 5px 0 var(--ink);transform:translate(-2px,-2px)}.icon-button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.command-button{border:var(--border);background:var(--pink);min-height:40px;box-shadow:var(--shadow-sm);color:var(--ink);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:0 15px;font-size:10px;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s,background .12s;display:inline-flex}.command-button:hover{background:var(--green);box-shadow:5px 5px 0 var(--ink);transform:translate(-2px,-2px)}.command-button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.demo-stage{background:#fff;flex:auto;min-height:0;overflow:hidden}.demo-stage>*{height:100%}.demo-stage.is-code{background:var(--ink)}.code-view{background:var(--ink);color:#fff8e9;scrollbar-color:var(--accent) #27211e;height:100%;overflow:auto}.code-view pre{min-width:max-content;font:400 12px/1.7 var(--mono);margin:0;padding:24px 0 34px}.code-line{grid-template-columns:56px minmax(0,1fr);min-height:21px;display:grid}.code-line__number{color:var(--accent);text-align:right;-webkit-user-select:none;user-select:none;padding-right:15px}.code-line__content{white-space:pre;padding-right:26px}@media (width<=1200px){.app-shell{--mobile-menu-toggle-top:calc(12px + env(safe-area-inset-top,0px));--mobile-menu-toggle-right:calc(30px + env(safe-area-inset-right,0px));grid-template-columns:1fr}.sidebar{visibility:hidden;pointer-events:none;width:100%;height:100dvh;-webkit-clip-path:circle(0 at calc(100% - var(--mobile-menu-toggle-right) - 21px) calc(var(--mobile-menu-toggle-top) + 21px));clip-path:circle(0 at calc(100% - var(--mobile-menu-toggle-right) - 21px) calc(var(--mobile-menu-toggle-top) + 21px));box-shadow:none;will-change:clip-path;transition:none;position:fixed;inset:0;transform:none}.sidebar.is-open{visibility:visible;pointer-events:auto;-webkit-clip-path:circle(150vmax at calc(100% - var(--mobile-menu-toggle-right) - 21px) calc(var(--mobile-menu-toggle-top) + 21px));clip-path:circle(150vmax at calc(100% - var(--mobile-menu-toggle-right) - 21px) calc(var(--mobile-menu-toggle-top) + 21px));transition:clip-path .42s cubic-bezier(.16,1,.3,1),visibility .42s cubic-bezier(.16,1,.3,1)}.sidebar.is-closing{visibility:visible;pointer-events:none;transition:clip-path .24s cubic-bezier(.4,0,.2,1)}.mobile-menu-toggle{appearance:none;z-index:21;top:var(--mobile-menu-toggle-top);right:var(--mobile-menu-toggle-right);width:42px;height:42px;box-shadow:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:0;place-items:center;padding:0;display:inline-grid;position:fixed}.mobile-menu-toggle__line{transform-origin:50%;background:currentColor;width:20px;height:2px;margin:-1px 0 0 -10px;transition:transform .2s cubic-bezier(.16,1,.3,1);position:absolute;top:50%;left:50%}.mobile-menu-toggle__line--top{transform:translateY(-4px)}.mobile-menu-toggle__line--bottom{transform:translateY(4px)}.mobile-menu-toggle.is-open .mobile-menu-toggle__line--top{transform:rotate(45deg)}.mobile-menu-toggle.is-open .mobile-menu-toggle__line--bottom{transform:rotate(-45deg)}.mobile-menu-toggle:hover,.mobile-menu-toggle:active{box-shadow:none;background:0 0;border:0}.component-head{padding-right:64px}.component-tech{display:none}}@media (width<=940px){.workspace{height:100dvh;overflow:hidden}.component-page{height:100dvh;min-height:0;display:flex;overflow:hidden}.component-head{grid-template-columns:1fr;align-items:start;gap:0}.demo-tool{min-height:0;display:flex}.demo-stage{flex:auto;height:auto;min-height:0;max-height:620px}}@media (width<=760px){.app-shell{--mobile-menu-toggle-top:calc(14px + env(safe-area-inset-top,0px));--mobile-menu-toggle-right:calc(12px + env(safe-area-inset-right,0px))}.component-page{padding:20px 14px 34px}.component-head{padding:0 0 20px}.component-head h1{margin:0;font-size:34px}.component-title-lockup{flex-direction:column;align-items:flex-start;gap:4px}.component-english{margin:0}.demo-tool{box-shadow:5px 5px 0 var(--ink);border-radius:14px}.tool-row{flex-wrap:wrap;min-height:66px;padding:10px}.command-button{padding:0 12px}}@media (width<=440px){.app-shell{--mobile-menu-toggle-right:calc(9px + env(safe-area-inset-right,0px))}.component-page{padding-inline:10px}.segmented-control button{padding:0 10px}.tool-actions{gap:7px}.command-button{padding:0 10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.sidebar,.sidebar.is-open,.sidebar.is-closing,.mobile-menu-toggle__line{transition:none!important}.sidebar.is-closing{visibility:hidden}}@font-face{font-family:Fusion Pixel;src:url(/fonts/fusion-pixel-12px-mono-zh_hans.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--px-ink:#fff;--px-bg:#000;--px-panel:#050505;--px-mute:#ffffff8c;--px-faint:#ffffff52;--px-line:1px solid #ffffffe6;--px-line-soft:1px solid #ffffff29;--px-dot:radial-gradient(#ffffff0d 1px, transparent 1.6px);--px-cut:polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 2px 4px, 2px 2px, 4px 2px);--px-cut-in:polygon(3px 1px, calc(100% - 3px) 1px, calc(100% - 3px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 3px, calc(100% - 1px) 3px, calc(100% - 1px) calc(100% - 3px), calc(100% - 2px) calc(100% - 3px), calc(100% - 2px) calc(100% - 2px), calc(100% - 3px) calc(100% - 2px), calc(100% - 3px) calc(100% - 1px), 3px calc(100% - 1px), 3px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 3px), 1px calc(100% - 3px), 1px 3px, 2px 3px, 2px 2px, 3px 2px);--px-invert-bg:#fff;--px-invert-fg:#000;--ink:var(--px-ink);--paper:var(--px-bg);--panel:var(--px-panel);--muted:var(--px-mute);--accent:#fff;--yellow:#fff;--pink:#d9d9d9;--blue:#fff;--green:#d9d9d9;--purple:#bfbfbf;--coral:#fff;--lime:#e6e6e6;--border:var(--px-line);--shadow-sm:none;--shadow:none;--shadow-lg:none;--radius:0;--display:"Fusion Pixel", "Space Mono", monospace;--ui:"Fusion Pixel", "PingFang SC", monospace;--mono:"Fusion Pixel", "Space Mono", monospace}body{background:var(--px-bg);color:var(--px-ink);font-family:var(--ui);letter-spacing:.02em}body:before{opacity:1;mix-blend-mode:normal;background-image:radial-gradient(#ffffff52 1px,#0000 1.6px),radial-gradient(#ffffff1a 1px,#0000 1.7px),radial-gradient(#ffffff0d 1px,#0000 1.7px);background-position:0 0,55px 80px,20px 30px;background-size:260px 260px,170px 170px,110px 110px;animation:160s linear infinite px-star-drift,9s ease-in-out infinite px-star-twinkle}@keyframes px-star-drift{0%{background-position:0 0,55px 80px,20px 30px}to{background-position:260px 260px,225px 250px,130px 140px}}@keyframes px-star-twinkle{0%,to{opacity:.8}50%{opacity:1}}button:focus-visible,a:focus-visible{outline:2px solid var(--px-ink);outline-offset:3px}.app-shell{grid-template-columns:304px minmax(0,1fr)}.sidebar{background:var(--px-bg);border-right:var(--px-line-soft);box-shadow:none}.sidebar__brand{background:linear-gradient(180deg, var(--px-bg) 25%, #0000 100%), radial-gradient(#ffffff1a 1px, transparent 1.5px) 0 0 / 7px 7px, var(--px-bg);border-bottom:0;gap:13px;min-height:96px;padding:18px}.sidebar__wordmark{color:var(--px-ink);font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;margin-left:12px;font-size:22px;font-weight:400;line-height:1}.sidebar__nav{background:var(--px-bg);scrollbar-color:#ffffff59 transparent;padding:10px 0 24px}.nav-group{padding:16px 18px 2px}.nav-group__heading,.nav-group:nth-child(n) .nav-group__heading{min-width:0;box-shadow:none;color:var(--px-mute);font-family:var(--ui);letter-spacing:.08em;text-align:left;background:0 0;border:0;border-radius:0;margin-bottom:8px;padding:0 2px;font-size:11px;font-weight:400;line-height:1.3}.nav-group__heading:before{content:"< "}.nav-group__heading:after{content:" >"}.nav-item{appearance:none;isolation:isolate;min-height:54px;color:var(--px-ink);box-shadow:none;background:0 0;border:0;border-radius:0;padding:10px 13px;transition:background-color .2s,color .2s;position:relative}.nav-item:after,.nav-item:before{content:"";opacity:0;pointer-events:none;transition:opacity .2s;position:absolute}.nav-item:after{z-index:-2;background:var(--px-ink);clip-path:var(--px-cut);inset:0}.nav-item:before{z-index:-1;background:var(--px-bg);clip-path:var(--px-cut-in);inset:1px}.nav-item+.nav-item{margin-top:4px}.nav-item strong{color:var(--px-ink);font-family:var(--ui);padding-left:0;font-size:13px;font-weight:400;line-height:1.25;transition:padding-left .18s;position:relative}.nav-item strong:before{content:">";opacity:0;transition:opacity .18s,transform .18s;position:absolute;left:0;transform:translate(-4px)}.nav-item small{color:var(--px-faint);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-top:5px;font-size:9px;font-weight:400;line-height:1.3}.nav-item.is-active{box-shadow:none;background:0 0}.nav-item.is-active:after,.nav-item.is-active:before{opacity:1}.nav-item.is-active strong{color:var(--px-ink);padding-left:1em}.nav-item.is-active strong:before{opacity:1;transform:none}.nav-item.is-active small{color:var(--px-faint)}.nav-item:focus-visible{outline:none}.nav-item:focus-visible:after,.nav-item:focus-visible:before{opacity:1}.nav-item:focus-visible strong{color:var(--px-ink);padding-left:1em}.nav-item:focus-visible strong:before{opacity:1;transform:none}.nav-item:focus-visible small{color:var(--px-faint)}@media (hover:hover) and (pointer:fine){.nav-item:not(.is-active):hover{background:0 0;transform:none}.nav-item:not(.is-active):hover:after,.nav-item:not(.is-active):hover:before{opacity:1}.nav-item:not(.is-active):hover strong{color:var(--px-ink);padding-left:1em}.nav-item:not(.is-active):hover strong:before{opacity:1;transform:none}.nav-item:not(.is-active):hover small{color:var(--px-faint)}.nav-item.is-active:hover{background:0 0}.nav-item:active{box-shadow:none;outline:none;transform:none}}.sidebar__foot{border-top:var(--px-line-soft);background:var(--px-bg);color:var(--px-mute);gap:8px;padding:11px 14px 13px 29px}.sidebar__credit{font-family:var(--mono);letter-spacing:.05em;font-size:10px;font-weight:400}.workspace{z-index:0;background:radial-gradient(#ffffff21 1px, transparent 1.7px) 0 0 / 130px 130px, radial-gradient(#ffffff14 1px, transparent 1.7px) 60px 42px / 92px 92px, var(--px-bg);position:relative}.workspace:before{z-index:-1;content:"";pointer-events:none;background-image:radial-gradient(#ffffff24 1px,#0000 1.6px),radial-gradient(#ffffff12 1px,#0000 1.6px);background-position:0 0,40px 60px;background-size:7px 7px,13px 13px;height:480px;animation:90s linear infinite px-mist-drift;position:absolute;inset:0 0 auto;-webkit-mask-image:linear-gradient(#000 0%,#0000 100%);mask-image:linear-gradient(#000 0%,#0000 100%)}@keyframes px-mist-drift{0%{background-position:0 0,40px 60px}to{background-position:0 91px,40px 151px}}.workspace:after{z-index:-1;content:"";pointer-events:none;background-image:radial-gradient(#fff3 1.5px,#0000 2.3px);background-size:190px 190px;animation:120s linear infinite px-near-drift;position:absolute;inset:0}@keyframes px-near-drift{0%{background-position:0 0}to{background-position:-190px 190px}}.component-page{z-index:2;width:min(1520px,100%);padding:12px 30px 24px;position:relative}.component-head{min-height:83px;box-shadow:none;background:0 0;border:0;border-radius:0;align-items:end;margin-bottom:0;padding:10px 0 20px}@keyframes px-decode{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}.component-head h1{color:var(--px-ink);font-family:var(--display);letter-spacing:.04em;text-transform:none;font-size:48px;font-style:normal;font-weight:400;line-height:1.1;animation:.5s steps(12,end) both px-decode}.component-head__copy{min-width:0}.component-title-lockup{align-items:flex-end;gap:16px;min-width:0;display:flex}@media (width>=1201px){.component-head{grid-template-columns:minmax(0,1fr) auto}.component-tech{grid-area:1/2;justify-self:end}}.component-head h1 span{font-weight:400;display:block}.component-english{color:var(--px-mute);font-family:var(--mono);letter-spacing:0;text-align:left;text-transform:uppercase;white-space:nowrap;background:0 0;border:0;flex:none;margin:0 0 4px;padding:0;font-size:12px;font-weight:400;line-height:1.4}.component-tech{color:var(--px-mute);font-family:var(--mono);letter-spacing:0;text-align:right;white-space:nowrap;background:0 0;border:0;margin:0 0 4px;padding:0;font-size:10px;font-weight:400;line-height:1.4}.demo-tool{box-shadow:none;background:0 0;border:0;border-radius:0;gap:14px;margin-top:0;overflow:visible}.tool-row{background:0 0;border:0;min-height:42px;padding:0}.segmented-control{isolation:isolate;box-shadow:none;background:0 0;border:0;border-radius:0;grid-template-columns:repeat(2,minmax(92px,1fr));padding:1px;display:grid;position:relative;overflow:hidden}.segmented-control:after,.segmented-control:before{pointer-events:none;content:"";position:absolute}.segmented-control:after{z-index:-2;background:var(--px-ink);clip-path:var(--px-cut);inset:0}.segmented-control:before{z-index:-1;background:var(--px-bg);clip-path:var(--px-cut-in);inset:1px}.segmented-control button{appearance:none;min-height:40px;box-shadow:none;color:var(--px-ink);font-family:var(--ui);letter-spacing:.05em;background:0 0;border:0;border-radius:0;justify-content:center;padding:0 14px;font-size:11px;font-weight:400;transition:color .2s}.segmented-control button:hover{background:#ffffff1a}.segmented-control button:focus-visible{outline:none}.segmented-control button:not(.is-active):focus-visible{background:#ffffff1a}.segmented-control button.is-active{background:var(--px-invert-bg);color:var(--px-invert-fg);clip-path:var(--px-cut)}.segmented-control button:active{box-shadow:none;border:0;outline:none;transform:none}.tool-actions{gap:9px}.icon-button,.command-button{isolation:isolate;box-shadow:none;background:0 0;border:0;position:relative}.icon-button:after,.command-button:after{z-index:-2;background:var(--px-ink);clip-path:var(--px-cut);content:"";position:absolute;inset:0}.icon-button:before,.command-button:before{z-index:-1;background:var(--px-bg);clip-path:var(--px-cut-in);content:"";transition:background-color .2s;position:absolute;inset:1px}.icon-button{width:42px;height:42px;color:var(--px-ink);transition:color .2s}.icon-button:hover{box-shadow:none;color:var(--px-invert-fg);background:0 0;transform:none}.icon-button:hover:before{background:var(--px-invert-bg)}.icon-button:active{transform:translateY(1px)}.command-button{min-height:42px;color:var(--px-ink);font-family:var(--ui);letter-spacing:.05em;border-radius:0;padding:0 16px;font-size:11px;font-weight:400;transition:color .2s}.command-button>svg,.command-button>.shuffle-text{z-index:1;position:relative}.command-button:hover{box-shadow:none;color:var(--px-invert-fg);background:0 0;transform:none}.command-button:hover:before{background:var(--px-invert-bg)}.command-button:active{transform:translateY(1px)}.demo-stage{border:var(--px-line-soft);background:var(--px-bg);background-clip:padding-box;overflow:hidden}.demo-stage.is-code,.code-view{background-color:var(--px-bg)}.demo-stage.is-code{background-clip:padding-box}.code-view{color:#e8e8e8;scrollbar-color:#ffffff59 #000}.code-line:hover{background:#ffffff12}.code-line__number{color:var(--px-faint)}@media (width<=1200px){.app-shell{grid-template-columns:1fr}.sidebar{box-shadow:none;border-right:0}.sidebar__brand{min-height:calc(66px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 72px 0 18px}.sidebar__nav{width:100%}.nav-group{width:min(100%,560px)}.sidebar__brand,.sidebar__foot,.nav-group{opacity:0;transition:opacity .12s,transform .12s cubic-bezier(.4,0,.2,1);transform:translateY(-10px)}.sidebar.is-open .sidebar__brand,.sidebar.is-open .sidebar__foot,.sidebar.is-open .nav-group{opacity:1;transform:translateY(0)}.sidebar.is-open .sidebar__brand{transition:opacity .22s 90ms,transform .32s cubic-bezier(.16,1,.3,1) 90ms}.sidebar.is-open .nav-group{transition:opacity .22s ease var(--menu-delay), transform .32s cubic-bezier(.16, 1, .3, 1) var(--menu-delay)}.sidebar.is-open .sidebar__foot{transition:opacity .22s .344s,transform .32s cubic-bezier(.16,1,.3,1) .344s}.mobile-menu-toggle{color:var(--px-ink)}.mobile-menu-toggle:before,.mobile-menu-toggle:after{content:none;display:none}.mobile-menu-toggle:hover,.mobile-menu-toggle:active{box-shadow:none;color:var(--px-ink);background:0 0;transform:none}.mobile-menu-toggle:focus-visible{outline:2px solid var(--px-ink);outline-offset:1px}}@media (width<=940px){.demo-tool{display:flex}}@media (width<=760px){.component-page{padding:8px 12px 24px}.component-head{min-height:74px;padding:6px 64px 10px 0}.sidebar__brand{min-height:calc(70px + env(safe-area-inset-top,0px))}.component-head h1{font-size:36px}.component-title-lockup{flex-direction:column;align-items:flex-start;gap:4px}.component-english{margin:0}.tool-row{gap:9px;min-height:42px;padding:0}.segmented-control{flex:180px}.tool-actions{margin-left:auto}}@media (width<=440px){.component-page{padding-inline:9px}.component-head h1{font-size:30px}.segmented-control{grid-template-columns:repeat(2,minmax(76px,1fr))}.segmented-control button{padding:0 9px}.command-button{padding:0 11px}}@media (prefers-reduced-motion:reduce) and (width<=1200px){.sidebar__brand,.sidebar__foot,.nav-group,.sidebar.is-open .sidebar__brand,.sidebar.is-open .sidebar__foot,.sidebar.is-open .nav-group{transition:none!important}}