.glass-switch-demo,.glass-tabbar-demo{--hairline:1px;--gray-6:#d7dae0;--gray-10:#585d65;--gray-12:#14161a}.glass-switch-demo__stage{background:#f8f9fb;place-items:center;min-height:244px;display:grid}.glass-switch-demo__control{max-width:70%}.glass-switch-demo__caption{justify-content:space-between;align-items:center;gap:24px;padding:20px 28px 22px;display:flex}.glass-switch-demo__caption>div{gap:5px;display:grid}.glass-switch-demo__name{color:var(--gray-12);font-size:14px;font-weight:600}.glass-switch-demo__detail,.glass-switch-demo__state{color:var(--gray-10);font-size:13px;line-height:1.4}.glass-switch-demo__state{font-variant-numeric:tabular-nums;text-align:right;min-width:2ch}.glass-collection .liquid-glass-study{border:0;border-radius:0}
.glass-tabbar-demo{min-width:0}.glass-tabbar__toolbar{color:#6e6e73;background:#f8f9fb;justify-content:space-between;align-items:center;gap:16px;padding:8px 24px;font-size:12px;line-height:24px;display:flex}.glass-tabbar__toolbar button{color:#1c1c1e;border-radius:16px;align-items:center;gap:8px;padding:8px;font-weight:500;display:flex}.glass-tabbar__toolbar button:hover{background:#e8e9ed}.glass-tabbar-demo[data-expanded=true]{z-index:10000;width:100%;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);color:#1c1c1e;background:#f8f9fb;flex-direction:column;display:flex;position:fixed;inset:0}.glass-tabbar-demo[data-expanded=true] .glass-tabbar__stage{flex:1;height:auto;min-height:120px}.glass-tabbar-demo[data-expanded=true] .glass-switch-demo__caption{display:none}.glass-tabbar-demo>.glass-switch-demo__caption>div{min-width:0}.glass-tabbar-demo>.glass-switch-demo__caption{align-items:flex-start}.glass-tabbar-demo>.glass-switch-demo__caption .glass-switch-demo__state{flex:none}.glass-tabbar__stage{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-x;background:#f8f9fb;height:320px;position:relative;overflow:hidden}.glass-tabbar__stage:active{cursor:grabbing}.glass-tabbar__stage:focus-visible{outline-offset:-3px;outline:2px solid #3366ed}.glass-tabbar__scroll-indicator{z-index:1;pointer-events:none;opacity:0;background:#3c3c4375;border-radius:999px;width:3px;transition:opacity .18s ease-out;position:absolute;top:0;right:4px;box-shadow:0 0 0 .5px #ffffff59}@media (prefers-reduced-motion:reduce){.glass-tabbar__scroll-indicator{transition:none}}.glass-tabbar__controls{background:#f8f9fb;border-top:1px solid #0000000f;flex-wrap:wrap;align-items:center;gap:8px 32px;padding:8px 24px;display:flex}.glass-tabbar__control{align-items:center;gap:16px;display:flex}.glass-tabbar__control--range{flex:280px;gap:0;min-width:0}.glass-tabbar__control--range .glass-slider{flex:1;margin-inline:24px}@media (max-width:580px){.glass-tabbar__controls{grid-template-columns:minmax(0,1fr);gap:8px;padding:16px 24px;display:grid}.glass-tabbar__control--range{grid-template-columns:1fr 1fr;gap:0;width:100%;display:grid}.glass-tabbar__control--range .glass-slider{grid-area:2/1/auto/-1;width:100%;margin-inline:0}.glass-tabbar__control--range>span:last-child{text-align:right;grid-area:1/2}.glass-tabbar__toolbar{padding-inline:16px}.glass-tabbar-demo>.glass-switch-demo__caption{gap:8px}.glass-tabbar-demo>.glass-switch-demo__caption .glass-switch-demo__detail{overflow-wrap:anywhere}}.glass-tabbar__control-name{z-index:1;color:#6e6e73;font-size:12px;font-weight:500;position:relative}.glass-tabbar__controls .glass-tabbar__switch{width:80px}.glass-tabbar{--h:56px;cursor:default;gap:calc(var(--h) * .3);height:var(--h);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:flex;position:absolute}.glass-tabbar__canvas{pointer-events:none;position:absolute;top:0;left:0}.glass-tabbar__tabs{width:calc(var(--h) * 5.34);padding:0 calc(var(--h) * .07);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.glass-tabbar__tab,.glass-tabbar__search{color:#0000;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0;position:relative;overflow:hidden}.glass-tabbar__tab{margin-block:calc(var(--h) * .07)}.glass-tabbar__search{width:var(--h)}.glass-tabbar__tab:focus-visible,.glass-tabbar__search:focus-visible{outline-offset:2px;outline:2px solid #3366ed}
.glass-sheet{padding:24px 16px}.glass-sheet__device{background:#0b0b0c;padding:8px;box-shadow:0 0 0 1px #0000001f,0 16px 40px #00000024}.glass-sheet__screen{isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.glass-sheet__canvas,.glass-sheet__backdrop{display:block;position:absolute;inset:0}.glass-sheet__backdrop[hidden],.glass-sheet__ui[hidden]{display:none}.glass-sheet__ui{cursor:grab;will-change:transform;position:absolute;top:0;left:0}.glass-sheet__ui:active{cursor:grabbing}.glass-sheet__present,.glass-sheet__grabber,.glass-sheet__done,.glass-sheet__row{color:#0000;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;font-size:1px;position:absolute;overflow:hidden}.glass-sheet__grabber{cursor:grab;border-radius:12px;top:0;left:30%;right:30%}.glass-sheet__done{border-radius:50%}.glass-sheet__present{border-radius:8px}.glass-sheet__row{border-radius:16px}.glass-sheet__present:focus-visible,.glass-sheet__grabber:focus-visible,.glass-sheet__done:focus-visible,.glass-sheet__row:focus-visible{outline-offset:-2px;outline:2px solid #3366ed}
.title-animation{justify-content:center;align-items:center;width:100%;margin-top:10px;display:flex;position:relative}.role-measure{visibility:hidden;pointer-events:none;white-space:nowrap;font-size:14px;line-height:20px;position:absolute}.role-pill{white-space:nowrap;color:#737373;background:#fff;border:1px solid #e5e5e5;border-radius:10px;justify-content:center;align-items:center;height:28px;padding-block:4px;font-size:14px;line-height:20px;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 3px #0802040a,1px 3px 2px #0607080a,10px 10px 10px #0432020a,1px 1px 1px #6464640a}.role-word{position:absolute}.dark .role-pill{color:#a39d93;background:#1f1d1b;border-color:#2f2c28;box-shadow:0 2px 3px #0000004d}