@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-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-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-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;
}
@media (prefers-color-scheme: dark) {
:root {
  --hig-color-secondary-label: rgba(235,235,245,0.6);
  --hig-color-tertiary-system-background: #2C2C2E;
  --hig-color-tertiary-label: rgba(235,235,245,0.3);
  --hig-color-system-grouped-background: #000000;
  --hig-color-secondary-system-fill: rgba(120,120,128,0.32);
  --hig-color-secondary-system-grouped-background: #1C1C1E;
  --hig-color-quaternary-system-fill: rgba(118,118,128,0.18);
  --hig-color-secondary-system-background: #1C1C1E;
  --hig-color-tint: #14b8a6;
  --hig-color-opaque-separator: #38383A;
  --hig-color-system-fill: rgba(120,120,128,0.36);
  --hig-color-quaternary-label: rgba(235,235,245,0.16);
  --hig-color-system-background: #000000;
  --hig-color-tertiary-system-fill: rgba(118,118,128,0.24);
  --hig-color-label: #FFFFFF;
  --hig-color-placeholder-text: rgba(235,235,245,0.3);
  --hig-color-tertiary-system-grouped-background: #2C2C2E;
  --hig-color-separator: rgba(84,84,88,0.65);
  --hig-palette-orange: #FF9F0A;
  --hig-palette-gray: #8E8E93;
  --hig-palette-gray3: #48484A;
  --hig-palette-gray4: #3A3A3C;
  --hig-palette-yellow: #FFD60A;
  --hig-palette-green: #30D158;
  --hig-palette-indigo: #5E5CE6;
  --hig-palette-cyan: #64D2FF;
  --hig-palette-mint: #63E6E2;
  --hig-palette-gray2: #636366;
  --hig-palette-red: #FF453A;
  --hig-palette-blue: #0A84FF;
  --hig-palette-pink: #FF375F;
  --hig-palette-teal: #40CBE0;
  --hig-palette-purple: #BF5AF2;
  --hig-palette-gray6: #1C1C1E;
  --hig-palette-gray5: #2C2C2E;
  --hig-palette-brown: #AC8E68;
}
}
:root[data-appearance="dark"] {
  --hig-color-secondary-label: rgba(235,235,245,0.6);
  --hig-color-tertiary-system-background: #2C2C2E;
  --hig-color-tertiary-label: rgba(235,235,245,0.3);
  --hig-color-system-grouped-background: #000000;
  --hig-color-secondary-system-fill: rgba(120,120,128,0.32);
  --hig-color-secondary-system-grouped-background: #1C1C1E;
  --hig-color-quaternary-system-fill: rgba(118,118,128,0.18);
  --hig-color-secondary-system-background: #1C1C1E;
  --hig-color-tint: #14b8a6;
  --hig-color-opaque-separator: #38383A;
  --hig-color-system-fill: rgba(120,120,128,0.36);
  --hig-color-quaternary-label: rgba(235,235,245,0.16);
  --hig-color-system-background: #000000;
  --hig-color-tertiary-system-fill: rgba(118,118,128,0.24);
  --hig-color-label: #FFFFFF;
  --hig-color-placeholder-text: rgba(235,235,245,0.3);
  --hig-color-tertiary-system-grouped-background: #2C2C2E;
  --hig-color-separator: rgba(84,84,88,0.65);
  --hig-palette-orange: #FF9F0A;
  --hig-palette-gray: #8E8E93;
  --hig-palette-gray3: #48484A;
  --hig-palette-gray4: #3A3A3C;
  --hig-palette-yellow: #FFD60A;
  --hig-palette-green: #30D158;
  --hig-palette-indigo: #5E5CE6;
  --hig-palette-cyan: #64D2FF;
  --hig-palette-mint: #63E6E2;
  --hig-palette-gray2: #636366;
  --hig-palette-red: #FF453A;
  --hig-palette-blue: #0A84FF;
  --hig-palette-pink: #FF375F;
  --hig-palette-teal: #40CBE0;
  --hig-palette-purple: #BF5AF2;
  --hig-palette-gray6: #1C1C1E;
  --hig-palette-gray5: #2C2C2E;
  --hig-palette-brown: #AC8E68;
}
: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="dark"] { color-scheme: 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-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-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-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-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-radius-sm: 10px;
  --liquid-glass-radius-md: 16px;
  --liquid-glass-radius-lg: 24px;
  --liquid-glass-radius-pill: 999px;
  --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-accent-tint: rgba(15,118,110,0.55);
  --liquid-glass-accent-tint-strong: rgba(15,118,110,0.85);
  --liquid-glass-lens-frequency: 0.008;
  --liquid-glass-lens-scale: 8;
  --liquid-glass-lens-octaves: 2;
  --liquid-glass-ink-default: #1c1c1e;
  --liquid-glass-ink-shadow: 0 1px 2px rgba(255,255,255,.4);
}
@media (prefers-color-scheme: dark) {
:root {
  --liquid-glass-surface-clear-tint: rgba(18,18,22,0.30);
  --liquid-glass-surface-clear-border: rgba(255,255,255,0.08);
  --liquid-glass-surface-regular-tint: rgba(20,20,24,0.42);
  --liquid-glass-surface-regular-border: rgba(255,255,255,0.12);
  --liquid-glass-surface-thick-tint: rgba(16,16,20,0.58);
  --liquid-glass-surface-thick-border: rgba(255,255,255,0.16);
  --liquid-glass-specular-highlight-opacity: 0.30;
  --liquid-glass-specular-rim-top-opacity: 0.5;
  --liquid-glass-specular-rim-bottom-opacity: 0.02;
  --liquid-glass-specular-pointer-opacity: 0.28;
  --liquid-glass-ink-default: #f5f5f7;
  --liquid-glass-ink-shadow: 0 1px 3px rgba(0,0,0,.45);
  --liquid-glass-accent-tint: rgba(20,184,166,0.55);
  --liquid-glass-accent-tint-strong: rgba(20,184,166,0.85);
}
}
.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 { 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 { 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__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 { 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)); 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; 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: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: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 { opacity: .45; cursor: not-allowed; transform: none; filter: 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__text-field:focus-within,.liquid-glass__search-field:focus-within,.liquid-glass__text-area:focus-within { box-shadow: 0 0 0 2px var(--liquid-glass-accent-tint); }
.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__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:focus-visible ~ .liquid-glass__toggle-track { box-shadow: 0 0 0 2px var(--liquid-glass-accent-tint); }
.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: 13px; 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__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:hover { background: rgba(255,255,255,.18); }
.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__chip-remove:hover { opacity: 1; background: rgba(255,255,255,.18); }
.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; } }
.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__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__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; } }
}
@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; }
.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; }
@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); } }
}