vanilla-breeze 0.1.3 → 0.2.0

package/dist/cdn/themes/glassmorphism-dark.tokens.json

@@ -0,0 +1,489 @@
+{
+  "color": {
+    "background": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.15,
+          0.03,
+          280
+        ]
+      }
+    },
+    "surface": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ]
+      },
+      "$extensions": {
+        "com.vanilla-breeze": {
+          "literal": "oklch(100% 0 0 / var(--glass-surface-opacity))"
+        }
+      }
+    },
+    "surface-alt": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ]
+      },
+      "$extensions": {
+        "com.vanilla-breeze": {
+          "literal": "oklch(100% 0 0 / var(--glass-surface-alt-opacity))"
+        }
+      }
+    },
+    "surface-raised": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ]
+      },
+      "$extensions": {
+        "com.vanilla-breeze": {
+          "literal": "oklch(100% 0 0 / var(--glass-surface-raised-opacity))"
+        }
+      }
+    },
+    "surface-sunken": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ]
+      },
+      "$extensions": {
+        "com.vanilla-breeze": {
+          "literal": "oklch(100% 0 0 / var(--glass-surface-sunken-opacity))"
+        }
+      }
+    },
+    "surface-overlay": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.2,
+          0.02,
+          280
+        ]
+      }
+    },
+    "text": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.95,
+          0.01,
+          280
+        ]
+      }
+    },
+    "text-muted": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.78,
+          0.01,
+          280
+        ]
+      }
+    },
+    "text-subtle": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.6,
+          0.015,
+          280
+        ]
+      }
+    },
+    "primary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.7,
+          0.18,
+          280
+        ]
+      }
+    },
+    "primary-hover": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.75,
+          0.19,
+          280
+        ]
+      }
+    },
+    "primary-subtle": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.25,
+          0.06,
+          280
+        ]
+      }
+    },
+    "accent": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.72,
+          0.12,
+          195
+        ]
+      }
+    },
+    "accent-hover": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.77,
+          0.13,
+          195
+        ]
+      }
+    },
+    "border": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ]
+      },
+      "$extensions": {
+        "com.vanilla-breeze": {
+          "literal": "oklch(100% 0 0 / var(--glass-border-opacity))"
+        }
+      }
+    },
+    "border-muted": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ]
+      },
+      "$extensions": {
+        "com.vanilla-breeze": {
+          "literal": "oklch(100% 0 0 / var(--glass-border-subtle-opacity))"
+        }
+      }
+    },
+    "border-strong": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ]
+      },
+      "$extensions": {
+        "com.vanilla-breeze": {
+          "literal": "oklch(100% 0 0 / var(--glass-border-strong-opacity))"
+        }
+      }
+    },
+    "success": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.72,
+          0.15,
+          150
+        ]
+      }
+    },
+    "warning": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.78,
+          0.14,
+          70
+        ]
+      }
+    },
+    "error": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.68,
+          0.2,
+          25
+        ]
+      }
+    },
+    "info": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [
+          0.7,
+          0.15,
+          250
+        ]
+      }
+    }
+  },
+  "effect": {
+    "shadow": {
+      "xs": {
+        "$type": "shadow",
+        "$value": {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0,
+              0,
+              0
+            ]
+          }
+        },
+        "$extensions": {
+          "com.vanilla-breeze": {
+            "literal": "0 1px 3px oklch(10% 0.05 280 / var(--opacity-20)), var(--glass-inner-glow)"
+          }
+        }
+      },
+      "sm": {
+        "$type": "shadow",
+        "$value": {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0,
+              0,
+              0
+            ]
+          }
+        },
+        "$extensions": {
+          "com.vanilla-breeze": {
+            "literal": "0 2px 6px oklch(10% 0.05 280 / var(--opacity-25)), var(--glass-inner-glow)"
+          }
+        }
+      },
+      "md": {
+        "$type": "shadow",
+        "$value": {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0,
+              0,
+              0
+            ]
+          }
+        },
+        "$extensions": {
+          "com.vanilla-breeze": {
+            "literal": "0 4px 12px oklch(10% 0.05 280 / var(--opacity-30)), var(--glass-inner-glow)"
+          }
+        }
+      },
+      "lg": {
+        "$type": "shadow",
+        "$value": {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0,
+              0,
+              0
+            ]
+          }
+        },
+        "$extensions": {
+          "com.vanilla-breeze": {
+            "literal": "0 8px 24px oklch(10% 0.05 280 / var(--opacity-35)), var(--glass-inner-glow)"
+          }
+        }
+      },
+      "xl": {
+        "$type": "shadow",
+        "$value": {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0,
+              0,
+              0
+            ]
+          }
+        },
+        "$extensions": {
+          "com.vanilla-breeze": {
+            "literal": "0 16px 32px oklch(10% 0.05 280 / var(--opacity-35))"
+          }
+        }
+      },
+      "2xl": {
+        "$type": "shadow",
+        "$value": {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0,
+              0,
+              0
+            ]
+          }
+        },
+        "$extensions": {
+          "com.vanilla-breeze": {
+            "literal": "0 24px 48px oklch(10% 0.05 280 / var(--opacity-40))"
+          }
+        }
+      }
+    }
+  },
+  "$extensions": {
+    "com.vanilla-breeze": {
+      "spec": "2025.10",
+      "vbVersion": "0.2.0",
+      "unmapped": [
+        "--glass-surface-opacity",
+        "--glass-surface-alt-opacity",
+        "--glass-surface-raised-opacity",
+        "--glass-surface-sunken-opacity",
+        "--glass-border-opacity",
+        "--glass-border-strong-opacity",
+        "--glass-border-subtle-opacity",
+        "--glass-inner-glow-opacity",
+        "--glass-border",
+        "--glass-inner-glow",
+        "--header-bg",
+        "--header-backdrop",
+        "--header-border-block-end",
+        "--input-bg",
+        "--input-border",
+        "--input-border-focus",
+        "--control-border",
+        "--control-checked-bg",
+        "--control-checked-border",
+        "--range-track-bg",
+        "--range-track-fill",
+        "--range-thumb-bg",
+        "--range-thumb-border",
+        "--progress-track-bg",
+        "--progress-fill",
+        "--page-bg-gradient",
+        "--page-bg-color"
+      ]
+    }
+  }
+}

package/dist/cdn/themes/glassmorphism.css

@@ -1,2 +1,2 @@
-:root[data-theme~=glassmorphism],[data-theme~=glassmorphism]{color-scheme:light;--theme-border-style: soft;--theme-icon-set: lucide;--glass-blur: 16px;--glass-saturate: 160%;--glass-surface-opacity: var(--opacity-55);--glass-surface-alt-opacity: var(--opacity-35);--glass-surface-raised-opacity: var(--opacity-70);--glass-surface-sunken-opacity: var(--opacity-20);--glass-border-opacity: var(--opacity-20);--glass-border-strong-opacity: var(--opacity-35);--glass-border-subtle-opacity: var(--opacity-12);--glass-inner-glow-opacity: var(--opacity-10);--glass-border: 1px solid oklch(100% 0 0 / var(--glass-border-opacity));--glass-inner-glow: inset 0 1px 1px oklch(100% 0 0 / var(--glass-inner-glow-opacity));--color-background: oklch(95% .02 280);--color-surface: oklch(100% 0 0 / var(--glass-surface-opacity));--color-surface-alt: oklch(100% 0 0 / var(--glass-surface-alt-opacity));--color-surface-raised: oklch(100% 0 0 / var(--glass-surface-raised-opacity));--color-surface-sunken: oklch(100% 0 0 / var(--glass-surface-sunken-opacity));--color-surface-overlay: oklch(97% .01 280);--color-text: oklch(20% .02 280);--color-text-muted: oklch(35% .02 280);--color-text-subtle: oklch(50% .015 280);--color-primary: oklch(52% .2 280);--color-primary-hover: oklch(47% .22 280);--color-primary-subtle: oklch(90% .05 280);--color-accent: oklch(60% .15 195);--color-accent-hover: oklch(55% .16 195);--color-border: oklch(100% 0 0 / var(--glass-border-opacity));--color-border-muted: oklch(100% 0 0 / var(--glass-border-subtle-opacity));--color-border-strong: oklch(100% 0 0 / var(--glass-border-strong-opacity));--color-success: oklch(60% .15 150);--color-warning: oklch(72% .14 70);--color-error: oklch(58% .2 25);--color-info: oklch(55% .15 250);--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "SF Mono", "JetBrains Mono", Consolas, monospace;--line-height-normal: 1.6;--line-height-tight: 1.2;--radius-xs: .5rem;--radius-s: .75rem;--radius-m: 1rem;--radius-l: 1.25rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;--radius-full: 9999px;--shadow-xs: 0 1px 3px oklch(52% .1 280 / var(--opacity-8)), var(--glass-inner-glow);--shadow-sm: 0 2px 6px oklch(52% .1 280 / var(--opacity-10)), var(--glass-inner-glow);--shadow-md: 0 4px 12px oklch(52% .1 280 / var(--opacity-12)), var(--glass-inner-glow);--shadow-lg: 0 8px 24px oklch(52% .1 280 / var(--opacity-15)), var(--glass-inner-glow);--shadow-xl: 0 16px 32px oklch(52% .1 280 / var(--opacity-15));--shadow-2xl: 0 24px 48px oklch(52% .1 280 / var(--opacity-20));--duration-instant: 60ms;--duration-fast: .12s;--duration-normal: .25s;--duration-slow: .4s;--ease-default: cubic-bezier(.16, 1, .3, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--page-bg-gradient: radial-gradient(ellipse at 20% 20%, oklch(70% .2 300 / var(--opacity-30)) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, oklch(70% .15 240 / var(--opacity-25)) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, oklch(72% .12 195 / var(--opacity-20)) 0%, transparent 50%);--page-bg-color: oklch(95% .02 280);--control-border: oklch(100% 0 0 / var(--opacity-30));--control-checked-bg: oklch(52% .2 280);--control-checked-border: oklch(52% .2 280);--control-radius-check: var(--radius-s);--input-bg: oklch(100% 0 0 / var(--glass-surface-sunken-opacity));--input-border: oklch(100% 0 0 / var(--glass-border-opacity));--input-border-focus: oklch(52% .2 280);--range-track-bg: oklch(100% 0 0 / var(--opacity-15));--range-track-fill: oklch(52% .2 280);--range-thumb-bg: oklch(100% 0 0 / var(--opacity-80));--range-thumb-border: oklch(52% .2 280);--progress-track-bg: oklch(100% 0 0 / var(--opacity-15));--progress-fill: oklch(52% .2 280)}:root[data-theme~=glassmorphism]:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 20% 20%,oklch(70% .2 300 / var(--opacity-40)) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,oklch(70% .15 240 / var(--opacity-35)) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,oklch(72% .12 195 / var(--opacity-30)) 0%,transparent 50%),#ebedfc}:root[data-theme~=glassmorphism],[data-theme~=glassmorphism]{:is(main,article){& hr:not([data-ornament]){border:none;border-block-start:1px solid oklch(100% 0 0 / var(--glass-border-opacity));margin-block:2rem}& h1,h2{font-weight:600;letter-spacing:-.01em}& a:not([class]){color:var(--color-primary);text-decoration-color:oklch(52% .2 280 / var(--opacity-30));text-underline-offset:.15em;&:hover{text-decoration-color:currentColor}}& blockquote{border-inline-start:3px solid oklch(52% .2 280 / var(--opacity-50));padding-inline-start:1.25rem;backdrop-filter:blur(var(--glass-blur));background:var(--color-surface);border:var(--glass-border);border-inline-start:3px solid var(--color-primary);border-radius:var(--radius-m);padding:1.25rem}.card{backdrop-filter:blur(var(--glass-blur));background:var(--color-surface);border:var(--glass-border)}.button,button{font-weight:500;backdrop-filter:blur(8px)}}:is(main,article) code-block{--cb-bg: oklch(100% 0 0 / var(--opacity-40));--cb-code-bg: oklch(100% 0 0 / var(--opacity-40));--cb-header-bg: oklch(100% 0 0 / var(--opacity-25));--cb-border-color: oklch(100% 0 0 / var(--glass-border-opacity));--cb-keyword: oklch(52% .2 280);--cb-string: oklch(55% .15 150);--cb-function: oklch(48% .15 300);--cb-number: oklch(55% .15 30);--cb-button-bg: oklch(100% 0 0 / var(--opacity-30));--cb-scrollbar-track: oklch(100% 0 0 / var(--opacity-15));--cb-scrollbar-thumb: oklch(100% 0 0 / var(--glass-border-strong-opacity))}:is(main,article) browser-window{--browser-window-bg: oklch(100% 0 0 / var(--glass-surface-opacity));--browser-window-header-bg: oklch(100% 0 0 / var(--glass-surface-alt-opacity));--browser-window-content-bg: oklch(100% 0 0 / var(--glass-surface-opacity));--browser-window-border-color: oklch(100% 0 0 / var(--glass-border-opacity));--browser-window-url-bg: oklch(100% 0 0 / var(--opacity-50))}::selection{background:oklch(52% .2 280 / var(--opacity-20))}}:root[data-theme~=glassmorphism][data-mode=dark],[data-theme~=glassmorphism][data-mode=dark]{color-scheme:dark;--glass-surface-opacity: var(--opacity-12);--glass-surface-alt-opacity: var(--opacity-8);--glass-surface-raised-opacity: var(--opacity-15);--glass-surface-sunken-opacity: var(--opacity-8);--glass-border-opacity: var(--opacity-15);--glass-border-strong-opacity: var(--opacity-25);--glass-border-subtle-opacity: var(--opacity-10);--glass-inner-glow-opacity: var(--opacity-8);--glass-border: 1px solid oklch(100% 0 0 / var(--glass-border-opacity));--glass-inner-glow: inset 0 1px 1px oklch(100% 0 0 / var(--glass-inner-glow-opacity));--color-background: oklch(15% .03 280);--color-surface: oklch(100% 0 0 / var(--glass-surface-opacity));--color-surface-alt: oklch(100% 0 0 / var(--glass-surface-alt-opacity));--color-surface-raised: oklch(100% 0 0 / var(--glass-surface-raised-opacity));--color-surface-sunken: oklch(100% 0 0 / var(--glass-surface-sunken-opacity));--color-surface-overlay: oklch(20% .02 280);--color-text: oklch(95% .01 280);--color-text-muted: oklch(78% .01 280);--color-text-subtle: oklch(60% .015 280);--color-primary: oklch(70% .18 280);--color-primary-hover: oklch(75% .19 280);--color-primary-subtle: oklch(25% .06 280);--color-accent: oklch(72% .12 195);--color-accent-hover: oklch(77% .13 195);--color-border: oklch(100% 0 0 / var(--glass-border-opacity));--color-border-muted: oklch(100% 0 0 / var(--glass-border-subtle-opacity));--color-border-strong: oklch(100% 0 0 / var(--glass-border-strong-opacity));--color-success: oklch(72% .15 150);--color-warning: oklch(78% .14 70);--color-error: oklch(68% .2 25);--color-info: oklch(70% .15 250);--input-bg: oklch(100% 0 0 / var(--opacity-10));--input-border: oklch(100% 0 0 / var(--opacity-15));--input-border-focus: oklch(70% .18 280);--control-border: oklch(100% 0 0 / var(--opacity-20));--control-checked-bg: oklch(70% .18 280);--control-checked-border: oklch(70% .18 280);--range-track-bg: oklch(100% 0 0 / var(--opacity-12));--range-track-fill: oklch(70% .18 280);--range-thumb-bg: oklch(100% 0 0 / var(--opacity-70));--range-thumb-border: oklch(70% .18 280);--progress-track-bg: oklch(100% 0 0 / var(--opacity-12));--progress-fill: oklch(70% .18 280);--shadow-xs: 0 1px 3px oklch(10% .05 280 / var(--opacity-20)), var(--glass-inner-glow);--shadow-sm: 0 2px 6px oklch(10% .05 280 / var(--opacity-25)), var(--glass-inner-glow);--shadow-md: 0 4px 12px oklch(10% .05 280 / var(--opacity-30)), var(--glass-inner-glow);--shadow-lg: 0 8px 24px oklch(10% .05 280 / var(--opacity-35)), var(--glass-inner-glow);--shadow-xl: 0 16px 32px oklch(10% .05 280 / var(--opacity-35));--shadow-2xl: 0 24px 48px oklch(10% .05 280 / var(--opacity-40));--page-bg-gradient: radial-gradient(ellipse at 20% 20%, oklch(45% .2 300 / var(--opacity-25)) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, oklch(45% .15 240 / var(--opacity-20)) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, oklch(48% .12 195 / var(--opacity-15)) 0%, transparent 50%);--page-bg-color: oklch(15% .03 280)}:root[data-theme~=glassmorphism][data-mode=dark]:before{background:radial-gradient(ellipse at 20% 20%,oklch(45% .2 300 / var(--opacity-30)) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,oklch(45% .15 240 / var(--opacity-25)) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,oklch(48% .12 195 / var(--opacity-20)) 0%,transparent 50%),#090917}:root[data-theme~=glassmorphism][data-mode=dark],[data-theme~=glassmorphism][data-mode=dark]{:is(main,article){& hr:not([data-ornament]){border-color:oklch(100% 0 0 / var(--glass-border-opacity))}}:is(main,article) code-block{--cb-bg: oklch(100% 0 0 / var(--opacity-10));--cb-code-bg: oklch(100% 0 0 / var(--opacity-10));--cb-header-bg: oklch(100% 0 0 / var(--opacity-8));--cb-border-color: oklch(100% 0 0 / var(--glass-border-opacity));--cb-keyword: oklch(70% .18 280);--cb-string: oklch(70% .12 150);--cb-function: oklch(68% .12 300);--cb-number: oklch(72% .12 30);--cb-button-bg: oklch(100% 0 0 / var(--opacity-15));--cb-scrollbar-track: oklch(100% 0 0 / var(--opacity-10));--cb-scrollbar-thumb: oklch(100% 0 0 / var(--glass-border-opacity))}:is(main,article) browser-window{--browser-window-bg: oklch(100% 0 0 / var(--glass-surface-opacity));--browser-window-header-bg: oklch(100% 0 0 / var(--glass-surface-alt-opacity));--browser-window-content-bg: oklch(100% 0 0 / var(--glass-surface-opacity));--browser-window-border-color: oklch(100% 0 0 / var(--glass-border-opacity));--browser-window-url-bg: oklch(100% 0 0 / var(--glass-surface-alt-opacity))}::selection{background:oklch(70% .18 280 / var(--opacity-25));color:#edeef5}}
+:root[data-theme~=glassmorphism],[data-theme~=glassmorphism]{color-scheme:light;--theme-border-style: soft;--theme-icon-set: lucide;--glass-blur: 16px;--glass-saturate: 160%;--glass-surface-opacity: var(--opacity-55);--glass-surface-alt-opacity: var(--opacity-35);--glass-surface-raised-opacity: var(--opacity-70);--glass-surface-sunken-opacity: var(--opacity-20);--glass-border-opacity: var(--opacity-20);--glass-border-strong-opacity: var(--opacity-35);--glass-border-subtle-opacity: var(--opacity-12);--glass-inner-glow-opacity: var(--opacity-10);--glass-border: 1px solid oklch(100% 0 0 / var(--glass-border-opacity));--glass-inner-glow: inset 0 1px 1px oklch(100% 0 0 / var(--glass-inner-glow-opacity));--color-background: oklch(95% .02 280);--color-surface: oklch(100% 0 0 / var(--glass-surface-opacity));--color-surface-alt: oklch(100% 0 0 / var(--glass-surface-alt-opacity));--color-surface-raised: oklch(100% 0 0 / var(--glass-surface-raised-opacity));--color-surface-sunken: oklch(100% 0 0 / var(--glass-surface-sunken-opacity));--color-surface-overlay: oklch(97% .01 280);--header-bg: oklch(100% 0 0 / .7);--header-backdrop: blur(20px) saturate(160%);--header-border-block-end: 1px solid oklch(100% 0 0 / .3);--color-text: oklch(20% .02 280);--color-text-muted: oklch(35% .02 280);--color-text-subtle: oklch(50% .015 280);--color-primary: oklch(52% .2 280);--color-primary-hover: oklch(47% .22 280);--color-primary-subtle: oklch(90% .05 280);--color-accent: oklch(60% .15 195);--color-accent-hover: oklch(55% .16 195);--color-border: oklch(100% 0 0 / var(--glass-border-opacity));--color-border-muted: oklch(100% 0 0 / var(--glass-border-subtle-opacity));--color-border-strong: oklch(100% 0 0 / var(--glass-border-strong-opacity));--color-success: oklch(60% .15 150);--color-warning: oklch(72% .14 70);--color-error: oklch(58% .2 25);--color-info: oklch(55% .15 250);--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "SF Mono", "JetBrains Mono", Consolas, monospace;--line-height-normal: 1.6;--line-height-tight: 1.2;--radius-xs: .5rem;--radius-s: .75rem;--radius-m: 1rem;--radius-l: 1.25rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;--radius-full: 9999px;--shadow-xs: 0 1px 3px oklch(52% .1 280 / var(--opacity-8)), var(--glass-inner-glow);--shadow-sm: 0 2px 6px oklch(52% .1 280 / var(--opacity-10)), var(--glass-inner-glow);--shadow-md: 0 4px 12px oklch(52% .1 280 / var(--opacity-12)), var(--glass-inner-glow);--shadow-lg: 0 8px 24px oklch(52% .1 280 / var(--opacity-15)), var(--glass-inner-glow);--shadow-xl: 0 16px 32px oklch(52% .1 280 / var(--opacity-15));--shadow-2xl: 0 24px 48px oklch(52% .1 280 / var(--opacity-20));--duration-instant: 60ms;--duration-fast: .12s;--duration-normal: .25s;--duration-slow: .4s;--ease-default: cubic-bezier(.16, 1, .3, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--page-bg-gradient: radial-gradient(ellipse at 20% 20%, oklch(70% .2 300 / var(--opacity-30)) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, oklch(70% .15 240 / var(--opacity-25)) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, oklch(72% .12 195 / var(--opacity-20)) 0%, transparent 50%);--page-bg-color: oklch(95% .02 280);--control-border: oklch(100% 0 0 / var(--opacity-30));--control-checked-bg: oklch(52% .2 280);--control-checked-border: oklch(52% .2 280);--control-radius-check: var(--radius-s);--input-bg: oklch(100% 0 0 / var(--glass-surface-sunken-opacity));--input-border: oklch(100% 0 0 / var(--glass-border-opacity));--input-border-focus: oklch(52% .2 280);--range-track-bg: oklch(100% 0 0 / var(--opacity-15));--range-track-fill: oklch(52% .2 280);--range-thumb-bg: oklch(100% 0 0 / var(--opacity-80));--range-thumb-border: oklch(52% .2 280);--progress-track-bg: oklch(100% 0 0 / var(--opacity-15));--progress-fill: oklch(52% .2 280)}:root[data-theme~=glassmorphism]:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 20% 20%,oklch(70% .2 300 / var(--opacity-40)) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,oklch(70% .15 240 / var(--opacity-35)) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,oklch(72% .12 195 / var(--opacity-30)) 0%,transparent 50%),#ebedfc}:root[data-theme~=glassmorphism],[data-theme~=glassmorphism]{:is(main,article){& hr:not([data-ornament]){border:none;border-block-start:1px solid oklch(100% 0 0 / var(--glass-border-opacity));margin-block:2rem}& h1,h2{font-weight:600;letter-spacing:-.01em}& a:not([class]){color:var(--color-primary);text-decoration-color:oklch(52% .2 280 / var(--opacity-30));text-underline-offset:.15em;&:hover{text-decoration-color:currentColor}}& blockquote{border-inline-start:3px solid oklch(52% .2 280 / var(--opacity-50));padding-inline-start:1.25rem;backdrop-filter:blur(var(--glass-blur));background:var(--color-surface);border:var(--glass-border);border-inline-start:3px solid var(--color-primary);border-radius:var(--radius-m);padding:1.25rem}.card{backdrop-filter:blur(var(--glass-blur));background:var(--color-surface);border:var(--glass-border)}.button,button{font-weight:500;backdrop-filter:blur(8px)}}:is(main,article) code-block{--cb-bg: oklch(100% 0 0 / var(--opacity-40));--cb-code-bg: oklch(100% 0 0 / var(--opacity-40));--cb-header-bg: oklch(100% 0 0 / var(--opacity-25));--cb-border-color: oklch(100% 0 0 / var(--glass-border-opacity));--cb-keyword: oklch(52% .2 280);--cb-string: oklch(55% .15 150);--cb-function: oklch(48% .15 300);--cb-number: oklch(55% .15 30);--cb-button-bg: oklch(100% 0 0 / var(--opacity-30));--cb-scrollbar-track: oklch(100% 0 0 / var(--opacity-15));--cb-scrollbar-thumb: oklch(100% 0 0 / var(--glass-border-strong-opacity))}:is(main,article) browser-window{--browser-window-bg: oklch(100% 0 0 / var(--glass-surface-opacity));--browser-window-header-bg: oklch(100% 0 0 / var(--glass-surface-alt-opacity));--browser-window-content-bg: oklch(100% 0 0 / var(--glass-surface-opacity));--browser-window-border-color: oklch(100% 0 0 / var(--glass-border-opacity));--browser-window-url-bg: oklch(100% 0 0 / var(--opacity-50))}::selection{background:oklch(52% .2 280 / var(--opacity-20))}}:root[data-theme~=glassmorphism][data-mode=dark],[data-theme~=glassmorphism][data-mode=dark]{color-scheme:dark;--glass-surface-opacity: var(--opacity-12);--glass-surface-alt-opacity: var(--opacity-8);--glass-surface-raised-opacity: var(--opacity-15);--glass-surface-sunken-opacity: var(--opacity-8);--glass-border-opacity: var(--opacity-15);--glass-border-strong-opacity: var(--opacity-25);--glass-border-subtle-opacity: var(--opacity-10);--glass-inner-glow-opacity: var(--opacity-8);--glass-border: 1px solid oklch(100% 0 0 / var(--glass-border-opacity));--glass-inner-glow: inset 0 1px 1px oklch(100% 0 0 / var(--glass-inner-glow-opacity));--color-background: oklch(15% .03 280);--color-surface: oklch(100% 0 0 / var(--glass-surface-opacity));--color-surface-alt: oklch(100% 0 0 / var(--glass-surface-alt-opacity));--color-surface-raised: oklch(100% 0 0 / var(--glass-surface-raised-opacity));--color-surface-sunken: oklch(100% 0 0 / var(--glass-surface-sunken-opacity));--color-surface-overlay: oklch(20% .02 280);--header-bg: oklch(15% .03 280 / .75);--header-backdrop: blur(20px) saturate(160%);--header-border-block-end: 1px solid oklch(100% 0 0 / .1);--color-text: oklch(95% .01 280);--color-text-muted: oklch(78% .01 280);--color-text-subtle: oklch(60% .015 280);--color-primary: oklch(70% .18 280);--color-primary-hover: oklch(75% .19 280);--color-primary-subtle: oklch(25% .06 280);--color-accent: oklch(72% .12 195);--color-accent-hover: oklch(77% .13 195);--color-border: oklch(100% 0 0 / var(--glass-border-opacity));--color-border-muted: oklch(100% 0 0 / var(--glass-border-subtle-opacity));--color-border-strong: oklch(100% 0 0 / var(--glass-border-strong-opacity));--color-success: oklch(72% .15 150);--color-warning: oklch(78% .14 70);--color-error: oklch(68% .2 25);--color-info: oklch(70% .15 250);--input-bg: oklch(100% 0 0 / var(--opacity-10));--input-border: oklch(100% 0 0 / var(--opacity-15));--input-border-focus: oklch(70% .18 280);--control-border: oklch(100% 0 0 / var(--opacity-20));--control-checked-bg: oklch(70% .18 280);--control-checked-border: oklch(70% .18 280);--range-track-bg: oklch(100% 0 0 / var(--opacity-12));--range-track-fill: oklch(70% .18 280);--range-thumb-bg: oklch(100% 0 0 / var(--opacity-70));--range-thumb-border: oklch(70% .18 280);--progress-track-bg: oklch(100% 0 0 / var(--opacity-12));--progress-fill: oklch(70% .18 280);--shadow-xs: 0 1px 3px oklch(10% .05 280 / var(--opacity-20)), var(--glass-inner-glow);--shadow-sm: 0 2px 6px oklch(10% .05 280 / var(--opacity-25)), var(--glass-inner-glow);--shadow-md: 0 4px 12px oklch(10% .05 280 / var(--opacity-30)), var(--glass-inner-glow);--shadow-lg: 0 8px 24px oklch(10% .05 280 / var(--opacity-35)), var(--glass-inner-glow);--shadow-xl: 0 16px 32px oklch(10% .05 280 / var(--opacity-35));--shadow-2xl: 0 24px 48px oklch(10% .05 280 / var(--opacity-40));--page-bg-gradient: radial-gradient(ellipse at 20% 20%, oklch(45% .2 300 / var(--opacity-25)) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, oklch(45% .15 240 / var(--opacity-20)) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, oklch(48% .12 195 / var(--opacity-15)) 0%, transparent 50%);--page-bg-color: oklch(15% .03 280)}:root[data-theme~=glassmorphism][data-mode=dark]:before{background:radial-gradient(ellipse at 20% 20%,oklch(45% .2 300 / var(--opacity-30)) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,oklch(45% .15 240 / var(--opacity-25)) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,oklch(48% .12 195 / var(--opacity-20)) 0%,transparent 50%),#090917}:root[data-theme~=glassmorphism][data-mode=dark],[data-theme~=glassmorphism][data-mode=dark]{:is(main,article){& hr:not([data-ornament]){border-color:oklch(100% 0 0 / var(--glass-border-opacity))}}:is(main,article) code-block{--cb-bg: oklch(100% 0 0 / var(--opacity-10));--cb-code-bg: oklch(100% 0 0 / var(--opacity-10));--cb-header-bg: oklch(100% 0 0 / var(--opacity-8));--cb-border-color: oklch(100% 0 0 / var(--glass-border-opacity));--cb-keyword: oklch(70% .18 280);--cb-string: oklch(70% .12 150);--cb-function: oklch(68% .12 300);--cb-number: oklch(72% .12 30);--cb-button-bg: oklch(100% 0 0 / var(--opacity-15));--cb-scrollbar-track: oklch(100% 0 0 / var(--opacity-10));--cb-scrollbar-thumb: oklch(100% 0 0 / var(--glass-border-opacity))}:is(main,article) browser-window{--browser-window-bg: oklch(100% 0 0 / var(--glass-surface-opacity));--browser-window-header-bg: oklch(100% 0 0 / var(--glass-surface-alt-opacity));--browser-window-content-bg: oklch(100% 0 0 / var(--glass-surface-opacity));--browser-window-border-color: oklch(100% 0 0 / var(--glass-border-opacity));--browser-window-url-bg: oklch(100% 0 0 / var(--glass-surface-alt-opacity))}::selection{background:oklch(70% .18 280 / var(--opacity-25));color:#edeef5}}
 /*# sourceMappingURL=glassmorphism.css.map */