@font-face{font-family:Inter;src:url('/assets/bureau-demo/InterVariable-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{color-scheme:light;--bg:#faf8f2;--text:#1a1a1a;--text-secondary:#6b6b6b;--edge:color-mix(in srgb,var(--text) 28%,transparent)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0e0c0a;--text:#e8e8e8;--text-secondary:#949494}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0e0c0a;--text:#e8e8e8;--text-secondary:#949494}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow:hidden}
body{background:var(--bg);color:var(--text);font:500 12px/1.6 Inter,sans-serif;-webkit-font-smoothing:antialiased}
.demo{width:100%;padding-top:16px}
.specimen{position:relative;isolation:isolate;container-type:inline-size;display:block;width:100%;height:390px;overflow:hidden;user-select:none;appearance:none;border:0;padding:0;background:transparent;color:var(--text);font:inherit;cursor:pointer;text-align:initial}
.point{position:absolute;left:var(--x);top:calc(44px + (100% - 88px)*var(--y));width:33.333333%;height:54px;display:flex;align-items:center;justify-content:center;translate:-50% -50%;filter:blur(var(--blur));opacity:var(--alpha);transition:left 800ms cubic-bezier(.22,.8,.2,1),top 800ms cubic-bezier(.22,.8,.2,1),filter 800ms ease,opacity 800ms ease;pointer-events:none}
.float{display:block;animation:drift var(--duration) ease-in-out var(--delay) infinite}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--drift),-12px) rotate(var(--tilt))}}
.specimen.is-arranged .point{left:calc((var(--col) + .5)*100%/3);top:calc(12% + var(--row)*15%);filter:blur(0);opacity:1}
.specimen.is-arranged .float{animation:none;transform:none}
.float>span{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.primary,.input,.tabs,.select,.toast,.tag,.tooltip,.stepper,.pagination{border:1px solid var(--edge);border-radius:5px;background:var(--bg);color:var(--text);min-height:32px;padding:6px 10px;gap:9px;box-shadow:0 5px 14px color-mix(in srgb,var(--text) 5%,transparent)}
.primary,.tooltip{background:var(--text);color:var(--bg)}.primary{font-weight:600}
.select{justify-content:space-between!important;gap:12px;line-height:1}.select svg{display:block;flex-shrink:0}
.input{width:128px;justify-content:space-between!important;color:var(--text-secondary)}.input small{font-size:9px}
.input-label{display:inline-flex;align-items:center;gap:6px}
.tabs{padding:3px;gap:4px}.tabs>*{padding:3px 7px;font-weight:500}.tabs b,.pagination b{background:var(--text);color:var(--bg);border-radius:3px}.pagination b{padding:2px 6px}
.badge,.tag{border:1px solid var(--edge);border-radius:4px;padding:3px 9px}
.switch{width:42px;height:24px;padding:3px;border-radius:20px;background:var(--text);justify-content:flex-end!important}.switch i{width:18px;height:18px;border-radius:50%;background:var(--bg);animation:toggle 13s ease-in-out infinite}
@keyframes toggle{0%,65%,90%,100%{transform:translateX(0)}70%,85%{transform:translateX(-18px)}}
.check{width:20px;height:20px;border-radius:4px;background:var(--text);color:var(--bg)}.radio{width:20px;height:20px;border:1px solid var(--text);border-radius:50%}.radio i{width:10px;height:10px;background:var(--text);border-radius:50%}
.checkmark,.search-icon{display:block;flex-shrink:0;overflow:visible}
.slider,.progress{position:relative;width:110px;height:4px;background:var(--edge);border-radius:4px}.slider i{position:absolute;left:60%;width:13px;height:13px;border:1px solid var(--text);border-radius:50%;background:var(--bg)}.progress i{position:absolute;left:0;width:65%;height:4px;background:var(--text);border-radius:4px}
.avatars i{width:26px;height:26px;margin-left:-6px;border:2px solid var(--bg);border-radius:50%;background:var(--text-secondary)}.avatars i:nth-child(2){opacity:.7}.avatars i:nth-child(3){opacity:.4}
.keys{gap:5px}.keys kbd{font-family:inherit;padding:3px 7px;border:1px solid var(--edge);border-bottom-width:3px;border-radius:4px;background:var(--bg)}
.skeleton{flex-direction:column;align-items:flex-start!important;gap:6px;width:100px}.skeleton i{height:5px;width:100%;border-radius:3px;background:var(--edge)}.skeleton i:nth-child(2){width:70%}.skeleton i:nth-child(3){width:85%}
button:focus-visible{outline:2px solid var(--text);outline-offset:-3px}
@container(max-width:420px){.float{zoom:.8}}
@media(max-width:420px){.specimen{height:330px}}
@media(prefers-reduced-motion:reduce){.demo *{animation:none!important;transition:none!important}}