diff --git a/public/css/asw.css b/public/css/asw.css index 8ac84c6..4335959 100644 --- a/public/css/asw.css +++ b/public/css/asw.css @@ -1,4931 +1 @@ -/** - * asw.css — Agentic Semantic Web - * A standalone CSS framework for agent-generated web content. - * - * Semantic HTML + data-attributes. Zero classes required. - * Single file. Builds on Open Props token foundation. - * - * Lineage: Open Props (tokens), Pico CSS (semantic HTML patterns), - * Charts.css (data-attribute vocabulary pattern). - * License: MIT - */ - -/* ── Open Props: props.colors.css ─────────────────────────────── */ -:where(html) { - --gray-0: #f8f9fa; - --gray-1: #f1f3f5; - --gray-2: #e9ecef; - --gray-3: #dee2e6; - --gray-4: #ced4da; - --gray-5: #adb5bd; - --gray-6: #868e96; - --gray-7: #495057; - --gray-8: #343a40; - --gray-9: #212529; - --gray-10: #16191d; - --gray-11: #0d0f12; - --gray-12: #030507; - --stone-0: #f8fafb; - --stone-1: #f2f4f6; - --stone-2: #ebedef; - --stone-3: #e0e4e5; - --stone-4: #d1d6d8; - --stone-5: #b1b6b9; - --stone-6: #979b9d; - --stone-7: #7e8282; - --stone-8: #666968; - --stone-9: #50514f; - --stone-10: #3a3a37; - --stone-11: #252521; - --stone-12: #121210; - --red-0: #fff5f5; - --red-1: #ffe3e3; - --red-2: #ffc9c9; - --red-3: #ffa8a8; - --red-4: #ff8787; - --red-5: #ff6b6b; - --red-6: #fa5252; - --red-7: #f03e3e; - --red-8: #e03131; - --red-9: #c92a2a; - --red-10: #b02525; - --red-11: #962020; - --red-12: #7d1a1a; - --pink-0: #fff0f6; - --pink-1: #ffdeeb; - --pink-2: #fcc2d7; - --pink-3: #faa2c1; - --pink-4: #f783ac; - --pink-5: #f06595; - --pink-6: #e64980; - --pink-7: #d6336c; - --pink-8: #c2255c; - --pink-9: #a61e4d; - --pink-10: #8c1941; - --pink-11: #731536; - --pink-12: #59102a; - --purple-0: #f8f0fc; - --purple-1: #f3d9fa; - --purple-2: #eebefa; - --purple-3: #e599f7; - --purple-4: #da77f2; - --purple-5: #cc5de8; - --purple-6: #be4bdb; - --purple-7: #ae3ec9; - --purple-8: #9c36b5; - --purple-9: #862e9c; - --purple-10: #702682; - --purple-11: #5a1e69; - --purple-12: #44174f; - --violet-0: #f3f0ff; - --violet-1: #e5dbff; - --violet-2: #d0bfff; - --violet-3: #b197fc; - --violet-4: #9775fa; - --violet-5: #845ef7; - --violet-6: #7950f2; - --violet-7: #7048e8; - --violet-8: #6741d9; - --violet-9: #5f3dc4; - --violet-10: #5235ab; - --violet-11: #462d91; - --violet-12: #3a2578; - --indigo-0: #edf2ff; - --indigo-1: #dbe4ff; - --indigo-2: #bac8ff; - --indigo-3: #91a7ff; - --indigo-4: #748ffc; - --indigo-5: #5c7cfa; - --indigo-6: #4c6ef5; - --indigo-7: #4263eb; - --indigo-8: #3b5bdb; - --indigo-9: #364fc7; - --indigo-10: #2f44ad; - --indigo-11: #283a94; - --indigo-12: #21307a; - --blue-0: #e7f5ff; - --blue-1: #d0ebff; - --blue-2: #a5d8ff; - --blue-3: #74c0fc; - --blue-4: #4dabf7; - --blue-5: #339af0; - --blue-6: #228be6; - --blue-7: #1c7ed6; - --blue-8: #1971c2; - --blue-9: #1864ab; - --blue-10: #145591; - --blue-11: #114678; - --blue-12: #0d375e; - --cyan-0: #e3fafc; - --cyan-1: #c5f6fa; - --cyan-2: #99e9f2; - --cyan-3: #66d9e8; - --cyan-4: #3bc9db; - --cyan-5: #22b8cf; - --cyan-6: #15aabf; - --cyan-7: #1098ad; - --cyan-8: #0c8599; - --cyan-9: #0b7285; - --cyan-10: #095c6b; - --cyan-11: #074652; - --cyan-12: #053038; - --teal-0: #e6fcf5; - --teal-1: #c3fae8; - --teal-2: #96f2d7; - --teal-3: #63e6be; - --teal-4: #38d9a9; - --teal-5: #20c997; - --teal-6: #12b886; - --teal-7: #0ca678; - --teal-8: #099268; - --teal-9: #087f5b; - --teal-10: #066649; - --teal-11: #054d37; - --teal-12: #033325; - --green-0: #ebfbee; - --green-1: #d3f9d8; - --green-2: #b2f2bb; - --green-3: #8ce99a; - --green-4: #69db7c; - --green-5: #51cf66; - --green-6: #40c057; - --green-7: #37b24d; - --green-8: #2f9e44; - --green-9: #2b8a3e; - --green-10: #237032; - --green-11: #1b5727; - --green-12: #133d1b; - --lime-0: #f4fce3; - --lime-1: #e9fac8; - --lime-2: #d8f5a2; - --lime-3: #c0eb75; - --lime-4: #a9e34b; - --lime-5: #94d82d; - --lime-6: #82c91e; - --lime-7: #74b816; - --lime-8: #66a80f; - --lime-9: #5c940d; - --lime-10: #4c7a0b; - --lime-11: #3c6109; - --lime-12: #2c4706; - --yellow-0: #fff9db; - --yellow-1: #fff3bf; - --yellow-2: #ffec99; - --yellow-3: #ffe066; - --yellow-4: #ffd43b; - --yellow-5: #fcc419; - --yellow-6: #fab005; - --yellow-7: #f59f00; - --yellow-8: #f08c00; - --yellow-9: #e67700; - --yellow-10: #b35c00; - --yellow-11: #804200; - --yellow-12: #663500; - --orange-0: #fff4e6; - --orange-1: #ffe8cc; - --orange-2: #ffd8a8; - --orange-3: #ffc078; - --orange-4: #ffa94d; - --orange-5: #ff922b; - --orange-6: #fd7e14; - --orange-7: #f76707; - --orange-8: #e8590c; - --orange-9: #d9480f; - --orange-10: #bf400d; - --orange-11: #99330b; - --orange-12: #802b09; - --choco-0: #fff8dc; - --choco-1: #fce1bc; - --choco-2: #f7ca9e; - --choco-3: #f1b280; - --choco-4: #e99b62; - --choco-5: #df8545; - --choco-6: #d46e25; - --choco-7: #bd5f1b; - --choco-8: #a45117; - --choco-9: #8a4513; - --choco-10: #703a13; - --choco-11: #572f12; - --choco-12: #3d210d; - --brown-0: #faf4eb; - --brown-1: #ede0d1; - --brown-2: #e0cab7; - --brown-3: #d3b79e; - --brown-4: #c5a285; - --brown-5: #b78f6d; - --brown-6: #a87c56; - --brown-7: #956b47; - --brown-8: #825b3a; - --brown-9: #6f4b2d; - --brown-10: #5e3a21; - --brown-11: #4e2b15; - --brown-12: #422412; - --sand-0: #f8fafb; - --sand-1: #e6e4dc; - --sand-2: #d5cfbd; - --sand-3: #c2b9a0; - --sand-4: #aea58c; - --sand-5: #9a9178; - --sand-6: #867c65; - --sand-7: #736a53; - --sand-8: #5f5746; - --sand-9: #4b4639; - --sand-10: #38352d; - --sand-11: #252521; - --sand-12: #121210; - --camo-0: #f9fbe7; - --camo-1: #e8ed9c; - --camo-2: #d2df4e; - --camo-3: #c2ce34; - --camo-4: #b5bb2e; - --camo-5: #a7a827; - --camo-6: #999621; - --camo-7: #8c851c; - --camo-8: #7e7416; - --camo-9: #6d6414; - --camo-10: #5d5411; - --camo-11: #4d460e; - --camo-12: #36300a; - --jungle-0: #ecfeb0; - --jungle-1: #def39a; - --jungle-2: #d0e884; - --jungle-3: #c2dd6e; - --jungle-4: #b5d15b; - --jungle-5: #a8c648; - --jungle-6: #9bbb36; - --jungle-7: #8fb024; - --jungle-8: #84a513; - --jungle-9: #7a9908; - --jungle-10: #658006; - --jungle-11: #516605; - --jungle-12: #3d4d04; -} - -/* ── Open Props: props.gray-oklch.css ─────────────────────────────── */ -:where(*) { - --gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none)); - --gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none)); -} - -/* ── Open Props: props.sizes.css ─────────────────────────────── */ -:where(html) { - --size-000: -.5rem; - --size-00: -.25rem; - --size-1: .25rem; - --size-2: .5rem; - --size-3: 1rem; - --size-4: 1.25rem; - --size-5: 1.5rem; - --size-6: 1.75rem; - --size-7: 2rem; - --size-8: 3rem; - --size-9: 4rem; - --size-10: 5rem; - --size-11: 7.5rem; - --size-12: 10rem; - --size-13: 15rem; - --size-14: 20rem; - --size-15: 30rem; - --size-px-000: -8px; - --size-px-00: -4px; - --size-px-1: 4px; - --size-px-2: 8px; - --size-px-3: 16px; - --size-px-4: 20px; - --size-px-5: 24px; - --size-px-6: 28px; - --size-px-7: 32px; - --size-px-8: 48px; - --size-px-9: 64px; - --size-px-10: 80px; - --size-px-11: 120px; - --size-px-12: 160px; - --size-px-13: 240px; - --size-px-14: 320px; - --size-px-15: 480px; - --size-fluid-1: clamp(.5rem, 1vw, 1rem); - --size-fluid-2: clamp(1rem, 2vw, 1.5rem); - --size-fluid-3: clamp(1.5rem, 3vw, 2rem); - --size-fluid-4: clamp(2rem, 4vw, 3rem); - --size-fluid-5: clamp(4rem, 5vw, 5rem); - --size-fluid-6: clamp(5rem, 7vw, 7.5rem); - --size-fluid-7: clamp(7.5rem, 10vw, 10rem); - --size-fluid-8: clamp(10rem, 20vw, 15rem); - --size-fluid-9: clamp(15rem, 30vw, 20rem); - --size-fluid-10: clamp(20rem, 40vw, 30rem); - --size-content-1: 20ch; - --size-content-2: 45ch; - --size-content-3: 60ch; - --size-header-1: 20ch; - --size-header-2: 25ch; - --size-header-3: 35ch; - --size-xxs: 240px; - --size-xs: 360px; - --size-sm: 480px; - --size-md: 768px; - --size-lg: 1024px; - --size-xl: 1440px; - --size-xxl: 1920px; - --size-relative-000: -.5ch; - --size-relative-00: -.25ch; - --size-relative-1: .25ch; - --size-relative-2: .5ch; - --size-relative-3: 1ch; - --size-relative-4: 1.25ch; - --size-relative-5: 1.5ch; - --size-relative-6: 1.75ch; - --size-relative-7: 2ch; - --size-relative-8: 3ch; - --size-relative-9: 4ch; - --size-relative-10: 5ch; - --size-relative-11: 7.5ch; - --size-relative-12: 10ch; - --size-relative-13: 15ch; - --size-relative-14: 20ch; - --size-relative-15: 30ch; -} - -/* ── Open Props: props.fonts.css ─────────────────────────────── */ -:where(html) { - --font-system-ui: system-ui, sans-serif; - --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif; - --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif; - --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif; - --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif; - --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif; - --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif; - --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace; - --font-monospace-code: Dank Mono,Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace; - --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif; - --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif; - --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif; - --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif; - --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif; - --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive; - --font-sans: var(--font-system-ui); - --font-serif: ui-serif, serif; - --font-mono: var(--font-monospace-code); - --font-weight-1: 100; - --font-weight-2: 200; - --font-weight-3: 300; - --font-weight-4: 400; - --font-weight-5: 500; - --font-weight-6: 600; - --font-weight-7: 700; - --font-weight-8: 800; - --font-weight-9: 900; - --font-lineheight-00: .95; - --font-lineheight-0: 1.1; - --font-lineheight-1: 1.25; - --font-lineheight-2: 1.375; - --font-lineheight-3: 1.5; - --font-lineheight-4: 1.75; - --font-lineheight-5: 2; - --font-letterspacing-0: -.05em; - --font-letterspacing-1: .025em; - --font-letterspacing-2: .050em; - --font-letterspacing-3: .075em; - --font-letterspacing-4: .150em; - --font-letterspacing-5: .500em; - --font-letterspacing-6: .750em; - --font-letterspacing-7: 1em; - --font-size-00: .5rem; - --font-size-0: .75rem; - --font-size-1: 1rem; - --font-size-2: 1.1rem; - --font-size-3: 1.25rem; - --font-size-4: 1.5rem; - --font-size-5: 2rem; - --font-size-6: 2.5rem; - --font-size-7: 3rem; - --font-size-8: 3.5rem; - --font-size-fluid-0: clamp(.75rem, 2vw, 1rem); - --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem); - --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem); - --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem); -} - -/* ── Open Props: props.borders.css ─────────────────────────────── */ -:where(html) { - --border-size-1: 1px; - --border-size-2: 2px; - --border-size-3: 5px; - --border-size-4: 10px; - --border-size-5: 25px; - --radius-1: 2px; - --radius-2: 5px; - --radius-3: 1rem; - --radius-4: 2rem; - --radius-5: 4rem; - --radius-6: 8rem; - --radius-drawn-1: 255px 15px 225px 15px / 15px 225px 15px 255px; - --radius-drawn-2: 125px 10px 20px 185px / 25px 205px 205px 25px; - --radius-drawn-3: 15px 255px 15px 225px / 225px 15px 255px 15px; - --radius-drawn-4: 15px 25px 155px 25px / 225px 150px 25px 115px; - --radius-drawn-5: 250px 25px 15px 20px / 15px 80px 105px 115px; - --radius-drawn-6: 28px 100px 20px 15px / 150px 30px 205px 225px; - --radius-round: 1e5px; - --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%; - --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%; - --radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%; - --radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%; - --radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%; - --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1)); - --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2)); - --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3)); - --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4)); - --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5)); - --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6)); -} - -/* ── Open Props: props.shadows.css ─────────────────────────────── */ -@import 'props.media.css'; - -:where(html) { - --shadow-color: 220 3% 15%; - --shadow-strength: 1%; - --shadow-strength-3: calc(var(--shadow-strength) + 2%); - --shadow-strength-4: calc(var(--shadow-strength) + 3%); - --shadow-strength-5: calc(var(--shadow-strength) + 4%); - --shadow-strength-6: calc(var(--shadow-strength) + 5%); - --shadow-strength-7: calc(var(--shadow-strength) + 6%); - --shadow-strength-8: calc(var(--shadow-strength) + 7%); - --shadow-strength-10: calc(var(--shadow-strength) + 9%); - --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001; - --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / var(--shadow-strength-10)); - --shadow-2: - 0 3px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), - 0 7px 14px -5px hsl(var(--shadow-color) / var(--shadow-strength-6)); - --shadow-3: - 0 -1px 3px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)), - 0 1px 2px -5px hsl(var(--shadow-color) / var(--shadow-strength-3)), - 0 2px 5px -5px hsl(var(--shadow-color) / var(--shadow-strength-5)), - 0 4px 12px -5px hsl(var(--shadow-color) / var(--shadow-strength-6)), - 0 12px 15px -5px hsl(var(--shadow-color) / var(--shadow-strength-8)); - --shadow-4: - 0 -2px 5px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)), - 0 1px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), - 0 2px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), - 0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)), - 0 9px 9px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)), - 0 16px 16px -2px hsl(var(--shadow-color) / var(--shadow-strength-7)); - --shadow-5: - 0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)), - 0 2px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), - 0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), - 0 10px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)), - 0 20px 20px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)), - 0 40px 40px -2px hsl(var(--shadow-color) / var(--shadow-strength-8)); - --shadow-6: - 0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)), - 0 3px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), - 0 7px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), - 0 12px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)), - 0 22px 18px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)), - 0 41px 33px -2px hsl(var(--shadow-color) / var(--shadow-strength-7)), - 0 100px 80px -2px hsl(var(--shadow-color) / var(--shadow-strength-8)); - --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / var(--shadow-strength-10)); - --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight); - --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight); - --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight); - --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight); -} - -@media (--OSdark) { - :where(html) { - --shadow-color: 220 40% 2%; - --shadow-strength: 25%; - --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007; - } -} -/* ── Open Props: props.easing.css ─────────────────────────────── */ -:where(html) { - --ease-1: cubic-bezier(.25, 0, .5, 1); - --ease-2: cubic-bezier(.25, 0, .4, 1); - --ease-3: cubic-bezier(.25, 0, .3, 1); - --ease-4: cubic-bezier(.25, 0, .2, 1); - --ease-5: cubic-bezier(.25, 0, .1, 1); - --ease-in-1: cubic-bezier(.25, 0, 1, 1); - --ease-in-2: cubic-bezier(.50, 0, 1, 1); - --ease-in-3: cubic-bezier(.70, 0, 1, 1); - --ease-in-4: cubic-bezier(.90, 0, 1, 1); - --ease-in-5: cubic-bezier(1, 0, 1, 1); - --ease-out-1: cubic-bezier(0, 0, .75, 1); - --ease-out-2: cubic-bezier(0, 0, .50, 1); - --ease-out-3: cubic-bezier(0, 0, .3, 1); - --ease-out-4: cubic-bezier(0, 0, .1, 1); - --ease-out-5: cubic-bezier(0, 0, 0, 1); - --ease-in-out-1: cubic-bezier(.1, 0, .9, 1); - --ease-in-out-2: cubic-bezier(.3, 0, .7, 1); - --ease-in-out-3: cubic-bezier(.5, 0, .5, 1); - --ease-in-out-4: cubic-bezier(.7, 0, .3, 1); - --ease-in-out-5: cubic-bezier(.9, 0, .1, 1); - --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25); - --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25); - --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25); - --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25); - --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25); - --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1); - --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1); - --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1); - --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1); - --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1); - --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5); - --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5); - --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5); - --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5); - --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5); - --ease-step-1: steps(2); - --ease-step-2: steps(3); - --ease-step-3: steps(4); - --ease-step-4: steps(7); - --ease-step-5: steps(10); - --ease-elastic-1: var(--ease-elastic-out-1); - --ease-elastic-2: var(--ease-elastic-out-2); - --ease-elastic-3: var(--ease-elastic-out-3); - --ease-elastic-4: var(--ease-elastic-out-4); - --ease-elastic-5: var(--ease-elastic-out-5); - --ease-squish-1: var(--ease-elastic-in-out-1); - --ease-squish-2: var(--ease-elastic-in-out-2); - --ease-squish-3: var(--ease-elastic-in-out-3); - --ease-squish-4: var(--ease-elastic-in-out-4); - --ease-squish-5: var(--ease-elastic-in-out-5); - --ease-spring-1: linear( - 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, - 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, - 1.001 - ); - --ease-spring-2: linear( - 0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, - 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, - 0.999 61.6%, 0.995 71.2%, 1 - ); - --ease-spring-3: linear( - 0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, - 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, - 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, - 0.997 69.8%, 1.003 76.9%, 1 - ); - --ease-spring-4: linear( - 0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185, - 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973, - 0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%, - 0.998 78.9%, 1 - ); - --ease-spring-5: linear( - 0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231, - 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%, - 0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011, - 1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1 - ); - --ease-bounce-1: linear( - 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%, - 0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879, - 0.885, 0.895, 0.908 89.7%, 0.946, 1 - ); - --ease-bounce-2: linear( - 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765, - 1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788, - 0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954, - 0.973, 1 - ); - --ease-bounce-3: linear( - 0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764, - 1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672, - 0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879, - 0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957, - 0.96, 0.968, 0.981, 1 - ); - --ease-bounce-4: linear( - 0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81, - 0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%, - 0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%, - 0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1 - ); - --ease-bounce-5: linear( - 0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627, - 0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892, - 0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%, - 0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943, - 0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1 - ); - --ease-circ-in: cubic-bezier(.6,.04,.98,.335); - --ease-circ-in-out: cubic-bezier(.785,.135,.15,.86); - --ease-circ-out: cubic-bezier(.075,.82,.165,1); - --ease-cubic-in: cubic-bezier(.55,.055,.675,.19); - --ease-cubic-in-out: cubic-bezier(.645,.045,.355,1); - --ease-cubic-out: cubic-bezier(.215,.61,.355,1); - --ease-expo-in: cubic-bezier(.95,.05,.795,.035); - --ease-expo-in-out: cubic-bezier(1,0,0,1); - --ease-expo-out: cubic-bezier(.19,1,.22,1); - --ease-quad-in: cubic-bezier(.55,.085,.68,.53); - --ease-quad-in-out: cubic-bezier(.455,.03,.515,.955); - --ease-quad-out: cubic-bezier(.25,.46,.45,.94); - --ease-quart-in: cubic-bezier(.895,.03,.685,.22); - --ease-quart-in-out: cubic-bezier(.77,0,.175,1); - --ease-quart-out: cubic-bezier(.165,.84,.44,1); - --ease-quint-in: cubic-bezier(.755,.05,.855,.06); - --ease-quint-in-out: cubic-bezier(.86,0,.07,1); - --ease-quint-out: cubic-bezier(.23,1,.32,1); - --ease-sine-in: cubic-bezier(.47,0,.745,.715); - --ease-sine-in-out: cubic-bezier(.445,.05,.55,.95); - --ease-sine-out: cubic-bezier(.39,.575,.565,1); -} - -/* ── Open Props: props.animations.css ─────────────────────────────── */ -@import 'props.media.css'; - -:where(html) { - --animation-fade-in: fade-in .5s var(--ease-3); - --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3); - --animation-fade-out: fade-out .5s var(--ease-3); - --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3); - --animation-scale-up: scale-up .5s var(--ease-3); - --animation-scale-down: scale-down .5s var(--ease-3); - --animation-slide-out-up: slide-out-up .5s var(--ease-3); - --animation-slide-out-down: slide-out-down .5s var(--ease-3); - --animation-slide-out-right: slide-out-right .5s var(--ease-3); - --animation-slide-out-left: slide-out-left .5s var(--ease-3); - --animation-slide-in-up: slide-in-up .5s var(--ease-3); - --animation-slide-in-down: slide-in-down .5s var(--ease-3); - --animation-slide-in-right: slide-in-right .5s var(--ease-3); - --animation-slide-in-left: slide-in-left .5s var(--ease-3); - --animation-shake-x: shake-x .75s var(--ease-out-5); - --animation-shake-y: shake-y .75s var(--ease-out-5); - --animation-shake-z: shake-z 1s var(--ease-in-out-3); - --animation-spin: spin 2s linear infinite; - --animation-ping: ping 5s var(--ease-out-3) infinite; - --animation-blink: blink 1s var(--ease-out-3) infinite; - --animation-float: float 3s var(--ease-in-out-3) infinite; - --animation-bounce: bounce 2s var(--ease-squish-2) infinite; - --animation-pulse: pulse 2s var(--ease-out-3) infinite; -} - -@keyframes fade-in { - to { opacity: 1 } -} -@keyframes fade-in-bloom { - 0% { opacity: 0; filter: brightness(1) blur(20px) } - 10% { opacity: 1; filter: brightness(2) blur(10px) } -100% { opacity: 1; filter: brightness(1) blur(0) } -} -@keyframes fade-out { - to { opacity: 0 } -} -@keyframes fade-out-bloom { -100% { opacity: 0; filter: brightness(1) blur(20px) } - 10% { opacity: 1; filter: brightness(2) blur(10px) } - 0% { opacity: 1; filter: brightness(1) blur(0) } -} -@keyframes scale-up { - to { transform: scale(1.25) } -} -@keyframes scale-down { - to { transform: scale(.75) } -} -@keyframes slide-out-up { - to { transform: translateY(-100%) } -} -@keyframes slide-out-down { - to { transform: translateY(100%) } -} -@keyframes slide-out-right { - to { transform: translateX(100%) } -} -@keyframes slide-out-left { - to { transform: translateX(-100%) } -} -@keyframes slide-in-up { - from { transform: translateY(100%) } -} -@keyframes slide-in-down { - from { transform: translateY(-100%) } -} -@keyframes slide-in-right { - from { transform: translateX(-100%) } -} -@keyframes slide-in-left { - from { transform: translateX(100%) } -} -@keyframes shake-x { - 0%, 100% { transform: translateX(0%) } - 20% { transform: translateX(-5%) } - 40% { transform: translateX(5%) } - 60% { transform: translateX(-5%) } - 80% { transform: translateX(5%) } -} -@keyframes shake-y { - 0%, 100% { transform: translateY(0%) } - 20% { transform: translateY(-5%) } - 40% { transform: translateY(5%) } - 60% { transform: translateY(-5%) } - 80% { transform: translateY(5%) } -} -@keyframes shake-z { - 0%, 100% { transform: rotate(0deg) } - 20% { transform: rotate(-2deg) } - 40% { transform: rotate(2deg) } - 60% { transform: rotate(-2deg) } - 80% { transform: rotate(2deg) } -} -@keyframes spin { - to { transform: rotate(1turn) } -} -@keyframes ping { - 90%, 100% { - transform: scale(2); - opacity: 0; - } -} -@keyframes blink { - 0%, 100% { - opacity: 1 - } - 50% { - opacity: .5 - } -} -@keyframes float { - 50% { transform: translateY(-25%) } -} -@keyframes bounce { - 25% { transform: translateY(-20%) } - 40% { transform: translateY(-3%) } - 0%, 60%, 100% { transform: translateY(0) } -} -@keyframes pulse { - 50% { transform: scale(.9,.9) } -} -@media (--OSdark) { - @keyframes fade-in-bloom { - 0% { opacity: 0; filter: brightness(1) blur(20px) } - 10% { opacity: 1; filter: brightness(0.5) blur(10px) } - 100% { opacity: 1; filter: brightness(1) blur(0) } - } -} -@media (--OSdark) { - @keyframes fade-out-bloom { - 100% { opacity: 0; filter: brightness(1) blur(20px) } - 10% { opacity: 1; filter: brightness(0.5) blur(10px) } - 0% { opacity: 1; filter: brightness(1) blur(0) } - } -} -/* ── Open Props: props.gradients.css ─────────────────────────────── */ -:where(html) { - --gradient-space: ; - --gradient-1: linear-gradient(to bottom right var(--gradient-space), #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b); - --gradient-2: linear-gradient(to bottom right var(--gradient-space), #48005c, #8300e2, #a269ff); - --gradient-3: - radial-gradient( - circle at top right var(--gradient-space), - hsl(180 100% 50%), hsl(180 100% 50% / 0%) - ), - radial-gradient( - circle at bottom left var(--gradient-space), - hsl(328 100% 54%), hsl(328 100% 54% / 0%) - ); - --gradient-4: linear-gradient(to bottom right var(--gradient-space), #00F5A0, #00D9F5); - --gradient-5: conic-gradient(from -270deg at 75% 110% var(--gradient-space), fuchsia, floralwhite); - --gradient-6: conic-gradient(from -90deg at top left var(--gradient-space), black, white); - --gradient-7: linear-gradient(to bottom right var(--gradient-space), #72C6EF, #004E8F); - --gradient-8: conic-gradient(from 90deg at 50% 0% var(--gradient-space), #111, 50%, #222, #111); - --gradient-9: conic-gradient(from .5turn at bottom center var(--gradient-space), lightblue, white); - --gradient-10: conic-gradient(from 90deg at 40% -25% var(--gradient-space), #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700); - --gradient-11: conic-gradient(at bottom left var(--gradient-space), deeppink, cyan); - --gradient-12: conic-gradient(from 90deg at 25% -10% var(--gradient-space), #ff4500, #d3f340, #7bee85, #afeeee, #7bee85); - --gradient-13: radial-gradient(circle at 50% 200% var(--gradient-space), #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7); - --gradient-14: conic-gradient(at top right var(--gradient-space), lime, cyan); - --gradient-15: linear-gradient(to bottom right var(--gradient-space), #c7d2fe, #fecaca, #fef3c7); - --gradient-16: radial-gradient(circle at 50% -250% var(--gradient-space), #374151, #111827, #000); - --gradient-17: conic-gradient(from -90deg at 50% -25% var(--gradient-space), blue, blueviolet); - --gradient-18: - linear-gradient(0deg var(--gradient-space), hsla(0 100% 50% / 80%), hsla(0 100% 50% / 0) 75%), - linear-gradient(60deg var(--gradient-space), hsla(60 100% 50% / 80%), hsla(60 100% 50% / 0) 75%), - linear-gradient(120deg var(--gradient-space), hsla(120 100% 50% / 80%), hsla(120 100% 50% / 0) 75%), - linear-gradient(180deg var(--gradient-space), hsla(180 100% 50% / 80%), hsla(180 100% 50% / 0) 75%), - linear-gradient(240deg var(--gradient-space), hsla(240 100% 50% / 80%), hsla(240 100% 50% / 0) 75%), - linear-gradient(300deg var(--gradient-space), hsla(300 100% 50% / 80%), hsla(300 100% 50% / 0) 75%) - ; - --gradient-19: linear-gradient(to bottom right var(--gradient-space), #ffe259, #ffa751); - --gradient-20: conic-gradient(from -135deg at -10% center var(--gradient-space), #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4); - --gradient-21: conic-gradient(from -90deg at 25% 115% var(--gradient-space), #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff, #0000ff, #0000ff, #0000ff, #0000ff); - --gradient-22: linear-gradient(to bottom right var(--gradient-space), #acb6e5, #86fde8); - --gradient-23: linear-gradient(to bottom right var(--gradient-space), #536976, #292E49); - --gradient-24: conic-gradient(from .5turn at 0% 0% var(--gradient-space), #00c476, 10%, #82b0ff, 90%, #00c476); - --gradient-25: conic-gradient(at 125% 50% var(--gradient-space), #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7); - --gradient-26: linear-gradient(to bottom right var(--gradient-space), #9796f0, #fbc7d4); - --gradient-27: conic-gradient(from .5turn at bottom left var(--gradient-space), deeppink, rebeccapurple); - --gradient-28: conic-gradient(from -90deg at 50% 105% var(--gradient-space), white, orchid); - --gradient-29: - radial-gradient( - circle at top right var(--gradient-space), - hsl(250 100% 85%), hsl(250 100% 85% / 0%) - ), - radial-gradient( - circle at bottom left var(--gradient-space), - hsl(220 90% 75%), hsl(220 90% 75% / 0%) - ); - --gradient-30: radial-gradient( - circle at top right var(--gradient-space), - hsl(150 100% 50%), hsl(150 100% 50% / 0%) - ), - radial-gradient( - circle at bottom left var(--gradient-space), - hsl(150 100% 84%), hsl(150 100% 84% / 0%) - ); - --noise-1: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); - --noise-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); - --noise-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); - --noise-4: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); - --noise-5: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); - --noise-filter-1: contrast(300%) brightness(100%); - --noise-filter-2: contrast(200%) brightness(150%); - --noise-filter-3: contrast(200%) brightness(250%); - --noise-filter-4: contrast(200%) brightness(500%); - --noise-filter-5: contrast(200%) brightness(1000%); -} - -@supports (background: linear-gradient(to right in oklab, #000, #fff)) { - :where(html) { - --gradient-space: in oklab; - } -} -/* ── Layer: 00-reset ─────────────────────────────────── */ -/** - * 00-reset.css - * CSS reset and normalization - * Ported from: Pico CSS v2.1.1 - */ - -/* Box-sizing reset */ -*, -*::before, -*::after { - box-sizing: border-box; - background-repeat: no-repeat; -} - -::before, -::after { - text-decoration: inherit; - vertical-align: inherit; -} - -/* Document */ -:where(:root) { - -webkit-tap-highlight-color: transparent; - -webkit-text-size-adjust: 100%; - text-size-adjust: 100%; - text-rendering: optimizeLegibility; - overflow-wrap: break-word; - tab-size: 4; -} - -/* Root font-size — 100% default, responsive scaling in 01-tokens.css */ -html { - font-size: 100%; -} - -/* Body */ -body { - width: 100%; - margin: 0; - padding: 0; - font-size: var(--text-base); /* 1rem — inherits html responsive scaling */ - font-family: var(--font-ui); - background-color: var(--surface); - color: var(--text); -} - -/* Prose font — same neo-grotesque stack, consistent across all contexts */ -/* article and [data-layout="prose"] inherit body font — no override needed */ - -/* Main */ -main { - display: block; -} - -/* Nested lists */ -:where(dl, ol, ul) :where(dl, ol, ul) { - margin: 0; -} - -/* ── Layer: 01-tokens ─────────────────────────────────── */ -/** - * 01-tokens.css - * ASW semantic layer — builds on Open Props - * - * Open Props (included by build.sh) provides the base scales: - * --gray-0…15, --green-0…12, --blue-0…12, --red-0…12, --yellow-0…12 - * --size-1…15, --font-size-0…8, --font-weight-1…9 - * --font-lineheight-0…5, --radius-1…6, --shadow-1…6 - * --ease-1…5, --ease-spring-1…5, --ease-bounce-1…5 - * --gradient-1…30, --animation-*, @keyframes - * - * This file defines only what Open Props doesn't: - * 1. Surface / text / accent — semantic aliases (override to theme) - * 2. Font stack aliases — prose, heading, ui (map to OP font stacks) - * 3. Agent-native tokens — task, callout, session, wikilink, redacted - * 4. A handful of precise values without direct OP equivalents - * - * To theme ASW: - * Override semantic aliases at :root in your own CSS. - * Use Open Props base tokens (--gray-*, --green-*, --size-*) as values. - * - * Lineage: absorbed patterns from Pico CSS, Open Props, Charts.css. - */ - -/* ══════════════════════════════════════════════════════════════════ - DARK THEME (default) - Using Open Props oklch gray scale — perceptually uniform steps. - Set --gray-hue to tint all surfaces. Example: - Trentuna: --gray-hue: 45 (warm amber tint) - vigilio-garden: --gray-hue: 150 (subtle green tint) - ══════════════════════════════════════════════════════════════════ */ - -:root { - - /* ── Surfaces ──────────────────────────────────────────────────── */ - - --surface: var(--gray-15); /* deepest background (oklch 10%) */ - --surface-1: var(--gray-14); /* cards, sidebars (oklch 18%) */ - --surface-2: var(--gray-13); /* hover, raised elements (oklch 25%) */ - --surface-card: var(--surface-1); - --surface-hover: var(--surface-2); - - /* ── Text ──────────────────────────────────────────────────────── */ - - --text: var(--gray-1); /* primary (95% lightness) */ - --text-2: var(--gray-3); /* secondary (80%) */ - --text-3: var(--gray-5); /* muted (68%) */ - --text-dim: var(--gray-7); /* dim (58%) */ - - /* ── Accent ────────────────────────────────────────────────────── */ - - --accent: var(--green-5); - --accent-hover: var(--green-4); - --on-accent: var(--gray-15); - --accent-focus: rgba(34, 197, 94, 0.35); - --accent-subtle: rgba(34, 197, 94, 0.10); - --accent-underline: rgba(34, 197, 94, 0.45); - --accent-hover-underline: rgba(34, 197, 94, 0.55); - - /* ── Links ─────────────────────────────────────────────────────── */ - /* Blue — web convention. Accent (green) reserved for UI chrome. */ - - --link: var(--blue-5); /* #339af0 */ - --link-hover: var(--blue-4); /* #4dabf7 */ - --link-underline: rgba(51, 154, 240, 0.4); - --link-hover-underline: rgba(51, 154, 240, 0.55); - --link-focus: rgba(51, 154, 240, 0.35); - - /* Secondary accents — reachable as named aliases */ - --accent-blue: var(--blue-5); - --accent-red: var(--red-7); - --accent-orange: var(--yellow-6); - - /* ── Border ────────────────────────────────────────────────────── */ - - --border: var(--gray-11); /* 37% lightness — visible against 10% bg */ - --border-subtle: var(--gray-12); /* 31% lightness — very subtle */ - --border-width: 1px; - --outline-width: 2px; - - /* ── Font stacks ───────────────────────────────────────────────── */ - /* Open Props named stacks — no web font loading required. */ - /* --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova */ - /* --font-monospace-code: Dank Mono, Operator Mono, Inconsolata... */ - - --font-prose: var(--font-neo-grotesque); - --font-heading: var(--font-neo-grotesque); - --font-ui: var(--font-neo-grotesque); - /* --font-mono: var(--font-monospace-code) — provided directly by Open Props */ - - /* ── Typography scale ─────────────────────────────────────────── */ - /* Open Props provides: --font-size-0 (.75rem) through --font-size-8 (3.5rem) */ - /* We define only the one gap: 0.875rem has no OP equivalent */ - - --text-xs: var(--font-size-0); /* 0.75rem — badges, fine print */ - --text-sm: 0.875rem; /* 0.875rem — metadata, captions (no OP match) */ - --text-base: var(--font-size-1); /* 1rem — body */ - --text-2xl: var(--font-size-4); /* 1.5rem — subheadings */ - --text-3xl: var(--font-size-5); /* 2rem — section headings */ - - /* ── Heading scale ─────────────────────────────────────────────── */ - - --h1-size: 1.875rem; - --h2-size: 1.5rem; - --h3-size: 1.25rem; - --h4-size: 1.0625rem; - --h5-size: 0.9375rem; - --h6-size: 0.8125rem; - - --h1-weight: var(--font-weight-4); /* 400 */ - --h2-weight: var(--font-weight-4); - --h3-weight: var(--font-weight-4); - --h4-weight: var(--font-weight-5); /* 500 */ - --h5-weight: var(--font-weight-6); /* 600 */ - --h6-weight: var(--font-weight-6); - - --h1-color: var(--text); - --h2-color: var(--text); - --h3-color: var(--text); - --h4-color: var(--text-2); - --h5-color: var(--text-2); - --h6-color: var(--text-3); - - /* ── Spacing aliases ───────────────────────────────────────────── - Open Props sizes: --size-1 (.25rem), --size-2 (.5rem), --size-3 (1rem), - --size-5 (1.5rem), --size-7 (2rem), --size-9 (4rem) - We alias these with semantic names AND define --space-3 (0.75rem gap) - ──────────────────────────────────────────────────────────────── */ - - --space-1: var(--size-1); /* 0.25rem */ - --space-2: var(--size-2); /* 0.50rem */ - --space-3: 0.75rem; /* 0.75rem — no OP equivalent */ - --space-4: var(--size-3); /* 1.00rem */ - --space-5: var(--size-5); /* 1.50rem */ - --space-6: var(--size-7); /* 2.00rem */ - --space-8: var(--size-9); /* 4.00rem */ - - /* ── Rhythm ─────────────────────────────────────────────────────── */ - - --type-space: var(--space-4); /* paragraph / element spacing */ - --type-space-top: var(--space-5); /* heading top margin after content */ - --leading: 1.6; - --leading-tight: var(--font-lineheight-1); /* 1.25 */ - - /* ── Radius ─────────────────────────────────────────────────────── */ - /* Open Props: --radius-1 (2px), --radius-2 (5px), --radius-3 (1rem) */ - - --radius-sm: var(--radius-1); /* 2px */ - --radius-md: 4px; /* between OP radius-1 and radius-2 */ - - /* ── Easing ─────────────────────────────────────────────────────── */ - /* Open Props provides rich curves — we alias the most-used ones */ - - --ease: 0.2s var(--ease-3); - --ease-fast: 0.1s var(--ease-2); - - /* ── Inline element tokens ─────────────────────────────────────── */ - - --selection: rgba(96, 165, 250, 0.25); - --mark-bg: rgba(245, 158, 11, 0.2); - --mark-color: var(--accent-orange); - --kbd-bg: var(--text); - --kbd-color: var(--surface); - --code-color: var(--text-2); - --table-stripe: rgba(38, 38, 38, 0.5); - - /* ── Form tokens ─────────────────────────────────────────────────── */ - - --input-bg: var(--surface-1); - --input-border: var(--border); - --input-active-bg: var(--surface); - --input-selected: rgba(34, 197, 94, 0.2); - --input-px: var(--space-4); - --input-py: var(--space-3); - --disabled-opacity: 0.5; - - /* ── State colors ─────────────────────────────────────────────────── */ - - --ok: var(--green-5); - --warn: var(--yellow-5); - --error: var(--red-7); - --info: var(--blue-5); - --blocked: var(--gray-5); - - --error-active: var(--red-9); - --error-focus: rgba(239, 68, 68, 0.375); - - /* ── Component tokens ─────────────────────────────────────────────── */ - - --track-bg: var(--surface-2); /* progress / meter background */ - --modal-overlay: rgba(10, 10, 10, 0.8); - --modal-backdrop: blur(0.375rem); - --accordion-active: var(--accent-hover); - - --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 115, 115)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - - - /* ══════════════════════════════════════════════════════════════════ - AGENT-NATIVE TOKENS - These are ASW's actual contribution — concepts no other framework has. - Propose additions to Open Props: data-task, data-callout, data-session. - ══════════════════════════════════════════════════════════════════ */ - - --task-done: var(--green-5); - --task-blocked: var(--red-5); - --task-wip: var(--yellow-5); - --task-todo: var(--gray-5); - - --callout-info: var(--blue-5); - --callout-warn: var(--yellow-5); - --callout-error: var(--red-5); - --callout-note: var(--gray-5); - - --session-bg: var(--surface-1); - --wikilink: var(--blue-4); - --redacted: var(--gray-8); - -} - - -/* ══════════════════════════════════════════════════════════════════ - LIGHT MODE — override semantic aliases only - ══════════════════════════════════════════════════════════════════ */ - -@media (prefers-color-scheme: light) { - :root { - color-scheme: light; - - --surface: var(--gray-0); /* 99% lightness */ - --surface-1: var(--gray-1); /* 95% */ - --surface-2: var(--gray-2); /* 88% */ - --surface-card: var(--gray-0); - --surface-hover: var(--gray-1); - - --text: var(--gray-14); /* 18% — dark but not pure black */ - --text-2: var(--gray-11); /* 37% */ - --text-3: var(--gray-8); /* 53% */ - --text-dim: var(--gray-6); /* 63% */ - - --accent: var(--green-8); - --accent-hover: var(--green-9); - --on-accent: var(--gray-0); - --accent-focus: rgba(22, 163, 74, 0.35); - --accent-subtle: rgba(22, 163, 74, 0.10); - - --border: var(--gray-3); /* 80% — visible on near-white */ - --border-subtle: var(--gray-2); /* 88% — very subtle */ - - --link: var(--blue-8); /* #1971c2 */ - --link-hover: var(--blue-7); /* #1c7ed6 */ - --link-underline: rgba(25, 113, 194, 0.4); - --link-hover-underline: rgba(25, 113, 194, 0.55); - --link-focus: rgba(25, 113, 194, 0.35); - - --h1-color: var(--gray-15); - --h2-color: var(--gray-14); - --h3-color: var(--gray-13); - --h4-color: var(--gray-12); - --h5-color: var(--gray-11); - --h6-color: var(--gray-10); - - --mark-bg: #fce6bf; - --mark-color: var(--gray-15); - --selection: rgba(37, 99, 235, 0.2); - - --code-color: var(--text-3); - --table-stripe: rgba(111, 120, 135, 0.04); - - --input-bg: var(--gray-0); - --input-border: var(--gray-4); - --input-active-bg: var(--gray-0); - --input-selected: var(--gray-2); - - --track-bg: var(--gray-3); - --modal-overlay: rgba(232, 234, 237, 0.75); - - --error: oklch(50% 0.17 20); - --error-active: oklch(44% 0.18 20); - - --session-bg: var(--surface-1); - } -} - - -/* ══════════════════════════════════════════════════════════════════ - RESPONSIVE FONT SCALING - Subtle upscaling at large viewports — all rem values follow. - ══════════════════════════════════════════════════════════════════ */ - -@media (min-width: 1024px) { html { font-size: 103%; } } -@media (min-width: 1280px) { html { font-size: 106%; } } -@media (min-width: 1536px) { html { font-size: 109%; } } - -/* ── Layer: 02-semantic ─────────────────────────────────── */ -/** - * 02-semantic.css - * Semantic HTML element styles - * Part of: Agentic Semantic Web - * - * Ported from: Pico CSS v2.1.1 - * License: MIT - * - * This layer handles typography and semantic HTML elements. - * Classes are NOT supported—use semantic tags only. - */ - -/* ── Typography: Headings ──────────────────────────────────────────── */ - -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 0; - margin-bottom: var(--type-space); - line-height: var(--leading-tight); - font-family: var(--font-heading); - text-wrap: balance; -} - -h1 { - font-size: var(--h1-size); - color: var(--h1-color); - font-weight: var(--h1-weight); -} - -h2 { - font-size: var(--h2-size); - color: var(--h2-color); - font-weight: var(--h2-weight); -} - -h3 { - font-size: var(--h3-size); - color: var(--h3-color); - font-weight: var(--h3-weight); -} - -h4 { - font-size: var(--h4-size); - color: var(--h4-color); - font-weight: var(--h4-weight); -} - -h5 { - font-size: var(--h5-size); - color: var(--h5-color); - font-weight: var(--h5-weight); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -h6 { - font-size: var(--h6-size); - color: var(--h6-color); - font-weight: var(--h6-weight); - text-transform: uppercase; - letter-spacing: 0.06em; -} - -/* Add spacing before headings that follow content elements */ -:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { - margin-top: var(--type-space-top); -} - -/* ── Typography: UI elements — structural, navigational, informational ── */ -/* These override the prose body font with the humanist sans UI stack. */ - -nav, -header, -footer, -label, -th, -caption, -small, -figcaption, -button, -input, -select, -textarea, -hgroup > p, -hgroup > small { - font-family: var(--font-ui); -} - -/* ── Typography: Paragraphs ────────────────────────────────────────── */ - -p { - margin-top: 0; - margin-bottom: var(--type-space); - color: var(--text); - font-style: normal; - font-weight: var(--font-weight-4); -} - -/* ── Typography: Lists ─────────────────────────────────────────────── */ - -address, -dl, -ol, -ul { - margin-top: 0; - margin-bottom: var(--type-space); - color: var(--text); - font-style: normal; - font-weight: var(--font-weight-4); -} - -:where(ol, ul) li { - margin-bottom: calc(var(--type-space) * 0.25); -} - -/* Nested lists: reduce spacing */ -:where(dl, ol, ul) :where(dl, ol, ul) { - margin: 0; - margin-top: calc(var(--type-space) * 0.25); -} - -ul li { - list-style: square; -} - -/* ── Typography: Blockquote ────────────────────────────────────────── */ - -blockquote { - display: block; - margin: var(--type-space) 0; - padding: var(--space-4); - border-right: none; - border-left: 0.25rem solid var(--border); - border-inline-start: 0.25rem solid var(--border); - border-inline-end: none; -} - -blockquote footer { - margin-top: calc(var(--type-space) * 0.5); - color: var(--text-3); -} - -/* ── Typography: Horizontal Rule ───────────────────────────────────── */ - -hr { - height: 0; - margin: var(--type-space) 0; - border: 0; - border-top: 1px solid var(--border); - color: inherit; -} - -/* ── Typography: Inline Elements ───────────────────────────────────── */ - -b, -strong { - font-weight: bolder; -} - -mark { - padding: 0.125rem 0.25rem; - background-color: var(--mark-bg); - color: var(--mark-color); - vertical-align: baseline; -} - -ins { - color: var(--text-2); - text-decoration: none; -} - -del { - color: var(--accent-red); -} - -abbr[title] { - border-bottom: 1px dotted; - text-decoration: none; - cursor: help; -} - -sub, -sup { - position: relative; - font-size: 0.75em; - line-height: 0; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -small { - font-size: 0.875em; -} - -/* ── Links ─────────────────────────────────────────────────────────── */ - -:where(a:not([role=button])), -[role=link] { - - - - outline: none; - background-color: transparent; - color: var(--link); - text-decoration: underline; - text-decoration-color: var(--link-underline); - text-underline-offset: 0.125em; - transition: background-color var(--ease), - color var(--ease), - text-decoration var(--ease), - box-shadow var(--ease); -} - -:where(a:not([role=button])):is(:hover, :active, :focus), -[role=link]:is(:hover, :active, :focus) { - color: var(--link-hover); - text-decoration-color: var(--link-hover-underline); -} - -:where(a:not([role=button])):focus-visible, -[role=link]:focus-visible { - box-shadow: 0 0 0 var(--outline-width) var(--link-focus); -} - -/* ── Text Selection ────────────────────────────────────────────────── */ - -::selection { - background-color: var(--selection); -} - -/* ── Tables ────────────────────────────────────────────────────────── */ - -:where(table) { - width: 100%; - margin-top: 0; - margin-bottom: var(--type-space); - border-collapse: collapse; - border-spacing: 0; - text-indent: 0; - color: var(--text); - font-style: normal; - font-weight: var(--font-weight-4); -} - -th, -td { - padding: calc(var(--space-4) / 2) var(--space-4); - border-bottom: var(--border-width) solid var(--border); - background-color: transparent; - color: var(--text); - font-weight: var(--font-weight-4); - text-align: left; -} - -thead th, -thead td { - font-weight: 600; - border-bottom-width: 2px; -} - -tfoot th, -tfoot td { - border-top: var(--border-width) solid var(--border); - border-bottom: 0; -} - -/* Striped tables (class-based but useful) */ -table.striped tbody tr:nth-child(odd) th, -table.striped tbody tr:nth-child(odd) td { - background-color: var(--table-stripe); -} - -/* ── Code & Preformatted Text ──────────────────────────────────────── */ - -pre, -code, -kbd, -samp { - font-size: 0.875em; - font-family: var(--font-mono); - border-radius: var(--radius-md); - background: var(--surface-1); - color: var(--code-color); - font-weight: var(--font-weight-4); - line-height: initial; -} - -/* Inline code elements */ -code, -kbd, -samp { - display: inline-block; - padding: 0.375rem; -} - -/* Code blocks */ -pre { - display: block; - margin-top: 0; - margin-bottom: var(--space-4); - padding: var(--space-4); - overflow-x: auto; - -ms-overflow-style: scrollbar; -} - -pre > code, -pre > samp { - display: block; - padding: 0; - background: none; - font-size: inherit; - font-family: inherit; - line-height: var(--leading); -} - -/* Keyboard input */ -kbd { - background-color: var(--kbd-bg); - color: var(--kbd-color); - vertical-align: baseline; -} - -/* ── Prism.js Syntax Highlighting Theme ────────────────────────────── * - * - * These rules style Prism.js token classes using ASW tokens. - * asw.css provides the theme; each page loads Prism via: - * - * - * - * - * - * The CDN theme's colors are overridden here. ASW tokens handle dark/light. - * ─────────────────────────────────────────────────────────────────── */ - -/* Reset Prism default background — pre already styled by ASW */ -code[class*="language-"], -pre[class*="language-"] { - color: var(--code-color); - background: none; - text-shadow: none; -} - -pre[class*="language-"] { - background: var(--surface-1); -} - -/* Token colors — dark (default) */ -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: var(--gray-6); /* muted: ~55% lightness */ - font-style: italic; -} - -.token.punctuation { - color: var(--text-3); /* slightly muted */ -} - -.token.tag, -.token.deleted { - color: var(--red-4); /* HTML tags, deleted code */ -} - -.token.attr-name, -.token.namespace { - color: var(--yellow-4); /* attribute names */ -} - -.token.string, -.token.attr-value, -.token.char, -.token.inserted { - color: var(--green-4); /* strings, values */ -} - -.token.number, -.token.boolean, -.token.constant, -.token.symbol { - color: var(--orange-4); /* literals */ -} - -.token.selector, -.token.builtin { - color: var(--teal-4); /* CSS selectors, builtins */ -} - -.token.keyword, -.token.atrule { - color: var(--blue-4); /* keywords, @rules */ -} - -.token.function, -.token.class-name { - color: var(--cyan-4); /* function/class names */ -} - -.token.property { - color: var(--blue-5); /* object properties */ -} - -.token.operator, -.token.entity, -.token.url { - color: var(--text-2); /* operators */ -} - -.token.regex { - color: var(--orange-5); /* regex literals */ -} - -.token.important, -.token.variable { - color: var(--yellow-5); /* !important, variables */ - font-weight: var(--font-weight-5); -} - -.token.bold { font-weight: var(--font-weight-7); } -.token.italic { font-style: italic; } - -/* Light mode overrides */ -@media (prefers-color-scheme: light) { - .token.comment, - .token.prolog, - .token.doctype, - .token.cdata { color: var(--gray-6); } - - .token.punctuation { color: var(--gray-8); } - - .token.tag, - .token.deleted { color: var(--red-8); } - - .token.attr-name, - .token.namespace { color: var(--yellow-9); } - - .token.string, - .token.attr-value, - .token.char, - .token.inserted { color: var(--green-8); } - - .token.number, - .token.boolean, - .token.constant, - .token.symbol { color: var(--orange-8); } - - .token.selector, - .token.builtin { color: var(--teal-8); } - - .token.keyword, - .token.atrule { color: var(--blue-8); } - - .token.function, - .token.class-name { color: var(--cyan-9); } - - .token.property { color: var(--blue-9); } - - .token.operator, - .token.entity, - .token.url { color: var(--gray-8); } - - .token.regex { color: var(--orange-7); } - - .token.important, - .token.variable { color: var(--yellow-9); } -} - -/* ── Details / Summary ─────────────────────────────────────────────── */ - -details { - display: block; - margin-bottom: var(--space-4); -} - -details summary { - line-height: 1rem; - list-style-type: none; - cursor: pointer; - transition: color var(--ease); - color: var(--accent); -} - -/* Hide browser default marker */ -details summary::-webkit-details-marker { - display: none; -} - -details summary::marker { - display: none; -} - -details summary::-moz-list-bullet { - list-style-type: none; -} - -/* CSS-drawn chevron using Unicode character ▸ (U+25B8) */ -details summary::after { - content: "▸"; - display: inline-block; - width: 1rem; - height: 1rem; - margin-inline-start: calc(var(--space-4, 1rem) * 0.5); - float: right; - font-size: var(--text-sm); - line-height: 1rem; - text-align: center; - color: var(--text-3); - transform: rotate(90deg); /* Point down when closed */ - transition: transform var(--ease); -} - -details summary:focus { - outline: none; -} - -details summary:focus-visible { - outline: var(--outline-width) solid var(--accent-focus); - outline-offset: calc(var(--space-4, 1rem) * 0.5); - color: var(--accordion-active); -} - -/* Open state */ -details[open] > summary { - margin-bottom: var(--space-4); - color: var(--text-3); -} - -details[open] > summary::after { - transform: rotate(180deg); /* Point down when open */ -} - -/* ── Dialog / Modal ────────────────────────────────────────────────── */ - -dialog { - display: flex; - z-index: 999; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - align-items: center; - justify-content: center; - width: inherit; - min-width: 100%; - height: inherit; - min-height: 100%; - padding: 0; - border: 0; - backdrop-filter: var(--modal-backdrop); - background-color: var(--modal-overlay); - color: var(--text); -} - -dialog > article { - width: 100%; - max-height: calc(100vh - var(--space-4) * 2); - margin: var(--space-4); - overflow: auto; -} - -/* Responsive max-widths for modal content */ -@media (min-width: 576px) { - dialog > article { - max-width: 510px; - } -} - -@media (min-width: 768px) { - dialog > article { - max-width: 700px; - } -} - -/* Modal header */ -dialog > article > header > * { - margin-bottom: 0; -} - -dialog > article > header .close, -dialog > article > header :is(a, button)[rel=prev] { - margin: 0; - margin-left: var(--space-4); - padding: 0; - float: right; -} - -/* Modal footer */ -dialog > article > footer { - text-align: right; -} - -dialog > article > footer button, -dialog > article > footer [role=button] { - margin-bottom: 0; -} - -dialog > article > footer button:not(:first-of-type), -dialog > article > footer [role=button]:not(:first-of-type) { - margin-left: calc(var(--space-4) * 0.5); -} - -/* Close button: Unicode ✕ (U+2715) instead of SVG */ -dialog > article .close, -dialog > article :is(a, button)[rel=prev] { - display: block; - width: 1.5rem; - height: 1.5rem; - margin-top: calc(var(--space-4) * -0.5); - margin-bottom: var(--space-4); - margin-left: auto; - border: none; - background-color: transparent; - color: var(--text-3); - font-size: 1.5rem; - line-height: 1; - text-align: center; - opacity: 0.5; - transition: opacity var(--ease); - cursor: pointer; -} - -dialog > article .close::before, -dialog > article :is(a, button)[rel=prev]::before { - content: "✕"; /* Unicode heavy multiplication X */ -} - -dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), -dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { - opacity: 1; -} - -/* Hidden state */ -dialog:not([open]), -dialog[open=false] { - display: none; -} - -/* Body scroll lock when modal is open */ -.modal-is-open { - padding-right: var(--scrollbar-width, 0px); - overflow: hidden; - pointer-events: none; - touch-action: none; -} - -.modal-is-open dialog { - pointer-events: auto; - touch-action: auto; -} - -/* Animations (only if motion is not reduced) */ -@media (prefers-reduced-motion: no-preference) { - :where(.modal-is-opening, .modal-is-closing) dialog, - :where(.modal-is-opening, .modal-is-closing) dialog > article { - animation-duration: 0.2s; - animation-timing-function: ease-in-out; - animation-fill-mode: both; - } - - :where(.modal-is-opening, .modal-is-closing) dialog { - animation-duration: 0.8s; - animation-name: modal-overlay; - } - - :where(.modal-is-opening, .modal-is-closing) dialog > article { - animation-delay: 0.2s; - animation-name: modal; - } - - .modal-is-closing dialog, - .modal-is-closing dialog > article { - animation-delay: 0s; - animation-direction: reverse; - } - - @keyframes modal-overlay { - from { - backdrop-filter: none; - background-color: transparent; - } - } - - @keyframes modal { - from { - transform: translateY(-100%); - opacity: 0; - } - } -} - -/* Respect reduced motion: instant show/hide */ -@media (prefers-reduced-motion: reduce) { - dialog, - dialog > article { - animation: none !important; - transition: none !important; - } -} - -/* ── Figure & Figcaption ───────────────────────────────────────────── */ - -figure { - display: block; - margin: 0; - margin-bottom: var(--space-4); - padding: 0; -} - -figure figcaption { - padding: calc(var(--space-4) * 0.5) 0; - color: var(--text-3); - font-size: var(--text-sm); -} - -/* ── Progress ──────────────────────────────────────────────────────── */ - -progress { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - display: inline-block; - vertical-align: baseline; - width: 100%; - height: 0.5rem; - margin-bottom: calc(var(--space-4) * 0.5); - overflow: hidden; - border: 0; - border-radius: var(--radius-md); - background-color: var(--track-bg); - color: var(--accent); -} - -progress::-webkit-progress-bar { - border-radius: var(--radius-md); - background: none; -} - -progress[value]::-webkit-progress-value { - background-color: var(--accent); - transition: inline-size var(--ease); -} - -progress::-moz-progress-bar { - background-color: var(--accent); -} - -/* Indeterminate progress (animated) - respect motion preferences */ -@media (prefers-reduced-motion: no-preference) { - progress:indeterminate { - background: var(--track-bg) - linear-gradient(to right, - var(--accent) 30%, - var(--track-bg) 30%) - top left / 150% 150% no-repeat; - animation: progress-indeterminate 1s linear infinite; - } - - progress:indeterminate[value]::-webkit-progress-value { - background-color: transparent; - } - - @keyframes progress-indeterminate { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } - } -} - -@media (prefers-reduced-motion: reduce) { - progress:indeterminate { - background: var(--track-bg); - } -} - -/* ── Meter ─────────────────────────────────────────────────────────── */ - -meter { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - display: inline-block; - vertical-align: baseline; - width: 100%; - height: 0.5rem; - margin-bottom: calc(var(--space-4) * 0.5); - overflow: hidden; - border: 0; - border-radius: var(--radius-md); - background-color: var(--track-bg); - accent-color: var(--accent); /* Modern CSS: browser renders with our accent */ -} - -/* Webkit meter styling */ -meter::-webkit-meter-bar { - border-radius: var(--radius-md); - background-color: var(--track-bg); -} - -meter::-webkit-meter-optimum-value { - background-color: var(--accent); -} - -meter::-webkit-meter-suboptimum-value { - background-color: var(--accent-blue); -} - -meter::-webkit-meter-even-less-good-value { - background-color: var(--accent-red); /* Red-ish for bad values */ -} - -/* Firefox meter styling */ -meter::-moz-meter-bar { - border-radius: var(--radius-md); - background-color: var(--accent); -} - -meter:-moz-meter-optimum::-moz-meter-bar { - background-color: var(--accent); -} - -meter:-moz-meter-sub-optimum::-moz-meter-bar { - background-color: var(--accent-blue); -} - -meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { - background-color: var(--accent-red); -} - -/* ── Content Container ─────────────────────────────────────────────── */ -/* body > nav, body > main, and body > footer share container alignment so agents - can write