@layer kotoba.hig, kotoba.glass;
@layer kotoba.hig {
:root {
  --hig-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --hig-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --hig-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --hig-text-headline-font-size: 17px;
  --hig-text-headline-line-height: 22px;
  --hig-text-headline-font-weight: 600;
  --hig-text-headline-font-family: var(--hig-font-text);
  --hig-text-subheadline-font-size: 15px;
  --hig-text-subheadline-line-height: 20px;
  --hig-text-subheadline-font-weight: 400;
  --hig-text-subheadline-font-family: var(--hig-font-text);
  --hig-text-display2-font-size: clamp(30px, 3.75vw + 6px, 48px);
  --hig-text-display2-line-height: calc(1em + 4px);
  --hig-text-display2-font-weight: 700;
  --hig-text-display2-letter-spacing: -0.015em;
  --hig-text-display2-font-family: var(--hig-font-display);
  --hig-text-title2-font-size: 22px;
  --hig-text-title2-line-height: 28px;
  --hig-text-title2-font-weight: 400;
  --hig-text-title2-font-family: var(--hig-font-display);
  --hig-text-caption2-font-size: 11px;
  --hig-text-caption2-line-height: 13px;
  --hig-text-caption2-font-weight: 400;
  --hig-text-caption2-font-family: var(--hig-font-text);
  --hig-text-title3-font-size: 20px;
  --hig-text-title3-line-height: 25px;
  --hig-text-title3-font-weight: 400;
  --hig-text-title3-font-family: var(--hig-font-display);
  --hig-text-display3-font-size: clamp(40px, 5vw + 8px, 64px);
  --hig-text-display3-line-height: calc(1em + 4px);
  --hig-text-display3-font-weight: 700;
  --hig-text-display3-letter-spacing: -0.02em;
  --hig-text-display3-font-family: var(--hig-font-display);
  --hig-text-footnote-font-size: 13px;
  --hig-text-footnote-line-height: 18px;
  --hig-text-footnote-font-weight: 400;
  --hig-text-footnote-font-family: var(--hig-font-text);
  --hig-text-title1-font-size: 28px;
  --hig-text-title1-line-height: 34px;
  --hig-text-title1-font-weight: 400;
  --hig-text-title1-font-family: var(--hig-font-display);
  --hig-text-body-font-size: 17px;
  --hig-text-body-line-height: 22px;
  --hig-text-body-font-weight: 400;
  --hig-text-body-font-family: var(--hig-font-text);
  --hig-text-callout-font-size: 16px;
  --hig-text-callout-line-height: 21px;
  --hig-text-callout-font-weight: 400;
  --hig-text-callout-font-family: var(--hig-font-text);
  --hig-text-large-title-font-size: 34px;
  --hig-text-large-title-line-height: 41px;
  --hig-text-large-title-font-weight: 400;
  --hig-text-large-title-font-family: var(--hig-font-display);
  --hig-text-caption1-font-size: 12px;
  --hig-text-caption1-line-height: 16px;
  --hig-text-caption1-font-weight: 400;
  --hig-text-caption1-font-family: var(--hig-font-text);
  --hig-text-display1-font-size: clamp(25px, 3.125vw + 5px, 40px);
  --hig-text-display1-line-height: calc(1em + 4px);
  --hig-text-display1-font-weight: 700;
  --hig-text-display1-letter-spacing: -0.01em;
  --hig-text-display1-font-family: var(--hig-font-display);
  --hig-color-secondary-label: rgba(60,60,67,0.6);
  --hig-color-tertiary-system-background: #FFFFFF;
  --hig-color-tertiary-label: rgba(60,60,67,0.3);
  --hig-color-system-grouped-background: #F2F2F7;
  --hig-color-secondary-system-fill: rgba(120,120,128,0.16);
  --hig-color-secondary-system-grouped-background: #FFFFFF;
  --hig-color-quaternary-system-fill: rgba(116,116,128,0.08);
  --hig-color-secondary-system-background: #F2F2F7;
  --hig-color-tint: #0f766e;
  --hig-color-opaque-separator: #C6C6C8;
  --hig-color-system-fill: rgba(120,120,128,0.2);
  --hig-color-quaternary-label: rgba(60,60,67,0.18);
  --hig-color-system-background: #FFFFFF;
  --hig-color-tertiary-system-fill: rgba(118,118,128,0.12);
  --hig-color-label: #000000;
  --hig-color-placeholder-text: rgba(60,60,67,0.3);
  --hig-color-tertiary-system-grouped-background: #F2F2F7;
  --hig-color-separator: rgba(60,60,67,0.36);
  --hig-palette-orange: #FF9500;
  --hig-palette-gray: #8E8E93;
  --hig-palette-gray3: #C7C7CC;
  --hig-palette-gray4: #D1D1D6;
  --hig-palette-yellow: #FFCC00;
  --hig-palette-green: #34C759;
  --hig-palette-indigo: #5856D6;
  --hig-palette-cyan: #32ADE6;
  --hig-palette-mint: #00C7BE;
  --hig-palette-gray2: #AEAEB2;
  --hig-palette-red: #FF3B30;
  --hig-palette-blue: #007AFF;
  --hig-palette-pink: #FF2D55;
  --hig-palette-teal: #30B0C7;
  --hig-palette-purple: #AF52DE;
  --hig-palette-gray6: #F2F2F7;
  --hig-palette-gray5: #E5E5EA;
  --hig-palette-brown: #A2845E;
  --hig-spacing-10: 64px;
  --hig-spacing-4: 16px;
  --hig-spacing-7: 32px;
  --hig-spacing-1: 4px;
  --hig-spacing-8: 40px;
  --hig-spacing-9: 48px;
  --hig-spacing-2: 8px;
  --hig-spacing-5: 20px;
  --hig-spacing-3: 12px;
  --hig-spacing-6: 24px;
  --hig-spacing-content-margin: 16px;
  --hig-radius-xs: 6px;
  --hig-radius-sm: 10px;
  --hig-radius-md: 14px;
  --hig-radius-lg: 20px;
  --hig-radius-xl: 28px;
  --hig-radius-capsule: 999px;
  --hig-hairline: 0.5px;
}


:root[data-appearance="light"] {
  --hig-color-secondary-label: rgba(60,60,67,0.6);
  --hig-color-tertiary-system-background: #FFFFFF;
  --hig-color-tertiary-label: rgba(60,60,67,0.3);
  --hig-color-system-grouped-background: #F2F2F7;
  --hig-color-secondary-system-fill: rgba(120,120,128,0.16);
  --hig-color-secondary-system-grouped-background: #FFFFFF;
  --hig-color-quaternary-system-fill: rgba(116,116,128,0.08);
  --hig-color-secondary-system-background: #F2F2F7;
  --hig-color-tint: #0f766e;
  --hig-color-opaque-separator: #C6C6C8;
  --hig-color-system-fill: rgba(120,120,128,0.2);
  --hig-color-quaternary-label: rgba(60,60,67,0.18);
  --hig-color-system-background: #FFFFFF;
  --hig-color-tertiary-system-fill: rgba(118,118,128,0.12);
  --hig-color-label: #000000;
  --hig-color-placeholder-text: rgba(60,60,67,0.3);
  --hig-color-tertiary-system-grouped-background: #F2F2F7;
  --hig-color-separator: rgba(60,60,67,0.36);
  --hig-palette-orange: #FF9500;
  --hig-palette-gray: #8E8E93;
  --hig-palette-gray3: #C7C7CC;
  --hig-palette-gray4: #D1D1D6;
  --hig-palette-yellow: #FFCC00;
  --hig-palette-green: #34C759;
  --hig-palette-indigo: #5856D6;
  --hig-palette-cyan: #32ADE6;
  --hig-palette-mint: #00C7BE;
  --hig-palette-gray2: #AEAEB2;
  --hig-palette-red: #FF3B30;
  --hig-palette-blue: #007AFF;
  --hig-palette-pink: #FF2D55;
  --hig-palette-teal: #30B0C7;
  --hig-palette-purple: #AF52DE;
  --hig-palette-gray6: #F2F2F7;
  --hig-palette-gray5: #E5E5EA;
  --hig-palette-brown: #A2845E;
}
}
@layer kotoba.hig {
:root { color-scheme: light dark; }

:root[data-appearance="light"] { color-scheme: light; }
body {
  margin: 0;
  background: var(--hig-color-system-background);
  color: var(--hig-color-label);
  font-family: var(--hig-text-body-font-family);
  font-size: var(--hig-text-body-font-size);
  line-height: var(--hig-text-body-line-height);
  font-weight: var(--hig-text-body-font-weight);
  letter-spacing: var(--hig-text-body-letter-spacing, normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 {
  font-family: var(--hig-text-large-title-font-family);
  font-size: var(--hig-text-large-title-font-size);
  line-height: var(--hig-text-large-title-line-height);
  font-weight: 700;
  letter-spacing: var(--hig-text-large-title-letter-spacing, normal);
  margin: 0 0 12px;
}
h2 {
  font-family: var(--hig-text-title1-font-family);
  font-size: var(--hig-text-title1-font-size);
  line-height: var(--hig-text-title1-line-height);
  font-weight: 700;
  letter-spacing: var(--hig-text-title1-letter-spacing, normal);
  margin: 0 0 12px;
}
h3 {
  font-family: var(--hig-text-title2-font-family);
  font-size: var(--hig-text-title2-font-size);
  line-height: var(--hig-text-title2-line-height);
  font-weight: 600;
  letter-spacing: var(--hig-text-title2-letter-spacing, normal);
  margin: 0 0 8px;
}
h4 {
  font-family: var(--hig-text-headline-font-family);
  font-size: var(--hig-text-headline-font-size);
  line-height: var(--hig-text-headline-line-height);
  font-weight: var(--hig-text-headline-font-weight);
  letter-spacing: var(--hig-text-headline-letter-spacing, normal);
  margin: 0 0 8px;
}
p, ul, ol {
  margin: 0 0 16px;
}
small {
  font-family: var(--hig-text-footnote-font-family);
  font-size: var(--hig-text-footnote-font-size);
  line-height: var(--hig-text-footnote-line-height);
  font-weight: var(--hig-text-footnote-font-weight);
  letter-spacing: var(--hig-text-footnote-letter-spacing, normal);
}
code, pre {
  font-family: var(--hig-font-mono);
  font-size: var(--hig-text-footnote-font-size);
  background: var(--hig-color-secondary-system-background);
  border-radius: var(--hig-radius-xs);
  padding: 2px 5px;
}
a {
  color: var(--hig-color-tint);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
hr {
  border: none;
  border-top: var(--hig-hairline) solid var(--hig-color-separator);
}
::selection {
  background: color-mix(in srgb, var(--hig-color-tint) 25%, transparent);
}
:focus-visible {
  outline: 2px solid var(--hig-color-tint);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
}
@layer kotoba.hig {
.hig-display3 {
  font-family: var(--hig-text-display3-font-family);
  font-size: var(--hig-text-display3-font-size);
  line-height: var(--hig-text-display3-line-height);
  font-weight: var(--hig-text-display3-font-weight);
  letter-spacing: var(--hig-text-display3-letter-spacing, normal);
}
.hig-display2 {
  font-family: var(--hig-text-display2-font-family);
  font-size: var(--hig-text-display2-font-size);
  line-height: var(--hig-text-display2-line-height);
  font-weight: var(--hig-text-display2-font-weight);
  letter-spacing: var(--hig-text-display2-letter-spacing, normal);
}
.hig-display1 {
  font-family: var(--hig-text-display1-font-family);
  font-size: var(--hig-text-display1-font-size);
  line-height: var(--hig-text-display1-line-height);
  font-weight: var(--hig-text-display1-font-weight);
  letter-spacing: var(--hig-text-display1-letter-spacing, normal);
}
.hig-large-title {
  font-family: var(--hig-text-large-title-font-family);
  font-size: var(--hig-text-large-title-font-size);
  line-height: var(--hig-text-large-title-line-height);
  font-weight: var(--hig-text-large-title-font-weight);
  letter-spacing: var(--hig-text-large-title-letter-spacing, normal);
}
.hig-title1 {
  font-family: var(--hig-text-title1-font-family);
  font-size: var(--hig-text-title1-font-size);
  line-height: var(--hig-text-title1-line-height);
  font-weight: var(--hig-text-title1-font-weight);
  letter-spacing: var(--hig-text-title1-letter-spacing, normal);
}
.hig-title2 {
  font-family: var(--hig-text-title2-font-family);
  font-size: var(--hig-text-title2-font-size);
  line-height: var(--hig-text-title2-line-height);
  font-weight: var(--hig-text-title2-font-weight);
  letter-spacing: var(--hig-text-title2-letter-spacing, normal);
}
.hig-title3 {
  font-family: var(--hig-text-title3-font-family);
  font-size: var(--hig-text-title3-font-size);
  line-height: var(--hig-text-title3-line-height);
  font-weight: var(--hig-text-title3-font-weight);
  letter-spacing: var(--hig-text-title3-letter-spacing, normal);
}
.hig-headline {
  font-family: var(--hig-text-headline-font-family);
  font-size: var(--hig-text-headline-font-size);
  line-height: var(--hig-text-headline-line-height);
  font-weight: var(--hig-text-headline-font-weight);
  letter-spacing: var(--hig-text-headline-letter-spacing, normal);
}
.hig-body {
  font-family: var(--hig-text-body-font-family);
  font-size: var(--hig-text-body-font-size);
  line-height: var(--hig-text-body-line-height);
  font-weight: var(--hig-text-body-font-weight);
  letter-spacing: var(--hig-text-body-letter-spacing, normal);
}
.hig-callout {
  font-family: var(--hig-text-callout-font-family);
  font-size: var(--hig-text-callout-font-size);
  line-height: var(--hig-text-callout-line-height);
  font-weight: var(--hig-text-callout-font-weight);
  letter-spacing: var(--hig-text-callout-letter-spacing, normal);
}
.hig-subheadline {
  font-family: var(--hig-text-subheadline-font-family);
  font-size: var(--hig-text-subheadline-font-size);
  line-height: var(--hig-text-subheadline-line-height);
  font-weight: var(--hig-text-subheadline-font-weight);
  letter-spacing: var(--hig-text-subheadline-letter-spacing, normal);
}
.hig-footnote {
  font-family: var(--hig-text-footnote-font-family);
  font-size: var(--hig-text-footnote-font-size);
  line-height: var(--hig-text-footnote-line-height);
  font-weight: var(--hig-text-footnote-font-weight);
  letter-spacing: var(--hig-text-footnote-letter-spacing, normal);
}
.hig-caption1 {
  font-family: var(--hig-text-caption1-font-family);
  font-size: var(--hig-text-caption1-font-size);
  line-height: var(--hig-text-caption1-line-height);
  font-weight: var(--hig-text-caption1-font-weight);
  letter-spacing: var(--hig-text-caption1-letter-spacing, normal);
}
.hig-caption2 {
  font-family: var(--hig-text-caption2-font-family);
  font-size: var(--hig-text-caption2-font-size);
  line-height: var(--hig-text-caption2-line-height);
  font-weight: var(--hig-text-caption2-font-weight);
  letter-spacing: var(--hig-text-caption2-letter-spacing, normal);
}
.hig-mono {
  font-family: var(--hig-font-mono);
  font-size: var(--hig-text-footnote-font-size);
}
}
@layer kotoba.glass {
:root {
  --liquid-glass-focus-ring-width: 4px;
  --liquid-glass-focus-ring-offset: 2px;
  --liquid-glass-focus-ring-color: #000000;
  --liquid-glass-focus-halo-width: 2px;
  --liquid-glass-focus-halo-color: #ffd43d;
  --liquid-glass-elevation-flat-shadow: none;
  --liquid-glass-elevation-raised-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.10);
  --liquid-glass-elevation-overlay-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  --liquid-glass-elevation-floating-shadow: 0 20px 48px rgba(0,0,0,.28), 0 6px 16px rgba(0,0,0,.16);
  --liquid-glass-status-error: #ec0000;
  --liquid-glass-status-warning: #b78f00;
  --liquid-glass-status-success: #259d63;
  --liquid-glass-status-info: #0017c1;
  --liquid-glass-accent-tint: rgba(15,118,110,0.55);
  --liquid-glass-accent-tint-strong: rgba(15,118,110,0.85);
  --liquid-glass-ink-default: #1c1c1e;
  --liquid-glass-ink-shadow: 0 1px 2px rgba(255,255,255,.4);
  --liquid-glass-ink-on-accent: #ffffff;
  --liquid-glass-surface-clear-blur: 12px;
  --liquid-glass-surface-clear-saturate: 160%;
  --liquid-glass-surface-clear-tint: rgba(255,255,255,0.06);
  --liquid-glass-surface-clear-border: rgba(255,255,255,0.22);
  --liquid-glass-surface-regular-blur: 20px;
  --liquid-glass-surface-regular-saturate: 180%;
  --liquid-glass-surface-regular-tint: rgba(255,255,255,0.14);
  --liquid-glass-surface-regular-border: rgba(255,255,255,0.35);
  --liquid-glass-surface-thick-blur: 32px;
  --liquid-glass-surface-thick-saturate: 200%;
  --liquid-glass-surface-thick-tint: rgba(255,255,255,0.22);
  --liquid-glass-surface-thick-border: rgba(255,255,255,0.45);
  --liquid-glass-radius-sm: 10px;
  --liquid-glass-radius-md: 16px;
  --liquid-glass-radius-lg: 24px;
  --liquid-glass-radius-pill: 999px;
  --liquid-glass-lens-frequency: 0.008;
  --liquid-glass-lens-scale: 8;
  --liquid-glass-lens-octaves: 2;
  --liquid-glass-motion-press-duration: 120ms;
  --liquid-glass-motion-press-easing: cubic-bezier(.32,.72,0,1);
  --liquid-glass-motion-press-scale-x: 1.02;
  --liquid-glass-motion-press-scale-y: .95;
  --liquid-glass-motion-settle-duration: 420ms;
  --liquid-glass-motion-settle-easing: cubic-bezier(.22,1,.36,1);
  --liquid-glass-motion-overlay-enter-duration: 300ms;
  --liquid-glass-motion-overlay-enter-easing: cubic-bezier(.05,.7,.1,1);
  --liquid-glass-motion-overlay-enter-distance: 12px;
  --liquid-glass-motion-overlay-enter-scale: .98;
  --liquid-glass-motion-overlay-enter-scale-y: .9;
  --liquid-glass-motion-overlay-exit-duration: 200ms;
  --liquid-glass-motion-overlay-exit-easing: cubic-bezier(.3,0,.8,.15);
  --liquid-glass-motion-spring-duration: 500ms;
  --liquid-glass-motion-spring-easing: linear(0.0,0.264,0.701,1.005,1.12,1.11,1.056,1.01,0.987,0.985,0.991,0.997,1.001,1.002,1.002,1.0);
  --liquid-glass-specular-highlight-opacity: 0.55;
  --liquid-glass-specular-rim-top-opacity: 0.9;
  --liquid-glass-specular-rim-bottom-opacity: 0.05;
  --liquid-glass-specular-pointer-opacity: 0.5;
  --liquid-glass-specular-pointer-size: 160px;
}


:root[data-appearance="light"] {
  --liquid-glass-surface-clear-blur: 12px;
  --liquid-glass-surface-clear-saturate: 160%;
  --liquid-glass-surface-clear-tint: rgba(255,255,255,0.06);
  --liquid-glass-surface-clear-border: rgba(255,255,255,0.22);
  --liquid-glass-surface-regular-blur: 20px;
  --liquid-glass-surface-regular-saturate: 180%;
  --liquid-glass-surface-regular-tint: rgba(255,255,255,0.14);
  --liquid-glass-surface-regular-border: rgba(255,255,255,0.35);
  --liquid-glass-surface-thick-blur: 32px;
  --liquid-glass-surface-thick-saturate: 200%;
  --liquid-glass-surface-thick-tint: rgba(255,255,255,0.22);
  --liquid-glass-surface-thick-border: rgba(255,255,255,0.45);
  --liquid-glass-specular-highlight-opacity: 0.55;
  --liquid-glass-specular-rim-top-opacity: 0.9;
  --liquid-glass-specular-rim-bottom-opacity: 0.05;
  --liquid-glass-specular-pointer-opacity: 0.5;
  --liquid-glass-specular-pointer-size: 160px;
  --liquid-glass-ink-default: #1c1c1e;
  --liquid-glass-ink-shadow: 0 1px 2px rgba(255,255,255,.4);
  --liquid-glass-ink-on-accent: #ffffff;
  --liquid-glass-status-error: #ec0000;
  --liquid-glass-status-warning: #b78f00;
  --liquid-glass-status-success: #259d63;
  --liquid-glass-status-info: #0017c1;
}
.liquid-glass__panel,.liquid-glass__button,.liquid-glass__icon-button,.liquid-glass__toolbar,.liquid-glass__sheet,.liquid-glass__badge,.liquid-glass__text-field,.liquid-glass__text-area,.liquid-glass__search-field,.liquid-glass__menu-select,.liquid-glass__toggle-track,.liquid-glass__checkbox-box,.liquid-glass__radio-box,.liquid-glass__stepper,.liquid-glass__nav-bar,.liquid-glass__alert,.liquid-glass__menu,.liquid-glass__list,.liquid-glass__chip,.liquid-glass__disclosure,.liquid-glass__banner { position: relative; isolation: isolate; box-sizing: border-box; font: inherit; transition: transform var(--liquid-glass-motion-press-duration) var(--liquid-glass-motion-press-easing),box-shadow var(--liquid-glass-motion-settle-duration) var(--liquid-glass-motion-settle-easing),filter var(--liquid-glass-motion-press-duration) var(--liquid-glass-motion-press-easing); }
.liquid-glass__panel::before,.liquid-glass__button::before,.liquid-glass__icon-button::before,.liquid-glass__toolbar::before,.liquid-glass__sheet::before,.liquid-glass__badge::before,.liquid-glass__text-field::before,.liquid-glass__text-area::before,.liquid-glass__search-field::before,.liquid-glass__menu-select::before,.liquid-glass__toggle-track::before,.liquid-glass__checkbox-box::before,.liquid-glass__radio-box::before,.liquid-glass__stepper::before,.liquid-glass__nav-bar::before,.liquid-glass__alert::before,.liquid-glass__menu::before,.liquid-glass__list::before,.liquid-glass__chip::before,.liquid-glass__disclosure::before,.liquid-glass__banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 60% at 18% -10%,rgba(255,255,255,var(--liquid-glass-specular-highlight-opacity)) 0%,rgba(255,255,255,0) 65%); mix-blend-mode: overlay; }
.liquid-glass__panel,.liquid-glass__button,.liquid-glass__icon-button,.liquid-glass__toolbar,.liquid-glass__sheet,.liquid-glass__badge,.liquid-glass__text-field,.liquid-glass__text-area,.liquid-glass__search-field,.liquid-glass__menu-select,.liquid-glass__toggle-track,.liquid-glass__checkbox-box,.liquid-glass__radio-box,.liquid-glass__stepper,.liquid-glass__nav-bar,.liquid-glass__alert,.liquid-glass__menu,.liquid-glass__list,.liquid-glass__chip,.liquid-glass__disclosure,.liquid-glass__banner,.liquid-glass__tab-bar,.liquid-glass__toggle,.liquid-glass__checkbox,.liquid-glass__radio,.liquid-glass__slider,.liquid-glass__progress-bar,.liquid-glass__progress-circle,.liquid-glass__gauge,.liquid-glass__divider,.liquid-glass__label,.liquid-glass__avatar,.liquid-glass__tooltip,.liquid-glass__field { color: var(--liquid-glass-ink-default); text-shadow: var(--liquid-glass-ink-shadow); }
.liquid-glass__panel { overflow: hidden; padding: 1em; border-radius: var(--liquid-glass-radius-md); background: var(--liquid-glass-surface-regular-tint); border: 1px solid var(--liquid-glass-surface-regular-border); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); box-shadow: var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); }
.liquid-glass__panel--clear { background: var(--liquid-glass-surface-clear-tint); border: 1px solid var(--liquid-glass-surface-clear-border); backdrop-filter: blur(var(--liquid-glass-surface-clear-blur)) saturate(var(--liquid-glass-surface-clear-saturate)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-clear-blur)) saturate(var(--liquid-glass-surface-clear-saturate)) brightness(1.05); }
.liquid-glass__panel--thick { background: var(--liquid-glass-surface-thick-tint); border: 1px solid var(--liquid-glass-surface-thick-border); backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); }
.liquid-glass__panel--flat { box-shadow: var(--liquid-glass-elevation-flat-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); }
.liquid-glass__panel--overlay { box-shadow: var(--liquid-glass-elevation-overlay-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); }
.liquid-glass__panel--floating { box-shadow: var(--liquid-glass-elevation-floating-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); }
.liquid-glass__button,.liquid-glass__icon-button { align-items: center; box-shadow: var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); min-height: 44px; overflow: hidden; background: var(--liquid-glass-surface-regular-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); cursor: pointer; backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); padding: .6em 1.1em; justify-content: center; gap: .4em; text-decoration: none; display: inline-flex; border: 1px solid var(--liquid-glass-surface-regular-border); border-radius: var(--liquid-glass-radius-pill); }
.liquid-glass__icon-button { padding: .55em; aspect-ratio: 1; }
.liquid-glass__button--lg,.liquid-glass__icon-button--lg { min-height: 56px; padding: .8em 1.4em; font-size: 1.05em; }
.liquid-glass__button--sm,.liquid-glass__icon-button--sm { min-height: 36px; padding: .3em .85em; font-size: .9em; overflow: visible; }
.liquid-glass__button--xs,.liquid-glass__icon-button--xs { min-height: 28px; padding: .15em .6em; font-size: .8em; overflow: visible; }
.liquid-glass__button--sm::after,.liquid-glass__icon-button--sm::after,.liquid-glass__button--xs::after,.liquid-glass__icon-button--xs::after { content: ""; position: absolute; inset: 0; margin: auto; height: 44px; }
.liquid-glass__button--solid-fill,.liquid-glass__icon-button--solid-fill { background: var(--liquid-glass-accent-tint-strong); border-color: var(--liquid-glass-accent-tint-strong); color: var(--liquid-glass-ink-on-accent); font-weight: 600; }
.liquid-glass__button--text,.liquid-glass__icon-button--text { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.liquid-glass__button--text::before,.liquid-glass__icon-button--text::before { display: none; }
.liquid-glass__toolbar { align-items: center; box-shadow: var(--liquid-glass-elevation-overlay-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); background: var(--liquid-glass-surface-thick-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); padding: .5em .75em; gap: .5em; display: flex; border: 1px solid var(--liquid-glass-surface-thick-border); border-radius: var(--liquid-glass-radius-lg); }
.liquid-glass__tab-bar { display: flex; gap: .15em; }
.liquid-glass__tab { padding: .4em .9em; border-radius: var(--liquid-glass-radius-pill); opacity: .7; transition: opacity var(--liquid-glass-motion-press-duration) var(--liquid-glass-motion-press-easing),background var(--liquid-glass-motion-press-duration) var(--liquid-glass-motion-press-easing); }
.liquid-glass__tab--active { opacity: 1; background: rgba(255,255,255,.18); }
.liquid-glass__sheet { box-shadow: var(--liquid-glass-elevation-floating-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); overflow: hidden; background: var(--liquid-glass-surface-thick-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); padding: 1.25em 1.25em calc(1.25em + env(safe-area-inset-bottom,0px)); border: 1px solid var(--liquid-glass-surface-thick-border); border-radius: var(--liquid-glass-radius-lg) var(--liquid-glass-radius-lg) 0 0; border-bottom: none; }
.liquid-glass__scrim { position: fixed; inset: 0; background: rgba(0,0,0,.28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.liquid-glass__badge { min-width: 1.4em; align-items: center; font-size: .75em; overflow: hidden; background: var(--liquid-glass-surface-regular-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); padding: .1em .45em; justify-content: center; display: inline-flex; border: 1px solid var(--liquid-glass-surface-regular-border); border-radius: var(--liquid-glass-radius-pill); }
.liquid-glass__text-field,.liquid-glass__search-field { align-items: center; box-shadow: var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); background: var(--liquid-glass-surface-regular-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); padding: .55em .9em; gap: .5em; display: flex; border: 1px solid var(--liquid-glass-surface-regular-border); border-radius: var(--liquid-glass-radius-pill); }
.liquid-glass__text-area { align-items: flex-start; box-shadow: var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); background: var(--liquid-glass-surface-regular-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); padding: .7em .9em; display: flex; border: 1px solid var(--liquid-glass-surface-regular-border); border-radius: var(--liquid-glass-radius-md); }
.liquid-glass__text-field input,.liquid-glass__search-field input,.liquid-glass__text-area textarea { flex: 1; min-width: 0; width: 100%; border: none; outline: none; background: transparent; color: inherit; font: inherit; }
.liquid-glass__text-area textarea { resize: vertical; }
.liquid-glass__search-icon { opacity: .6; font-size: .9em; line-height: 1; }
.liquid-glass__menu-select { align-items: center; box-shadow: var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); background: var(--liquid-glass-surface-regular-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); padding: .55em 2.1em .55em .9em; display: inline-flex; border: 1px solid var(--liquid-glass-surface-regular-border); border-radius: var(--liquid-glass-radius-pill); }
.liquid-glass__menu-select select { appearance: none; -webkit-appearance: none; background: transparent; border: none; outline: none; color: inherit; font: inherit; width: 100%; }
.liquid-glass__menu-select::after { content: "⌄"; position: absolute; right: .9em; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .6; }
.liquid-glass__field { display: flex; flex-direction: column; gap: .35em; }
.liquid-glass__field-label { display: inline-flex; align-items: baseline; gap: .4em; font-weight: 600; font-size: .9em; line-height: 1.4; }
.liquid-glass__field-requirement { font-weight: 400; font-size: .85em; opacity: .75; }
.liquid-glass__field-requirement[data-required="true"] { color: var(--liquid-glass-status-error); opacity: 1; }
.liquid-glass__field-status { align-items: center; font-size: .8em; font-weight: 400; background: var(--liquid-glass-surface-regular-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); padding: .05em .5em; display: inline-flex; border: 1px solid var(--liquid-glass-surface-regular-border); border-radius: var(--liquid-glass-radius-pill); }
.liquid-glass__field-support { margin: 0; font-size: .85em; opacity: .8; line-height: 1.5; }
.liquid-glass__field-error { margin: 0; font-size: .85em; font-weight: 600; line-height: 1.5; color: var(--liquid-glass-status-error); }
.liquid-glass__field[data-invalid="true"] .liquid-glass__text-field,.liquid-glass__field[data-invalid="true"] .liquid-glass__text-area,.liquid-glass__field[data-invalid="true"] .liquid-glass__search-field,.liquid-glass__field[data-invalid="true"] .liquid-glass__menu-select { border-color: var(--liquid-glass-status-error); }
.liquid-glass__banner { align-items: flex-start; box-shadow: var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); border-left-width: 4px; border-left-color: var(--liquid-glass-status-info); background: var(--liquid-glass-surface-thick-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); padding: 1em 1.15em; gap: .75em; display: flex; border: 1px solid var(--liquid-glass-surface-thick-border); border-radius: var(--liquid-glass-radius-md); }
.liquid-glass__banner--success { border-left-color: var(--liquid-glass-status-success); }
.liquid-glass__banner--warning { border-left-color: var(--liquid-glass-status-warning); }
.liquid-glass__banner--error { border-left-color: var(--liquid-glass-status-error); }
.liquid-glass__banner-icon { flex-shrink: 0; display: inline-flex; width: 1.25em; height: 1.25em; color: var(--liquid-glass-status-info); }
.liquid-glass__banner--success .liquid-glass__banner-icon { color: var(--liquid-glass-status-success); }
.liquid-glass__banner--warning .liquid-glass__banner-icon { color: var(--liquid-glass-status-warning); }
.liquid-glass__banner--error .liquid-glass__banner-icon { color: var(--liquid-glass-status-error); }
.liquid-glass__banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3em; }
.liquid-glass__banner-heading { margin: 0; font-size: 1em; font-weight: 700; line-height: 1.4; }
.liquid-glass__banner-timestamp { font-size: .8em; opacity: .7; }
.liquid-glass__banner-content { font-size: .9em; line-height: 1.6; }
.liquid-glass__banner-actions { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .25em; }
.liquid-glass__toggle { display: inline-flex; align-items: center; cursor: pointer; }
.liquid-glass__toggle-input { clip: rect(0,0,0,0); white-space: nowrap; overflow: hidden; width: 1px; padding: 0; position: absolute; border: 0; height: 1px; margin: -1px; }
.liquid-glass__toggle-track { width: 48px; height: 28px; border-radius: var(--liquid-glass-radius-pill); transition: background var(--liquid-glass-motion-settle-duration) var(--liquid-glass-motion-settle-easing); background: var(--liquid-glass-surface-regular-tint); border: 1px solid var(--liquid-glass-surface-regular-border); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); }
.liquid-glass__toggle-thumb { box-shadow: var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); transition: transform var(--liquid-glass-motion-settle-duration) var(--liquid-glass-motion-settle-easing); top: 2px; width: 22px; background: #fff; position: absolute; border-radius: 50%; height: 22px; left: 2px; }
.liquid-glass__toggle-input:checked ~ .liquid-glass__toggle-track { background: var(--liquid-glass-accent-tint-strong); border-color: var(--liquid-glass-accent-tint-strong); }
.liquid-glass__toggle-input:checked ~ .liquid-glass__toggle-track .liquid-glass__toggle-thumb { transform: translateX(20px); }
.liquid-glass__toggle-input:disabled ~ .liquid-glass__toggle-track { opacity: .45; cursor: not-allowed; }
.liquid-glass__checkbox,.liquid-glass__radio { display: inline-flex; align-items: center; gap: .5em; cursor: pointer; }
.liquid-glass__checkbox-input,.liquid-glass__radio-input { clip: rect(0,0,0,0); white-space: nowrap; overflow: hidden; width: 1px; padding: 0; position: absolute; border: 0; height: 1px; margin: -1px; }
.liquid-glass__checkbox-box { width: 20px; height: 20px; border-radius: 6px; background: var(--liquid-glass-surface-regular-tint); border: 1px solid var(--liquid-glass-surface-regular-border); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); }
.liquid-glass__radio-box { width: 20px; height: 20px; border-radius: 50%; background: var(--liquid-glass-surface-regular-tint); border: 1px solid var(--liquid-glass-surface-regular-border); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); }
.liquid-glass__checkbox-input:checked ~ .liquid-glass__checkbox-box { background: var(--liquid-glass-accent-tint-strong); border-color: var(--liquid-glass-accent-tint-strong); }
.liquid-glass__checkbox-input:checked ~ .liquid-glass__checkbox-box::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8125em; color: #fff; }
.liquid-glass__radio-input:checked ~ .liquid-glass__radio-box { border-color: var(--liquid-glass-accent-tint-strong); }
.liquid-glass__radio-input:checked ~ .liquid-glass__radio-box::after { transform: translate(-50%,-50%); top: 50%; content: ""; width: 10px; background: var(--liquid-glass-accent-tint-strong); position: absolute; border-radius: 50%; height: 10px; left: 50%; }
.liquid-glass__checkbox-input:disabled ~ .liquid-glass__checkbox-box,.liquid-glass__radio-input:disabled ~ .liquid-glass__radio-box { opacity: .45; }
.liquid-glass__checkbox-text,.liquid-glass__radio-text { font-size: 14px; line-height: 1.3; }
.liquid-glass__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; }
.liquid-glass__slider::-webkit-slider-runnable-track { height: 6px; border-radius: var(--liquid-glass-radius-pill); background: var(--liquid-glass-surface-regular-tint); border: 1px solid var(--liquid-glass-surface-regular-border); }
.liquid-glass__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 1px solid var(--liquid-glass-surface-regular-border); box-shadow: var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); }
.liquid-glass__slider::-moz-range-track { height: 6px; border-radius: var(--liquid-glass-radius-pill); background: var(--liquid-glass-surface-regular-tint); border: 1px solid var(--liquid-glass-surface-regular-border); }
.liquid-glass__slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--liquid-glass-surface-regular-border); box-shadow: var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); }
.liquid-glass__stepper { align-items: center; background: var(--liquid-glass-surface-regular-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); padding: .25em .3em; gap: .4em; display: inline-flex; border: 1px solid var(--liquid-glass-surface-regular-border); border-radius: var(--liquid-glass-radius-pill); }
.liquid-glass__stepper .liquid-glass__icon-button { padding: .35em; width: 26px; height: 26px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; }
.liquid-glass__stepper .liquid-glass__icon-button::before { display: none; }
.liquid-glass__stepper-value { min-width: 1.6em; text-align: center; font-variant-numeric: tabular-nums; font-size: .9em; }
.liquid-glass__progress-bar { width: 100%; height: 8px; border-radius: var(--liquid-glass-radius-pill); background: var(--liquid-glass-surface-regular-tint); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)); border: 1px solid var(--liquid-glass-surface-regular-border); overflow: hidden; }
.liquid-glass__progress-bar-fill { height: 100%; border-radius: inherit; background: var(--liquid-glass-accent-tint-strong); transition: width var(--liquid-glass-motion-settle-duration) var(--liquid-glass-motion-settle-easing); }
.liquid-glass__progress-circle { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--liquid-glass-surface-regular-border); border-top-color: #fff; animation: liquid-glass-spin .8s linear infinite; }
.liquid-glass__gauge { align-items: center; box-shadow: var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); isolation: isolate; width: 56px; justify-content: center; display: inline-flex; position: relative; border-radius: 50%; height: 56px; }
.liquid-glass__gauge::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--liquid-glass-surface-thick-tint); backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) brightness(1.05); }
.liquid-glass__gauge-label { position: relative; z-index: 1; font-size: 12px; font-weight: 700; }
.liquid-glass__sr-only { clip: rect(0,0,0,0); white-space: nowrap; overflow: hidden; width: 1px; padding: 0; position: absolute; border: 0; height: 1px; margin: -1px; }
.liquid-glass__divider { border: none; height: 1px; margin: 1em 0; background: var(--liquid-glass-surface-regular-border); }
.liquid-glass__label { display: inline-flex; align-items: center; gap: .5em; }
.liquid-glass__label-icon { display: inline-flex; font-size: 1.1em; line-height: 1; }
.liquid-glass__label-text { line-height: 1.3; }
.liquid-glass__avatar { align-items: center; font-size: .85em; font-weight: 600; overflow: hidden; width: 36px; background: var(--liquid-glass-surface-regular-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); justify-content: center; display: inline-flex; border: 1px solid var(--liquid-glass-surface-regular-border); border-radius: 50%; height: 36px; }
.liquid-glass__avatar img { width: 100%; height: 100%; object-fit: cover; }
.liquid-glass__tooltip { white-space: nowrap; font-size: 12px; background: var(--liquid-glass-surface-clear-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-clear-blur)) saturate(var(--liquid-glass-surface-clear-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-clear-blur)) saturate(var(--liquid-glass-surface-clear-saturate)) brightness(1.05); padding: .35em .6em; position: absolute; border: 1px solid var(--liquid-glass-surface-clear-border); border-radius: var(--liquid-glass-radius-sm); }
.liquid-glass__nav-bar { align-items: center; border-right: none; background: var(--liquid-glass-surface-thick-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); border-left: none; backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); padding: .75em 1em; justify-content: space-between; gap: .75em; display: flex; border: 1px solid var(--liquid-glass-surface-thick-border); border-top: none; }
.liquid-glass__nav-bar-title { font-weight: 700; font-size: 15px; flex: 1; text-align: center; }
.liquid-glass__nav-bar-leading,.liquid-glass__nav-bar-trailing { display: flex; align-items: center; gap: .4em; min-width: 2em; }
.liquid-glass__alert { box-shadow: var(--liquid-glass-elevation-floating-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); transform: translate(-50%,-50%); text-align: center; top: 50%; width: min(90vw,360px); background: var(--liquid-glass-surface-thick-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); z-index: 1; padding: 1.5em; position: fixed; border: 1px solid var(--liquid-glass-surface-thick-border); border-radius: var(--liquid-glass-radius-lg); left: 50%; }
.liquid-glass__menu { min-width: 160px; box-shadow: var(--liquid-glass-elevation-overlay-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); background: var(--liquid-glass-surface-thick-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); padding: .4em; display: flex; position: absolute; border: 1px solid var(--liquid-glass-surface-thick-border); border-radius: var(--liquid-glass-radius-md); flex-direction: column; }
.liquid-glass__menu-item { all: unset; box-sizing: border-box; padding: .5em .7em; border-radius: var(--liquid-glass-radius-sm); cursor: pointer; font: inherit; color: inherit; }
.liquid-glass__menu-item:disabled { opacity: .45; cursor: not-allowed; }
.liquid-glass__list { display: flex; flex-direction: column; border-radius: var(--liquid-glass-radius-md); overflow: hidden; background: var(--liquid-glass-surface-regular-tint); border: 1px solid var(--liquid-glass-surface-regular-border); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); }
.liquid-glass__list--thick { background: var(--liquid-glass-surface-thick-tint); border: 1px solid var(--liquid-glass-surface-thick-border); backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-thick-blur)) saturate(var(--liquid-glass-surface-thick-saturate)) brightness(1.05); }
.liquid-glass__list-row { display: flex; align-items: center; justify-content: space-between; gap: .75em; padding: .7em 1em; }
.liquid-glass__list-row + .liquid-glass__list-row { border-top: 1px solid var(--liquid-glass-surface-regular-border); }
.liquid-glass__list-row[data-act] { cursor: pointer; }
.liquid-glass__list-row-content { flex: 1; min-width: 0; }
.liquid-glass__list-row-trailing { opacity: .55; font-size: .9em; }
.liquid-glass__chip { align-items: center; font-size: 13px; background: var(--liquid-glass-surface-regular-tint); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); padding: .35em .7em .35em .85em; gap: .35em; display: inline-flex; border: 1px solid var(--liquid-glass-surface-regular-border); border-radius: var(--liquid-glass-radius-pill); }
.liquid-glass__chip-remove { box-sizing: border-box; align-items: center; font-size: 11px; width: 16px; cursor: pointer; all: unset; opacity: .7; justify-content: center; display: inline-flex; border-radius: 50%; height: 16px; }
.liquid-glass__disclosure { border-radius: var(--liquid-glass-radius-md); overflow: hidden; background: var(--liquid-glass-surface-regular-tint); border: 1px solid var(--liquid-glass-surface-regular-border); backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); }
.liquid-glass__disclosure-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: .75em 1em; }
.liquid-glass__disclosure-summary::-webkit-details-marker { display: none; }
.liquid-glass__disclosure-chevron { display: inline-flex; opacity: .6; transition: transform var(--liquid-glass-motion-settle-duration) var(--liquid-glass-motion-settle-easing); }
.liquid-glass__disclosure[open] .liquid-glass__disclosure-chevron { transform: rotate(180deg); }
.liquid-glass__disclosure-body { padding: 0 1em 1em; }
.liquid-glass__scrim { animation: liquid-glass-scrim-enter var(--liquid-glass-motion-overlay-enter-duration) var(--liquid-glass-motion-overlay-enter-easing) both; }
.liquid-glass__scrim[data-state="closing"] { animation: liquid-glass-scrim-exit var(--liquid-glass-motion-overlay-exit-duration) var(--liquid-glass-motion-overlay-exit-easing) both; }
.liquid-glass__sheet { animation: liquid-glass-sheet-enter var(--liquid-glass-motion-overlay-enter-duration) var(--liquid-glass-motion-overlay-enter-easing) both; }
.liquid-glass__sheet[data-state="closing"] { animation: liquid-glass-sheet-exit var(--liquid-glass-motion-overlay-exit-duration) var(--liquid-glass-motion-overlay-exit-easing) both; }
.liquid-glass__alert { animation: liquid-glass-alert-enter var(--liquid-glass-motion-overlay-enter-duration) var(--liquid-glass-motion-overlay-enter-easing) both; }
.liquid-glass__alert[data-state="closing"] { animation: liquid-glass-alert-exit var(--liquid-glass-motion-overlay-exit-duration) var(--liquid-glass-motion-overlay-exit-easing) both; }
.liquid-glass__menu { transform-origin: top center; animation: liquid-glass-menu-enter var(--liquid-glass-motion-overlay-enter-duration) var(--liquid-glass-motion-overlay-enter-easing) both; }
.liquid-glass__menu[data-state="closing"] { animation: liquid-glass-menu-exit var(--liquid-glass-motion-overlay-exit-duration) var(--liquid-glass-motion-overlay-exit-easing) both; }
.liquid-glass__tooltip { animation: liquid-glass-tooltip-enter var(--liquid-glass-motion-overlay-enter-duration) var(--liquid-glass-motion-overlay-enter-easing) both; }
.liquid-glass__tooltip[data-state="closing"] { animation: liquid-glass-tooltip-exit var(--liquid-glass-motion-overlay-exit-duration) var(--liquid-glass-motion-overlay-exit-easing) both; }
.liquid-glass-js .liquid-glass__specular { inset: 0; transition: opacity var(--liquid-glass-motion-settle-duration) var(--liquid-glass-motion-settle-easing); mix-blend-mode: overlay; background: radial-gradient(var(--liquid-glass-specular-pointer-size) circle at calc(var(--liquid-glass-pointer-x,.5)*100%) calc(var(--liquid-glass-pointer-y,.5)*100%),rgba(255,255,255,var(--liquid-glass-specular-pointer-opacity)) 0%,rgba(255,255,255,0) 70%); z-index: 1; opacity: 0; display: block; position: absolute; border-radius: inherit; pointer-events: none; }
.liquid-glass-js [data-lg-pointer] > .liquid-glass__specular { opacity: 1; }
.liquid-glass--lens { backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05); }
@keyframes liquid-glass-tooltip-exit { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes liquid-glass-sheet-enter { 0% { opacity: 0; transform: translateY(var(--liquid-glass-motion-overlay-enter-distance)) scale(var(--liquid-glass-motion-overlay-enter-scale)); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes liquid-glass-menu-enter { 0% { opacity: 0; transform: scaleY(var(--liquid-glass-motion-overlay-enter-scale-y)); } 100% { opacity: 1; transform: scaleY(1); } }
@keyframes liquid-glass-spin { 100% { transform: rotate(360deg); } }
@keyframes liquid-glass-alert-exit { 0% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,calc(-50% + var(--liquid-glass-motion-overlay-enter-distance))) scale(var(--liquid-glass-motion-overlay-enter-scale)); } }
@keyframes liquid-glass-alert-enter { 0% { opacity: 0; transform: translate(-50%,calc(-50% + var(--liquid-glass-motion-overlay-enter-distance))) scale(var(--liquid-glass-motion-overlay-enter-scale)); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes liquid-glass-scrim-exit { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes liquid-glass-sheet-exit { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(var(--liquid-glass-motion-overlay-enter-distance)) scale(var(--liquid-glass-motion-overlay-enter-scale)); } }
@keyframes liquid-glass-scrim-enter { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes liquid-glass-menu-exit { 0% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(var(--liquid-glass-motion-overlay-enter-scale-y)); } }
@keyframes liquid-glass-tooltip-enter { 0% { opacity: 0; } 100% { opacity: 1; } }
@media (hover: hover) { .liquid-glass__button:hover,.liquid-glass__icon-button:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: var(--liquid-glass-elevation-overlay-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); } .liquid-glass__button--solid-fill:hover,.liquid-glass__icon-button--solid-fill:hover { filter: brightness(1.12); } .liquid-glass__button--text:hover,.liquid-glass__icon-button--text:hover { background: rgba(255,255,255,.18); box-shadow: none; } .liquid-glass__menu-item:hover { background: rgba(255,255,255,.18); } .liquid-glass__chip-remove:hover { opacity: 1; background: rgba(255,255,255,.18); } .liquid-glass__list-row[data-act]:hover { background: rgba(255,255,255,.10); } }
.liquid-glass__button:active,.liquid-glass__icon-button:active { transform: translateY(0) scaleX(var(--liquid-glass-motion-press-scale-x)) scaleY(var(--liquid-glass-motion-press-scale-y)); filter: brightness(.97); }
.liquid-glass__button:disabled,.liquid-glass__icon-button:disabled,.liquid-glass__button[aria-disabled="true"],.liquid-glass__icon-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.liquid-glass__button:focus-visible,.liquid-glass__icon-button:focus-visible { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color),var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); }
.liquid-glass__button--text:focus-visible,.liquid-glass__icon-button--text:focus-visible { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color); }
.liquid-glass__tab:focus-visible { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color); }
.liquid-glass__menu-item:focus-visible { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color); }
.liquid-glass__chip:focus-visible,.liquid-glass__chip-remove:focus-visible { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color); }
.liquid-glass__list-row:focus-visible { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color); }
.liquid-glass__disclosure-summary:focus-visible { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color); }
.liquid-glass__slider:focus-visible { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color); }
.liquid-glass__text-field:focus-within,.liquid-glass__search-field:focus-within,.liquid-glass__text-area:focus-within,.liquid-glass__menu-select:focus-within { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color),var(--liquid-glass-elevation-raised-shadow),inset 0 1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-top-opacity)),inset 0 -1px 0 rgba(255,255,255,var(--liquid-glass-specular-rim-bottom-opacity)); }
.liquid-glass__toggle-input:focus-visible ~ .liquid-glass__toggle-track { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color); }
.liquid-glass__checkbox-input:focus-visible ~ .liquid-glass__checkbox-box { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color); }
.liquid-glass__radio-input:focus-visible ~ .liquid-glass__radio-box { outline: var(--liquid-glass-focus-ring-width) solid var(--liquid-glass-focus-ring-color); outline-offset: var(--liquid-glass-focus-ring-offset); box-shadow: 0 0 0 var(--liquid-glass-focus-halo-width) var(--liquid-glass-focus-halo-color); }
.liquid-glass__specular{display:none;}

@supports not (backdrop-filter: blur(1px)) { .liquid-glass__panel,.liquid-glass__button,.liquid-glass__icon-button,.liquid-glass__toolbar,.liquid-glass__sheet,.liquid-glass__badge,.liquid-glass__text-field,.liquid-glass__text-area,.liquid-glass__search-field,.liquid-glass__menu-select,.liquid-glass__toggle-track,.liquid-glass__checkbox-box,.liquid-glass__radio-box,.liquid-glass__stepper,.liquid-glass__nav-bar,.liquid-glass__alert,.liquid-glass__menu,.liquid-glass__list,.liquid-glass__chip,.liquid-glass__disclosure,.liquid-glass__banner,.liquid-glass__slider::-webkit-slider-runnable-track,.liquid-glass__slider::-moz-range-track,.liquid-glass__toggle-track,.liquid-glass__checkbox-box,.liquid-glass__radio-box,.liquid-glass__avatar,.liquid-glass__gauge::before { background: rgba(255,255,255,.85); } }
@supports (transition-timing-function: linear(0, 1)) { .liquid-glass__button,.liquid-glass__icon-button { transition: transform var(--liquid-glass-motion-spring-duration) var(--liquid-glass-motion-spring-easing),box-shadow var(--liquid-glass-motion-settle-duration) var(--liquid-glass-motion-settle-easing),filter var(--liquid-glass-motion-press-duration) var(--liquid-glass-motion-press-easing); } .liquid-glass__toggle-thumb { transition: transform var(--liquid-glass-motion-spring-duration) var(--liquid-glass-motion-spring-easing); } .liquid-glass__disclosure-chevron { transition: transform var(--liquid-glass-motion-spring-duration) var(--liquid-glass-motion-spring-easing); } }
@supports (backdrop-filter: url(#liquid-glass-lens)) { .liquid-glass--lens { backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05) url(#liquid-glass-lens); -webkit-backdrop-filter: blur(var(--liquid-glass-surface-regular-blur)) saturate(var(--liquid-glass-surface-regular-saturate)) brightness(1.05) url(#liquid-glass-lens); } }
@media (prefers-reduced-motion: reduce) { .liquid-glass__panel,.liquid-glass__button,.liquid-glass__icon-button,.liquid-glass__toolbar,.liquid-glass__sheet,.liquid-glass__badge,.liquid-glass__text-field,.liquid-glass__text-area,.liquid-glass__search-field,.liquid-glass__menu-select,.liquid-glass__toggle-track,.liquid-glass__checkbox-box,.liquid-glass__radio-box,.liquid-glass__stepper,.liquid-glass__nav-bar,.liquid-glass__alert,.liquid-glass__menu,.liquid-glass__list,.liquid-glass__chip,.liquid-glass__disclosure,.liquid-glass__banner,.liquid-glass__tab,.liquid-glass__toggle-thumb,.liquid-glass__progress-bar-fill,.liquid-glass__disclosure-chevron { transition: none; } .liquid-glass__scrim,.liquid-glass__sheet,.liquid-glass__alert,.liquid-glass__menu,.liquid-glass__tooltip { animation: none; } .liquid-glass__scrim[data-state="closing"],.liquid-glass__sheet[data-state="closing"],.liquid-glass__alert[data-state="closing"],.liquid-glass__menu[data-state="closing"],.liquid-glass__tooltip[data-state="closing"] { animation: none; } .liquid-glass-js .liquid-glass__specular { display: none; transition: none; } }
@media (forced-colors: active) { .liquid-glass__panel,.liquid-glass__button,.liquid-glass__icon-button,.liquid-glass__toolbar,.liquid-glass__sheet,.liquid-glass__badge,.liquid-glass__text-field,.liquid-glass__text-area,.liquid-glass__search-field,.liquid-glass__menu-select,.liquid-glass__toggle-track,.liquid-glass__checkbox-box,.liquid-glass__radio-box,.liquid-glass__stepper,.liquid-glass__nav-bar,.liquid-glass__alert,.liquid-glass__menu,.liquid-glass__list,.liquid-glass__chip,.liquid-glass__disclosure,.liquid-glass__banner { background: Canvas; border-color: ButtonBorder; backdrop-filter: none; -webkit-backdrop-filter: none; } .liquid-glass__panel::before,.liquid-glass__button::before,.liquid-glass__icon-button::before,.liquid-glass__toolbar::before,.liquid-glass__sheet::before,.liquid-glass__badge::before,.liquid-glass__text-field::before,.liquid-glass__text-area::before,.liquid-glass__search-field::before,.liquid-glass__menu-select::before,.liquid-glass__toggle-track::before,.liquid-glass__checkbox-box::before,.liquid-glass__radio-box::before,.liquid-glass__stepper::before,.liquid-glass__nav-bar::before,.liquid-glass__alert::before,.liquid-glass__menu::before,.liquid-glass__list::before,.liquid-glass__chip::before,.liquid-glass__disclosure::before,.liquid-glass__banner::before { display: none; } .liquid-glass-js .liquid-glass__specular { display: none; } .liquid-glass__button,.liquid-glass__icon-button { color: ButtonText; } .liquid-glass__button--solid-fill,.liquid-glass__icon-button--solid-fill { background: Highlight; color: HighlightText; border-color: Highlight; } .liquid-glass__button:disabled,.liquid-glass__icon-button:disabled,.liquid-glass__button[aria-disabled="true"],.liquid-glass__icon-button[aria-disabled="true"],.liquid-glass__menu-item:disabled { opacity: 1; color: GrayText; border-color: GrayText; } .liquid-glass__toggle-input:disabled ~ .liquid-glass__toggle-track,.liquid-glass__checkbox-input:disabled ~ .liquid-glass__checkbox-box,.liquid-glass__radio-input:disabled ~ .liquid-glass__radio-box { opacity: 1; border-color: GrayText; } .liquid-glass__toggle-input:checked ~ .liquid-glass__toggle-track,.liquid-glass__checkbox-input:checked ~ .liquid-glass__checkbox-box,.liquid-glass__progress-bar-fill { background: Highlight; border-color: Highlight; } .liquid-glass__radio-input:checked ~ .liquid-glass__radio-box::after { background: Highlight; } .liquid-glass__button:focus-visible,.liquid-glass__icon-button:focus-visible,.liquid-glass__tab:focus-visible,.liquid-glass__menu-item:focus-visible,.liquid-glass__list-row:focus-visible,.liquid-glass__text-field:focus-within,.liquid-glass__text-area:focus-within,.liquid-glass__search-field:focus-within,.liquid-glass__menu-select:focus-within { outline-color: Highlight; box-shadow: none; } }
}
@layer kotoba.hig {
.kotoba-shell__stack { display: flex; flex-direction: column; gap: var(--hig-spacing-4); min-width: 0; }
.kotoba-shell__stack--horizontal { flex-direction: row; align-items: center; }
.kotoba-shell__stack > * { min-width: 0; }
.kotoba-shell__spacer { flex: 1 1 auto; }
.kotoba-shell__section { box-sizing: border-box; width: 100%; max-width: 680px; margin: 0 auto; padding: var(--hig-spacing-7) var(--hig-spacing-content-margin); border-top: var(--hig-hairline) solid var(--hig-color-separator); }
.kotoba-shell__section--wide { max-width: none; }
.kotoba-shell__section-title { margin: 0 0 var(--hig-spacing-4); font-weight: 600; }
.kotoba-shell__hero { box-sizing: border-box; text-align: center; padding: var(--hig-spacing-10) var(--hig-spacing-content-margin) var(--hig-spacing-8); background: radial-gradient(80% 70% at 50% 0%,color-mix(in srgb, var(--hig-color-tint) 12%, transparent) 0%,transparent 70%); }
.kotoba-shell__hero-title { margin: 0 0 var(--hig-spacing-3); font-weight: 700; }
.kotoba-shell__hero-tagline { margin: 0 auto var(--hig-spacing-6); max-width: 680px; color: var(--hig-color-secondary-label); }
.kotoba-shell__hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--hig-spacing-3); }
.kotoba-shell__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--hig-spacing-4); }
.kotoba-shell__grid > * { min-width: 0; }
.kotoba-shell__app { min-height: 100vh; display: flex; flex-direction: column; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.kotoba-shell__app { min-height: 100dvh; }
.kotoba-shell__app-nav { position: sticky; top: 0; z-index: 10; }
.kotoba-shell__app-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.kotoba-shell__app--with-sidebar .kotoba-shell__app-body { grid-template-columns: 260px minmax(0, 1fr); }
.kotoba-shell__app-sidebar { box-sizing: border-box; padding: var(--hig-spacing-4) var(--hig-spacing-content-margin); border-right: var(--hig-hairline) solid var(--hig-color-separator); }
.kotoba-shell__app-main { min-width: 0; overflow-wrap: break-word; }
.kotoba-shell__app--fill { height: 100%; min-height: 0; overflow: hidden; }
.kotoba-shell__app--fill .kotoba-shell__app-body { align-items: stretch; min-height: 0; }
.kotoba-shell__app--fill .kotoba-shell__app-sidebar { min-height: 0; overflow: auto; }
.kotoba-shell__app--fill .kotoba-shell__app-main { min-height: 0; display: flex; flex-direction: column; }
@media (max-width: 768px) { .kotoba-shell__app--with-sidebar .kotoba-shell__app-body { grid-template-columns: minmax(0, 1fr); } .kotoba-shell__app-sidebar { border-right: none; border-bottom: var(--hig-hairline) solid var(--hig-color-separator); } .kotoba-shell__app--fill.kotoba-shell__app--with-sidebar .kotoba-shell__app-body { grid-template-rows: auto minmax(0, 1fr); } }
}
@layer kotoba.hig{.kotoba-product__metric{min-width:0;padding:var(--hig-spacing-3);border:var(--hig-hairline) solid var(--hig-color-separator);border-radius:var(--hig-radius-large);background:var(--hig-color-secondary-system-background)}.kotoba-product__metric-label,.kotoba-product__metric-detail,.kotoba-product__muted{color:var(--hig-color-secondary-label)}.kotoba-product__metric-value{margin:var(--hig-spacing-1) 0;overflow-wrap:anywhere}.kotoba-product__status{display:inline-block;margin-right:var(--hig-spacing-2);color:var(--hig-color-tint);font-weight:600}.kotoba-product__empty{text-align:center;padding:var(--hig-spacing-6);border:var(--hig-hairline) dashed var(--hig-color-separator);border-radius:var(--hig-radius-large)}.kotoba-product__empty-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--hig-spacing-2);margin-top:var(--hig-spacing-3)}.kotoba-product__table-scroll{overflow-x:auto}.kotoba-product__table{width:100%;border-collapse:collapse}.kotoba-product__table caption{text-align:left;margin-bottom:var(--hig-spacing-2);font-weight:600}.kotoba-product__table th,.kotoba-product__table td{text-align:left;vertical-align:top;padding:var(--hig-spacing-2) var(--hig-spacing-3);border-bottom:var(--hig-hairline) solid var(--hig-color-separator)}.kotoba-product__table th{color:var(--hig-color-secondary-label);font-weight:600}}
:root {
  --color-primitive-blue-50: #e8f1fe;
  --color-primitive-blue-100: #d9e6ff;
  --color-primitive-blue-200: #c5d7fb;
  --color-primitive-blue-300: #9db7f9;
  --color-primitive-blue-400: #7096f8;
  --color-primitive-blue-500: #4979f5;
  --color-primitive-blue-600: #3460fb;
  --color-primitive-blue-700: #264af4;
  --color-primitive-blue-800: #0031d8;
  --color-primitive-blue-900: #0017c1;
  --color-primitive-blue-1000: #00118f;
  --color-primitive-blue-1100: #000071;
  --color-primitive-blue-1200: #000060;
  --color-primitive-light-blue-50: #f0f9ff;
  --color-primitive-light-blue-100: #dcf0ff;
  --color-primitive-light-blue-200: #c0e4ff;
  --color-primitive-light-blue-300: #97d3ff;
  --color-primitive-light-blue-400: #57b8ff;
  --color-primitive-light-blue-500: #39abff;
  --color-primitive-light-blue-600: #008bf2;
  --color-primitive-light-blue-700: #0877d7;
  --color-primitive-light-blue-800: #0066be;
  --color-primitive-light-blue-900: #0055ad;
  --color-primitive-light-blue-1000: #00428c;
  --color-primitive-light-blue-1100: #00316a;
  --color-primitive-light-blue-1200: #00234b;
  --color-primitive-cyan-50: #e9f7f9;
  --color-primitive-cyan-100: #c8f8ff;
  --color-primitive-cyan-200: #99f2ff;
  --color-primitive-cyan-300: #79e2f2;
  --color-primitive-cyan-400: #2bc8e4;
  --color-primitive-cyan-500: #01b7d6;
  --color-primitive-cyan-600: #00a3bf;
  --color-primitive-cyan-700: #008da6;
  --color-primitive-cyan-800: #008299;
  --color-primitive-cyan-900: #006f83;
  --color-primitive-cyan-1000: #006173;
  --color-primitive-cyan-1100: #004c59;
  --color-primitive-cyan-1200: #003741;
  --color-primitive-green-50: #e6f5ec;
  --color-primitive-green-100: #c2e5d1;
  --color-primitive-green-200: #9bd4b5;
  --color-primitive-green-300: #71c598;
  --color-primitive-green-400: #51b883;
  --color-primitive-green-500: #2cac6e;
  --color-primitive-green-600: #259d63;
  --color-primitive-green-700: #1d8b56;
  --color-primitive-green-800: #197a4b;
  --color-primitive-green-900: #115a36;
  --color-primitive-green-1000: #0c472a;
  --color-primitive-green-1100: #08351f;
  --color-primitive-green-1200: #032213;
  --color-primitive-lime-50: #ebfad9;
  --color-primitive-lime-100: #d0f5a2;
  --color-primitive-lime-200: #c0f354;
  --color-primitive-lime-300: #ade830;
  --color-primitive-lime-400: #9ddd15;
  --color-primitive-lime-500: #8cc80c;
  --color-primitive-lime-600: #7eb40d;
  --color-primitive-lime-700: #6fa104;
  --color-primitive-lime-800: #618e00;
  --color-primitive-lime-900: #507500;
  --color-primitive-lime-1000: #3e5a00;
  --color-primitive-lime-1100: #2c4100;
  --color-primitive-lime-1200: #1e2d00;
  --color-primitive-yellow-50: #fbf5e0;
  --color-primitive-yellow-100: #fff0b3;
  --color-primitive-yellow-200: #ffe380;
  --color-primitive-yellow-300: #ffd43d;
  --color-primitive-yellow-400: #ffc700;
  --color-primitive-yellow-500: #ebb700;
  --color-primitive-yellow-600: #d2a400;
  --color-primitive-yellow-700: #b78f00;
  --color-primitive-yellow-800: #a58000;
  --color-primitive-yellow-900: #927200;
  --color-primitive-yellow-1000: #806300;
  --color-primitive-yellow-1100: #6e5600;
  --color-primitive-yellow-1200: #604b00;
  --color-primitive-orange-50: #ffeee2;
  --color-primitive-orange-100: #ffdfca;
  --color-primitive-orange-200: #ffc199;
  --color-primitive-orange-300: #ffa66d;
  --color-primitive-orange-400: #ff8d44;
  --color-primitive-orange-500: #ff7628;
  --color-primitive-orange-600: #fb5b01;
  --color-primitive-orange-700: #e25100;
  --color-primitive-orange-800: #c74700;
  --color-primitive-orange-900: #ac3e00;
  --color-primitive-orange-1000: #8b3200;
  --color-primitive-orange-1100: #6d2700;
  --color-primitive-orange-1200: #541e00;
  --color-primitive-red-50: #fdeeee;
  --color-primitive-red-100: #ffdada;
  --color-primitive-red-200: #ffbbbb;
  --color-primitive-red-300: #ff9696;
  --color-primitive-red-400: #ff7171;
  --color-primitive-red-500: #ff5454;
  --color-primitive-red-600: #fe3939;
  --color-primitive-red-700: #fa0000;
  --color-primitive-red-800: #ec0000;
  --color-primitive-red-900: #ce0000;
  --color-primitive-red-1000: #a90000;
  --color-primitive-red-1100: #850000;
  --color-primitive-red-1200: #620000;
  --color-primitive-magenta-50: #f3e5f4;
  --color-primitive-magenta-100: #ffd0ff;
  --color-primitive-magenta-200: #ffaeff;
  --color-primitive-magenta-300: #ff8eff;
  --color-primitive-magenta-400: #f661f6;
  --color-primitive-magenta-500: #f137f1;
  --color-primitive-magenta-600: #db00db;
  --color-primitive-magenta-700: #c000c0;
  --color-primitive-magenta-800: #aa00aa;
  --color-primitive-magenta-900: #8b008b;
  --color-primitive-magenta-1000: #6c006c;
  --color-primitive-magenta-1100: #500050;
  --color-primitive-magenta-1200: #3b003b;
  --color-primitive-purple-50: #f1eafa;
  --color-primitive-purple-100: #ecddff;
  --color-primitive-purple-200: #ddc2ff;
  --color-primitive-purple-300: #cda6ff;
  --color-primitive-purple-400: #bb87ff;
  --color-primitive-purple-500: #a565f8;
  --color-primitive-purple-600: #8843e1;
  --color-primitive-purple-700: #6f23d0;
  --color-primitive-purple-800: #5c10be;
  --color-primitive-purple-900: #5109ad;
  --color-primitive-purple-1000: #41048e;
  --color-primitive-purple-1100: #30016c;
  --color-primitive-purple-1200: #21004b;
  --color-neutral-white: #ffffff;
  --color-neutral-black: #000000;
  --color-neutral-solid-gray-50: #f2f2f2;
  --color-neutral-solid-gray-100: #e6e6e6;
  --color-neutral-solid-gray-200: #cccccc;
  --color-neutral-solid-gray-300: #b3b3b3;
  --color-neutral-solid-gray-400: #999999;
  --color-neutral-solid-gray-420: #949494;
  --color-neutral-solid-gray-500: #7f7f7f;
  --color-neutral-solid-gray-536: #767676;
  --color-neutral-solid-gray-600: #666666;
  --color-neutral-solid-gray-700: #4d4d4d;
  --color-neutral-solid-gray-800: #333333;
  --color-neutral-solid-gray-900: #1a1a1a;
  --color-neutral-opacity-gray-50: rgba(0, 0, 0, 0.05);
  --color-neutral-opacity-gray-100: rgba(0, 0, 0, 0.1);
  --color-neutral-opacity-gray-200: rgba(0, 0, 0, 0.2);
  --color-neutral-opacity-gray-300: rgba(0, 0, 0, 0.3);
  --color-neutral-opacity-gray-400: rgba(0, 0, 0, 0.4);
  --color-neutral-opacity-gray-420: rgba(0, 0, 0, 0.42);
  --color-neutral-opacity-gray-500: rgba(0, 0, 0, 0.5);
  --color-neutral-opacity-gray-536: rgba(0, 0, 0, 0.54);
  --color-neutral-opacity-gray-600: rgba(0, 0, 0, 0.6);
  --color-neutral-opacity-gray-700: rgba(0, 0, 0, 0.7);
  --color-neutral-opacity-gray-800: rgba(0, 0, 0, 0.8);
  --color-neutral-opacity-gray-900: rgba(0, 0, 0, 0.9);
  --font-family-sans:
    "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: "Noto Sans Mono", monospace;
  --elevation-1:
    0 2px 8px 1px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.3);
  --elevation-2:
    0 2px 12px 2px rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.3);
  --elevation-3:
    0 4px 16px 3px rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.3);
  --elevation-4:
    0 6px 20px 4px rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.3);
  --elevation-5:
    0 8px 24px 5px rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.3);
  --elevation-6:
    0 10px 30px 6px rgba(0, 0, 0, 0.1), 0 3px 12px 0 rgba(0, 0, 0, 0.3);
  --elevation-7:
    0 12px 36px 7px rgba(0, 0, 0, 0.1), 0 3px 14px 0 rgba(0, 0, 0, 0.3);
  --elevation-8:
    0 14px 40px 7px rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.3);
  --color-semantic-success-1: var(--color-primitive-green-600);
  --color-semantic-success-2: var(--color-primitive-green-800);
  --color-semantic-error-1: var(--color-primitive-red-800);
  --color-semantic-error-2: var(--color-primitive-red-900);
  --color-semantic-warning-yellow-1: var(--color-primitive-yellow-700);
  --color-semantic-warning-yellow-2: var(--color-primitive-yellow-900);
  --color-semantic-warning-orange-1: var(--color-primitive-orange-600);
  --color-semantic-warning-orange-2: var(--color-primitive-orange-800);
  --color-key-50: var(--color-primitive-blue-50);
  --color-key-100: var(--color-primitive-blue-100);
  --color-key-200: var(--color-primitive-blue-200);
  --color-key-300: var(--color-primitive-blue-300);
  --color-key-400: var(--color-primitive-blue-400);
  --color-key-500: var(--color-primitive-blue-500);
  --color-key-600: var(--color-primitive-blue-600);
  --color-key-700: var(--color-primitive-blue-700);
  --color-key-800: var(--color-primitive-blue-800);
  --color-key-900: var(--color-primitive-blue-900);
  --color-key-1000: var(--color-primitive-blue-1000);
  --color-key-1100: var(--color-primitive-blue-1100);
  --color-key-1200: var(--color-primitive-blue-1200);
}/* jp-go-digital-design-system — vendored CSS
 * Source: https://github.com/digital-go-jp/design-system-example-components-html
 * Upstream commit: 3b34f4c3553fa3bee90bfd8b6fe962ac3055107d — MIT License, Copyright (c) 2025 デジタル庁
 * Generated by scripts/vendor.cljs — DO NOT EDIT BY HAND (re-vendor instead). */
.dads-menu-list {
  position: relative;
  z-index: 0;
  margin: 0;
  list-style-type: none;
  padding-left: 0;
  color: var(--color-neutral-solid-gray-800);
  font-weight: normal;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.3;
  font-family: var(--font-family-sans);
  letter-spacing: 0;
}

.dads-menu-list__item,
.dads-menu-list__item:any-link {
  display: flex;
  align-items: center;
  column-gap: calc(8 / 16 * 1rem);
  box-sizing: border-box;
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
  border: 0;
  background-color: transparent;
  padding-right: calc(16 / 16 * 1rem);
  padding-left: calc(16 / 16 * 1rem);
  color: inherit;
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  text-decoration-thickness: calc(1 / 16 * 1rem);
}

.dads-menu-list__item[data-size="regular"] {
  min-height: calc(44 / 16 * 1rem);
  padding-top: calc(10 / 16 * 1rem);
  padding-bottom: calc(10 / 16 * 1rem);
  line-height: 1.3;
}

.dads-menu-list__item[data-size="small"] {
  min-height: calc(36 / 16 * 1rem);
  padding-top: calc(6 / 16 * 1rem);
  padding-bottom: calc(6 / 16 * 1rem);
  line-height: 1.2;
}

.dads-menu-list__item[data-type="standard"] {
  margin-left: calc(1rem * var(--menu-list-indentation, 0));
}

.dads-menu-list__item[data-type="standard"][data-size="regular"] {
  border-radius: calc(8 / 16 * 1rem);
}

.dads-menu-list__item[data-type="standard"][data-size="small"] {
  border-radius: calc(4 / 16 * 1rem);
}

.dads-menu-list__item[data-type="box"] {
  border-radius: 0;
}

.dads-menu-list__item[data-type="box"] {
  padding-left: calc(16 / 16 * 1rem + 1rem * var(--menu-list-indentation, 0));
}

.dads-menu-list__item[data-current] {
  background-color: var(--color-key-100);
  color: var(--color-key-1000);
  font-weight: bold;
}

.dads-menu-list__item:has(+ * [data-current]) {
  background-color: var(--color-key-50);
  color: var(--color-key-1000);
}

@media (hover: hover) {
  .dads-menu-list__item:hover {
    background-color: var(--color-neutral-solid-gray-50);
    text-decoration: underline;
    text-underline-offset: calc(3 / 16 * 1rem);
  }

  .dads-menu-list__item[data-current]:hover,
  .dads-menu-list__item:has(+ * [data-current]):hover {
    background-color: var(--color-key-50);
    color: var(--color-key-900);
  }
}

.dads-menu-list__item:focus-visible {
  position: relative;
  z-index: 1;
  background-color: var(--color-primitive-yellow-300);
}

.dads-menu-list__item[data-type="standard"]:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-menu-list__item[data-type="box"]:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(-4 / 16 * 1rem);
  box-shadow: inset 0 0 0 calc(6 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-menu-list__item[data-current]:focus-visible {
  background-color: var(--color-key-100);
}

.dads-menu-list__item:has(+ * [data-current]):focus-visible {
  background-color: var(--color-key-50);
}

.dads-menu-list__front-icon {
  flex-shrink: 0;
}

.dads-menu-list__tail-icon {
  display: inline-block;
  vertical-align: -0.15em;
}

.dads-menu-list__end-icon {
  margin-top: calc(2 / 16 * 1rem);
  margin-right: calc(-4 / 16 * 1rem);
  margin-left: auto;
  flex-shrink: 0;
}

.dads-menu-list__item[data-expanded] .dads-menu-list__end-icon {
  transform: rotate(180deg);
}
/* jp-go-digital-design-system — vendored CSS
 * Source: https://github.com/digital-go-jp/design-system-example-components-html
 * Upstream commit: 3b34f4c3553fa3bee90bfd8b6fe962ac3055107d — MIT License, Copyright (c) 2025 デジタル庁
 * Generated by scripts/vendor.cljs — DO NOT EDIT BY HAND (re-vendor instead). */
.dads-menu-list-box {
  position: relative;
  display: block;
  width: fit-content;
  color: var(--color-neutral-solid-gray-900);
  font-weight: normal;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.2;
  font-family: var(--font-family-sans);
  letter-spacing: 0.02em;
}

.dads-menu-list-box__opener {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: calc(8 / 16 * 1rem);
  border: 0;
  background: transparent;
  padding-top: calc(4 / 16 * 1rem);
  padding-bottom: calc(4 / 16 * 1rem);
  font: inherit;
  letter-spacing: inherit;
}

.dads-menu-list-box__opener[data-size="sm"] {
  min-height: calc(36 / 16 * 1rem);
  padding-right: calc(4 / 16 * 1rem);
  padding-left: calc(4 / 16 * 1rem);
  column-gap: calc(4 / 16 * 1rem);
}

.dads-menu-list-box__opener[data-size="md"] {
  min-height: calc(44 / 16 * 1rem);
  padding-right: calc(16 / 16 * 1rem);
  padding-left: calc(16 / 16 * 1rem);
  column-gap: calc(8 / 16 * 1rem);
}

.dads-menu-list-box__opener[data-style="outlined"] {
  border: 1px solid var(--color-neutral-solid-gray-420);
  background-color: transparent;
}

.dads-menu-list-box__opener[data-style="filled"] {
  background-color: var(--color-neutral-solid-gray-50);
}

.dads-menu-list-box__opener[data-text-weight="bold"] {
  font-weight: bold;
}

@media (hover: hover) {
  .dads-menu-list-box__opener:hover {
    background-color: var(--color-neutral-solid-gray-50);
    text-decoration: underline;
    text-underline-offset: calc(3 / 16 * 1rem);
  }

  .dads-menu-list-box__opener[data-style="outlined"]:hover {
    border-color: var(--color-neutral-black);
  }

  .dads-menu-list-box__opener[data-style="filled"]:hover {
    background-color: var(--color-neutral-solid-gray-100);
  }
}

.dads-menu-list-box__opener:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-300);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-menu-list-box__opener[data-style="filled"]:focus-visible {
  background-color: var(--color-neutral-solid-gray-50);
}

.dads-menu-list-box__opener-icon {
  flex-shrink: 0;
  width: calc(20 / 16 * 1rem);
  height: calc(20 / 16 * 1rem);
}

.dads-menu-list-box__opener-arrow {
  margin-top: calc(4 / 16 * 1rem);
  flex-shrink: 0;
  width: calc(16 / 16 * 1rem);
  height: calc(16 / 16 * 1rem);
}

[aria-expanded="true"] > .dads-menu-list-box__opener-arrow {
  transform: rotate(180deg);
}

.dads-menu-list-box__popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  width: max-content;
  max-height: calc((16 + 44 * 6.5) / 16 * 1rem);
  overflow-y: auto;
  border-radius: calc(8 / 16 * 1rem) 0 0 calc(8 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-420);
  background-color: var(--color-neutral-white);
  padding: calc(16 / 16 * 1rem) 0;
  box-shadow: var(--elevation-1);
}
/* jp-go-digital-design-system — vendored CSS
 * Source: https://github.com/digital-go-jp/design-system-example-components-html
 * Upstream commit: 3b34f4c3553fa3bee90bfd8b6fe962ac3055107d — MIT License, Copyright (c) 2025 デジタル庁
 * Generated by scripts/vendor.cljs — DO NOT EDIT BY HAND (re-vendor instead). */
.dads-language-selector {
  display: block;
  width: fit-content;
}

.dads-language-selector__check {
  visibility: hidden;
}

[aria-current] > .dads-language-selector__check {
  visibility: visible;
}
/* jp-go-digital-design-system — vendored CSS
 * Source: https://github.com/digital-go-jp/design-system-example-components-html
 * Upstream commit: 3b34f4c3553fa3bee90bfd8b6fe962ac3055107d — MIT License, Copyright (c) 2025 デジタル庁
 * Generated by scripts/vendor.cljs — DO NOT EDIT BY HAND (re-vendor instead). */
.dads-button {
  --button-color: var(--color-key-900);
  --button-hover-color: var(--color-key-1000);
  --button-active-color: var(--color-key-1200);
  --button-outline-hover-bg-color: var(--color-key-200);
  --button-outline-active-bg-color: var(--color-key-300);
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(4 / 16 * 1rem);
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  font-weight: bold;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1;
  font-family: var(--font-family-sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-underline-offset: calc(3 / 16 * 1rem);
}

.dads-button:disabled,
.dads-button[aria-disabled="true"] {
  cursor: default;
}

.dads-button[data-type="solid-fill"] {
  border: 4px double transparent;
  background-color: var(--button-color);
  color: var(--color-neutral-white);
}

@media (hover: hover) {
  .dads-button[data-type="solid-fill"]:hover {
    background-color: var(--button-hover-color);
    text-decoration: underline;
    text-decoration-thickness: calc(1 / 16 * 1rem);
  }
}

.dads-button[data-type="solid-fill"]:active {
  background-color: var(--button-active-color);
  text-decoration: underline;
}

.dads-button[data-type="solid-fill"]:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-button[data-type="solid-fill"]:disabled,
.dads-button[data-type="solid-fill"][aria-disabled="true"] {
  background-color: var(--color-neutral-solid-gray-300);
  color: var(--color-neutral-solid-gray-50);
  text-decoration: none;
}

@media (forced-colors: active) {
  .dads-button[data-type="solid-fill"]:disabled,
  .dads-button[data-type="solid-fill"][aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }
}

.dads-button[data-type="outline"] {
  border: 1px solid currentcolor;
  background-color: var(--color-neutral-white);
  color: var(--button-color);
}

@media (hover: hover) {
  .dads-button[data-type="outline"]:hover {
    background-color: var(--button-outline-hover-bg-color);
    color: var(--button-hover-color);
    text-decoration: underline;
    text-decoration-thickness: calc(1 / 16 * 1rem);
  }
}

.dads-button[data-type="outline"]:active {
  background-color: var(--button-outline-active-bg-color);
  color: var(--button-active-color);
  text-decoration: underline;
}

.dads-button[data-type="outline"]:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-button[data-type="outline"]:disabled,
.dads-button[data-type="outline"][aria-disabled="true"] {
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-300);
  text-decoration: none;
}

@media (forced-colors: active) {
  .dads-button[data-type="outline"]:disabled,
  .dads-button[data-type="outline"][aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }
}

.dads-button[data-type="text"] {
  border: 0;
  background-color: transparent;
  color: var(--button-color);
  text-decoration: underline;
  text-decoration-thickness: calc(1 / 16 * 1rem);
}

@media (hover: hover) {
  .dads-button[data-type="text"]:hover {
    background-color: var(--color-key-50);
    color: var(--button-hover-color);
    text-decoration-thickness: calc(3 / 16 * 1rem);
  }
}

.dads-button[data-type="text"]:active {
  background-color: var(--color-key-100);
  color: var(--button-active-color);
}

.dads-button[data-type="text"]:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-300);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-button[data-type="text"]:disabled,
.dads-button[data-type="text"][aria-disabled="true"] {
  background-color: transparent;
  color: var(--color-neutral-solid-gray-300);
  text-decoration-thickness: revert;
}

@media (forced-colors: active) {
  .dads-button[data-type="text"]:disabled,
  .dads-button[data-type="text"][aria-disabled="true"] {
    color: GrayText;
  }
}

.dads-button[data-size="lg"] {
  min-width: calc(136 / 16 * 1rem);
  min-height: calc(56 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
}

.dads-button[data-size="md"] {
  min-width: calc(96 / 16 * 1rem);
  min-height: calc(48 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
}

.dads-button[data-size="sm"] {
  position: relative;
  min-width: calc(80 / 16 * 1rem);
  min-height: calc(36 / 16 * 1rem);
  border-radius: calc(6 / 16 * 1rem);
  padding: calc(2 / 16 * 1rem) calc(12 / 16 * 1rem);
}

.dads-button[data-size="sm"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  height: calc(44 / 16 * 1rem);
}

.dads-button[data-size="xs"] {
  position: relative;
  min-width: calc(72 / 16 * 1rem);
  min-height: calc(28 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
  padding: calc(2 / 16 * 1rem) calc(8 / 16 * 1rem);
  font-size: calc(14 / 16 * 1rem);
}

.dads-button[data-size="xs"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  height: calc(44 / 16 * 1rem);
}

.dads-button__icon {
  flex-shrink: 0;
}
:root { --hig-color-label: var(--color-neutral-solid-gray-800); --hig-color-opaque-separator: var(--color-neutral-solid-gray-300); --hig-color-placeholder-text: var(--color-neutral-solid-gray-500); --hig-color-quaternary-label: var(--color-neutral-solid-gray-420); --hig-color-quaternary-system-fill: var(--color-neutral-solid-gray-100); --hig-color-secondary-label: var(--color-neutral-solid-gray-600); --hig-color-secondary-system-background: var(--color-neutral-solid-gray-50); --hig-color-secondary-system-fill: var(--color-neutral-solid-gray-200); --hig-color-secondary-system-grouped-background: var(--color-neutral-white); --hig-color-separator: var(--color-neutral-solid-gray-300); --hig-color-system-background: var(--color-neutral-white); --hig-color-system-fill: var(--color-neutral-solid-gray-200); --hig-color-system-grouped-background: var(--color-neutral-solid-gray-50); --hig-color-tertiary-label: var(--color-neutral-solid-gray-500); --hig-color-tertiary-system-background: var(--color-neutral-solid-gray-50); --hig-color-tertiary-system-fill: var(--color-neutral-solid-gray-100); --hig-color-tertiary-system-grouped-background: var(--color-neutral-solid-gray-50); --hig-color-tint: var(--color-key-900); --hig-font-display: var(--font-family-sans); --hig-font-mono: var(--font-family-mono); --hig-font-text: var(--font-family-sans); --hig-hairline: var(--color-neutral-solid-gray-300); --hig-palette-blue: var(--color-key-900); --hig-palette-cyan: var(--color-primitive-cyan-700); --hig-palette-gray: var(--color-neutral-solid-gray-500); --hig-palette-green: var(--color-primitive-green-700); --hig-palette-orange: var(--color-primitive-orange-800); --hig-palette-pink: var(--color-primitive-magenta-700); --hig-palette-purple: var(--color-primitive-purple-700); --hig-palette-red: var(--color-primitive-red-800); --hig-palette-yellow: var(--color-primitive-yellow-700); --hig-radius-capsule: 999px; --hig-radius-large: calc(20 / 16 * 1rem); --hig-radius-lg: calc(20 / 16 * 1rem); --hig-radius-md: calc(14 / 16 * 1rem); --hig-radius-sm: calc(10 / 16 * 1rem); --hig-radius-xl: calc(28 / 16 * 1rem); --hig-radius-xs: calc(6 / 16 * 1rem); --hig-spacing-1: calc(4 / 16 * 1rem); --hig-spacing-10: calc(64 / 16 * 1rem); --hig-spacing-2: calc(8 / 16 * 1rem); --hig-spacing-3: calc(12 / 16 * 1rem); --hig-spacing-4: calc(16 / 16 * 1rem); --hig-spacing-5: calc(20 / 16 * 1rem); --hig-spacing-6: calc(24 / 16 * 1rem); --hig-spacing-7: calc(32 / 16 * 1rem); --hig-spacing-8: calc(40 / 16 * 1rem); --hig-spacing-9: calc(48 / 16 * 1rem); --hig-spacing-content-margin: calc(16 / 16 * 1rem); --hig-text-body-font-size: calc(17 / 16 * 1rem); --hig-text-body-line-height: calc(22 / 16 * 1rem); --hig-text-callout-font-size: calc(16 / 16 * 1rem); --hig-text-callout-line-height: calc(21 / 16 * 1rem); --hig-text-caption1-font-size: calc(12 / 16 * 1rem); --hig-text-caption1-line-height: calc(16 / 16 * 1rem); --hig-text-caption2-font-size: calc(11 / 16 * 1rem); --hig-text-caption2-line-height: calc(13 / 16 * 1rem); --hig-text-footnote-font-size: calc(13 / 16 * 1rem); --hig-text-footnote-line-height: calc(18 / 16 * 1rem); --hig-text-headline-font-size: calc(17 / 16 * 1rem); --hig-text-headline-line-height: calc(22 / 16 * 1rem); --hig-text-large-title-font-size: calc(34 / 16 * 1rem); --hig-text-large-title-line-height: calc(41 / 16 * 1rem); --hig-text-subheadline-font-size: calc(15 / 16 * 1rem); --hig-text-subheadline-line-height: calc(20 / 16 * 1rem); --hig-text-title1-font-size: calc(28 / 16 * 1rem); --hig-text-title1-line-height: calc(34 / 16 * 1rem); --hig-text-title2-font-size: calc(22 / 16 * 1rem); --hig-text-title2-line-height: calc(28 / 16 * 1rem); --hig-text-title3-font-size: calc(20 / 16 * 1rem); --hig-text-title3-line-height: calc(25 / 16 * 1rem); }.brand { display: flex; align-items: center; gap: var(--hig-spacing-3); margin: 0 0 var(--hig-spacing-4); text-decoration: none; color: inherit; }
.brand .mark { width: 56px; height: 56px; flex: 0 0 auto; display: block; border-radius: 22.4%; }
.brand strong, .brand span { display: block; }
.brand span { color: var(--hig-color-secondary-label); }
.brand .brand__sub { max-width: 18em; line-height: 1.35; }
.hdr-connect { position: relative; margin: 0 0 var(--hig-spacing-4); }
.hdr-connect__summary { box-sizing: border-box; align-items: center; min-height: 44px; white-space: nowrap; font-weight: 600; list-style: none; background: var(--hig-color-system-background); cursor: pointer; padding: var(--hig-spacing-2) var(--hig-spacing-3); gap: var(--hig-spacing-2); display: flex; border: var(--hig-hairline) solid var(--hig-color-separator); border-radius: var(--hig-radius-sm); }
.hdr-connect__summary::-webkit-details-marker { display: none; }
.hdr-connect[open] .hdr-connect__summary { border-color: var(--hig-color-tint); color: var(--hig-color-tint); }
.hdr-connect__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--hig-color-tertiary-label); }
.hdr-connect[data-connected] .hdr-connect__dot { background: var(--hig-color-tint); }
.hdr-connect__panel { min-width: min(20rem, 84vw); box-sizing: border-box; max-height: calc(100dvh - 120px); inset-block-start: calc(100% + 6px); background: var(--hig-color-system-background); inset-inline-start: 0; z-index: 40; padding: var(--hig-spacing-3); gap: var(--hig-spacing-1); display: grid; position: absolute; border: var(--hig-hairline) solid var(--hig-color-separator); overflow-y: auto; border-radius: var(--hig-radius-md); }
.hdr-connect__row { box-sizing: border-box; align-content: center; color: var(--hig-color-label); text-align: start; min-height: 44px; width: 100%; background: var(--hig-color-secondary-system-background); cursor: pointer; font: inherit; padding: var(--hig-spacing-2) var(--hig-spacing-3); gap: 2px; text-decoration: none; display: grid; border: var(--hig-hairline) solid var(--hig-color-separator); border-radius: var(--hig-radius-sm); }
.hdr-connect__row:hover { border-color: var(--hig-color-tint); color: var(--hig-color-tint); }
.hdr-connect__row-title { font-weight: 600; }
.hdr-connect__row small { color: var(--hig-color-secondary-label); }
.hdr-connect__row img { width: 20px; height: 20px; border-radius: 5px; }
.hdr-connect__wallets { display: grid; gap: var(--hig-spacing-1); }
.hdr-connect__sep { margin: var(--hig-spacing-2) 0 0; color: var(--hig-color-tertiary-label); font-size: var(--hig-text-caption2-font-size); text-transform: uppercase; letter-spacing: 0.06em; }
.hdr-connect__msg { margin: 0; overflow-wrap: anywhere; font-size: var(--hig-text-caption1-font-size); color: var(--hig-color-secondary-label); }
.hdr-connect__msg:empty { display: none; }
.hdr-connect__note { color: var(--hig-color-tertiary-label); line-height: 1.5; }
.mobile-navigation { display: none; }
.nav { display: grid; gap: var(--hig-spacing-1); }
.nav__group { color: var(--hig-color-tertiary-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: var(--hig-spacing-3) 0 var(--hig-spacing-1); padding: 0 var(--hig-spacing-2); }
.nav a { display: flex; align-items: center; gap: var(--hig-spacing-2); min-height: 44px; padding: 0 var(--hig-spacing-2); border-radius: var(--hig-radius-sm); color: var(--hig-color-label); text-decoration: none; }
.nav a.active, .nav a:hover { background: var(--hig-color-secondary-system-fill); text-decoration: none; }
.nav a:focus-visible { outline: 2px solid var(--hig-color-tint); outline-offset: 2px; }
.nav svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; }
.kotoba-identity { display: grid; gap: var(--hig-spacing-2); margin: var(--hig-spacing-6) 0; padding: var(--hig-spacing-5); border: var(--hig-hairline) solid var(--hig-color-separator); border-inline-start: 4px solid var(--hig-color-secondary-label); border-radius: var(--hig-radius-sm); background: var(--hig-color-secondary-system-background); }
.kotoba-identity[data-state='connected'] { border-inline-start-color: var(--hig-color-tint); }
.kotoba-identity__eyebrow { margin: 0; font-weight: 700; letter-spacing: 0.06em; color: var(--hig-color-secondary-label); }
.kotoba-identity h2, .kotoba-identity p { margin: 0; }
.kotoba-identity code { overflow-wrap: anywhere; font-family: var(--hig-font-family-mono, ui-monospace, monospace); }
.kotoba-identity .button { width: fit-content; }
.language-switch-slot { margin-top: var(--hig-spacing-4); padding-top: var(--hig-spacing-3); border-top: var(--hig-hairline) solid var(--hig-color-separator); }
.pane-tabs { flex: 0 0 auto; display: flex; gap: var(--hig-spacing-1); overflow-x: auto; overscroll-behavior-x: contain; padding: var(--hig-spacing-2) 0; border-bottom: var(--hig-hairline) solid var(--hig-color-separator); }
.pane-tabs a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; padding: 0 var(--hig-spacing-3); border-radius: var(--hig-radius-sm); color: var(--hig-color-secondary-label); text-decoration: none; }
.pane-tabs a:hover { background: var(--hig-color-secondary-system-fill); color: var(--hig-color-label); text-decoration: none; }
.pane-tabs a:focus-visible { outline: 2px solid var(--hig-color-tint); outline-offset: 2px; }
html:has(.cockpit), html:has(.cockpit) body { height: 100%; margin: 0; overflow: hidden; }
.cockpit { height: 100vh; max-height: 100vh; overflow: hidden; }
.cockpit { height: 100dvh; max-height: 100dvh; }
.cockpit > * { min-height: 0; }
.cockpit .sidebar, .cockpit > aside { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.cockpit-main { height: 100%; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.cockpit-main > .topbar { flex: 0 0 auto; }
.pane { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(var(--hig-spacing-8) + env(safe-area-inset-bottom,0px)); }
.pane:target { display: block; }
.pane--only { display: block; }
.cockpit-main:not(:has(.pane:target)) > .pane { display: none; }
.cockpit-main:not(:has(.pane:target)) > #pane-overview { display: block; }
.cockpit-main:not(:has(.pane:target)) > .pane--only { display: block; }@media (max-width: 768px) { html:has(.cockpit), html:has(.cockpit) body { height: auto; overflow: visible; } .cockpit { height: auto; max-height: none; overflow: visible; } .cockpit-main { height: auto; overflow: visible; } .pane { overflow-y: visible; } .cockpit aside.kotoba-shell__app-sidebar { height: auto; overflow: visible; } .site-sidebar { position: relative; min-height: 44px; } .desktop-navigation { display: none; } .brand { min-width: 0; margin: 0; padding-inline-end: 0; max-width: calc(100% - 11.5rem); } .hdr-connect { position: absolute; z-index: 31; inset-block-start: 0; inset-inline-end: 56px; margin: 0; } .hdr-connect__summary { min-height: 44px; } .hdr-connect__panel { inset-inline-start: auto; inset-inline-end: 0; min-width: min(19rem, calc(100vw - 32px)); } .brand .mark { width: 40px; height: 40px; } .brand .brand__sub { display: none; } .brand > div { min-width: 0; overflow: hidden; } .brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hdr-connect__summary { max-width: 9rem; font-size: 0.875rem; } #hdr-connect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-navigation { display: block; position: absolute; z-index: 30; inset-block-start: 0; inset-inline-end: 0; } .mobile-navigation summary { box-sizing: border-box; place-items: center; list-style: none; width: 44px; background: var(--hig-color-system-background); cursor: pointer; display: grid; border: var(--hig-hairline) solid var(--hig-color-separator); border-radius: var(--hig-radius-sm); height: 44px; } .mobile-navigation summary::-webkit-details-marker { display: none; } .mobile-navigation summary svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; } .mobile-navigation[open] summary { background: var(--hig-color-secondary-system-fill); } .mobile-navigation__panel { box-sizing: border-box; inset-inline-end: 0; max-height: calc(100dvh - 76px); inset-block-start: 52px; width: min(340px, calc(100vw - 32px)); background: var(--hig-color-system-background); padding: var(--hig-spacing-3); position: absolute; border: var(--hig-hairline) solid var(--hig-color-separator); overflow-y: auto; border-radius: var(--hig-radius-md); } .mobile-navigation .nav { grid-template-columns: 1fr; } .nav__group { grid-column: 1 / -1; } }:root{color-scheme:light;}