@pstrikez/fluent-winui-theme 0.1.1 → 0.1.2

package/dist/base.css

@@ -1,4 +1,4 @@
-body{margin:0}@media(prefers-color-scheme:dark){:root:not([data-fwt-theme=light]){color-scheme:dark}}:root[data-fwt-theme=dark]{color-scheme:dark}*,*:before,*:after{box-sizing:border-box}:root{--fontFamilyBase: "Segoe UI Variable Web", "Segoe UI Variable Text", "Segoe UI Variable Display", "Segoe UI Variable Small", "Segoe UI", system-ui, sans-serif}body{font-family:var(--fontFamilyBase)}.fwt-gradient-background{background-image:radial-gradient(circle at 50% 0%,#ffffff 0%,#f7fbff 36%,transparent 64%),linear-gradient(180deg,#f6f8fb,#eef2f6);height:100dvh;overflow:hidden}@media(prefers-color-scheme:dark){:root:not([data-fwt-theme=light]) .fwt-gradient-background{background-image:radial-gradient(circle at 50% 0%,#2d2d2d 0%,#242424 38%,transparent 68%),linear-gradient(180deg,#202020,#1c1c1c)}}:root[data-fwt-theme=dark] .fwt-gradient-background{background-image:radial-gradient(circle at 50% 0%,#2d2d2d 0%,#242424 38%,transparent 68%),linear-gradient(180deg,#202020,#1c1c1c)}.fwt-loading{box-sizing:border-box;display:grid;height:100%;padding:20px;place-items:center}.fwt-loading-app{min-height:100dvh}.fwt-loading .fui-Spinner{align-items:center;display:flex;gap:8px;justify-content:center;line-height:0;min-width:min-content;overflow:hidden}.fwt-loading .fui-Spinner__spinner{--fui-Spinner--strokeWidth: 25%;animation:fwt-loading-spin 1.5s linear infinite;background-color:rgba(255,255,255,0);color:var(--colorBrandStroke1, #0067c0);flex-shrink:0;height:32px;mask-image:radial-gradient(closest-side,transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px),white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px),transparent 100%);position:relative;width:32px;-webkit-mask-image:radial-gradient(closest-side,transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px),white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px),transparent 100%)}.fwt-loading .fui-Spinner__spinnerTail{animation:fwt-loading-tail 1.5s cubic-bezier(.33,0,.67,1) infinite;display:block;height:100%;mask-image:conic-gradient(transparent 105deg,#fff 105deg);position:absolute;width:100%;-webkit-mask-image:conic-gradient(transparent 105deg,white 105deg)}.fwt-loading .fui-Spinner__spinnerTail:before,.fwt-loading .fui-Spinner__spinnerTail:after{animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.33,0,.67,1);background-image:conic-gradient(currentcolor 135deg,transparent 135deg);content:"";display:block;height:100%;position:absolute;width:100%}.fwt-loading .fui-Spinner__spinnerTail:before{animation-name:fwt-loading-tail-before}.fwt-loading .fui-Spinner__spinnerTail:after{animation-name:fwt-loading-tail-after}.fwt-loading .fui-Spinner__label{color:var(--colorNeutralForeground1, rgba(0, 0, 0, .894118));font-family:var(--fontFamilyBase, sans-serif);font-size:var(--fontSizeBase300, 14px);font-weight:var(--fontWeightRegular, 400);line-height:var(--lineHeightBase300, 20px)}@media(prefers-color-scheme:dark){:root:not([data-fwt-theme=light]) .fwt-loading .fui-Spinner__spinner{color:var(--colorBrandStroke1, #4cc2ff)}:root:not([data-fwt-theme=light]) .fwt-loading .fui-Spinner__label{color:var(--colorNeutralForeground1, #ffffff)}}:root[data-fwt-theme=dark] .fwt-loading .fui-Spinner__spinner{color:var(--colorBrandStroke1, #4cc2ff)}:root[data-fwt-theme=dark] .fwt-loading .fui-Spinner__label{color:var(--colorNeutralForeground1, #ffffff)}@keyframes fwt-loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fwt-loading-tail{0%{transform:rotate(-135deg)}50%{transform:rotate(0)}to{transform:rotate(225deg)}}@keyframes fwt-loading-tail-before{0%,to{transform:rotate(0)}50%{transform:rotate(105deg)}}@keyframes fwt-loading-tail-after{0%,to{transform:rotate(0)}50%{transform:rotate(225deg)}}@media screen and (forced-colors:active){.fwt-loading .fui-Spinner__spinner{background-color:HighlightText;color:Highlight;forced-color-adjust:none}}.fwt-error-shell{display:grid;align-content:center;justify-items:center;gap:24px;height:100%;min-height:max-content;margin:0 auto;max-width:720px;padding:64px 24px}.fwt-error-shell>*{min-width:0;max-width:100%}.fwt-error-shell-viewport{height:100dvh}.fwt-error-shell-stack{display:grid;gap:6px}.fwt-error-shell-stack>*{margin:0}.fwt-error-shell-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.fwt-navigation-progress{height:3px;inset:0 0 auto;opacity:0;overflow:hidden;pointer-events:none;position:fixed;transition:opacity var(--winui-control-fast-animation-duration) var(--winui-control-fast-out-slow-in-easing);z-index:1000001}.fwt-navigation-progress[data-active=true]{opacity:1}.fwt-navigation-progress:before,.fwt-navigation-progress:after{animation-play-state:paused;background-color:var(--winui-accent-fill-default);border-radius:1.5px;content:"";inset:0 auto 0 0;position:absolute}.fwt-navigation-progress:before,.fwt-navigation-progress:after{animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:linear}.fwt-navigation-progress:before{animation-name:winui-progress-indeterminate;width:40%}.fwt-navigation-progress:after{animation-name:winui-progress-indeterminate-2;width:60%}@keyframes winui-progress-indeterminate{0%{animation-timing-function:cubic-bezier(.4,0,.6,1);transform:translate(-100%)}75%{transform:translate(300%)}to{transform:translate(300%)}}@keyframes winui-progress-indeterminate-2{0%{transform:translate(-150%)}37.5%{animation-timing-function:cubic-bezier(.4,0,.6,1);transform:translate(-150%)}to{transform:translate(166%)}}.fwt-navigation-progress[data-active=true]:before,.fwt-navigation-progress[data-active=true]:after{animation-play-state:running}@media(forced-colors:active){.fwt-navigation-progress{border:1px solid CanvasText;box-sizing:content-box}.fwt-navigation-progress:before,.fwt-navigation-progress:after{background-color:Highlight}}@font-face{font-family:Segoe UI Variable Web;src:url(https://docs.azure.cn/static/third-party/SegoeUIVariable/SegoeUI-VF.ttf?fwt-vf=2.02) format("truetype"),url(https://learn.microsoft.com/static/third-party/SegoeUIVariable/SegoeUI-VF.ttf?fwt-vf=2.02) format("truetype");font-style:normal;font-weight:300 700;font-display:swap}@font-face{font-family:Meslo LG S Web;src:url(./fonts/meslo-lg-s-400-normal.generated.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;size-adjust:99.9895%;ascent-override:102.0107%;descent-override:30.0032%;line-gap-override:0%}@font-face{font-family:Meslo LG S Web;src:url(./fonts/meslo-lg-s-400-italic.generated.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap;size-adjust:99.9895%;ascent-override:102.0107%;descent-override:30.0032%;line-gap-override:0%}@font-face{font-family:Meslo LG S Web;src:url(./fonts/meslo-lg-s-700-normal.generated.woff2) format("woff2");font-style:normal;font-weight:600 700;font-display:swap;size-adjust:99.9895%;ascent-override:102.0107%;descent-override:30.0032%;line-gap-override:0%}@font-face{font-family:Meslo LG S Web;src:url(./fonts/meslo-lg-s-700-italic.generated.woff2) format("woff2");font-style:italic;font-weight:600 700;font-display:swap;size-adjust:99.9895%;ascent-override:102.0107%;descent-override:30.0032%;line-gap-override:0%}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.container{width:100%}.border-fui-divider{border-color:var(--colorNeutralStroke3)}.border-fui-stroke1{border-color:var(--colorNeutralStroke1)}.bg-fui-bg1{background-color:var(--colorNeutralBackground1)}.bg-fui-bg2{background-color:var(--colorNeutralBackground2)}.text-fui-fg1{color:var(--colorNeutralForeground1)}.text-fui-fg2{color:var(--colorNeutralForeground2)}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.invisible{visibility:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.left-3{left:.75rem}.top-3{top:.75rem}.z-\[100000\]{z-index:100000}.\!grid{display:grid!important}.grid{display:grid}.col-start-1{grid-column-start:1}.row-start-1{grid-row-start:1}.grid-cols-\[clamp\(240px\,18vw\,290px\)_minmax\(0\,1fr\)\]{grid-template-columns:clamp(240px,18vw,290px) minmax(0,1fr)}.grid-cols-\[minmax\(0\,1fr\)\]{grid-template-columns:minmax(0,1fr)}.grid-rows-\[minmax\(0\,1fr\)\]{grid-template-rows:minmax(0,1fr)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.\!m-auto{margin:auto!important}.m-0{margin:0}.\!ml-auto{margin-left:auto!important}.ml-auto{margin-left:auto}.ms{margin-inline-start:1rem}.inline{display:inline}.block{display:block}.hidden{display:none}.\!h-full{height:100%!important}.\!max-w-\[calc\(100vw-16px\)\]{max-width:calc(100vw - 16px)!important}.\!max-w-none{max-width:none!important}.\!min-h-\[34px\]{min-height:34px!important}.\!min-w-\[0px\],.\[\&_input\]\:\!min-w-\[0px\] input{min-width:0px!important}.\!min-w-\[var\(--fui-match-target-size\)\]{min-width:var(--fui-match-target-size)!important}.\!min-w-\[var\(--fwt-select-min-width\,var\(--winui-combo-box-min-width\)\)\]{min-width:var(--fwt-select-min-width,var(--winui-combo-box-min-width))!important}.\!w-\[min\(430px\,calc\(100vw-48px\)\)\]{width:min(430px,calc(100vw - 48px))!important}.\!w-full{width:100%!important}.\!w-max{width:max-content!important}.h-\[100dvh\]{height:100dvh}.h-full{height:100%}.h1{height:.25rem}.h2{height:.5rem}.max-w-\[480px\]{max-width:480px}.max-w-\[760px\]{max-width:760px}.max-w-full{max-width:100%}.min-h-\[180px\]{min-height:180px}.min-h-0{min-height:0}.min-h-10{min-height:2.5rem}.min-h-full{min-height:100%}.min-h-max{min-height:max-content}.min-w-0{min-width:0}.min-w-full{min-width:100%}.w-full{width:100%}.w-max{width:max-content}.flex{display:flex}.inline-flex{display:inline-flex}.flex-none{flex:none}.shrink{flex-shrink:1}.grow{flex-grow:1}.table{display:table}.-translate-y-20{--un-translate-y:-5rem;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.focus\:translate-y-0:focus{--un-translate-y:0;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.resize{resize:both}.place-items-center{place-items:center}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-items-start{justify-items:start}.justify-items-center{justify-items:center}.\!gap-0{gap:0!important}.\!gap-3{gap:.75rem!important}.gap-\[18px\]{gap:18px}.gap-\[var\(--fwt-page-inset\)\]{gap:var(--fwt-page-inset)}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.\!gap-y-1{row-gap:.25rem!important}.gap-x-2{column-gap:.5rem}.gap-y-1{row-gap:.25rem}.overflow-hidden{overflow:hidden}.\!truncate{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.\!whitespace-nowrap{white-space:nowrap!important}.b,.border{border-width:1px}.border-0{border-width:0px}.border-b{border-bottom-width:1px}.rounded{border-radius:.25rem}.rounded-\[var\(--winui-overlay-corner-radius\,8px\)\]{border-radius:var(--winui-overlay-corner-radius,8px)}.rounded-md{border-radius:.375rem}.border-solid{border-style:solid}.border-b-solid{border-bottom-style:solid}.\!bg-transparent{background-color:transparent!important}.bg-transparent{background-color:transparent}.\!p-\[var\(--fwt-panel-inset\)\]{padding:var(--fwt-panel-inset)!important}.\!p-0{padding:0!important}.p-\[22px_var\(--fwt-page-inset\)_var\(--fwt-page-inset\)\]{padding:22px var(--fwt-page-inset) var(--fwt-page-inset)}.p-\[var\(--fwt-panel-inset\)\]{padding:var(--fwt-panel-inset)}.p-0{padding:0}.p-4{padding:1rem}.\!px-\[10px\]{padding-left:10px!important;padding-right:10px!important}.\!px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.\!py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.\!py-4{padding-top:1rem!important;padding-bottom:1rem!important}.px,.px-4{padding-left:1rem;padding-right:1rem}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[var\(--fwt-panel-inset\)\]{padding-left:var(--fwt-panel-inset);padding-right:var(--fwt-panel-inset)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-\[var\(--spacingVerticalSNudge\)\]{padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge)}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-center{text-align:center}.text-left{text-align:left}.indent{text-indent:1.5rem}.text-fui-base300{font-size:var(--fontSizeBase300);line-height:1}.leading-\[var\(--lineHeightBase300\)\]{line-height:var(--lineHeightBase300)}.underline,.hover\:underline:hover{text-decoration-line:underline}.no-underline{text-decoration:none}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline{outline-style:solid}.ring{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\@container{container-type:inline-size}@media(max-width:680px){.max-\[680px\]\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.max-\[680px\]\:p-4{padding:1rem}}@media(max-width:900px){.max-\[900px\]\:grid-rows-\[58px_minmax\(0\,1fr\)\]{grid-template-rows:58px minmax(0,1fr)}.max-\[900px\]\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.max-\[900px\]\:hidden{display:none}.max-\[900px\]\:flex{display:flex}.max-\[900px\]\:flex-col{flex-direction:column}.max-\[900px\]\:items-stretch{align-items:stretch}.max-\[900px\]\:justify-start{justify-content:flex-start}}:root{--fwt-page-inset: 28px;--fwt-panel-inset: 16px}@media(max-width:680px){:root{--fwt-page-inset: 16px}}:root{--fwt-font-size-mono: 13px;--fwt-line-height-mono: 20px;--fwt-font-size-mono-base100: 9px;--fwt-line-height-mono-base100: 14px;--fwt-font-size-mono-base500: 17px;--fwt-line-height-mono-base500: 24px;--fwt-font-size-mono-xs: 11px;--fwt-line-height-mono-xs: 16px}button,input,select,textarea{font:inherit}code,kbd,pre,samp{font-family:var(--fontFamilyMonospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}:where(code,kbd,samp){font-size:calc(1em - 1px)!important;background-color:transparent;color:inherit}:where(strong,b){font-weight:var(--fontWeightSemibold)}pre,.font-mono{font-size:var(--fwt-font-size-mono)!important;line-height:var(--fwt-line-height-mono)!important}.font-mono :where(button,input,select,textarea,code,kbd,pre,samp),pre :where(code,kbd,samp){font-size:inherit!important}.mono-size-100{--fwt-font-size-mono: var(--fwt-font-size-mono-base100);--fwt-line-height-mono: var(--fwt-line-height-mono-base100)}.mono-size-xs{--fwt-font-size-mono: var(--fwt-font-size-mono-xs);--fwt-line-height-mono: var(--fwt-line-height-mono-xs)}.mono-display{font-size:var(--fwt-font-size-mono-base500)!important;line-height:var(--fwt-line-height-mono-base500)!important}.font-mono,.font-mono button,.font-mono input,.font-mono select,.font-mono textarea{font-family:var(--fontFamilyMonospace)!important}/*! 
+body{margin:0}@media(prefers-color-scheme:dark){:root:not([data-fwt-theme=light]){color-scheme:dark}}:root[data-fwt-theme=dark]{color-scheme:dark}*,*:before,*:after{box-sizing:border-box}:root{--fontFamilyBase: "Segoe UI Variable Web", "Segoe UI Variable Text", "Segoe UI Variable Display", "Segoe UI Variable Small", "Segoe UI", system-ui, sans-serif}body{font-family:var(--fontFamilyBase)}.fwt-gradient-background{background-image:radial-gradient(circle at 50% 0%,#ffffff 0%,#f7fbff 36%,transparent 64%),linear-gradient(180deg,#f6f8fb,#eef2f6);height:100dvh;overflow:hidden}@media(prefers-color-scheme:dark){:root:not([data-fwt-theme=light]) .fwt-gradient-background{background-image:radial-gradient(circle at 50% 0%,#2d2d2d 0%,#242424 38%,transparent 68%),linear-gradient(180deg,#202020,#1c1c1c)}}:root[data-fwt-theme=dark] .fwt-gradient-background{background-image:radial-gradient(circle at 50% 0%,#2d2d2d 0%,#242424 38%,transparent 68%),linear-gradient(180deg,#202020,#1c1c1c)}.fwt-loading{box-sizing:border-box;display:grid;height:100%;padding:20px;place-items:center}.fwt-loading-app{min-height:100dvh}.fwt-loading .fui-Spinner{align-items:center;display:flex;gap:8px;justify-content:center;line-height:0;min-width:min-content;overflow:hidden}.fwt-loading .fui-Spinner__spinner{--fui-Spinner--strokeWidth: 25%;animation:fwt-loading-spin 1.5s linear infinite;background-color:rgba(255,255,255,0);color:var(--colorBrandStroke1, #0067c0);flex-shrink:0;height:32px;mask-image:radial-gradient(closest-side,transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px),white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px),transparent 100%);position:relative;width:32px;-webkit-mask-image:radial-gradient(closest-side,transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px),white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px),transparent 100%)}.fwt-loading .fui-Spinner__spinnerTail{animation:fwt-loading-tail 1.5s cubic-bezier(.33,0,.67,1) infinite;display:block;height:100%;mask-image:conic-gradient(transparent 105deg,#fff 105deg);position:absolute;width:100%;-webkit-mask-image:conic-gradient(transparent 105deg,white 105deg)}.fwt-loading .fui-Spinner__spinnerTail:before,.fwt-loading .fui-Spinner__spinnerTail:after{animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.33,0,.67,1);background-image:conic-gradient(currentcolor 135deg,transparent 135deg);content:"";display:block;height:100%;position:absolute;width:100%}.fwt-loading .fui-Spinner__spinnerTail:before{animation-name:fwt-loading-tail-before}.fwt-loading .fui-Spinner__spinnerTail:after{animation-name:fwt-loading-tail-after}.fwt-loading .fui-Spinner__label{color:var(--colorNeutralForeground1, rgba(0, 0, 0, .894118));font-family:var(--fontFamilyBase, sans-serif);font-size:var(--fontSizeBase300, 14px);font-weight:var(--fontWeightRegular, 400);line-height:var(--lineHeightBase300, 20px)}@media(prefers-color-scheme:dark){:root:not([data-fwt-theme=light]) .fwt-loading .fui-Spinner__spinner{color:var(--colorBrandStroke1, #4cc2ff)}:root:not([data-fwt-theme=light]) .fwt-loading .fui-Spinner__label{color:var(--colorNeutralForeground1, #ffffff)}}:root[data-fwt-theme=dark] .fwt-loading .fui-Spinner__spinner{color:var(--colorBrandStroke1, #4cc2ff)}:root[data-fwt-theme=dark] .fwt-loading .fui-Spinner__label{color:var(--colorNeutralForeground1, #ffffff)}@keyframes fwt-loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fwt-loading-tail{0%{transform:rotate(-135deg)}50%{transform:rotate(0)}to{transform:rotate(225deg)}}@keyframes fwt-loading-tail-before{0%,to{transform:rotate(0)}50%{transform:rotate(105deg)}}@keyframes fwt-loading-tail-after{0%,to{transform:rotate(0)}50%{transform:rotate(225deg)}}@media screen and (forced-colors:active){.fwt-loading .fui-Spinner__spinner{background-color:HighlightText;color:Highlight;forced-color-adjust:none}}.fwt-error-shell{display:grid;align-content:center;justify-items:center;gap:24px;height:100%;min-height:max-content;margin:0 auto;max-width:720px;padding:64px 24px}.fwt-error-shell>*{min-width:0;max-width:100%}.fwt-error-shell-viewport{height:100dvh}.fwt-error-shell-stack{display:grid;gap:6px}.fwt-error-shell-stack>*{margin:0}.fwt-error-shell-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.fwt-navigation-progress{height:3px;inset:0 0 auto;opacity:0;overflow:hidden;pointer-events:none;position:fixed;transition:opacity var(--winui-control-fast-animation-duration) var(--winui-control-fast-out-slow-in-easing);z-index:1000001}.fwt-navigation-progress[data-active=true]{opacity:1}.fwt-navigation-progress:before,.fwt-navigation-progress:after{animation-play-state:paused;background-color:var(--winui-accent-fill-default);border-radius:1.5px;content:"";inset:0 auto 0 0;position:absolute}.fwt-navigation-progress:before,.fwt-navigation-progress:after{animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:linear}.fwt-navigation-progress:before{animation-name:winui-progress-indeterminate;width:40%}.fwt-navigation-progress:after{animation-name:winui-progress-indeterminate-2;width:60%}@keyframes winui-progress-indeterminate{0%{animation-timing-function:cubic-bezier(.4,0,.6,1);transform:translate(-100%)}75%{transform:translate(300%)}to{transform:translate(300%)}}@keyframes winui-progress-indeterminate-2{0%{transform:translate(-150%)}37.5%{animation-timing-function:cubic-bezier(.4,0,.6,1);transform:translate(-150%)}to{transform:translate(166%)}}.fwt-navigation-progress[data-active=true]:before,.fwt-navigation-progress[data-active=true]:after{animation-play-state:running}@media(forced-colors:active){.fwt-navigation-progress{border:1px solid CanvasText;box-sizing:content-box}.fwt-navigation-progress:before,.fwt-navigation-progress:after{background-color:Highlight}}@font-face{font-family:Segoe UI Variable Web;src:url(https://docs.azure.cn/static/third-party/SegoeUIVariable/SegoeUI-VF.ttf?fwt-vf=2.02) format("truetype"),url(https://learn.microsoft.com/static/third-party/SegoeUIVariable/SegoeUI-VF.ttf?fwt-vf=2.02) format("truetype");font-style:normal;font-weight:300 700;font-display:swap}@font-face{font-family:Meslo LG S Web;src:url(./fonts/meslo-lg-s-400-normal.generated.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;size-adjust:99.9895%;ascent-override:102.0107%;descent-override:30.0032%;line-gap-override:0%}@font-face{font-family:Meslo LG S Web;src:url(./fonts/meslo-lg-s-400-italic.generated.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap;size-adjust:99.9895%;ascent-override:102.0107%;descent-override:30.0032%;line-gap-override:0%}@font-face{font-family:Meslo LG S Web;src:url(./fonts/meslo-lg-s-700-normal.generated.woff2) format("woff2");font-style:normal;font-weight:600 700;font-display:swap;size-adjust:99.9895%;ascent-override:102.0107%;descent-override:30.0032%;line-gap-override:0%}@font-face{font-family:Meslo LG S Web;src:url(./fonts/meslo-lg-s-700-italic.generated.woff2) format("woff2");font-style:italic;font-weight:600 700;font-display:swap;size-adjust:99.9895%;ascent-override:102.0107%;descent-override:30.0032%;line-gap-override:0%}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.container{width:100%}.border-fui-divider{border-color:var(--colorNeutralStroke3)}.border-fui-stroke1{border-color:var(--colorNeutralStroke1)}.bg-fui-bg1{background-color:var(--colorNeutralBackground1)}.bg-fui-bg2{background-color:var(--colorNeutralBackground2)}.text-fui-fg1{color:var(--colorNeutralForeground1)}.text-fui-fg2{color:var(--colorNeutralForeground2)}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.invisible{visibility:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.left-3{left:.75rem}.top-3{top:.75rem}.z-\[100000\]{z-index:100000}.\!grid{display:grid!important}.grid{display:grid}.col-start-1{grid-column-start:1}.row-start-1{grid-row-start:1}.grid-cols-\[clamp\(240px\,18vw\,290px\)_minmax\(0\,1fr\)\]{grid-template-columns:clamp(240px,18vw,290px) minmax(0,1fr)}.grid-cols-\[minmax\(0\,1fr\)\]{grid-template-columns:minmax(0,1fr)}.grid-rows-\[minmax\(0\,1fr\)\]{grid-template-rows:minmax(0,1fr)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.\!m-auto{margin:auto!important}.m-0{margin:0}.\!ml-auto{margin-left:auto!important}.ml-auto{margin-left:auto}.ms{margin-inline-start:1rem}.inline{display:inline}.block{display:block}.hidden{display:none}.\!h-full{height:100%!important}.\!max-w-\[calc\(100vw-16px\)\]{max-width:calc(100vw - 16px)!important}.\!max-w-none{max-width:none!important}.\!min-h-\[34px\]{min-height:34px!important}.\!min-w-\[0px\],.\[\&_input\]\:\!min-w-\[0px\] input{min-width:0px!important}.\!min-w-\[var\(--fui-match-target-size\)\]{min-width:var(--fui-match-target-size)!important}.\!min-w-\[var\(--fwt-select-min-width\,var\(--winui-combo-box-min-width\)\)\]{min-width:var(--fwt-select-min-width,var(--winui-combo-box-min-width))!important}.\!w-\[min\(430px\,calc\(100vw-48px\)\)\]{width:min(430px,calc(100vw - 48px))!important}.\!w-full{width:100%!important}.\!w-max{width:max-content!important}.h-\[100dvh\]{height:100dvh}.h-full{height:100%}.h1{height:.25rem}.h2{height:.5rem}.max-w-\[480px\]{max-width:480px}.max-w-\[760px\]{max-width:760px}.max-w-full{max-width:100%}.min-h-\[180px\]{min-height:180px}.min-h-0{min-height:0}.min-h-10{min-height:2.5rem}.min-h-full{min-height:100%}.min-h-max{min-height:max-content}.min-w-0{min-width:0}.min-w-full{min-width:100%}.w-full{width:100%}.w-max{width:max-content}.flex{display:flex}.inline-flex{display:inline-flex}.flex-none{flex:none}.shrink{flex-shrink:1}.grow{flex-grow:1}.table{display:table}.-translate-y-20{--un-translate-y:-5rem;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.focus\:translate-y-0:focus{--un-translate-y:0;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.resize{resize:both}.place-items-center{place-items:center}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-items-start{justify-items:start}.justify-items-center{justify-items:center}.\!gap-0{gap:0!important}.\!gap-3{gap:.75rem!important}.gap-\[18px\]{gap:18px}.gap-\[var\(--fwt-page-inset\)\]{gap:var(--fwt-page-inset)}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.\!gap-y-1{row-gap:.25rem!important}.gap-x-2{column-gap:.5rem}.gap-y-1{row-gap:.25rem}.overflow-hidden{overflow:hidden}.\!truncate{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.\!whitespace-nowrap{white-space:nowrap!important}.b,.border{border-width:1px}.border-0{border-width:0px}.border-b{border-bottom-width:1px}.rounded{border-radius:.25rem}.rounded-\[var\(--winui-overlay-corner-radius\,8px\)\]{border-radius:var(--winui-overlay-corner-radius,8px)}.rounded-md{border-radius:.375rem}.border-solid{border-style:solid}.border-b-solid{border-bottom-style:solid}.\!bg-transparent{background-color:transparent!important}.bg-transparent{background-color:transparent}.\!p-\[var\(--fwt-panel-inset\)\]{padding:var(--fwt-panel-inset)!important}.\!p-0{padding:0!important}.p-\[22px_var\(--fwt-page-inset\)_var\(--fwt-page-inset\)\]{padding:22px var(--fwt-page-inset) var(--fwt-page-inset)}.p-\[var\(--fwt-panel-inset\)\]{padding:var(--fwt-panel-inset)}.p-0{padding:0}.p-4{padding:1rem}.\!px-\[10px\]{padding-left:10px!important;padding-right:10px!important}.\!px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.\!py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.\!py-4{padding-top:1rem!important;padding-bottom:1rem!important}.px,.px-4{padding-left:1rem;padding-right:1rem}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[var\(--fwt-panel-inset\)\]{padding-left:var(--fwt-panel-inset);padding-right:var(--fwt-panel-inset)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-\[var\(--spacingVerticalSNudge\)\]{padding-top:var(--spacingVerticalSNudge);padding-bottom:var(--spacingVerticalSNudge)}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-center{text-align:center}.text-left{text-align:left}.indent{text-indent:1.5rem}.text-fui-base300{font-size:var(--fontSizeBase300);line-height:1}.leading-\[var\(--lineHeightBase300\)\]{line-height:var(--lineHeightBase300)}.underline,.hover\:underline:hover{text-decoration-line:underline}.no-underline{text-decoration:none}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline{outline-style:solid}.ring{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\@container{container-type:inline-size}@media(max-width:680px){.max-\[680px\]\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.max-\[680px\]\:p-4{padding:1rem}}@media(max-width:900px){.max-\[900px\]\:grid-rows-\[58px_minmax\(0\,1fr\)\]{grid-template-rows:58px minmax(0,1fr)}.max-\[900px\]\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.max-\[900px\]\:hidden{display:none}.max-\[900px\]\:flex{display:flex}.max-\[900px\]\:flex-col{flex-direction:column}.max-\[900px\]\:items-stretch{align-items:stretch}.max-\[900px\]\:justify-start{justify-content:flex-start}}:root{--fwt-page-inset: 28px;--fwt-panel-inset: 16px}@media(max-width:680px){:root{--fwt-page-inset: 16px}}.fwt-badge-hue{--fwt-badge-fill: var(--fwt-badge-fill-light);--fwt-chip-stroke: var(--fwt-badge-stroke-light);--fwt-badge-label: var(--fwt-badge-label-light)}:root{--fwt-elevation-edge-top: var(--winui-control-stroke-default);--fwt-elevation-edge-bottom: var(--winui-control-stroke-secondary)}@media(prefers-color-scheme:dark){:root:not([data-fwt-theme=light]) .fwt-badge-hue{--fwt-badge-fill: var(--fwt-badge-fill-dark);--fwt-chip-stroke: var(--fwt-badge-stroke-dark);--fwt-badge-label: var(--fwt-badge-label-dark)}:root:not([data-fwt-theme=light]){--fwt-elevation-edge-top: var(--winui-control-stroke-secondary);--fwt-elevation-edge-bottom: var(--winui-control-stroke-default)}}:root[data-fwt-theme=dark] .fwt-badge-hue{--fwt-badge-fill: var(--fwt-badge-fill-dark);--fwt-chip-stroke: var(--fwt-badge-stroke-dark);--fwt-badge-label: var(--fwt-badge-label-dark)}:root[data-fwt-theme=dark]{--fwt-elevation-edge-top: var(--winui-control-stroke-secondary);--fwt-elevation-edge-bottom: var(--winui-control-stroke-default)}:root{--fwt-font-size-mono: 13px;--fwt-line-height-mono: 20px;--fwt-font-size-mono-base100: 9px;--fwt-line-height-mono-base100: 14px;--fwt-font-size-mono-base500: 17px;--fwt-line-height-mono-base500: 24px;--fwt-font-size-mono-xs: 11px;--fwt-line-height-mono-xs: 16px}button,input,select,textarea{font:inherit}code,kbd,pre,samp{font-family:var(--fontFamilyMonospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}:where(code,kbd,samp){font-size:calc(1em - 1px)!important;background-color:transparent;color:inherit}:where(strong,b){font-weight:var(--fontWeightSemibold)}pre,.font-mono{font-size:var(--fwt-font-size-mono)!important;line-height:var(--fwt-line-height-mono)!important}.font-mono :where(button,input,select,textarea,code,kbd,pre,samp),pre :where(code,kbd,samp){font-size:inherit!important}.mono-size-100{--fwt-font-size-mono: var(--fwt-font-size-mono-base100);--fwt-line-height-mono: var(--fwt-line-height-mono-base100)}.mono-size-xs{--fwt-font-size-mono: var(--fwt-font-size-mono-xs);--fwt-line-height-mono: var(--fwt-line-height-mono-xs)}.mono-display{font-size:var(--fwt-font-size-mono-base500)!important;line-height:var(--fwt-line-height-mono-base500)!important}.font-mono,.font-mono button,.font-mono input,.font-mono select,.font-mono textarea{font-family:var(--fontFamilyMonospace)!important}/*! 
  * OverlayScrollbars
  * Version: 2.13.0
  * 

package/dist/index.js

@@ -2704,29 +2704,15 @@ var readableTone = (hex, surface) => {
 };
 
 // src/components/ui/badge-hue.ts
-var { makeStyles: makeStyles2 } = fluentComponents;
 var HARDEST_BADGE_SURFACE = { light: "#EBF3FC", dark: "#434343" };
 var BADGE_FILL_ALPHA = 0.1;
 var BADGE_STROKE_ALPHA = 0.35;
-var useStyles2 = makeStyles2({
-  scheme: {
-    "--fwt-badge-fill": "var(--fwt-badge-fill-light)",
-    "--fwt-chip-stroke": "var(--fwt-badge-stroke-light)",
-    "--fwt-badge-label": "var(--fwt-badge-label-light)",
-    "@media (prefers-color-scheme: dark)": {
-      "--fwt-badge-fill": "var(--fwt-badge-fill-dark)",
-      "--fwt-chip-stroke": "var(--fwt-badge-stroke-dark)",
-      "--fwt-badge-label": "var(--fwt-badge-label-dark)"
-    }
-  }
-});
 var useBadgeHue = (hue) => {
-  const styles = useStyles2();
   const pair = typeof hue === "string" ? { light: hue, dark: hue } : hue;
   const fill = { light: alphaColor(pair.light, BADGE_FILL_ALPHA), dark: alphaColor(pair.dark, BADGE_FILL_ALPHA) };
   const label = (own, surface) => readableTone(own, blendHex(own, BADGE_FILL_ALPHA, surface));
   return {
-    className: styles.scheme,
+    className: "fwt-badge-hue",
     style: {
       "--fwt-badge-fill-light": fill.light,
       "--fwt-badge-fill-dark": fill.dark,
@@ -2743,8 +2729,8 @@ var useBadgeHue = (hue) => {
 
 // src/components/ui/chip.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var { Tag, makeStyles: makeStyles3, mergeClasses } = fluentComponents;
-var useStyles3 = makeStyles3({
+var { Tag, makeStyles: makeStyles2, mergeClasses } = fluentComponents;
+var useStyles2 = makeStyles2({
   // Fluent sizes the chip to its content, so a long label carries the chip
   // past the column that holds it.
   root: { maxWidth: "100%" },
@@ -2762,7 +2748,7 @@ var useStyles3 = makeStyles3({
   }
 });
 function Chip({ children, className, icon, style, textRef, ...trigger }) {
-  const styles = useStyles3();
+  const styles = useStyles2();
   return /* @__PURE__ */ jsx6(
     Tag,
     {
@@ -5719,8 +5705,8 @@ var Textarea = forwardRef3(
 
 // src/components/ui/choice-group.tsx
 import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
-var { makeStyles: makeStyles4, tokens } = fluentComponents;
-var useStyles4 = makeStyles4({
+var { makeStyles: makeStyles3, tokens } = fluentComponents;
+var useStyles3 = makeStyles3({
   // The items sit flush: SelectorBar's horizontal StackLayout states no spacing,
   // so each item's 12px of side padding is the whole distance between one label
   // and the next. SelectorBarItemSpacing, 8, is the icon-to-text gap and these
@@ -5870,7 +5856,7 @@ function ChoiceGroup({
   readOnly,
   value
 }) {
-  const styles = useStyles4();
+  const styles = useStyles3();
   const name = useId();
   const selectedIndex = items.findIndex((item) => item.value === value);
   const handleKeyDown = (event) => {
@@ -6829,8 +6815,8 @@ var useCopyToClipboard = () => {
 
 // src/components/ui/code-block.tsx
 import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
-var { Button: Button2, makeStyles: makeStyles5, mergeClasses: mergeClasses4 } = fluentComponents;
-var useStyles5 = makeStyles5({
+var { Button: Button2, makeStyles: makeStyles4, mergeClasses: mergeClasses4 } = fluentComponents;
+var useStyles4 = makeStyles4({
   // ControlCornerRadius. The clip is why the region's focus visual below is
   // drawn inside the viewport rather than around it.
   // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/Expander/Expander.xaml#L26
@@ -6895,7 +6881,7 @@ var useStyles5 = makeStyles5({
 });
 function CodeBlock({ code, collapsed = false, copyOutcome, disabled = false, header, language, onCopy, wrap = false }) {
   const { t: t2 } = useTranslation();
-  const styles = useStyles5();
+  const styles = useStyles4();
   const copyLabel = useCopyLabel();
   const highlighted = useMemo2(
     () => highlight(code, language),
@@ -7011,8 +6997,8 @@ function OutcomeMessageBar({
 
 // src/components/ui/confirm-dialog.tsx
 import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
-var { Button: Button4, DialogActions, DialogTitle, makeStyles: makeStyles6, mergeClasses: mergeClasses6 } = fluentComponents;
-var useStyles6 = makeStyles6({
+var { Button: Button4, DialogActions, DialogTitle, makeStyles: makeStyles5, mergeClasses: mergeClasses6 } = fluentComponents;
+var useStyles5 = makeStyles5({
   // The label is StaticInverted because the fill does not follow the theme.
   // Not OnBrand: ../../winui/theme.ts re-points it at WinUI's
   // TextOnAccentFillColorPrimary, which goes black in dark, reading 3.46:1 at
@@ -7058,7 +7044,7 @@ function ConfirmDialog({
   title
 }) {
   const { t: t2 } = useTranslation();
-  const styles = useStyles6();
+  const styles = useStyles5();
   return /* @__PURE__ */ jsx14(
     DialogShell,
     {
@@ -7100,7 +7086,7 @@ function ConfirmDialog({
 }
 
 // src/components/ui/danger.ts
-var { buttonClassNames, makeStyles: makeStyles7 } = fluentComponents;
+var { buttonClassNames, makeStyles: makeStyles6 } = fluentComponents;
 var RED = "var(--winui-system-fill-critical) !important";
 var FORCED = "Highlight !important";
 var ICON = `& .${buttonClassNames.icon}`;
@@ -7110,7 +7096,7 @@ var PRESSED = `${ENABLED}:active`;
 var KEYBOARD = `${ENABLED}[data-fui-focus-visible]`;
 var buttonPaint = { color: RED, [ICON]: { color: RED } };
 var buttonForcedPaint = { color: FORCED, [ICON]: { color: FORCED } };
-var useStyles7 = makeStyles7({
+var useStyles6 = makeStyles6({
   button: {
     [HOVER]: buttonPaint,
     [PRESSED]: buttonPaint,
@@ -7132,8 +7118,8 @@ var useStyles7 = makeStyles7({
     }
   }
 });
-var useDangerActionClasses = () => useStyles7();
-var useTextStyles = makeStyles7({
+var useDangerActionClasses = () => useStyles6();
+var useTextStyles = makeStyles6({
   danger: { color: "var(--winui-system-fill-critical)" }
 });
 var useDangerTextClass = () => useTextStyles().danger;
@@ -7208,7 +7194,7 @@ function ErrorStack({ children }) {
 
 // src/components/ui/status-badge.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
-var { Badge, makeStyles: makeStyles8, mergeClasses: mergeClasses9 } = fluentComponents;
+var { Badge, makeStyles: makeStyles7, mergeClasses: mergeClasses9 } = fluentComponents;
 var TONE_HUES = {
   accent: { light: "#0078d4", dark: "#4cc2ff" },
   danger: { light: "#c42b1c", dark: "#ff99a4" },
@@ -7218,7 +7204,7 @@ var TONE_HUES = {
 };
 var CHIP_ROOT_PADDING = "5px";
 var LABEL_INSET = `calc(var(--strokeWidthThin) + ${CHIP_ROOT_PADDING} + var(--spacingHorizontalXXS))`;
-var useStyles8 = makeStyles8({
+var useStyles7 = makeStyles7({
   root: {
     paddingLeft: LABEL_INSET,
     paddingRight: LABEL_INSET
@@ -7226,14 +7212,14 @@ var useStyles8 = makeStyles8({
 });
 function StatusBadge({ children, className, tone }) {
   const hue = useBadgeHue(TONE_HUES[tone]);
-  const styles = useStyles8();
+  const styles = useStyles7();
   return /* @__PURE__ */ jsx18(Badge, { appearance: "tint", className: mergeClasses9(styles.root, hue.className, className), size: "large", style: hue.style, children });
 }
 
 // src/components/ui/http-badge.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
-var { makeStyles: makeStyles9 } = fluentComponents;
-var useStyles9 = makeStyles9({
+var { makeStyles: makeStyles8 } = fluentComponents;
+var useStyles8 = makeStyles8({
   root: {
     fontFamily: "var(--fontFamilyMonospace)",
     minWidth: "48px",
@@ -7241,7 +7227,7 @@ var useStyles9 = makeStyles9({
   }
 });
 function HttpBadge({ children, tone }) {
-  const styles = useStyles9();
+  const styles = useStyles8();
   return /* @__PURE__ */ jsx19(StatusBadge, { className: styles.root, tone, children: /* @__PURE__ */ jsx19("span", { translate: "no", children }) });
 }
 function HttpMethodBadge({ method }) {
@@ -7416,7 +7402,7 @@ function Panel({ className, padding = "content", ...props }) {
 
 // src/components/ui/progress-ring.tsx
 import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
-var { makeStyles: makeStyles10, mergeClasses: mergeClasses12 } = fluentComponents;
+var { makeStyles: makeStyles9, mergeClasses: mergeClasses12 } = fluentComponents;
 var DIAMETER = 32;
 var STROKE = 4;
 var RADIUS = (DIAMETER - STROKE) / 2;
@@ -7427,7 +7413,7 @@ var TONE_STROKE = {
   caution: "var(--winui-system-fill-caution)",
   critical: "var(--winui-system-fill-critical)"
 };
-var useStyles10 = makeStyles10({
+var useStyles9 = makeStyles9({
   // A forced-colours palette repaints background and border colours but not an
   // SVG stroke, so each ring names its system colour itself: Highlight is what
   // HighContrast gives ProgressRingForegroundThemeBrush through
@@ -7446,7 +7432,7 @@ var useStyles10 = makeStyles10({
   }
 });
 function ProgressRing({ className, percent, size = 16, tone }) {
-  const styles = useStyles10();
+  const styles = useStyles9();
   const filled = Math.max(0, Math.min(100, percent)) / 100;
   return /* @__PURE__ */ jsxs13(
     "svg",
@@ -7494,7 +7480,7 @@ function ProgressRing({ className, percent, size = 16, tone }) {
 import { ReOrderDotsVerticalRegular } from "@fluentui/react-icons";
 import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-var { Button: Button5, makeStyles: makeStyles11, mergeClasses: mergeClasses13 } = fluentComponents;
+var { Button: Button5, makeStyles: makeStyles10, mergeClasses: mergeClasses13 } = fluentComponents;
 var REORDER_OPACITY = 0.8;
 var DRAG_RETURN_MS = 200;
 var LIST_ATTRIBUTE = "data-reorder-list";
@@ -7504,7 +7490,7 @@ var EDGE_ATTRIBUTE = "data-reorder-edge";
 var HANDLE_ATTRIBUTE = "data-reorder-handle";
 var DRAG_Y = "--fwt-reorder-drag-y";
 var TRACKING_TRANSFORM = { transform: `translateY(var(${DRAG_Y}, 0px))` };
-var useStyles11 = makeStyles11({
+var useStyles10 = makeStyles10({
   // A drag that starts on the handle travels over the rows, and without this
   // the browser reads that travel as a text selection across them.
   list: { [`&[${REORDERING_ATTRIBUTE}]`]: { userSelect: "none" } },
@@ -7593,7 +7579,7 @@ var siblingHandles = (handle) => {
   return [...list.querySelectorAll(`[${HANDLE_ATTRIBUTE}]`)].filter((element) => element.closest(`[${LIST_ATTRIBUTE}]`) === list && !element.hasAttribute("disabled"));
 };
 function useReorderList({ busy = false, disabled = false, length, onDrop, onDropError, onReorder }) {
-  const styles = useStyles11();
+  const styles = useStyles10();
   const gestureRef = useRef6(null);
   const settleRef = useRef6(void 0);
   const mountedRef = useRef6(true);
@@ -7754,7 +7740,7 @@ function useReorderList({ busy = false, disabled = false, length, onDrop, onDrop
   };
 }
 function ReorderHandle({ label, ...gesture }) {
-  const styles = useStyles11();
+  const styles = useStyles10();
   return /* @__PURE__ */ jsx28(
     Button5,
     {
@@ -7772,11 +7758,11 @@ function ReorderHandle({ label, ...gesture }) {
 // src/components/ui/resource-list.tsx
 import { AddRegular, ArrowClockwiseRegular } from "@fluentui/react-icons";
 import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
-var { Button: Button6, Spinner: Spinner3, Tooltip: Tooltip2, makeStyles: makeStyles12, mergeClasses: mergeClasses14 } = fluentComponents;
+var { Button: Button6, Spinner: Spinner3, Tooltip: Tooltip2, makeStyles: makeStyles11, mergeClasses: mergeClasses14 } = fluentComponents;
 var DEFAULT_ROW_HEIGHT = "44px";
 var ROW_HEIGHT = "--fwt-resource-row-height";
 var EDGE_INSET = "var(--fwt-panel-inset)";
-var useStyles12 = makeStyles12({
+var useStyles11 = makeStyles11({
   table: {
     "& .fui-TableRow": { height: `var(${ROW_HEIGHT})` },
     // By type rather than by position: a DataGrid row carries Tabster's focus
@@ -7809,7 +7795,7 @@ var useStyles12 = makeStyles12({
   emptyState: { padding: EDGE_INSET }
 });
 function ResourceListPanel({ className, rowHeight = DEFAULT_ROW_HEIGHT, style, ...props }) {
-  const styles = useStyles12();
+  const styles = useStyles11();
   return /* @__PURE__ */ jsx29(
     Panel,
     {
@@ -7853,7 +7839,7 @@ function ResourceListActions(props) {
   ] });
 }
 function ResourceListEmptyState({ children }) {
-  const styles = useStyles12();
+  const styles = useStyles11();
   return /* @__PURE__ */ jsx29(EmptyStateLine, { className: styles.emptyState, children });
 }
 
@@ -7948,7 +7934,7 @@ function SectionHeader({ actions, description, info, level, title, titleId, trun
 // src/components/ui/settings-card.tsx
 import { useId as useId3, useState as useState8 } from "react";
 import { Fragment as Fragment2, jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
-var { Text: Text5, makeStyles: makeStyles13, mergeClasses: mergeClasses17, shorthands } = fluentComponents;
+var { Text: Text5, makeStyles: makeStyles12, mergeClasses: mergeClasses17, shorthands } = fluentComponents;
 var ICON_MARGIN_START = "2px";
 var ICON_MARGIN_END = "20px";
 var ICON_SIZE = "24px";
@@ -7958,7 +7944,7 @@ var ICON_COLUMN_VAR = "var(--fwt-settings-icon-column, 0px)";
 var WRAPPED = "@container fwt-settings-row (width < 476px)";
 var WRAPPED_WITH_ICON = "@container fwt-settings-row (286px <= width < 476px)";
 var WRAPPED_NO_ICON = "@container fwt-settings-row (width < 286px)";
-var useStyles13 = makeStyles13({
+var useStyles12 = makeStyles12({
   // Containment sits one level out of the row so the query measures the same
   // box the toolkit's trigger reads (this element carries no padding or
   // border), and so the wrapped state can style the row itself -- a container
@@ -8030,14 +8016,12 @@ var useStyles13 = makeStyles13({
       // and the dark one does not.
       // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L382-L390
       // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L186-L191
-      borderTopColor: "var(--winui-control-stroke-default)",
+      // base.css picks the two stops per scheme, where `data-fwt-theme` can
+      // override the system scheme (local adaptation, UPSTREAM.md).
+      borderTopColor: "var(--fwt-elevation-edge-top)",
       borderRightColor: "var(--winui-control-stroke-default)",
-      borderBottomColor: "var(--winui-control-stroke-secondary)",
-      borderLeftColor: "var(--winui-control-stroke-default)",
-      "@media (prefers-color-scheme: dark)": {
-        borderTopColor: "var(--winui-control-stroke-secondary)",
-        borderBottomColor: "var(--winui-control-stroke-default)"
-      }
+      borderBottomColor: "var(--fwt-elevation-edge-bottom)",
+      borderLeftColor: "var(--winui-control-stroke-default)"
     },
     // `:has` alongside each pointer state: the expander's own press lands on the
     // overlay inside the row, and a row that reacts only to a press on itself
@@ -8317,7 +8301,7 @@ var useStyles13 = makeStyles13({
   readoutDisabled: { color: "var(--winui-text-fill-disabled)" }
 });
 function CardText({ description, header, icon, id }) {
-  const styles = useStyles13();
+  const styles = useStyles12();
   return /* @__PURE__ */ jsxs16(Fragment2, { children: [
     icon !== void 0 && /* @__PURE__ */ jsx33("span", { "aria-hidden": true, className: styles.icon, ...{ [ICON_MARKER]: "" }, children: icon }),
     /* @__PURE__ */ jsxs16("span", { className: styles.text, children: [
@@ -8327,7 +8311,7 @@ function CardText({ description, header, icon, id }) {
   ] });
 }
 function SettingsSwitch({ checked, disabled, label, onChange }) {
-  const styles = useStyles13();
+  const styles = useStyles12();
   const { t: t2 } = useTranslation();
   return /* @__PURE__ */ jsxs16("span", { className: styles.switchRow, children: [
     /* @__PURE__ */ jsx33(Text5, { className: disabled === true ? styles.readoutDisabled : void 0, children: t2(checked ? "common.on" : "common.off") }),
@@ -8335,14 +8319,14 @@ function SettingsSwitch({ checked, disabled, label, onChange }) {
   ] });
 }
 function SettingsCard({ action, description, header, icon }) {
-  const styles = useStyles13();
+  const styles = useStyles12();
   return /* @__PURE__ */ jsx33("div", { className: styles.row, children: /* @__PURE__ */ jsxs16("div", { className: styles.card, children: [
     /* @__PURE__ */ jsx33(CardText, { description, header, icon }),
     action !== void 0 && /* @__PURE__ */ jsx33("span", { className: styles.action, children: action })
   ] }) });
 }
 function SettingsExpander({ action, children, defaultOpen = false, description, disclosureDisabled = false, header, icon, revealOn, toggledOn }) {
-  const styles = useStyles13();
+  const styles = useStyles12();
   const [open, setOpen] = useState8(defaultOpen);
   const [toggleWas, setToggleWas] = useState8(toggledOn);
   if (toggledOn !== void 0 && toggledOn !== toggleWas) {
@@ -8390,8 +8374,8 @@ function SwitchSetting({ checked, description, label, onChange }) {
 
 // src/components/ui/table-actions.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
-var { TableCell, TableHeaderCell, makeStyles: makeStyles14, mergeClasses: mergeClasses18 } = fluentComponents;
-var useStyles14 = makeStyles14({
+var { TableCell, TableHeaderCell, makeStyles: makeStyles13, mergeClasses: mergeClasses18 } = fluentComponents;
+var useStyles13 = makeStyles13({
   trailing: {
     textAlign: "right",
     "& .fui-TableHeaderCell__button": { justifyContent: "flex-end" }
@@ -8402,19 +8386,19 @@ var useStyles14 = makeStyles14({
   }
 });
 function TableTrailingHeader({ className, ...props }) {
-  const styles = useStyles14();
+  const styles = useStyles13();
   return /* @__PURE__ */ jsx35(TableHeaderCell, { ...props, className: mergeClasses18(styles.trailing, className) });
 }
 function TableTrailingCell({ className, ...props }) {
-  const styles = useStyles14();
+  const styles = useStyles13();
   return /* @__PURE__ */ jsx35(TableCell, { ...props, className: mergeClasses18(styles.trailing, className) });
 }
 function TableCentredHeader({ className, ...props }) {
-  const styles = useStyles14();
+  const styles = useStyles13();
   return /* @__PURE__ */ jsx35(TableHeaderCell, { ...props, className: mergeClasses18(styles.centred, className) });
 }
 function TableCentredCell({ className, ...props }) {
-  const styles = useStyles14();
+  const styles = useStyles13();
   return /* @__PURE__ */ jsx35(TableCell, { ...props, className: mergeClasses18(styles.centred, className) });
 }
 var stopRowSelection = { onClick: (event) => event.stopPropagation() };
@@ -8696,9 +8680,9 @@ var {
   NavDrawerHeader,
   NavItem,
   NavSectionHeader,
-  makeStyles: makeStyles15
+  makeStyles: makeStyles14
 } = fluentComponents;
-var useStyles15 = makeStyles15({
+var useStyles14 = makeStyles14({
   // 36px is a floor rather than a fixed height, so a two-line label lengthens
   // the row instead of being cut. The left-pane template's 40px icon column
   // plus the presenter's 4 puts the label at 44; Fluent's icon slot is 20px
@@ -8720,7 +8704,7 @@ var useStyles15 = makeStyles15({
 });
 var NAV_INDICATOR_INSET = 0;
 function PaneLink({ item, onNavigate, pending, href }) {
-  const styles = useStyles15();
+  const styles = useStyles14();
   const address = useRouteAddress(href);
   const handleClick = (event) => {
     const followsInThisView = event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
@@ -8743,7 +8727,7 @@ function PaneLink({ item, onNavigate, pending, href }) {
   );
 }
 function PaneItem({ item, onNavigate, pendingValue }) {
-  const styles = useStyles15();
+  const styles = useStyles14();
   if (item.href !== void 0) {
     return /* @__PURE__ */ jsx42(PaneLink, { href: item.href, item, onNavigate, pending: pendingValue === item.value });
   }