/* Geometry and hierarchy follow TokenClock's macOS views; native system glass is approximated in CSS. */
:root{--native-blue:#007aff}body{background:#f5f5f7;color:#242426}.page-header{height:66px}.demo-heading{padding:24px 2px 23px}.heading-description{color:#777}.sample-badge{background:#f0f0f0;color:#777;border-color:#ddd}.simulate-button{background:#343438!important;border-color:#343438}.simulate-button:hover{background:#505054!important}.demo-desktop{--dial-bg:rgb(245 246 248 / var(--glass-alpha));--dial-ink:#131316;--dial-muted:#3b3b3f;--hand-hour:#29292e;--hand-minute:#343439;--hand-second:#ff9d28;--panel-bg:#eef0f0af;--panel-ink:#27272b;--panel-muted:#626267;--panel-line:#22222220;--panel-hover:#ffffff25;--panel-active:#00000015;border:1px solid #0002;background:#657365;border-radius:12px;box-shadow:0 12px 30px #0001;min-height:770px}.native-wallpaper{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1;pointer-events:none}.clock-widget{max-width:calc(100% - 24px)}.clock-surface{border:1px solid #fff9;background:radial-gradient(ellipse at 16% 12%,#ffffff70,transparent 38%),linear-gradient(130deg,#ffffff38,#ffffff0a 55%,#ffffff50),var(--dial-bg);backdrop-filter:blur(5px) saturate(110%);-webkit-backdrop-filter:blur(5px) saturate(110%);box-shadow:inset 0 1px 1px #ffffffe8,inset 0 -1px 1px #12121b60,0 7px 19px #0003;outline-offset:5px}.clock-surface:before{inset:1px;border:.7px solid #18181f58;border-top-color:#fff9;border-right-color:#fff9}.clock-surface:after{inset:2px;box-shadow:inset 5px 0 7px #ffffff21,inset -5px -3px 8px #ffffff29;background:linear-gradient(105deg,#fff4,transparent 12%,transparent 82%,#fff3)}.clock-surface:hover{box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #12121b60,0 7px 20px #0004}.clock-numbers,.clock-numbers text:first-child{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16.25px;font-weight:500;fill:var(--dial-ink)}#clock-ticks line{opacity:1}.clock-information{font-family:-apple-system,BlinkMacSystemFont,'Demo Sans',sans-serif}#clock-date{font-size:13.75px;font-weight:500;fill:var(--dial-muted)}#clock-weather{font-size:16.25px;font-weight:400}.clock-today-label{font-size:11.25px}.clock-total{font-family:ui-rounded,'SF Pro Rounded',-apple-system,BlinkMacSystemFont,sans-serif;font-size:25px;font-weight:700;letter-spacing:0}.clock-messages{font-size:12.5px}.clock-tool-label{font-family:ui-rounded,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16.25px;font-weight:600}.hour-hand path{stroke-width:5.625}.minute-hand path{stroke-width:3.75}.second-hand path{stroke-width:1.875}.clock-menu-trigger{opacity:0;right:-27px;top:3px;background:#f6f6f6d9;color:#555;border:1px solid #bbb7;width:25px;height:25px;transition:opacity .2s}.clock-widget:hover .clock-menu-trigger,.clock-menu-trigger:focus-visible{opacity:1}.clock-quota-hit{left:74%;top:42%;width:15%;height:15%}#clock-quota-number{font-size:13px}#clock-quota-name{display:none}.quota-track{stroke-width:3.5}.quota-five{stroke-width:3.5;stroke:#419fc2}.quota-week{stroke-width:2.8;stroke:#8474bc}
.demo-desktop[data-theme=classic]{--dial-bg:#f8f8faee;--dial-ink:#28282c;--dial-muted:#54545a;--hand-hour:#d42121;--hand-minute:#ef3333;--hand-second:#e33}.demo-desktop[data-theme=midnight]{--dial-bg:#1b2838e8;--dial-ink:#99b7d9;--dial-muted:#98b8dd;--hand-hour:#28c6db;--hand-minute:#28c6db;--hand-second:#addfff;--panel-bg:#1b2838c9;--panel-ink:#e8edf5;--panel-muted:#c2cbd9;--panel-line:#ffffff30;--panel-hover:#ffffff13;--panel-active:#ffffff20}.demo-desktop[data-theme=sky]{--dial-bg:#87beebd9;--dial-ink:#255679;--dial-muted:#315f7e;--hand-hour:#fff1ba;--hand-minute:#fff1ba;--hand-second:white}.demo-desktop[data-theme=luxe]{--dial-bg:#1a1a2ee8;--dial-ink:#d2ad44;--dial-muted:#d2b967;--hand-hour:#ffd550;--hand-minute:#ffd550;--hand-second:#d99d22;--panel-bg:#262638db;--panel-ink:#eee1b6;--panel-muted:#ccbc88;--panel-line:#d2ad4430;--panel-active:#d2ad4419}.demo-desktop[data-theme=gufeng]{--dial-bg:#ece2cfed;--dial-ink:#634128;--dial-muted:#77614b;--hand-hour:#634128;--hand-minute:#634128;--hand-second:#b6412e;--panel-bg:#ece2cfcc;--panel-ink:#473321;--panel-muted:#766553}.demo-desktop[data-theme=railgun]{--dial-bg:#eae5daed;--dial-ink:#926849;--dial-muted:#926f57;--hand-hour:#d08e8e;--hand-minute:#d08e8e;--hand-second:#c36853}.demo-desktop[data-theme=glacier]{--dial-bg:#e3f7ff70;--dial-ink:#26353c;--dial-muted:#426070;--hand-hour:#273d49;--hand-minute:#426575;--hand-second:#08a5cb}.high-contrast{--panel-ink:#fff!important;--panel-muted:#fff9!important;--panel-line:#fff3!important;--panel-bg:#202126bd!important}
.usage-popover{border-radius:12px;display:flex;flex-direction:column;overflow:hidden;border:1px solid #16161b30;background:var(--panel-bg);box-shadow:0 5px 15px #0002,inset 0 1px #ffffff8a;backdrop-filter:blur(24px) saturate(120%);-webkit-backdrop-filter:blur(24px) saturate(120%);font-family:-apple-system,BlinkMacSystemFont,'Demo Sans',sans-serif}.native-forecast{padding:8px 12px 7px;flex-shrink:0}.forecast-heading{display:flex;align-items:center;justify-content:space-between;font-size:12px;line-height:1.2}.forecast-heading>span:last-child{font-size:10px;color:var(--panel-muted)}.forecast-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-size:11px;line-height:1.2;margin-top:5px;border-bottom:1px solid var(--panel-line);padding-bottom:7px}.forecast-grid>div{display:flex;flex-direction:column;gap:2px}.forecast-grid time{color:var(--panel-muted);font-size:10px;font-family:ui-monospace,monospace}.forecast-grid b{font-size:20px;font-weight:400;line-height:1}.native-quicktools{display:flex;gap:6px;margin:1px 12px 7px;height:37px;flex-shrink:0}.native-quicktools>button{display:flex;align-items:center;gap:6px;justify-content:center;width:32px;flex:0 0 32px;overflow:hidden;border:1px solid var(--panel-line);border-radius:8px;background:#ffffff09;color:var(--panel-ink);padding:5px 6px;transition:width .22s,flex-grow .22s}.native-quicktools>button>span{display:none;font-size:11px;text-align:left;line-height:1.1;font-weight:600;min-width:0;overflow:hidden}.native-quicktools>button:first-child{flex:1;width:auto}.native-quicktools>button:first-child>span{display:block}.native-quicktools:has(button:hover)>button,.native-quicktools:has(button:focus-visible)>button{flex:0 0 32px;width:32px}.native-quicktools:has(button:hover)>button>span,.native-quicktools:has(button:focus-visible)>button>span{display:none}.native-quicktools>button:hover,.native-quicktools>button:focus-visible{flex:1!important;width:auto!important;background:var(--panel-hover)}.native-quicktools>button:hover>span,.native-quicktools>button:focus-visible>span{display:block!important}.popover-controls{display:flex;flex-direction:column;align-items:stretch;padding:0 12px 4px;gap:5px;flex-shrink:0}.popover-controls .segmented{border:0;border-radius:20px;background:#00000010;padding:3px;box-shadow:none;display:flex}.popover-controls .segmented button{flex:1;padding:3px 6px;font-size:10px;line-height:1.2;box-shadow:none;border-radius:5px;background:none;color:var(--panel-muted)}.popover-controls .segmented button[aria-pressed=true]{background:var(--panel-active);color:var(--panel-ink);box-shadow:none}.detail-toggles{display:flex;gap:4px;justify-content:center}.detail-toggles>button{font-size:9px;line-height:1.1;min-height:29px;border:1px solid var(--panel-line);background:var(--panel-hover);border-radius:16px;padding:4px 10px;max-width:none;color:var(--panel-ink)}.detail-toggles>button[aria-pressed=true]{background:var(--panel-active);color:var(--panel-ink)}.usage-table-head,.usage-row{grid-template-columns:minmax(0,1fr) 62px 36px 36px;gap:0}.usage-table-head{padding:6px 12px 4px;font-size:9px;flex-shrink:0}.usage-list{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8885 transparent;flex:1;padding:0 10px;overscroll-behavior:contain}.usage-row{padding:9px 2px;min-height:37px;font-size:11.5px;line-height:1.4}.usage-row>span:not(:first-child){font-size:11px}.usage-row>.row-value{font-size:11.5px!important}.usage-name{gap:4px}.usage-name strong{font-weight:500}.row-chevron{width:10px;height:10px}.brand-icon{object-fit:contain;width:14px;height:14px;flex-shrink:0;border-radius:2px;vertical-align:middle}.usage-children{padding:0 0 4px 15px}.usage-child{grid-template-columns:minmax(0,1fr) 62px 36px;padding:5px 0;font-size:10px}.usage-child strong{font-size:10.5px}.usage-child small{font-size:9px}.panel-grip{position:absolute;width:62px;height:16px;padding:0;border:1px solid #4262884d;background:#74aff9bd;box-shadow:0 1px 3px #0002;color:#16436a;border-radius:20px;font-size:14px;line-height:14px;z-index:22;touch-action:none;cursor:ns-resize;user-select:none}.visually-hidden{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.demo-dock{position:static;transform:none;background:none;border:0;box-shadow:none;backdrop-filter:none;display:flex;justify-content:center;padding:14px 0 0;gap:5px;width:auto}.demo-dock>button{display:flex;gap:7px;align-items:center;flex-direction:row;font-size:12px;min-width:0;padding:7px 15px;border-radius:6px;color:#555}.demo-dock>button[aria-pressed=true]{background:#ddd6;box-shadow:none}.demo-dock>button svg{width:14px;height:14px}.demo-footer{margin-top:6px}.demo-status{top:20px;bottom:auto;background:#f5f5f5f0;color:#333;border-color:#aaa5;font-size:12px}.clock-menu{background:#e9e9e9e8;color:#222;backdrop-filter:blur(25px);border:1px solid #0002;border-radius:7px;width:245px;box-shadow:0 8px 22px #0003;padding:5px}.clock-menu>button{font-size:13px;padding:4px 10px;min-height:25px;border-radius:4px}.clock-menu>button:hover,.clock-menu>button:focus-visible{background:#087aff;color:white}.menu-title{font-size:11px;color:#777}.clock-menu hr{border-color:#0002}
/* Independent AppKit-style windows: no tinted dashboard material. */
.app-window{border:1px solid #c9c9cb;border-radius:11px;background:#fff;color:#29292d;box-shadow:0 18px 70px #0004;width:min(840px,calc(100vw - 28px));padding:0;font-family:-apple-system,BlinkMacSystemFont,'Demo Sans',sans-serif}.app-window::backdrop{background:#00000018;backdrop-filter:none}.window-titlebar{height:33px;min-height:33px;background:#fafafa;border-bottom:1px solid #ddd;padding:0 9px;justify-content:flex-start;gap:12px}.window-titlebar h2{font-size:13px;font-weight:600;text-align:left;flex:1;color:#666}.window-buttons{position:static;gap:8px}.window-buttons button{width:13px;height:13px}.window-buttons button>span{font-size:10px;opacity:0}.window-buttons:hover button>span{opacity:.7}.window-sample{position:static;font-size:10px;color:#aaa}.window-view{padding:22px;max-height:calc(90vh - 35px)}.native-window-heading{margin-bottom:14px}.native-window-heading h3{font-size:22px;line-height:1.1;font-weight:700;margin:0 0 4px}.native-window-heading>span,.native-window-heading p{font-size:11px;color:#888;margin:0}.window-toolbar{margin:0 0 22px;gap:10px;justify-content:flex-end}.window-toolbar .segmented{padding:0;background:#eee;border-radius:5px;border:0;box-shadow:none}.window-toolbar .segmented>button{font-size:12px;padding:3px 11px;line-height:1.5;border-radius:4px;box-shadow:none}.window-toolbar .segmented>button[aria-pressed=true]{background:#007aff;color:white;box-shadow:none}.small-toggle{font-size:11px;background:#f3f7ff;color:#007aff;border:0;padding:4px 10px}.small-toggle[aria-pressed=true]{background:#e4efff;color:#007aff}.history-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.history-metrics article{border:1px solid #eee;border-radius:11px;background:white;padding:12px 15px;box-shadow:0 1px 2px #00000004;gap:0;min-width:0}.history-metrics article:nth-child(3){order:-2}.history-metrics article:nth-child(4){order:-1}.history-metrics span{font-size:10px;color:#888}.history-metrics strong{font-size:20px;line-height:1.4;font-weight:650;color:#333;letter-spacing:0}.chart-caption{font-size:10px}.chart-caption strong{font-size:13px;color:#333}.chart-caption #history-dates{display:none}.history-chart{height:150px;margin-top:14px}.chart-gridlines{display:none}.history-bars{gap:7px}.bar-fill{border-radius:2px 2px 0 0;background:linear-gradient(#007aff,#86b5ff);opacity:1;min-height:1px}.history-bar:hover .bar-fill,.history-bar.is-selected .bar-fill{background:linear-gradient(#006ee8,#71acff);box-shadow:none}.history-bar.is-selected:after{display:none}.chart-axis{font-size:9px;padding-top:4px}.day-heading{margin:17px 0 10px}.day-heading h3{font-size:13px}.day-heading select{font-size:11px;border:1px solid #ddd;border-radius:5px;color:#555;padding:3px 7px;max-width:125px}.native-table-heading,.history-tool{display:grid;grid-template-columns:minmax(110px,1fr) 75px 65px 95px 75px;gap:5px;font-size:11px;align-items:center}.native-table-heading{font-size:10px;color:#888;padding:0 10px 5px}.history-breakdown{border:1px solid #eee;border-radius:10px;overflow:hidden}.history-tool{padding:9px 10px;border-bottom:1px solid #eee;min-height:35px}.history-tool:last-child{border-bottom:0}.history-tool>span:first-child{display:flex;gap:6px;align-items:center}.history-tool>span:not(:first-child),.native-table-heading>span:not(:first-child){text-align:right}.window-note{font-size:10px;margin:15px 0 0;color:#888;border:0;padding:0}.app-window[data-panel=quota]{width:min(465px,calc(100vw - 28px))}.quota-view{padding:18px}.quota-toolbar{margin:4px 0 16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.quota-connected{font-size:10px;color:#999}.quota-toolbar .segmented{background:#eee;border:0;box-shadow:none}.quota-toolbar .segmented button{font-size:11px;padding:4px 12px}.quota-toolbar .segmented button[aria-pressed=true]{background:#007aff;color:white;box-shadow:none}.quota-cards{display:flex;flex-direction:column;gap:15px;margin:0}.quota-provider-card{padding:13px;background:#f8f8f8;border:1px solid #ededed;border-radius:13px}.quota-provider-card>header{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:13px}.quota-plan{margin-left:auto;color:#999;background:#eaeaea;border-radius:10px;padding:2px 7px;font-size:9px}.quota-card{border:0;border-radius:10px;background:#efefef;box-shadow:none;padding:12px;margin-top:8px}.quota-bar-title{display:flex;justify-content:space-between;align-items:center;gap:8px}.quota-bar-title h4{font-size:11px;font-weight:400;margin:0;color:#666}.quota-bar-title>strong{font-size:14px;color:#252525}.quota-progress{height:8px;background:#ddd;border-radius:5px;margin:11px 0 8px;overflow:hidden}.quota-progress i{display:block;height:100%;border-radius:5px;background:#31c759;transition:width .3s}.quota-reset{display:flex;justify-content:space-between;gap:6px;margin:0;font-size:9px;color:#999}.quota-reset b{font-weight:400}.quota-reset time{font-size:9px}.quota-sample-note{font-size:9px;color:#999;margin:10px 0 0}.quota-bottom{font-size:10px;line-height:1.6;padding:14px 0 0;background:none;border:0;gap:6px}.app-window[data-panel=appearance]{width:min(340px,calc(100vw - 24px));background:#eeeeeee8;backdrop-filter:blur(20px)}.app-window[data-panel=appearance] .window-view{padding:14px}.app-window[data-panel=appearance] .view-description{display:none}.theme-options{grid-template-columns:repeat(3,1fr);gap:10px 9px;margin:0 0 17px}.theme-option{border:0;background:none;border-radius:8px;padding:2px 2px 18px;position:relative}.theme-option:hover,.theme-option[aria-pressed=true]{background:transparent;border-color:transparent;box-shadow:none}.theme-preview{width:76px;height:76px;filter:drop-shadow(0 1px 1px #0002)}.theme-option strong{font-size:11px;font-weight:500;color:#222;margin-top:3px}.theme-check{top:auto;right:calc(50% - 6px);bottom:0;width:12px;height:12px;background:#333;color:white;border-radius:50%;padding:2px}.setting-row{padding:12px 0;gap:10px}.setting-row strong{font-size:11px;font-weight:500}.setting-row p{font-size:9px;line-height:1.45}.size-options button{font-size:10px;padding:4px 7px}.settings-link{font-size:11px;color:#007aff}.app-window[data-panel=settings]{width:min(580px,calc(100vw - 28px))}.tool-option{font-size:12px;border:1px solid #ddd;background:#f7f7f7}.app-window[data-panel=desktopOnly]{width:min(760px,calc(100vw - 28px))}
@media(max-width:600px){.demo-heading{padding-top:20px}.page-main,.page-header,.page-footer{width:calc(100% - 24px)}.demo-desktop{border-radius:9px}.clock-menu-trigger{opacity:1;right:-22px}.demo-dock>button{font-size:11px;padding:7px 10px}.demo-dock>button svg{display:none}.app-window{max-height:92dvh}.window-view{padding:15px;max-height:calc(92dvh - 36px)}.window-titlebar{padding:0 10px}.history-metrics{grid-template-columns:repeat(2,1fr)}.history-metrics article{padding:8px 10px}.window-toolbar{justify-content:flex-start;flex-wrap:wrap}.native-table-heading,.history-tool{grid-template-columns:minmax(85px,1fr) 58px 38px 65px;font-size:10px;gap:3px}.native-table-heading>span:last-child,.history-tool>span:last-child{display:none}.history-tool{padding:8px}.usage-popover .usage-row{padding-inline:2px}.native-window-heading h3{font-size:20px}.window-buttons button{width:14px;height:14px}.window-buttons button>span{opacity:.7}.quota-reset{flex-wrap:wrap}.demo-footer{flex-direction:column;gap:5px}.heading-description{font-size:12px}.demo-status{max-width:90%;white-space:normal}.theme-options{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.native-quicktools>button,.quota-progress i{transition:none}}
.menu-group{position:relative}.menu-group>button{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;font-size:13px;padding:5px 10px;border-radius:4px;white-space:nowrap}.menu-group:hover>button,.menu-group.menu-open>button{background:#087aff;color:white}.menu-sub{display:none;position:absolute;left:calc(100% - 2px);top:-5px;width:235px;padding:5px;border:1px solid #0002;border-radius:7px;box-shadow:0 8px 22px #0003;background:#e9e9e9f7;color:#222;backdrop-filter:blur(25px)}.menu-left .menu-sub{left:auto;right:calc(100% - 2px)}.menu-group.menu-open>.menu-sub,.menu-group:hover>.menu-sub,.menu-group:focus-within>.menu-sub{display:block}.menu-sub>button{display:block;width:100%;text-align:left;border:0;font-size:13px;padding:5px 10px;border-radius:4px}.menu-sub>button:hover,.menu-sub>button:focus-visible{background:#087aff;color:white}.clock-menu{overflow:visible}.settings-native-tabs{display:flex;gap:5px;padding-bottom:18px;border-bottom:1px solid #ddd;margin-bottom:18px}.settings-native-tabs>button{border:0;border-radius:6px;background:none;font-size:12px;padding:6px 11px;color:#666}.settings-native-tabs>button[aria-pressed=true]{background:#e5e5e5;color:#222}.native-preference{display:flex;align-items:center;gap:7px;font-size:12px}.native-preference small{font-size:10px;color:#999}.setting-row label{font-size:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.setting-row input[type=color]{width:35px;height:24px;padding:1px;border:1px solid #ccc;border-radius:4px}.setting-row select{font-size:12px;max-width:180px}.clock-bell{position:absolute;left:65%;top:29%;width:16px;height:16px;background:none;border:0;padding:0;color:var(--dial-ink);z-index:3;display:grid;place-items:center}.clock-bell svg{width:12px;height:12px}.clock-bell i{position:absolute;width:4px;height:4px;background:#ec4940;border-radius:50%;right:0;top:0}.no-refraction .clock-surface{backdrop-filter:none;-webkit-backdrop-filter:none}.no-refraction .clock-surface:after{display:none}.feature-view{padding:20px;min-height:430px;background:#f7f7f7}.feature-heading{display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:15px;margin-bottom:14px}.feature-heading>div{flex:1}.feature-heading h3{font-size:19px;margin:0;line-height:1.3;font-weight:650}.feature-heading p{font-size:11px;color:#888;margin:4px 0 0}.feature-demo-note{background:#edf2fa;border:1px solid #dbe5f1;color:#59718b;border-radius:6px;font-size:10px;line-height:1.6;padding:7px 10px;margin-bottom:15px}.native-button{border:1px solid #d0d0d0;box-shadow:0 1px 2px #0000000a;border-radius:5px;background:#fff;padding:4px 10px;font-size:12px;line-height:1.5;white-space:nowrap}.native-button:hover{background:#ececec}.native-button.primary{background:#007aff;border-color:#007aff;color:#fff}.native-card{border:1px solid #ddd;background:#fdfdfd;border-radius:11px;padding:15px;margin:10px 0}.native-card h3{font-size:17px;line-height:1.5}.native-card h4{font-size:12px;margin:0 0 7px}.native-card p{font-size:11px;color:#777}.native-card code{font-size:11px;line-height:1.8;white-space:pre-wrap;word-break:break-all}.native-card>header{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#888}.native-segmented{display:flex;max-width:100%;border-radius:6px;background:#e9e9eb;padding:2px;gap:0}.native-segmented button{border:0;border-radius:4px;flex:1;font-size:12px;line-height:1.4;padding:4px 10px;white-space:nowrap}.native-segmented button[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px #0002}.feature-fields{padding:16px 0}.feature-file{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:15px}.feature-view label{display:flex;align-items:center;gap:10px;font-size:12px;padding:7px 0}.feature-view input:not([type=checkbox]),.feature-view select{border:1px solid #ccc;border-radius:5px;background:white;font-size:12px;padding:5px 7px;max-width:100%;min-width:0}.feature-view details{margin:15px 0;font-size:12px}.feature-view summary{cursor:pointer}.feature-bottom{display:flex;align-items:center;gap:12px;margin-top:18px}.feature-bottom>span{font-size:10px;color:#888}.feature-confirm{background:#f5f9ff;border:1px solid #c8dcf5;border-radius:8px;padding:14px;margin-top:16px}.feature-confirm button+button{margin-left:8px}.feature-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.feature-result-grid>div{display:flex;flex-direction:column;gap:4px;background:#f4f5f6;padding:15px;border-radius:8px}.feature-result-grid b{font-size:25px}.feature-result-grid span{font-size:11px;color:#888}.native-status{font-size:10px;padding:3px 7px;border:1px solid #d0ddcc;border-radius:5px;background:#f0f6ee;color:#647d58}.feature-table{width:100%;border-collapse:collapse;font-size:11px;line-height:1.5}.feature-table th,.feature-table td{padding:9px 6px;border-bottom:1px solid #ddd;text-align:left}.feature-status{font-size:11px;color:#777;padding:8px 0}.feature-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.feature-cards .native-card{margin:0}.feature-inline{display:flex;gap:7px;align-items:center}.feature-inline input:first-child{flex:1}.feature-inline input[type=number]{width:65px}.feature-view progress{width:100%;height:6px;accent-color:#007aff}.share-demo{position:relative;height:330px;border-radius:12px;overflow:hidden}.share-demo>img{width:100%;height:100%;object-fit:cover}.share-demo>div{position:absolute;left:25px;bottom:25px;right:25px;background:#ffffffbf;padding:24px;border-radius:10px;backdrop-filter:blur(12px)}.share-demo h3{font-size:32px;margin:8px 0}.share-demo small,.share-demo p,.share-demo span{font-size:12px;color:#444}.feature-view>p{font-size:11px;color:#888}
@media(max-width:600px){.menu-sub{width:195px}.clock-menu{max-width:210px}.menu-group.menu-open>.menu-sub,.menu-group:hover>.menu-sub,.menu-group:focus-within>.menu-sub{position:relative;left:auto;right:auto;top:auto;width:100%;box-shadow:none;border:0;border-radius:0;background:#d8d8d877;padding-left:10px}.feature-view{padding:15px}.feature-heading{flex-wrap:wrap}.feature-heading>div{min-width:65%}.feature-cards{grid-template-columns:1fr}.native-segmented{flex-wrap:wrap}.native-segmented button{white-space:normal;font-size:11px;padding:5px}.feature-file,.feature-bottom{flex-wrap:wrap}.feature-view label{flex-wrap:wrap}.feature-table{font-size:10px}.feature-result-grid>div{padding:9px}.share-demo{height:280px}.share-demo>div{left:12px;right:12px;bottom:12px;padding:15px}}
.native-custom-range{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0 0 16px;font-size:11px;color:#777;flex-wrap:wrap}.native-custom-range label{display:flex;align-items:center;gap:5px}.native-custom-range input{font-size:11px;padding:3px 5px;border:1px solid #ddd;border-radius:5px}.native-custom-range>span{font-size:9px}.window-toolbar{flex-wrap:wrap;gap:8px}.window-toolbar .segmented button{padding-inline:8px}
.window-titlebar h2{position:static;left:auto;transform:none}.window-sample{margin-left:auto}.history-metrics article{order:0!important}.history-bar .bar-fill{max-width:none;border-radius:2px 2px 0 0;background:linear-gradient(#007aff,#86b5ff);min-height:1px}.history-bar:hover .bar-fill,.history-bar.is-selected .bar-fill{background:linear-gradient(#006ee8,#71acff);box-shadow:none}.history-chart.is-line .history-bar:after{background:#007aff;border-color:white}#history-line path{stroke:#007aff}.history-metrics strong{margin-top:2px}.day-heading{padding-top:0;border:0}.native-window-heading{display:inline-block}.window-toolbar{margin-top:-43px;margin-left:180px;margin-bottom:24px}.window-titlebar .window-sample{order:3}.native-quicktools{height:46px}.native-quicktools>button{border-radius:10px}.popover-controls .detail-toggles #cache-toggle{order:-2}.popover-controls .detail-toggles #contrast-toggle{order:-1}@media(max-width:820px){.window-toolbar{margin-top:0;margin-left:0}.window-titlebar h2{position:static;transform:none}.native-window-heading{display:block}}
.theme-close{display:none}.app-window[data-panel=appearance] .window-titlebar{height:32px;background:none;border:0;padding:15px 13px 0}.app-window[data-panel=appearance] .window-buttons,.app-window[data-panel=appearance] .window-sample{display:none}.app-window[data-panel=appearance] .theme-close{display:grid;place-items:center;border:0;border-radius:50%;background:#999;color:#fff;padding:0;width:14px;height:14px;font-size:13px;line-height:14px}.app-window[data-panel=appearance] .window-titlebar h2{font-size:12px;color:#222}.app-window[data-panel=appearance] .window-view{padding-top:12px}.app-window[data-panel=appearance]{width:310px}.theme-options{gap:13px 8px;margin-bottom:10px}.theme-option .theme-preview{width:82px;height:82px}.theme-option{padding-bottom:17px}.theme-option .theme-check{width:12px;height:12px;right:calc(50% - 6px);bottom:0;padding:2px}.appearance-view .theme-option strong{margin-top:2px}
.quota-view>.native-window-heading{position:relative;display:block;padding-right:70px}.quota-retry{position:absolute;right:0;top:5px}