html,body{margin:0;padding:0;height:100vh;width:100vw;overflow:hidden}body{min-width:320px;font-family:system-ui,Arial,sans-serif;background:var(--ui-theme-bg-body, #fff);color:var(--ui-theme-text-primary, #37465a);transition:background-color .3s ease,color .3s ease}h1{margin:0;color:var(--ui-theme-text-primary, inherit)}h2{margin:0 0 18px;color:var(--ui-theme-primary, inherit)}p{color:var(--ui-theme-text-secondary, #666);margin:0;padding:0}.segment-control{display:inline-flex;justify-content:flex-end;border-radius:8px;border:2px solid var(--ui-theme-primary, #1f8fe6);overflow:hidden;width:fit-content;max-width:100%}.segment-control__button{position:relative;border-radius:0}.segment-control__button:not(:last-child):after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:60%;width:1px;background-color:var(--ui-theme-primary, #1f8fe6);pointer-events:none}.demo-section{width:100%;display:flex;flex-direction:column;gap:15px;min-height:200px;margin:15px 0}.demo-section__row{display:flex;flex-direction:row;align-items:end;gap:35px;width:100%}.demo-section__row--block{display:inline-flex;align-items:flex-end;gap:15px;width:100%}.demo-section__row>*{flex:1}.demo-prefix,.demo-icon{position:absolute;padding:15px;font-weight:900}.demo-input--center{text-align:center}.demo-input--right{text-align:right}.demo-input--with-prefix{--ui-control-padding: 0 16px 0 45px}.demo-input--underlined{--ui-control-border: transparent;--ui-control-border-focus: transparent;--ui-control-radius: 0;--ui-control-background: transparent;--ui-control-bg-hover: transparent;border-bottom:1px solid black}.demo-input--underlined:focus{border-bottom-color:var(--ui-theme-selected)}.demo-toggle{position:absolute;right:4px}.demo-toggle--hidden{display:none}.theme-fan{position:relative;height:60px;width:100px;display:flex;align-items:center;justify-content:center;margin:0 1rem}.theme-fan__palette{position:relative;height:100%;width:100%;transition:all .3s cubic-bezier(.4,0,.2,1)}.theme-fan__color{position:absolute;left:50%;top:5px;transform-origin:16px -8px;width:28px;height:55px;border-radius:0 0 14px 14px;cursor:pointer;transition:all .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 3px 6px #0003}.theme-fan__color:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 40%,transparent 60%,rgba(0,0,0,.1) 100%);border-radius:0 0 14px 14px;pointer-events:none}.theme-fan__color:nth-child(1){transform:translate(-50%) rotate(-40deg);z-index:1}.theme-fan__color:nth-child(2){transform:translate(-50%) rotate(-20deg);z-index:2}.theme-fan__color:nth-child(3){transform:translate(-50%) rotate(0);z-index:3}.theme-fan__color:nth-child(4){transform:translate(-50%) rotate(20deg);z-index:2}.theme-fan__color:nth-child(5){transform:translate(-50%) rotate(40deg);z-index:1}.theme-fan__color:hover{z-index:10;filter:brightness(1.1)}.theme-fan:hover .theme-fan__color:nth-child(1){transform:translate(-50%) rotate(-60deg) scale(1.1)}.theme-fan:hover .theme-fan__color:nth-child(2){transform:translate(-50%) rotate(-30deg) scale(1.1)}.theme-fan:hover .theme-fan__color:nth-child(3){transform:translate(-50%) rotate(0) scale(1.1)}.theme-fan:hover .theme-fan__color:nth-child(4){transform:translate(-50%) rotate(30deg) scale(1.1)}.theme-fan:hover .theme-fan__color:nth-child(5){transform:translate(-50%) rotate(60deg) scale(1.1)}.theme-fan__color--active{outline:2px solid white;outline-offset:2px;box-shadow:0 0 12px #ffffff80;z-index:5!important}.theme-fan__rivet{position:absolute;left:50%;top:-4px;transform:translate(-50%);width:20px;height:20px;background:radial-gradient(circle at 35% 35%,#f0f4f8,#b0bec5 60%,#78909c);border-radius:50%;box-shadow:0 2px 5px #0000004d;z-index:10;border:1px solid rgba(255,255,255,.6)}.theme-fan__rivet-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:radial-gradient(circle at 30% 30%,#90a4ae,#607d8b 50%,#455a64);border-radius:50%}.theme-fan__rivet-inner:after,.theme-fan__rivet-inner:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:6px;background:#0006}.theme-fan__rivet-inner:before{transform:translate(-50%,-50%) rotate(90deg)}