*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui,sans-serif}#root{min-height:100vh}.sync-status{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.sync-status__label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#b4b4b4;font-size:16px;letter-spacing:3px;font-weight:500;pointer-events:none;z-index:2}.sync-status__ring{display:block;width:100%;height:100%;border-radius:50%;background:#373737;box-sizing:border-box;box-shadow:#ffffff14 2px 2px 4px inset,#00000080 -4px -4px 8px inset}.sync-status__ticks{position:absolute;top:0;right:0;bottom:0;left:0}.sync-status__tick{position:absolute;top:50%;left:50%;width:2px;height:10px;background:#000;box-shadow:#ffffff26 0 1px inset,#00000059 0 -1px inset;transform-origin:center center;transform:translate(-50%,-50%) rotate(calc(var(--tick-index) * 22.5deg)) translateY(-68px)}.sync-status__tick--white{background:#fff;box-shadow:#fff6 0 1px inset,#0003 0 -1px inset}.circular-btn-container{position:relative;display:inline-block}.circular-btn-container--fill,.circular-btn-container--fill .circular-btn-button{width:100%;height:100%}.circular-btn-button{position:relative;width:80px;height:80px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transform:translateY(0);transition:transform .1s ease-out}.circular-btn-bgCircle{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background-color:#2d2d2d;pointer-events:none}.circular-btn-shadowLayer{position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:50%;background-color:#373737;box-shadow:#00000080 .52px .52px .73px -.625px,#0000007a 1.32px 1.32px 1.87px -1.25px,#00000073 2.66px 2.66px 3.76px -1.875px,#0006 5.03px 5.03px 7.12px -2.5px,#00000052 10.01px 10.01px 14.15px -3.125px,#0003 22px 22px 31.11px -3.75px,#0000 0 2px 4px inset,#fff0 0 -2px 3px inset;pointer-events:none;transition:box-shadow .1s ease-out}.circular-btn-container--on .circular-btn-button{transform:translateY(1px)}.circular-btn-container--on .circular-btn-shadowLayer{box-shadow:#0000 .52px .52px .73px -.625px,#0000 1.32px 1.32px 1.87px -1.25px,#0000 2.66px 2.66px 3.76px -1.875px,#0000 5.03px 5.03px 7.12px -2.5px,#0000 10.01px 10.01px 14.15px -3.125px,#0000 22px 22px 31.11px -3.75px,#00000080 0 1px 2px inset,#ffffff1f 0 -1px 1px inset}.circular-btn-surfaceWrapper{position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:50%;pointer-events:none}.circular-btn-surface{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(100% 100% at 35.8% 29.3%,#4b4b4b,#3a3a3a 72.12%,#343434 100%,#1c1c1c 130%);box-shadow:#ffffff1f 1px 1px 2px inset,#0009 -1px -1px 2px inset,#ffffff05 4px 4px 1px inset;pointer-events:none;transition:box-shadow .1s ease-out,background .1s ease-out}.circular-btn-container--on .circular-btn-surface{box-shadow:#ffffff14 1px 1px 2px inset,#000000a6 -1px -1px 2px inset,#ffffff03 4px 4px 1px inset}.circular-btn-indicator{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;box-shadow:#0006 0 2px 4px inset,#ffffff26 0 -1px 1px inset;pointer-events:none;transition:background-color .1s ease-out,box-shadow .1s ease-out,transform .1s ease-out}.circular-btn-indicator--off{background-color:#646464}