aegis-css 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,545 @@
1
+ # ⬡ AEGIS CSS Framework
2
+
3
+ **A future-proof, layered CSS framework built entirely on native CSS primitives.**
4
+
5
+ > *"The ultimate goal is to make itself unnecessary — teaching developers native CSS while providing the ergonomics they need today."*
6
+
7
+ ---
8
+
9
+ ## Overview
10
+
11
+ AEGIS (**A**daptive **E**rgonomic **G**eneration of **I**ntelligent **S**tyles) is a modern CSS framework designed around the blueprint for a future-proof framework. It combines the best ideas from Tailwind CSS, Bootstrap, Pico CSS, Open Props, DaisyUI, and shadcn/ui into a single, layered architecture.
12
+
13
+ ### Key Principles
14
+
15
+ - **Native CSS first** — Built on cascade layers, container queries, CSS nesting, OKLCH colors, and `:has()`.
16
+ - **Zero JavaScript runtime** — CSS-only by default; JS is opt-in for interactive components.
17
+ - **Layered & modular** — Use only what you need, from classless defaults to full component library.
18
+ - **AI-friendly** — Predictable, systematic naming for AI code generation tools.
19
+ - **Design-system-first** — All values are design tokens (CSS custom properties).
20
+ - **Sub-10 KB target** — Zero unused styles with on-demand architecture.
21
+
22
+ ---
23
+
24
+ ## Architecture — Five Layers
25
+
26
+ AEGIS uses CSS `@layer` to establish a strict cascade order. Each layer is independently opt-in.
27
+
28
+ | Layer | Name | Description | Inspired By |
29
+ |-------|------|-------------|-------------|
30
+ | **0** | Base | Classless semantic defaults — just include the CSS and your HTML looks great | Pico CSS |
31
+ | **1** | Tokens | Design tokens as CSS custom properties — spacing, colors, typography, shadows | Open Props |
32
+ | **2** | Utilities | Atomic utility classes for layout, spacing, typography, colors, etc. | Tailwind CSS |
33
+ | **3** | Components | Pre-built, semantic UI components — buttons, cards, modals, forms | DaisyUI, Bootstrap |
34
+ | **4** | Eject | Copy-paste component ownership — eject any component into your codebase | shadcn/ui |
35
+
36
+ ```
37
+ Cascade priority (lowest → highest):
38
+ aegis.tokens → aegis.reset → aegis.base → aegis.utilities → aegis.components → aegis.animations → aegis.overrides
39
+ ```
40
+
41
+ ---
42
+
43
+ ## Quick Start
44
+
45
+ ### CDN (No Build Step)
46
+
47
+ ```html
48
+ <link rel="stylesheet" href="path/to/dist/aegis.min.css">
49
+ <script type="module" src="path/to/dist/aegis.min.js"></script>
50
+ ```
51
+
52
+ ### NPM
53
+
54
+ ```bash
55
+ npm install aegis-css
56
+ ```
57
+
58
+ ```css
59
+ /* Import everything */
60
+ @import "aegis-css";
61
+
62
+ /* Or import selectively */
63
+ @import "aegis-css/css/core"; /* Layer 0 + 1 */
64
+ @import "aegis-css/css/utilities"; /* Layer 2 */
65
+ @import "aegis-css/css/components"; /* Layer 3 */
66
+ ```
67
+
68
+ ### Build from Source
69
+
70
+ ```bash
71
+ npm install
72
+ npm run build # Full build (CSS + JS)
73
+ npm run build:css # CSS only
74
+ npm run build:js # JS only
75
+ npm run dev # Watch mode
76
+ npm run size # Bundle size report
77
+ npm run lint # Lint CSS for issues
78
+ ```
79
+
80
+ ---
81
+
82
+ ## Directory Structure
83
+
84
+ ```
85
+ aegis-css/
86
+ ├── src/
87
+ │ ├── index.css ← Main entry point
88
+ │ ├── layers.css ← @layer cascade order
89
+ │ ├── core/
90
+ │ │ ├── index.css
91
+ │ │ ├── reset.css ← Modern CSS reset
92
+ │ │ ├── tokens.css ← Design tokens (Layer 1)
93
+ │ │ ├── base.css ← Classless defaults (Layer 0)
94
+ │ │ └── themes/
95
+ │ │ ├── light.css ← Light theme tokens
96
+ │ │ ├── dark.css ← Dark theme tokens
97
+ │ │ └── index.css
98
+ │ ├── utilities/
99
+ │ │ ├── index.css
100
+ │ │ ├── display.css
101
+ │ │ ├── layout.css
102
+ │ │ ├── flexbox.css
103
+ │ │ ├── grid.css
104
+ │ │ ├── spacing.css
105
+ │ │ ├── sizing.css
106
+ │ │ ├── typography.css
107
+ │ │ ├── colors.css
108
+ │ │ ├── borders.css
109
+ │ │ ├── effects.css
110
+ │ │ ├── position.css
111
+ │ │ ├── interactivity.css
112
+ │ │ ├── responsive.css
113
+ │ │ ├── container-queries.css
114
+ │ │ ├── accessibility.css
115
+ │ │ └── intent.css ← Intent-based utilities
116
+ │ ├── components/
117
+ │ │ ├── index.css
118
+ │ │ ├── button.css ← .btn, .btn-primary, etc.
119
+ │ │ ├── card.css ← .card, .card-hoverable
120
+ │ │ ├── modal.css ← .modal (native <dialog>)
121
+ │ │ ├── navbar.css ← .navbar
122
+ │ │ ├── form.css ← .input, .form-group
123
+ │ │ ├── table.css ← .table, .table-striped
124
+ │ │ ├── alert.css ← .alert, .alert-success
125
+ │ │ ├── badge.css ← .badge, .badge-dot
126
+ │ │ ├── tabs.css ← .tabs, .tab
127
+ │ │ ├── dropdown.css ← .dropdown
128
+ │ │ ├── tooltip.css ← .tooltip
129
+ │ │ ├── accordion.css ← .accordion
130
+ │ │ ├── breadcrumb.css ← .breadcrumb
131
+ │ │ ├── pagination.css ← .pagination
132
+ │ │ ├── avatar.css ← .avatar, .avatar-group
133
+ │ │ ├── progress.css ← .progress
134
+ │ │ ├── skeleton.css ← .skeleton
135
+ │ │ ├── dialog.css ← .dialog (confirms/alerts)
136
+ │ │ ├── toast.css ← .toast
137
+ │ │ ├── toggle.css ← .toggle (switch)
138
+ │ │ ├── chip.css ← .chip (tag)
139
+ │ │ ├── divider.css ← .divider
140
+ │ │ ├── drawer.css ← .drawer (off-canvas)
141
+ │ │ └── popover.css ← .popover
142
+ │ └── animations/
143
+ │ └── index.css ← Fade, slide, scale, spin, etc.
144
+ ├── js/
145
+ │ ├── index.js ← Main JS entry (auto-init)
146
+ │ ├── core/
147
+ │ │ ├── dom.js ← $, $$, createElement
148
+ │ │ └── events.js ← delegate, emit, debounce
149
+ │ ├── components/
150
+ │ │ ├── modal.js ← initModals()
151
+ │ │ ├── dropdown.js ← initDropdowns()
152
+ │ │ ├── accordion.js ← initAccordions()
153
+ │ │ ├── tabs.js ← initTabs()
154
+ │ │ ├── toast.js ← showToast()
155
+ │ │ ├── tooltip.js ← initTooltips()
156
+ │ │ ├── dialog.js ← showAlert(), showConfirm()
157
+ │ │ └── drawer.js ← initDrawers()
158
+ │ └── utilities/
159
+ │ ├── theme-switcher.js ← toggleTheme(), setTheme()
160
+ │ ├── responsive.js ← matchBreakpoint()
161
+ │ └── accessibility.js ← trapFocus(), announce()
162
+ ├── eject/
163
+ │ └── components/ ← Standalone component copies
164
+ ├── dist/ ← Build output
165
+ ├── examples/
166
+ │ └── index.html ← Kitchen sink demo
167
+ ├── scripts/
168
+ │ ├── build.js ← Full build
169
+ │ ├── build-css.js ← Lightning CSS bundler
170
+ │ ├── build-js.js ← esbuild bundler
171
+ │ ├── dev.js ← Watch mode
172
+ │ ├── lint.js ← CSS linter
173
+ │ └── size-report.js ← Bundle size reporter
174
+ ├── package.json
175
+ ├── vite.config.js ← Vite integration
176
+ ├── postcss.config.js ← PostCSS fallback
177
+ └── README.md
178
+ ```
179
+
180
+ ---
181
+
182
+ ## Design Tokens
183
+
184
+ All design decisions are expressed as CSS custom properties, following the W3C Design Token Community Group conventions.
185
+
186
+ ### Spacing (4px grid)
187
+
188
+ | Token | Value | Pixels |
189
+ |-------|-------|--------|
190
+ | `--space-1` | `0.25rem` | 4px |
191
+ | `--space-2` | `0.5rem` | 8px |
192
+ | `--space-3` | `0.75rem` | 12px |
193
+ | `--space-4` | `1rem` | 16px |
194
+ | `--space-6` | `1.5rem` | 24px |
195
+ | `--space-8` | `2rem` | 32px |
196
+ | `--space-12` | `3rem` | 48px |
197
+ | `--space-16` | `4rem` | 64px |
198
+
199
+ ### Typography (Modular Scale, 1.25 ratio)
200
+
201
+ | Token | Range |
202
+ |-------|-------|
203
+ | `--text-xs` | 0.69–0.78rem |
204
+ | `--text-sm` | 0.83–0.98rem |
205
+ | `--text-base` | 1–1.22rem |
206
+ | `--text-lg` | 1.44–1.91rem |
207
+ | `--text-2xl` | 2.07–2.98rem |
208
+ | `--text-4xl` | 2.99–4.66rem |
209
+
210
+ All type sizes use `clamp()` for fluid scaling between viewports.
211
+
212
+ ### Colors (OKLCH)
213
+
214
+ All colors use OKLCH for perceptually uniform color spaces. Light and dark themes swap token values automatically via `@media (prefers-color-scheme)` or `data-theme="dark"`.
215
+
216
+ ### Shadows (Elevation)
217
+
218
+ | Token | Use |
219
+ |-------|-----|
220
+ | `--shadow-1` | Subtle lift |
221
+ | `--shadow-2` | Cards |
222
+ | `--shadow-3` | Dropdowns |
223
+ | `--shadow-4` | Modals |
224
+ | `--shadow-5` | Overlays |
225
+
226
+ ---
227
+
228
+ ## Theming
229
+
230
+ ### Automatic (System Preference)
231
+
232
+ AEGIS respects `prefers-color-scheme` automatically. No configuration needed.
233
+
234
+ ### Manual Toggle
235
+
236
+ ```html
237
+ <button onclick="import('./js/utilities/theme-switcher.js').then(m => m.toggleTheme())">
238
+ Toggle Theme
239
+ </button>
240
+ ```
241
+
242
+ ### Custom Theme
243
+
244
+ Create a new theme by overriding tokens:
245
+
246
+ ```css
247
+ [data-theme="brand"] {
248
+ --color-primary-500: oklch(0.6 0.2 30); /* Warm orange */
249
+ --color-bg: oklch(0.99 0.005 30);
250
+ /* ... override any token ... */
251
+ }
252
+ ```
253
+
254
+ ---
255
+
256
+ ## Utility Classes
257
+
258
+ ### Layout
259
+
260
+ `container`, `container-sm`…`container-2xl`, `overflow-*`, `aspect-*`, `object-*`
261
+
262
+ ### Flexbox
263
+
264
+ `flex`, `flex-col`, `flex-wrap`, `items-center`, `justify-between`, `gap-*`, `flex-center`, `stack`, `cluster`
265
+
266
+ ### Grid
267
+
268
+ `grid`, `grid-cols-1`…`grid-cols-12`, `grid-auto-fit`, `grid-auto-fill`, `col-span-*`, `gap-*`, `subgrid-*`
269
+
270
+ ### Spacing
271
+
272
+ `m-*`, `mx-*`, `my-*`, `mt-*`…`me-*`, `p-*`, `px-*`, `py-*`…`pe-*`, `space-y-*`, `space-x-*`
273
+
274
+ ### Typography
275
+
276
+ `text-xs`…`text-4xl`, `font-sans`/`serif`/`mono`, `font-thin`…`font-black`, `leading-*`, `tracking-*`, `text-center`, `truncate`, `line-clamp-*`, `text-balance`, `text-pretty`
277
+
278
+ ### Colors
279
+
280
+ `text-default`, `text-primary`, `text-success`…, `bg-default`, `bg-primary`, `bg-surface-*`…, `opacity-*`
281
+
282
+ ### Borders
283
+
284
+ `border`, `border-*`, `rounded-*`, `divide-*`, `ring-*`
285
+
286
+ ### Effects
287
+
288
+ `shadow-1`…`shadow-5`, `backdrop-blur-*`, `transition-*`, `duration-*`, `ease-*`, `scale-*`, `rotate-*`
289
+
290
+ ### Position
291
+
292
+ `static`, `relative`, `absolute`, `fixed`, `sticky`, `z-*`, `inset-*`, `top-*`, `bottom-*`, `start-*`, `end-*`
293
+
294
+ ### Responsive Prefixes
295
+
296
+ `sm:`, `md:`, `lg:`, `xl:` — Apply utilities at specific breakpoints.
297
+
298
+ ```html
299
+ <div class="flex-col md:flex-row gap-4 md:gap-8">
300
+ ```
301
+
302
+ ### Container Queries
303
+
304
+ `cq-container`, `cq-name-*`, `cq-sm:*`, `cq-md:*`, `cq-lg:*` — Apply styles based on parent container width.
305
+
306
+ ```html
307
+ <div class="cq-container">
308
+ <div class="flex-col cq-md:flex-row">Adapts to container, not viewport</div>
309
+ </div>
310
+ ```
311
+
312
+ ---
313
+
314
+ ## Intent-Based Utilities
315
+
316
+ A novel feature: express *intent* instead of exact values.
317
+
318
+ ```html
319
+ <div data-spacing="comfortable">…</div>
320
+ <div data-density="compact">…</div>
321
+ <article data-reading="long-form">…</article>
322
+ <div data-elevation="floating">…</div>
323
+ <span data-weight="emphasis">…</span>
324
+ ```
325
+
326
+ ---
327
+
328
+ ## Components
329
+
330
+ ### Button
331
+
332
+ ```html
333
+ <button class="btn">Default</button>
334
+ <button class="btn btn-secondary">Secondary</button>
335
+ <button class="btn btn-outline">Outline</button>
336
+ <button class="btn btn-ghost">Ghost</button>
337
+ <button class="btn btn-danger">Danger</button>
338
+ <button class="btn btn-success">Success</button>
339
+ <button class="btn btn-lg btn-pill">Large Pill</button>
340
+ <button class="btn btn-icon" aria-label="Settings">⚙</button>
341
+ ```
342
+
343
+ ### Card
344
+
345
+ ```html
346
+ <div class="card card-hoverable">
347
+ <div class="card-media"><img src="…" alt="…"></div>
348
+ <div class="card-body">
349
+ <h3 class="card-title">Title</h3>
350
+ <p class="card-description">Description</p>
351
+ </div>
352
+ <div class="card-footer"><button class="btn btn-sm">Action</button></div>
353
+ </div>
354
+ ```
355
+
356
+ ### Modal (Native `<dialog>`)
357
+
358
+ ```html
359
+ <button class="btn" data-modal-open="#my-modal">Open Modal</button>
360
+
361
+ <dialog id="my-modal" class="modal">
362
+ <div class="modal-header">
363
+ <h3 class="modal-title">Modal Title</h3>
364
+ <button class="modal-close" data-modal-close aria-label="Close">✕</button>
365
+ </div>
366
+ <div class="modal-body">Content here</div>
367
+ <div class="modal-footer">
368
+ <button class="btn btn-outline" data-modal-close>Cancel</button>
369
+ <button class="btn">Save</button>
370
+ </div>
371
+ </dialog>
372
+ ```
373
+
374
+ ### Tabs
375
+
376
+ ```html
377
+ <div role="tablist" class="tabs">
378
+ <button class="tab" role="tab" aria-selected="true" aria-controls="p1">Tab 1</button>
379
+ <button class="tab" role="tab" aria-selected="false" aria-controls="p2">Tab 2</button>
380
+ </div>
381
+ <div id="p1" class="tab-panel" role="tabpanel">Panel 1</div>
382
+ <div id="p2" class="tab-panel" role="tabpanel" hidden>Panel 2</div>
383
+ ```
384
+
385
+ ### Toast (Programmatic)
386
+
387
+ ```js
388
+ import { showToast } from "aegis-css/js/components/toast.js";
389
+
390
+ showToast({
391
+ title: "Success!",
392
+ message: "File uploaded.",
393
+ variant: "success", // success | warning | danger | info
394
+ duration: 4000, // ms, 0 = persistent
395
+ position: "bottom-end"
396
+ });
397
+ ```
398
+
399
+ ### Dialog (Programmatic Confirm)
400
+
401
+ ```js
402
+ import { showConfirm } from "aegis-css/js/components/dialog.js";
403
+
404
+ const ok = await showConfirm({
405
+ title: "Delete item?",
406
+ message: "This cannot be undone.",
407
+ confirmText: "Delete",
408
+ cancelText: "Keep"
409
+ });
410
+ ```
411
+
412
+ ### All Components
413
+
414
+ Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, Chip, Dialog, Divider, Drawer, Dropdown, Form (Input, Checkbox, Radio, Select, Textarea), Modal, Navbar, Pagination, Popover, Progress, Skeleton, Table, Tabs, Toast, Toggle, Tooltip.
415
+
416
+ ---
417
+
418
+ ## JavaScript API
419
+
420
+ All JS uses ES6 arrow-function syntax with one exported function per file. Fully tree-shakeable.
421
+
422
+ ### Auto-Initialization
423
+
424
+ ```html
425
+ <script type="module" src="aegis-css/js/index.js"></script>
426
+ <!-- All interactive components auto-initialize on DOMContentLoaded -->
427
+ ```
428
+
429
+ ### Manual Initialization
430
+
431
+ ```js
432
+ import { initModals } from "aegis-css/js/components/modal.js";
433
+ import { initTabs } from "aegis-css/js/components/tabs.js";
434
+
435
+ initModals(document);
436
+ initTabs(document);
437
+ ```
438
+
439
+ ### Core Helpers
440
+
441
+ ```js
442
+ import { $, $$, createElement } from "aegis-css/js/core/dom.js";
443
+ import { delegate, emit, debounce, throttle } from "aegis-css/js/core/events.js";
444
+ import { trapFocus, announce } from "aegis-css/js/utilities/accessibility.js";
445
+ ```
446
+
447
+ ---
448
+
449
+ ## Accessibility
450
+
451
+ AEGIS is built with accessibility as a structural requirement, not an afterthought:
452
+
453
+ - **ARIA-driven styling** — Components use `aria-selected`, `aria-expanded`, `aria-current`, `aria-invalid`, and `aria-disabled` for state management.
454
+ - **Skip link** — Built-in `.skip-link` component.
455
+ - **Focus management** — `:focus-visible` styling, `trapFocus()` utility.
456
+ - **Screen reader support** — `.sr-only`, `announce()` for live regions.
457
+ - **Reduced motion** — Respects `prefers-reduced-motion: reduce` globally.
458
+ - **High contrast** — Utility classes for `prefers-contrast: more`.
459
+ - **Keyboard navigation** — Full keyboard support for tabs, dropdowns, accordions.
460
+
461
+ ---
462
+
463
+ ## Build Tool Integration
464
+
465
+ ### Lightning CSS (Recommended)
466
+
467
+ The default build uses Lightning CSS (Rust-based) for microsecond rebuilds:
468
+
469
+ ```bash
470
+ npm run build:css # Uses scripts/build-css.js
471
+ ```
472
+
473
+ ### Vite
474
+
475
+ ```js
476
+ // vite.config.js — already configured
477
+ import { defineConfig } from "vite";
478
+ export default defineConfig({
479
+ css: { transformer: "lightningcss" }
480
+ });
481
+ ```
482
+
483
+ ### PostCSS (Fallback)
484
+
485
+ ```bash
486
+ npx postcss src/index.css -o dist/aegis.min.css
487
+ ```
488
+
489
+ ### Plain `<link>` (No Build)
490
+
491
+ ```html
492
+ <link rel="stylesheet" href="src/index.css">
493
+ ```
494
+
495
+ Works in modern browsers that support `@import`, CSS nesting, and `@layer`.
496
+
497
+ ---
498
+
499
+ ## Ejectable Components (Layer 4)
500
+
501
+ Following the shadcn/ui model, any component can be "ejected" — copied as a standalone file you fully own:
502
+
503
+ ```bash
504
+ cp eject/components/button.css ./my-project/styles/button.css
505
+ ```
506
+
507
+ Modify freely. Ejected components depend only on AEGIS core tokens.
508
+
509
+ ---
510
+
511
+ ## Browser Support
512
+
513
+ | Feature | Chrome | Firefox | Safari |
514
+ |---------|--------|---------|--------|
515
+ | CSS Nesting | 120+ | 117+ | 17.2+ |
516
+ | Container Queries | 105+ | 110+ | 16+ |
517
+ | `@layer` | 99+ | 97+ | 15.4+ |
518
+ | `:has()` | 105+ | 121+ | 15.4+ |
519
+ | OKLCH Colors | 111+ | 113+ | 15.4+ |
520
+ | `@property` | 85+ | 128+ | 15.4+ |
521
+
522
+ Target: **Chrome 120+, Firefox 117+, Safari 17.2+** (covers ~95% of global users).
523
+
524
+ ---
525
+
526
+ ## Contributing
527
+
528
+ 1. Fork and clone
529
+ 2. `npm install`
530
+ 3. `npm run dev` (watch mode)
531
+ 4. Open `examples/index.html` in a browser
532
+ 5. Make changes, verify visually
533
+ 6. `npm run lint` and `npm run size` before committing
534
+
535
+ ---
536
+
537
+ ## License
538
+
539
+ MIT © AEGIS CSS Framework
540
+
541
+ ---
542
+
543
+ <p align="center">
544
+ <strong>AEGIS</strong> — Native CSS power. Framework ergonomics. Future-proof by construction.
545
+ </p>
@@ -0,0 +1 @@
1
+ @layer aegis.tokens{:root{--space-0:0;--space-px:1px;--space-0-5:.125rem;--space-1:.25rem;--space-1-5:.375rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;--space-40:10rem;--space-48:12rem;--space-64:16rem;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-serif:"Georgia", "Times New Roman", serif;--font-mono:"Fira Code", "JetBrains Mono", ui-monospace, "Cascadia Code", "Menlo", monospace;--text-xs:clamp(.6944rem, .6691rem + .1265vi, .7813rem);--text-sm:clamp(.8333rem, .7922rem + .2056vi, .9766rem);--text-base:clamp(1rem, .9375rem + .3125vi, 1.2207rem);--text-md:clamp(1.2rem, 1.1083rem + .4583vi, 1.5259rem);--text-lg:clamp(1.44rem, 1.3089rem + .6556vi, 1.9073rem);--text-xl:clamp(1.728rem, 1.5436rem + .9222vi, 2.3842rem);--text-2xl:clamp(2.0736rem, 1.8175rem + 1.2806vi, 2.9802rem);--text-3xl:clamp(2.4883rem, 2.1364rem + 1.7597vi, 3.7253rem);--text-4xl:clamp(2.986rem, 2.5068rem + 2.3958vi, 4.6566rem);--leading-none:1;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.6;--leading-relaxed:1.75;--leading-loose:2;--tracking-tight:-.025em;--tracking-normal:0;--tracking-wide:.025em;--tracking-wider:.05em;--weight-thin:100;--weight-light:300;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--weight-black:900;--radius-none:0;--radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-1:0 1px 2px 0 oklch(0% 0 0/.05);--shadow-2:0 1px 3px 0 oklch(0% 0 0/.1), 0 1px 2px -1px oklch(0% 0 0/.1);--shadow-3:0 4px 6px -1px oklch(0% 0 0/.1), 0 2px 4px -2px oklch(0% 0 0/.1);--shadow-4:0 10px 15px -3px oklch(0% 0 0/.1), 0 4px 6px -4px oklch(0% 0 0/.1);--shadow-5:0 20px 25px -5px oklch(0% 0 0/.1), 0 8px 10px -6px oklch(0% 0 0/.1);--shadow-inset:inset 0 2px 4px 0 oklch(0% 0 0/.05);--shadow-none:0 0 0 0 transparent;--z-below:-1;--z-base:0;--z-raised:1;--z-dropdown:1000;--z-sticky:1100;--z-overlay:1200;--z-modal:1300;--z-popover:1400;--z-toast:1500;--z-tooltip:1600;--ease-default:cubic-bezier(.4, 0, .2, 1);--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--ease-spring:cubic-bezier(.22, 1, .36, 1);--duration-instant:50ms;--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s;--duration-slower:.6s;--bp-sm:640px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;--bp-2xl:1536px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1400px;--border-width-thin:1px;--border-width-medium:2px;--border-width-thick:4px;--color-focus:oklch(63.7% .237 265)}:root,[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-bg:oklch(99% .002 250);--color-bg-subtle:oklch(96.5% .004 250);--color-bg-muted:oklch(94% .006 250);--color-bg-emphasis:oklch(25% .01 250);--color-surface-1:oklch(100% 0 0);--color-surface-2:oklch(97.5% .003 250);--color-surface-3:oklch(95.5% .005 250);--color-text:oklch(20% .02 250);--color-text-secondary:oklch(40% .02 250);--color-text-muted:oklch(55% .015 250);--color-text-inverse:oklch(98% .002 250);--color-text-link:oklch(54.6% .215 262);--color-border:oklch(88% .008 250);--color-border-subtle:oklch(92% .005 250);--color-border-strong:oklch(75% .01 250);--color-primary-50:oklch(97% .02 262);--color-primary-100:oklch(93% .04 262);--color-primary-200:oklch(86% .08 262);--color-primary-300:oklch(76% .13 262);--color-primary-400:oklch(66% .18 262);--color-primary-500:oklch(54.6% .215 262);--color-primary-600:oklch(48% .2 262);--color-primary-700:oklch(42% .17 262);--color-primary-800:oklch(35% .14 262);--color-primary-900:oklch(28% .1 262);--color-secondary-50:oklch(97% .01 300);--color-secondary-100:oklch(93% .03 300);--color-secondary-200:oklch(86% .06 300);--color-secondary-300:oklch(76% .1 300);--color-secondary-400:oklch(66% .14 300);--color-secondary-500:oklch(56% .17 300);--color-secondary-600:oklch(48% .15 300);--color-secondary-700:oklch(40% .12 300);--color-secondary-800:oklch(33% .1 300);--color-secondary-900:oklch(26% .07 300);--color-success-bg:oklch(95% .05 145);--color-success:oklch(55% .17 145);--color-success-text:oklch(35% .12 145);--color-warning-bg:oklch(96% .06 85);--color-warning:oklch(75% .17 75);--color-warning-text:oklch(40% .12 75);--color-danger-bg:oklch(95% .04 25);--color-danger:oklch(58% .22 25);--color-danger-text:oklch(40% .15 25);--color-info-bg:oklch(96% .03 230);--color-info:oklch(60% .15 230);--color-info-text:oklch(35% .1 230);--color-overlay:oklch(15% .01 250/.5);--color-backdrop:oklch(15% .01 250/.3)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:oklch(16% .01 260);--color-bg-subtle:oklch(19% .012 260);--color-bg-muted:oklch(22% .014 260);--color-bg-emphasis:oklch(90% .005 260);--color-surface-1:oklch(20% .012 260);--color-surface-2:oklch(24% .014 260);--color-surface-3:oklch(28% .016 260);--color-text:oklch(93% .005 260);--color-text-secondary:oklch(75% .01 260);--color-text-muted:oklch(58% .012 260);--color-text-inverse:oklch(15% .01 260);--color-text-link:oklch(70% .18 262);--color-border:oklch(32% .015 260);--color-border-subtle:oklch(27% .012 260);--color-border-strong:oklch(45% .02 260);--color-primary-50:oklch(25% .04 262);--color-primary-100:oklch(30% .06 262);--color-primary-200:oklch(38% .1 262);--color-primary-300:oklch(48% .14 262);--color-primary-400:oklch(58% .18 262);--color-primary-500:oklch(65% .2 262);--color-primary-600:oklch(72% .18 262);--color-primary-700:oklch(78% .15 262);--color-primary-800:oklch(85% .1 262);--color-primary-900:oklch(92% .05 262);--color-secondary-50:oklch(25% .03 300);--color-secondary-100:oklch(30% .05 300);--color-secondary-200:oklch(38% .08 300);--color-secondary-300:oklch(48% .12 300);--color-secondary-400:oklch(58% .15 300);--color-secondary-500:oklch(65% .17 300);--color-secondary-600:oklch(72% .14 300);--color-secondary-700:oklch(78% .11 300);--color-secondary-800:oklch(85% .07 300);--color-secondary-900:oklch(92% .04 300);--color-success-bg:oklch(25% .06 145);--color-success:oklch(65% .18 145);--color-success-text:oklch(85% .08 145);--color-warning-bg:oklch(28% .06 85);--color-warning:oklch(80% .15 75);--color-warning-text:oklch(90% .08 75);--color-danger-bg:oklch(25% .06 25);--color-danger:oklch(65% .2 25);--color-danger-text:oklch(88% .07 25);--color-info-bg:oklch(25% .04 230);--color-info:oklch(68% .14 230);--color-info-text:oklch(88% .06 230);--color-overlay:oklch(5% .005 260/.7);--color-backdrop:oklch(5% .005 260/.5)}}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:oklch(16% .01 260);--color-bg-subtle:oklch(19% .012 260);--color-bg-muted:oklch(22% .014 260);--color-bg-emphasis:oklch(90% .005 260);--color-surface-1:oklch(20% .012 260);--color-surface-2:oklch(24% .014 260);--color-surface-3:oklch(28% .016 260);--color-text:oklch(93% .005 260);--color-text-secondary:oklch(75% .01 260);--color-text-muted:oklch(58% .012 260);--color-text-inverse:oklch(15% .01 260);--color-text-link:oklch(70% .18 262);--color-border:oklch(32% .015 260);--color-border-subtle:oklch(27% .012 260);--color-border-strong:oklch(45% .02 260);--color-primary-50:oklch(25% .04 262);--color-primary-100:oklch(30% .06 262);--color-primary-200:oklch(38% .1 262);--color-primary-300:oklch(48% .14 262);--color-primary-400:oklch(58% .18 262);--color-primary-500:oklch(65% .2 262);--color-primary-600:oklch(72% .18 262);--color-primary-700:oklch(78% .15 262);--color-primary-800:oklch(85% .1 262);--color-primary-900:oklch(92% .05 262);--color-secondary-50:oklch(25% .03 300);--color-secondary-100:oklch(30% .05 300);--color-secondary-200:oklch(38% .08 300);--color-secondary-300:oklch(48% .12 300);--color-secondary-400:oklch(58% .15 300);--color-secondary-500:oklch(65% .17 300);--color-secondary-600:oklch(72% .14 300);--color-secondary-700:oklch(78% .11 300);--color-secondary-800:oklch(85% .07 300);--color-secondary-900:oklch(92% .04 300);--color-success-bg:oklch(25% .06 145);--color-success:oklch(65% .18 145);--color-success-text:oklch(85% .08 145);--color-warning-bg:oklch(28% .06 85);--color-warning:oklch(80% .15 75);--color-warning-text:oklch(90% .08 75);--color-danger-bg:oklch(25% .06 25);--color-danger:oklch(65% .2 25);--color-danger-text:oklch(88% .07 25);--color-info-bg:oklch(25% .04 230);--color-info:oklch(68% .14 230);--color-info-text:oklch(88% .06 230);--color-overlay:oklch(5% .005 260/.7);--color-backdrop:oklch(5% .005 260/.5)}}@layer aegis.reset{*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-moz-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth;hanging-punctuation:first last}body{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100dvh;line-height:1.6}img,picture,video,canvas,svg{max-width:100%;height:auto;display:block}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance}p{text-wrap:pretty;max-width:75ch}a{color:inherit;text-decoration-skip-ink:auto}ul[role=list],ol[role=list]{list-style:none}table{border-collapse:collapse;border-spacing:0}:target{scroll-margin-block:5ex}:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@layer aegis.base{body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text);background-color:var(--color-bg);transition:color var(--duration-normal) var(--ease-default), background-color var(--duration-normal) var(--ease-default)}h1{font-size:var(--text-4xl);font-weight:var(--weight-extrabold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin-block-end:var(--space-6)}h2{font-size:var(--text-3xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin-block-start:var(--space-12);margin-block-end:var(--space-4)}h3{font-size:var(--text-2xl);font-weight:var(--weight-bold);line-height:var(--leading-snug);margin-block-start:var(--space-10);margin-block-end:var(--space-3)}h4{font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-snug);margin-block-start:var(--space-8);margin-block-end:var(--space-3)}h5{font-size:var(--text-lg);font-weight:var(--weight-semibold);margin-block-start:var(--space-6);margin-block-end:var(--space-2)}h6{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-secondary);margin-block-start:var(--space-6);margin-block-end:var(--space-2)}p{margin-block-end:var(--space-4)}p+p{margin-block-start:0}strong,b{font-weight:var(--weight-bold)}em,i{font-style:italic}small{font-size:var(--text-sm)}mark{background-color:var(--color-warning-bg);color:var(--color-warning-text);padding-inline:var(--space-0-5);border-radius:var(--radius-sm)}a:where(:not([class])){color:var(--color-text-link);text-underline-offset:.15em;transition:color var(--duration-fast) var(--ease-default);text-decoration:underline;&:hover{color:var(--color-primary-700)}}:where(ul,ol):not([role=list]){margin-block-end:var(--space-4);padding-inline-start:var(--space-6)}:where(ul):not([role=list]){list-style-type:disc}:where(ol):not([role=list]){list-style-type:decimal}li{margin-block-end:var(--space-1)}li::marker{color:var(--color-text-muted)}code{font-family:var(--font-mono);background-color:var(--color-bg-muted);padding:var(--space-0-5) var(--space-1);border-radius:var(--radius-sm);font-size:.875em}pre{font-family:var(--font-mono);font-size:var(--text-sm);background-color:var(--color-surface-2);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin-block-end:var(--space-4);overflow-x:auto;& code{background:0 0;border-radius:0;padding:0}}blockquote{border-inline-start:4px solid var(--color-primary-300);padding-inline-start:var(--space-4);padding-block:var(--space-2);color:var(--color-text-secondary);margin-block-end:var(--space-4);font-style:italic}hr{border:none;border-block-start:var(--border-width-thin) solid var(--color-border);margin-block:var(--space-8)}table{width:100%;font-size:var(--text-sm);margin-block-end:var(--space-6)}th,td{padding:var(--space-3) var(--space-4);text-align:start;border-block-end:var(--border-width-thin) solid var(--color-border)}th{font-weight:var(--weight-semibold);color:var(--color-text-secondary);background-color:var(--color-bg-subtle)}tr:hover{background-color:var(--color-bg-subtle)}label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);margin-block-end:var(--space-1);display:block}input:where([type=text],[type=email],[type=password],[type=url],[type=tel],[type=number],[type=search],[type=date],[type=datetime-local],[type=month],[type=week],[type=time]),textarea,select{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text);background-color:var(--color-surface-1);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);margin-block-end:var(--space-4);display:block;&:hover{border-color:var(--color-border-strong)}&:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px oklch(from var(--color-primary-500) l c h / .2);outline:none}&[aria-invalid=true]{border-color:var(--color-danger);box-shadow:0 0 0 3px oklch(from var(--color-danger) l c h / .15)}&:disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-bg-muted)}}textarea{resize:vertical;min-height:6rem}select{cursor:pointer}fieldset{border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin-block-end:var(--space-4)}legend{font-weight:var(--weight-semibold);padding-inline:var(--space-2)}button,input[type=submit],input[type=reset],input[type=button]{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:var(--leading-tight);border:var(--border-width-thin) solid var(--color-primary-500);border-radius:var(--radius-md);background-color:var(--color-primary-500);color:#fff;transition:all var(--duration-fast) var(--ease-default);white-space:nowrap;display:inline-flex;&:hover:not(:disabled){background-color:var(--color-primary-600);border-color:var(--color-primary-600)}&:active:not(:disabled){background-color:var(--color-primary-700);transform:translateY(1px)}&:disabled,&[aria-disabled=true]{opacity:.5;cursor:not-allowed}&[aria-busy=true]{cursor:wait;opacity:.7}}details{border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);margin-block-end:var(--space-3);&[open]>summary{border-block-end:var(--border-width-thin) solid var(--color-border);margin-block-end:var(--space-3);padding-block-end:var(--space-3)}}summary{cursor:pointer;font-weight:var(--weight-medium);list-style:none;&::marker{display:none}&::-webkit-details-marker{display:none}}dialog{border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-5);background-color:var(--color-surface-1);max-width:min(90vw,32rem);color:var(--color-text);border:none;&::backdrop{background:var(--color-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}progress{appearance:none;border-radius:var(--radius-full);background-color:var(--color-bg-muted);width:100%;height:.5rem;border:none;margin-block-end:var(--space-4);overflow:hidden;&::-webkit-progress-bar{background-color:var(--color-bg-muted);border-radius:var(--radius-full)}&::-webkit-progress-value{background-color:var(--color-primary-500);border-radius:var(--radius-full)}&::-moz-progress-bar{background-color:var(--color-primary-500);border-radius:var(--radius-full)}}figure{margin-block-end:var(--space-6)}figcaption{font-size:var(--text-sm);color:var(--color-text-muted);margin-block-start:var(--space-2)}[aria-hidden=true]{display:none}[aria-selected=true]{background-color:var(--color-primary-50);color:var(--color-primary-700)}[aria-current=page]{font-weight:var(--weight-bold);color:var(--color-primary-500)}[aria-expanded=false]+[data-expandable]{display:none}}@layer aegis.utilities{.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-grid{display:inline-grid}.contents{display:contents}.hidden{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.not-sr-only{clip:auto;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.container{width:100%;padding-inline:var(--space-4);max-width:var(--container-xl);margin-inline:auto}.container-sm{max-width:var(--container-sm)}.container-md{max-width:var(--container-md)}.container-lg{max-width:var(--container-lg)}.container-xl{max-width:var(--container-xl)}.container-2xl{max-width:var(--container-2xl)}.container-full{max-width:100%}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.aspect-auto{aspect-ratio:auto}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:16/9}.aspect-photo{aspect-ratio:4/3}.float-start{float:inline-start}.float-end{float:inline-end}.float-none{float:none}.clearfix:after{content:"";clear:both;display:table}.isolate{isolation:isolate}.isolation-auto{isolation:auto}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-fill{object-fit:fill}.object-none{object-fit:none}.object-scale-down{object-fit:scale-down}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-row-rev{flex-direction:row-reverse}.flex-col-rev{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-rev{flex-wrap:wrap-reverse}.grow{flex-grow:1}.grow-0{flex-grow:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.basis-auto{flex-basis:auto}.basis-0{flex-basis:0}.basis-full{flex-basis:100%}.basis-1-2{flex-basis:50%}.basis-1-3{flex-basis:33.333%}.basis-2-3{flex-basis:66.667%}.basis-1-4{flex-basis:25%}.basis-3-4{flex-basis:75%}.flex-1{flex:1}.flex-auto{flex:auto}.flex-initial{flex:0 auto}.flex-none{flex:none}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-auto{align-self:auto}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-stretch{align-self:stretch}.flex-center{justify-content:center;align-items:center;display:flex}.stack{gap:var(--stack-gap,var(--space-4));flex-direction:column;display:flex}.cluster{gap:var(--cluster-gap,var(--space-3));flex-wrap:wrap;align-items:center;display:flex}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-none{grid-template-columns:none}.grid-auto-fit{grid-template-columns:repeat(auto-fit, minmax(var(--grid-min,16rem), 1fr))}.grid-auto-fill{grid-template-columns:repeat(auto-fill, minmax(var(--grid-min,16rem), 1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.grid-rows-none{grid-template-rows:none}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-6{grid-column:span 6/span 6}.col-span-12{grid-column:span 12/span 12}.col-span-full{grid-column:1/-1}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.row-span-3{grid-row:span 3/span 3}.row-span-full{grid-row:1/-1}.gap-0{gap:0}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.gap-10{gap:var(--space-10)}.gap-12{gap:var(--space-12)}.gap-16{gap:var(--space-16)}.gap-x-0{column-gap:0}.gap-x-2{column-gap:var(--space-2)}.gap-x-4{column-gap:var(--space-4)}.gap-x-6{column-gap:var(--space-6)}.gap-x-8{column-gap:var(--space-8)}.gap-y-0{row-gap:0}.gap-y-2{row-gap:var(--space-2)}.gap-y-4{row-gap:var(--space-4)}.gap-y-6{row-gap:var(--space-6)}.gap-y-8{row-gap:var(--space-8)}.place-items-center{place-items:center}.place-items-start{place-items:start}.place-items-end{place-items:end}.place-content-center{place-content:center}.subgrid-cols{grid-template-columns:subgrid}.subgrid-rows{grid-template-rows:subgrid}.m-0{margin:0}.m-1{margin:var(--space-1)}.m-2{margin:var(--space-2)}.m-3{margin:var(--space-3)}.m-4{margin:var(--space-4)}.m-6{margin:var(--space-6)}.m-8{margin:var(--space-8)}.m-auto{margin:auto}.mx-0{margin-inline:0}.mx-2{margin-inline:var(--space-2)}.mx-4{margin-inline:var(--space-4)}.mx-6{margin-inline:var(--space-6)}.mx-8{margin-inline:var(--space-8)}.mx-auto{margin-inline:auto}.my-0{margin-block:0}.my-2{margin-block:var(--space-2)}.my-4{margin-block:var(--space-4)}.my-6{margin-block:var(--space-6)}.my-8{margin-block:var(--space-8)}.my-12{margin-block:var(--space-12)}.mt-0{margin-block-start:0}.mt-2{margin-block-start:var(--space-2)}.mt-4{margin-block-start:var(--space-4)}.mt-6{margin-block-start:var(--space-6)}.mt-8{margin-block-start:var(--space-8)}.mt-12{margin-block-start:var(--space-12)}.mt-16{margin-block-start:var(--space-16)}.mb-0{margin-block-end:0}.mb-2{margin-block-end:var(--space-2)}.mb-4{margin-block-end:var(--space-4)}.mb-6{margin-block-end:var(--space-6)}.mb-8{margin-block-end:var(--space-8)}.ms-0{margin-inline-start:0}.ms-2{margin-inline-start:var(--space-2)}.ms-4{margin-inline-start:var(--space-4)}.ms-auto{margin-inline-start:auto}.me-0{margin-inline-end:0}.me-2{margin-inline-end:var(--space-2)}.me-4{margin-inline-end:var(--space-4)}.me-auto{margin-inline-end:auto}.p-0{padding:0}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.p-10{padding:var(--space-10)}.p-12{padding:var(--space-12)}.px-0{padding-inline:0}.px-2{padding-inline:var(--space-2)}.px-3{padding-inline:var(--space-3)}.px-4{padding-inline:var(--space-4)}.px-6{padding-inline:var(--space-6)}.px-8{padding-inline:var(--space-8)}.py-0{padding-block:0}.py-1{padding-block:var(--space-1)}.py-2{padding-block:var(--space-2)}.py-3{padding-block:var(--space-3)}.py-4{padding-block:var(--space-4)}.py-6{padding-block:var(--space-6)}.py-8{padding-block:var(--space-8)}.pt-0{padding-block-start:0}.pt-4{padding-block-start:var(--space-4)}.pt-8{padding-block-start:var(--space-8)}.pb-0{padding-block-end:0}.pb-4{padding-block-end:var(--space-4)}.pb-8{padding-block-end:var(--space-8)}.ps-0{padding-inline-start:0}.ps-4{padding-inline-start:var(--space-4)}.pe-0{padding-inline-end:0}.pe-4{padding-inline-end:var(--space-4)}.space-y-1>*+*{margin-block-start:var(--space-1)}.space-y-2>*+*{margin-block-start:var(--space-2)}.space-y-3>*+*{margin-block-start:var(--space-3)}.space-y-4>*+*{margin-block-start:var(--space-4)}.space-y-6>*+*{margin-block-start:var(--space-6)}.space-y-8>*+*{margin-block-start:var(--space-8)}.space-x-1>*+*{margin-inline-start:var(--space-1)}.space-x-2>*+*{margin-inline-start:var(--space-2)}.space-x-3>*+*{margin-inline-start:var(--space-3)}.space-x-4>*+*{margin-inline-start:var(--space-4)}.space-x-6>*+*{margin-inline-start:var(--space-6)}.w-0{width:0}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.w-min{width:min-content}.w-max{width:max-content}.w-fit{width:fit-content}.w-1-2{width:50%}.w-1-3{width:33.333%}.w-2-3{width:66.667%}.w-1-4{width:25%}.w-3-4{width:75%}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-none{max-width:none}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-full{max-width:100%}.max-w-prose{max-width:65ch}.h-0{height:0}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.h-dvh{height:100dvh}.h-min{height:min-content}.h-max{height:max-content}.h-fit{height:fit-content}.min-h-0{min-height:0}.min-h-full{min-height:100%}.min-h-screen{min-height:100vh}.min-h-dvh{min-height:100dvh}.max-h-none{max-height:none}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.size-4{width:var(--space-4);height:var(--space-4)}.size-6{width:var(--space-6);height:var(--space-6)}.size-8{width:var(--space-8);height:var(--space-8)}.size-10{width:var(--space-10);height:var(--space-10)}.size-12{width:var(--space-12);height:var(--space-12)}.size-full{width:100%;height:100%}.font-sans{font-family:var(--font-sans)}.font-serif{font-family:var(--font-serif)}.font-mono{font-family:var(--font-mono)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-md{font-size:var(--text-md)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.font-thin{font-weight:var(--weight-thin)}.font-light{font-weight:var(--weight-light)}.font-normal{font-weight:var(--weight-normal)}.font-medium{font-weight:var(--weight-medium)}.font-semibold{font-weight:var(--weight-semibold)}.font-bold{font-weight:var(--weight-bold)}.font-extrabold{font-weight:var(--weight-extrabold)}.font-black{font-weight:var(--weight-black)}.leading-none{line-height:var(--leading-none)}.leading-tight{line-height:var(--leading-tight)}.leading-snug{line-height:var(--leading-snug)}.leading-normal{line-height:var(--leading-normal)}.leading-relaxed{line-height:var(--leading-relaxed)}.leading-loose{line-height:var(--leading-loose)}.tracking-tight{letter-spacing:var(--tracking-tight)}.tracking-normal{letter-spacing:var(--tracking-normal)}.tracking-wide{letter-spacing:var(--tracking-wide)}.tracking-wider{letter-spacing:var(--tracking-wider)}.text-start{text-align:start}.text-end{text-align:end}.text-center{text-align:center}.text-justify{text-align:justify}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}.text-default{color:var(--color-text)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-inverse{color:var(--color-text-inverse)}.text-link{color:var(--color-text-link)}.text-primary{color:var(--color-primary-500)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-danger{color:var(--color-danger)}.text-info{color:var(--color-info)}.text-inherit{color:inherit}.text-current{color:currentColor}.bg-default{background-color:var(--color-bg)}.bg-subtle{background-color:var(--color-bg-subtle)}.bg-muted{background-color:var(--color-bg-muted)}.bg-emphasis{background-color:var(--color-bg-emphasis)}.bg-surface-1{background-color:var(--color-surface-1)}.bg-surface-2{background-color:var(--color-surface-2)}.bg-surface-3{background-color:var(--color-surface-3)}.bg-primary{background-color:var(--color-primary-500)}.bg-success{background-color:var(--color-success-bg)}.bg-warning{background-color:var(--color-warning-bg)}.bg-danger{background-color:var(--color-danger-bg)}.bg-info{background-color:var(--color-info-bg)}.bg-transparent{background-color:#0000}.bg-primary-50{background-color:var(--color-primary-50)}.bg-primary-100{background-color:var(--color-primary-100)}.bg-primary-200{background-color:var(--color-primary-200)}.bg-primary-300{background-color:var(--color-primary-300)}.bg-primary-500{background-color:var(--color-primary-500)}.bg-primary-700{background-color:var(--color-primary-700)}.bg-primary-900{background-color:var(--color-primary-900)}.opacity-0{opacity:0}.opacity-5{opacity:.05}.opacity-10{opacity:.1}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-90{opacity:.9}.opacity-100{opacity:1}.border{border:var(--border-width-thin) solid var(--color-border)}.border-0{border:0}.border-t{border-block-start:var(--border-width-thin) solid var(--color-border)}.border-b{border-block-end:var(--border-width-thin) solid var(--color-border)}.border-s{border-inline-start:var(--border-width-thin) solid var(--color-border)}.border-e{border-inline-end:var(--border-width-thin) solid var(--color-border)}.border-2{border-width:var(--border-width-medium)}.border-4{border-width:var(--border-width-thick)}.border-default{border-color:var(--color-border)}.border-subtle{border-color:var(--color-border-subtle)}.border-strong{border-color:var(--color-border-strong)}.border-primary{border-color:var(--color-primary-500)}.border-success{border-color:var(--color-success)}.border-warning{border-color:var(--color-warning)}.border-danger{border-color:var(--color-danger)}.border-transparent{border-color:#0000}.rounded-none{border-radius:var(--radius-none)}.rounded-sm{border-radius:var(--radius-sm)}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:var(--radius-full)}.rounded-t-lg{border-start-start-radius:var(--radius-lg);border-start-end-radius:var(--radius-lg)}.rounded-b-lg{border-end-end-radius:var(--radius-lg);border-end-start-radius:var(--radius-lg)}.divide-y>*+*{border-block-start:var(--border-width-thin) solid var(--color-border)}.divide-x>*+*{border-inline-start:var(--border-width-thin) solid var(--color-border)}.divide-subtle>*+*{border-color:var(--color-border-subtle)}.ring-1{box-shadow:0 0 0 1px var(--color-border)}.ring-2{box-shadow:0 0 0 2px var(--color-primary-500)}.ring-0{box-shadow:none}.shadow-none{box-shadow:var(--shadow-none)}.shadow-1{box-shadow:var(--shadow-1)}.shadow-2{box-shadow:var(--shadow-2)}.shadow-3{box-shadow:var(--shadow-3)}.shadow-4{box-shadow:var(--shadow-4)}.shadow-5{box-shadow:var(--shadow-5)}.shadow-inset{box-shadow:var(--shadow-inset)}.backdrop-blur-sm{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.backdrop-blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.backdrop-blur-lg{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.backdrop-blur-xl{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.blur-sm{filter:blur(4px)}.blur{filter:blur(8px)}.blur-lg{filter:blur(16px)}.grayscale{filter:grayscale()}.transition-none{transition:none}.transition-all{transition:all var(--duration-normal) var(--ease-default)}.transition-colors{transition:color var(--duration-normal) var(--ease-default), background-color var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default)}.transition-opacity{transition:opacity var(--duration-normal) var(--ease-default)}.transition-shadow{transition:box-shadow var(--duration-normal) var(--ease-default)}.transition-transform{transition:transform var(--duration-normal) var(--ease-default)}.duration-fast{transition-duration:var(--duration-fast)}.duration-normal{transition-duration:var(--duration-normal)}.duration-slow{transition-duration:var(--duration-slow)}.ease-default{transition-timing-function:var(--ease-default)}.ease-in{transition-timing-function:var(--ease-in)}.ease-out{transition-timing-function:var(--ease-out)}.ease-bounce{transition-timing-function:var(--ease-bounce)}.ease-spring{transition-timing-function:var(--ease-spring)}.scale-90{transform:scale(.9)}.scale-95{transform:scale(.95)}.scale-100{transform:scale(1)}.scale-105{transform:scale(1.05)}.scale-110{transform:scale(1.1)}.rotate-0{transform:rotate(0)}.rotate-45{transform:rotate(45deg)}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}.translate-x-0{transform:translate(0)}.translate-y-0{transform:translateY(0)}.-translate-y-1{transform:translateY(calc(-1 * var(--space-1)))}.-translate-y-2{transform:translateY(calc(-1 * var(--space-2)))}.origin-center{transform-origin:50%}.origin-top{transform-origin:top}.origin-bottom{transform-origin:bottom}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-auto{inset:auto}.top-0{top:0}.top-1{top:var(--space-1)}.top-2{top:var(--space-2)}.top-4{top:var(--space-4)}.top-auto{top:auto}.bottom-0{bottom:0}.bottom-4{bottom:var(--space-4)}.start-0{inset-inline-start:0}.start-4{inset-inline-start:var(--space-4)}.end-0{inset-inline-end:0}.end-4{inset-inline-end:var(--space-4)}.z-below{z-index:var(--z-below)}.z-base{z-index:var(--z-base)}.z-raised{z-index:var(--z-raised)}.z-dropdown{z-index:var(--z-dropdown)}.z-sticky{z-index:var(--z-sticky)}.z-overlay{z-index:var(--z-overlay)}.z-modal{z-index:var(--z-modal)}.z-popover{z-index:var(--z-popover)}.z-toast{z-index:var(--z-toast)}.z-tooltip{z-index:var(--z-tooltip)}.cursor-auto{cursor:auto}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.cursor-text{cursor:text}.cursor-move{cursor:move}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-not-allowed{cursor:not-allowed}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.select-none{-webkit-user-select:none;user-select:none}.select-text{-webkit-user-select:text;user-select:text}.select-all{-webkit-user-select:all;user-select:all}.select-auto{-webkit-user-select:auto;user-select:auto}.resize-none{resize:none}.resize-y{resize:vertical}.resize-x{resize:horizontal}.resize{resize:both}.appearance-none{appearance:none}.scroll-smooth{scroll-behavior:smooth}.scroll-auto{scroll-behavior:auto}.snap-start{scroll-snap-align:start}.snap-center{scroll-snap-align:center}.snap-end{scroll-snap-align:end}.snap-x{scroll-snap-type:x mandatory}.snap-y{scroll-snap-type:y mandatory}.touch-none{touch-action:none}.touch-auto{touch-action:auto}.touch-pan-x{touch-action:pan-x}.touch-pan-y{touch-action:pan-y}@media (width>=640px){.sm\:block{display:block}.sm\:hidden{display:none}.sm\:flex{display:flex}.sm\:grid{display:grid}.sm\:inline{display:inline}.sm\:flex-row{flex-direction:row}.sm\:flex-col{flex-direction:column}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:gap-4{gap:var(--space-4)}.sm\:gap-6{gap:var(--space-6)}.sm\:p-4{padding:var(--space-4)}.sm\:p-6{padding:var(--space-6)}.sm\:px-6{padding-inline:var(--space-6)}.sm\:text-start{text-align:start}.sm\:text-center{text-align:center}.sm\:w-auto{width:auto}.sm\:w-1-2{width:50%}.sm\:text-lg{font-size:var(--text-lg)}}@media (width>=768px){.md\:block{display:block}.md\:hidden{display:none}.md\:flex{display:flex}.md\:grid{display:grid}.md\:inline{display:inline}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:gap-4{gap:var(--space-4)}.md\:gap-6{gap:var(--space-6)}.md\:gap-8{gap:var(--space-8)}.md\:p-6{padding:var(--space-6)}.md\:p-8{padding:var(--space-8)}.md\:px-8{padding-inline:var(--space-8)}.md\:text-start{text-align:start}.md\:text-center{text-align:center}.md\:w-auto{width:auto}.md\:w-1-2{width:50%}.md\:w-1-3{width:33.333%}.md\:text-xl{font-size:var(--text-xl)}.md\:text-2xl{font-size:var(--text-2xl)}}@media (width>=1024px){.lg\:block{display:block}.lg\:hidden{display:none}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:inline{display:inline}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:gap-6{gap:var(--space-6)}.lg\:gap-8{gap:var(--space-8)}.lg\:p-8{padding:var(--space-8)}.lg\:p-12{padding:var(--space-12)}.lg\:px-12{padding-inline:var(--space-12)}.lg\:w-auto{width:auto}.lg\:w-1-3{width:33.333%}.lg\:w-1-4{width:25%}.lg\:text-3xl{font-size:var(--text-3xl)}.lg\:text-4xl{font-size:var(--text-4xl)}}@media (width>=1280px){.xl\:block{display:block}.xl\:hidden{display:none}.xl\:flex{display:flex}.xl\:grid{display:grid}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:gap-8{gap:var(--space-8)}.xl\:gap-10{gap:var(--space-10)}.xl\:p-12{padding:var(--space-12)}.xl\:px-16{padding-inline:var(--space-16)}}.cq-container{container-type:inline-size}.cq-container-sz{container-type:size}.cq-normal{container-type:normal}.cq-name-card{container-name:card}.cq-name-sidebar{container-name:sidebar}.cq-name-main{container-name:main}.cq-name-hero{container-name:hero}@container (width>=20rem){.cq-sm\:flex-row{flex-direction:row}.cq-sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cq-sm\:hidden{display:none}.cq-sm\:block{display:block}}@container (width>=32rem){.cq-md\:flex-row{flex-direction:row}.cq-md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cq-md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cq-md\:hidden{display:none}.cq-md\:block{display:block}.cq-md\:text-lg{font-size:var(--text-lg)}}@container (width>=48rem){.cq-lg\:flex-row{flex-direction:row}.cq-lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cq-lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cq-lg\:hidden{display:none}.cq-lg\:block{display:block}.cq-lg\:text-xl{font-size:var(--text-xl)}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.focus-ring:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.skip-link{top:-100%;left:var(--space-4);z-index:var(--z-tooltip);padding:var(--space-2) var(--space-4);background:var(--color-primary-500);color:#fff;border-radius:var(--radius-md);font-weight:var(--weight-semibold);text-decoration:none;position:absolute;&:focus{top:var(--space-4)}}@media (prefers-reduced-motion:reduce){.motion-safe\:animate{animation:none}.motion-safe\:transition{transition:none}}@media (prefers-contrast:more){.contrast-more\:border-strong{border-color:var(--color-border-strong)}.contrast-more\:text-default{color:var(--color-text)}}[data-spacing=none]{--intent-space:0}[data-spacing=tight]{--intent-space:var(--space-1)}[data-spacing=compact]{--intent-space:var(--space-2)}[data-spacing=comfortable]{--intent-space:var(--space-4)}[data-spacing=relaxed]{--intent-space:var(--space-6)}[data-spacing=spacious]{--intent-space:var(--space-8)}[data-spacing=airy]{--intent-space:var(--space-12)}[data-density=compact]{gap:var(--space-1);padding:var(--space-2)}[data-density=comfortable]{gap:var(--space-3);padding:var(--space-4)}[data-density=spacious]{gap:var(--space-6);padding:var(--space-8)}[data-reading=compact]{max-width:45ch;line-height:var(--leading-snug)}[data-reading=default]{max-width:65ch;line-height:var(--leading-normal)}[data-reading=long-form]{max-width:75ch;line-height:var(--leading-relaxed);font-size:var(--text-md)}[data-weight=subtle]{opacity:.7;font-weight:var(--weight-light)}[data-weight=normal]{opacity:1;font-weight:var(--weight-normal)}[data-weight=emphasis]{font-weight:var(--weight-semibold)}[data-weight=strong]{font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}[data-elevation=flat]{box-shadow:var(--shadow-none)}[data-elevation=raised]{box-shadow:var(--shadow-2)}[data-elevation=floating]{box-shadow:var(--shadow-4)}[data-elevation=overlay]{box-shadow:var(--shadow-5)}}@layer aegis.components{.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:var(--leading-tight);white-space:nowrap;border-radius:var(--radius-md);border:var(--border-width-thin) solid transparent;cursor:pointer;transition:all var(--duration-fast) var(--ease-default);-webkit-user-select:none;user-select:none;background-color:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500);text-decoration:none;display:inline-flex;&:hover:not(:disabled){background-color:var(--color-primary-600);border-color:var(--color-primary-600)}&:active:not(:disabled){background-color:var(--color-primary-700);transform:translateY(1px)}&:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}&:disabled,&[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}&[aria-busy=true]{cursor:wait;opacity:.7}}.btn-secondary{background-color:var(--color-secondary-500);border-color:var(--color-secondary-500);color:#fff;&:hover:not(:disabled){background-color:var(--color-secondary-600);border-color:var(--color-secondary-600)}}.btn-outline{border-color:var(--color-border-strong);color:var(--color-text);background-color:#0000;&:hover:not(:disabled){background-color:var(--color-bg-subtle);border-color:var(--color-text-secondary)}}.btn-ghost{color:var(--color-text);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--color-bg-muted)}}.btn-danger{background-color:var(--color-danger);border-color:var(--color-danger);color:#fff;&:hover:not(:disabled){background-color:oklch(from var(--color-danger) calc(l - .05) c h)}}.btn-success{background-color:var(--color-success);border-color:var(--color-success);color:#fff;&:hover:not(:disabled){background-color:oklch(from var(--color-success) calc(l - .05) c h)}}.btn-xs{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);border-radius:var(--radius-sm)}.btn-sm{padding:var(--space-1-5) var(--space-3);font-size:var(--text-sm)}.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-md)}.btn-xl{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);border-radius:var(--radius-lg)}.btn-icon{padding:var(--space-2);aspect-ratio:1}.btn-pill{border-radius:var(--radius-full)}.btn-full{width:100%}.btn-group{display:inline-flex;&>.btn{border-radius:0}&>.btn:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}&>.btn:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}&>.btn+.btn{margin-inline-start:calc(-1 * var(--border-width-thin))}}@container style(--surface-tone:dark){.btn-outline{border-color:var(--color-border);color:var(--color-text-inverse)}}.card{background-color:var(--color-surface-1);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-xl);transition:box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default);overflow:hidden;container-type:inline-size}.card-hoverable{&:hover{box-shadow:var(--shadow-3);transform:translateY(-2px)}}.card-elevated{box-shadow:var(--shadow-2);border:none}.card-flat{background-color:var(--color-bg-subtle);border:none}.card-header{padding:var(--space-4) var(--space-5);border-block-end:var(--border-width-thin) solid var(--color-border-subtle)}.card-body{padding:var(--space-5)}.card-footer{padding:var(--space-4) var(--space-5);border-block-start:var(--border-width-thin) solid var(--color-border-subtle);background-color:var(--color-bg-subtle)}.card-media{&>img,&>video{object-fit:cover;width:100%;height:auto}}.card-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);line-height:var(--leading-tight);margin-block-end:var(--space-1)}.card-description{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}@container (width<20rem){.card-body{padding:var(--space-3)}.card-title{font-size:var(--text-base)}}@container (width>=32rem){.card-horizontal{grid-template-columns:1fr 2fr;display:grid}}.modal{border-radius:var(--radius-xl);background-color:var(--color-surface-1);width:100%;max-width:min(90vw,32rem);color:var(--color-text);box-shadow:var(--shadow-5);border:none;padding:0;overflow:hidden;&::backdrop{background:var(--color-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}&[open]{animation:modal-enter var(--duration-normal) var(--ease-spring)}}.modal-sm{max-width:min(90vw,24rem)}.modal-lg{max-width:min(90vw,48rem)}.modal-xl{max-width:min(90vw,64rem)}.modal-full{border-radius:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0}.modal-header{padding:var(--space-4) var(--space-5);border-block-end:var(--border-width-thin) solid var(--color-border-subtle);justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);margin:0}.modal-body{padding:var(--space-5);max-height:60vh;overflow-y:auto}.modal-footer{justify-content:flex-end;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-block-start:var(--border-width-thin) solid var(--color-border-subtle);background-color:var(--color-bg-subtle);display:flex}.modal-close{border-radius:var(--radius-md);width:2rem;height:2rem;color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex;&:hover{background-color:var(--color-bg-muted);color:var(--color-text)}}@keyframes modal-enter{0%{opacity:0;transform:translateY(1rem)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.navbar{padding:var(--space-3) var(--space-6);background-color:var(--color-surface-1);border-block-end:var(--border-width-thin) solid var(--color-border);z-index:var(--z-sticky);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0;container-type:inline-size}.navbar-transparent{background-color:#0000;border-block-end:none}.navbar-brand{align-items:center;gap:var(--space-2);font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--color-text);white-space:nowrap;text-decoration:none;display:flex}.navbar-menu{align-items:center;gap:var(--space-1);margin:0;padding:0;list-style:none;display:flex}.navbar-link{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-default);align-items:center;text-decoration:none;display:inline-flex;&:hover{color:var(--color-text);background-color:var(--color-bg-subtle)}&[aria-current=page]{color:var(--color-primary-500);background-color:var(--color-primary-50);font-weight:var(--weight-semibold)}}.navbar-actions{align-items:center;gap:var(--space-2);display:flex}.navbar-toggle{padding:var(--space-2);color:var(--color-text);cursor:pointer;background:0 0;border:none;display:none}@container (width<48rem){.navbar-menu{display:none}.navbar-toggle{display:flex}.navbar-menu[data-open]{background-color:var(--color-surface-1);border-block-end:var(--border-width-thin) solid var(--color-border);padding:var(--space-4);box-shadow:var(--shadow-3);flex-direction:column;display:flex;position:absolute;top:100%;left:0;right:0}}.form-group{margin-block-end:var(--space-5)}.form-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);margin-block-end:var(--space-1-5);display:block}.form-label-required:after{content:" *";color:var(--color-danger)}.form-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-block-start:var(--space-1)}.form-error{font-size:var(--text-xs);color:var(--color-danger);margin-block-start:var(--space-1)}.input{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text);background-color:var(--color-surface-1);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);display:block;&::placeholder{color:var(--color-text-muted)}&:hover:not(:disabled){border-color:var(--color-border-strong)}&:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px oklch(from var(--color-primary-500) l c h / .15);outline:none}&[aria-invalid=true]{border-color:var(--color-danger);box-shadow:0 0 0 3px oklch(from var(--color-danger) l c h / .1)}&:disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-bg-muted)}}.input-sm{padding:var(--space-1-5) var(--space-2);font-size:var(--text-sm)}.input-lg{padding:var(--space-3) var(--space-4);font-size:var(--text-md)}.input-group{align-items:stretch;display:flex;&>.input{border-radius:0;flex:1}&>:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}&>:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}}.input-addon{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);background-color:var(--color-bg-subtle);border:var(--border-width-thin) solid var(--color-border);color:var(--color-text-secondary);align-items:center;display:inline-flex}.checkbox,.radio{align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--text-sm);display:inline-flex;& input{accent-color:var(--color-primary-500);width:1.125em;height:1.125em}}.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-inline-end:var(--space-8)}.textarea{resize:vertical;min-height:6rem}.table-wrapper{border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-lg);overflow-x:auto}.table{width:100%;font-size:var(--text-sm);border-collapse:collapse;& th,& td{padding:var(--space-3) var(--space-4);text-align:start}& th{font-weight:var(--weight-semibold);color:var(--color-text-secondary);background-color:var(--color-bg-subtle);border-block-end:var(--border-width-medium) solid var(--color-border);white-space:nowrap}& td{border-block-end:var(--border-width-thin) solid var(--color-border-subtle)}& tr:last-child td{border-block-end:none}}.table-striped{& tbody tr:nth-child(2n){background-color:var(--color-bg-subtle)}}.table-hover{& tbody tr:hover{background-color:var(--color-bg-muted)}}.table-compact{& th,& td{padding:var(--space-2) var(--space-3)}}.alert{gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:var(--leading-normal);border:var(--border-width-thin) solid var(--color-border);background-color:var(--color-bg-subtle);color:var(--color-text);display:flex}.alert-info{background-color:var(--color-info-bg);border-color:var(--color-info);color:var(--color-info-text)}.alert-success{background-color:var(--color-success-bg);border-color:var(--color-success);color:var(--color-success-text)}.alert-warning{background-color:var(--color-warning-bg);border-color:var(--color-warning);color:var(--color-warning-text)}.alert-danger{background-color:var(--color-danger-bg);border-color:var(--color-danger);color:var(--color-danger-text)}.alert-title{font-weight:var(--weight-semibold);margin-block-end:var(--space-1)}.alert-dismiss{padding:var(--space-1);cursor:pointer;opacity:.6;background:0 0;border:none;margin-inline-start:auto;&:hover{opacity:1}}.badge{align-items:center;gap:var(--space-1);padding:var(--space-0-5) var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--leading-tight);border-radius:var(--radius-full);white-space:nowrap;background-color:var(--color-bg-muted);color:var(--color-text-secondary);display:inline-flex}.badge-primary{background-color:var(--color-primary-100);color:var(--color-primary-700)}.badge-secondary{background-color:var(--color-secondary-100);color:var(--color-secondary-700)}.badge-success{background-color:var(--color-success-bg);color:var(--color-success-text)}.badge-warning{background-color:var(--color-warning-bg);color:var(--color-warning-text)}.badge-danger{background-color:var(--color-danger-bg);color:var(--color-danger-text)}.badge-info{background-color:var(--color-info-bg);color:var(--color-info-text)}.badge-outline{border:var(--border-width-thin) solid currentColor;background-color:#0000}.badge-dot:before{content:"";border-radius:var(--radius-full);background-color:currentColor;width:.375rem;height:.375rem}.badge-lg{padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}.tabs{border-block-end:var(--border-width-medium) solid var(--color-border);gap:var(--space-1);display:flex;overflow-x:auto}.tab{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;transition:all var(--duration-fast) var(--ease-default);background:0 0;border:none;border-block-end:2px solid #0000;margin-block-end:-2px;display:inline-flex;&:hover{color:var(--color-text);border-block-end-color:var(--color-border-strong)}&[aria-selected=true]{color:var(--color-primary-500);border-block-end-color:var(--color-primary-500);font-weight:var(--weight-semibold)}}.tabs-pills{border-block-end:none;& .tab{border-radius:var(--radius-md);border-block-end:none;margin-block-end:0;&[aria-selected=true]{background-color:var(--color-primary-50);color:var(--color-primary-700)}}}.tab-panel{padding-block-start:var(--space-4);&[hidden]{display:none}}.dropdown{display:inline-block;position:relative}.dropdown-trigger{cursor:pointer}.dropdown-menu{top:100%;z-index:var(--z-dropdown);min-width:12rem;padding:var(--space-1);background-color:var(--color-surface-1);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);opacity:0;visibility:hidden;transition:all var(--duration-fast) var(--ease-default);margin-block-start:var(--space-1);position:absolute;inset-inline-start:0;transform:translateY(-.5rem)}.dropdown[data-open]>.dropdown-menu,.dropdown:focus-within>.dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-end{inset-inline:auto 0}.dropdown-item{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--color-text);border-radius:var(--radius-md);cursor:pointer;text-align:start;transition:background-color var(--duration-fast) var(--ease-default);background:0 0;border:none;text-decoration:none;display:flex;&:hover{background-color:var(--color-bg-subtle)}&[aria-selected=true]{background-color:var(--color-primary-50);color:var(--color-primary-700)}&:disabled,&[aria-disabled=true]{opacity:.5;cursor:not-allowed}}.dropdown-separator{height:0;margin:var(--space-1);border-block-start:var(--border-width-thin) solid var(--color-border-subtle)}.dropdown-label{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wider)}.tooltip{position:relative;&:after{content:attr(data-tooltip);bottom:calc(100% + var(--space-2));padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;color:var(--color-text-inverse);background-color:var(--color-bg-emphasis);border-radius:var(--radius-md);opacity:0;visibility:hidden;transition:all var(--duration-fast) var(--ease-default);pointer-events:none;z-index:var(--z-tooltip);position:absolute;left:50%;transform:translate(-50%)}&:hover:after,&:focus-visible:after{opacity:1;visibility:visible}}.tooltip-bottom:after{bottom:auto;top:calc(100% + var(--space-2))}.tooltip-start:after{left:0;transform:none}.tooltip-end:after{left:auto;right:0;transform:none}.accordion{border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.accordion-item{border-block-end:var(--border-width-thin) solid var(--color-border-subtle);&:last-child{border-block-end:none}}.accordion-trigger{width:100%;padding:var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);cursor:pointer;text-align:start;transition:background-color var(--duration-fast) var(--ease-default);background:0 0;border:none;justify-content:space-between;align-items:center;display:flex;&:hover{background-color:var(--color-bg-subtle)}&[aria-expanded=true]{font-weight:var(--weight-semibold)}}.accordion-icon{transition:transform var(--duration-normal) var(--ease-default);[aria-expanded=true]>&{transform:rotate(180deg)}}.accordion-content{padding:0 var(--space-4) var(--space-4);font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed);&[hidden]{display:none}}.breadcrumb{align-items:center;gap:var(--space-1);font-size:var(--text-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.breadcrumb-item{align-items:center;gap:var(--space-1);color:var(--color-text-muted);display:inline-flex;& a{color:var(--color-text-secondary);text-decoration:none;&:hover{color:var(--color-text);text-decoration:underline}}&[aria-current=page]{color:var(--color-text);font-weight:var(--weight-medium)}&:not(:last-child):after{content:"/";color:var(--color-text-muted);margin-inline-start:var(--space-1)}}.pagination{align-items:center;gap:var(--space-1);margin:0;padding:0;list-style:none;display:flex}.page-link{min-width:2.25rem;height:2.25rem;padding:var(--space-1) var(--space-2);font-size:var(--text-sm);color:var(--color-text-secondary);border:var(--border-width-thin) solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);background:0 0;justify-content:center;align-items:center;text-decoration:none;display:inline-flex;&:hover{background-color:var(--color-bg-subtle);border-color:var(--color-border)}&[aria-current=page]{background-color:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}&:disabled{opacity:.4;cursor:not-allowed}}.avatar{border-radius:var(--radius-full);background-color:var(--color-primary-100);width:2.5rem;height:2.5rem;color:var(--color-primary-700);font-weight:var(--weight-semibold);font-size:var(--text-sm);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;overflow:hidden;& img{object-fit:cover;width:100%;height:100%}}.avatar-xs{width:1.5rem;height:1.5rem;font-size:var(--text-xs)}.avatar-sm{width:2rem;height:2rem;font-size:var(--text-xs)}.avatar-lg{width:3rem;height:3rem;font-size:var(--text-md)}.avatar-xl{width:4rem;height:4rem;font-size:var(--text-lg)}.avatar-2xl{width:5rem;height:5rem;font-size:var(--text-xl)}.avatar-square{border-radius:var(--radius-lg)}.avatar-group{display:flex;&>.avatar{border:2px solid var(--color-surface-1);margin-inline-start:-.5rem}&>.avatar:first-child{margin-inline-start:0}}.progress{background-color:var(--color-bg-muted);border-radius:var(--radius-full);width:100%;height:.5rem;overflow:hidden}.progress-bar{background-color:var(--color-primary-500);border-radius:var(--radius-full);height:100%;transition:width var(--duration-slow) var(--ease-out)}.progress-success .progress-bar{background-color:var(--color-success)}.progress-warning .progress-bar{background-color:var(--color-warning)}.progress-danger .progress-bar{background-color:var(--color-danger)}.progress-lg{height:.75rem}.progress-sm{height:.25rem}.progress-indeterminate .progress-bar{width:30%;animation:progress-slide 1.5s var(--ease-in-out) infinite}@keyframes progress-slide{0%{transform:translate(-100%)}to{transform:translate(400%)}}.skeleton{background:linear-gradient(90deg, var(--color-bg-muted) 25%, var(--color-bg-subtle) 37%, var(--color-bg-muted) 63%);animation:skeleton-pulse 1.5s var(--ease-in-out) infinite;border-radius:var(--radius-md);background-size:200% 100%}.skeleton-text{height:1em;border-radius:var(--radius-sm);margin-block-end:var(--space-2)}.skeleton-heading{width:60%;height:1.5em;margin-block-end:var(--space-3)}.skeleton-avatar{border-radius:var(--radius-full);width:2.5rem;height:2.5rem}.skeleton-image{aspect-ratio:16/9;width:100%}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.dialog{border-radius:var(--radius-xl);padding:var(--space-6);background-color:var(--color-surface-1);max-width:min(90vw,28rem);box-shadow:var(--shadow-5);color:var(--color-text);border:none;&::backdrop{background:var(--color-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.dialog-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);margin-block-end:var(--space-2)}.dialog-description{font-size:var(--text-sm);color:var(--color-text-secondary);margin-block-end:var(--space-6)}.dialog-actions{justify-content:flex-end;gap:var(--space-3);display:flex}.toast-container{bottom:var(--space-6);z-index:var(--z-toast);gap:var(--space-3);pointer-events:none;flex-direction:column-reverse;display:flex;position:fixed;inset-inline-end:var(--space-6)}.toast-container-top{bottom:auto;top:var(--space-6);flex-direction:column}.toast{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background-color:var(--color-surface-1);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-lg);min-width:20rem;max-width:28rem;box-shadow:var(--shadow-4);pointer-events:auto;animation:toast-enter var(--duration-normal) var(--ease-spring);display:flex}.toast-success{border-inline-start:3px solid var(--color-success)}.toast-warning{border-inline-start:3px solid var(--color-warning)}.toast-danger{border-inline-start:3px solid var(--color-danger)}.toast-info{border-inline-start:3px solid var(--color-info)}.toast-title{font-size:var(--text-sm);font-weight:var(--weight-semibold)}.toast-message{font-size:var(--text-sm);color:var(--color-text-secondary)}.toast-dismiss{padding:var(--space-1);cursor:pointer;color:var(--color-text-muted);background:0 0;border:none;margin-inline-start:auto;&:hover{color:var(--color-text)}}@keyframes toast-enter{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-exit{animation:toast-exit var(--duration-fast) var(--ease-in) forwards}@keyframes toast-exit{to{opacity:0;transform:translate(100%)}}.toggle{align-items:center;gap:var(--space-2);cursor:pointer;display:inline-flex;position:relative;& input[type=checkbox]{appearance:none;background-color:var(--color-bg-muted);border-radius:var(--radius-full);width:2.5rem;height:1.375rem;transition:background-color var(--duration-fast) var(--ease-default);cursor:pointer;position:relative;&:after{content:"";border-radius:var(--radius-full);width:1.125rem;height:1.125rem;box-shadow:var(--shadow-1);transition:transform var(--duration-fast) var(--ease-bounce);background-color:#fff;position:absolute;top:2px;left:2px}&:checked{background-color:var(--color-primary-500);&:after{transform:translate(1.125rem)}}&:disabled{opacity:.5;cursor:not-allowed}}}.toggle-label{font-size:var(--text-sm);color:var(--color-text);-webkit-user-select:none;user-select:none}.chip{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-medium);border-radius:var(--radius-full);background-color:var(--color-bg-muted);color:var(--color-text);border:var(--border-width-thin) solid var(--color-border);white-space:nowrap;display:inline-flex}.chip-primary{background-color:var(--color-primary-50);border-color:var(--color-primary-200);color:var(--color-primary-700)}.chip-dismiss{border-radius:var(--radius-full);cursor:pointer;width:1rem;height:1rem;color:inherit;opacity:.6;background:0 0;border:none;justify-content:center;align-items:center;font-size:.625rem;display:inline-flex;&:hover{opacity:1;background-color:oklch(0% 0 0/.1)}}.chip-group{gap:var(--space-2);flex-wrap:wrap;display:flex}.divider{align-items:center;gap:var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm);display:flex;&:before,&:after{content:"";border-block-start:var(--border-width-thin) solid var(--color-border);flex:1}}.divider-vertical{flex-direction:column;align-self:stretch;&:before,&:after{border-block-start:none;border-inline-start:var(--border-width-thin) solid var(--color-border);flex:1}}.drawer{z-index:var(--z-modal);background-color:var(--color-surface-1);width:min(85vw,24rem);box-shadow:var(--shadow-5);transition:transform var(--duration-normal) var(--ease-spring);position:fixed;inset-block:0;inset-inline-start:0;overflow-y:auto;transform:translate(-100%)}.drawer[data-open],.drawer[open]{transform:translate(0)}.drawer-end{inset-inline:auto 0;transform:translate(100%);&[data-open],&[open]{transform:translate(0)}}.drawer-header{padding:var(--space-4) var(--space-5);border-block-end:var(--border-width-thin) solid var(--color-border-subtle);justify-content:space-between;align-items:center;display:flex}.drawer-body{padding:var(--space-5)}.drawer-backdrop{z-index:calc(var(--z-modal) - 1);background:var(--color-overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:all var(--duration-normal) var(--ease-default);position:fixed;inset:0}.drawer-backdrop[data-open]{opacity:1;visibility:visible}.popover{z-index:var(--z-popover);padding:var(--space-4);background-color:var(--color-surface-1);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-4);opacity:0;visibility:hidden;max-width:20rem;transition:all var(--duration-fast) var(--ease-default);position:absolute;&[data-open]{opacity:1;visibility:visible}}.popover-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);margin-block-end:var(--space-2)}.popover-body{font-size:var(--text-sm);color:var(--color-text-secondary)}}@layer aegis.animations{.animate-fade-in{animation:fade-in var(--duration-normal) var(--ease-out) both}.animate-fade-out{animation:fade-out var(--duration-normal) var(--ease-in) both}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.animate-slide-up{animation:slide-up var(--duration-normal) var(--ease-spring) both}.animate-slide-down{animation:slide-down var(--duration-normal) var(--ease-spring) both}.animate-slide-left{animation:slide-left var(--duration-normal) var(--ease-spring) both}.animate-slide-right{animation:slide-right var(--duration-normal) var(--ease-spring) both}@keyframes slide-up{0%{opacity:0;transform:translateY(1rem)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1rem)}}@keyframes slide-left{0%{opacity:0;transform:translate(1rem)}}@keyframes slide-right{0%{opacity:0;transform:translate(-1rem)}}.animate-scale-in{animation:scale-in var(--duration-normal) var(--ease-spring) both}@keyframes scale-in{0%{opacity:0;transform:scale(.9)}}.animate-spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.animate-pulse{animation:pulse 2s var(--ease-in-out) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-bounce{animation:1s infinite bounce}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-10%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(0)}}.stagger>:first-child{animation-delay:0s}.stagger>:nth-child(2){animation-delay:50ms}.stagger>:nth-child(3){animation-delay:.1s}.stagger>:nth-child(4){animation-delay:.15s}.stagger>:nth-child(5){animation-delay:.2s}.stagger>:nth-child(6){animation-delay:.25s}.stagger>:nth-child(7){animation-delay:.3s}.stagger>:nth-child(8){animation-delay:.35s}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-500{animation-delay:.5s}.delay-700{animation-delay:.7s}.delay-1000{animation-delay:1s}@media (prefers-reduced-motion:reduce){[class*=animate-]{animation:none}}}@layer aegis.overrides;
@@ -0,0 +1 @@
1
+ var J=Object.defineProperty;var u=(t,e)=>()=>(t&&(e=t(t=0)),e);var f=(t,e)=>{for(var o in e)J(t,o,{get:e[o],enumerable:!0})};var m,c,r,p=u(()=>{m=(t,e=document)=>e.querySelector(t),c=(t,e=document)=>[...e.querySelectorAll(t)],r=(t,e={},...o)=>{let n=document.createElement(t);return Object.entries(e).forEach(([s,i])=>{s==="class"?n.className=i:s==="style"&&typeof i=="object"?Object.assign(n.style,i):s.startsWith("data-")?n.setAttribute(s,i):s.startsWith("on")&&typeof i=="function"?n.addEventListener(s.slice(2).toLowerCase(),i):n.setAttribute(s,i)}),o.forEach(s=>{typeof s=="string"?n.append(document.createTextNode(s)):s instanceof Node&&n.append(s)}),n}});var a,d,D,Q,V,X,h=u(()=>{a=(t,e,o,n)=>{let s=i=>{let l=i.target.closest(o);l&&t.contains(l)&&n.call(l,i,l)};return t.addEventListener(e,s),()=>t.removeEventListener(e,s)},d=(t,e,o={})=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}))},D=(t,e,o,n={})=>(t.addEventListener(e,o,n),()=>t.removeEventListener(e,o,n)),Q=(t,e,o)=>D(t,e,o,{once:!0}),V=(t,e=250)=>{let o;return(...n)=>{clearTimeout(o),o=setTimeout(()=>t(...n),e)}},X=(t,e=250)=>{let o=!1;return(...n)=>{o||(t(...n),o=!0,setTimeout(()=>o=!1,e))}}});var S={};f(S,{initModals:()=>I});var I,x=u(()=>{p();h();I=(t=document)=>{a(t,"click","[data-modal-open]",(e,o)=>{let n=m(o.dataset.modalOpen,t);n&&typeof n.showModal=="function"&&(n.showModal(),d(n,"aegis:modal:open"))}),a(t,"click","[data-modal-close]",(e,o)=>{let n=o.closest("dialog");n&&(n.close(),d(n,"aegis:modal:close"))}),c("dialog.modal",t).forEach(e=>{e.addEventListener("click",o=>{o.target===e&&(e.close(),d(e,"aegis:modal:close"))})})}});var j={};f(j,{initDropdowns:()=>B});var B,w=u(()=>{p();h();B=(t=document)=>{let e=o=>{c(".dropdown[data-open]",t).forEach(n=>{n!==o&&n.removeAttribute("data-open")})};a(t,"click",".dropdown-trigger",(o,n)=>{o.stopPropagation();let s=n.closest(".dropdown"),i=s.hasAttribute("data-open");e(s),i?s.removeAttribute("data-open"):s.setAttribute("data-open","")}),t.addEventListener("click",()=>e()),t.addEventListener("keydown",o=>{o.key==="Escape"&&e()})}});var K={};f(K,{initAccordions:()=>R});var R,A=u(()=>{h();R=(t=document)=>{a(t,"click",".accordion-trigger",(e,o)=>{let n=o.getAttribute("aria-expanded")==="true",s=o.getAttribute("aria-controls"),i=s?t.getElementById(s):null,l=o.closest(".accordion");l&&!l.hasAttribute("data-multi")&&l.querySelectorAll(".accordion-trigger").forEach(b=>{if(b!==o){b.setAttribute("aria-expanded","false");let O=b.getAttribute("aria-controls");O&&t.getElementById(O)?.setAttribute("hidden","")}}),o.setAttribute("aria-expanded",String(!n)),i&&(n?i.setAttribute("hidden",""):i.removeAttribute("hidden")),d(o,"aegis:accordion:toggle",{expanded:!n})})}});var F={};f(F,{initTabs:()=>q});var q,E=u(()=>{p();h();q=(t=document)=>{a(t,"click",".tab",(e,o)=>{let n=o.closest(".tabs");if(!n)return;c(".tab",n).forEach(i=>i.setAttribute("aria-selected","false")),o.setAttribute("aria-selected","true");let s=o.getAttribute("aria-controls");if(s){let i=n.parentElement;c(".tab-panel",i).forEach(b=>b.setAttribute("hidden",""));let l=t.getElementById(s);l&&l.removeAttribute("hidden")}d(o,"aegis:tab:change",{tabId:o.id,panelId:s})}),a(t,"keydown",".tab",(e,o)=>{let n=c(".tab",o.closest(".tabs")),s=n.indexOf(o),i;e.key==="ArrowRight"?i=n[(s+1)%n.length]:e.key==="ArrowLeft"&&(i=n[(s-1+n.length)%n.length]),i&&(i.focus(),i.click())})}});var W={};f(W,{initTooltips:()=>N});var N,k=u(()=>{p();N=(t=document)=>{c("[data-tooltip]",t).forEach(e=>{e.getAttribute("aria-label")||e.setAttribute("aria-label",e.dataset.tooltip),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0")})}});var U={};f(U,{initDrawers:()=>G});var G,T=u(()=>{p();h();G=(t=document)=>{a(t,"click","[data-drawer-open]",(o,n)=>{let s=m(n.dataset.drawerOpen,t),i=m(".drawer-backdrop",t);s&&(s.setAttribute("data-open",""),i&&i.setAttribute("data-open",""),document.body.style.overflow="hidden",d(s,"aegis:drawer:open"))});let e=()=>{let o=m(".drawer[data-open]",t),n=m(".drawer-backdrop",t);o&&(o.removeAttribute("data-open"),n&&n.removeAttribute("data-open"),document.body.style.overflow="",d(o,"aegis:drawer:close"))};a(t,"click","[data-drawer-close]",e),a(t,"click",".drawer-backdrop",e),t.addEventListener("keydown",o=>{o.key==="Escape"&&e()})}});var z={};f(z,{getTheme:()=>L,initTheme:()=>Y,setTheme:()=>g,toggleTheme:()=>_});var y,$,L,g,_,Y,C=u(()=>{y="aegis-theme",$=document.documentElement,L=()=>$.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),g=t=>{$.setAttribute("data-theme",t);try{localStorage.setItem(y,t)}catch{}},_=()=>{let t=L()==="dark"?"light":"dark";return g(t),t},Y=()=>{try{let t=localStorage.getItem(y);t&&g(t)}catch{}window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",t=>{localStorage.getItem(y)||$.setAttribute("data-theme",t.matches?"dark":"light")})}});p();h();x();w();A();E();p();var Z={duration:4e3,position:"bottom-end",variant:""},P=(t="bottom-end")=>{let e=m(`.toast-container[data-position="${t}"]`);if(e)return e;let o=t.includes("top"),n=r("div",{class:`toast-container ${o?"toast-container-top":""}`,"data-position":t,"aria-live":"polite"});return document.body.append(n),n},tt=(t={})=>{let e={...Z,...t},o=P(e.position),n=r("div",{class:`toast ${e.variant?`toast-${e.variant}`:""}`,role:"status"},r("div",{class:"toast-content"},...e.title?[r("div",{class:"toast-title"},e.title)]:[],...e.message?[r("div",{class:"toast-message"},e.message)]:[]),r("button",{class:"toast-dismiss","aria-label":"Dismiss",onClick:()=>v(n)},"\u2715"));return o.append(n),e.duration>0&&setTimeout(()=>v(n),e.duration),n},v=t=>{t.classList.add("toast-exit"),t.addEventListener("animationend",()=>t.remove(),{once:!0})};k();p();var et=({title:t="",message:e="",confirmText:o="OK"}={})=>new Promise(n=>{let s=r("dialog",{class:"dialog"},r("h3",{class:"dialog-title"},t),r("p",{class:"dialog-description"},e),r("div",{class:"dialog-actions"},r("button",{class:"btn",onClick:()=>{s.close(),s.remove(),n(!0)}},o)));document.body.append(s),s.showModal()}),ot=({title:t="",message:e="",confirmText:o="Confirm",cancelText:n="Cancel"}={})=>new Promise(s=>{let i=r("dialog",{class:"dialog"},r("h3",{class:"dialog-title"},t),r("p",{class:"dialog-description"},e),r("div",{class:"dialog-actions"},r("button",{class:"btn btn-outline",onClick:()=>{i.close(),i.remove(),s(!1)}},n),r("button",{class:"btn",onClick:()=>{i.close(),i.remove(),s(!0)}},o)));document.body.append(i),i.showModal()});T();C();var M={sm:640,md:768,lg:1024,xl:1280,"2xl":1536},nt=t=>window.matchMedia(`(min-width: ${M[t]}px)`).matches,st=(t,e)=>{let o=window.matchMedia(`(min-width: ${M[t]}px)`);return o.addEventListener("change",n=>e(n.matches)),e(o.matches),()=>o.removeEventListener("change",e)},it=()=>{let t=Object.entries(M).reverse();for(let[e,o]of t)if(window.innerWidth>=o)return e;return"xs"};p();var rt='a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])',at=t=>{let e=c(rt,t);if(e.length===0)return()=>{};let o=e[0],n=e[e.length-1],s=i=>{i.key==="Tab"&&(i.shiftKey&&document.activeElement===o?(i.preventDefault(),n.focus()):!i.shiftKey&&document.activeElement===n&&(i.preventDefault(),o.focus()))};return t.addEventListener("keydown",s),o.focus(),()=>t.removeEventListener("keydown",s)},ct=(t,e="polite")=>{let o=document.createElement("div");o.setAttribute("role","status"),o.setAttribute("aria-live",e),o.setAttribute("aria-atomic","true"),Object.assign(o.style,{position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0,0,0,0)"}),o.textContent=t,document.body.append(o),setTimeout(()=>o.remove(),3e3)},dt=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches;var Ot=(t=document)=>{let{initModals:e}=await_import("./components/modal.js")},H=()=>{Promise.resolve().then(()=>(x(),S)).then(t=>t.initModals()),Promise.resolve().then(()=>(w(),j)).then(t=>t.initDropdowns()),Promise.resolve().then(()=>(A(),K)).then(t=>t.initAccordions()),Promise.resolve().then(()=>(E(),F)).then(t=>t.initTabs()),Promise.resolve().then(()=>(k(),W)).then(t=>t.initTooltips()),Promise.resolve().then(()=>(T(),U)).then(t=>t.initDrawers()),Promise.resolve().then(()=>(C(),z)).then(t=>t.initTheme())};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",H):H();export{m as $,c as $$,ct as announce,r as createElement,P as createToastContainer,V as debounce,a as delegate,v as dismissToast,d as emit,it as getCurrentBreakpoint,L as getTheme,Ot as init,R as initAccordions,G as initDrawers,B as initDropdowns,I as initModals,q as initTabs,Y as initTheme,N as initTooltips,nt as matchBreakpoint,D as on,st as onBreakpointChange,Q as once,dt as prefersReducedMotion,g as setTheme,et as showAlert,ot as showConfirm,tt as showToast,X as throttle,_ as toggleTheme,at as trapFocus};
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "aegis-css",
3
+ "version": "1.0.0",
4
+ "description": "A future-proof, layered CSS framework built on native CSS primitives. Five progressive layers — classless defaults, design tokens, utility classes, semantic components, and ejectable source ownership — all orchestrated through cascade layers, container queries, and OKLCH colors.",
5
+ "main": "dist/aegis.min.js",
6
+ "style": "dist/aegis.min.css",
7
+ "files": [
8
+ "dist/",
9
+ "src/",
10
+ "js/",
11
+ "eject/"
12
+ ],
13
+ "keywords": [
14
+ "css",
15
+ "css-framework",
16
+ "design-tokens",
17
+ "utility-first",
18
+ "components",
19
+ "cascade-layers",
20
+ "container-queries",
21
+ "oklch",
22
+ "dark-mode",
23
+ "accessibility",
24
+ "responsive",
25
+ "classless",
26
+ "native-css",
27
+ "design-system",
28
+ "lightweight"
29
+ ],
30
+ "license": "MIT"
31
+ }