/* Compass live reference, frozen 2026-10-13. Native adaptation; docs/design/compass.md. */
@font-face{font-family:Pretendard;font-style:normal;font-weight:45 920;font-display:swap;src:url('/fonts/pretendard-variable.woff2') format('woff2')}
:root {
    --corner-shape: squircle;
    --button-corner-shape: superellipse(1.15);
    --surface-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
    --surface-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
    --surface-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    --slider-thumb-surface: radial-gradient(ellipse at 35% 25%, #ffffff 0%, #ffffff 50%, #fdfdfd 78%, #f4f4f4 100%);
    --slider-thumb-shadow: 0 6px 16px -4px rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 6%);
    --slider-thumb-shadow-hover: 0 6px 16px -4px rgb(0 0 0 / 20%), 0 2px 4px -1px rgb(0 0 0 / 10%);
    --background: #ffffff;
    --gallery-background: #f4f4f4;
    --gallery-preview-background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: #007AFF;
    --primary-hover: color-mix(in oklch, var(--primary), black 12%);
    --primary-foreground: #ffffff;
    --button-secondary: color-mix(in oklch, var(--primary) 24%, var(--background));
    --button-secondary-hover: color-mix(in oklch, var(--primary) 32%, var(--background));
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted-surface: oklch(0.97 0 0);
    --tab-muted: oklch(0.95 0 0);
    --layout-preview-background: oklch(0.95 0 0);
    --tag: #F4F4F4;
    --tag-foreground: oklch(0.205 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: #007AFF;
    --accent-foreground: #ffffff;
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --radius: 2.5rem;
    --container-radius: 2.5rem;
    --sidebar-surface: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
}

:root[data-theme="dark"] {
    --button-secondary: color-mix(in srgb, var(--primary) 28%, var(--background));
    --button-secondary-hover: color-mix(in srgb, var(--primary) 36%, var(--background));
    --surface-shadow-sm: 0 2px 6px 0 rgb(0 0 0 / 40%), 0 1px 2px 0 rgb(0 0 0 / 25%);
    --surface-shadow-md: 0 6px 16px -2px rgb(0 0 0 / 50%), 0 2px 6px 0 rgb(0 0 0 / 35%);
    --surface-shadow-lg: 0 14px 32px -4px rgb(0 0 0 / 65%), 0 6px 12px -2px rgb(0 0 0 / 45%);
    --slider-thumb-shadow: 0 6px 18px -4px rgb(0 0 0 / 28%), 0 2px 4px -1px rgb(0 0 0 / 12%);
    --slider-thumb-shadow-hover: 0 6px 18px -4px rgb(0 0 0 / 40%), 0 2px 4px -1px rgb(0 0 0 / 20%);
    --background: oklch(0.15 0 0);
    --gallery-background: oklch(0.15 0 0);
    --gallery-preview-background: oklch(0.23 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: #007AFF;
    --primary-foreground: #ffffff;
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted-surface: oklch(0.269 0 0);
    --tab-muted: oklch(0.27 0 0);
    --layout-preview-background: oklch(0.27 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: #007AFF;
    --accent-foreground: #ffffff;
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --sidebar-surface: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
}


:root{color-scheme:light;--font-ui:Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;--paper:var(--background);--ink:var(--foreground);--muted:var(--muted-foreground);--surface:var(--secondary);--chrome:var(--sidebar-surface);--wash:var(--tab-muted);--line:var(--border);--accent:var(--primary);--accent-hover:var(--primary-hover);--accent-soft:var(--button-secondary);--soft:var(--secondary);--error:var(--destructive)}
:root[data-theme="dark"]{color-scheme:dark}
::selection{background:var(--button-secondary);color:var(--foreground)}
.lucide{fill:none;stroke:currentColor;stroke-width:2;width:16px;height:16px;flex-shrink:0;pointer-events:none}
@supports(corner-shape:squircle){button,input,select,textarea,dialog,[popover],.ex-cover,.catalog-cover,.rf-visual{corner-shape:squircle}.button{corner-shape:superellipse(1.15)}.icon-button,.avatar{corner-shape:round}}
[data-pointer-feedback="active"]{background-image:radial-gradient(72px circle at var(--pointer-x,50%) var(--pointer-y,50%),color-mix(in oklch,var(--foreground),transparent 94%),transparent);background-repeat:no-repeat}
.button.primary[data-pointer-feedback="active"]{background-image:radial-gradient(72px circle at var(--pointer-x,50%) var(--pointer-y,50%),#ffffff24,transparent)}