.demo-gauge{--g-ease:cubic-bezier(.23, 1, .32, 1);--g-red:#ff453a;--g-page:#121214;--g-tile:#19191c;--g-hair:#ffffff12;--g-focus:#0a84fff2;color:#fff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#17171a;width:100%;height:540px;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,system-ui,sans-serif;position:relative;overflow:hidden;container-type:inline-size}.demo-gauge *,.demo-gauge :before,.demo-gauge :after{box-sizing:border-box}.demo-gauge button{font:inherit;color:inherit;cursor:default;-webkit-tap-highlight-color:transparent;background:0 0;border:0;margin:0;padding:0}.demo-gauge button:focus{outline:none}.demo-gauge button:focus-visible{outline:2px solid var(--g-focus);outline-offset:2px}.demo-gauge .g-num{font-variant-numeric:tabular-nums;font-family:ui-rounded,SF Pro Rounded,-apple-system,BlinkMacSystemFont,system-ui,sans-serif}.demo-gauge .g-menubar{color:#ffffffeb;z-index:5;background:#00000052;align-items:center;height:24px;padding:0 10px;font-size:13px;display:flex;position:absolute;inset:0 0 auto}.demo-gauge .g-menubar-left{white-space:nowrap;align-items:center;gap:16px;display:flex}.demo-gauge .g-menubar-left b{font-weight:600}.demo-gauge .g-menubar-right{white-space:nowrap;align-items:center;gap:12px;margin-left:auto;display:flex}.demo-gauge .g-menubar svg.g-sys{width:16px;height:16px;display:block}.demo-gauge .g-status{border-radius:4px;align-items:center;gap:5px;height:22px;padding:0 6px;font-size:12px;font-weight:500;display:flex;position:relative}.demo-gauge .g-status:before{content:"";position:absolute;inset:-11px -6px}.demo-gauge .g-status[aria-expanded=true]{background:#ffffff2e}@container (max-width:460px){.demo-gauge .g-hide-narrow{display:none}}.demo-gauge .g-panel{pointer-events:none;position:absolute;inset:0}.demo-gauge .g-strip{pointer-events:auto;width:56px;position:absolute;right:0}.demo-gauge .g-strip-bg{position:absolute;inset:0;overflow:visible}.demo-gauge .g-rings{flex-direction:column;align-items:center;gap:18px;padding-top:56px;display:flex;position:absolute;inset:0;transform:translate(2px)}.demo-gauge .g-ring-btn{border-radius:10px;flex-direction:column;align-items:center;gap:4px;width:56px;height:53px;display:flex;position:relative}.demo-gauge .g-ring{width:36px;height:36px;transition:transform .18s var(--g-ease);flex:none;position:relative}.demo-gauge .g-ring:before{content:"";opacity:0;width:48px;height:48px;transition:opacity .18s var(--g-ease);background:#ffffff0f;border-radius:50%;margin:-24px 0 0 -24px;position:absolute;top:50%;left:50%}.demo-gauge .g-ring[data-hovered=true]{transform:scale(1.06)}.demo-gauge .g-ring[data-hovered=true]:before{opacity:1}.demo-gauge .g-ring svg.g-arcs{position:absolute;inset:0;overflow:visible}.demo-gauge .g-arc,.demo-gauge .g-track{transition:stroke-dasharray .5s var(--g-ease), stroke-dashoffset .5s var(--g-ease), stroke .18s var(--g-ease)}.demo-gauge .g-glyph{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.demo-gauge .g-mask{-webkit-mask:var(--g-mask) center / contain no-repeat;-webkit-mask:var(--g-mask) center / contain no-repeat;mask:var(--g-mask) center / contain no-repeat}.demo-gauge .g-ring-label{color:#ffffffd9;font-size:11px;font-weight:600;line-height:13px;position:relative}.demo-gauge .g-badge{margin-right:2px;font-size:9px;font-weight:700;line-height:13px;position:absolute;top:0;right:100%}.demo-gauge .g-edge{pointer-events:auto;width:10px;position:absolute;right:0}@media (pointer:coarse){.demo-gauge .g-edge{width:44px}}.demo-gauge .g-card-wrap{pointer-events:none;padding-right:4px;position:absolute;top:0;right:56px}.demo-gauge .g-card-wrap[data-open=true]{pointer-events:auto}.demo-gauge .g-card{padding:16px 24px 16px 16px;position:relative}.demo-gauge .g-card-bg{position:absolute;inset:0;overflow:visible}.demo-gauge .g-card-body{flex-direction:column;gap:14px;display:flex;position:relative}.demo-gauge .g-card-head{align-items:center;gap:7px;display:flex}.demo-gauge .g-card-name{font-size:13px;font-weight:600;line-height:16px}.demo-gauge .g-card-sub{color:#ffffff73;margin-top:1px;font-size:10px;line-height:12px}.demo-gauge .g-win{flex-direction:column;gap:6px;display:flex}.demo-gauge .g-win-top{align-items:baseline;gap:8px;display:flex}.demo-gauge .g-win-label{color:#ffffffd9;white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:500;overflow:hidden}.demo-gauge .g-win-reset{color:#ffffff73;white-space:nowrap;margin-left:auto;font-size:10px}.demo-gauge .g-bar{background:#ffffff1a;border-radius:2px;height:4px;position:relative;overflow:hidden}.demo-gauge .g-bar i{transition:width .5s var(--g-ease), background-color .18s var(--g-ease);border-radius:2px;position:absolute;inset:0 auto 0 0}.demo-gauge .g-win-pct{color:#ffffff8c;font-size:10px}.demo-gauge .g-menu{background:var(--g-page);z-index:6;transform-origin:100% 0;border-radius:18px;flex-direction:column;gap:6px;width:min(300px,100% - 16px);padding:6px;display:flex;position:absolute;top:30px;right:8px;box-shadow:0 0 0 1px #ffffff14,0 18px 50px #0000008c}.demo-gauge .g-tile{background:var(--g-tile);box-shadow:inset 0 0 0 1px var(--g-hair);border-radius:12px}.demo-gauge .g-menu-head{align-items:center;gap:9px;padding:11px 12px;display:flex}.demo-gauge .g-menu-head b{font-size:13px;font-weight:600}.demo-gauge .g-menu-head span{color:#ffffff59;margin-left:auto;font-size:11px}.demo-gauge .g-rows{flex-direction:column;gap:4px;padding:6px;display:flex}.demo-gauge .g-row{text-align:left;width:100%;min-height:44px;transition:opacity .18s var(--g-ease), background-color .1s ease-out;background:#ffffff0d;border-radius:6px;align-items:center;gap:10px;padding:9px 10px;display:flex}.demo-gauge .g-row[data-off=true]{opacity:.42}@media (hover:hover){.demo-gauge .g-row:hover{background:#ffffff14}}.demo-gauge .g-row-text{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.demo-gauge .g-row-title{white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;overflow:hidden}.demo-gauge .g-row-sub{color:#ffffff59;font-size:10px}.demo-gauge .g-row-num{color:#ffffffe6;font-size:12px;font-weight:600}.demo-gauge .g-row svg.g-eye{flex:none;width:13px;height:13px}.demo-gauge .g-actions{flex-direction:column;gap:2px;padding:6px;display:flex}.demo-gauge .g-action{color:#ffffffd9;text-align:left;border-radius:6px;align-items:center;gap:9px;width:100%;min-height:44px;padding:7px 10px;font-size:12px;transition:background-color .1s ease-out;display:flex}@media (hover:hover){.demo-gauge .g-action:hover{background:#ffffff12}}.demo-gauge .g-action:active{background:#ffffff1f}.demo-gauge .g-action svg{color:#ffffff73;flex:none;width:14px;height:14px}@media (prefers-reduced-motion:reduce){.demo-gauge *,.demo-gauge :before{transition:none!important}}