/* Generated from @fluentui/tokens (source of truth: data/tokens/fluent-tokens.json; actual path may be overridden via --tokens).
   Token names match @fluentui/tokens exactly. Consume as var(--TokenName). */
:root {
  --borderRadius2XLarge: 12px;
  --borderRadius3XLarge: 16px;
  --borderRadius4XLarge: 24px;
  --borderRadius5XLarge: 32px;
  --borderRadius6XLarge: 40px;
  --borderRadiusCircular: 10000px;
  --borderRadiusLarge: 6px;
  --borderRadiusMedium: 4px;
  --borderRadiusNone: 0;
  --borderRadiusSmall: 2px;
  --borderRadiusXLarge: 8px;
  --curveAccelerateMax: cubic-bezier(0.9,0.1,1,0.2);
  --curveAccelerateMid: cubic-bezier(1,0,1,1);
  --curveAccelerateMin: cubic-bezier(0.8,0,0.78,1);
  --curveDecelerateMax: cubic-bezier(0.1,0.9,0.2,1);
  --curveDecelerateMid: cubic-bezier(0,0,0,1);
  --curveDecelerateMin: cubic-bezier(0.33,0,0.1,1);
  --curveEasyEase: cubic-bezier(0.33,0,0.67,1);
  --curveEasyEaseMax: cubic-bezier(0.8,0,0.2,1);
  --curveLinear: cubic-bezier(0,0,1,1);
  --durationFast: 150ms;
  --durationFaster: 100ms;
  --durationGentle: 250ms;
  --durationNormal: 200ms;
  --durationSlow: 300ms;
  --durationSlower: 400ms;
  --durationUltraFast: 50ms;
  --durationUltraSlow: 500ms;
  --fontFamilyBase: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --fontFamilyMonospace: Consolas, 'Courier New', Courier, monospace;
  --fontFamilyNumeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --fontSizeBase100: 10px;
  --fontSizeBase200: 12px;
  --fontSizeBase300: 14px;
  --fontSizeBase400: 16px;
  --fontSizeBase500: 20px;
  --fontSizeBase600: 24px;
  --fontSizeHero1000: 68px;
  --fontSizeHero700: 28px;
  --fontSizeHero800: 32px;
  --fontSizeHero900: 40px;
  --fontWeightBold: 700;
  --fontWeightMedium: 500;
  --fontWeightRegular: 400;
  --fontWeightSemibold: 600;
  --lineHeightBase100: 14px;
  --lineHeightBase200: 16px;
  --lineHeightBase300: 20px;
  --lineHeightBase400: 22px;
  --lineHeightBase500: 28px;
  --lineHeightBase600: 32px;
  --lineHeightHero1000: 92px;
  --lineHeightHero700: 36px;
  --lineHeightHero800: 40px;
  --lineHeightHero900: 52px;
  --spacingHorizontalL: 16px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalMNudge: 10px;
  --spacingHorizontalNone: 0;
  --spacingHorizontalS: 8px;
  --spacingHorizontalSNudge: 6px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXS: 4px;
  --spacingHorizontalXXL: 24px;
  --spacingHorizontalXXS: 2px;
  --spacingHorizontalXXXL: 32px;
  --spacingVerticalL: 16px;
  --spacingVerticalM: 12px;
  --spacingVerticalMNudge: 10px;
  --spacingVerticalNone: 0;
  --spacingVerticalS: 8px;
  --spacingVerticalSNudge: 6px;
  --spacingVerticalXL: 20px;
  --spacingVerticalXS: 4px;
  --spacingVerticalXXL: 24px;
  --spacingVerticalXXS: 2px;
  --spacingVerticalXXXL: 32px;
  --strokeWidthThick: 2px;
  --strokeWidthThicker: 3px;
  --strokeWidthThickest: 4px;
  --strokeWidthThin: 1px;
}
:root[data-theme="light"], :root[data-md3-scheme="light"], html[data-style="fluent"][data-md3-scheme="light"], .fluent-light {
  --colorBackgroundOverlay: rgba(0, 0, 0, 0.4);
  --colorBrandBackground: #d83b6e;
  --colorBrandBackground2: #fdf0f4;
  --colorBrandBackground2Hover: #fce1ea;
  --colorBrandBackground2Pressed: #f8c2d3;
  --colorBrandBackground3Static: #b82b58;
  --colorBrandBackground4Static: #8c193e;
  --colorBrandBackgroundHover: #c42f5e;
  --colorBrandBackgroundInverted: #ffffff;
  --colorBrandBackgroundInvertedHover: #fdf0f4;
  --colorBrandBackgroundInvertedPressed: #f8c2d3;
  --colorBrandBackgroundInvertedSelected: #fce1ea;
  --colorBrandBackgroundPressed: #a6204c;
  --colorBrandBackgroundSelected: #b82b58;
  --colorBrandBackgroundStatic: #d83b6e;
  --colorBrandForeground1: #d83b6e;
  --colorBrandForeground2: #c42f5e;
  --colorBrandForeground2Hover: #b82b58;
  --colorBrandForeground2Pressed: #8c193e;
  --colorBrandForegroundInverted: #ff7597;
  --colorBrandForegroundInvertedHover: #ff8fb2;
  --colorBrandForegroundInvertedPressed: #ff7597;
  --colorBrandForegroundLink: #c42f5e;
  --colorBrandForegroundLinkHover: #b82b58;
  --colorBrandForegroundLinkPressed: #8c193e;
  --colorBrandForegroundLinkSelected: #c42f5e;
  --colorBrandForegroundOnLight: #d83b6e;
  --colorBrandForegroundOnLightHover: #c42f5e;
  --colorBrandForegroundOnLightPressed: #a6204c;
  --colorBrandForegroundOnLightSelected: #b82b58;
  --colorBrandShadowAmbient: rgba(216, 59, 110, 0.25);
  --colorBrandShadowKey: rgba(216, 59, 110, 0.20);
  --colorBrandStroke1: #d83b6e;
  --colorBrandStroke2: #f8c2d3;
  --colorBrandStroke2Contrast: #f8c2d3;
  --colorBrandStroke2Hover: #f5a4bd;
  --colorBrandStroke2Pressed: #d83b6e;
  --colorCompoundBrandBackground: #d83b6e;
  --colorCompoundBrandBackgroundHover: #c42f5e;
  --colorCompoundBrandBackgroundPressed: #b82b58;
  --colorCompoundBrandForeground1: #d83b6e;
  --colorCompoundBrandForeground1Hover: #c42f5e;
  --colorCompoundBrandForeground1Pressed: #b82b58;
  --colorCompoundBrandStroke: #d83b6e;
  --colorCompoundBrandStrokeHover: #c42f5e;
  --colorCompoundBrandStrokePressed: #b82b58;
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground1Hover: #f5f5f5;
  --colorNeutralBackground1Pressed: #e0e0e0;
  --colorNeutralBackground1Selected: #ebebeb;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground2Hover: #f0f0f0;
  --colorNeutralBackground2Pressed: #dbdbdb;
  --colorNeutralBackground2Selected: #e6e6e6;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralBackground3Hover: #ebebeb;
  --colorNeutralBackground3Pressed: #d6d6d6;
  --colorNeutralBackground3Selected: #e0e0e0;
  --colorNeutralBackground4: #f0f0f0;
  --colorNeutralBackground4Hover: #fafafa;
  --colorNeutralBackground4Pressed: #f5f5f5;
  --colorNeutralBackground4Selected: #ffffff;
  --colorNeutralBackground5: #ebebeb;
  --colorNeutralBackground5Hover: #f5f5f5;
  --colorNeutralBackground5Pressed: #f0f0f0;
  --colorNeutralBackground5Selected: #fafafa;
  --colorNeutralBackground6: #e6e6e6;
  --colorNeutralBackground7: #00000000;
  --colorNeutralBackground7Hover: #ebebeb;
  --colorNeutralBackground7Pressed: #d6d6d6;
  --colorNeutralBackground7Selected: #00000000;
  --colorNeutralBackground8: #fcfcfc;
  --colorNeutralBackgroundAlpha: rgba(255, 255, 255, 0.5);
  --colorNeutralBackgroundAlpha2: rgba(255, 255, 255, 0.8);
  --colorNeutralBackgroundDisabled: #f0f0f0;
  --colorNeutralBackgroundDisabled2: #ffffff;
  --colorNeutralBackgroundInverted: #292929;
  --colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, 0.1);
  --colorNeutralBackgroundInvertedHover: #3d3d3d;
  --colorNeutralBackgroundInvertedPressed: #1f1f1f;
  --colorNeutralBackgroundInvertedSelected: #383838;
  --colorNeutralBackgroundStatic: #333333;
  --colorNeutralCardBackground: #fafafa;
  --colorNeutralCardBackgroundDisabled: #f0f0f0;
  --colorNeutralCardBackgroundHover: #ffffff;
  --colorNeutralCardBackgroundPressed: #f5f5f5;
  --colorNeutralCardBackgroundSelected: #ebebeb;
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground1Hover: #242424;
  --colorNeutralForeground1Pressed: #242424;
  --colorNeutralForeground1Selected: #242424;
  --colorNeutralForeground1Static: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground2BrandHover: #0f6cbd;
  --colorNeutralForeground2BrandPressed: #115ea3;
  --colorNeutralForeground2BrandSelected: #0f6cbd;
  --colorNeutralForeground2Hover: #242424;
  --colorNeutralForeground2Link: #424242;
  --colorNeutralForeground2LinkHover: #242424;
  --colorNeutralForeground2LinkPressed: #242424;
  --colorNeutralForeground2LinkSelected: #242424;
  --colorNeutralForeground2Pressed: #242424;
  --colorNeutralForeground2Selected: #242424;
  --colorNeutralForeground3: #616161;
  --colorNeutralForeground3BrandHover: #0f6cbd;
  --colorNeutralForeground3BrandPressed: #115ea3;
  --colorNeutralForeground3BrandSelected: #0f6cbd;
  --colorNeutralForeground3Hover: #424242;
  --colorNeutralForeground3Pressed: #424242;
  --colorNeutralForeground3Selected: #424242;
  --colorNeutralForeground4: #707070;
  --colorNeutralForeground5: #616161;
  --colorNeutralForeground5Hover: #242424;
  --colorNeutralForeground5Pressed: #242424;
  --colorNeutralForeground5Selected: #242424;
  --colorNeutralForegroundDisabled: #bdbdbd;
  --colorNeutralForegroundInverted: #ffffff;
  --colorNeutralForegroundInverted2: #ffffff;
  --colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, 0.4);
  --colorNeutralForegroundInvertedHover: #ffffff;
  --colorNeutralForegroundInvertedLink: #ffffff;
  --colorNeutralForegroundInvertedLinkHover: #ffffff;
  --colorNeutralForegroundInvertedLinkPressed: #ffffff;
  --colorNeutralForegroundInvertedLinkSelected: #ffffff;
  --colorNeutralForegroundInvertedPressed: #ffffff;
  --colorNeutralForegroundInvertedSelected: #ffffff;
  --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralForegroundStaticInverted: #ffffff;
  --colorNeutralShadowAmbient: rgba(0,0,0,0.12);
  --colorNeutralShadowAmbientDarker: rgba(0,0,0,0.20);
  --colorNeutralShadowAmbientLighter: rgba(0,0,0,0.06);
  --colorNeutralShadowKey: rgba(0,0,0,0.14);
  --colorNeutralShadowKeyDarker: rgba(0,0,0,0.24);
  --colorNeutralShadowKeyLighter: rgba(0,0,0,0.07);
  --colorNeutralStencil1: #e6e6e6;
  --colorNeutralStencil1Alpha: rgba(0, 0, 0, 0.1);
  --colorNeutralStencil2: #fafafa;
  --colorNeutralStencil2Alpha: rgba(0, 0, 0, 0.05);
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke1Hover: #c7c7c7;
  --colorNeutralStroke1Pressed: #b3b3b3;
  --colorNeutralStroke1Selected: #bdbdbd;
  --colorNeutralStroke2: #e0e0e0;
  --colorNeutralStroke3: #f0f0f0;
  --colorNeutralStroke4: #ebebeb;
  --colorNeutralStroke4Hover: #e0e0e0;
  --colorNeutralStroke4Pressed: #d6d6d6;
  --colorNeutralStroke4Selected: #ebebeb;
  --colorNeutralStrokeAccessible: #616161;
  --colorNeutralStrokeAccessibleHover: #575757;
  --colorNeutralStrokeAccessiblePressed: #4d4d4d;
  --colorNeutralStrokeAccessibleSelected: #0f6cbd;
  --colorNeutralStrokeAlpha: rgba(0, 0, 0, 0.05);
  --colorNeutralStrokeAlpha2: rgba(255, 255, 255, 0.2);
  --colorNeutralStrokeDisabled: #e0e0e0;
  --colorNeutralStrokeDisabled2: #ebebeb;
  --colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, 0.4);
  --colorNeutralStrokeOnBrand: #ffffff;
  --colorNeutralStrokeOnBrand2: #ffffff;
  --colorNeutralStrokeOnBrand2Hover: #ffffff;
  --colorNeutralStrokeOnBrand2Pressed: #ffffff;
  --colorNeutralStrokeOnBrand2Selected: #ffffff;
  --colorNeutralStrokeSubtle: #e0e0e0;
  --colorScrollbarOverlay: rgba(0, 0, 0, 0.5);
  --colorStrokeFocus1: #ffffff;
  --colorStrokeFocus2: #000000;
  --colorSubtleBackground: transparent;
  --colorSubtleBackgroundHover: #f5f5f5;
  --colorSubtleBackgroundInverted: transparent;
  --colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, 0.1);
  --colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, 0.3);
  --colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, 0.2);
  --colorSubtleBackgroundLightAlphaHover: rgba(255, 255, 255, 0.7);
  --colorSubtleBackgroundLightAlphaPressed: rgba(255, 255, 255, 0.5);
  --colorSubtleBackgroundLightAlphaSelected: transparent;
  --colorSubtleBackgroundPressed: #e0e0e0;
  --colorSubtleBackgroundSelected: #ebebeb;
  --colorTransparentBackground: transparent;
  --colorTransparentBackgroundHover: transparent;
  --colorTransparentBackgroundPressed: transparent;
  --colorTransparentBackgroundSelected: transparent;
  --colorTransparentStroke: transparent;
  --colorTransparentStrokeDisabled: transparent;
  --colorTransparentStrokeInteractive: transparent;
}
:root[data-theme="dark"], :root[data-md3-scheme="dark"], html[data-style="fluent"]:not([data-md3-scheme="light"]), .fluent-dark {
  --colorBackgroundOverlay: rgba(0, 0, 0, 0.5);
  --colorBrandBackground: #d83b6e;
  --colorBrandBackground2: #3a1523;
  --colorBrandBackground2Hover: #521d30;
  --colorBrandBackground2Pressed: #240b15;
  --colorBrandBackground3Static: #b82b58;
  --colorBrandBackground4Static: #8c193e;
  --colorBrandBackgroundHover: #e84d80;
  --colorBrandBackgroundInverted: #ffffff;
  --colorBrandBackgroundInvertedHover: #fdf0f4;
  --colorBrandBackgroundInvertedPressed: #f8c2d3;
  --colorBrandBackgroundInvertedSelected: #fce1ea;
  --colorBrandBackgroundPressed: #b82b58;
  --colorBrandBackgroundSelected: #b82b58;
  --colorBrandBackgroundStatic: #d83b6e;
  --colorBrandForeground1: #ff8fb2;
  --colorBrandForeground2: #ffa8c2;
  --colorBrandForeground2Hover: #ffd0de;
  --colorBrandForeground2Pressed: #fdf0f4;
  --colorBrandForegroundInverted: #d83b6e;
  --colorBrandForegroundInvertedHover: #e84d80;
  --colorBrandForegroundInvertedPressed: #b82b58;
  --colorBrandForegroundLink: #ff8fb2;
  --colorBrandForegroundLinkHover: #ffa8c2;
  --colorBrandForegroundLinkPressed: #ff7597;
  --colorBrandForegroundLinkSelected: #ff8fb2;
  --colorBrandForegroundOnLight: #d83b6e;
  --colorBrandForegroundOnLightHover: #c42f5e;
  --colorBrandForegroundOnLightPressed: #a6204c;
  --colorBrandForegroundOnLightSelected: #b82b58;
  --colorBrandShadowAmbient: rgba(0, 0, 0, 0.35);
  --colorBrandShadowKey: rgba(0, 0, 0, 0.28);
  --colorBrandStroke1: #ff7597;
  --colorBrandStroke2: #6e223e;
  --colorBrandStroke2Contrast: #6e223e;
  --colorBrandStroke2Hover: #8c2a4f;
  --colorBrandStroke2Pressed: #521d30;
  --colorCompoundBrandBackground: #ff7597;
  --colorCompoundBrandBackgroundHover: #ff8fb2;
  --colorCompoundBrandBackgroundPressed: #e84d80;
  --colorCompoundBrandForeground1: #ff8fb2;
  --colorCompoundBrandForeground1Hover: #ffa8c2;
  --colorCompoundBrandForeground1Pressed: #ff7597;
  --colorCompoundBrandStroke: #ff7597;
  --colorCompoundBrandStrokeHover: #ff8fb2;
  --colorCompoundBrandStrokePressed: #e84d80;
  --colorNeutralBackground1: #292929;
  --colorNeutralBackground1Hover: #3d3d3d;
  --colorNeutralBackground1Pressed: #1f1f1f;
  --colorNeutralBackground1Selected: #383838;
  --colorNeutralBackground2: #1f1f1f;
  --colorNeutralBackground2Hover: #333333;
  --colorNeutralBackground2Pressed: #141414;
  --colorNeutralBackground2Selected: #2e2e2e;
  --colorNeutralBackground3: #141414;
  --colorNeutralBackground3Hover: #292929;
  --colorNeutralBackground3Pressed: #0a0a0a;
  --colorNeutralBackground3Selected: #242424;
  --colorNeutralBackground4: #0a0a0a;
  --colorNeutralBackground4Hover: #1f1f1f;
  --colorNeutralBackground4Pressed: #000000;
  --colorNeutralBackground4Selected: #1a1a1a;
  --colorNeutralBackground5: #000000;
  --colorNeutralBackground5Hover: #141414;
  --colorNeutralBackground5Pressed: #050505;
  --colorNeutralBackground5Selected: #0f0f0f;
  --colorNeutralBackground6: #333333;
  --colorNeutralBackground7: #00000000;
  --colorNeutralBackground7Hover: #1a1a1a;
  --colorNeutralBackground7Pressed: #0a0a0a;
  --colorNeutralBackground7Selected: #00000000;
  --colorNeutralBackground8: #292929;
  --colorNeutralBackgroundAlpha: rgba(26, 26, 26, 0.5);
  --colorNeutralBackgroundAlpha2: rgba(31, 31, 31, 0.7);
  --colorNeutralBackgroundDisabled: #141414;
  --colorNeutralBackgroundDisabled2: #292929;
  --colorNeutralBackgroundInverted: #ffffff;
  --colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, 0.1);
  --colorNeutralBackgroundInvertedHover: #f5f5f5;
  --colorNeutralBackgroundInvertedPressed: #e0e0e0;
  --colorNeutralBackgroundInvertedSelected: #ebebeb;
  --colorNeutralBackgroundStatic: #3d3d3d;
  --colorNeutralCardBackground: #333333;
  --colorNeutralCardBackgroundDisabled: #141414;
  --colorNeutralCardBackgroundHover: #3d3d3d;
  --colorNeutralCardBackgroundPressed: #2e2e2e;
  --colorNeutralCardBackgroundSelected: #383838;
  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground1Hover: #ffffff;
  --colorNeutralForeground1Pressed: #ffffff;
  --colorNeutralForeground1Selected: #ffffff;
  --colorNeutralForeground1Static: #242424;
  --colorNeutralForeground2: #d6d6d6;
  --colorNeutralForeground2BrandHover: #479ef5;
  --colorNeutralForeground2BrandPressed: #2886de;
  --colorNeutralForeground2BrandSelected: #479ef5;
  --colorNeutralForeground2Hover: #ffffff;
  --colorNeutralForeground2Link: #d6d6d6;
  --colorNeutralForeground2LinkHover: #ffffff;
  --colorNeutralForeground2LinkPressed: #ffffff;
  --colorNeutralForeground2LinkSelected: #ffffff;
  --colorNeutralForeground2Pressed: #ffffff;
  --colorNeutralForeground2Selected: #ffffff;
  --colorNeutralForeground3: #adadad;
  --colorNeutralForeground3BrandHover: #479ef5;
  --colorNeutralForeground3BrandPressed: #2886de;
  --colorNeutralForeground3BrandSelected: #479ef5;
  --colorNeutralForeground3Hover: #d6d6d6;
  --colorNeutralForeground3Pressed: #d6d6d6;
  --colorNeutralForeground3Selected: #d6d6d6;
  --colorNeutralForeground4: #999999;
  --colorNeutralForeground5: #adadad;
  --colorNeutralForeground5Hover: #ffffff;
  --colorNeutralForeground5Pressed: #ffffff;
  --colorNeutralForeground5Selected: #ffffff;
  --colorNeutralForegroundDisabled: #5c5c5c;
  --colorNeutralForegroundInverted: #242424;
  --colorNeutralForegroundInverted2: #242424;
  --colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, 0.4);
  --colorNeutralForegroundInvertedHover: #242424;
  --colorNeutralForegroundInvertedLink: #ffffff;
  --colorNeutralForegroundInvertedLinkHover: #ffffff;
  --colorNeutralForegroundInvertedLinkPressed: #ffffff;
  --colorNeutralForegroundInvertedLinkSelected: #ffffff;
  --colorNeutralForegroundInvertedPressed: #242424;
  --colorNeutralForegroundInvertedSelected: #242424;
  --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralForegroundStaticInverted: #ffffff;
  --colorNeutralShadowAmbient: rgba(0,0,0,0.24);
  --colorNeutralShadowAmbientDarker: rgba(0,0,0,0.40);
  --colorNeutralShadowAmbientLighter: rgba(0,0,0,0.12);
  --colorNeutralShadowKey: rgba(0,0,0,0.28);
  --colorNeutralShadowKeyDarker: rgba(0,0,0,0.48);
  --colorNeutralShadowKeyLighter: rgba(0,0,0,0.14);
  --colorNeutralStencil1: #575757;
  --colorNeutralStencil1Alpha: rgba(255, 255, 255, 0.1);
  --colorNeutralStencil2: #333333;
  --colorNeutralStencil2Alpha: rgba(255, 255, 255, 0.05);
  --colorNeutralStroke1: #666666;
  --colorNeutralStroke1Hover: #757575;
  --colorNeutralStroke1Pressed: #6b6b6b;
  --colorNeutralStroke1Selected: #707070;
  --colorNeutralStroke2: #525252;
  --colorNeutralStroke3: #3d3d3d;
  --colorNeutralStroke4: #3d3d3d;
  --colorNeutralStroke4Hover: #2e2e2e;
  --colorNeutralStroke4Pressed: #242424;
  --colorNeutralStroke4Selected: #3d3d3d;
  --colorNeutralStrokeAccessible: #adadad;
  --colorNeutralStrokeAccessibleHover: #bdbdbd;
  --colorNeutralStrokeAccessiblePressed: #b3b3b3;
  --colorNeutralStrokeAccessibleSelected: #479ef5;
  --colorNeutralStrokeAlpha: rgba(255, 255, 255, 0.1);
  --colorNeutralStrokeAlpha2: rgba(255, 255, 255, 0.2);
  --colorNeutralStrokeDisabled: #424242;
  --colorNeutralStrokeDisabled2: #3d3d3d;
  --colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, 0.4);
  --colorNeutralStrokeOnBrand: #292929;
  --colorNeutralStrokeOnBrand2: #ffffff;
  --colorNeutralStrokeOnBrand2Hover: #ffffff;
  --colorNeutralStrokeOnBrand2Pressed: #ffffff;
  --colorNeutralStrokeOnBrand2Selected: #ffffff;
  --colorNeutralStrokeSubtle: #0a0a0a;
  --colorScrollbarOverlay: rgba(255, 255, 255, 0.6);
  --colorStrokeFocus1: #000000;
  --colorStrokeFocus2: #ffffff;
  --colorSubtleBackground: transparent;
  --colorSubtleBackgroundHover: #383838;
  --colorSubtleBackgroundInverted: transparent;
  --colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, 0.1);
  --colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, 0.3);
  --colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, 0.2);
  --colorSubtleBackgroundLightAlphaHover: rgba(36, 36, 36, 0.8);
  --colorSubtleBackgroundLightAlphaPressed: rgba(36, 36, 36, 0.5);
  --colorSubtleBackgroundLightAlphaSelected: transparent;
  --colorSubtleBackgroundPressed: #2e2e2e;
  --colorSubtleBackgroundSelected: #333333;
  --colorTransparentBackground: transparent;
  --colorTransparentBackgroundHover: transparent;
  --colorTransparentBackgroundPressed: transparent;
  --colorTransparentBackgroundSelected: transparent;
  --colorTransparentStroke: transparent;
  --colorTransparentStrokeDisabled: transparent;
  --colorTransparentStrokeInteractive: transparent;
}

/* ==========================================================================
   Fluent 2 Component Specifications & Skinning for MyWeb
   Strictly adheres to Fluent 2 foundations, tokens, components, and patterns.
   ========================================================================== */

/* Shadow Elevation Tokens */
:root {
  --shadow2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
  --shadow8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
  --shadow16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
  --shadow28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);
  --shadow64: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14);
}

/* Base Fluent 2 Dark Mode (Default) */
html[data-style="fluent"] {
  color-scheme: dark;
  --bg: var(--colorNeutralBackground2);
  --text: var(--colorNeutralForeground1);
  --text-dim: var(--colorNeutralForeground2);
  --text-faint: var(--colorNeutralForeground3);
  --accent: var(--colorCompoundBrandStroke);
  --accent-2: var(--colorBrandBackground);
  --line: var(--colorNeutralStroke1);
  --glass: rgba(32, 32, 32, 0.72);
  --glass-strong: rgba(41, 41, 41, 0.88);
  --font-body: var(--fontFamilyBase);
  --fluent-mica-base: #202020;
  --fluent-scrim: rgba(18, 18, 18, 0.75);
}

/* Fluent 2 Light Mode */
html[data-style="fluent"][data-md3-scheme="light"] {
  color-scheme: light;
  --bg: var(--colorNeutralBackground2);
  --text: var(--colorNeutralForeground1);
  --text-dim: var(--colorNeutralForeground2);
  --text-faint: var(--colorNeutralForeground3);
  --accent: var(--colorCompoundBrandStroke);
  --accent-2: var(--colorBrandBackground);
  --line: var(--colorNeutralStroke1);
  --glass: rgba(255, 255, 255, 0.75);
  --glass-strong: rgba(250, 250, 250, 0.92);
  --font-body: var(--fontFamilyBase);
  --fluent-mica-base: #f3f3f3;
  --fluent-scrim: rgba(245, 245, 245, 0.82);
}

/* Hide Classic Elements */
html[data-style="fluent"] .dynamic-island {
  display: none !important;
}

/* Body & Background (Windows 11 Mica Effect) */
html[data-style="fluent"] body {
  font-family: var(--fontFamilyBase);
  background-color: var(--fluent-mica-base);
  color: var(--colorNeutralForeground1);
  letter-spacing: -0.01em;
}

html[data-style="fluent"] body::before {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, color-mix(in srgb, var(--colorBrandBackground) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%, color-mix(in srgb, var(--colorNeutralBackground1) 30%, transparent), transparent 70%);
}

html[data-style="fluent"] .bg-scrim {
  opacity: 0.82;
  mix-blend-mode: normal;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fluent-mica-base) 60%, transparent) 0%,
    color-mix(in srgb, var(--fluent-mica-base) 80%, transparent) 40%,
    var(--fluent-scrim) 100%);
}

/* Page Layout */
html[data-style="fluent"] .page {
  min-height: auto;
  padding: 32px 24px;
  scroll-margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

html[data-style="fluent"] #home.page {
  min-height: 100dvh;
  padding-top: 36px;
}

html[data-style="fluent"] #github,
html[data-style="fluent"] #netease {
  padding-top: 20px;
  padding-bottom: 40px;
}

/* Hero Section */
html[data-style="fluent"] .home-inner {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacingVerticalL);
}

html[data-style="fluent"] .home-hero {
  border-radius: var(--borderRadiusCircular);
  width: 120px;
  height: 120px;
  box-shadow: var(--shadow8);
  border: 2px solid var(--colorNeutralStroke2);
}

html[data-style="fluent"] .home-greet {
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
  font-weight: var(--fontWeightSemibold);
  color: var(--colorBrandForegroundLink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[data-style="fluent"] .home-name {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: var(--fontWeightBold);
  line-height: 1.15;
  color: var(--colorNeutralForeground1);
  letter-spacing: -0.025em;
  margin: var(--spacingVerticalXS) 0;
}

html[data-style="fluent"] .typewriter-text {
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
  color: var(--colorNeutralForeground2);
}

html[data-style="fluent"] .typewriter-caret {
  background: var(--colorCompoundBrandStroke);
}

/* Fluent 2 Buttons */
html[data-style="fluent"] .explore-btn,
html[data-style="fluent"] .card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacingHorizontalS);
  padding: 8px 20px;
  min-height: 36px;
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  font-weight: var(--fontWeightSemibold);
  font-family: var(--fontFamilyBase);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
  border: 1px solid var(--colorBrandStroke1);
  box-shadow: var(--shadow2);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--durationNormal) var(--curveEasyEase);
}

html[data-style="fluent"] .explore-btn:hover,
html[data-style="fluent"] .card-btn:hover {
  background: var(--colorBrandBackgroundHover);
  box-shadow: var(--shadow4);
  transform: translateY(-1px);
}

html[data-style="fluent"] .explore-btn:active,
html[data-style="fluent"] .card-btn:active {
  background: var(--colorBrandBackgroundPressed);
  transform: translateY(0);
}

/* Social Buttons (Fluent 2 Tiles) */
html[data-style="fluent"] .social-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacingHorizontalM);
}

html[data-style="fluent"] .social-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  padding: 8px 14px;
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke1);
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightMedium);
  box-shadow: var(--shadow2);
  text-decoration: none;
  transition: all var(--durationFast) var(--curveEasyEase);
}

html[data-style="fluent"] .social-btn:hover {
  background: var(--colorNeutralBackground1Hover);
  border-color: var(--colorNeutralStroke1Hover);
  box-shadow: var(--shadow4);
  transform: translateY(-2px);
}

html[data-style="fluent"] .social-btn:active {
  background: var(--colorNeutralBackground1Pressed);
  transform: translateY(0);
}

html[data-style="fluent"] .social-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

html[data-style="fluent"][data-md3-scheme="light"] .social-btn img {
  filter: brightness(0);
  opacity: 0.75;
}

html[data-style="fluent"] .social-btn-img img {
  filter: none;
  opacity: 1;
}

html[data-style="fluent"][data-md3-scheme="light"] .social-btn-img img {
  filter: none;
  opacity: 1;
}

/* Fluent 2 Cards (Acrylic Surfaces) */
html[data-style="fluent"] .card {
  width: 100%;
  max-width: 920px;
  background: color-mix(in srgb, var(--colorNeutralBackground1) 88%, transparent);
  backdrop-filter: blur(28px) saturate(130%);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusLarge);
  box-shadow: var(--shadow4);
  padding: var(--spacingVerticalXL) var(--spacingHorizontalXXL);
  transition: box-shadow var(--durationNormal) var(--curveEasyEase), border-color var(--durationNormal) var(--curveEasyEase);
}

html[data-style="fluent"] .card:hover {
  box-shadow: var(--shadow8);
  border-color: var(--colorNeutralStroke2);
}

html[data-style="fluent"] .card-header {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalM);
  margin-bottom: var(--spacingVerticalL);
  padding-bottom: var(--spacingVerticalM);
  border-bottom: 1px solid var(--colorNeutralStrokeSubtle);
}

html[data-style="fluent"] .card-header h2 {
  font-size: var(--fontSizeBase500);
  line-height: var(--lineHeightBase500);
  font-weight: var(--fontWeightSemibold);
  color: var(--colorNeutralForeground1);
  letter-spacing: -0.01em;
}

html[data-style="fluent"] .card-logo {
  width: 28px;
  height: 28px;
}

/* GitHub Profile & Stats */
html[data-style="fluent"] .gh-profile {
  background: var(--colorNeutralBackground2);
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusMedium);
  padding: var(--spacingVerticalM) var(--spacingHorizontalL);
}

html[data-style="fluent"] .gh-avatar {
  border-radius: var(--borderRadiusCircular);
  border: 2px solid var(--colorNeutralStroke2);
}

html[data-style="fluent"] .gh-name {
  font-size: var(--fontSizeBase400);
  font-weight: var(--fontWeightBold);
  color: var(--colorNeutralForeground1);
}

html[data-style="fluent"] .gh-login {
  font-size: var(--fontSizeBase300);
  color: var(--colorNeutralForeground3);
}

html[data-style="fluent"] .gh-bio {
  font-size: var(--fontSizeBase300);
  color: var(--colorNeutralForeground2);
}

html[data-style="fluent"] .gh-stat {
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStrokeSubtle);
  border-radius: var(--borderRadiusSmall);
  padding: var(--spacingVerticalS) var(--spacingHorizontalM);
}

html[data-style="fluent"] .gh-stat b {
  color: var(--colorBrandForegroundLink);
  font-weight: var(--fontWeightBold);
}

html[data-style="fluent"] .gh-repo {
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusMedium);
  padding: var(--spacingVerticalM) var(--spacingHorizontalL);
  box-shadow: var(--shadow2);
  transition: all var(--durationFast) var(--curveEasyEase);
}

html[data-style="fluent"] .gh-repo:hover {
  background: var(--colorNeutralBackground1Hover);
  border-color: var(--colorCompoundBrandStroke);
  box-shadow: var(--shadow4);
  transform: translateY(-2px);
}

/* NetEase Music Section */
html[data-style="fluent"] .netease-profile {
  background: var(--colorNeutralBackground2);
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusMedium);
  padding: var(--spacingVerticalM) var(--spacingHorizontalL);
}

html[data-style="fluent"] .netease-avatar {
  border-radius: var(--borderRadiusCircular);
  border: 2px solid var(--colorNeutralStroke2);
}

html[data-style="fluent"] .netease-player {
  background: var(--colorNeutralBackground2);
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusMedium);
  padding: var(--spacingVerticalL) var(--spacingHorizontalXL);
}

html[data-style="fluent"] .np-cover-wrap {
  border-radius: var(--borderRadiusMedium);
  overflow: hidden;
  box-shadow: var(--shadow4);
  border: 1px solid var(--colorNeutralStroke1);
}

html[data-style="fluent"] .np-title {
  font-size: var(--fontSizeBase400);
  font-weight: var(--fontWeightBold);
  color: var(--colorNeutralForeground1);
}

html[data-style="fluent"] .np-artist {
  font-size: var(--fontSizeBase300);
  color: var(--colorNeutralForeground3);
}

html[data-style="fluent"] .np-controls button {
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke1);
  color: var(--colorNeutralForeground1);
  transition: all var(--durationFast) var(--curveEasyEase);
}

html[data-style="fluent"] .np-controls button:hover {
  background: var(--colorNeutralBackground1Hover);
  border-color: var(--colorCompoundBrandStroke);
}

html[data-style="fluent"] .np-controls .np-toggle {
  background: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
  border-color: var(--colorBrandStroke1);
}

html[data-style="fluent"] .np-controls .np-toggle:hover {
  background: var(--colorBrandBackgroundHover);
}

html[data-style="fluent"] .np-scrub {
  height: 4px;
  background: var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusCircular);
}

html[data-style="fluent"] .np-scrub::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--colorCompoundBrandStroke);
  box-shadow: var(--shadow2);
}

html[data-style="fluent"] .np-song-item {
  border-radius: var(--borderRadiusSmall);
  padding: 6px 12px;
  font-size: var(--fontSizeBase300);
  color: var(--colorNeutralForeground2);
  transition: background var(--durationFast) var(--curveEasyEase);
}

html[data-style="fluent"] .np-song-item:hover {
  background: var(--colorSubtleBackgroundHover);
  color: var(--colorNeutralForeground1);
}

html[data-style="fluent"] .np-song-item.active {
  background: var(--colorBrandBackground2);
  color: var(--colorBrandForegroundLink);
  font-weight: var(--fontWeightSemibold);
}

/* Skills & Chips */
html[data-style="fluent"] .skill-grid {
  gap: var(--spacingHorizontalM);
}

html[data-style="fluent"] .skill {
  background: var(--colorNeutralBackground1);
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusCircular);
  padding: 6px 16px;
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightMedium);
  color: var(--colorNeutralForeground1);
  box-shadow: var(--shadow2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html[data-style="fluent"] .skill:hover {
  background: var(--colorNeutralBackground1Hover);
  border-color: var(--colorCompoundBrandStroke);
}

/* Fluent 2 Navigation View (Sidebar / Rail) */
html[data-style="fluent"] .md3-nav-rail {
  display: flex;
  position: fixed;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px;
  background: color-mix(in srgb, var(--colorNeutralBackground1) 85%, transparent);
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusLarge);
  box-shadow: var(--shadow8);
  backdrop-filter: blur(28px) saturate(130%);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  z-index: 900;
  width: auto;
}

html[data-style="fluent"] .md3-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground2);
  text-decoration: none;
  transition: all var(--durationFast) var(--curveEasyEase);
}

html[data-style="fluent"] .md3-nav-item:hover {
  background: var(--colorSubtleBackgroundHover);
  color: var(--colorNeutralForeground1);
}

html[data-style="fluent"] .md3-nav-item.active {
  background: var(--colorSubtleBackgroundPressed);
  color: var(--colorCompoundBrandForeground1);
}

html[data-style="fluent"] .md3-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 2px;
  background: var(--colorCompoundBrandStroke);
}

html[data-style="fluent"] .md3-nav-item__indicator {
  display: none !important;
}

html[data-style="fluent"] .md3-nav-item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Fluent 2 Tools / Command Buttons (Theme & Look) */
html[data-style="fluent"] .md3-tools {
  display: flex;
  position: fixed;
  top: 18px;
  right: 20px;
  gap: 8px;
  z-index: 999;
}

html[data-style="fluent"] .md3-fab {
  width: 38px;
  height: 38px;
  border-radius: var(--borderRadiusMedium);
  background: color-mix(in srgb, var(--colorNeutralBackground1) 85%, transparent);
  border: 1px solid var(--colorNeutralStroke1);
  box-shadow: var(--shadow4);
  color: var(--colorNeutralForeground1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--durationFast) var(--curveEasyEase);
}

html[data-style="fluent"] .md3-fab:hover {
  background: var(--colorNeutralBackground1Hover);
  border-color: var(--colorCompoundBrandStroke);
  box-shadow: var(--shadow8);
  transform: translateY(-2px);
}

html[data-style="fluent"] .md3-fab svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Mobile Navigation Bar */
@media (max-width: 839px) {
  html[data-style="fluent"] .md3-nav-rail {
    display: none !important;
  }

  html[data-style="fluent"] .md3-nav-bar {
    display: flex;
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    height: 52px;
    background: color-mix(in srgb, var(--colorNeutralBackground1) 88%, transparent);
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusLarge);
    box-shadow: var(--shadow16);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    z-index: 950;
    justify-content: space-around;
    align-items: center;
    padding: 0 12px;
  }

  html[data-style="fluent"] .md3-nav-bar .md3-nav-item {
    width: 48px;
    height: 38px;
    border-radius: var(--borderRadiusMedium);
  }

  html[data-style="fluent"] .md3-nav-bar .md3-nav-item.active::before {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 2px;
    width: auto;
    height: 3px;
  }

  html[data-style="fluent"] .card {
    padding: 18px 16px;
    border-radius: var(--borderRadiusMedium);
  }
}

/* Footer */
html[data-style="fluent"] .footer {
  border-top: 1px solid var(--colorNeutralStroke1);
  color: var(--colorNeutralForeground3);
  font-size: var(--fontSizeBase300);
}

html[data-style="fluent"] .footer-sites-label {
  color: var(--colorNeutralForeground2);
}

html[data-style="fluent"] .footer-site-link {
  color: var(--colorBrandForegroundLink);
  text-decoration: none;
}

html[data-style="fluent"] .footer-site-link:hover {
  text-decoration: underline;
}