/* SL UI matte surfaces; M3 motion tokens are inserted by the package builder. */ @font-face{font-family:'Instrument Sans';src:url('./instrument-sans-variable.woff2') format('woff2');font-weight:400 700;font-display:swap} .fb-demo{--motion-duration-short-2:100ms;--motion-duration-short-4:200ms;--motion-duration-medium-1:250ms;--motion-duration-medium-2:300ms;--motion-duration-medium-3:350ms;--motion-duration-medium-4:400ms;--motion-easing-standard:cubic-bezier(0.2,0,0,1);--motion-easing-emphasized-decelerate:cubic-bezier(0.05,0.7,0.1,1);--motion-easing-ease-in-out-gentle:cubic-bezier(0.4,0,0.2,1); --fb-ink:#222222;--fb-hover:#2e2e2e;--fb-surface:#292929;--fb-edge:#464646;--fb-text:#f6f6f6;--fb-muted:#bdbdbd;--fb-accent:#e0e0e0;--fb-danger:#efb8a6;--fb-warning:#e8d4a5;--fb-focus:#737373;--fb-outside:#5e5e5e;width:320px;max-width:100%;font:14px/1.45 'Instrument Sans',sans-serif;color:var(--fb-text);font-synthesis:none;-webkit-font-smoothing:antialiased;position:relative;isolation:isolate;outline:none} .fb-demo,.fb-demo *,.fb-demo *::before,.fb-demo *::after{box-sizing:border-box} .fb-demo button,.fb-demo input{font:inherit}.fb-demo button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}.fb-demo button:focus-visible,.fb-demo input:focus-visible{outline:2px solid var(--fb-focus);outline-offset:4px}.fb-card button:focus-visible{outline-color:var(--fb-accent)}.fb-demo [hidden]{display:none!important} .fb-scene{height:244px;display:flex;align-items:center;justify-content:center;position:relative}.fb-card{width:100%;padding:22px;background:var(--fb-ink);border:1px solid #ffffff0d;border-radius:17px;box-shadow:inset 0 1px #ffffff0c,0 3px 7px #00000010;color:var(--fb-text)} .fb-demo svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.fb-card h3,.fb-card p{margin:0}.fb-card h3{font-size:15px;font-weight:550;letter-spacing:-.02em}.fb-card p{font-size:12px;color:var(--fb-muted);line-height:1.6;margin-top:5px;overflow-wrap:anywhere}.fb-overline{font-size:10px;letter-spacing:.075em;color:var(--fb-muted);text-transform:uppercase}.fb-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.fb-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:#ffffff07;border:1px solid #ffffff13;color:var(--fb-accent)} .fb-message{display:flex;align-items:center;gap:12px;padding:17px 14px 17px 16px}.fb-copy{min-width:0;flex:1}.fb-copy h3{font-size:14px}.fb-copy p{font-size:11px;margin-top:3px}.fb-close{width:28px;height:28px;display:grid;place-items:center;flex:none;padding:5px;border:0;border-radius:8px;background:transparent;color:var(--fb-muted);transition:background var(--motion-duration-short-4) ease,color var(--motion-duration-short-4) ease}.fb-close svg{width:16px;height:16px}.fb-close:hover{background:#ffffff0d;color:var(--fb-text)} .fb-reveal{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--motion-duration-medium-1) ease,transform var(--motion-duration-medium-2) var(--motion-easing-emphasized-decelerate),visibility 0s} .fb-reveal[data-visible="false"]{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity var(--motion-duration-short-4) ease,transform var(--motion-duration-medium-1) var(--motion-easing-ease-in-out-gentle),visibility 0s var(--motion-duration-medium-1)} .fb-demo[data-tone="error"] .fb-icon{color:var(--fb-danger)}.fb-demo[data-tone="info"] .fb-icon{color:#bacdd9} .fb-tools{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;min-height:40px;margin-top:14px}.fb-button{border:0;border-radius:11px;padding:10px 16px;min-height:38px;background:var(--fb-ink);color:var(--fb-text);font-size:12px!important;font-weight:550!important;box-shadow:inset 0 1px #ffffff12,0 1px 2px #0000000d;transition:transform var(--motion-duration-medium-2) var(--motion-easing-emphasized-decelerate),background-color var(--motion-duration-short-4) ease;white-space:nowrap} .fb-button:hover:not(:disabled){background:var(--fb-hover);transform:translateY(-1px)}.fb-button:active:not(:disabled){transform:translateY(1px) scale(.98);transition-duration:var(--motion-duration-short-2)}.fb-button:disabled{opacity:.55;cursor:default}.fb-button--quiet{background:#e5e5e5;color:#313131;box-shadow:none}.fb-button--quiet:hover:not(:disabled){background:#dbdbdb}.fb-button--light{background:var(--fb-accent);color:var(--fb-ink);box-shadow:none}.fb-button--light:hover:not(:disabled){background:#ebebeb}.fb-card .fb-button{padding:8px 12px;min-height:32px;font-size:11px!important}.fb-card .fb-button[aria-disabled="true"]{opacity:.6;cursor:wait;transform:none} .fb-segments{display:flex;gap:2px;padding:3px;border:1px solid #cdcdcd;border-radius:10px;margin:0 auto 6px;width:max-content;max-width:100%}.fb-segments button{border:0;background:transparent;color:var(--fb-outside);padding:5px 10px;border-radius:7px;font-size:11px;transition:background var(--motion-duration-short-4) ease}.fb-segments button[aria-pressed="true"]{background:#e1e1e1;color:#303030}.fb-caption{min-height:30px;margin:10px 3px 0;color:var(--fb-outside);text-align:center;font-size:11px;line-height:1.5}.fb-option{color:var(--fb-outside);font-size:11px;display:flex;justify-content:center;align-items:center;gap:6px;margin-top:10px}.fb-option input{accent-color:#525252;width:13px;height:13px;margin:0}.fb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .fb-stack{width:100%;display:flex;flex-direction:column;gap:0;max-height:238px}.fb-stack-item{display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);transition:grid-template-rows var(--motion-duration-medium-2) var(--motion-easing-standard),opacity var(--motion-duration-medium-1) ease,transform var(--motion-duration-medium-2) var(--motion-easing-emphasized-decelerate)}.fb-stack-item[data-visible="false"]{grid-template-rows:0fr;opacity:0;transform:translateY(8px);pointer-events:none}.fb-stack-clip{overflow:hidden;min-height:0}.fb-stack .fb-card{margin-bottom:7px;padding:12px;border-radius:13px;box-shadow:inset 0 1px #ffffff0c,0 2px 3px #00000008}.fb-stack .fb-icon{width:29px;height:29px;border-radius:9px}.fb-stack .fb-icon svg{width:18px;height:18px}.fb-stack h3{font-size:12px}.fb-stack p{font-size:10px}.fb-stack .fb-close{width:24px;height:24px}.fb-queue{font-size:11px;color:var(--fb-outside);text-align:center;height:16px;margin:0} .fb-undo .fb-message{flex-wrap:wrap;gap:10px}.fb-undo .fb-copy{min-width:140px}.fb-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.fb-meta-row{display:flex;justify-content:space-between;margin-top:13px;font-size:11px;color:var(--fb-muted)}.fb-divider{height:1px;background:#ffffff10;margin:17px 0} .fb-collapse{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--motion-duration-medium-3) var(--motion-easing-ease-in-out-gentle),opacity var(--motion-duration-medium-1) ease}.fb-collapse[data-visible="false"]{grid-template-rows:0fr;opacity:0;pointer-events:none}.fb-collapse>div{min-height:0;overflow:hidden}.fb-alert{margin-top:16px;padding:12px;border:1px solid #e8d4a52d;background:#e8d4a508;border-radius:11px;display:flex;align-items:flex-start;gap:9px;color:var(--fb-warning)}.fb-alert>.fb-copy p{color:#d1c7ac;font-size:11px}.fb-alert h3{color:var(--fb-warning);font-size:12px}.fb-alert>svg{width:18px;height:18px;margin-top:1px}.fb-pill{display:inline-flex;gap:6px;align-items:center;font-size:10px;color:var(--fb-accent);padding:4px 8px;background:#e0e0e00a;border:1px solid #e0e0e01a;border-radius:6px}.fb-dot{width:5px;height:5px;border-radius:50%;background:currentColor} .fb-banner .fb-card-head{margin:0}.fb-banner .fb-icon{color:var(--fb-warning)}.fb-demo[data-state="complete"] .fb-banner .fb-icon{color:var(--fb-accent)}.fb-banner .fb-card p{margin-top:14px}.fb-banner-line{height:3px;background:#ffffff0a;border-radius:4px;margin-top:20px;overflow:hidden}.fb-banner-line::after{content:'';display:block;height:100%;width:100%;background:var(--fb-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-duration-medium-4) var(--motion-easing-standard)}[data-state="complete"] .fb-banner-line::after{transform:scaleX(1)} .fb-progress-card h3{font-size:15px}.fb-value{font-variant-numeric:tabular-nums;font-size:13px;color:var(--fb-accent)}.fb-track{height:6px;overflow:hidden;border-radius:8px;background:#5a5a5a;position:relative;margin-top:20px}.fb-fill{height:100%;width:100%;background:var(--fb-accent);transform:scaleX(0);transform-origin:left;border-radius:inherit;will-change:transform}.fb-track[data-mode="unknown"] .fb-fill{width:35%;transform:translateX(-110%);animation:fb-travel 1600ms var(--motion-easing-ease-in-out-gentle) infinite}.fb-progress-foot{display:flex;gap:8px;align-items:center;color:var(--fb-muted);font-size:10px;margin-top:16px;min-height:16px}.fb-progress-foot svg{width:14px;height:14px} .fb-ring-wrap{width:126px;height:126px;margin:16px auto;position:relative}.fb-ring-wrap>.fb-ring{width:126px;height:126px;stroke-width:5;transform:rotate(-90deg)}.fb-ring-track{stroke:#505050}.fb-ring-value{stroke:var(--fb-accent);stroke-dasharray:100;stroke-dashoffset:100}.fb-ring-number{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:3px;font-variant-numeric:tabular-nums;letter-spacing:-.05em;font-size:32px;font-weight:500}.fb-ring-number small{font-size:13px;letter-spacing:0;color:var(--fb-muted);margin-top:11px}.fb-circle-card{padding:19px 22px;text-align:center}.fb-circle-card .fb-card-head{margin-bottom:0;text-align:left}.fb-circle-card .fb-progress-foot{justify-content:center;margin-top:0}.fb-ring-wrap[data-mode="unknown"] .fb-ring{animation:fb-spin 2000ms linear infinite}.fb-ring-wrap[data-mode="unknown"] .fb-ring-value{stroke-dashoffset:72!important}.fb-ring-wrap[data-mode="unknown"] .fb-ring-number{font-size:14px;letter-spacing:0} .fb-skeleton-card{height:190px;position:relative;padding:21px;overflow:hidden}.fb-skeleton,.fb-loaded{position:absolute;inset:21px;transition:opacity var(--motion-duration-medium-2) ease,transform var(--motion-duration-medium-3) var(--motion-easing-emphasized-decelerate)}.fb-loaded{opacity:0;transform:translateY(6px)}.fb-demo[data-state="complete"] .fb-loaded{opacity:1;transform:none}.fb-demo[data-state="complete"] .fb-skeleton{opacity:0}.fb-skel-line{height:8px;border-radius:4px;background:#484848;position:relative;overflow:hidden}.fb-skel-line::after,.fb-skel-avatar::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent,#d3d3d30d,transparent);transform:translateX(-100%);animation:fb-shimmer 1700ms ease infinite}.fb-skel-avatar{width:34px;height:34px;border-radius:10px;background:#484848;position:relative;overflow:hidden;flex:none}.fb-skel-top{display:flex;gap:11px;align-items:center;margin-bottom:22px}.fb-skel-title{flex:1;display:grid;gap:8px}.fb-skel-body{display:grid;gap:11px}.fb-skel-bottom{display:flex;gap:8px;margin-top:22px}.fb-skel-bottom .fb-skel-line{width:42px;height:16px}.fb-loaded-top{display:flex;gap:11px;align-items:center;margin-bottom:18px}.fb-loaded-top h3{font-size:13px}.fb-loaded-top p{font-size:10px;margin-top:2px}.fb-loaded>p{font-size:12px}.fb-loaded .fb-pill{margin-top:14px} .fb-loader-card{text-align:center;padding:28px 20px}.fb-dots{display:flex;justify-content:center;align-items:center;gap:8px;height:35px;margin-bottom:16px}.fb-dots i{display:block;width:9px;height:9px;border-radius:50%;background:var(--fb-accent);opacity:.5}.fb-demo[data-state="pending"] .fb-dots i{animation:fb-breathe 1400ms ease-in-out infinite}.fb-demo[data-state="pending"] .fb-dots i:nth-child(2){animation-delay:140ms}.fb-demo[data-state="pending"] .fb-dots i:nth-child(3){animation-delay:280ms}.fb-loader-card p{font-size:11px}.fb-retry-card>.fb-icon{width:38px;height:38px;margin-bottom:16px;color:var(--fb-danger)}.fb-retry-card .fb-row{margin-top:18px}.fb-retry-card .fb-row small{color:var(--fb-muted);font-size:10px}.fb-demo[data-state="complete"] .fb-retry-card>.fb-icon{color:var(--fb-accent)} .fb-demo[data-motion-paused="true"] *,.fb-demo[data-motion-paused="true"] *::after{animation-play-state:paused!important} @keyframes fb-travel{from{transform:translateX(-110%)}to{transform:translateX(390%)}}@keyframes fb-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes fb-shimmer{to{transform:translateX(100%)}}@keyframes fb-breathe{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}} @media(prefers-reduced-motion:reduce){.fb-demo *,.fb-demo *::before,.fb-demo *::after{transition:none!important;animation:none!important}.fb-button:hover:not(:disabled),.fb-button:active:not(:disabled),.fb-reveal,.fb-stack-item,.fb-loaded{transform:none!important}.fb-track[data-mode="unknown"] .fb-fill{transform:translateX(90%)}.fb-skel-line::after,.fb-skel-avatar::after{display:none}} @media(forced-colors:active){.fb-card,.fb-button,.fb-icon,.fb-alert,.fb-segments{border:1px solid CanvasText}.fb-track,.fb-ring-track{background:Canvas;stroke:GrayText}.fb-fill{background:Highlight}.fb-ring-value{stroke:Highlight}.fb-demo button:focus-visible{outline-color:Highlight}}