/* Auto-generated by scripts/compile_design_tokens.py. Do not edit manually. */
:root {
  --sotido-color-accent: #217A5E;
  --sotido-color-accent-blue: #489EF9;
  --sotido-color-accent-blue-dark: #1769C2;
  --sotido-color-accent-blue-dark-pressed: #155AA8;
  --sotido-color-accent-blue-pressed: #287FD9;
  --sotido-color-accent-green: #53D073;
  --sotido-color-accent-green-dark: #53D073;
  --sotido-color-accent-green-light: #1F7A35;
  --sotido-color-accent-orange: #FF9F0A;
  --sotido-color-accent-orange-dark: #FF9F0A;
  --sotido-color-accent-orange-light: #B54708;
  --sotido-color-accent-red: #FF6060;
  --sotido-color-accent-red-dark: #D9381E;
  --sotido-color-accent-red-light: #FF6B6B;
  --sotido-color-accent-text: #12694E;
  --sotido-color-accent-yellow: #FFFE00;
  --sotido-color-accent-yellow-dark: #FFFE00;
  --sotido-color-accent-yellow-light: #8A6500;
  --sotido-color-body: #4E5854;
  --sotido-color-border: #DAE1DB;
  --sotido-color-danger: #823F3F;
  --sotido-color-danger-surface: #FFF2EE;
  --sotido-color-danger-text: #963728;
  --sotido-color-dark-danger-surface: #3A2424;
  --sotido-color-dark-danger-text: #FF9A8D;
  --sotido-color-dark-info-surface: #1F3447;
  --sotido-color-dark-info-text: #9AD0FF;
  --sotido-color-dark-surface1: #181818;
  --sotido-color-dark-surface2: #292929;
  --sotido-color-dark-surface3: #393939;
  --sotido-color-dark-surface4: #4B4B4B;
  --sotido-color-dark-surface5: #515151;
  --sotido-color-dark-surface6: #585858;
  --sotido-color-dark-text-inverse: #111111;
  --sotido-color-dark-text-main: #F2F2F2;
  --sotido-color-dark-text-muted: #D0D0D0;
  --sotido-color-dark-text-second: #D4D4D4;
  --sotido-color-dark-warning-surface: #332D18;
  --sotido-color-divider: #E1E7E2;
  --sotido-color-divider-subtle: #E8ECE9;
  --sotido-color-globe-overlay-fill-base: #101720;
  --sotido-color-globe-overlay-stroke: #344B5E;
  --sotido-color-info-surface: #E4F3FC;
  --sotido-color-info-text: #1A5B84;
  --sotido-color-ink: #162522;
  --sotido-color-muted: #5B6661;
  --sotido-color-neutral-surface: #F5F7F5;
  --sotido-color-neutral-text: #44524E;
  --sotido-color-surface: #FFFFFF;
  --sotido-color-surface-subtle: #F8FAF7;
  --sotido-color-surface-tint: #E8F7F1;
  --sotido-color-warning-surface: #F8F3E5;
  --sotido-radius-card: 8px;
  --sotido-radius-compact: 6px;
  --sotido-radius-large: 14px;
  --sotido-radius-medium: 10px;
  --sotido-radius-panel: 12px;
  --sotido-radius-pill: 999px;
  --sotido-radius-xlarge: 18px;
  --sotido-space-lg: 16px;
  --sotido-space-md: 12px;
  --sotido-space-sm: 8px;
  --sotido-space-touch-target: 44px;
  --sotido-space-xl: 24px;
  --sotido-space-xs: 6px;
  --sotido-space-xxl: 32px;
  --sotido-space-xxs: 4px;
  --sotido-type-body: 14px;
  --sotido-type-body-compact: 13px;
  --sotido-type-body-large: 16px;
  --sotido-type-caption: 12px;
  --sotido-type-headline: 22px;
  --sotido-type-label: 11px;
  --sotido-type-micro: 10px;
  --sotido-type-title: 17px;
  --sotido-font-weight-black: 900;
  --sotido-font-weight-bold: 700;
  --sotido-font-weight-heavy: 800;
  --sotido-font-weight-medium: 500;
  --sotido-font-weight-regular: 400;
  --sotido-font-weight-semibold: 600;
  --sotido-layer-base: 0;
  --sotido-layer-capture: 200000;
  --sotido-layer-critical: 180000;
  --sotido-layer-gate: 3600;
  --sotido-layer-header: 3300;
  --sotido-layer-maximum: 2147483647;
  --sotido-layer-modal: 12000;
  --sotido-layer-navigation: 3200;
  --sotido-layer-overlay: 1000;
  --sotido-layer-popover: 10000;
  --sotido-layer-share: 15000;
  --sotido-layer-sticky: 700;
  --sotido-layer-workspace: 2000;
  --sotido-motion-ambient: 800ms;
  --sotido-motion-cascade: 24ms;
  --sotido-motion-deliberate: 220ms;
  --sotido-motion-fast: 140ms;
  --sotido-motion-instant: 120ms;
  --sotido-motion-relaxed: 360ms;
  --sotido-motion-standard: 180ms;
  --sotido-shadow-surface: 0px 4px 20px 0px rgba(0, 0, 0, 0.5);
  --sotido-alpha-disabled-control: 0.55;
  --sotido-alpha-disabled-surface: 0.72;
  --sotido-alpha-web-border-subtle-percent: 12%;
  --sotido-alpha-web-secondary-control-fill-dark-percent: 10%;
  --sotido-alpha-web-secondary-control-fill-light-percent: 6%;
  --sotido-theme-dark-accent: var(--sotido-color-accent-blue-dark);
  --sotido-theme-dark-accent-pressed: var(--sotido-color-accent-blue-dark-pressed);
  --sotido-theme-dark-background: var(--sotido-color-dark-surface1);
  --sotido-theme-dark-border: var(--sotido-color-dark-surface4);
  --sotido-theme-dark-control-active-surface: var(--sotido-color-dark-surface3);
  --sotido-theme-dark-danger: var(--sotido-color-accent-red-dark);
  --sotido-theme-dark-danger-surface: var(--sotido-color-dark-danger-surface);
  --sotido-theme-dark-danger-text: var(--sotido-color-dark-danger-text);
  --sotido-theme-dark-destructive-accent: var(--sotido-color-accent-red-dark);
  --sotido-theme-dark-destructive-accent-text: var(--sotido-color-surface);
  --sotido-theme-dark-divider: var(--sotido-color-dark-surface5);
  --sotido-theme-dark-info-surface: var(--sotido-color-dark-info-surface);
  --sotido-theme-dark-info-text: var(--sotido-color-dark-info-text);
  --sotido-theme-dark-primary-accent-text: var(--sotido-color-dark-text-main);
  --sotido-theme-dark-selection-companion: var(--sotido-color-accent-orange-dark);
  --sotido-theme-dark-selection-companion-text: var(--sotido-color-dark-text-inverse);
  --sotido-theme-dark-success: var(--sotido-color-accent-green-dark);
  --sotido-theme-dark-success-accent: var(--sotido-color-accent-green-dark);
  --sotido-theme-dark-success-accent-text: var(--sotido-color-dark-text-inverse);
  --sotido-theme-dark-surface: var(--sotido-color-dark-surface2);
  --sotido-theme-dark-surface-chrome: var(--sotido-color-dark-surface5);
  --sotido-theme-dark-surface-highest: var(--sotido-color-dark-surface6);
  --sotido-theme-dark-surface-raised: var(--sotido-color-dark-surface4);
  --sotido-theme-dark-surface-soft: var(--sotido-color-dark-surface3);
  --sotido-theme-dark-text-inverse: var(--sotido-color-dark-text-inverse);
  --sotido-theme-dark-text-muted: var(--sotido-color-dark-text-muted);
  --sotido-theme-dark-text-on-accent: var(--sotido-color-dark-text-inverse);
  --sotido-theme-dark-text-primary: var(--sotido-color-dark-text-main);
  --sotido-theme-dark-text-secondary: var(--sotido-color-dark-text-second);
  --sotido-theme-dark-warning-accent: var(--sotido-color-accent-yellow-dark);
  --sotido-theme-dark-warning-accent-text: var(--sotido-color-dark-text-inverse);
  --sotido-theme-dark-warning-surface: var(--sotido-color-dark-warning-surface);
  --sotido-theme-dark-weekend-surface: var(--sotido-color-divider-subtle);
  --sotido-theme-dark-weekend-text: var(--sotido-color-ink);
  --sotido-theme-light-accent: var(--sotido-color-accent-blue);
  --sotido-theme-light-accent-pressed: var(--sotido-color-accent-blue-pressed);
  --sotido-theme-light-background: var(--sotido-color-divider);
  --sotido-theme-light-border: var(--sotido-color-border);
  --sotido-theme-light-control-active-surface: var(--sotido-color-border);
  --sotido-theme-light-danger: var(--sotido-color-accent-red-light);
  --sotido-theme-light-danger-surface: var(--sotido-color-danger-surface);
  --sotido-theme-light-danger-text: var(--sotido-color-danger-text);
  --sotido-theme-light-destructive-accent: var(--sotido-color-accent-red-light);
  --sotido-theme-light-destructive-accent-text: var(--sotido-color-dark-text-inverse);
  --sotido-theme-light-divider: var(--sotido-color-divider-subtle);
  --sotido-theme-light-info-surface: var(--sotido-color-info-surface);
  --sotido-theme-light-info-text: var(--sotido-color-info-text);
  --sotido-theme-light-primary-accent-text: var(--sotido-color-dark-text-inverse);
  --sotido-theme-light-selection-companion: var(--sotido-color-accent-orange-light);
  --sotido-theme-light-selection-companion-text: var(--sotido-color-surface);
  --sotido-theme-light-success: var(--sotido-color-accent-green-light);
  --sotido-theme-light-success-accent: var(--sotido-color-accent-green-light);
  --sotido-theme-light-success-accent-text: var(--sotido-color-surface);
  --sotido-theme-light-surface: var(--sotido-color-surface);
  --sotido-theme-light-surface-chrome: var(--sotido-color-divider-subtle);
  --sotido-theme-light-surface-highest: var(--sotido-color-surface);
  --sotido-theme-light-surface-raised: var(--sotido-color-neutral-surface);
  --sotido-theme-light-surface-soft: var(--sotido-color-surface-subtle);
  --sotido-theme-light-text-inverse: var(--sotido-color-dark-text-main);
  --sotido-theme-light-text-muted: var(--sotido-color-muted);
  --sotido-theme-light-text-on-accent: var(--sotido-color-dark-text-inverse);
  --sotido-theme-light-text-primary: var(--sotido-color-ink);
  --sotido-theme-light-text-secondary: var(--sotido-color-body);
  --sotido-theme-light-warning-accent: var(--sotido-color-accent-yellow-light);
  --sotido-theme-light-warning-accent-text: var(--sotido-color-surface);
  --sotido-theme-light-warning-surface: var(--sotido-color-warning-surface);
  --sotido-theme-light-weekend-surface: var(--sotido-color-dark-surface5);
  --sotido-theme-light-weekend-text: var(--sotido-color-dark-text-main);
  --sotido-theme-accent: var(--sotido-theme-dark-accent);
  --sotido-theme-accent-pressed: var(--sotido-theme-dark-accent-pressed);
  --sotido-theme-background: var(--sotido-theme-dark-background);
  --sotido-theme-border: var(--sotido-theme-dark-border);
  --sotido-theme-control-active-surface: var(--sotido-theme-dark-control-active-surface);
  --sotido-theme-danger: var(--sotido-theme-dark-danger);
  --sotido-theme-danger-surface: var(--sotido-theme-dark-danger-surface);
  --sotido-theme-danger-text: var(--sotido-theme-dark-danger-text);
  --sotido-theme-destructive-accent: var(--sotido-theme-dark-destructive-accent);
  --sotido-theme-destructive-accent-text: var(--sotido-theme-dark-destructive-accent-text);
  --sotido-theme-divider: var(--sotido-theme-dark-divider);
  --sotido-theme-info-surface: var(--sotido-theme-dark-info-surface);
  --sotido-theme-info-text: var(--sotido-theme-dark-info-text);
  --sotido-theme-primary-accent-text: var(--sotido-theme-dark-primary-accent-text);
  --sotido-theme-selection-companion: var(--sotido-theme-dark-selection-companion);
  --sotido-theme-selection-companion-text: var(--sotido-theme-dark-selection-companion-text);
  --sotido-theme-success: var(--sotido-theme-dark-success);
  --sotido-theme-success-accent: var(--sotido-theme-dark-success-accent);
  --sotido-theme-success-accent-text: var(--sotido-theme-dark-success-accent-text);
  --sotido-theme-surface: var(--sotido-theme-dark-surface);
  --sotido-theme-surface-chrome: var(--sotido-theme-dark-surface-chrome);
  --sotido-theme-surface-highest: var(--sotido-theme-dark-surface-highest);
  --sotido-theme-surface-raised: var(--sotido-theme-dark-surface-raised);
  --sotido-theme-surface-soft: var(--sotido-theme-dark-surface-soft);
  --sotido-theme-text-inverse: var(--sotido-theme-dark-text-inverse);
  --sotido-theme-text-muted: var(--sotido-theme-dark-text-muted);
  --sotido-theme-text-on-accent: var(--sotido-theme-dark-text-on-accent);
  --sotido-theme-text-primary: var(--sotido-theme-dark-text-primary);
  --sotido-theme-text-secondary: var(--sotido-theme-dark-text-secondary);
  --sotido-theme-warning-accent: var(--sotido-theme-dark-warning-accent);
  --sotido-theme-warning-accent-text: var(--sotido-theme-dark-warning-accent-text);
  --sotido-theme-warning-surface: var(--sotido-theme-dark-warning-surface);
  --sotido-theme-weekend-surface: var(--sotido-theme-dark-weekend-surface);
  --sotido-theme-weekend-text: var(--sotido-theme-dark-weekend-text);
}
:is(html[data-theme="light"], body.theme-light, html[data-theme="light"] body) {
  --sotido-theme-accent: var(--sotido-theme-light-accent);
  --sotido-theme-accent-pressed: var(--sotido-theme-light-accent-pressed);
  --sotido-theme-background: var(--sotido-theme-light-background);
  --sotido-theme-border: var(--sotido-theme-light-border);
  --sotido-theme-control-active-surface: var(--sotido-theme-light-control-active-surface);
  --sotido-theme-danger: var(--sotido-theme-light-danger);
  --sotido-theme-danger-surface: var(--sotido-theme-light-danger-surface);
  --sotido-theme-danger-text: var(--sotido-theme-light-danger-text);
  --sotido-theme-destructive-accent: var(--sotido-theme-light-destructive-accent);
  --sotido-theme-destructive-accent-text: var(--sotido-theme-light-destructive-accent-text);
  --sotido-theme-divider: var(--sotido-theme-light-divider);
  --sotido-theme-info-surface: var(--sotido-theme-light-info-surface);
  --sotido-theme-info-text: var(--sotido-theme-light-info-text);
  --sotido-theme-primary-accent-text: var(--sotido-theme-light-primary-accent-text);
  --sotido-theme-selection-companion: var(--sotido-theme-light-selection-companion);
  --sotido-theme-selection-companion-text: var(--sotido-theme-light-selection-companion-text);
  --sotido-theme-success: var(--sotido-theme-light-success);
  --sotido-theme-success-accent: var(--sotido-theme-light-success-accent);
  --sotido-theme-success-accent-text: var(--sotido-theme-light-success-accent-text);
  --sotido-theme-surface: var(--sotido-theme-light-surface);
  --sotido-theme-surface-chrome: var(--sotido-theme-light-surface-chrome);
  --sotido-theme-surface-highest: var(--sotido-theme-light-surface-highest);
  --sotido-theme-surface-raised: var(--sotido-theme-light-surface-raised);
  --sotido-theme-surface-soft: var(--sotido-theme-light-surface-soft);
  --sotido-theme-text-inverse: var(--sotido-theme-light-text-inverse);
  --sotido-theme-text-muted: var(--sotido-theme-light-text-muted);
  --sotido-theme-text-on-accent: var(--sotido-theme-light-text-on-accent);
  --sotido-theme-text-primary: var(--sotido-theme-light-text-primary);
  --sotido-theme-text-secondary: var(--sotido-theme-light-text-secondary);
  --sotido-theme-warning-accent: var(--sotido-theme-light-warning-accent);
  --sotido-theme-warning-accent-text: var(--sotido-theme-light-warning-accent-text);
  --sotido-theme-warning-surface: var(--sotido-theme-light-warning-surface);
  --sotido-theme-weekend-surface: var(--sotido-theme-light-weekend-surface);
  --sotido-theme-weekend-text: var(--sotido-theme-light-weekend-text);
}
@media (prefers-color-scheme: light) {
  :is(html[data-theme="auto"], body.theme-auto, html[data-theme="auto"] body) {
    --sotido-theme-accent: var(--sotido-theme-light-accent);
    --sotido-theme-accent-pressed: var(--sotido-theme-light-accent-pressed);
    --sotido-theme-background: var(--sotido-theme-light-background);
    --sotido-theme-border: var(--sotido-theme-light-border);
    --sotido-theme-control-active-surface: var(--sotido-theme-light-control-active-surface);
    --sotido-theme-danger: var(--sotido-theme-light-danger);
    --sotido-theme-danger-surface: var(--sotido-theme-light-danger-surface);
    --sotido-theme-danger-text: var(--sotido-theme-light-danger-text);
    --sotido-theme-destructive-accent: var(--sotido-theme-light-destructive-accent);
    --sotido-theme-destructive-accent-text: var(--sotido-theme-light-destructive-accent-text);
    --sotido-theme-divider: var(--sotido-theme-light-divider);
    --sotido-theme-info-surface: var(--sotido-theme-light-info-surface);
    --sotido-theme-info-text: var(--sotido-theme-light-info-text);
    --sotido-theme-primary-accent-text: var(--sotido-theme-light-primary-accent-text);
    --sotido-theme-selection-companion: var(--sotido-theme-light-selection-companion);
    --sotido-theme-selection-companion-text: var(--sotido-theme-light-selection-companion-text);
    --sotido-theme-success: var(--sotido-theme-light-success);
    --sotido-theme-success-accent: var(--sotido-theme-light-success-accent);
    --sotido-theme-success-accent-text: var(--sotido-theme-light-success-accent-text);
    --sotido-theme-surface: var(--sotido-theme-light-surface);
    --sotido-theme-surface-chrome: var(--sotido-theme-light-surface-chrome);
    --sotido-theme-surface-highest: var(--sotido-theme-light-surface-highest);
    --sotido-theme-surface-raised: var(--sotido-theme-light-surface-raised);
    --sotido-theme-surface-soft: var(--sotido-theme-light-surface-soft);
    --sotido-theme-text-inverse: var(--sotido-theme-light-text-inverse);
    --sotido-theme-text-muted: var(--sotido-theme-light-text-muted);
    --sotido-theme-text-on-accent: var(--sotido-theme-light-text-on-accent);
    --sotido-theme-text-primary: var(--sotido-theme-light-text-primary);
    --sotido-theme-text-secondary: var(--sotido-theme-light-text-secondary);
    --sotido-theme-warning-accent: var(--sotido-theme-light-warning-accent);
    --sotido-theme-warning-accent-text: var(--sotido-theme-light-warning-accent-text);
    --sotido-theme-warning-surface: var(--sotido-theme-light-warning-surface);
    --sotido-theme-weekend-surface: var(--sotido-theme-light-weekend-surface);
    --sotido-theme-weekend-text: var(--sotido-theme-light-weekend-text);
  }
}

/* Auto-generated by scripts/compile_design_tokens.py. Do not edit manually. */
:root {
  --sotido-recipe-backdrop-chrome-stroke: var(--sotido-theme-border);
  --sotido-recipe-backdrop-chrome-surface: rgba(66, 66, 71, 0.8);
  --sotido-recipe-backdrop-chrome-blur-radius: 7px;
  --sotido-recipe-backdrop-chrome-stroke-width: 1px;
  --sotido-recipe-calendar-top-chrome-stack-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-top-chrome-stack-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-top-chrome-stack-body-size: var(--sotido-type-caption);
  --sotido-recipe-calendar-top-chrome-stack-caption-size: var(--sotido-type-micro);
  --sotido-recipe-calendar-top-chrome-stack-title-size: var(--sotido-type-title);
  --sotido-recipe-calendar-top-chrome-stack-banner-action-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-top-chrome-stack-banner-content-gap: var(--sotido-space-md);
  --sotido-recipe-calendar-top-chrome-stack-banner-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-top-chrome-stack-compact-banner-vertical-padding: var(--sotido-space-xs);
  --sotido-recipe-calendar-top-chrome-stack-compact-content-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-top-chrome-stack-outer-inset: var(--sotido-space-md);
  --sotido-recipe-calendar-top-chrome-stack-safe-area-top-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-top-chrome-stack-stack-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-top-chrome-stack-avatar-size: 52px;
  --sotido-recipe-calendar-top-chrome-stack-banner-radius: 24px;
  --sotido-recipe-calendar-top-chrome-stack-banner-vertical-padding: 10px;
  --sotido-recipe-calendar-top-chrome-stack-collapse-scroll-distance: 28px;
  --sotido-recipe-calendar-top-chrome-stack-compact-active-set-avatar-size: 26px;
  --sotido-recipe-calendar-top-chrome-stack-compact-avatar-size: 34px;
  --sotido-recipe-calendar-top-chrome-stack-compact-banner-height: 48px;
  --sotido-recipe-calendar-top-chrome-stack-compact-content-exit-offset: 4px;
  --sotido-recipe-calendar-top-chrome-stack-compact-minimum-reserve: 148px;
  --sotido-recipe-calendar-top-chrome-stack-horizontal-inset: 10px;
  --sotido-recipe-calendar-top-chrome-stack-manual-expand-scroll-slop: 4px;
  --sotido-recipe-calendar-top-chrome-stack-max-width: 720px;
  --sotido-recipe-calendar-top-chrome-stack-minimum-reserve: 244px;
  --sotido-recipe-calendar-top-chrome-stack-month-header-overlap: 30px;
  --sotido-recipe-calendar-top-chrome-stack-refresh-touch-min-width: 48px;
  --sotido-recipe-segmented-control-active-fill: var(--sotido-theme-control-active-surface);
  --sotido-recipe-segmented-control-active-text: var(--sotido-theme-text-primary);
  --sotido-recipe-segmented-control-disabled-text: var(--sotido-theme-text-muted);
  --sotido-recipe-segmented-control-inactive-text: var(--sotido-theme-text-primary);
  --sotido-recipe-segmented-control-stroke: var(--sotido-theme-border);
  --sotido-recipe-segmented-control-dense-label-size: var(--sotido-type-label);
  --sotido-recipe-segmented-control-label-size: var(--sotido-type-body-compact);
  --sotido-recipe-segmented-control-label-weight: var(--sotido-font-weight-semibold);
  --sotido-recipe-segmented-control-disabled-opacity: var(--sotido-alpha-disabled-control);
  --sotido-recipe-segmented-control-item-gap: var(--sotido-space-xs);
  --sotido-recipe-segmented-control-item-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-segmented-control-expanded-group-fill: rgba(22, 22, 24, 1);
  --sotido-recipe-segmented-control-active-radius: 15px;
  --sotido-recipe-segmented-control-audience-max-width: 320px;
  --sotido-recipe-segmented-control-control-min-height: 30px;
  --sotido-recipe-segmented-control-dense-item-horizontal-padding: 2px;
  --sotido-recipe-segmented-control-rail-inset: 2px;
  --sotido-recipe-segmented-control-rail-padding: 7px;
  --sotido-recipe-segmented-control-rail-radius: 18px;
  --sotido-recipe-segmented-control-submode-active-radius: 13px;
  --sotido-recipe-segmented-control-submode-control-min-height: 28px;
  --sotido-recipe-segmented-control-submode-item-horizontal-padding: 10px;
  --sotido-recipe-segmented-control-submode-max-width: 320px;
  --sotido-recipe-segmented-control-submode-rail-radius: 16px;
  --sotido-recipe-segmented-control-view-max-width: 420px;
  --sotido-recipe-form-section-fill: var(--sotido-theme-surface);
  --sotido-recipe-form-section-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-form-section-text: var(--sotido-theme-text-primary);
  --sotido-recipe-form-section-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-card-surface-elevated-fill: var(--sotido-theme-surface-highest);
  --sotido-recipe-card-surface-raised-fill: var(--sotido-theme-surface-raised);
  --sotido-recipe-card-surface-selected-accent: var(--sotido-theme-accent);
  --sotido-recipe-card-surface-standard-fill: var(--sotido-theme-surface);
  --sotido-recipe-card-surface-stroke: var(--sotido-theme-border);
  --sotido-recipe-card-surface-sunken-fill: var(--sotido-theme-background);
  --sotido-recipe-card-surface-text: var(--sotido-theme-text-primary);
  --sotido-recipe-card-surface-disabled-opacity: var(--sotido-alpha-disabled-surface);
  --sotido-recipe-card-surface-pressed-scale: 98.5%;
  --sotido-recipe-card-surface-elevated-corner-radius: 16px;
  --sotido-recipe-card-surface-standard-corner-radius: 12px;
  --sotido-recipe-card-surface-stroke-width: 1px;
  --sotido-recipe-state-block-body-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-state-block-critical-accent: var(--sotido-theme-danger-text);
  --sotido-recipe-state-block-loading-accent: var(--sotido-theme-accent);
  --sotido-recipe-state-block-neutral-accent: var(--sotido-theme-text-secondary);
  --sotido-recipe-state-block-title-text: var(--sotido-theme-text-primary);
  --sotido-recipe-state-block-warning-accent: var(--sotido-theme-warning-accent);
  --sotido-recipe-state-block-body-size: var(--sotido-type-body-compact);
  --sotido-recipe-state-block-title-size: var(--sotido-type-body);
  --sotido-recipe-state-block-body-weight: var(--sotido-font-weight-regular);
  --sotido-recipe-state-block-title-weight: var(--sotido-font-weight-semibold);
  --sotido-recipe-state-block-content-gap: var(--sotido-space-md);
  --sotido-recipe-state-block-title-gap: var(--sotido-space-xxs);
  --sotido-recipe-state-block-action-gap: 10px;
  --sotido-recipe-state-block-horizontal-padding: 14px;
  --sotido-recipe-state-block-icon-size: 18px;
  --sotido-recipe-state-block-vertical-padding: 14px;
  --sotido-recipe-status-banner-badge-fill: var(--sotido-theme-surface-highest);
  --sotido-recipe-status-banner-badge-text: var(--sotido-theme-text-primary);
  --sotido-recipe-status-banner-critical-fill: var(--sotido-theme-danger-surface);
  --sotido-recipe-status-banner-critical-stroke: var(--sotido-theme-danger-text);
  --sotido-recipe-status-banner-critical-text: var(--sotido-theme-danger-text);
  --sotido-recipe-status-banner-info-fill: var(--sotido-theme-info-surface);
  --sotido-recipe-status-banner-info-stroke: var(--sotido-theme-info-text);
  --sotido-recipe-status-banner-info-text: var(--sotido-theme-info-text);
  --sotido-recipe-status-banner-neutral-fill: var(--sotido-theme-surface-soft);
  --sotido-recipe-status-banner-neutral-stroke: var(--sotido-theme-border);
  --sotido-recipe-status-banner-neutral-text: var(--sotido-theme-text-primary);
  --sotido-recipe-status-banner-success-fill: var(--sotido-theme-surface-soft);
  --sotido-recipe-status-banner-success-stroke: var(--sotido-theme-success-accent);
  --sotido-recipe-status-banner-success-text: var(--sotido-theme-text-primary);
  --sotido-recipe-status-banner-warning-fill: var(--sotido-theme-warning-surface);
  --sotido-recipe-status-banner-warning-stroke: var(--sotido-theme-warning-accent);
  --sotido-recipe-status-banner-warning-text: var(--sotido-theme-text-primary);
  --sotido-recipe-status-banner-badge-size: var(--sotido-type-label);
  --sotido-recipe-status-banner-body-size: var(--sotido-type-caption);
  --sotido-recipe-status-banner-title-size: var(--sotido-type-body-compact);
  --sotido-recipe-status-banner-badge-weight: var(--sotido-font-weight-bold);
  --sotido-recipe-status-banner-body-weight: var(--sotido-font-weight-regular);
  --sotido-recipe-status-banner-title-weight: var(--sotido-font-weight-bold);
  --sotido-recipe-status-banner-content-gap: var(--sotido-space-xs);
  --sotido-recipe-status-banner-header-gap: var(--sotido-space-sm);
  --sotido-recipe-status-banner-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-status-banner-badge-radius: var(--sotido-radius-pill);
  --sotido-recipe-status-banner-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-status-banner-badge-horizontal-padding: 7px;
  --sotido-recipe-status-banner-badge-vertical-padding: 3px;
  --sotido-recipe-status-banner-stroke-width: 1px;
  --sotido-recipe-status-banner-vertical-padding: 10px;
  --sotido-recipe-transient-feedback-viewport-inset: var(--sotido-space-md);
  --sotido-recipe-transient-feedback-bottom-inset: 18px;
  --sotido-recipe-transient-feedback-hidden-offset: 8px;
  --sotido-recipe-transient-feedback-max-width: 520px;
  --sotido-recipe-ranked-favorite-list-interaction-fill: var(--sotido-theme-surface-raised);
  --sotido-recipe-ranked-favorite-list-interaction-opacity: 98%;
  --sotido-recipe-form-field-error-text: var(--sotido-theme-danger-text);
  --sotido-recipe-form-field-label-text: var(--sotido-theme-text-primary);
  --sotido-recipe-form-field-support-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-form-field-error-text-size: var(--sotido-type-body-compact);
  --sotido-recipe-form-field-label-text-size: var(--sotido-type-label);
  --sotido-recipe-form-field-support-text-size: var(--sotido-type-body-compact);
  --sotido-recipe-form-field-error-text-weight: var(--sotido-font-weight-semibold);
  --sotido-recipe-form-field-label-text-weight: var(--sotido-font-weight-semibold);
  --sotido-recipe-form-field-support-text-weight: var(--sotido-font-weight-regular);
  --sotido-recipe-form-field-content-gap: var(--sotido-space-sm);
  --sotido-recipe-form-field-message-inline-padding: var(--sotido-space-sm);
  --sotido-recipe-form-field-message-accent-width: 3px;
  --sotido-recipe-form-control-fill: var(--sotido-theme-surface-chrome);
  --sotido-recipe-form-control-focus-fill: var(--sotido-theme-surface-highest);
  --sotido-recipe-form-control-placeholder-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-form-control-text: var(--sotido-theme-text-primary);
  --sotido-recipe-form-control-horizontal-padding: var(--sotido-space-sm);
  --sotido-recipe-form-control-vertical-padding: var(--sotido-space-xs);
  --sotido-recipe-form-control-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-form-control-minimum-height: 36px;
  --sotido-recipe-action-button-danger-fill: var(--sotido-theme-destructive-accent);
  --sotido-recipe-action-button-danger-text: var(--sotido-theme-text-on-accent);
  --sotido-recipe-action-button-disabled-text: var(--sotido-theme-text-muted);
  --sotido-recipe-action-button-icon-filled-fill: var(--sotido-theme-surface-chrome);
  --sotido-recipe-action-button-icon-filled-hover-fill: var(--sotido-theme-surface-highest);
  --sotido-recipe-action-button-icon-hover-fill: var(--sotido-theme-surface-soft);
  --sotido-recipe-action-button-primary-fill: var(--sotido-theme-accent);
  --sotido-recipe-action-button-primary-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-action-button-secondary-fill: var(--sotido-theme-surface-soft);
  --sotido-recipe-action-button-secondary-stroke: var(--sotido-theme-border);
  --sotido-recipe-action-button-secondary-text: var(--sotido-theme-text-primary);
  --sotido-recipe-action-button-label-weight: var(--sotido-font-weight-semibold);
  --sotido-recipe-action-button-disabled-opacity: var(--sotido-alpha-disabled-control);
  --sotido-recipe-action-button-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-action-button-content-gap: var(--sotido-space-xs);
  --sotido-recipe-action-button-corner-radius: var(--sotido-radius-pill);
  --sotido-recipe-action-button-compact-minimum-height: 32px;
  --sotido-recipe-action-button-icon-compact-control-size: 28px;
  --sotido-recipe-action-button-icon-control-size: 32px;
  --sotido-recipe-action-button-icon-glyph-size: 18px;
  --sotido-recipe-action-button-minimum-height: 44px;
  --sotido-recipe-action-button-stroke-width: 1px;
  --sotido-recipe-inline-help-control-disabled-text: var(--sotido-theme-text-muted);
  --sotido-recipe-inline-help-control-stroke: var(--sotido-theme-border);
  --sotido-recipe-inline-help-control-surface: var(--sotido-theme-surface-soft);
  --sotido-recipe-inline-help-control-text: var(--sotido-theme-text-primary);
  --sotido-recipe-inline-help-control-label-size: var(--sotido-type-caption);
  --sotido-recipe-inline-help-control-disabled-opacity: var(--sotido-alpha-disabled-control);
  --sotido-recipe-inline-help-control-corner-radius: var(--sotido-radius-pill);
  --sotido-recipe-inline-help-control-stroke-width: 1px;
  --sotido-recipe-inline-help-control-visual-size: 18px;
  --sotido-recipe-toggle-control-active-track: var(--sotido-theme-accent);
  --sotido-recipe-toggle-control-disabled-text: var(--sotido-theme-text-muted);
  --sotido-recipe-toggle-control-focus-ring: var(--sotido-theme-accent);
  --sotido-recipe-toggle-control-inactive-track: var(--sotido-theme-border);
  --sotido-recipe-toggle-control-label-text: var(--sotido-theme-text-primary);
  --sotido-recipe-toggle-control-thumb: var(--sotido-theme-surface-highest);
  --sotido-recipe-toggle-control-disabled-opacity: var(--sotido-alpha-disabled-control);
  --sotido-recipe-toggle-control-corner-radius: var(--sotido-radius-pill);
  --sotido-recipe-toggle-control-focus-ring-width: 2px;
  --sotido-recipe-toggle-control-minimum-hit-size: 44px;
  --sotido-recipe-toggle-control-thumb-size: 18px;
  --sotido-recipe-toggle-control-track-height: 24px;
  --sotido-recipe-toggle-control-track-inset: 3px;
  --sotido-recipe-toggle-control-track-width: 46px;
  --sotido-recipe-calendar-edge-push-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-edge-push-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-edge-push-horizontal-padding: 0px;
  --sotido-recipe-calendar-edge-push-minimum-height: 38px;
  --sotido-recipe-calendar-edge-push-signal-gap: 5px;
  --sotido-recipe-calendar-edge-push-trigger-distance: 192px;
  --sotido-recipe-calendar-edge-push-vertical-padding: 7px;
  --sotido-recipe-five-petal-progress-active: var(--sotido-theme-accent);
  --sotido-recipe-five-petal-progress-inactive: var(--sotido-theme-text-muted);
  --sotido-recipe-five-petal-progress-calendar-size: 20px;
  --sotido-recipe-five-petal-progress-compact-size: 16px;
  --sotido-recipe-five-petal-progress-edge-size: 28px;
  --sotido-recipe-five-petal-progress-globe-startup-size: 60px;
  --sotido-recipe-calendar-top-status-row-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-top-status-row-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-top-status-row-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-top-status-row-column-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-top-status-row-horizontal-inset: var(--sotido-space-xxs);
  --sotido-recipe-calendar-top-status-row-focus-toggle-icon-size: 18px;
  --sotido-recipe-calendar-top-status-row-focus-toggle-radius: 9px;
  --sotido-recipe-calendar-top-status-row-focus-toggle-size: 30px;
  --sotido-recipe-calendar-top-status-row-freshness-minimum-height: 30px;
  --sotido-recipe-calendar-top-status-row-minimum-height: 30px;
  --sotido-recipe-calendar-top-status-row-today-minimum-height: 30px;
  --sotido-recipe-calendar-lower-chrome-stack-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-lower-chrome-stack-border: var(--sotido-theme-border);
  --sotido-recipe-calendar-lower-chrome-stack-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-lower-chrome-stack-bottom-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-lower-chrome-stack-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-lower-chrome-stack-stack-spacing: var(--sotido-space-sm);
  --sotido-recipe-calendar-lower-chrome-stack-top-padding: var(--sotido-space-xs);
  --sotido-recipe-calendar-lower-chrome-stack-viewport-horizontal-inset: var(--sotido-space-md);
  --sotido-recipe-calendar-lower-chrome-stack-control-height: 30px;
  --sotido-recipe-calendar-lower-chrome-stack-filter-dock-reserve: 30px;
  --sotido-recipe-calendar-lower-chrome-stack-initial-bottom-reserve: 176px;
  --sotido-recipe-calendar-lower-chrome-stack-max-width: 480px;
  --sotido-recipe-calendar-lower-chrome-stack-minimum-bottom-reserve: 72px;
  --sotido-recipe-calendar-lower-chrome-stack-mode-panel-clearance-inset: 68px;
  --sotido-recipe-calendar-lower-chrome-stack-slot-legend-reserve: 62px;
  --sotido-recipe-calendar-lower-chrome-stack-utility-switcher-max-width: 104px;
  --sotido-recipe-calendar-event-card-end-time-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-event-card-start-time-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-event-card-surface: var(--sotido-theme-surface-raised);
  --sotido-recipe-calendar-event-card-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-event-card-day-period-text-size: var(--sotido-type-micro);
  --sotido-recipe-calendar-event-card-description-text-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-event-card-tight-time-text-size: var(--sotido-type-caption);
  --sotido-recipe-calendar-event-card-title-text-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-event-card-description-text-weight: var(--sotido-font-weight-regular);
  --sotido-recipe-calendar-event-card-title-text-weight: var(--sotido-font-weight-regular);
  --sotido-recipe-calendar-event-card-compact-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-calendar-event-card-connector-opacity: 60%;
  --sotido-recipe-calendar-event-card-stroke-fade-stop: 60%;
  --sotido-recipe-calendar-event-card-grid-multi-day-primary-stroke-angle: 270deg;
  --sotido-recipe-calendar-event-card-grid-tail-stroke-angle: 90deg;
  --sotido-recipe-calendar-event-card-list-multi-day-primary-stroke-angle: 360deg;
  --sotido-recipe-calendar-event-card-list-tail-stroke-angle: 178deg;
  --sotido-recipe-calendar-event-card-single-day-stroke-angle: 320deg;
  --sotido-recipe-calendar-event-card-discover-text-backdrop: rgba(0, 0, 0, 0.42);
  --sotido-recipe-calendar-event-card-compact-row-height: 30px;
  --sotido-recipe-calendar-event-card-compact-tail-row-height: 15px;
  --sotido-recipe-calendar-event-card-discover-text-backdrop-blur-radius: 10px;
  --sotido-recipe-calendar-event-card-grid-minimum-time-pair-maximum-width: 44px;
  --sotido-recipe-calendar-event-card-grid-single-time24-hour-maximum-width: 68px;
  --sotido-recipe-calendar-event-card-grid-stacked-maximum-width: 144px;
  --sotido-recipe-calendar-event-card-grid-time-compact-maximum-width: 72px;
  --sotido-recipe-calendar-event-card-grid-time-tight-maximum-width: 86px;
  --sotido-recipe-calendar-event-card-stroke-width: 1px;
  --sotido-recipe-calendar-event-card-text-band-height: 15px;
  --sotido-recipe-calendar-event-card-text-gap: 3px;
  --sotido-recipe-calendar-event-card-time-column-width12-hour: 54px;
  --sotido-recipe-calendar-event-card-time-column-width24-hour: 40px;
  --sotido-recipe-calendar-list-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-list-badge-audience-surface: var(--sotido-theme-background);
  --sotido-recipe-calendar-list-badge-neutral-surface: var(--sotido-theme-surface);
  --sotido-recipe-calendar-list-badge-organizer-surface: var(--sotido-theme-surface-soft);
  --sotido-recipe-calendar-list-badge-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-list-cell-surface: var(--sotido-theme-surface-soft);
  --sotido-recipe-calendar-list-destructive-accent: var(--sotido-theme-destructive-accent);
  --sotido-recipe-calendar-list-destructive-accent-text: var(--sotido-theme-destructive-accent-text);
  --sotido-recipe-calendar-list-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-list-primary-accent-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-list-success-accent: var(--sotido-theme-success-accent);
  --sotido-recipe-calendar-list-success-accent-text: var(--sotido-theme-success-accent-text);
  --sotido-recipe-calendar-list-surface: var(--sotido-theme-surface-chrome);
  --sotido-recipe-calendar-list-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-list-text-on-accent: var(--sotido-theme-text-on-accent);
  --sotido-recipe-calendar-list-warning-accent: var(--sotido-theme-warning-accent);
  --sotido-recipe-calendar-list-warning-accent-text: var(--sotido-theme-warning-accent-text);
  --sotido-recipe-calendar-list-badge-text-size: var(--sotido-type-label);
  --sotido-recipe-calendar-list-badge-leading-padding: var(--sotido-space-xxs);
  --sotido-recipe-calendar-list-badge-trailing-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-list-content-horizontal-inset: var(--sotido-space-xxs);
  --sotido-recipe-calendar-list-month-day-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-list-row-column-gap: var(--sotido-space-xs);
  --sotido-recipe-calendar-list-badge-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-calendar-list-badge-bottom-meta-height: 14px;
  --sotido-recipe-calendar-list-badge-height: 13px;
  --sotido-recipe-calendar-list-badge-overlap: 6px;
  --sotido-recipe-calendar-list-day-anchor-width: 30px;
  --sotido-recipe-calendar-list-horizontal-inset: 3px;
  --sotido-recipe-calendar-list-loading-reveal-offset: 6px;
  --sotido-recipe-calendar-list-row-vertical-inset: 2px;
  --sotido-recipe-calendar-month-header-current-surface: var(--sotido-theme-accent);
  --sotido-recipe-calendar-month-header-current-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-month-header-surface: var(--sotido-theme-weekend-surface);
  --sotido-recipe-calendar-month-header-text: var(--sotido-theme-weekend-text);
  --sotido-recipe-calendar-month-header-font-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-month-header-vertical-padding: var(--sotido-space-xxs);
  --sotido-recipe-calendar-month-header-collapsed-preview-opaque-stop: 52%;
  --sotido-recipe-calendar-month-header-collapsed-preview-height: 60px;
  --sotido-recipe-calendar-month-header-horizontal-padding: 10px;
  --sotido-recipe-calendar-month-header-line-height: 15px;
  --sotido-recipe-calendar-month-header-trailing-radius: 15px;
  --sotido-recipe-calendar-date-header-muted-text: var(--sotido-theme-text-muted);
  --sotido-recipe-calendar-date-header-surface: var(--sotido-theme-surface-soft);
  --sotido-recipe-calendar-date-header-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-date-header-today-surface: var(--sotido-theme-accent);
  --sotido-recipe-calendar-date-header-today-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-date-header-weekend-surface: var(--sotido-theme-weekend-surface);
  --sotido-recipe-calendar-date-header-weekend-text: var(--sotido-theme-weekend-text);
  --sotido-recipe-calendar-date-header-weekday-size: var(--sotido-type-label);
  --sotido-recipe-calendar-date-header-grid-stack-inline-inset: var(--sotido-space-xxs);
  --sotido-recipe-calendar-date-header-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-calendar-date-header-day-number-line-height: 19px;
  --sotido-recipe-calendar-date-header-day-number-size: 19px;
  --sotido-recipe-calendar-date-header-grid-height: 30px;
  --sotido-recipe-calendar-date-header-stack-gap: 0px;
  --sotido-recipe-calendar-date-header-weekday-line-height: 10px;
  --sotido-recipe-calendar-today-separator-line: var(--sotido-theme-accent);
  --sotido-recipe-calendar-today-separator-pill-surface: var(--sotido-theme-accent);
  --sotido-recipe-calendar-today-separator-pill-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-today-separator-pill-font-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-today-separator-horizontal-inset: var(--sotido-space-sm);
  --sotido-recipe-calendar-today-separator-pill-vertical-padding: var(--sotido-space-xxs);
  --sotido-recipe-calendar-today-separator-segment-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-today-separator-height: 28px;
  --sotido-recipe-calendar-today-separator-line-minimum-width: 28px;
  --sotido-recipe-calendar-today-separator-line-thickness: 1px;
  --sotido-recipe-calendar-today-separator-pill-horizontal-padding: 10px;
  --sotido-recipe-calendar-today-separator-pill-radius: 15px;
  --sotido-recipe-calendar-today-return-control-surface: var(--sotido-theme-accent);
  --sotido-recipe-calendar-today-return-control-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-today-return-control-font-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-today-return-control-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-today-return-control-corner-radius: 15px;
  --sotido-recipe-calendar-today-return-control-minimum-height: 30px;
  --sotido-recipe-calendar-grid-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-grid-cell-surface: var(--sotido-theme-surface-soft);
  --sotido-recipe-calendar-grid-surface: var(--sotido-theme-surface-chrome);
  --sotido-recipe-calendar-grid-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-grid-cell-bottom-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-grid-cell-gap: var(--sotido-space-xxs);
  --sotido-recipe-calendar-grid-date-event-gap: var(--sotido-space-xxs);
  --sotido-recipe-calendar-grid-grid-inset: var(--sotido-space-sm);
  --sotido-recipe-calendar-grid-month-top-gap: var(--sotido-space-md);
  --sotido-recipe-calendar-grid-week-row-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-grid-cell-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-calendar-grid-bar-horizontal-padding: 3px;
  --sotido-recipe-calendar-grid-bar-narrow-card-max-width: 110px;
  --sotido-recipe-calendar-grid-bar-row-gap: 2px;
  --sotido-recipe-calendar-grid-dense-lane-viewport-height: 118px;
  --sotido-recipe-calendar-grid-month-bottom-gap: 14px;
  --sotido-recipe-calendar-grid-month-header-bottom-gap: 0px;
  --sotido-recipe-calendar-grid-overflow-cue-height: 8px;
  --sotido-recipe-calendar-grid-multi-day-connector-fill: var(--sotido-theme-accent);
  --sotido-recipe-calendar-grid-multi-day-connector-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-grid-multi-day-connector-card-overlap: 6px;
  --sotido-recipe-event-compose-shell-accent: var(--sotido-theme-accent);
  --sotido-recipe-event-compose-shell-border: var(--sotido-theme-border);
  --sotido-recipe-event-compose-shell-destructive-accent: var(--sotido-theme-destructive-accent);
  --sotido-recipe-event-compose-shell-primary-action-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-event-compose-shell-success-accent: var(--sotido-theme-success-accent);
  --sotido-recipe-event-compose-shell-surface: var(--sotido-theme-surface-chrome);
  --sotido-recipe-event-compose-shell-surface-soft: var(--sotido-theme-surface-soft);
  --sotido-recipe-event-compose-shell-text: var(--sotido-theme-text-primary);
  --sotido-recipe-event-compose-shell-text-on-accent: var(--sotido-theme-text-on-accent);
  --sotido-recipe-event-compose-shell-warning-accent: var(--sotido-theme-warning-accent);
  --sotido-recipe-event-compose-shell-action-gap: var(--sotido-space-sm);
  --sotido-recipe-event-compose-shell-bottom-chrome-padding: var(--sotido-space-sm);
  --sotido-recipe-event-compose-shell-chrome-gap: var(--sotido-space-sm);
  --sotido-recipe-event-compose-shell-content-bottom-gap: var(--sotido-space-sm);
  --sotido-recipe-event-compose-shell-content-top-gap: var(--sotido-space-sm);
  --sotido-recipe-event-compose-shell-action-height: 44px;
  --sotido-recipe-event-compose-shell-action-radius: 10px;
  --sotido-recipe-event-compose-shell-max-width: 760px;
  --sotido-recipe-event-compose-shell-minimum-top-reserve: 64px;
  --sotido-recipe-event-compose-shell-preview-connector-center-offset: 34px;
  --sotido-recipe-event-compose-shell-preview-connector-clearance: 1px;
  --sotido-recipe-event-compose-shell-preview-connector-join-radius: 7px;
  --sotido-recipe-event-compose-shell-preview-connector-thickness: 4px;
  --sotido-recipe-event-compose-shell-preview-connector-width: 50px;
  --sotido-recipe-calendar-filter-dock-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-filter-dock-border: var(--sotido-theme-border);
  --sotido-recipe-calendar-filter-dock-surface: var(--sotido-theme-surface-chrome);
  --sotido-recipe-calendar-filter-dock-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-filter-dock-text-on-accent: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-filter-dock-toggle-font-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-filter-dock-control-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-filter-dock-dock-gap: var(--sotido-space-xs);
  --sotido-recipe-calendar-filter-dock-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-filter-dock-menu-gap: var(--sotido-space-xs);
  --sotido-recipe-calendar-filter-dock-menu-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-filter-dock-summary-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-filter-dock-vertical-top-padding: var(--sotido-space-xxs);
  --sotido-recipe-calendar-filter-dock-pill-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-filter-dock-compact-menu-width: 244px;
  --sotido-recipe-calendar-filter-dock-menu-offset: 8px;
  --sotido-recipe-calendar-filter-dock-menu-radius: 16px;
  --sotido-recipe-calendar-filter-dock-toggle-horizontal-padding: 13px;
  --sotido-recipe-calendar-filter-dock-tool-toggle-height: 34px;
  --sotido-recipe-calendar-filter-dock-tool-toggle-horizontal-padding: 10px;
  --sotido-recipe-calendar-filter-dock-tool-toggle-radius: 9px;
  --sotido-recipe-calendar-filter-dock-vertical-bottom-padding: 2px;
  --sotido-recipe-calendar-story-strip-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-story-strip-border: var(--sotido-theme-border);
  --sotido-recipe-calendar-story-strip-destructive-accent: var(--sotido-theme-destructive-accent);
  --sotido-recipe-calendar-story-strip-primary-accent-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-story-strip-surface: var(--sotido-theme-surface);
  --sotido-recipe-calendar-story-strip-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-story-strip-text-on-accent: var(--sotido-theme-text-on-accent);
  --sotido-recipe-calendar-story-strip-warning-accent: var(--sotido-theme-warning-accent);
  --sotido-recipe-calendar-story-strip-controls-gap: var(--sotido-space-lg);
  --sotido-recipe-calendar-story-strip-controls-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-story-strip-folder-create-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-create-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-story-strip-folder-divider-vertical-inset: var(--sotido-space-xs);
  --sotido-recipe-calendar-story-strip-folder-foot-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-head-bottom-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-head-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-head-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-story-strip-folder-row-badge-horizontal-padding: var(--sotido-space-xs);
  --sotido-recipe-calendar-story-strip-folder-row-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-row-padding: var(--sotido-space-xs);
  --sotido-recipe-calendar-story-strip-folder-scroll-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-scroll-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-avatar-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-story-strip-folder-badge-pill-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-story-strip-folder-mini-radius: var(--sotido-radius-compact);
  --sotido-recipe-calendar-story-strip-folder-row-avatar-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-story-strip-folder-row-badge-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-story-strip-avatar-size: 52px;
  --sotido-recipe-calendar-story-strip-folder-action-height: 24px;
  --sotido-recipe-calendar-story-strip-folder-action-horizontal-padding: 9px;
  --sotido-recipe-calendar-story-strip-folder-badge-height: 16px;
  --sotido-recipe-calendar-story-strip-folder-badge-horizontal-padding: 5px;
  --sotido-recipe-calendar-story-strip-folder-badge-min-width: 16px;
  --sotido-recipe-calendar-story-strip-folder-badge-radius: 9px;
  --sotido-recipe-calendar-story-strip-folder-create-badge-size: 8px;
  --sotido-recipe-calendar-story-strip-folder-create-icon-size: 16px;
  --sotido-recipe-calendar-story-strip-folder-dialog-horizontal-padding: 18px;
  --sotido-recipe-calendar-story-strip-folder-grid-gap: 3px;
  --sotido-recipe-calendar-story-strip-folder-grid-size: 34px;
  --sotido-recipe-calendar-story-strip-folder-head-top-padding: 10px;
  --sotido-recipe-calendar-story-strip-folder-pin-size: 24px;
  --sotido-recipe-calendar-story-strip-folder-popover-radius: 16px;
  --sotido-recipe-calendar-story-strip-folder-preview-avatar-size: 22px;
  --sotido-recipe-calendar-story-strip-folder-preview-inset: 2px;
  --sotido-recipe-calendar-story-strip-folder-preview-offset: 18px;
  --sotido-recipe-calendar-story-strip-folder-row-avatar-size: 34px;
  --sotido-recipe-calendar-story-strip-folder-row-badge-margin-start: 6px;
  --sotido-recipe-calendar-story-strip-folder-row-badge-vertical-padding: 1px;
  --sotido-recipe-calendar-story-strip-folder-row-radius: 10px;
  --sotido-recipe-calendar-story-strip-folder-slot-min-width: 52px;
  --sotido-recipe-calendar-story-strip-folder-slot-padding-start: 10px;
  --sotido-recipe-calendar-story-strip-item-slot-size: 52px;
  --sotido-recipe-calendar-story-strip-overflow-fade-width: 28px;
  --sotido-recipe-calendar-story-strip-section-gap: 14px;
  --sotido-recipe-calendar-story-strip-story-badge-size: 16px;
  --sotido-recipe-calendar-story-strip-strip-gap: 10px;
  --sotido-recipe-calendar-story-strip-strip-horizontal-padding: 10px;
  --sotido-recipe-calendar-slot-legend-border: var(--sotido-theme-border);
  --sotido-recipe-calendar-slot-legend-danger: var(--sotido-theme-destructive-accent);
  --sotido-recipe-calendar-slot-legend-success: var(--sotido-theme-success-accent);
  --sotido-recipe-calendar-slot-legend-surface: var(--sotido-theme-surface-chrome);
  --sotido-recipe-calendar-slot-legend-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-slot-legend-text-on-accent: var(--sotido-theme-text-on-accent);
  --sotido-recipe-calendar-slot-legend-warning: var(--sotido-theme-warning-accent);
  --sotido-recipe-calendar-slot-legend-compact-label-size: var(--sotido-type-micro);
  --sotido-recipe-calendar-slot-legend-label-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-slot-legend-chip-gap: var(--sotido-space-xs);
  --sotido-recipe-calendar-slot-legend-floating-bottom-margin: var(--sotido-space-xs);
  --sotido-recipe-calendar-slot-legend-floating-panel-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-slot-legend-host-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-slot-legend-panel-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-slot-legend-row-gap: var(--sotido-space-xxs);
  --sotido-recipe-calendar-slot-legend-stack-gap: var(--sotido-space-xs);
  --sotido-recipe-calendar-slot-legend-chip-horizontal-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-slot-legend-chip-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-slot-legend-chip-vertical-padding: 5px;
  --sotido-recipe-calendar-slot-legend-compose-dot-size: 10px;
  --sotido-recipe-calendar-slot-legend-dot-size: 8px;
  --sotido-recipe-calendar-slot-legend-floating-panel-radius: 14px;
  --sotido-recipe-discover-header-controls-accent: var(--sotido-theme-accent);
  --sotido-recipe-discover-header-controls-border: var(--sotido-theme-border);
  --sotido-recipe-discover-header-controls-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-discover-header-controls-surface: var(--sotido-theme-surface-chrome);
  --sotido-recipe-discover-header-controls-text: var(--sotido-theme-text-primary);
  --sotido-recipe-discover-header-controls-text-on-accent: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-discover-header-controls-control-gap: var(--sotido-space-xxs);
  --sotido-recipe-discover-header-controls-control-horizontal-padding: 10px;
  --sotido-recipe-discover-header-controls-control-minimum-height: 32px;
  --sotido-recipe-discover-header-controls-control-radius: 18px;
  --sotido-recipe-discover-header-controls-horizontal-inset: 10px;
  --sotido-recipe-discover-header-controls-max-width: 560px;
  --sotido-recipe-discover-globe-lower-rail-accent: var(--sotido-theme-accent);
  --sotido-recipe-discover-globe-lower-rail-border: var(--sotido-theme-border);
  --sotido-recipe-discover-globe-lower-rail-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-discover-globe-lower-rail-surface: var(--sotido-theme-surface);
  --sotido-recipe-discover-globe-lower-rail-text: var(--sotido-theme-text-primary);
  --sotido-recipe-discover-globe-lower-rail-bottom-gap: var(--sotido-space-sm);
  --sotido-recipe-discover-globe-lower-rail-controls-row-gap: var(--sotido-space-sm);
  --sotido-recipe-discover-globe-lower-rail-horizontal-inset: var(--sotido-space-md);
  --sotido-recipe-discover-globe-lower-rail-column-gap: 10px;
  --sotido-recipe-discover-globe-lower-rail-controls-column-maximum-width: 192px;
  --sotido-recipe-discover-globe-lower-rail-controls-column-width: 184px;
  --sotido-recipe-discover-globe-lower-rail-help-button-diameter: 28px;
  --sotido-recipe-discover-globe-lower-rail-joystick-diameter: 76px;
  --sotido-recipe-discover-globe-lower-rail-locate-button-minimum-height: 32px;
  --sotido-recipe-discover-globe-lower-rail-preview-maximum-width: 420px;
  --sotido-recipe-discover-globe-lower-rail-preview-minimum-width: 160px;
  --sotido-recipe-discover-globe-lower-rail-zoom-lever-height: 72px;
  --sotido-recipe-discover-globe-lower-rail-zoom-lever-width: 28px;
  --sotido-recipe-calendar-quick-add-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-quick-add-border: var(--sotido-theme-border);
  --sotido-recipe-calendar-quick-add-field-surface: var(--sotido-theme-surface);
  --sotido-recipe-calendar-quick-add-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-quick-add-surface: var(--sotido-theme-surface-raised);
  --sotido-recipe-calendar-quick-add-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-quick-add-text-on-accent: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-quick-add-surface-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-quick-add-viewport-inset: var(--sotido-space-md);
  --sotido-recipe-calendar-quick-add-content-gap: 10px;
  --sotido-recipe-calendar-quick-add-max-width: 420px;
  --sotido-recipe-calendar-quick-add-mobile-top-offset: 160px;
  --sotido-recipe-calendar-quick-add-top-offset: 140px;
  --sotido-recipe-mode-panel-active: var(--sotido-theme-accent);
  --sotido-recipe-mode-panel-destructive-accent: var(--sotido-theme-destructive-accent);
  --sotido-recipe-mode-panel-muted-text: var(--sotido-theme-text-muted);
  --sotido-recipe-mode-panel-text: var(--sotido-theme-text-primary);
  --sotido-recipe-mode-panel-text-on-accent: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-mode-panel-label-size: var(--sotido-type-micro);
  --sotido-recipe-mode-panel-shell-padding: var(--sotido-space-xs);
  --sotido-recipe-mode-panel-stack-gap: var(--sotido-space-xs);
  --sotido-recipe-mode-panel-avatar-radius: var(--sotido-radius-pill);
  --sotido-recipe-mode-panel-filter-panel-radius: var(--sotido-radius-pill);
  --sotido-recipe-mode-panel-shell-radius: var(--sotido-radius-pill);
  --sotido-recipe-mode-panel-tool-badge-radius: var(--sotido-radius-pill);
  --sotido-recipe-mode-panel-attention-dot-size: 8px;
  --sotido-recipe-mode-panel-badge-ring-width: 2px;
  --sotido-recipe-mode-panel-badge-size: 9px;
  --sotido-recipe-mode-panel-entry-gap: 2px;
  --sotido-recipe-mode-panel-entry-height: 44px;
  --sotido-recipe-mode-panel-entry-radius: 14px;
  --sotido-recipe-mode-panel-entry-width: 50px;
  --sotido-recipe-mode-panel-filter-menu-expanded-max-width: 420px;
  --sotido-recipe-mode-panel-filter-menu-horizontal-padding: 10px;
  --sotido-recipe-mode-panel-filter-menu-translate-x: 8px;
  --sotido-recipe-mode-panel-filter-panel-max-width: 520px;
  --sotido-recipe-mode-panel-filter-panel-min-width: 58px;
  --sotido-recipe-mode-panel-icon-size: 22px;
  --sotido-recipe-mode-panel-resume-dot-size: 7px;
  --sotido-recipe-mode-panel-shell-bottom-offset: 6px;
  --sotido-recipe-mode-panel-shell-gap: 2px;
  --sotido-recipe-mode-panel-shell-inset: 10px;
  --sotido-recipe-mode-panel-shell-max-width: 440px;
  --sotido-recipe-mode-panel-shell-vertical-padding: 5px;
  --sotido-recipe-mode-panel-tool-badge-offset: 6px;
  --sotido-recipe-mode-panel-tool-badge-size: 16px;
  --sotido-recipe-mode-panel-tool-toggle-width: 48px;
  --sotido-recipe-mode-panel-utc-help-min-width: 16px;
  --sotido-recipe-mode-panel-utc-help-size: 18px;
}
:is(html[data-theme="light"], body.theme-light, html[data-theme="light"] body) {
  --sotido-recipe-backdrop-chrome-surface: rgba(255, 255, 255, 0.9);
  --sotido-recipe-segmented-control-expanded-group-fill: rgba(184, 184, 189, 1);
  --sotido-recipe-calendar-event-card-discover-text-backdrop: rgba(255, 255, 255, 0.56);
}
@media (prefers-color-scheme: light) {
  :is(html[data-theme="auto"], body.theme-auto, html[data-theme="auto"] body) {
    --sotido-recipe-backdrop-chrome-surface: rgba(255, 255, 255, 0.9);
    --sotido-recipe-segmented-control-expanded-group-fill: rgba(184, 184, 189, 1);
    --sotido-recipe-calendar-event-card-discover-text-backdrop: rgba(255, 255, 255, 0.56);
  }
}

/* Shared card-surface Web adapter generated from the canonical recipe. */
.sotido-card-surface {
  box-sizing: border-box;
  border: var(--sotido-recipe-card-surface-stroke-width) solid var(--sotido-recipe-card-surface-stroke);
  border-radius: var(--sotido-recipe-card-surface-standard-corner-radius);
  background: var(--sotido-recipe-card-surface-standard-fill);
  color: var(--sotido-recipe-card-surface-text);
}

.sotido-card-surface--sunken {
  background: var(--sotido-recipe-card-surface-sunken-fill);
}

.sotido-card-surface--raised {
  background: var(--sotido-recipe-card-surface-raised-fill);
}

.sotido-card-surface--elevated {
  border-radius: var(--sotido-recipe-card-surface-elevated-corner-radius);
  background: var(--sotido-recipe-card-surface-elevated-fill);
  box-shadow: var(--sotido-shadow-surface);
}

.sotido-card-surface.is-selected {
  border-color: var(--sotido-recipe-card-surface-selected-accent);
}

.sotido-card-surface.is-disabled,
.sotido-card-surface[aria-disabled="true"] {
  opacity: var(--sotido-recipe-card-surface-disabled-opacity);
}

/* Shared residual-state anatomy composed with the card-surface adapter. */
.sotido-state-block {
  box-sizing: border-box;
  padding: var(--sotido-recipe-state-block-vertical-padding) var(--sotido-recipe-state-block-horizontal-padding);
  color: var(--sotido-recipe-state-block-title-text);
}

.sotido-state-block--loading {
  border-color: var(--sotido-recipe-state-block-loading-accent);
}

.sotido-state-block--error {
  border-color: var(--sotido-recipe-state-block-critical-accent);
}

.sotido-state-block--permission {
  border-color: var(--sotido-recipe-state-block-warning-accent);
}

.sotido-state-block-title {
  color: var(--sotido-recipe-state-block-title-text);
  font-size: var(--sotido-recipe-state-block-title-size);
  font-weight: var(--sotido-recipe-state-block-title-weight);
  line-height: 1.3;
  letter-spacing: 0;
}

.sotido-state-block-body {
  color: var(--sotido-recipe-state-block-body-text);
  font-size: var(--sotido-recipe-state-block-body-size);
  font-weight: var(--sotido-recipe-state-block-body-weight);
  line-height: 1.4;
  letter-spacing: 0;
}

/* Shared inline status anatomy generated from semantic surface pairs. */
.sotido-status-banner {
  display: flex;
  flex-direction: column;
  gap: var(--sotido-recipe-status-banner-content-gap);
  min-width: 0;
  box-sizing: border-box;
  padding: var(--sotido-recipe-status-banner-vertical-padding) var(--sotido-recipe-status-banner-horizontal-padding);
  border: var(--sotido-recipe-status-banner-stroke-width) solid var(--sotido-recipe-status-banner-neutral-stroke);
  border-radius: var(--sotido-recipe-status-banner-corner-radius);
  background: var(--sotido-recipe-status-banner-neutral-fill);
  color: var(--sotido-recipe-status-banner-neutral-text);
}

.sotido-status-banner--info {
  border-color: var(--sotido-recipe-status-banner-info-stroke);
  background: var(--sotido-recipe-status-banner-info-fill);
  color: var(--sotido-recipe-status-banner-info-text);
}

.sotido-status-banner--success {
  border-color: var(--sotido-recipe-status-banner-success-stroke);
  background: var(--sotido-recipe-status-banner-success-fill);
  color: var(--sotido-recipe-status-banner-success-text);
}

.sotido-status-banner--warning {
  border-color: var(--sotido-recipe-status-banner-warning-stroke);
  background: var(--sotido-recipe-status-banner-warning-fill);
  color: var(--sotido-recipe-status-banner-warning-text);
}

.sotido-status-banner--critical {
  border-color: var(--sotido-recipe-status-banner-critical-stroke);
  background: var(--sotido-recipe-status-banner-critical-fill);
  color: var(--sotido-recipe-status-banner-critical-text);
}

.sotido-status-banner-head {
  display: flex;
  align-items: center;
  gap: var(--sotido-recipe-status-banner-header-gap);
  min-width: 0;
}

.sotido-status-banner-badge {
  flex: 0 0 auto;
  padding: var(--sotido-recipe-status-banner-badge-vertical-padding) var(--sotido-recipe-status-banner-badge-horizontal-padding);
  border-radius: var(--sotido-recipe-status-banner-badge-radius);
  background: var(--sotido-recipe-status-banner-badge-fill);
  color: var(--sotido-recipe-status-banner-badge-text);
  font-size: var(--sotido-recipe-status-banner-badge-size);
  font-weight: var(--sotido-recipe-status-banner-badge-weight);
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.sotido-status-banner-title {
  min-width: 0;
  font-size: var(--sotido-recipe-status-banner-title-size);
  font-weight: var(--sotido-recipe-status-banner-title-weight);
  line-height: 1.25;
  letter-spacing: 0;
}

.sotido-status-banner-body {
  font-size: var(--sotido-recipe-status-banner-body-size);
  font-weight: var(--sotido-recipe-status-banner-body-weight);
  line-height: 1.35;
  letter-spacing: 0;
}

/* Transient placement composed with the shared status-banner anatomy. */
.sotido-transient-feedback.sotido-status-banner {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sotido-recipe-transient-feedback-bottom-inset));
  width: min(var(--sotido-recipe-transient-feedback-max-width), calc(100vw - var(--sotido-recipe-transient-feedback-viewport-inset) - var(--sotido-recipe-transient-feedback-viewport-inset)));
  transform: translateX(-50%) translateY(var(--sotido-recipe-transient-feedback-hidden-offset));
  text-align: center;
  box-shadow: var(--sotido-shadow-surface);
  z-index: calc(var(--sotido-layer-popover) + 50);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sotido-motion-standard) ease, transform var(--sotido-motion-standard) ease;
}

.sotido-transient-feedback.sotido-status-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sotido-transient-feedback.sotido-status-banner { transition: none; }
}

/* Shared ranked-favorite reorder state generated from the canonical recipe. */
.sotido-ranked-favorite-item.is-reordering[aria-grabbed="true"] {
  background: var(--sotido-recipe-ranked-favorite-list-interaction-fill);
  box-shadow: var(--sotido-shadow-surface);
  opacity: var(--sotido-recipe-ranked-favorite-list-interaction-opacity);
  touch-action: none;
  cursor: grabbing;
}

.sotido-ranked-favorite-item.is-reorder-animating {
  will-change: transform;
  pointer-events: none;
}

/* Shared form-surface Web adapters generated from the canonical recipes. */
.sotido-form-section {
  background: var(--sotido-recipe-form-section-fill);
  border-radius: var(--sotido-recipe-form-section-corner-radius);
}

.sotido-form-field {
  display: grid;
  min-width: 0;
  gap: var(--sotido-recipe-form-field-content-gap);
}

.sotido-form-label {
  color: var(--sotido-recipe-form-field-label-text);
  font-size: var(--sotido-recipe-form-field-label-text-size);
  font-weight: var(--sotido-recipe-form-field-label-text-weight);
  line-height: 1.25;
  letter-spacing: 0;
}

.sotido-form-support {
  margin: 0;
  color: var(--sotido-recipe-form-field-support-text);
  font-size: var(--sotido-recipe-form-field-support-text-size);
  font-weight: var(--sotido-recipe-form-field-support-text-weight);
  line-height: 1.4;
}

.sotido-form-error {
  margin: 0;
  color: var(--sotido-recipe-form-field-error-text);
  font-size: var(--sotido-recipe-form-field-error-text-size);
  font-weight: var(--sotido-recipe-form-field-error-text-weight);
  line-height: 1.4;
}

.sotido-form-error:not(:empty) {
  padding-inline-start: var(--sotido-recipe-form-field-message-inline-padding);
  border-inline-start: var(--sotido-recipe-form-field-message-accent-width) solid var(--sotido-recipe-form-field-error-text);
}

.sotido-form-control {
  width: 100%;
  min-height: var(--sotido-recipe-form-control-minimum-height);
  box-sizing: border-box;
  padding: var(--sotido-recipe-form-control-vertical-padding) var(--sotido-recipe-form-control-horizontal-padding);
  scroll-margin: 20px;
  border: 0;
  border-radius: var(--sotido-recipe-form-control-corner-radius);
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--sotido-recipe-form-control-fill);
  color: var(--sotido-recipe-form-control-text);
  font: inherit;
  font-size: var(--sotido-type-body-compact);
  transition: background var(--sotido-motion-standard) ease;
}

.sotido-form-control::placeholder {
  color: var(--sotido-recipe-form-control-placeholder-text);
  opacity: 1;
}

.sotido-form-control:focus {
  background: var(--sotido-recipe-form-control-focus-fill);
}

.sotido-form-control--fading-stroke {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--sotido-recipe-form-control-fill), var(--sotido-recipe-form-control-fill)) padding-box,
    linear-gradient(110deg, color-mix(in srgb, currentColor 28%, transparent) 0%, transparent 82%) border-box;
}

.sotido-form-control--fading-stroke:focus {
  background:
    linear-gradient(var(--sotido-recipe-form-control-focus-fill), var(--sotido-recipe-form-control-focus-fill)) padding-box,
    linear-gradient(110deg, var(--sotido-theme-accent) 0%, transparent 88%) border-box;
}

textarea.sotido-form-control {
  min-height: 2.4em;
  height: auto;
  resize: vertical;
}

textarea.sotido-form-control--managed-textarea {
  resize: none;
}

@media (hover: none) and (pointer: coarse) {
  .sotido-form-control { font-size: var(--sotido-type-body-large); }
}

/* Shared action-button Web adapter generated from the canonical recipe. */
.sotido-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sotido-recipe-action-button-content-gap);
  min-height: var(--sotido-recipe-action-button-minimum-height);
  min-width: 0;
  box-sizing: border-box;
  padding: 0 var(--sotido-recipe-action-button-horizontal-padding);
  border: var(--sotido-recipe-action-button-stroke-width) solid var(--sotido-recipe-action-button-secondary-stroke);
  border-radius: var(--sotido-recipe-action-button-corner-radius);
  background: var(--sotido-recipe-action-button-secondary-fill);
  color: var(--sotido-recipe-action-button-secondary-text);
  font: inherit;
  font-weight: var(--sotido-recipe-action-button-label-weight);
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.sotido-action-button--primary {
  border-color: var(--sotido-recipe-action-button-primary-fill);
  background: var(--sotido-recipe-action-button-primary-fill);
  color: var(--sotido-recipe-action-button-primary-text);
}

.sotido-action-button--danger {
  border-color: var(--sotido-recipe-action-button-danger-fill);
  background: var(--sotido-recipe-action-button-danger-fill);
  color: var(--sotido-recipe-action-button-danger-text);
}

.sotido-action-button--compact {
  min-height: var(--sotido-recipe-action-button-compact-minimum-height);
}

.sotido-action-button--icon {
  flex: 0 0 var(--sotido-recipe-action-button-icon-control-size);
  width: var(--sotido-recipe-action-button-icon-control-size);
  min-width: var(--sotido-recipe-action-button-icon-control-size);
  height: var(--sotido-recipe-action-button-icon-control-size);
  min-height: var(--sotido-recipe-action-button-icon-control-size);
  gap: 0;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--sotido-recipe-action-button-secondary-text);
  font-size: var(--sotido-recipe-action-button-icon-glyph-size);
}

.sotido-action-button--icon-compact {
  flex-basis: var(--sotido-recipe-action-button-icon-compact-control-size);
  width: var(--sotido-recipe-action-button-icon-compact-control-size);
  min-width: var(--sotido-recipe-action-button-icon-compact-control-size);
  height: var(--sotido-recipe-action-button-icon-compact-control-size);
  min-height: var(--sotido-recipe-action-button-icon-compact-control-size);
}

.sotido-action-button--icon-filled {
  background: var(--sotido-recipe-action-button-icon-filled-fill);
}

.sotido-action-button--icon:not(:disabled):not([aria-disabled="true"]):hover,
.sotido-action-button--icon:not(:disabled):not([aria-disabled="true"]):focus-visible {
  background: var(--sotido-recipe-action-button-icon-hover-fill);
}

.sotido-action-button--icon-filled:not(:disabled):not([aria-disabled="true"]):hover,
.sotido-action-button--icon-filled:not(:disabled):not([aria-disabled="true"]):focus-visible {
  background: var(--sotido-recipe-action-button-icon-filled-hover-fill);
}

.sotido-action-button.is-disabled,
.sotido-action-button:disabled,
.sotido-action-button[aria-disabled="true"] {
  color: var(--sotido-recipe-action-button-disabled-text);
  opacity: var(--sotido-recipe-action-button-disabled-opacity);
  cursor: default;
  pointer-events: none;
}

.sotido-action-button:focus-visible {
  outline: 2px solid var(--sotido-theme-accent);
  outline-offset: 2px;
}

/* Inline contextual-help adapter generated from the canonical recipe. */
.sotido-inline-help-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sotido-recipe-inline-help-control-visual-size);
  min-width: var(--sotido-recipe-inline-help-control-visual-size);
  height: var(--sotido-recipe-inline-help-control-visual-size);
  min-height: var(--sotido-recipe-inline-help-control-visual-size);
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0;
  border: var(--sotido-recipe-inline-help-control-stroke-width) solid var(--sotido-recipe-inline-help-control-stroke);
  border-radius: var(--sotido-recipe-inline-help-control-corner-radius);
  background: var(--sotido-recipe-inline-help-control-surface);
  color: var(--sotido-recipe-inline-help-control-text);
  font-size: var(--sotido-recipe-inline-help-control-label-size);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
}

.sotido-inline-help-control:disabled,
.sotido-inline-help-control[aria-disabled="true"] {
  color: var(--sotido-recipe-inline-help-control-disabled-text);
  opacity: var(--sotido-recipe-inline-help-control-disabled-opacity);
  cursor: default;
  pointer-events: none;
}

.sotido-inline-help-control:focus-visible {
  outline: 2px solid var(--sotido-theme-accent);
  outline-offset: 2px;
}

/* Shared binary-toggle Web adapter generated from the canonical recipe. */
.sotido-toggle-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--sotido-recipe-toggle-control-track-width);
  width: var(--sotido-recipe-toggle-control-track-width);
  min-width: var(--sotido-recipe-toggle-control-track-width);
  min-height: var(--sotido-recipe-toggle-control-minimum-hit-size);
  box-sizing: border-box;
  cursor: pointer;
  touch-action: manipulation;
}

.sotido-toggle-control--button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.sotido-toggle-control-input {
  appearance: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.sotido-toggle-control-track {
  position: relative;
  display: block;
  width: var(--sotido-recipe-toggle-control-track-width);
  height: var(--sotido-recipe-toggle-control-track-height);
  border-radius: var(--sotido-recipe-toggle-control-corner-radius);
  background: var(--sotido-recipe-toggle-control-inactive-track);
  pointer-events: none;
  transition: background var(--sotido-motion-standard) ease;
}

.sotido-toggle-control-track::after {
  content: "";
  position: absolute;
  top: var(--sotido-recipe-toggle-control-track-inset);
  left: var(--sotido-recipe-toggle-control-track-inset);
  width: var(--sotido-recipe-toggle-control-thumb-size);
  height: var(--sotido-recipe-toggle-control-thumb-size);
  border-radius: var(--sotido-recipe-toggle-control-corner-radius);
  background: var(--sotido-recipe-toggle-control-thumb);
  transition: transform var(--sotido-motion-standard) ease;
}

.sotido-toggle-control-input:checked + .sotido-toggle-control-track {
  background: var(--sotido-recipe-toggle-control-active-track);
}

.sotido-toggle-control--button[aria-checked="true"] > .sotido-toggle-control-track {
  background: var(--sotido-recipe-toggle-control-active-track);
}

.sotido-toggle-control-input:checked + .sotido-toggle-control-track::after {
  transform: translateX(
    calc(var(--sotido-recipe-toggle-control-track-width) - (var(--sotido-recipe-toggle-control-track-inset) * 2) - var(--sotido-recipe-toggle-control-thumb-size))
  );
}

.sotido-toggle-control--button[aria-checked="true"] > .sotido-toggle-control-track::after {
  transform: translateX(
    calc(var(--sotido-recipe-toggle-control-track-width) - (var(--sotido-recipe-toggle-control-track-inset) * 2) - var(--sotido-recipe-toggle-control-thumb-size))
  );
}

.sotido-toggle-control-input:focus-visible + .sotido-toggle-control-track {
  outline: var(--sotido-recipe-toggle-control-focus-ring-width) solid var(--sotido-recipe-toggle-control-focus-ring);
  outline-offset: 2px;
}

.sotido-toggle-control--button:focus-visible {
  outline: none;
}

.sotido-toggle-control--button:focus-visible > .sotido-toggle-control-track {
  outline: var(--sotido-recipe-toggle-control-focus-ring-width) solid var(--sotido-recipe-toggle-control-focus-ring);
  outline-offset: 2px;
}

.sotido-toggle-control-input:disabled {
  cursor: default;
}

.sotido-toggle-control--button:disabled {
  cursor: default;
}

.sotido-toggle-control-input:disabled + .sotido-toggle-control-track {
  opacity: var(--sotido-recipe-toggle-control-disabled-opacity);
}

.sotido-toggle-control--button:disabled > .sotido-toggle-control-track {
  opacity: var(--sotido-recipe-toggle-control-disabled-opacity);
}

@media (prefers-reduced-motion: reduce) {
  .sotido-toggle-control-track,
  .sotido-toggle-control-track::after { transition: none; }
}

/* Shared segmented-control Web adapter generated from the canonical recipe. */
.sotido-segmented-control {
  --sotido-segment-gap: 0;
  --sotido-segment-inset: var(--sotido-recipe-segmented-control-rail-inset);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--sotido-segment-gap);
  width: 100%;
  min-height: var(--sotido-recipe-segmented-control-control-min-height);
  box-sizing: border-box;
  padding: var(--sotido-segment-inset);
  overflow: hidden;
  border: 0;
  border-radius: var(--sotido-recipe-segmented-control-rail-radius);
  background: var(--sotido-recipe-backdrop-chrome-surface);
  -webkit-backdrop-filter: blur(var(--sotido-recipe-backdrop-chrome-blur-radius));
  backdrop-filter: blur(var(--sotido-recipe-backdrop-chrome-blur-radius));
  box-shadow: var(--sotido-shadow-surface);
}

.sotido-segmented-control[data-segment-count="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.sotido-segmented-control[data-segment-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sotido-segmented-control[data-segment-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sotido-segmented-control[data-segment-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sotido-segmented-control[data-segment-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sotido-segmented-control[data-segment-count="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sotido-segmented-control[data-segment-count="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.sotido-segmented-control::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: var(--sotido-segment-inset) auto var(--sotido-segment-inset) var(--sotido-segment-inset);
  width: calc((100% - (var(--sotido-segment-inset) * 2) - var(--sotido-segment-gap)) / 2);
  border-radius: var(--sotido-recipe-segmented-control-active-radius);
  background: var(--sotido-recipe-segmented-control-active-fill);
  pointer-events: none;
  transform: translateX(0);
  transition: transform var(--sotido-motion-standard) cubic-bezier(0.2, 0, 0, 1);
}

.sotido-segmented-control[data-indicator-geometry="measured"][data-active-index]::before {
  left: 0;
  width: var(--sotido-segment-active-w, 0px);
  transform: translate3d(var(--sotido-segment-active-x, 0px), 0, 0);
}

.sotido-segmented-control[data-segment-count="1"]::before { width: calc(100% - (var(--sotido-segment-inset) * 2)); }
.sotido-segmented-control[data-segment-count="3"]::before { width: calc((100% - (var(--sotido-segment-inset) * 2) - (var(--sotido-segment-gap) * 2)) / 3); }
.sotido-segmented-control[data-segment-count="4"]::before { width: calc((100% - (var(--sotido-segment-inset) * 2) - (var(--sotido-segment-gap) * 3)) / 4); }
.sotido-segmented-control[data-segment-count="5"]::before { width: calc((100% - (var(--sotido-segment-inset) * 2) - (var(--sotido-segment-gap) * 4)) / 5); }
.sotido-segmented-control[data-segment-count="6"]::before { width: calc((100% - (var(--sotido-segment-inset) * 2) - (var(--sotido-segment-gap) * 5)) / 6); }
.sotido-segmented-control[data-segment-count="7"]::before { width: calc((100% - (var(--sotido-segment-inset) * 2) - (var(--sotido-segment-gap) * 6)) / 7); }
.sotido-segmented-control[data-segment-count="8"]::before { width: calc((100% - (var(--sotido-segment-inset) * 2) - (var(--sotido-segment-gap) * 7)) / 8); }

.sotido-segmented-control[data-active-index="1"]::before { transform: translateX(calc(100% + (var(--sotido-segment-gap) * 1))); }
.sotido-segmented-control[data-active-index="2"]::before { transform: translateX(calc(200% + (var(--sotido-segment-gap) * 2))); }
.sotido-segmented-control[data-active-index="3"]::before { transform: translateX(calc(300% + (var(--sotido-segment-gap) * 3))); }
.sotido-segmented-control[data-active-index="4"]::before { transform: translateX(calc(400% + (var(--sotido-segment-gap) * 4))); }
.sotido-segmented-control[data-active-index="5"]::before { transform: translateX(calc(500% + (var(--sotido-segment-gap) * 5))); }
.sotido-segmented-control[data-active-index="6"]::before { transform: translateX(calc(600% + (var(--sotido-segment-gap) * 6))); }
.sotido-segmented-control[data-active-index="7"]::before { transform: translateX(calc(700% + (var(--sotido-segment-gap) * 7))); }

.sotido-segmented-control > .sotido-segmented-control-btn {
  appearance: none;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: var(--sotido-recipe-segmented-control-control-min-height);
  box-sizing: border-box;
  padding-block: 0;
  padding-inline: var(--sotido-recipe-segmented-control-item-horizontal-padding);
  border: 0;
  border-radius: var(--sotido-recipe-segmented-control-active-radius);
  background: transparent;
  box-shadow: none;
  color: var(--sotido-recipe-segmented-control-inactive-text);
  font-size: var(--sotido-recipe-segmented-control-label-size);
  font-weight: var(--sotido-recipe-segmented-control-label-weight);
  line-height: 1.15;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}

.sotido-segmented-control--submode {
  width: min(100%, var(--sotido-recipe-segmented-control-submode-max-width));
  min-height: var(--sotido-recipe-segmented-control-submode-control-min-height);
  border-radius: var(--sotido-recipe-segmented-control-submode-rail-radius);
  pointer-events: auto;
}

.sotido-segmented-control--submode::before {
  border-radius: var(--sotido-recipe-segmented-control-submode-active-radius);
}

.sotido-segmented-control--submode > .sotido-segmented-control-btn {
  min-height: var(--sotido-recipe-segmented-control-submode-control-min-height);
  padding-inline: var(--sotido-recipe-segmented-control-submode-item-horizontal-padding);
  border-radius: var(--sotido-recipe-segmented-control-submode-active-radius);
  font-size: var(--sotido-recipe-segmented-control-dense-label-size);
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sotido-segmented-control:is(
  [data-segment-count="5"],
  [data-segment-count="6"],
  [data-segment-count="7"],
  [data-segment-count="8"]
) > .sotido-segmented-control-btn {
  padding-inline: var(--sotido-recipe-segmented-control-dense-item-horizontal-padding);
  font-size: var(--sotido-recipe-segmented-control-dense-label-size);
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sotido-segmented-control > .sotido-segmented-control-btn:is(
  .is-active,
  .is-selected,
  .active,
  [aria-pressed="true"],
  [aria-selected="true"],
  [aria-current="true"]
) {
  background: var(--sotido-recipe-segmented-control-active-fill);
  color: var(--sotido-recipe-segmented-control-active-text);
}

.sotido-segmented-control > .sotido-segmented-control-btn:disabled {
  color: var(--sotido-recipe-segmented-control-disabled-text);
  opacity: var(--sotido-recipe-segmented-control-disabled-opacity);
  cursor: default;
}

.sotido-segmented-control > .sotido-segmented-control-btn:focus-visible {
  outline: 2px solid var(--sotido-theme-accent);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .sotido-segmented-control::before { transition: none; }
}

/* Retained inline groups share the same rail and button recipes. */
.sotido-segmented-control--expandable {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
}
.sotido-segmented-control--expandable::before,
.sotido-segmented-group::before,
.sotido-segmented-group-rail::before {
  content: none;
}
.sotido-segmented-group {
  display: flex;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  gap: 0;
  padding: 0;
  border-radius: var(--sotido-recipe-segmented-control-rail-radius);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--sotido-motion-fast) ease;
}
.sotido-segmented-group.is-expanded {
  background: var(--sotido-recipe-segmented-control-expanded-group-fill);
}
.sotido-segmented-group:not(.is-expanded) {
  flex-shrink: 0;
}
.sotido-segmented-group > .sotido-segmented-control-btn,
.sotido-segmented-group-rail > .sotido-segmented-control-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow-wrap: normal;
}
.sotido-segmented-group-content {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: max-width var(--sotido-motion-standard) ease,
    opacity var(--sotido-motion-fast) ease,
    visibility 0s linear var(--sotido-motion-standard);
}
.is-expanded > .sotido-segmented-group-content {
  max-width: 600px;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.sotido-segmented-group-rail {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  width: max-content;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sotido-segmented-group-rail::-webkit-scrollbar {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .sotido-segmented-group-content { transition: none; }
}

/* Auto-generated by scripts/compile_design_tokens.py. Do not edit manually. */
:root {
  --sotido-recipe-calendar-edge-push-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-edge-push-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-edge-push-horizontal-padding: 0px;
  --sotido-recipe-calendar-edge-push-minimum-height: 38px;
  --sotido-recipe-calendar-edge-push-signal-gap: 5px;
  --sotido-recipe-calendar-edge-push-trigger-distance: 192px;
  --sotido-recipe-calendar-edge-push-vertical-padding: 7px;
  --sotido-recipe-calendar-lower-chrome-stack-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-lower-chrome-stack-border: var(--sotido-theme-border);
  --sotido-recipe-calendar-lower-chrome-stack-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-lower-chrome-stack-bottom-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-lower-chrome-stack-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-lower-chrome-stack-stack-spacing: var(--sotido-space-sm);
  --sotido-recipe-calendar-lower-chrome-stack-top-padding: var(--sotido-space-xs);
  --sotido-recipe-calendar-lower-chrome-stack-viewport-horizontal-inset: var(--sotido-space-md);
  --sotido-recipe-calendar-lower-chrome-stack-control-height: 30px;
  --sotido-recipe-calendar-lower-chrome-stack-filter-dock-reserve: 30px;
  --sotido-recipe-calendar-lower-chrome-stack-initial-bottom-reserve: 176px;
  --sotido-recipe-calendar-lower-chrome-stack-max-width: 480px;
  --sotido-recipe-calendar-lower-chrome-stack-minimum-bottom-reserve: 72px;
  --sotido-recipe-calendar-lower-chrome-stack-mode-panel-clearance-inset: 68px;
  --sotido-recipe-calendar-lower-chrome-stack-slot-legend-reserve: 62px;
  --sotido-recipe-calendar-lower-chrome-stack-utility-switcher-max-width: 104px;
  --sotido-recipe-calendar-event-card-end-time-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-event-card-start-time-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-event-card-surface: var(--sotido-theme-surface-raised);
  --sotido-recipe-calendar-event-card-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-event-card-day-period-text-size: var(--sotido-type-micro);
  --sotido-recipe-calendar-event-card-description-text-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-event-card-tight-time-text-size: var(--sotido-type-caption);
  --sotido-recipe-calendar-event-card-title-text-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-event-card-description-text-weight: var(--sotido-font-weight-regular);
  --sotido-recipe-calendar-event-card-title-text-weight: var(--sotido-font-weight-regular);
  --sotido-recipe-calendar-event-card-compact-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-calendar-event-card-connector-opacity: 60%;
  --sotido-recipe-calendar-event-card-stroke-fade-stop: 60%;
  --sotido-recipe-calendar-event-card-grid-multi-day-primary-stroke-angle: 270deg;
  --sotido-recipe-calendar-event-card-grid-tail-stroke-angle: 90deg;
  --sotido-recipe-calendar-event-card-list-multi-day-primary-stroke-angle: 360deg;
  --sotido-recipe-calendar-event-card-list-tail-stroke-angle: 178deg;
  --sotido-recipe-calendar-event-card-single-day-stroke-angle: 320deg;
  --sotido-recipe-calendar-event-card-discover-text-backdrop: rgba(0, 0, 0, 0.42);
  --sotido-recipe-calendar-event-card-compact-row-height: 30px;
  --sotido-recipe-calendar-event-card-compact-tail-row-height: 15px;
  --sotido-recipe-calendar-event-card-discover-text-backdrop-blur-radius: 10px;
  --sotido-recipe-calendar-event-card-grid-minimum-time-pair-maximum-width: 44px;
  --sotido-recipe-calendar-event-card-grid-single-time24-hour-maximum-width: 68px;
  --sotido-recipe-calendar-event-card-grid-stacked-maximum-width: 144px;
  --sotido-recipe-calendar-event-card-grid-time-compact-maximum-width: 72px;
  --sotido-recipe-calendar-event-card-grid-time-tight-maximum-width: 86px;
  --sotido-recipe-calendar-event-card-stroke-width: 1px;
  --sotido-recipe-calendar-event-card-text-band-height: 15px;
  --sotido-recipe-calendar-event-card-text-gap: 3px;
  --sotido-recipe-calendar-event-card-time-column-width12-hour: 54px;
  --sotido-recipe-calendar-event-card-time-column-width24-hour: 40px;
  --sotido-recipe-calendar-list-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-list-badge-audience-surface: var(--sotido-theme-background);
  --sotido-recipe-calendar-list-badge-neutral-surface: var(--sotido-theme-surface);
  --sotido-recipe-calendar-list-badge-organizer-surface: var(--sotido-theme-surface-soft);
  --sotido-recipe-calendar-list-badge-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-list-cell-surface: var(--sotido-theme-surface-soft);
  --sotido-recipe-calendar-list-destructive-accent: var(--sotido-theme-destructive-accent);
  --sotido-recipe-calendar-list-destructive-accent-text: var(--sotido-theme-destructive-accent-text);
  --sotido-recipe-calendar-list-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-list-primary-accent-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-list-success-accent: var(--sotido-theme-success-accent);
  --sotido-recipe-calendar-list-success-accent-text: var(--sotido-theme-success-accent-text);
  --sotido-recipe-calendar-list-surface: var(--sotido-theme-surface-chrome);
  --sotido-recipe-calendar-list-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-list-text-on-accent: var(--sotido-theme-text-on-accent);
  --sotido-recipe-calendar-list-warning-accent: var(--sotido-theme-warning-accent);
  --sotido-recipe-calendar-list-warning-accent-text: var(--sotido-theme-warning-accent-text);
  --sotido-recipe-calendar-list-badge-text-size: var(--sotido-type-label);
  --sotido-recipe-calendar-list-badge-leading-padding: var(--sotido-space-xxs);
  --sotido-recipe-calendar-list-badge-trailing-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-list-content-horizontal-inset: var(--sotido-space-xxs);
  --sotido-recipe-calendar-list-month-day-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-list-row-column-gap: var(--sotido-space-xs);
  --sotido-recipe-calendar-list-badge-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-calendar-list-badge-bottom-meta-height: 14px;
  --sotido-recipe-calendar-list-badge-height: 13px;
  --sotido-recipe-calendar-list-badge-overlap: 6px;
  --sotido-recipe-calendar-list-day-anchor-width: 30px;
  --sotido-recipe-calendar-list-horizontal-inset: 3px;
  --sotido-recipe-calendar-list-loading-reveal-offset: 6px;
  --sotido-recipe-calendar-list-row-vertical-inset: 2px;
  --sotido-recipe-calendar-month-header-current-surface: var(--sotido-theme-accent);
  --sotido-recipe-calendar-month-header-current-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-month-header-surface: var(--sotido-theme-weekend-surface);
  --sotido-recipe-calendar-month-header-text: var(--sotido-theme-weekend-text);
  --sotido-recipe-calendar-month-header-font-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-month-header-vertical-padding: var(--sotido-space-xxs);
  --sotido-recipe-calendar-month-header-collapsed-preview-opaque-stop: 52%;
  --sotido-recipe-calendar-month-header-collapsed-preview-height: 60px;
  --sotido-recipe-calendar-month-header-horizontal-padding: 10px;
  --sotido-recipe-calendar-month-header-line-height: 15px;
  --sotido-recipe-calendar-month-header-trailing-radius: 15px;
  --sotido-recipe-calendar-date-header-muted-text: var(--sotido-theme-text-muted);
  --sotido-recipe-calendar-date-header-surface: var(--sotido-theme-surface-soft);
  --sotido-recipe-calendar-date-header-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-date-header-today-surface: var(--sotido-theme-accent);
  --sotido-recipe-calendar-date-header-today-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-date-header-weekend-surface: var(--sotido-theme-weekend-surface);
  --sotido-recipe-calendar-date-header-weekend-text: var(--sotido-theme-weekend-text);
  --sotido-recipe-calendar-date-header-weekday-size: var(--sotido-type-label);
  --sotido-recipe-calendar-date-header-grid-stack-inline-inset: var(--sotido-space-xxs);
  --sotido-recipe-calendar-date-header-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-calendar-date-header-day-number-line-height: 19px;
  --sotido-recipe-calendar-date-header-day-number-size: 19px;
  --sotido-recipe-calendar-date-header-grid-height: 30px;
  --sotido-recipe-calendar-date-header-stack-gap: 0px;
  --sotido-recipe-calendar-date-header-weekday-line-height: 10px;
  --sotido-recipe-calendar-today-separator-line: var(--sotido-theme-accent);
  --sotido-recipe-calendar-today-separator-pill-surface: var(--sotido-theme-accent);
  --sotido-recipe-calendar-today-separator-pill-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-today-separator-pill-font-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-today-separator-horizontal-inset: var(--sotido-space-sm);
  --sotido-recipe-calendar-today-separator-pill-vertical-padding: var(--sotido-space-xxs);
  --sotido-recipe-calendar-today-separator-segment-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-today-separator-height: 28px;
  --sotido-recipe-calendar-today-separator-line-minimum-width: 28px;
  --sotido-recipe-calendar-today-separator-line-thickness: 1px;
  --sotido-recipe-calendar-today-separator-pill-horizontal-padding: 10px;
  --sotido-recipe-calendar-today-separator-pill-radius: 15px;
  --sotido-recipe-calendar-today-return-control-surface: var(--sotido-theme-accent);
  --sotido-recipe-calendar-today-return-control-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-today-return-control-font-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-today-return-control-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-today-return-control-corner-radius: 15px;
  --sotido-recipe-calendar-today-return-control-minimum-height: 30px;
  --sotido-recipe-calendar-grid-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-grid-cell-surface: var(--sotido-theme-surface-soft);
  --sotido-recipe-calendar-grid-surface: var(--sotido-theme-surface-chrome);
  --sotido-recipe-calendar-grid-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-grid-cell-bottom-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-grid-cell-gap: var(--sotido-space-xxs);
  --sotido-recipe-calendar-grid-date-event-gap: var(--sotido-space-xxs);
  --sotido-recipe-calendar-grid-grid-inset: var(--sotido-space-sm);
  --sotido-recipe-calendar-grid-month-top-gap: var(--sotido-space-md);
  --sotido-recipe-calendar-grid-week-row-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-grid-cell-corner-radius: var(--sotido-radius-compact);
  --sotido-recipe-calendar-grid-bar-horizontal-padding: 3px;
  --sotido-recipe-calendar-grid-bar-narrow-card-max-width: 110px;
  --sotido-recipe-calendar-grid-bar-row-gap: 2px;
  --sotido-recipe-calendar-grid-dense-lane-viewport-height: 118px;
  --sotido-recipe-calendar-grid-month-bottom-gap: 14px;
  --sotido-recipe-calendar-grid-month-header-bottom-gap: 0px;
  --sotido-recipe-calendar-grid-overflow-cue-height: 8px;
  --sotido-recipe-calendar-grid-multi-day-connector-fill: var(--sotido-theme-accent);
  --sotido-recipe-calendar-grid-multi-day-connector-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-grid-multi-day-connector-card-overlap: 6px;
  --sotido-recipe-calendar-filter-dock-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-filter-dock-border: var(--sotido-theme-border);
  --sotido-recipe-calendar-filter-dock-surface: var(--sotido-theme-surface-chrome);
  --sotido-recipe-calendar-filter-dock-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-filter-dock-text-on-accent: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-filter-dock-toggle-font-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-filter-dock-control-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-filter-dock-dock-gap: var(--sotido-space-xs);
  --sotido-recipe-calendar-filter-dock-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-filter-dock-menu-gap: var(--sotido-space-xs);
  --sotido-recipe-calendar-filter-dock-menu-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-filter-dock-summary-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-filter-dock-vertical-top-padding: var(--sotido-space-xxs);
  --sotido-recipe-calendar-filter-dock-pill-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-filter-dock-compact-menu-width: 244px;
  --sotido-recipe-calendar-filter-dock-menu-offset: 8px;
  --sotido-recipe-calendar-filter-dock-menu-radius: 16px;
  --sotido-recipe-calendar-filter-dock-toggle-horizontal-padding: 13px;
  --sotido-recipe-calendar-filter-dock-tool-toggle-height: 34px;
  --sotido-recipe-calendar-filter-dock-tool-toggle-horizontal-padding: 10px;
  --sotido-recipe-calendar-filter-dock-tool-toggle-radius: 9px;
  --sotido-recipe-calendar-filter-dock-vertical-bottom-padding: 2px;
  --sotido-recipe-calendar-story-strip-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-story-strip-border: var(--sotido-theme-border);
  --sotido-recipe-calendar-story-strip-destructive-accent: var(--sotido-theme-destructive-accent);
  --sotido-recipe-calendar-story-strip-primary-accent-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-story-strip-surface: var(--sotido-theme-surface);
  --sotido-recipe-calendar-story-strip-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-story-strip-text-on-accent: var(--sotido-theme-text-on-accent);
  --sotido-recipe-calendar-story-strip-warning-accent: var(--sotido-theme-warning-accent);
  --sotido-recipe-calendar-story-strip-controls-gap: var(--sotido-space-lg);
  --sotido-recipe-calendar-story-strip-controls-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-story-strip-folder-create-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-create-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-story-strip-folder-divider-vertical-inset: var(--sotido-space-xs);
  --sotido-recipe-calendar-story-strip-folder-foot-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-head-bottom-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-head-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-head-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-story-strip-folder-row-badge-horizontal-padding: var(--sotido-space-xs);
  --sotido-recipe-calendar-story-strip-folder-row-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-row-padding: var(--sotido-space-xs);
  --sotido-recipe-calendar-story-strip-folder-scroll-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-folder-scroll-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-story-strip-avatar-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-story-strip-folder-badge-pill-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-story-strip-folder-mini-radius: var(--sotido-radius-compact);
  --sotido-recipe-calendar-story-strip-folder-row-avatar-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-story-strip-folder-row-badge-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-story-strip-avatar-size: 52px;
  --sotido-recipe-calendar-story-strip-folder-action-height: 24px;
  --sotido-recipe-calendar-story-strip-folder-action-horizontal-padding: 9px;
  --sotido-recipe-calendar-story-strip-folder-badge-height: 16px;
  --sotido-recipe-calendar-story-strip-folder-badge-horizontal-padding: 5px;
  --sotido-recipe-calendar-story-strip-folder-badge-min-width: 16px;
  --sotido-recipe-calendar-story-strip-folder-badge-radius: 9px;
  --sotido-recipe-calendar-story-strip-folder-create-badge-size: 8px;
  --sotido-recipe-calendar-story-strip-folder-create-icon-size: 16px;
  --sotido-recipe-calendar-story-strip-folder-dialog-horizontal-padding: 18px;
  --sotido-recipe-calendar-story-strip-folder-grid-gap: 3px;
  --sotido-recipe-calendar-story-strip-folder-grid-size: 34px;
  --sotido-recipe-calendar-story-strip-folder-head-top-padding: 10px;
  --sotido-recipe-calendar-story-strip-folder-pin-size: 24px;
  --sotido-recipe-calendar-story-strip-folder-popover-radius: 16px;
  --sotido-recipe-calendar-story-strip-folder-preview-avatar-size: 22px;
  --sotido-recipe-calendar-story-strip-folder-preview-inset: 2px;
  --sotido-recipe-calendar-story-strip-folder-preview-offset: 18px;
  --sotido-recipe-calendar-story-strip-folder-row-avatar-size: 34px;
  --sotido-recipe-calendar-story-strip-folder-row-badge-margin-start: 6px;
  --sotido-recipe-calendar-story-strip-folder-row-badge-vertical-padding: 1px;
  --sotido-recipe-calendar-story-strip-folder-row-radius: 10px;
  --sotido-recipe-calendar-story-strip-folder-slot-min-width: 52px;
  --sotido-recipe-calendar-story-strip-folder-slot-padding-start: 10px;
  --sotido-recipe-calendar-story-strip-item-slot-size: 52px;
  --sotido-recipe-calendar-story-strip-overflow-fade-width: 28px;
  --sotido-recipe-calendar-story-strip-section-gap: 14px;
  --sotido-recipe-calendar-story-strip-story-badge-size: 16px;
  --sotido-recipe-calendar-story-strip-strip-gap: 10px;
  --sotido-recipe-calendar-story-strip-strip-horizontal-padding: 10px;
  --sotido-recipe-calendar-slot-legend-border: var(--sotido-theme-border);
  --sotido-recipe-calendar-slot-legend-danger: var(--sotido-theme-destructive-accent);
  --sotido-recipe-calendar-slot-legend-success: var(--sotido-theme-success-accent);
  --sotido-recipe-calendar-slot-legend-surface: var(--sotido-theme-surface-chrome);
  --sotido-recipe-calendar-slot-legend-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-slot-legend-text-on-accent: var(--sotido-theme-text-on-accent);
  --sotido-recipe-calendar-slot-legend-warning: var(--sotido-theme-warning-accent);
  --sotido-recipe-calendar-slot-legend-compact-label-size: var(--sotido-type-micro);
  --sotido-recipe-calendar-slot-legend-label-size: var(--sotido-type-body-compact);
  --sotido-recipe-calendar-slot-legend-chip-gap: var(--sotido-space-xs);
  --sotido-recipe-calendar-slot-legend-floating-bottom-margin: var(--sotido-space-xs);
  --sotido-recipe-calendar-slot-legend-floating-panel-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-slot-legend-host-horizontal-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-slot-legend-panel-gap: var(--sotido-space-sm);
  --sotido-recipe-calendar-slot-legend-row-gap: var(--sotido-space-xxs);
  --sotido-recipe-calendar-slot-legend-stack-gap: var(--sotido-space-xs);
  --sotido-recipe-calendar-slot-legend-chip-horizontal-padding: var(--sotido-space-sm);
  --sotido-recipe-calendar-slot-legend-chip-radius: var(--sotido-radius-pill);
  --sotido-recipe-calendar-slot-legend-chip-vertical-padding: 5px;
  --sotido-recipe-calendar-slot-legend-compose-dot-size: 10px;
  --sotido-recipe-calendar-slot-legend-dot-size: 8px;
  --sotido-recipe-calendar-slot-legend-floating-panel-radius: 14px;
  --sotido-recipe-calendar-quick-add-accent: var(--sotido-theme-accent);
  --sotido-recipe-calendar-quick-add-border: var(--sotido-theme-border);
  --sotido-recipe-calendar-quick-add-field-surface: var(--sotido-theme-surface);
  --sotido-recipe-calendar-quick-add-muted-text: var(--sotido-theme-text-secondary);
  --sotido-recipe-calendar-quick-add-surface: var(--sotido-theme-surface-raised);
  --sotido-recipe-calendar-quick-add-text: var(--sotido-theme-text-primary);
  --sotido-recipe-calendar-quick-add-text-on-accent: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-calendar-quick-add-surface-padding: var(--sotido-space-md);
  --sotido-recipe-calendar-quick-add-viewport-inset: var(--sotido-space-md);
  --sotido-recipe-calendar-quick-add-content-gap: 10px;
  --sotido-recipe-calendar-quick-add-max-width: 420px;
  --sotido-recipe-calendar-quick-add-mobile-top-offset: 160px;
  --sotido-recipe-calendar-quick-add-top-offset: 140px;
}
:is(html[data-theme="light"], body.theme-light, html[data-theme="light"] body) {
  --sotido-recipe-calendar-event-card-discover-text-backdrop: rgba(255, 255, 255, 0.56);
}
@media (prefers-color-scheme: light) {
  :is(html[data-theme="auto"], body.theme-auto, html[data-theme="auto"] body) {
    --sotido-recipe-calendar-event-card-discover-text-backdrop: rgba(255, 255, 255, 0.56);
  }
}

/* Shared Calendar presentation primitives.
   The host scope keeps these product styles safe for direct light-DOM embeds. */
.calendar-product-presentation{
  color: var(--sotido-recipe-calendar-grid-text);
}

.calendar-product-presentation .calendar-month-shell{
  width: 100%;
  min-width: 0;
}

.calendar-product-presentation .calendar-month-shell--grid{
  margin-top: var(--sotido-recipe-calendar-grid-month-top-gap);
  margin-bottom: var(--sotido-recipe-calendar-grid-month-bottom-gap);
}

.calendar-product-presentation .calendar-month-header{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  font-weight: var(--sotido-font-weight-medium);
  cursor: default;
}

.calendar-product-presentation .calendar-month-shell--grid > .calendar-month-header--grid{
  position: sticky;
  top: var(--sotido-calendar-top-content-inset, 0px);
  scroll-margin-top: calc(var(--sotido-calendar-top-content-inset, 0px) + 8px);
  z-index: 3;
  margin: 0 0 var(--sotido-recipe-calendar-grid-month-header-bottom-gap);
}

.calendar-product-presentation .calendar-month-header-label{
  display: inline-block;
  margin-bottom: var(--ROW_GAP, 5px);
  padding:
    var(--sotido-recipe-calendar-month-header-vertical-padding)
    var(--sotido-recipe-calendar-month-header-horizontal-padding);
  border-radius:
    0
    var(--sotido-recipe-calendar-month-header-trailing-radius)
    var(--sotido-recipe-calendar-month-header-trailing-radius)
    0;
  background: var(--sotido-recipe-calendar-month-header-surface);
  color: var(--sotido-recipe-calendar-month-header-text);
  box-shadow: var(--sotido-shadow-surface);
  font-size: var(--sotido-recipe-calendar-month-header-font-size);
  line-height: var(--sotido-recipe-calendar-month-header-line-height);
  transition: transform var(--sotido-motion-fast) ease;
}

.calendar-product-presentation .calendar-month-header.is-current-month .calendar-month-header-label{
  background: var(--sotido-recipe-calendar-month-header-current-surface);
  color: var(--sotido-recipe-calendar-month-header-current-text);
}

.calendar-product-presentation .calendar-month-body--grid{
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--sotido-recipe-calendar-grid-cell-gap);
  row-gap: var(--sotido-recipe-calendar-grid-week-row-gap);
  margin:
    var(--sotido-recipe-calendar-grid-cell-gap)
    var(--sotido-recipe-calendar-grid-grid-inset);
  padding-top: 0;
}

.calendar-product-presentation .calendar-day-shell--grid{
  --calendar-grid-events-top: calc(
    var(--sotido-recipe-calendar-date-header-grid-height) +
    var(--sotido-recipe-calendar-grid-date-event-gap)
  );
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(
    var(--calendar-grid-events-top) +
    var(
      --calendar-grid-day-viewport-height,
      var(--sotido-recipe-calendar-grid-dense-lane-viewport-height)
    ) +
    var(--sotido-recipe-calendar-grid-cell-bottom-padding)
  );
  overflow: clip;
  background: linear-gradient(
    to bottom,
    transparent 0 var(--calendar-grid-events-top),
    var(--sotido-recipe-calendar-grid-cell-surface) var(--calendar-grid-events-top) 100%
  );
}

.calendar-product-presentation .calendar-date-header{
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--sotido-recipe-calendar-date-header-corner-radius);
  background: var(--sotido-recipe-calendar-date-header-surface);
  color: var(--sotido-recipe-calendar-date-header-text);
  transition:
    filter var(--sotido-motion-fast) ease,
    transform var(--sotido-motion-fast) ease,
    box-shadow var(--sotido-motion-fast) ease;
}

.calendar-product-presentation .calendar-date-header.is-weekend:not(.is-today){
  background: var(--sotido-recipe-calendar-date-header-weekend-surface);
  color: var(--sotido-recipe-calendar-date-header-weekend-text);
}

.calendar-product-presentation .calendar-date-header.is-today{
  background: var(--sotido-recipe-calendar-date-header-today-surface);
  color: var(--sotido-recipe-calendar-date-header-today-text);
}

.calendar-product-presentation .calendar-date-header .calendar-date-stack{
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sotido-recipe-calendar-date-header-stack-gap);
  text-align: center;
  pointer-events: none;
}

.calendar-product-presentation .calendar-date-header .calendar-day-number{
  font-size: var(--sotido-recipe-calendar-date-header-day-number-size);
  font-weight: normal;
  line-height: var(--sotido-recipe-calendar-date-header-day-number-line-height);
  opacity: 0.95;
}

.calendar-product-presentation .calendar-date-header .calendar-weekday{
  font-size: var(--sotido-recipe-calendar-date-header-weekday-size);
  font-weight: var(--sotido-font-weight-medium);
  line-height: var(--sotido-recipe-calendar-date-header-weekday-line-height);
  opacity: 0.75;
}

.calendar-product-presentation .calendar-date-header--grid{
  position: relative;
  top: auto;
  flex: 0 0 var(--sotido-recipe-calendar-date-header-grid-height);
  width: 100%;
  min-height: var(--sotido-recipe-calendar-date-header-grid-height);
  padding: 0;
  align-items: flex-start;
  box-shadow: none;
}

.calendar-product-presentation .calendar-date-header--grid .calendar-date-stack{
  width: 100%;
  height: 100%;
  align-items: flex-start;
  padding-inline-start: var(--sotido-recipe-calendar-date-header-grid-stack-inline-inset);
}

.calendar-product-presentation .calendar-day-events-anchor--grid{
  position: relative;
  z-index: 3;
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  flex-direction: column;
  margin-top: var(--sotido-recipe-calendar-grid-date-event-gap);
  padding-bottom: var(--sotido-recipe-calendar-grid-cell-bottom-padding);
  border-radius: var(--sotido-recipe-calendar-event-card-compact-corner-radius);
  background: transparent;
  overflow: visible;
  pointer-events: auto;
}

.calendar-product-presentation .calendar-month-shell--list{
  padding-top: 24px;
}

.calendar-product-presentation .calendar-month-shell--list > .calendar-month-header--list{
  position: sticky;
  top: var(--sotido-calendar-month-header-top, var(--sotido-calendar-top-content-inset, 0px));
  scroll-margin-top: calc(var(--sotido-calendar-month-header-top, var(--sotido-calendar-top-content-inset, 0px)) + 8px);
  z-index: 3;
}

.calendar-product-presentation .calendar-month-header--list.is-month-scroll-context{
  transform: translateY(-50%);
}

.calendar-product-presentation .calendar-month-body--list{
  display: flex;
  flex-direction: column;
  gap: var(--sotido-recipe-calendar-list-month-day-gap);
}

.calendar-product-presentation .calendar-day-shell--list{
  position: relative;
  z-index: 1;
  display: flex;
  min-height: var(--sotido-recipe-calendar-event-card-compact-row-height);
  align-items: center;
  column-gap: var(--sotido-recipe-calendar-list-row-column-gap);
  margin:
    var(--sotido-recipe-calendar-list-row-vertical-inset)
    var(--sotido-recipe-calendar-list-horizontal-inset);
}

.calendar-product-presentation .calendar-day-shell--list.is-today{
  padding-top: 0;
  background: none;
}

.calendar-product-presentation .calendar-date-header--list{
  position: relative;
  width: var(--sotido-recipe-calendar-list-day-anchor-width);
  height: auto;
  flex: 0 0 var(--sotido-recipe-calendar-list-day-anchor-width);
  align-self: stretch;
}

.calendar-product-presentation .calendar-date-header--list.clickable{
  cursor: pointer;
}

.calendar-product-presentation .calendar-date-header--list .calendar-date-stack{
  position: absolute;
}

.calendar-product-presentation .calendar-day-events-anchor--list{
  display: flex;
  min-width: 0;
  min-height: var(--sotido-recipe-calendar-event-card-compact-row-height);
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
}

.calendar-product-presentation .calendar-day-events-anchor--list.is-empty{
  border-radius: var(--sotido-recipe-calendar-event-card-compact-corner-radius);
  background: var(--sotido-recipe-calendar-list-cell-surface);
}

.calendar-product-presentation .calendar-day-sticker-rail{
  position: relative;
  z-index: 4;
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 5px;
  padding: 1px 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.calendar-product-presentation .calendar-day-sticker-rail::-webkit-scrollbar{
  display: none;
}

.calendar-product-presentation .calendar-day-sticker{
  --calendar-day-sticker-fold-size: 9px;
  --calendar-day-sticker-padding-top: 5px;
  --calendar-day-sticker-padding-right: 7px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
  max-width: min(220px, 72vw);
  min-width: 76px;
  min-height: 27px;
  flex: 0 0 auto;
  padding:
    var(--calendar-day-sticker-padding-top)
    var(--calendar-day-sticker-padding-right)
    6px
    calc(8px + var(--calendar-day-sticker-fold-size));
  overflow: hidden;
  color: #211d17;
  background: var(--calendar-day-sticker-background, #F4CF68);
  border: 0;
  border-radius: 0 5px 5px 5px;
  clip-path: polygon(
    var(--calendar-day-sticker-fold-size) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--calendar-day-sticker-fold-size)
  );
  box-shadow: 0 2px 7px color-mix(in srgb, #000 16%, transparent);
  font: inherit;
  font-size: var(--sotido-type-caption);
  font-weight: var(--sotido-font-weight-semibold);
  line-height: 1.25;
  text-align: left;
}

.calendar-product-presentation .calendar-day-sticker-title{
  align-self: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-product-presentation .calendar-day-sticker-audience-badge{
  position: relative;
  top: calc(0px - var(--calendar-day-sticker-padding-top));
  right: calc(0px - var(--calendar-day-sticker-padding-right));
  display: inline-flex;
  height: var(--sotido-recipe-calendar-list-badge-height);
  align-items: center;
  justify-content: center;
  padding:
    0 var(--sotido-recipe-calendar-list-badge-trailing-padding)
    0 var(--sotido-recipe-calendar-list-badge-leading-padding);
  border: 0;
  border-radius: 0 0 0 var(--sotido-recipe-calendar-list-badge-corner-radius);
  color: var(--sotido-recipe-calendar-list-badge-text);
  background: var(--sotido-recipe-calendar-list-badge-audience-surface);
  font-size: var(--sotido-recipe-calendar-list-badge-text-size);
  font-weight: inherit;
  line-height: 1;
  text-shadow: none;
  white-space: nowrap;
}

.calendar-product-presentation button.calendar-day-sticker{
  cursor: pointer;
}

.calendar-product-presentation .calendar-day-sticker::after{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--calendar-day-sticker-fold-size);
  height: var(--calendar-day-sticker-fold-size);
  background: color-mix(in srgb, var(--calendar-day-sticker-background, #F4CF68) 72%, #000 28%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  content: '';
  opacity: 0.62;
  pointer-events: none;
}

.calendar-product-presentation .calendar-day-sticker--text-light{
  color: #fff;
  text-shadow: 0 1px 1px color-mix(in srgb, #000 34%, transparent);
}

.calendar-product-presentation .calendar-day-sticker--text-dark{
  color: #211d17;
}

.calendar-product-presentation .calendar-day-events-anchor--grid > .calendar-day-sticker-rail{
  padding-bottom: var(--sotido-recipe-calendar-grid-bar-row-gap);
}

.calendar-product-presentation .calendar-day-events-anchor--grid > .calendar-day-sticker-rail .calendar-day-sticker{
  --calendar-day-sticker-padding-top: 4px;
  --calendar-day-sticker-padding-right: 5px;
  min-width: 76px;
  max-width: 148px;
  gap: 4px;
  padding: 4px 5px 5px calc(5px + var(--calendar-day-sticker-fold-size));
  font-size: 10px;
}

.calendar-product-presentation .calendar-day-events-anchor--grid > .calendar-day-sticker-rail .calendar-day-sticker-audience-badge{
  height: var(--sotido-recipe-calendar-list-badge-height);
}

.calendar-product-presentation .calendar-grid-multi-day-lane{
  display: grid;
  min-width: 0;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: var(--sotido-recipe-calendar-event-card-compact-tail-row-height);
  align-content: start;
  row-gap: var(--sotido-recipe-calendar-grid-bar-row-gap);
}

.calendar-product-presentation .calendar-grid-multi-day-lane:not(:empty){
  margin-bottom: var(--sotido-recipe-calendar-grid-bar-row-gap);
}

.calendar-product-presentation .calendar-grid-day-scroll-viewport{
  position: relative;
  min-width: 0;
  height: var(
    --calendar-grid-day-viewport-height,
    var(--sotido-recipe-calendar-grid-dense-lane-viewport-height)
  );
  flex: 0 0 var(
    --calendar-grid-day-viewport-height,
    var(--sotido-recipe-calendar-grid-dense-lane-viewport-height)
  );
  overflow: hidden;
  border-radius: var(--sotido-recipe-calendar-event-card-compact-corner-radius);
}

.calendar-product-presentation .calendar-day-events-anchor--grid::after{
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--sotido-recipe-calendar-grid-overflow-cue-height);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--sotido-recipe-calendar-list-accent)
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sotido-motion-standard) ease-out;
}

.calendar-product-presentation .calendar-grid-day-event-scroller{
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  gap: var(--sotido-recipe-calendar-grid-bar-row-gap);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.calendar-product-presentation .calendar-grid-day-event-scroller::-webkit-scrollbar{
  display: none;
  width: 0;
  height: 0;
}

.calendar-product-presentation .calendar-day-shell--grid[data-grid-scroll-more="1"] .calendar-day-events-anchor--grid::after{
  opacity: 0.9;
}

.calendar-product-presentation .calendar-event-segment{
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.calendar-product-presentation .calendar-event-segment--grid{
  position: relative;
  z-index: 3;
  grid-column: 1;
  align-self: start;
  min-height: var(--sotido-recipe-calendar-event-card-compact-row-height);
}

.calendar-product-presentation .calendar-event-segment--grid.tail{
  height: var(--sotido-recipe-calendar-event-card-compact-tail-row-height);
  min-height: var(--sotido-recipe-calendar-event-card-compact-tail-row-height);
}

.calendar-product-presentation .calendar-event-segment--list.tail{
  height: var(--sotido-recipe-calendar-event-card-compact-tail-row-height);
}

.calendar-product-presentation .calendar-event-segment > .calendar-event-card{
  --calendar-event-time-column-width:
    var(--sotido-recipe-calendar-event-card-time-column-width24-hour);
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  padding: 0;
  overflow: hidden;
  border-radius: var(--sotido-recipe-calendar-event-card-compact-corner-radius);
  color: var(--sotido-recipe-calendar-event-card-text);
  font: inherit;
  font-size: var(--sotido-type-body-compact);
  text-align: start;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: none;
}

.calendar-product-presentation .calendar-event-card[data-calendar-time-format="12-hour"]{
  --calendar-event-time-column-width:
    var(--sotido-recipe-calendar-event-card-time-column-width12-hour);
}

.calendar-product-presentation button.calendar-event-card{
  appearance: none;
  cursor: pointer;
}

.calendar-product-presentation .calendar-event-card.ev-variant-regular{
  --sotido-calendar-event-card-stroke-angle:
    var(--sotido-recipe-calendar-event-card-single-day-stroke-angle);
  border: var(--sotido-recipe-calendar-event-card-stroke-width) solid transparent;
  background:
    linear-gradient(
      var(--sotido-recipe-calendar-event-card-surface),
      var(--sotido-recipe-calendar-event-card-surface)
    ) padding-box,
    linear-gradient(
      var(--sotido-calendar-event-card-stroke-angle),
      var(
        --calendar-comparison-color,
        var(--ev-regular-stroke, var(--sotido-theme-border))
      ) 0%,
      transparent var(--sotido-recipe-calendar-event-card-stroke-fade-stop)
    ) border-box;
  isolation: isolate;
}

.calendar-product-presentation
  .calendar-event-card.is-chat-event.ev-variant-regular{
  border: 0;
  background: transparent;
}

.calendar-product-presentation
  .calendar-event-card.is-repost.ev-variant-regular{
  border: 0;
  background: var(--sotido-recipe-calendar-event-card-surface);
}

.calendar-product-presentation .calendar-event-card .ev-chat-avatar-stack{
  position: relative;
  z-index: 11;
  display: flex;
  height: 100%;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}

.calendar-product-presentation .calendar-event-card .ev-chat-avatar-stack[hidden]{
  display: none;
}

.calendar-product-presentation .calendar-event-card .ev-chat-avatar{
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  margin-inline-start: -14px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: var(--sotido-theme-surface-raised);
  color: var(--sotido-theme-text-primary);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.calendar-product-presentation .calendar-event-card .ev-chat-avatar--counter{
  display: none;
  background: var(--sotido-theme-surface-highest);
  font-size: 9px;
}

.calendar-product-presentation .calendar-event-card .ev-chat-avatar--counter-wide{
  display: inline-flex;
}

@media (max-width: 560px){
  .calendar-product-presentation .calendar-event-card{
    --ev-chat-avatar-reserve: var(--ev-chat-avatar-reserve-narrow, 0px);
  }

  .calendar-product-presentation .calendar-event-card .ev-chat-avatar[data-chat-avatar-index="4"],
  .calendar-product-presentation .calendar-event-card .ev-chat-avatar[data-chat-avatar-index="5"],
  .calendar-product-presentation .calendar-event-card .ev-chat-avatar[data-chat-avatar-index="6"],
  .calendar-product-presentation .calendar-event-card .ev-chat-avatar--counter-wide{
    display: none;
  }

  .calendar-product-presentation .calendar-event-card .ev-chat-avatar--counter-narrow{
    display: inline-flex;
  }
}

.calendar-product-presentation .calendar-event-card .ev-chat-avatar:first-child{
  margin-inline-start: 0;
}

.calendar-product-presentation .calendar-event-card--list .ev-chat-avatar-stack{
  float: left;
}

.calendar-product-presentation .calendar-event-card .ev-chat-avatar-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.calendar-product-presentation .calendar-event-card.ev-variant-highlight{
  border: 0;
  background: var(--ev-highlight-bg, var(--sotido-theme-accent));
  isolation: isolate;
}

.calendar-product-presentation .calendar-event-card > .ev-cover-layer{
  display: none;
}

.calendar-product-presentation
  .calendar-event-card.highlight.highlight-has-cover > .ev-cover-layer{
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  display: block;
  width: clamp(72px, 42%, 180px);
  max-width: 50%;
  overflow: hidden;
  pointer-events: none;
}

.calendar-product-presentation
  .calendar-event-card.highlight.highlight-has-cover > .ev-cover-layer::before{
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, var(--ev-highlight-bg, transparent), transparent 58%);
  content: "";
}

.calendar-product-presentation
  .calendar-event-card.highlight.highlight-has-cover > .ev-cover-layer .ev-cover-layer-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.calendar-product-presentation
  .calendar-event-card.highlight.highlight-has-cover
  > .ev-cover-layer[data-highlight-cover-kind="brand"]{
  background: center / contain no-repeat url("/site-assets/a0e81ea8e57f9ea0.webp");
}

.calendar-product-presentation .calendar-event-card.ev-variant-highlight .ev-timewrap,
.calendar-product-presentation .calendar-event-card.ev-variant-highlight .ev-text-pair{
  z-index: 2;
}

.calendar-product-presentation .calendar-event-card.ev-variant-highlight .ev-timewrap .ev-timechip,
.calendar-product-presentation .calendar-event-card.ev-variant-highlight .ev-title-text,
.calendar-product-presentation .calendar-event-card.ev-variant-highlight .ev-desc-text{
  color: var(--ev-highlight-text, var(--sotido-theme-text-primary));
  background: transparent;
}

.calendar-product-presentation
  .calendar-event-segment--list > .calendar-event-card--list.ev-variant-highlight:not(.tail-item){
  height: calc(var(--sotido-recipe-calendar-event-card-compact-row-height) * 2);
  min-height: calc(var(--sotido-recipe-calendar-event-card-compact-row-height) * 2);
}

.calendar-product-presentation
  .calendar-event-segment--list > .calendar-event-card--list.has-tail{
  --sotido-calendar-event-card-stroke-angle:
    var(--sotido-recipe-calendar-event-card-list-multi-day-primary-stroke-angle);
}

.calendar-product-presentation
  .calendar-event-segment--list > .calendar-event-card--list.tail-item{
  --sotido-calendar-event-card-stroke-angle:
    var(--sotido-recipe-calendar-event-card-list-tail-stroke-angle);
}

.calendar-product-presentation
  .calendar-event-segment--grid > .calendar-event-card--grid.has-tail{
  --sotido-calendar-event-card-stroke-angle:
    var(--sotido-recipe-calendar-event-card-grid-multi-day-primary-stroke-angle);
}

.calendar-product-presentation
  .calendar-event-segment--grid > .calendar-event-card--grid.tail-item{
  --sotido-calendar-event-card-stroke-angle:
    var(--sotido-recipe-calendar-event-card-grid-tail-stroke-angle);
}

.calendar-product-presentation .calendar-event-segment--grid > .calendar-event-card--grid{
  height: var(--sotido-recipe-calendar-event-card-compact-row-height);
  min-height: var(--sotido-recipe-calendar-event-card-compact-row-height);
  pointer-events: auto;
  container-type: inline-size;
}

.calendar-product-presentation .calendar-event-segment--grid > .calendar-event-card--grid.tail-item{
  height: var(--sotido-recipe-calendar-event-card-compact-tail-row-height);
  min-height: var(--sotido-recipe-calendar-event-card-compact-tail-row-height);
}

.calendar-product-presentation .calendar-event-card--grid .ev-timewrap,
.calendar-product-presentation .calendar-event-card--grid .ev-text-pair{
  position: absolute;
  z-index: 5;
  display: flex;
  min-width: 0;
  color: var(--sotido-recipe-calendar-event-card-text);
  box-sizing: border-box;
  pointer-events: none;
}

.calendar-product-presentation .calendar-event-card--grid .ev-timewrap{
  inset: 0 auto 0 0;
  width: var(--calendar-event-time-column-width);
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
  padding-inline-start: 0;
}

.calendar-product-presentation .calendar-event-card--grid .ev-text-pair{
  z-index: 9;
  inset:
    0
    0
    0
    calc(
      var(--calendar-event-time-column-width) +
      var(--sotido-recipe-calendar-event-card-text-gap)
    );
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding-inline: 0;
}

.calendar-product-presentation .calendar-event-card--grid .ev-timechip,
.calendar-product-presentation .calendar-event-card--grid .ev-title-clip,
.calendar-product-presentation .calendar-event-card--grid .ev-title-text,
.calendar-product-presentation .calendar-event-card--grid .ev-desc-clip,
.calendar-product-presentation .calendar-event-card--grid .ev-desc-text{
  min-width: 0;
  height: var(--sotido-recipe-calendar-event-card-text-band-height);
  padding: 0;
  color: var(--sotido-recipe-calendar-event-card-text);
  font-size: var(--sotido-recipe-calendar-event-card-title-text-size);
  font-weight: var(--sotido-recipe-calendar-event-card-title-text-weight);
  line-height: var(--sotido-recipe-calendar-event-card-text-band-height);
  text-overflow: clip;
  white-space: nowrap;
}

.calendar-product-presentation
  .calendar-event-segment--list > .calendar-event-card--list{
  min-height: var(--sotido-recipe-calendar-event-card-compact-row-height);
  gap: var(--sotido-recipe-calendar-event-card-text-gap);
}

.calendar-product-presentation
  .calendar-event-segment--list > .calendar-event-card--list:not(.tail-item){
  display: block;
  height: var(--sotido-recipe-calendar-event-card-compact-row-height);
  line-height: var(--sotido-recipe-calendar-event-card-text-band-height);
  white-space: normal;
}

.calendar-product-presentation
  .calendar-event-segment--list > .calendar-event-card--list.tail-item{
  height: var(--sotido-recipe-calendar-event-card-compact-tail-row-height);
  min-height: var(--sotido-recipe-calendar-event-card-compact-tail-row-height);
  align-items: stretch;
}

.calendar-product-presentation .calendar-event-card--list .ev-timewrap{
  position: relative;
  z-index: 2;
  float: left;
  display: block;
  height: auto;
  font-variant-numeric: tabular-nums;
}

.calendar-product-presentation .calendar-event-card--list .ev-timechip{
  display: block;
  height: var(--sotido-recipe-calendar-event-card-text-band-height);
  color: var(--sotido-recipe-calendar-event-card-text);
  font-size: var(--sotido-recipe-calendar-event-card-title-text-size);
  font-weight: var(--sotido-recipe-calendar-event-card-title-text-weight);
  line-height: var(--sotido-recipe-calendar-event-card-text-band-height);
}

.calendar-product-presentation .calendar-event-card--list .ev-timechip-end,
.calendar-product-presentation .calendar-event-card--list .ev-desc-text{
  color: var(--sotido-recipe-calendar-event-card-end-time-text);
}

.calendar-product-presentation .calendar-event-card--list .ev-text-pair{
  position: relative;
  z-index: 2;
  min-width: 0;
}

.calendar-product-presentation .calendar-event-card--list .ev-title-clip,
.calendar-product-presentation .calendar-event-card--list .ev-desc-clip{
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.calendar-product-presentation .calendar-event-card--list .ev-title-text,
.calendar-product-presentation .calendar-event-card--list .ev-desc-text{
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--sotido-recipe-calendar-event-card-title-text-size);
  font-weight: var(--sotido-recipe-calendar-event-card-title-text-weight);
  line-height: var(--sotido-recipe-calendar-event-card-text-band-height);
  text-overflow: clip;
}

.calendar-product-presentation .calendar-event-card--list .ev-title-text{
  padding-inline-start: var(--sotido-recipe-calendar-event-card-text-gap);
}

.calendar-product-presentation .calendar-event-card--list .ev-desc-text{
  font-size: var(--sotido-recipe-calendar-event-card-description-text-size);
  font-weight: var(--sotido-recipe-calendar-event-card-description-text-weight);
  white-space: normal;
  overflow-wrap: anywhere;
}

.calendar-product-presentation.calendar-identity-header{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: var(--sotido-space-sm);
  margin: var(--sotido-space-sm);
  padding: var(--sotido-space-md);
  border-radius: var(--sotido-radius-card);
  background: var(--sotido-recipe-backdrop-chrome-surface);
  color: var(--sotido-theme-text-primary);
  box-shadow: var(--sotido-shadow-surface);
}

.calendar-product-presentation .calendar-identity-header-avatar{
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--sotido-radius-pill);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--calendar-identity-color, var(--sotido-theme-accent)) 72%, var(--sotido-theme-surface-highest)), var(--calendar-identity-color, var(--sotido-theme-accent)));
  color: var(--sotido-theme-primary-accent-text);
  font-size: var(--sotido-type-title);
  font-weight: var(--sotido-font-weight-bold);
  line-height: 1;
}

.calendar-product-presentation .calendar-identity-header-icon{
  display: block;
  width: 24px;
  height: 24px;
}

.calendar-product-presentation .calendar-identity-header-copy{
  display: grid;
  min-width: 0;
  gap: var(--sotido-space-xxs);
}

.calendar-product-presentation .calendar-identity-header-title,
.calendar-product-presentation .calendar-identity-header-summary{
  min-width: 0;
  margin: 0;
}

.calendar-product-presentation .calendar-identity-header-title{
  font-size: var(--sotido-type-title);
  font-weight: var(--sotido-font-weight-bold);
  line-height: 1.2;
}

.calendar-product-presentation .calendar-identity-header-summary{
  color: var(--sotido-theme-text-secondary);
  font-size: var(--sotido-type-caption);
  line-height: 1.4;
}

.calendar-product-presentation.calendar-view-mode-switcher{
  width: min(100%, var(--sotido-recipe-segmented-control-view-max-width));
  justify-self: start;
  margin-inline: 0 auto;
}

.calendar-product-presentation.calendar-view-mode-switcher
  > .calendar-view-switcher-btn{
  transition:
    background-color var(--sotido-motion-standard) ease,
    color var(--sotido-motion-standard) ease,
    transform var(--sotido-motion-standard) ease,
    box-shadow var(--sotido-motion-standard) ease;
}

.calendar-product-presentation .calendar-view-switcher-icon{
  display: block;
  width: 22px;
  height: 22px;
  margin: auto;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  pointer-events: none;
}

.calendar-product-presentation .calendar-view-switcher-icon--list{
  -webkit-mask-image: url('/site-assets/1b1a5b937c6a9080.svg');
  mask-image: url('/site-assets/1b1a5b937c6a9080.svg');
}

.calendar-product-presentation .calendar-view-switcher-icon--grid{
  -webkit-mask-image: url('/site-assets/1e690c031ecfa747.svg');
  mask-image: url('/site-assets/1e690c031ecfa747.svg');
}

.calendar-product-presentation.calendar-layer-list{
  min-width: 0;
  padding: var(--sotido-space-md);
  border-radius: var(--sotido-radius-card);
  background: var(--sotido-recipe-card-surface-raised-fill);
  box-shadow: var(--sotido-shadow-surface);
}

.calendar-product-presentation .calendar-layer-list-heading{
  margin: 0 0 var(--sotido-space-sm);
  color: var(--sotido-theme-text-primary);
  font-size: var(--sotido-type-body);
  font-weight: var(--sotido-font-weight-semibold);
}

.calendar-product-presentation .calendar-layer-list-items{
  display: grid;
  gap: var(--sotido-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-product-presentation.calendar-layer-list--inline .calendar-layer-list-items{
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.calendar-product-presentation.calendar-layer-list--strip{
  padding: var(--sotido-space-xs) var(--sotido-space-sm);
  border-radius: var(--sotido-radius-card);
  background: var(--sotido-recipe-backdrop-chrome-surface);
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-heading{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-items{
  display: flex;
  gap: var(--sotido-space-xs);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-items::-webkit-scrollbar{
  display: none;
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-item{
  width: 68px;
  flex: 0 0 68px;
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-button{
  display: flex;
  min-height: 58px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  padding: 3px;
  border: 0;
  border-radius: var(--sotido-radius-compact);
  text-align: center;
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-button.is-active{
  background: transparent;
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-swatch{
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid transparent;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--calendar-layer-color, var(--sotido-theme-accent)) 70%, var(--sotido-theme-surface-highest)), var(--calendar-layer-color, var(--sotido-theme-accent)));
  color: var(--sotido-theme-primary-accent-text);
  box-shadow: none;
  font-size: var(--sotido-type-caption);
  font-weight: var(--sotido-font-weight-bold);
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-button.is-active .calendar-layer-list-swatch{
  border-color: var(--sotido-theme-surface-chrome);
  box-shadow: 0 0 0 2px var(--calendar-layer-color, var(--sotido-theme-accent));
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-copy{
  display: block;
  width: 100%;
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-title{
  display: block;
  overflow: hidden;
  font-size: var(--sotido-type-micro);
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-subtitle,
.calendar-product-presentation.calendar-layer-list--strip .calendar-layer-list-kind{
  display: none !important;
}

.calendar-product-presentation .calendar-layer-list-button{
  appearance: none;
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--sotido-space-sm);
  align-items: center;
  padding: var(--sotido-space-sm);
  border: 1px solid transparent;
  border-radius: var(--sotido-radius-compact);
  background: transparent;
  color: var(--sotido-theme-text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.calendar-product-presentation .calendar-layer-list-button.is-active{
  border-color: color-mix(in srgb, var(--calendar-layer-color, var(--sotido-theme-accent)) 48%, transparent);
  background: color-mix(in srgb, var(--calendar-layer-color, var(--sotido-theme-accent)) 14%, transparent);
}

.calendar-product-presentation .calendar-layer-list-button:focus-visible{
  outline: 2px solid var(--sotido-theme-accent);
  outline-offset: 1px;
}

.calendar-product-presentation .calendar-layer-list-swatch{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--calendar-layer-color, var(--sotido-theme-accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--calendar-layer-color, var(--sotido-theme-accent)) 24%, transparent);
}

.calendar-product-presentation .calendar-layer-list-copy{
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sotido-space-xs);
}

.calendar-product-presentation .calendar-layer-list-title,
.calendar-product-presentation .calendar-layer-list-subtitle{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-product-presentation .calendar-layer-list-title{
  font-weight: var(--sotido-font-weight-medium);
}

.calendar-product-presentation .calendar-layer-list-subtitle,
.calendar-product-presentation .calendar-layer-list-kind{
  color: var(--sotido-theme-text-secondary);
  font-size: var(--sotido-type-caption);
}

.calendar-product-presentation .calendar-layer-list-subtitle{
  grid-column: 1 / -1;
}

.calendar-product-presentation.is-calendar-view-transitioning,
.calendar-product-presentation .is-calendar-view-transitioning{
  overflow-anchor: none;
}

.calendar-product-presentation [data-calendar-morphing="1"]{
  transform-origin: top left;
  backface-visibility: hidden;
}

.calendar-product-presentation .calendar-event-card--grid .ev-title-clip,
.calendar-product-presentation .calendar-event-card--grid .ev-title-text,
.calendar-product-presentation .calendar-event-card--grid .ev-desc-clip,
.calendar-product-presentation .calendar-event-card--grid .ev-desc-text{
  overflow: hidden;
  text-overflow: clip;
}

.calendar-product-presentation .calendar-event-card--grid .ev-timewrap .ev-timechip{
  width: 100%;
  margin: 0;
  align-self: flex-start;
  text-align: start;
  font-variant-numeric: tabular-nums;
}

.calendar-product-presentation .calendar-event-card--grid .ev-timewrap .ev-timechip-start{
  color: var(--sotido-recipe-calendar-event-card-start-time-text);
}

.calendar-product-presentation .calendar-event-card--grid .ev-timewrap .ev-timechip-end,
.calendar-product-presentation .calendar-event-card--grid .ev-desc-text{
  color: var(--sotido-recipe-calendar-event-card-end-time-text);
}

.calendar-product-presentation .ev-timechip-adaptive{
  display: none;
}

/* List and Grid clock digits keep the normal event-card type scale, while the
   localized day period stays visually secondary at every card width. The
   complete label remains in the accessibility tree. */
.calendar-product-presentation
  .calendar-event-card--list
  .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-accessible,
.calendar-product-presentation
  .calendar-event-card--grid
  .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-accessible{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.calendar-product-presentation
  .calendar-event-card--list
  .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-adaptive,
.calendar-product-presentation
  .calendar-event-card--grid
  .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-adaptive{
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  font-size: var(--sotido-recipe-calendar-event-card-title-text-size);
}

.calendar-product-presentation
  .calendar-event-card--list
  .ev-timechip[data-calendar-time-period-position="suffix"] .ev-timechip-day-period,
.calendar-product-presentation
  .calendar-event-card--grid
  .ev-timechip[data-calendar-time-period-position="suffix"] .ev-timechip-day-period{
  margin-inline-start: 1px;
  font-size: var(--sotido-recipe-calendar-event-card-day-period-text-size);
}

.calendar-product-presentation
  .calendar-event-card--list
  .ev-timechip[data-calendar-time-period-position="prefix"] .ev-timechip-day-period,
.calendar-product-presentation
  .calendar-event-card--grid
  .ev-timechip[data-calendar-time-period-position="prefix"] .ev-timechip-day-period{
  order: -1;
  margin-inline-end: 1px;
  font-size: var(--sotido-recipe-calendar-event-card-day-period-text-size);
}

.calendar-product-presentation
  .calendar-event-card--list
  .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-main-compact,
.calendar-product-presentation
  .calendar-event-card--grid
  .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-main-compact{
  display: none;
}

/* The 144px threshold mirrors the calendarEventCard recipe metric. A narrow
   Grid cell gives each retained band one clear job: schedule first, title
   second. List and wide Grid cards keep their existing geometry. */
@container (max-width: 144px){
  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item) .ev-timewrap{
    inset: 0 0 auto;
    width: 100%;
    height: var(--sotido-recipe-calendar-event-card-text-band-height);
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    overflow: hidden;
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)
    .ev-timechip-start:not([hidden]) + .ev-timechip-end:not([hidden])::before{
    content: "-";
    margin-inline: 1px;
    font-size: var(--sotido-recipe-calendar-event-card-day-period-text-size);
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item) .ev-timewrap .ev-timechip{
    width: auto;
    max-width: none;
    flex: 0 1 auto;
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)
    .ev-timechip[data-calendar-time-parts="true"]{
    min-width: 0;
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item) .ev-text-pair{
    inset: var(--sotido-recipe-calendar-event-card-text-band-height) 0 auto;
    height: var(--sotido-recipe-calendar-event-card-text-band-height);
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item) .ev-desc-clip{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}

/* Zero minutes are the first optional visual detail. The complete localized
   label remains as the timechip text and accessible name. */
@container (max-width: 72px){
  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)[data-calendar-time-format="12-hour"]
    .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-main{
    display: none;
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)[data-calendar-time-format="12-hour"]
    .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-main-compact{
    display: inline;
  }
}

/* The second step uses the recipe caption size for the clock digits while the
   day period remains the smaller micro size. */
@container (max-width: 86px){
  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)
    .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-adaptive{
    font-size: var(--sotido-recipe-calendar-event-card-tight-time-text-size);
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)
    [data-calendar-time-all-zero-minutes="true"][data-calendar-time-same-day-period="true"]
    .ev-timechip-start .ev-timechip-day-period{
    display: none;
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)[data-calendar-time-format="12-hour"]
    [data-calendar-time-all-zero-minutes="false"] .ev-timechip-end{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}

/* Non-zero 24-hour ranges remain shorter, so they retain both labels longer. */
@container (max-width: 68px){
  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)[data-calendar-time-format="24-hour"]
    .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-main{
    display: none;
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)[data-calendar-time-format="24-hour"]
    .ev-timechip[data-calendar-time-parts="true"] .ev-timechip-main-compact{
    display: inline;
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)[data-calendar-time-format="24-hour"]
    [data-calendar-time-all-zero-minutes="false"] .ev-timechip-end{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}

/* Below the minimum useful pair width the complete start time wins even when
   both labels would otherwise compact to hours only. */
@container (max-width: 44px){
  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item)
    [data-calendar-time-all-zero-minutes="true"][data-calendar-time-same-day-period="true"]
    .ev-timechip-start .ev-timechip-day-period{
    display: inline;
  }

  .calendar-product-presentation
    .calendar-event-card--grid:not(.tail-item) .ev-timechip-end{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}

.calendar-product-presentation .calendar-event-card--grid .ev-title-clip,
.calendar-product-presentation .calendar-event-card--grid .ev-desc-clip{
  max-width: 100%;
}

.calendar-product-presentation .calendar-event-card--grid .ev-bottom-meta{
  position: absolute;
  right: 2px;
  bottom: 0;
  z-index: 7;
  display: flex;
  width: auto;
  height: 9px;
  align-items: center;
  justify-content: flex-end;
  color: var(--sotido-theme-text-primary);
  font-size: var(--sotido-type-micro);
  line-height: 9px;
  pointer-events: none;
}

.calendar-product-presentation .calendar-event-card--grid .ev-badge-group{
  position: absolute;
  inset: 1px var(--calendar-grid-source-right, 1px) 1px auto;
  z-index: 6;
  display: flex;
  width: 16px;
  max-width: 16px;
  height: auto;
  pointer-events: none;
}

.calendar-product-presentation .calendar-event-card--grid .ev-chat-avatar-stack{
  position: absolute;
  inset: 2px auto 2px 2px;
  width: var(--ev-chat-avatar-reserve, 0px);
  height: auto;
}

.calendar-product-presentation .calendar-event-card--grid.has-chat-avatar-stack .ev-timewrap{
  inset-inline-start: var(--ev-chat-avatar-reserve, 0px);
}

.calendar-product-presentation .calendar-event-card--grid.has-chat-avatar-stack .ev-text-pair{
  inset-inline-start:
    calc(
      var(--calendar-event-time-column-width) +
      var(--sotido-recipe-calendar-event-card-text-gap) +
      var(--ev-chat-avatar-reserve, 0px)
    );
}

@container (max-width: 144px){
  .calendar-product-presentation
    .calendar-event-card--grid.has-chat-avatar-stack:not(.tail-item) .ev-timewrap{
    width: calc(100% - var(--ev-chat-avatar-reserve, 0px));
  }

  .calendar-product-presentation
    .calendar-event-card--grid.has-chat-avatar-stack:not(.tail-item) .ev-text-pair{
    inset-inline-start: var(--ev-chat-avatar-reserve, 0px);
  }
}

@container (max-width: 110px){
  .calendar-product-presentation .calendar-event-card--grid .ev-badge-group{
    display: none !important;
  }
}

.calendar-product-presentation .calendar-event-card--grid .ev-desc-text{
  font-size: var(--sotido-recipe-calendar-event-card-description-text-size);
  font-weight: var(--sotido-recipe-calendar-event-card-description-text-weight);
}

.calendar-product-presentation .calendar-event-card:focus-visible{
  outline: 2px solid var(--sotido-theme-accent);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce){
  .calendar-product-presentation .calendar-month-header-label,
  .calendar-product-presentation .calendar-date-header,
  .calendar-product-presentation .calendar-view-switcher-btn{
    transition: none;
  }

  .calendar-product-presentation [data-calendar-morphing="1"]{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

:root {
  --public-page-line: color-mix(in srgb, var(--sotido-theme-text-primary) 16%, transparent);
  --public-page-line-strong: color-mix(in srgb, var(--sotido-theme-text-primary) 28%, transparent);
  --public-page-subtle-surface: color-mix(in srgb, var(--sotido-theme-text-primary) 3.5%, transparent);
  --public-page-hover-surface: color-mix(in srgb, var(--sotido-theme-text-primary) 7%, transparent);
  --public-page-panel-surface: color-mix(in srgb, var(--sotido-theme-surface) 84%, transparent);
  --public-page-ambient-accent: color-mix(in srgb, var(--sotido-theme-accent) 10%, transparent);
  --public-page-readable-accent: color-mix(in srgb, var(--sotido-theme-accent) 32%, var(--sotido-theme-text-primary));
  --public-page-readable-danger: color-mix(in srgb, var(--sotido-theme-destructive-accent) 42%, var(--sotido-theme-text-primary));
  --public-page-readable-warning: color-mix(in srgb, var(--sotido-theme-warning-accent) 32%, var(--sotido-theme-text-primary));
  --public-page-max-width: 1180px;
  --public-page-reading-width: 760px;
  --sotido-media-gallery-accent: var(--sotido-theme-accent);
  color-scheme: dark light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: var(--sotido-space-xl);
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  min-width: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

body {
  position: relative;
  min-height: 100vh;
  color: var(--sotido-theme-text-primary);
  background:
    radial-gradient(circle at 84% 8%, var(--public-page-ambient-accent), transparent 34rem),
    radial-gradient(circle at 4% 34%, color-mix(in srgb, var(--sotido-theme-success-accent) 6%, transparent), transparent 30rem),
    linear-gradient(180deg, color-mix(in srgb, var(--sotido-theme-background) 94%, var(--sotido-theme-surface)), var(--sotido-theme-background));
  font-size: 16px;
  line-height: 1.65;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(var(--public-page-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--public-page-line) 1px, transparent 1px);
  background-size: 56px 56px;
  content: "";
  -webkit-mask-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sotido-theme-text-primary) 34%, transparent),
    transparent 72%
  );
  mask-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sotido-theme-text-primary) 34%, transparent),
    transparent 72%
  );
  opacity: 0.12;
  pointer-events: none;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--sotido-theme-accent);
  outline-offset: 3px;
  border-radius: var(--sotido-radius-compact);
}

.wrap {
  position: relative;
  z-index: 1;
  width: min(100%, var(--public-page-max-width));
  margin: 0 auto;
  padding: 0 var(--sotido-space-xl) var(--sotido-space-xxl);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--sotido-space-sm);
  left: var(--sotido-space-sm);
  min-height: var(--sotido-space-touch-target);
  padding: 10px var(--sotido-space-md);
  border-radius: var(--sotido-radius-compact);
  background: var(--sotido-theme-accent);
  color: var(--sotido-theme-primary-accent-text);
  font-weight: var(--sotido-font-weight-semibold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--sotido-space-xl)));
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sotido-space-lg);
  min-height: 56px;
  padding-right: clamp(132px, 15vw, 164px);
  border-bottom: 1px solid var(--public-page-line);
  background: color-mix(in srgb, var(--sotido-theme-background) 58%, transparent);
}

:is(.site-header--about, .site-header--game) { padding-right: 240px; }

@media (max-width: 680px) {
  .site-header:is(.site-header--about, .site-header--game) { padding-right: 184px; }
  :is(.site-header--about, .site-header--game) .site-brand > span {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
}

.site-brand,
.site-nav a,
.lang-switcher__english,
.lang-switcher__current,
.lang-switcher__trigger,
.lang-link,
.site-header-download,
.site-header-primary {
  display: inline-flex;
  align-items: center;
  min-height: var(--sotido-space-touch-target);
}

.site-brand {
  gap: var(--sotido-space-sm);
  color: var(--sotido-theme-text-primary);
  font-size: 20px;
  font-weight: var(--sotido-font-weight-bold);
  text-decoration: none;
}

.site-brand-mark {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sotido-space-md);
  min-width: 0;
  overflow: visible;
}

.site-nav a {
  position: relative;
  color: var(--sotido-theme-text-secondary);
  font-size: 14px;
  font-weight: var(--sotido-font-weight-medium);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--sotido-theme-text-primary);
}

.site-nav a[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: var(--sotido-radius-pill);
  background: var(--sotido-theme-accent);
  content: "";
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.lang-switcher {
  position: relative;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-pill);
  background: var(--sotido-theme-surface-soft);
}

.site-nav .lang-switcher__english,
.site-nav .lang-switcher__current,
.site-nav .lang-switcher__trigger {
  justify-content: center;
  min-width: 38px;
  min-height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--sotido-radius-pill);
  color: var(--sotido-theme-text-secondary);
  background: transparent;
  font-size: 12px;
  font-weight: var(--sotido-font-weight-semibold);
  text-decoration: none;
}

.site-nav .lang-switcher__english.is-active,
.site-nav .lang-switcher__current.is-active,
.lang-switcher__menu[open] .lang-switcher__trigger {
  color: var(--sotido-theme-primary-accent-text);
  background: var(--sotido-theme-accent);
}

.lang-switcher__menu {
  position: relative;
}

.lang-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  cursor: pointer;
}

.lang-switcher__trigger::-webkit-details-marker {
  display: none;
}

.lang-switcher__language-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: url('/site-assets/ea7f83cf5b639658.svg') center / contain no-repeat;
  mask: url('/site-assets/ea7f83cf5b639658.svg') center / contain no-repeat;
}

.lang-switcher__options {
  position: absolute;
  z-index: 70;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: min(260px, calc(100vw - var(--sotido-space-xl)));
  max-height: min(420px, calc(100vh - 112px));
  padding: 4px;
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-compact);
  background: var(--sotido-theme-surface-chrome);
  box-shadow: var(--sotido-shadow-surface);
  overflow-y: auto;
}

.site-nav .lang-switcher__options .lang-link {
  justify-content: flex-start;
  min-height: 34px;
  padding: 0 var(--sotido-space-sm);
  border-radius: var(--sotido-radius-compact);
  line-height: 1.25;
  text-align: start;
}

.site-header-download,
.site-header-primary,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sotido-space-touch-target);
  min-width: 0;
  padding: 0 var(--sotido-space-md);
  border: 1px solid var(--sotido-theme-border);
  border-radius: var(--sotido-radius-pill);
  color: var(--sotido-theme-text-primary);
  background: var(--sotido-theme-surface-soft);
  font: inherit;
  font-weight: var(--sotido-font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--sotido-motion-fast), border-color var(--sotido-motion-fast);
}

.site-header-download {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  white-space: nowrap;
}

.site-header-primary,
.btn.primary {
  border-color: var(--sotido-theme-accent);
  color: var(--sotido-theme-primary-accent-text);
  background: var(--sotido-theme-accent);
}

.site-header-primary {
  position: fixed;
  z-index: 60;
  top: calc(max(8px, env(safe-area-inset-top)) + var(--public-site-header-height, 56px));
  right: max(12px, calc((100vw - var(--public-page-max-width)) / 2 + var(--sotido-space-xl)));
  min-height: 40px;
  box-shadow: var(--sotido-shadow-surface);
  transition: top var(--sotido-motion-fast) ease,
    background-color var(--sotido-motion-fast),
    border-color var(--sotido-motion-fast);
}

.site-header.is-page-scrolled .site-header-primary {
  top: max(8px, env(safe-area-inset-top));
}

.site-header-primary:hover,
.btn.primary:hover {
  border-color: color-mix(in srgb, var(--sotido-theme-accent) 84%, var(--sotido-theme-text-primary));
  background: color-mix(in srgb, var(--sotido-theme-accent) 84%, var(--sotido-theme-text-primary));
}

.site-header-download:hover,
.btn:not(.primary):hover,
.lang-link:hover {
  background: var(--public-page-hover-surface);
}

.public-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(460px, 1.26fr);
  align-items: center;
  gap: 56px;
  min-height: 660px;
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--public-page-line);
}

.public-page-intro--reference {
  grid-template-columns: minmax(0, var(--public-page-reading-width));
  min-height: 0;
  padding-bottom: var(--sotido-space-xxl);
}

/* Guides are editorial reading surfaces. They share public-page tokens while
   keeping the reading hierarchy separate from interactive calendar views. */
.guides-directory,
.guide-article {
  padding: clamp(48px, 8vw, 104px) 0 var(--sotido-space-xxl);
}

.guides-hero,
.guide-article__header {
  max-width: 900px;
  padding-bottom: clamp(36px, 6vw, 72px);
  border-bottom: 1px solid var(--public-page-line);
}

.guides-eyebrow {
  margin: 0 0 var(--sotido-space-md);
  color: var(--public-page-readable-accent);
  font-size: 13px;
  font-weight: var(--sotido-font-weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.guides-hero h1,
.guide-article__header h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(42px, 7vw, 76px);
  letter-spacing: -.055em;
  line-height: .98;
}

.guides-hero .sub,
.guide-article__header .sub {
  max-width: 720px;
  margin: var(--sotido-space-xl) 0 0;
  color: var(--sotido-theme-text-secondary);
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.45;
}

.guides-directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--sotido-space-lg);
  margin: clamp(32px, 5vw, 64px) 0;
}

.guide-card,
.guides-directory__notice {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--public-page-line-strong);
  border-radius: var(--sotido-radius-large);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--sotido-theme-accent) 7%, transparent), transparent 58%),
    var(--public-page-panel-surface);
}

.guide-card h2,
.guides-directory__notice h2 {
  margin: 0 0 var(--sotido-space-md);
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -.035em;
  line-height: 1.1;
}

.guide-card h2 a {
  text-decoration: none;
}

.guide-card h2 a:hover,
.guide-card__link:hover {
  color: var(--sotido-theme-accent);
}

.guide-card__meta,
.guide-byline {
  color: var(--sotido-theme-text-secondary);
  font-size: 14px;
}

.guide-card__link {
  display: inline-flex;
  gap: 8px;
  margin-top: var(--sotido-space-md);
  color: var(--sotido-theme-text-primary);
  font-weight: var(--sotido-font-weight-semibold);
  text-decoration: none;
}

.guides-directory__notice {
  max-width: 760px;
}

.guides-directory__notice .btn {
  margin-top: var(--sotido-space-sm);
}

.guide-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 48px);
  color: var(--sotido-theme-text-secondary);
  font-size: 14px;
}

.guide-breadcrumbs a {
  color: inherit;
}

.guide-byline {
  margin: var(--sotido-space-xl) 0 0;
}

.guide-article__layout {
  display: grid;
  grid-template-columns: minmax(180px, .32fr) minmax(0, var(--public-page-reading-width));
  justify-content: space-between;
  gap: clamp(36px, 7vw, 112px);
  padding-top: clamp(36px, 6vw, 72px);
}

.guide-toc {
  position: sticky;
  top: calc(var(--public-site-header-height, 56px) + var(--sotido-space-xl));
  align-self: start;
  padding: var(--sotido-space-md) 0;
  border-top: 1px solid var(--public-page-line);
  border-bottom: 1px solid var(--public-page-line);
  color: var(--sotido-theme-text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.guide-toc p {
  margin: 0 0 var(--sotido-space-sm);
  color: var(--sotido-theme-text-primary);
  font-weight: var(--sotido-font-weight-bold);
}

.guide-toc ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.guide-toc a {
  text-decoration: none;
}

.guide-toc a:hover {
  color: var(--sotido-theme-accent);
}

.guide-article__body {
  min-width: 0;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.72;
}

.guide-article__body > :first-child {
  margin-top: 0;
}

.guide-article__body h2 {
  margin: clamp(44px, 7vw, 80px) 0 var(--sotido-space-lg);
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.04em;
  line-height: 1.08;
}

.guide-article__body h3 {
  margin: 0 0 var(--sotido-space-sm);
  font-size: 20px;
}

.guide-article__body a {
  color: var(--sotido-theme-text-primary);
  text-decoration-color: var(--sotido-theme-accent);
  text-decoration-thickness: 2px;
}

.guide-figure {
  margin: clamp(28px, 5vw, 52px) 0;
  overflow: hidden;
  border: 1px solid var(--public-page-line-strong);
  border-radius: var(--sotido-radius-large);
  background: var(--public-page-panel-surface);
}

.guide-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.guide-figure figcaption {
  padding: var(--sotido-space-md) var(--sotido-space-lg);
  color: var(--sotido-theme-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.guide-callout {
  margin: clamp(28px, 5vw, 48px) 0;
  padding: var(--sotido-space-xl);
  border-left: 3px solid var(--sotido-theme-accent);
  border-radius: 0 var(--sotido-radius-large) var(--sotido-radius-large) 0;
  background: color-mix(in srgb, var(--sotido-theme-accent) 9%, var(--public-page-panel-surface));
}

.guide-callout p {
  margin: 0;
}

.guide-steps {
  display: grid;
  gap: var(--sotido-space-md);
  margin: var(--sotido-space-xl) 0;
  padding: 0;
  list-style-position: inside;
}

.guide-steps li {
  padding: var(--sotido-space-md) var(--sotido-space-lg);
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-medium);
  background: var(--public-page-subtle-surface);
}

.guide-faq {
  margin-top: clamp(48px, 8vw, 96px);
  padding-top: var(--sotido-space-lg);
  border-top: 1px solid var(--public-page-line);
}

.guide-faq details {
  padding: var(--sotido-space-md) 0;
  border-bottom: 1px solid var(--public-page-line);
}

.guide-faq summary {
  cursor: pointer;
  color: var(--sotido-theme-text-primary);
  font-weight: var(--sotido-font-weight-semibold);
}

.guide-faq p {
  margin-bottom: 0;
  color: var(--sotido-theme-text-secondary);
}

.guide-article__action {
  margin: clamp(36px, 6vw, 72px) 0 0;
}

@media (max-width: 900px) {
  .guide-article__layout {
    grid-template-columns: 1fr;
    gap: var(--sotido-space-xl);
  }

  .guide-toc {
    position: static;
  }
}

@media (max-width: 640px) {
  .guides-directory,
  .guide-article {
    padding-top: var(--sotido-space-xl);
  }

  .guide-steps li {
    padding-left: var(--sotido-space-lg);
  }
}

.hero {
  min-width: 0;
}

.public-calendar-for-two-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 0 var(--sotido-space-xl);
  color: var(--sotido-theme-text-primary);
  line-height: 1;
}

.public-calendar-for-two-lockup__mark {
  display: block;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
}

.public-calendar-for-two-lockup__name {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: var(--sotido-font-weight-bold);
  letter-spacing: -0.045em;
}

.public-calendar-for-two-lockup__feature {
  margin-left: 2px;
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--sotido-theme-accent) 52%, var(--public-page-line-strong));
  color: var(--public-page-readable-accent);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: var(--sotido-font-weight-semibold);
  letter-spacing: -0.035em;
}

.public-calendar-for-two-hub__chapter {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 7vw, 96px);
}

.public-calendar-for-two-hub__chapter-heading {
  align-self: start;
}

.public-calendar-for-two-hub__chapter-heading h2 {
  max-width: 430px;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.public-calendar-for-two-hub__chapter-body > :first-child {
  margin-top: 0;
}

.public-calendar-for-two-hub__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--sotido-space-md);
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
  font-weight: var(--sotido-font-weight-semibold);
}

.public-calendar-for-two-hub__status::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sotido-theme-text-secondary);
  content: "";
}

.public-calendar-for-two-hub__status.is-available::before {
  background: var(--sotido-theme-success-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sotido-theme-success-accent) 14%, transparent);
}

.public-calendar-for-two-hub__status.is-development::before {
  background: var(--sotido-theme-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sotido-theme-accent) 14%, transparent);
}

.public-calendar-for-two-hub__steps {
  display: grid;
  gap: 0;
  margin: var(--sotido-space-xl) 0;
  padding: 0;
  list-style: none;
  counter-reset: calendar for two-step;
}

.public-calendar-for-two-hub__steps li {
  position: relative;
  min-height: 72px;
  padding: 0 0 var(--sotido-space-lg) 54px;
  color: var(--sotido-theme-text-secondary);
  counter-increment: calendar for two-step;
}

.public-calendar-for-two-hub__steps li::before {
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--public-page-line-strong);
  border-radius: 50%;
  background: var(--sotido-theme-surface);
  color: var(--sotido-theme-text-primary);
  content: counter(calendar for two-step, decimal-leading-zero);
  font-size: 11px;
  font-weight: var(--sotido-font-weight-bold);
}

.public-calendar-for-two-hub__steps li:not(:last-child)::after {
  position: absolute;
  top: 37px;
  bottom: 0;
  left: 17px;
  width: 1px;
  background: var(--public-page-line-strong);
  content: "";
}

.public-calendar-for-two-hub__steps strong {
  color: var(--sotido-theme-text-primary);
}

.public-calendar-for-two-hub__chapter--space {
  position: relative;
}

.public-calendar-for-two-hub__chapter--space::before {
  position: absolute;
  z-index: -1;
  inset: 18px -24px;
  border-radius: var(--sotido-radius-large);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sotido-theme-accent) 8%, transparent), transparent 56%);
  content: "";
}

.public-space-call-venues {
  display: grid;
  margin: var(--sotido-space-xl) 0;
  border-top: 1px solid var(--public-page-line);
}

.public-space-call-venues article {
  display: grid;
  grid-template-columns: minmax(128px, 0.38fr) minmax(0, 1fr);
  gap: var(--sotido-space-lg);
  padding: var(--sotido-space-lg) 0;
  border-bottom: 1px solid var(--public-page-line);
}

.public-space-call-venues h3,
.public-space-call-venues p {
  margin: 0;
}

.public-space-call-venues p {
  color: var(--sotido-theme-text-secondary);
}

.public-calendar-for-two-hub__boundary {
  padding: var(--sotido-space-lg);
  border-left: 3px solid var(--sotido-theme-accent);
  background: color-mix(in srgb, var(--sotido-theme-accent) 7%, transparent);
}

main > .section.public-calendar-for-two-hub__chapter {
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  column-gap: clamp(32px, 7vw, 96px);
}

main > .section.public-calendar-for-two-hub__chapter > .public-calendar-for-two-hub__chapter-heading {
  grid-column: 1;
  grid-row: 1;
}

main > .section.public-calendar-for-two-hub__chapter > .public-calendar-for-two-hub__chapter-body {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 760px) {
  main > .section.public-calendar-for-two-hub__chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sotido-space-lg);
  }

  main > .section.public-calendar-for-two-hub__chapter > .public-calendar-for-two-hub__chapter-heading,
  main > .section.public-calendar-for-two-hub__chapter > .public-calendar-for-two-hub__chapter-body {
    grid-column: 1;
    grid-row: auto;
  }

  .public-space-call-venues article {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sotido-space-xs);
  }

  .public-calendar-for-two-hub__chapter--space::before {
    right: -12px;
    left: -12px;
  }
}

h1,
h2,
h3,
p,
ul,
ol {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  color: var(--sotido-theme-text-primary);
  letter-spacing: 0;
}

h1 {
  max-width: 720px;
  margin: 0 0 var(--sotido-space-lg);
  font-size: clamp(46px, 5.2vw, 68px);
  font-weight: var(--sotido-font-weight-semibold);
  letter-spacing: -0.04em;
  line-height: 1;
}

h2 {
  margin: 0 0 var(--sotido-space-md);
  font-size: 25px;
  font-weight: var(--sotido-font-weight-semibold);
  line-height: 1.24;
}

h3 {
  margin: 0 0 var(--sotido-space-sm);
  font-size: 18px;
  font-weight: var(--sotido-font-weight-semibold);
  line-height: 1.35;
}

p {
  max-width: var(--public-page-reading-width);
  margin: 0 0 var(--sotido-space-md);
  color: var(--sotido-theme-text-secondary);
}

ul,
ol {
  max-width: var(--public-page-reading-width);
  margin: 0;
  padding-left: 20px;
  color: var(--sotido-theme-text-secondary);
}

li {
  margin: var(--sotido-space-xs) 0;
}

.sub {
  max-width: 660px;
  margin: 0;
  font-size: 19px;
  line-height: 1.62;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sotido-space-sm);
  margin-top: var(--sotido-space-xl);
}

.product-proof {
  --public-proof-accent: var(--sotido-theme-accent);
  --public-proof-readable-accent: color-mix(in srgb, var(--public-proof-accent) 32%, var(--sotido-theme-text-primary));
  --public-proof-wash: color-mix(in srgb, var(--public-proof-accent) 13%, transparent);
  position: relative;
  display: grid;
  gap: var(--sotido-space-lg);
  min-width: 0;
  padding: var(--sotido-space-md);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--public-proof-accent) 32%, var(--public-page-line));
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 0, var(--public-proof-wash), transparent 46%),
    var(--public-page-panel-surface);
  box-shadow: 0 28px 90px color-mix(in srgb, var(--sotido-theme-background) 62%, transparent);
}

.public-about-product {
  display: grid;
  gap: var(--sotido-space-sm);
  min-width: 0;
}

.public-about-service {
  max-width: 900px;
  margin: 32px auto 16px;
  text-align: center;
}

.public-about-service h1 {
  font-size: clamp(32px, 4.4vw, 58px);
  text-wrap: balance;
}

.public-about-service .sub {
  max-width: 740px;
  margin-inline: auto;
}

.public-about-service-cover {
  width: min(100%, 960px);
  margin: 24px auto;
}

.public-about-service-cover__scene {
  position: relative;
  padding-bottom: 5%;
}

.public-about-service-cover__selfie {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sotido-radius-xlarge);
}

.public-about-service-cover__foreground {
  position: absolute;
  right: 3%;
  bottom: 0;
  width: 43%;
  padding: clamp(8px, 1.2vw, 14px);
  border-radius: var(--sotido-radius-xlarge);
  background: #12191f;
  box-shadow: 0 16px 40px #0006;
}

.public-about-service-cover__foreground::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 19.35%;
  bottom: 11.35%;
  width: 5.35%;
  aspect-ratio: 1;
  border: 1px solid #8cc4ff;
  border-radius: 50%;
  background: #f4f8ff url("/site-assets/1e6ea1c305be7f12.png") center / 78% no-repeat;
  box-shadow: 0 1px 3px #0007;
  pointer-events: none;
}

.public-about-service-cover__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #fff;
  font-size: clamp(24px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.1;
}

.public-about-service-cover__brand img {
  width: 1.35em;
  height: 1.35em;
}

.public-about-service-cover__calendar {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sotido-radius-medium);
}

.public-about-service-cover figcaption {
  margin-top: 20px;
  color: var(--sotido-theme-text-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 640px) {
  .public-about-service-cover__scene { padding-bottom: 0; }
  .public-about-service-cover__foreground {
    position: relative;
    right: auto;
    width: 76%;
    margin: -7% 4% 0 auto;
  }
}

.public-about-product__panel {
  scroll-margin-top: 88px;
}

.public-about-product__panel:focus {
  outline: none;
}

.public-about-product__panel .hero h2 {
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.public-about-mode-list {
  display: grid;
}

.public-about-mode {
  display: grid;
  grid-template-columns: 28px 100px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-medium);
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.public-about-mode:hover,
.public-about-mode.is-active,
.public-about-mode[aria-current="true"] {
  background: color-mix(in srgb, var(--sotido-theme-accent) 10%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--sotido-theme-accent) 10%, transparent);
}

.public-about-mode:focus-visible {
  outline: 2px solid var(--sotido-theme-accent);
  outline-offset: 6px;
}

.public-about-mode:last-child { border-bottom: 0; }
.public-about-mode p, .public-about-mode h3 { margin: 0; }
.public-about-mode__number { color: var(--public-page-readable-accent); }

.public-about-start {
  margin: 0;
  padding-inline-start: 24px;
}

.public-about-start li { padding: 0 0 14px 8px; }
.public-about-start li::marker { color: var(--public-page-readable-accent); font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .public-about-product.is-enhanced .public-about-product__panel:not([hidden]) {
    animation: public-about-reveal 220ms ease-out;
  }
  @keyframes public-about-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 680px) {
  .public-about-mode { grid-template-columns: 28px minmax(0, 1fr); }
  .public-about-mode p { grid-column: 2; }
  .public-about-service { margin-top: 12px; }
}

.public-about-product__switcher {
  display: grid;
  width: min(100%, 480px);
  margin: 0 auto;
  --sotido-recipe-segmented-control-active-fill: var(--sotido-theme-accent);
  --sotido-recipe-segmented-control-active-text: var(--sotido-theme-primary-accent-text);
  --sotido-recipe-segmented-control-submode-control-min-height: 44px;
  --sotido-recipe-segmented-control-submode-rail-radius: var(--sotido-radius-pill);
  --sotido-recipe-segmented-control-submode-active-radius: var(--sotido-radius-pill);
  --sotido-recipe-segmented-control-dense-label-size: var(--sotido-type-body);
}

.public-about-product__switcher > a {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.public-about-product__panel {
  min-width: 0;
}

.public-about-product__panel + .public-about-product__panel {
  margin-top: var(--sotido-space-xl);
}

.public-about-product.is-enhanced .public-about-product__panel + .public-about-product__panel {
  margin-top: 0;
}

.public-about-product__panel[hidden] {
  display: none;
}

.public-about-game {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(250px, 1.3fr);
  gap: clamp(20px, 3vw, 36px);
  min-height: 560px;
  padding: clamp(22px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sotido-theme-accent) 32%, var(--public-page-line-strong));
  border-radius: var(--sotido-radius-xlarge);
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--sotido-theme-accent) 22%, transparent), transparent 36%),
    color-mix(in srgb, var(--sotido-theme-surface) 88%, transparent);
  box-shadow: var(--sotido-shadow-surface);
}

.public-about-game__copy {
  position: relative;
  z-index: 2;
  align-self: center;
}

.public-about-game__eyebrow {
  margin-bottom: var(--sotido-space-xs);
  color: var(--public-page-readable-accent);
  font-size: 12px;
  font-weight: var(--sotido-font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.public-about-game h1,
.public-about-game h2 {
  max-width: 12ch;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.public-about-game__summary {
  color: var(--sotido-theme-text-primary);
  font-size: 17px;
  line-height: 1.5;
}

.public-about-game__points {
  display: grid;
  gap: 8px;
  margin: var(--sotido-space-lg) 0;
  padding: 0;
  list-style: none;
}

.public-about-game__points li {
  position: relative;
  margin: 0;
  padding-inline-start: 20px;
}

.public-about-game__points li::before {
  position: absolute;
  top: 0.67em;
  inset-inline-start: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sotido-theme-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--sotido-theme-accent) 68%, transparent);
  content: "";
}

.public-about-game__availability {
  font-size: 13px;
  line-height: 1.45;
}

.public-about-game__learn-more {
  margin-top: 16px;
  font-size: 14px;
}

.public-about-game__learn-more a {
  color: var(--sotido-theme-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Photos use the same scroll-snap gallery as Calendar evidence. */
.public-about-game__gallery {
  min-width: 0;
  align-self: center;
  --public-proof-accent: var(--sotido-theme-accent);
}

.public-about-game__gallery .product-preview-frame img {
  object-fit: contain;
}

.public-game-destination__truth {
  margin-top: var(--sotido-space-md);
  color: var(--sotido-theme-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.public-game-places > .hero {
  max-width: 780px;
  padding: 72px var(--sotido-space-md) 64px;
}

.public-game-places > .hero p:not(.eyebrow) {
  font-size: 18px;
  line-height: 1.6;
}

.public-game-content.public-game-places > .section.public-game-places__directory {
  display: block;
}

.public-game-places__directory > h2 {
  margin: 0 0 var(--sotido-space-xl);
  padding-bottom: var(--sotido-space-md);
  border-bottom: 1px solid var(--public-page-line);
}

.public-game-places__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--sotido-space-lg);
  max-width: none;
}

.public-game-place-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-card);
  background: var(--public-page-panel-surface);
  box-shadow: var(--sotido-shadow-surface);
}

.public-game-place-card__gallery {
  position: relative;
  min-width: 0;
  background: var(--public-page-subtle-surface);
}

.public-game-place-card__gallery .sotido-media-gallery__viewport {
  aspect-ratio: 16 / 9;
}

.public-game-place-card__slide {
  position: relative;
  display: block;
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.public-game-place-card__body {
  display: block;
  min-height: 154px;
  padding: var(--sotido-space-lg);
  color: inherit;
  text-decoration: none;
}

.public-game-place-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--public-page-subtle-surface);
}

.public-game-place-card__mode,
.public-game-place-card__status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--sotido-theme-text-primary) 18%, transparent);
  border-radius: var(--sotido-radius-pill);
  background: color-mix(in srgb, var(--public-page-panel-surface) 88%, transparent);
  color: var(--sotido-theme-text-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.public-game-place-card__mode {
  position: absolute;
  top: var(--sotido-space-sm);
  left: var(--sotido-space-sm);
  z-index: 2;
  backdrop-filter: blur(12px);
}

.public-game-place-card__status.is-online {
  border-color: color-mix(in srgb, #56d989 46%, transparent);
  background: color-mix(in srgb, #56d989 14%, var(--public-page-panel-surface));
}

.public-game-place-card__gallery .sotido-media-gallery__dots {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  gap: 2px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: var(--sotido-radius-pill);
  background: color-mix(in srgb, #0b1018 72%, transparent);
  backdrop-filter: blur(12px);
}

.public-game-place-card__gallery .sotido-media-gallery__dots a {
  width: 18px;
  height: 18px;
}

.public-game-place-card__gallery .sotido-media-gallery__dots a span {
  width: 5px;
  height: 5px;
  background: #fff9;
}

.public-game-place-card__gallery .sotido-media-gallery__dots a.is-active span,
.public-game-place-card__gallery .sotido-media-gallery__dots a[aria-current="true"] span {
  width: 14px;
  background: #fff;
}

.public-game-place-card h3 {
  margin: var(--sotido-space-sm) 0 var(--sotido-space-xs);
}

.public-game-place-card p {
  margin: 0;
  font-size: 14px;
}

.public-game-place-card__body:hover h3 {
  color: var(--public-page-readable-accent);
}

.product-proof[data-public-proof-placement="after_primary_reference"] {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: start;
  margin: 56px 0;
}

.product-proof[data-public-proof-placement="after_primary_reference"] .product-proof-boundary {
  grid-column: 1 / -1;
}

.product-proof > .product-proof-copy {
  order: 2;
}

.product-proof > :is(.product-preview-gallery, .public-calendar-demo) {
  order: 1;
}

.product-proof > .product-proof-boundary {
  order: 3;
}

.product-proof[data-public-proof-placement="after_primary_reference"] > .product-proof-copy {
  grid-column: 2;
  grid-row: 1;
}

.product-proof[data-public-proof-placement="after_primary_reference"] > :is(.product-preview-gallery, .public-calendar-demo) {
  grid-column: 1;
  grid-row: 1;
}

.product-proof[data-public-proof-placement="after_primary_reference"] > .product-proof-boundary {
  grid-row: 2;
}

.product-proof::before {
  position: absolute;
  top: 0;
  right: 18%;
  left: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--public-proof-accent), transparent);
  content: "";
}

.product-proof[data-public-proof-style="sessions"] {
  --public-proof-accent: var(--sotido-theme-accent);
}

.product-proof[data-public-proof-style="cadence"] {
  --public-proof-accent: var(--sotido-theme-warning-accent);
}

.product-proof[data-public-proof-style="shared"] {
  --public-proof-accent: var(--sotido-theme-success-accent);
}

.product-proof[data-public-proof-style="operations"] {
  --public-proof-accent: color-mix(in srgb, var(--sotido-theme-warning-accent) 72%, var(--sotido-theme-destructive-accent));
}

.product-proof[data-public-proof-style="projects"] {
  --public-proof-accent: color-mix(in srgb, var(--sotido-theme-accent) 64%, var(--sotido-theme-success-accent));
}

.product-proof[data-public-proof-style="channel"] {
  --public-proof-accent: var(--sotido-theme-accent);
}

.product-proof-local-context {
  margin-top: var(--sotido-space-md);
  padding: var(--sotido-space-md);
  border-left: 3px solid color-mix(in srgb, var(--public-proof-accent) 68%, var(--public-page-line));
  border-radius: 0 var(--sotido-radius-medium) var(--sotido-radius-medium) 0;
  background: color-mix(in srgb, var(--public-proof-accent) 8%, var(--public-page-panel-surface));
}

.product-proof-local-context h3 {
  margin: 0;
  color: var(--sotido-theme-text-primary);
  font-size: 15px;
}

.product-proof-local-context p {
  margin: var(--sotido-space-xs) 0 0;
  color: var(--sotido-theme-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.product-preview-frame {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--public-proof-accent) 24%, var(--public-page-line-strong));
  border-radius: var(--sotido-radius-xlarge);
  background: var(--sotido-theme-surface-raised);
}

.product-preview-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--sotido-space-md);
  border-bottom: 1px solid var(--public-page-line);
  color: var(--sotido-theme-text-muted);
  background: color-mix(in srgb, var(--sotido-theme-surface-soft) 88%, transparent);
  font-size: 11px;
  font-weight: var(--sotido-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-preview-lights {
  display: inline-flex;
  gap: 5px;
}

.product-preview-lights i {
  width: 7px;
  height: 7px;
  border-radius: var(--sotido-radius-pill);
  background: color-mix(in srgb, var(--public-proof-accent) 64%, var(--sotido-theme-text-muted));
}

.product-preview-lights i:nth-child(2) {
  opacity: 0.64;
}

.product-preview-lights i:nth-child(3) {
  opacity: 0.36;
}

.product-preview-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.product-preview-frame figcaption {
  display: grid;
  gap: var(--sotido-space-xxs);
  padding: var(--sotido-space-md) var(--sotido-space-lg);
  border-top: 1px solid var(--public-page-line);
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.product-preview-frame figcaption strong {
  color: var(--sotido-theme-text-primary);
  font-size: 12px;
}

.product-preview-frame figcaption span {
  color: var(--sotido-theme-text-secondary);
}

.product-preview-credit {
  justify-self: start;
  color: var(--sotido-theme-text-muted);
  font-size: 11px;
  text-decoration: underline;
}

.sotido-media-gallery {
  min-width: 0;
}

.sotido-media-gallery__viewport {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.sotido-media-gallery__viewport::-webkit-scrollbar {
  display: none;
}

.sotido-media-gallery__item {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.sotido-media-gallery__dots {
  display: flex;
  justify-content: center;
  gap: var(--sotido-space-sm);
  padding: var(--sotido-space-sm) 0 0;
}

.sotido-media-gallery__dots a {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--sotido-radius-pill);
}

.sotido-media-gallery__dots a span {
  width: 7px;
  height: 7px;
  border-radius: var(--sotido-radius-pill);
  background: color-mix(in srgb, var(--sotido-theme-text-muted) 68%, transparent);
  transition: width 160ms ease, background-color 160ms ease;
}

.sotido-media-gallery__dots a.is-active span,
.sotido-media-gallery__dots a[aria-current="true"] span {
  width: 20px;
  background: var(--sotido-media-gallery-accent);
}

.product-proof .sotido-media-gallery {
  --sotido-media-gallery-accent: var(--public-proof-accent);
}

.public-calendar-demo {
  --public-calendar-demo-chrome-edge-inset: 8px;
  --public-calendar-demo-identity-height: 84px;
  --public-calendar-demo-top-content-inset: 104px;
  --public-calendar-demo-bottom-content-inset: 104px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--public-proof-accent) 24%, var(--public-page-line-strong));
  border-radius: var(--sotido-radius-xlarge);
  color: var(--sotido-theme-text-primary);
  background: var(--sotido-theme-background);
}

.public-calendar-demo__stage {
  min-width: 0;
}

.public-calendar-demo.is-demo-ready .public-calendar-demo__stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--sotido-theme-background);
}

.public-calendar-demo.is-demo-ready .public-calendar-demo__stage::before,
.public-calendar-demo.is-demo-ready .public-calendar-demo__stage::after {
  content: '';
  position: absolute;
  z-index: 7;
  right: 0;
  left: 0;
  pointer-events: none;
}

.public-calendar-demo.is-demo-ready .public-calendar-demo__stage::before {
  top: 0;
  height: calc(var(--public-calendar-demo-top-content-inset) + 18px);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sotido-theme-background) 52%, transparent),
    color-mix(in srgb, var(--sotido-theme-background) 18%, transparent) 78%,
    transparent
  );
}

.public-calendar-demo.is-demo-ready .public-calendar-demo__stage::after {
  bottom: 0;
  height: calc(var(--public-calendar-demo-bottom-content-inset) + 18px);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--sotido-theme-background) 52%, transparent),
    color-mix(in srgb, var(--sotido-theme-background) 18%, transparent) 78%,
    transparent
  );
}

.public-calendar-demo__header {
  display: grid;
  gap: var(--sotido-space-xs);
  padding: var(--sotido-space-md) var(--sotido-space-lg);
  border-bottom: 1px solid var(--public-page-line);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--public-proof-accent) 11%, transparent), transparent 52%),
    var(--sotido-theme-surface-raised);
}

.public-calendar-demo__identity-host {
  min-width: 0;
  border-bottom: 1px solid var(--public-page-line);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--public-proof-accent) 11%, transparent), transparent 52%),
    var(--sotido-theme-surface-raised);
}

.public-calendar-demo.is-demo-ready .public-calendar-demo__identity-host {
  position: absolute;
  z-index: 8;
  top: var(--public-calendar-demo-chrome-edge-inset);
  right: var(--public-calendar-demo-chrome-edge-inset);
  left: var(--public-calendar-demo-chrome-edge-inset);
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.public-calendar-demo__identity-host > .calendar-identity-header {
  --calendar-identity-color: var(--public-proof-accent);
  background: color-mix(in srgb, var(--sotido-theme-surface-raised) 94%, transparent);
}

.public-calendar-demo.is-demo-ready
  .public-calendar-demo__identity-host > .calendar-identity-header {
  margin: 0;
  background: color-mix(in srgb, var(--sotido-theme-surface-raised) 88%, transparent);
  -webkit-backdrop-filter: blur(var(--sotido-recipe-backdrop-chrome-blur-radius, 14px));
  backdrop-filter: blur(var(--sotido-recipe-backdrop-chrome-blur-radius, 14px));
}

.public-calendar-demo__eyebrow {
  margin: 0;
  color: var(--public-proof-readable-accent);
  font-size: 10px;
  font-weight: var(--sotido-font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.public-calendar-demo
  .calendar-event-card.highlight.highlight-has-cover
  > .ev-cover-layer[data-highlight-cover-kind="public-demo"] {
  width: var(--sotido-recipe-calendar-event-card-compact-row-height);
  min-width: var(--sotido-recipe-calendar-event-card-compact-row-height);
  top: -1px;
  right: -1px;
  bottom: -1px;
  max-width: none;
  border: 0;
  border-radius: 0;
  background-image: url("/site-assets/public-calendar-demo-cover-atlas-v1-13aa6b963993e77d.webp");
  background-repeat: no-repeat;
  background-position: var(--public-demo-highlight-cover-position, 0% 0%);
  background-size: calc(400% + 32px) auto;
  background-clip: border-box;
  box-shadow: none;
  outline: 0;
}

.public-calendar-demo
  .calendar-event-card--list.highlight.highlight-has-cover
  > .ev-cover-layer[data-highlight-cover-kind="public-demo"] {
  width: calc(var(--sotido-recipe-calendar-event-card-compact-row-height) * 2);
  min-width: calc(var(--sotido-recipe-calendar-event-card-compact-row-height) * 2);
}

.public-calendar-demo
  .calendar-event-card.highlight.highlight-has-cover
  > .ev-cover-layer[data-highlight-cover-kind="public-demo"]::before {
  display: none;
}

.public-calendar-demo .calendar-event-card.is-slot .ev-badge-group {
  position: absolute;
  z-index: 7;
  top: 0;
  right: 0;
  display: flex;
  pointer-events: none;
}

.public-calendar-demo .calendar-event-card.is-slot .ev-slot-badge {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  padding: 0 8px;
  border: 0;
  border-radius: 0 0 0 8px;
  background: color-mix(in srgb, var(--sotido-theme-success-accent) 78%, #087648);
  color: #fff;
  font-size: 10px;
  font-weight: var(--sotido-font-weight-bold);
  line-height: 1;
  box-shadow: none;
}

.public-calendar-demo .calendar-event-card--list.is-slot .ev-text-pair {
  padding-right: 54px;
}

.public-calendar-demo .calendar-event-card--grid.is-slot .ev-slot-badge {
  width: 10px;
  min-width: 10px;
  min-height: 10px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  color: transparent;
  font-size: 0;
}

.public-calendar-demo .calendar-event-card--grid.is-slot .ev-badge-group {
  inset: 2px 2px auto auto;
  display: flex !important;
  width: 10px;
  max-width: 10px;
  height: 10px;
}

.public-calendar-demo
  .calendar-event-card.ev-variant-highlight.highlight-has-cover::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(7 17 15 / 88%) 0%,
    rgb(7 17 15 / 76%) 66%,
    transparent 92%
  );
  content: "";
  pointer-events: none;
}

.public-calendar-demo
  .calendar-event-card.ev-variant-highlight.highlight-has-cover
  :is(.ev-timechip, .ev-title-text, .ev-desc-text) {
  color: var(--sotido-color-dark-text-main);
  text-shadow: 0 1px 2px rgb(0 0 0 / 42%);
}

.public-calendar-demo [data-highlight-cover-sprite-index="0"] { --public-demo-highlight-cover-position: 0% 0%; }
.public-calendar-demo [data-highlight-cover-sprite-index="1"] { --public-demo-highlight-cover-position: 33.3333% 0%; }
.public-calendar-demo [data-highlight-cover-sprite-index="2"] { --public-demo-highlight-cover-position: 66.6667% 0%; }
.public-calendar-demo [data-highlight-cover-sprite-index="3"] { --public-demo-highlight-cover-position: 100% 0%; }
.public-calendar-demo [data-highlight-cover-sprite-index="4"] { --public-demo-highlight-cover-position: 0% 33.3333%; }
.public-calendar-demo [data-highlight-cover-sprite-index="5"] { --public-demo-highlight-cover-position: 33.3333% 33.3333%; }
.public-calendar-demo [data-highlight-cover-sprite-index="6"] { --public-demo-highlight-cover-position: 66.6667% 33.3333%; }
.public-calendar-demo [data-highlight-cover-sprite-index="7"] { --public-demo-highlight-cover-position: 100% 33.3333%; }
.public-calendar-demo [data-highlight-cover-sprite-index="8"] { --public-demo-highlight-cover-position: 0% 66.6667%; }
.public-calendar-demo [data-highlight-cover-sprite-index="9"] { --public-demo-highlight-cover-position: 33.3333% 66.6667%; }
.public-calendar-demo [data-highlight-cover-sprite-index="10"] { --public-demo-highlight-cover-position: 66.6667% 66.6667%; }
.public-calendar-demo [data-highlight-cover-sprite-index="11"] { --public-demo-highlight-cover-position: 100% 66.6667%; }
.public-calendar-demo [data-highlight-cover-sprite-index="12"] { --public-demo-highlight-cover-position: 0% 100%; }
.public-calendar-demo [data-highlight-cover-sprite-index="13"] { --public-demo-highlight-cover-position: 33.3333% 100%; }
.public-calendar-demo [data-highlight-cover-sprite-index="14"] { --public-demo-highlight-cover-position: 66.6667% 100%; }
.public-calendar-demo [data-highlight-cover-sprite-index="15"] { --public-demo-highlight-cover-position: 100% 100%; }

.public-calendar-demo__header h3 {
  margin: 0;
  font-size: 17px;
}

.public-calendar-demo__summary {
  margin: 0;
  color: var(--sotido-theme-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.public-calendar-demo__dialog-close {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.public-calendar-demo .calendar-event-card:focus-visible,
.public-calendar-demo__dialog-close:focus-visible {
  outline: 2px solid var(--public-proof-accent);
  outline-offset: 2px;
}

.public-calendar-demo__view-switcher-host {
  display: none;
  width: min(96px, 30vw);
}

.public-calendar-demo.is-demo-ready .public-calendar-demo__view-switcher-host {
  display: block;
}

.public-calendar-demo__view-switcher-host .calendar-view-mode-switcher {
  --sotido-recipe-segmented-control-active-fill: var(--sotido-theme-accent);
  --sotido-recipe-segmented-control-active-text: var(--sotido-theme-primary-accent-text);
  width: 100%;
}

.public-calendar-demo__workspace {
  display: none;
  min-width: 0;
  background: var(--sotido-theme-background);
}

.public-calendar-demo.is-demo-ready .public-calendar-demo__workspace {
  display: block;
}

.public-calendar-demo__lower-chrome {
  display: none;
  gap: var(--sotido-space-xxs);
  padding: var(--sotido-space-xxs) var(--sotido-space-xs) var(--sotido-space-xs);
  border-top: 1px solid var(--public-page-line);
  background: var(--sotido-theme-surface-chrome);
}

.public-calendar-demo.is-demo-ready .public-calendar-demo__lower-chrome {
  display: grid;
  position: absolute;
  z-index: 8;
  right: var(--public-calendar-demo-chrome-edge-inset);
  bottom: 2px;
  left: var(--public-calendar-demo-chrome-edge-inset);
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.public-calendar-demo__lower-utility-row {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: flex-start;
  padding-inline: 3px;
}

.public-calendar-demo__calendar-list-host {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.public-calendar-demo.is-demo-ready :is(
  .public-calendar-demo__view-switcher-host,
  .public-calendar-demo__calendar-list-host
) {
  pointer-events: auto;
}

.public-calendar-demo__calendar-list-host::-webkit-scrollbar {
  display: none;
}

.public-calendar-demo__calendar-list-host > .calendar-layer-list {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 2px 3px 3px;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.public-calendar-demo__calendar-list-host .calendar-layer-list-heading {
  font-size: 12px;
}

.public-calendar-demo__calendar-list-host .calendar-layer-list-button {
  min-height: 42px;
  justify-content: center;
  padding: 3px;
}

.public-calendar-demo__calendar-list-host
  > .calendar-layer-list.calendar-layer-list--strip
  .calendar-layer-list-copy {
  display: none;
}

.public-calendar-demo__calendar-list-host .calendar-layer-list-item {
  width: 42px;
  flex-basis: 42px;
}

.public-calendar-demo__calendar-list-host .calendar-layer-list-icon {
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.public-calendar-demo__surface[hidden] {
  display: none !important;
}

.public-calendar-demo__surface {
  height: min(470px, 62vh);
  min-height: 360px;
  overflow: hidden;
  background: var(--sotido-theme-background);
  font-size: 12px;
  line-height: normal;
}

.public-calendar-demo.is-demo-ready :is(
  .public-calendar-demo__identity-host,
  .public-calendar-demo__view-switcher-host,
  .public-calendar-demo__calendar-list-host
) {
  touch-action: pan-x pan-y pinch-zoom;
}

.public-calendar-demo__surface > .calendar-projection-host {
  --sotido-calendar-top-content-inset: var(--public-calendar-demo-top-content-inset);
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 var(--public-calendar-demo-bottom-content-inset);
}

.public-calendar-demo__surface > .calendar-projection-host::before {
  content: '';
  display: block;
  height: var(--public-calendar-demo-top-content-inset);
  pointer-events: none;
}

.public-calendar-demo .calendar-month-body {
  position: relative;
  isolation: isolate;
}

.public-calendar-demo .calendar-day-shell--grid {
  /* The embed keeps a fixed two-row viewport; the shared app may adapt to 2–4. */
  --calendar-grid-day-viewport-height: calc(
    var(--sotido-recipe-calendar-event-card-compact-row-height) +
    var(--sotido-recipe-calendar-event-card-compact-row-height) +
    var(--sotido-recipe-calendar-grid-bar-row-gap)
  );
}

.public-calendar-demo__connector-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.public-calendar-demo__connector-overlay--grid {
  z-index: 2;
}

.public-calendar-demo__connector-overlay--list {
  z-index: 0;
}

.public-calendar-demo__connector-path {
  color: var(
    --public-calendar-demo-connector-color,
    var(--sotido-recipe-calendar-grid-multi-day-connector-fill)
  );
  opacity: var(--sotido-recipe-calendar-event-card-connector-opacity);
  pointer-events: none;
}

.public-calendar-demo__connector-path--grid {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--sotido-recipe-calendar-event-card-compact-tail-row-height);
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.public-calendar-demo__connector-path--list {
  fill: currentColor;
  stroke: none;
}

.public-calendar-demo .calendar-event-card {
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.public-calendar-demo .calendar-event-card[hidden] {
  display: none !important;
}

.public-calendar-demo .calendar-event-segment[hidden],
.public-calendar-demo .calendar-day-shell[hidden] {
  display: none !important;
}

.public-calendar-demo__fallback {
  display: grid;
  gap: var(--sotido-space-sm);
  padding: var(--sotido-space-md);
  background: var(--sotido-theme-surface-chrome);
}

.public-calendar-demo.is-demo-ready .public-calendar-demo__fallback {
  display: none;
}

.public-calendar-demo__fallback-events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-calendar-demo__fallback-event {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--demo-event-color, var(--sotido-theme-accent)) 68%, transparent);
  border-radius: var(--sotido-radius-compact);
  background: color-mix(in srgb, var(--demo-event-color, var(--sotido-theme-accent)) 8%, var(--sotido-theme-surface-raised));
}

.public-calendar-demo__fallback-event article {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
}

.public-calendar-demo__fallback-event p {
  margin: 0;
}

.public-calendar-demo__fallback-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  color: var(--sotido-theme-text-muted);
  font-size: 9px;
  line-height: 1.35;
}

.public-calendar-demo__fallback-event-title {
  color: var(--sotido-theme-text-primary);
  font-size: 11px;
  line-height: 1.35;
}

.public-calendar-demo__fallback-event-description {
  color: var(--sotido-theme-text-secondary);
  font-size: 10px;
  line-height: 1.4;
}

.public-calendar-demo__fallback-heading,
.public-calendar-demo__fallback-note {
  margin: 0;
}

.public-calendar-demo__fallback-heading {
  color: var(--sotido-theme-text-primary);
  font-size: 12px;
  font-weight: var(--sotido-font-weight-semibold);
}

.public-calendar-demo__fallback-note,
.public-calendar-demo__note {
  color: var(--sotido-theme-text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.public-calendar-demo__note {
  display: none;
  margin: 0;
  padding: var(--sotido-space-sm) var(--sotido-space-md);
  border-top: 1px solid var(--sotido-theme-border);
  background: var(--sotido-theme-surface-chrome);
}

.public-calendar-demo.is-demo-ready .public-calendar-demo__note {
  display: block;
}

.public-calendar-demo__dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--public-proof-accent) 38%, var(--public-page-line));
  border-radius: var(--sotido-radius-xlarge);
  color: var(--sotido-theme-text-primary);
  background: var(--sotido-theme-surface-raised);
  box-shadow: 0 28px 90px color-mix(in srgb, #000 42%, transparent);
}

.public-calendar-demo__dialog::backdrop {
  background: color-mix(in srgb, var(--sotido-theme-background) 62%, transparent);
  backdrop-filter: blur(5px);
}

.public-calendar-demo__dialog-card {
  display: grid;
  gap: var(--sotido-space-sm);
  padding: var(--sotido-space-xl);
}

.public-calendar-demo__dialog-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sotido-space-md);
}

.public-calendar-demo__dialog h3,
.public-calendar-demo__dialog p {
  margin: 0;
}

.public-calendar-demo__dialog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sotido-space-xs) var(--sotido-space-md);
  color: var(--sotido-theme-text-muted);
  font-size: 12px;
}

.public-calendar-demo__dialog-description {
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.public-calendar-demo__dialog-close {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--sotido-radius-pill);
  place-items: center;
  background: var(--sotido-theme-surface-soft);
  font-size: 18px;
}

.product-proof-copy {
  padding: 2px var(--sotido-space-sm) 0;
}

.product-proof-kicker {
  margin: 0 0 var(--sotido-space-xs);
  color: var(--public-proof-readable-accent);
  font-size: 11px;
  font-weight: var(--sotido-font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-proof-copy h2 {
  margin-bottom: var(--sotido-space-md);
  font-size: 22px;
}

.product-proof-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sotido-space-sm);
  max-width: none;
  padding: 0;
  list-style: none;
}

.product-proof-steps li {
  display: grid;
  align-content: start;
  gap: var(--sotido-space-xs);
  min-width: 0;
  margin: 0;
  padding: var(--sotido-space-sm);
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-medium);
  background: color-mix(in srgb, var(--public-proof-accent) 5%, transparent);
  color: var(--sotido-theme-text-secondary);
  font-size: 12px;
  line-height: 1.42;
}

.product-proof-step-number {
  color: var(--public-proof-readable-accent);
  font-size: 10px;
  font-weight: var(--sotido-font-weight-bold);
  letter-spacing: 0.08em;
}

.product-proof-boundary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sotido-space-md);
  max-width: none;
  margin: 0 var(--sotido-space-sm) var(--sotido-space-xs);
  padding-top: var(--sotido-space-md);
  border-top: 1px solid var(--public-page-line);
  font-size: 12px;
  line-height: 1.5;
}

.product-proof-boundary strong {
  color: var(--sotido-theme-text-primary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main > .section,
:is(.public-about-product__panel, .public-game-content) > .section,
main > .grid,
:is(.public-about-product__panel, .public-game-content) > .grid {
  margin: 0;
  padding: 56px 0;
  border-bottom: 1px solid var(--public-page-line);
}

main > .section,
:is(.public-about-product__panel, .public-game-content) > .section {
  display: grid;
  grid-template-columns: minmax(180px, 0.58fr) minmax(0, 1.42fr);
  align-items: start;
  column-gap: 64px;
}

main > .section > h2,
:is(.public-about-product__panel, .public-game-content) > .section > h2 {
  grid-column: 1;
  grid-row: 1 / span 20;
  padding-left: var(--sotido-space-md);
  border-left: 2px solid var(--sotido-theme-accent);
}

main > .section > :not(h2),
:is(.public-about-product__panel, .public-game-content) > .section > :not(h2) {
  grid-column: 2;
}

.system-instruction-document {
  scroll-margin-top: calc(var(--sotido-space-touch-target) + var(--sotido-space-xl));
}

.tattoo-booking-evidence {
  max-width: 826px;
  margin: 56px auto 0;
  overflow: hidden;
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-xlarge);
  background: var(--sotido-theme-surface-raised);
  box-shadow: var(--sotido-shadow-surface);
}

.tattoo-booking-evidence img {
  display: block;
  width: 100%;
  height: auto;
}

.tattoo-booking-evidence figcaption {
  padding: var(--sotido-space-md) var(--sotido-space-lg);
  border-top: 1px solid var(--public-page-line);
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.system-instruction-document__content {
  position: relative;
  display: grid;
  gap: var(--sotido-space-xl);
  max-width: var(--public-page-reading-width);
  padding: var(--sotido-space-xl);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sotido-theme-accent) 30%, var(--public-page-line));
  border-radius: var(--sotido-radius-card);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--sotido-theme-accent) 12%, transparent), transparent 46%),
    var(--public-page-panel-surface);
}

.system-instruction-document__content::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--sotido-theme-accent);
  content: "";
}

.system-instruction-document__content p,
.system-instruction-document__content h3,
.system-instruction-document__content h4 {
  margin: 0;
}

.system-instruction-document__eyebrow {
  color: var(--public-page-readable-accent);
  font-size: 12px;
  font-weight: var(--sotido-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.system-instruction-document__summary {
  color: var(--sotido-theme-text-primary);
  font-size: 18px;
  line-height: 1.6;
}

.system-instruction-document__context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sotido-space-md);
}

.system-instruction-document__context > *,
.system-instruction-document__callout,
.system-instruction-document__steps,
.system-instruction-document__problem,
.system-instruction-document__reference {
  display: grid;
  gap: var(--sotido-space-sm);
  margin: 0;
  padding: var(--sotido-space-lg);
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-compact);
  background: var(--public-page-subtle-surface);
}

.system-instruction-document__context h3,
.system-instruction-document__callout h3,
.system-instruction-document__steps h3,
.system-instruction-document__problem h3,
.system-instruction-document__reference h3 {
  font-size: 15px;
}

.system-instruction-document__context p,
.system-instruction-document__callout p,
.system-instruction-document__steps p,
.system-instruction-document__problem p,
.system-instruction-document__reference p {
  color: var(--sotido-theme-text-secondary);
}

.system-instruction-document__steps ol {
  display: grid;
  gap: var(--sotido-space-md);
  margin: 0;
  padding-left: var(--sotido-space-xl);
  list-style: decimal;
}

.system-instruction-document__steps li {
  padding-left: var(--sotido-space-xs);
}

.system-instruction-document__steps li::marker {
  color: var(--public-page-readable-accent);
  font-weight: var(--sotido-font-weight-bold);
}

.system-instruction-document__steps h4,
.system-instruction-document__problem h4 {
  font-size: 14px;
}

.system-instruction-document__problem {
  border-color: color-mix(in srgb, var(--sotido-theme-accent) 36%, var(--public-page-line));
}

.system-instruction-document__problem-row {
  display: grid;
  gap: var(--sotido-space-xs);
  padding-top: var(--sotido-space-md);
  border-top: 1px solid var(--public-page-line);
}

.system-instruction-document__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sotido-space-xs);
  padding-top: var(--sotido-space-md);
  border-top: 1px solid var(--public-page-line);
  color: var(--sotido-theme-text-muted);
  font-size: 13px;
}

.system-instruction-document__meta a {
  color: var(--sotido-theme-text-primary);
  font-weight: var(--sotido-font-weight-semibold);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sotido-space-lg);
}

.grid > .card,
.grid > .section {
  min-width: 0;
  margin: 0;
  padding: var(--sotido-space-xl);
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-card);
  background:
    linear-gradient(145deg, var(--public-page-subtle-surface), transparent),
    var(--public-page-panel-surface);
}

.grid > .card p:last-child,
.grid > .section p:last-child {
  margin-bottom: 0;
}

.faq details {
  max-width: var(--public-page-reading-width);
  padding: var(--sotido-space-lg) 0;
  border-top: 1px solid var(--public-page-line);
}

.faq details:last-child {
  border-bottom: 1px solid var(--public-page-line);
}

.faq summary {
  min-height: var(--sotido-space-touch-target);
  color: var(--sotido-theme-text-primary);
  font-weight: var(--sotido-font-weight-semibold);
  cursor: pointer;
}

.faq details p {
  margin: var(--sotido-space-sm) 0 0;
}

.compare-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-card);
}

.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: 12px 14px;
  border-right: 1px solid var(--public-page-line);
  border-bottom: 1px solid var(--public-page-line);
  text-align: left;
  vertical-align: top;
}

.compare-table tr:last-child td {
  border-bottom: 0;
}

.compare-table th:last-child,
.compare-table td:last-child {
  border-right: 0;
}

.compare-table th {
  color: var(--sotido-theme-text-primary);
  background: var(--public-page-subtle-surface);
  font-size: 14px;
}

.compare-table td {
  color: var(--sotido-theme-text-secondary);
  font-size: 14px;
}

.compare-table td strong {
  color: var(--sotido-theme-text-primary);
}

main > .year-calendar-section {
  display: block;
}

main > .lunar-calendar-section {
  display: block;
}

.calendar-reference-switcher {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--sotido-space-lg);
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-pill);
  background: var(--public-page-panel-surface);
  scrollbar-width: none;
}

.calendar-reference-switcher::-webkit-scrollbar {
  display: none;
}

.calendar-reference-switcher a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 6px var(--sotido-space-md);
  border-radius: var(--sotido-radius-pill);
  color: var(--sotido-theme-text-secondary);
  font-size: 14px;
  font-weight: var(--sotido-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.calendar-reference-switcher a:hover {
  color: var(--sotido-theme-text-primary);
  background: var(--public-page-hover-surface);
}

.calendar-reference-switcher a.is-active {
  color: var(--sotido-theme-primary-accent-text);
  background: var(--sotido-theme-accent);
}

main > .year-calendar-section > h2 {
  margin-bottom: var(--sotido-space-sm);
  padding-left: var(--sotido-space-md);
  border-left: 2px solid var(--sotido-theme-accent);
}

main > .year-calendar-section > :not(h2) {
  grid-column: auto;
}

.year-calendar-note {
  max-width: none;
  margin-bottom: var(--sotido-space-xl);
}

.calendar-month-navigation {
  display: flex;
  gap: var(--sotido-space-xs);
  margin: 0 0 var(--sotido-space-lg);
  padding: var(--sotido-space-xs);
  overflow-x: auto;
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-medium);
  background: var(--public-page-subtle-surface);
  scrollbar-width: thin;
}

.calendar-month-navigation a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 4px var(--sotido-space-sm);
  border-radius: var(--sotido-radius-compact);
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
  font-weight: var(--sotido-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.calendar-month-navigation a:hover,
.calendar-month-navigation a:focus-visible {
  color: var(--sotido-theme-primary-accent-text);
  background: var(--sotido-theme-accent);
}

.calendar-month-navigation a.is-current-month,
.calendar-month-navigation a[aria-current="date"] {
  color: var(--sotido-theme-primary-accent-text);
  background: var(--sotido-theme-accent);
}

.year-calendar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--sotido-space-lg);
  width: 100%;
}

.holiday-calendar-switcher {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: var(--sotido-space-xs);
  margin: 0 0 var(--sotido-space-lg);
  overflow-x: auto;
}

.holiday-calendar-switcher a {
  display: inline-flex;
  align-items: center;
  gap: var(--sotido-space-xs);
  min-height: 38px;
  padding: var(--sotido-space-xs) var(--sotido-space-md);
  color: var(--sotido-theme-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.holiday-calendar-switcher__flag {
  font-size: 17px;
  line-height: 1;
}

.holiday-calendar-switcher a:hover,
.holiday-calendar-switcher a:focus-visible,
.holiday-calendar-switcher a.is-active,
.holiday-calendar-switcher a[aria-selected="true"] {
  color: var(--sotido-theme-primary-accent-text);
  background: var(--sotido-theme-accent);
}

.year-holiday-calendar[hidden] {
  display: none;
}

.year-holiday-calendar {
  scroll-margin-top: var(--sotido-space-xl);
}

.year-holiday-calendar + .year-holiday-calendar {
  margin-top: var(--sotido-space-xxl);
}

.year-holiday-context {
  display: grid;
  gap: var(--sotido-space-sm);
  margin: 0 0 var(--sotido-space-lg);
  padding: var(--sotido-space-lg);
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-medium);
  background: var(--public-page-panel-surface);
}

.year-holiday-context h3,
.year-holiday-context p {
  margin: 0;
}

.year-holiday-context h3 {
  color: var(--sotido-theme-text-primary);
  font-size: 20px;
}

.year-holiday-context > p {
  color: var(--sotido-theme-text-secondary);
}

.year-holiday-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sotido-space-sm) var(--sotido-space-lg);
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
}

.year-holiday-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--sotido-space-xs);
}

.year-holiday-legend i {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 4px;
}

.year-holiday-legend i.is-public-holiday {
  background: color-mix(in srgb, var(--sotido-theme-destructive-accent) 28%, transparent);
}

.year-holiday-legend i.is-substitute-holiday {
  background: color-mix(in srgb, var(--sotido-theme-warning-accent) 26%, transparent);
}

.year-holiday-source {
  color: var(--sotido-theme-text-muted) !important;
  font-size: 13px;
}

#calendar-grid,
#production-totals,
#holidays-2026,
#lunar-phases,
.year-month[id],
.lunar-month[id] {
  scroll-margin-top: var(--sotido-space-xl);
}

.lunar-calendar-note {
  max-width: none;
  margin-bottom: var(--sotido-space-lg);
}

.lunar-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sotido-space-sm) var(--sotido-space-lg);
  margin-bottom: var(--sotido-space-lg);
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
}

.lunar-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--sotido-space-xs);
}

.lunar-calendar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sotido-space-lg);
}

.lunar-month {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-medium);
  background: var(--public-page-panel-surface);
}

.lunar-month.is-current-month {
  border-color: color-mix(in srgb, var(--sotido-theme-accent) 74%, var(--public-page-line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sotido-theme-accent) 28%, transparent),
    0 16px 44px color-mix(in srgb, var(--sotido-theme-accent) 12%, transparent);
}

.lunar-month h3 {
  margin: 0;
  padding: var(--sotido-space-md);
  border-bottom: 1px solid var(--public-page-line);
  color: var(--sotido-theme-text-primary);
  background: var(--sotido-theme-surface-soft);
  font-size: 16px;
}

.lunar-month.is-current-month h3 {
  color: var(--sotido-theme-primary-accent-text);
  background: var(--sotido-theme-accent);
}

.lunar-current-month-label,
.year-current-month-label {
  display: inline-flex;
  margin-left: var(--sotido-space-sm);
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: var(--sotido-radius-pill);
  font-size: 10px;
  font-weight: var(--sotido-font-weight-bold);
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  vertical-align: 2px;
}

.lunar-month ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lunar-month li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--sotido-space-sm);
  align-items: center;
  min-height: 68px;
  padding: var(--sotido-space-sm) var(--sotido-space-md);
  border-bottom: 1px solid var(--public-page-line);
}

.lunar-month li:last-child {
  border-bottom: 0;
}

.lunar-month li > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.lunar-month strong {
  color: var(--sotido-theme-text-primary);
  font-size: 14px;
}

.lunar-month time {
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.lunar-month small {
  color: var(--sotido-theme-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.lunar-phase-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  color: color-mix(in srgb, var(--sotido-theme-text-primary) 86%, var(--sotido-theme-accent));
  font-size: 24px;
  font-style: normal;
  line-height: 1;
}

.lunar-calendar-legend .lunar-phase-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  font-size: 18px;
}

.lunar-calendar-source {
  margin: var(--sotido-space-lg) 0 0;
  color: var(--sotido-theme-text-muted);
  font-size: 13px;
}

.year-month {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--public-page-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--sotido-radius-medium);
  background: var(--public-page-panel-surface);
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}

.year-month caption {
  padding: var(--sotido-space-md);
  border: 1px solid var(--public-page-line);
  border-bottom: 0;
  border-radius: var(--sotido-radius-medium) var(--sotido-radius-medium) 0 0;
  color: var(--sotido-theme-text-primary);
  background: var(--sotido-theme-surface-soft);
  font-size: 16px;
  font-weight: var(--sotido-font-weight-semibold);
  text-align: left;
}

.year-month.is-current-month {
  border-color: color-mix(in srgb, var(--sotido-theme-accent) 74%, var(--public-page-line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sotido-theme-accent) 28%, transparent),
    0 16px 44px color-mix(in srgb, var(--sotido-theme-accent) 12%, transparent);
}

.year-month.is-current-month caption {
  color: var(--sotido-theme-primary-accent-text);
  background: var(--sotido-theme-accent);
}

.year-month th,
.year-month td {
  height: 34px;
  padding: 4px 2px;
  border-right: 1px solid var(--public-page-line);
  border-bottom: 1px solid var(--public-page-line);
  text-align: center;
}

.year-month tr > :last-child {
  border-right: 0;
}

.year-month tbody tr:last-child td {
  border-bottom: 0;
}

.year-month tfoot td {
  height: auto;
  padding: var(--sotido-space-sm);
  border: 0;
  border-top: 1px solid var(--public-page-line);
  text-align: left;
  vertical-align: top;
}

.year-month-holidays {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.year-month-holidays li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 1px var(--sotido-space-xs);
  align-items: baseline;
  padding-left: var(--sotido-space-sm);
  border-left: 3px solid var(--sotido-theme-destructive-accent);
  color: var(--sotido-theme-text-primary);
  font-size: 12px;
  line-height: 1.35;
}

.year-month-holidays li.is-substitute-holiday {
  border-left-color: var(--sotido-theme-warning-accent);
}

.year-month-holidays time {
  color: var(--sotido-theme-text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--sotido-font-weight-semibold);
}

.year-month-holidays small {
  grid-column: 2;
  color: var(--sotido-theme-text-muted);
  font-size: 10px;
}

.year-month th {
  color: var(--sotido-theme-text-muted);
  background: var(--public-page-subtle-surface);
  font-size: 11px;
  font-weight: var(--sotido-font-weight-semibold);
}

.year-month th abbr {
  text-decoration: none;
}

.year-month td {
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
}

.year-day-link {
  display: grid;
  width: 100%;
  min-height: 26px;
  place-items: center;
  border-radius: var(--sotido-radius-compact);
  color: inherit;
  text-decoration: none;
}

.year-day-link:hover,
.year-day-link:focus-visible {
  color: var(--sotido-theme-primary-accent-text);
  background: var(--sotido-theme-accent);
  outline-offset: -2px;
}

.year-month td.is-current-day:not(.is-empty) {
  box-shadow: inset 0 0 0 2px var(--sotido-theme-accent);
  color: var(--sotido-theme-text-primary);
  background: color-mix(in srgb, var(--sotido-theme-accent) 15%, transparent);
  font-weight: var(--sotido-font-weight-bold);
}

.year-day-dialog {
  width: min(calc(100% - 32px), 520px);
  max-width: none;
  padding: 0;
  border: 1px solid var(--public-page-line-strong);
  border-radius: var(--sotido-radius-large);
  color: var(--sotido-theme-text-primary);
  background: var(--sotido-theme-surface);
  box-shadow: 0 24px 80px color-mix(in srgb, #000 48%, transparent);
}

.year-day-dialog::backdrop {
  background: color-mix(in srgb, #020617 72%, transparent);
  backdrop-filter: blur(5px);
}

.year-day-dialog__surface {
  position: relative;
  display: grid;
  gap: var(--sotido-space-md);
  margin: 0;
  padding: var(--sotido-space-xxl);
}

.year-day-dialog__surface > * {
  margin: 0;
}

.year-day-dialog__close {
  position: absolute;
  top: var(--sotido-space-sm);
  right: var(--sotido-space-sm);
  display: grid;
  width: var(--sotido-space-touch-target);
  height: var(--sotido-space-touch-target);
  place-items: center;
  border: 0;
  border-radius: var(--sotido-radius-pill);
  color: var(--sotido-theme-text-secondary);
  background: transparent;
  font: inherit;
  font-size: 26px;
  cursor: pointer;
}

.year-day-dialog__close:hover,
.year-day-dialog__close:focus-visible {
  color: var(--sotido-theme-text-primary);
  background: var(--public-page-hover-surface);
}

.year-day-dialog__kicker {
  padding-right: var(--sotido-space-xxl);
  color: var(--public-page-readable-accent);
  font-size: 12px;
  font-weight: var(--sotido-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.year-day-dialog__date {
  color: var(--sotido-theme-text-secondary);
  font-weight: var(--sotido-font-weight-semibold);
}

.year-day-dialog__action {
  justify-self: start;
}

.year-month .is-weekend:not(.is-empty) {
  color: var(--public-page-readable-accent);
  background: color-mix(in srgb, var(--sotido-theme-accent) 5%, transparent);
}

.year-month .is-public-holiday:not(.is-empty) {
  color: var(--public-page-readable-danger);
  background: color-mix(in srgb, var(--sotido-theme-destructive-accent) 12%, transparent);
  font-weight: var(--sotido-font-weight-semibold);
}

.year-month .is-transferred-day-off:not(.is-empty) {
  color: var(--public-page-readable-warning);
  background: color-mix(in srgb, var(--sotido-theme-warning-accent) 11%, transparent);
  font-weight: var(--sotido-font-weight-semibold);
}

.year-month .is-shortened-workday:not(.is-empty) {
  box-shadow: inset 0 -3px 0 var(--sotido-theme-accent);
}

.year-production-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sotido-space-sm) var(--sotido-space-lg);
  margin: var(--sotido-space-lg) 0 0;
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
}

.year-production-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--sotido-space-xs);
}

.year-production-legend i {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 4px;
  background: var(--public-page-subtle-surface);
}

.year-production-legend i.is-public-holiday {
  background: color-mix(in srgb, var(--sotido-theme-destructive-accent) 28%, transparent);
}

.year-production-legend i.is-transferred-day-off {
  background: color-mix(in srgb, var(--sotido-theme-warning-accent) 26%, transparent);
}

.year-production-legend i.is-shortened-workday {
  border-bottom: 3px solid var(--sotido-theme-accent);
}

.year-production-summary {
  margin-top: var(--sotido-space-xxl);
  padding: var(--sotido-space-xl);
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-large);
  background: var(--public-page-panel-surface);
}

.year-production-summary h3 {
  margin: 0 0 var(--sotido-space-lg);
  color: var(--sotido-theme-text-primary);
  font-size: 22px;
}

.year-production-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sotido-space-sm);
  margin-bottom: var(--sotido-space-xl);
}

.year-production-facts > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--sotido-space-md);
  border-radius: var(--sotido-radius-medium);
  background: var(--public-page-subtle-surface);
}

.year-production-facts strong {
  color: var(--sotido-theme-text-primary);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.year-production-facts span {
  color: var(--sotido-theme-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.year-production-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-medium);
}

.year-production-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.year-production-table caption {
  padding: var(--sotido-space-sm) var(--sotido-space-md);
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
  text-align: left;
}

.year-production-table th,
.year-production-table td {
  padding: 9px var(--sotido-space-sm);
  border-top: 1px solid var(--public-page-line);
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
  text-align: right;
}

.year-production-table th:first-child,
.year-production-table td:first-child {
  text-align: left;
}

.year-production-table thead th,
.year-production-table tbody th {
  color: var(--sotido-theme-text-primary);
  font-weight: var(--sotido-font-weight-semibold);
}

.year-production-table th a {
  color: inherit;
  text-underline-offset: 3px;
}

.year-production-caveat,
.year-production-source {
  margin: var(--sotido-space-md) 0 0;
  color: var(--sotido-theme-text-muted);
  font-size: 13px;
}

.calendar-reference-list {
  margin: 0;
  padding-left: 1.25rem;
}

.calendar-reference-list li + li {
  margin-top: var(--sotido-space-xs);
}

.year-month .is-empty {
  background: var(--public-page-subtle-surface);
}

.document-header {
  max-width: var(--public-page-reading-width);
  padding: 48px 0 var(--sotido-space-xl);
  border-bottom: 1px solid var(--public-page-line);
}

.document-header h1 {
  margin-bottom: var(--sotido-space-sm);
}

.updated {
  margin: 0;
  color: var(--sotido-theme-text-muted);
  font-size: 14px;
}

.document-header + main {
  max-width: var(--public-page-reading-width);
  padding-top: var(--sotido-space-xl);
}

.document-header + main h2 {
  margin-top: 36px;
}

.document-header + main h3 {
  margin-top: var(--sotido-space-xl);
}

.callout {
  max-width: var(--public-page-reading-width);
  margin: 0 0 var(--sotido-space-xl);
  padding: var(--sotido-space-md) var(--sotido-space-lg);
  border-left: 3px solid var(--sotido-theme-accent);
  border-radius: 0 var(--sotido-radius-compact) var(--sotido-radius-compact) 0;
  color: var(--sotido-theme-text-secondary);
  background: var(--public-page-subtle-surface);
}

.mono {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: var(--sotido-space-lg);
  flex-wrap: wrap;
  margin-top: var(--sotido-space-xl);
  padding: var(--sotido-space-xl) 0;
  color: var(--sotido-theme-text-muted);
  font-size: 14px;
}

.footer a {
  min-height: var(--sotido-space-touch-target);
  display: inline-flex;
  align-items: center;
}

.public-related-pages {
  margin-top: clamp(36px, 6vw, 72px);
  padding-top: var(--sotido-space-xl);
  border-top: 1px solid var(--public-page-line);
}

.public-related-pages h2 {
  margin-bottom: var(--sotido-space-md);
  font-size: clamp(22px, 3vw, 30px);
}

.public-related-pages__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sotido-space-sm);
}

.public-related-pages__links a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--public-page-line);
  border-radius: 999px;
  color: var(--sotido-theme-text-primary);
  background: var(--public-page-subtle-surface);
  text-decoration: none;
}

.public-related-pages__links a:hover,
.public-related-pages__links a:focus-visible {
  border-color: var(--sotido-theme-accent);
  color: var(--sotido-theme-accent);
}

.public-utility-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--sotido-space-xl);
}

.public-utility-card {
  width: min(100%, 620px);
  margin: 0;
  padding: var(--sotido-space-xl);
  border: 1px solid var(--public-page-line);
  border-radius: var(--sotido-radius-card);
  background: var(--sotido-theme-surface);
}

.public-utility-card h1 {
  font-size: 40px;
}

.public-utility-illustration {
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin-bottom: var(--sotido-space-lg);
}

.public-utility-kicker {
  margin: 0 0 var(--sotido-space-xxs);
  color: var(--sotido-theme-text-muted);
  font-size: 14px;
  font-weight: var(--sotido-font-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-utility-actions {
  margin-top: var(--sotido-space-xl);
  padding-top: var(--sotido-space-lg);
  border-top: 1px solid var(--public-page-line);
}

.public-utility-actions h2 {
  font-size: 18px;
}

@media (max-width: 920px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sotido-space-md);
    padding-top: var(--sotido-space-xs);
    padding-bottom: var(--sotido-space-xs);
  }

  .site-nav {
    justify-content: flex-end;
  }

  .site-header-download {
    display: none;
  }

  .public-page-intro {
    grid-template-columns: 1fr;
    gap: var(--sotido-space-xxl);
    min-height: 0;
  }

  .hero {
    max-width: var(--public-page-reading-width);
  }

  .public-calendar-for-two-lockup {
    margin-bottom: var(--sotido-space-lg);
  }

  .public-calendar-for-two-lockup__mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .public-about-game {
    min-height: 500px;
  }

  h1 {
    font-size: 40px;
  }

  main > .section,
  :is(.public-about-product__panel, .public-game-content) > .section {
    grid-template-columns: 1fr;
    row-gap: var(--sotido-space-lg);
  }

  main > .section > h2,
  :is(.public-about-product__panel, .public-game-content) > .section > h2,
  main > .section > :not(h2),
  :is(.public-about-product__panel, .public-game-content) > .section > :not(h2) {
    grid-column: 1;
    grid-row: auto;
  }

  .year-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-game-places__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lunar-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .wrap {
    padding-right: var(--sotido-space-lg);
    padding-left: var(--sotido-space-lg);
  }

  .site-header {
    grid-template-columns: auto minmax(0, 1fr);
    padding-right: 112px;
  }

  .site-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .site-nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    gap: var(--sotido-space-md);
  }

  .site-nav > a {
    display: none;
  }

  .site-header-primary {
    right: 8px;
    min-height: 36px;
    padding-inline: 12px;
    font-size: 13px;
  }

  .site-header-download {
    display: none;
  }

  .public-page-intro {
    padding: var(--sotido-space-xxl) 0;
  }

  h1,
  .public-utility-card h1 {
    font-size: 34px;
  }

  .sub {
    font-size: 17px;
  }

  .product-proof {
    padding: var(--sotido-space-sm);
    border-radius: var(--sotido-radius-xlarge);
  }

  .public-about-product__switcher {
    width: 100%;
  }

  .public-about-game {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: var(--sotido-space-lg);
  }

  .public-about-game h1,
  .public-about-game h2 {
    max-width: 16ch;
    font-size: 32px;
  }

  .public-game-places__grid {
    grid-template-columns: 1fr;
  }

  .product-proof[data-public-proof-placement="after_primary_reference"] {
    grid-template-columns: 1fr;
  }

  .product-proof[data-public-proof-placement="after_primary_reference"] .product-proof-boundary {
    grid-column: auto;
  }

  .product-proof[data-public-proof-placement="after_primary_reference"] > .product-proof-copy,
  .product-proof[data-public-proof-placement="after_primary_reference"] > :is(.product-preview-gallery, .public-calendar-demo),
  .product-proof[data-public-proof-placement="after_primary_reference"] > .product-proof-boundary {
    grid-column: auto;
    grid-row: auto;
  }

  .product-proof-steps {
    grid-template-columns: 1fr;
  }

  .product-proof-boundary {
    grid-template-columns: 1fr;
    gap: var(--sotido-space-xxs);
  }

  .public-calendar-demo__header {
    padding: var(--sotido-space-sm) var(--sotido-space-md);
  }

  .public-calendar-demo__identity-host > .calendar-identity-header {
    grid-template-columns: 42px minmax(0, 1fr);
    margin: var(--sotido-space-xs);
    padding: var(--sotido-space-sm);
  }

  .public-calendar-demo__identity-host .calendar-identity-header-avatar {
    width: 42px;
    height: 42px;
  }

  .public-calendar-demo__lower-chrome {
    padding-inline: var(--sotido-space-xxs);
  }

  .public-calendar-demo__calendar-list-host > .calendar-layer-list {
    padding-inline: var(--sotido-space-xs);
  }

  .public-calendar-demo__calendar-list-host .calendar-layer-list-item {
    width: 42px;
    flex-basis: 42px;
  }

  .public-calendar-demo__surface {
    height: min(390px, 58vh);
    min-height: 320px;
  }

  .public-calendar-demo__fallback-events {
    grid-template-columns: 1fr;
  }

  .public-calendar-demo__dialog-card {
    padding: var(--sotido-space-lg);
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .year-calendar-grid {
    grid-template-columns: 1fr;
  }

  .lunar-calendar-grid {
    grid-template-columns: 1fr;
  }

  .calendar-reference-switcher {
    width: 100%;
  }

  .calendar-month-navigation {
    margin-right: calc(-1 * var(--sotido-space-sm));
    margin-left: calc(-1 * var(--sotido-space-sm));
    scroll-padding-inline: var(--sotido-space-sm);
  }

  .year-production-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta .btn {
    flex: 1 1 180px;
  }

  .system-instruction-document__content {
    padding: var(--sotido-space-lg);
  }

  .system-instruction-document__context {
    grid-template-columns: 1fr;
  }

  .footer {
    flex-direction: column;
  }
}

@media print {
  :root {
    color-scheme: light;
  }

  html,
  body {
    color: #000;
    background: #fff;
  }

  body::before,
  .site-header,
  .product-proof,
  .cta,
  .calendar-reference-switcher,
  .calendar-month-navigation,
  .year-day-dialog,
  .footer,
  main > .section:not(.year-calendar-section):not(.lunar-calendar-section),
  :is(.public-about-product__panel, .public-game-content) > .section:not(.year-calendar-section):not(.lunar-calendar-section) {
    display: none !important;
  }

  .wrap {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .public-page-intro {
    display: block;
    min-height: 0;
    padding: 0 0 12px;
    border: 0;
  }

  .hero h1 {
    margin-bottom: 4px;
    color: #000;
    font-size: 24px;
  }

  .hero .sub,
  .year-calendar-note {
    color: #333;
    font-size: 11px;
  }

  main > .year-calendar-section {
    padding: 0;
    border: 0;
  }

  main > .lunar-calendar-section {
    padding: 0;
    border: 0;
  }

  main > .year-calendar-section > h2 {
    display: none;
  }

  main > .lunar-calendar-section > h2 {
    display: none;
  }

  .year-calendar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .lunar-calendar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .year-month,
  .year-month caption,
  .year-month th,
  .year-month td {
    border-color: #bbb;
    color: #000;
    background: #fff;
  }

  .year-month caption {
    padding: 5px 7px;
    font-size: 11px;
  }

  .year-month th,
  .year-month td {
    height: 18px;
    padding: 1px;
    font-size: 8px;
  }

  .year-holiday-context {
    gap: 3px;
    margin-bottom: 8px;
    padding: 6px;
    border-color: #bbb;
    color: #000;
    background: #fff;
  }

  .year-holiday-context h3 {
    color: #000;
    font-size: 11px;
  }

  .year-holiday-context > p,
  .year-holiday-legend,
  .year-holiday-source {
    color: #333 !important;
    font-size: 8px;
  }

  .year-month tfoot td {
    height: auto;
    padding: 3px;
  }

  .year-month-holidays {
    gap: 1px;
  }

  .year-month-holidays li,
  .year-month-holidays small {
    color: #000;
    font-size: 7px;
  }

  .year-month .is-weekend:not(.is-empty) {
    color: #000;
    background: #f1f1f1;
  }

  .year-month .is-public-holiday:not(.is-empty),
  .year-month .is-transferred-day-off:not(.is-empty) {
    color: #000;
    background: #e7e7e7;
  }

  .year-production-legend,
  .year-production-summary {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero,
  .product-proof {
    animation: public-page-reveal var(--sotido-motion-relaxed) both;
  }

  .product-proof {
    animation-delay: 80ms;
  }
}

@keyframes public-page-reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-proof[data-public-proof-demo-only],
.product-proof[data-public-proof-demo-only][data-public-proof-placement="after_primary_reference"] {
  grid-template-columns: minmax(0, 1fr);
}

.product-proof[data-public-proof-demo-only] > .public-calendar-demo,
.product-proof[data-public-proof-demo-only][data-public-proof-placement="after_primary_reference"] > .public-calendar-demo {
  grid-column: 1;
  grid-row: 1;
}