reend-components 1.0.0 → 1.1.0

package/dist/lib/style.css

@@ -1 +1 @@
-:root{--ef-black: 0 0% 4%;--ef-black-soft: 0 0% 6.7%;--ef-black-muted: 0 0% 10%;--ef-dark-gray: 0 0% 13.3%;--ef-gray: 0 0% 20%;--ef-gray-mid: 0 0% 40%;--ef-gray-light: 0 0% 60%;--ef-white-muted: 0 0% 80%;--ef-white-soft: 0 0% 87.8%;--ef-white: 0 0% 94.1%;--ef-pure-white: 0 0% 100%;--ef-yellow: 48 100% 58%;--ef-yellow-dark: 48 85% 39%;--ef-blue: 201 66% 58%;--ef-blue-light: 196 64% 69%;--ef-blue-dark: 202 56% 38%;--ef-cyan: 186 100% 50%;--ef-red: 355 100% 64%;--ef-green: 145 67% 51%;--ef-orange: 39 100% 50%;--ef-purple: 270 77% 64%;--background: 0 0% 4%;--foreground: 0 0% 94.1%;--card: 0 0% 7.8%;--card-foreground: 0 0% 87.8%;--popover: 0 0% 10%;--popover-foreground: 0 0% 87.8%;--primary: 48 100% 58%;--primary-foreground: 0 0% 4%;--secondary: 0 0% 10%;--secondary-foreground: 0 0% 87.8%;--muted: 0 0% 13.3%;--muted-foreground: 0 0% 60%;--accent: 0 0% 10%;--accent-foreground: 48 100% 58%;--destructive: 355 100% 64%;--destructive-foreground: 0 0% 100%;--border: 0 0% 100% / .06;--border-strong: 0 0% 100% / .12;--border-accent: 48 100% 58% / .4;--input: 0 0% 100% / .1;--ring: 48 100% 58%;--radius: 0px;--radius-none: 0px;--radius-sm: 2px;--radius-md: 4px;--surface-canvas: 0 0% 4%;--surface-0: 0 0% 5.9%;--surface-1: 0 0% 7.8%;--surface-2: 0 0% 10%;--surface-3: 0 0% 13.3%;--surface-hover: 0 0% 11.8%;--surface-active: 0 0% 14.5%;--header-height: 64px;--sidebar-width: 280px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .4);--shadow-glow: 0 0 20px hsl(var(--primary) / .2);--z-base: 0;--z-dropdown: 10;--z-sticky: 20;--z-overlay: 30;--z-modal: 40;--z-popover: 50;--z-toast: 60;--z-tooltip: 70;--ease-default: cubic-bezier(.25, .8, .25, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-sharp: cubic-bezier(.4, 0, .2, 1);--ease-smooth: cubic-bezier(.45, 0, .55, 1);--duration-instant: .1s;--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s;--duration-slower: .7s}.light{--ef-black: 0 0% 96%;--ef-black-soft: 0 0% 93%;--ef-black-muted: 0 0% 90%;--ef-dark-gray: 0 0% 87%;--ef-gray: 0 0% 80%;--ef-gray-mid: 0 0% 50%;--ef-gray-light: 0 0% 35%;--ef-white-muted: 0 0% 25%;--ef-white-soft: 0 0% 15%;--ef-white: 0 0% 8%;--ef-pure-white: 0 0% 0%;--ef-yellow: 42 90% 42%;--ef-yellow-dark: 42 85% 30%;--ef-blue-light: 196 50% 55%;--ef-blue-dark: 202 56% 30%;--ef-cyan: 186 80% 35%;--ef-red: 355 85% 48%;--ef-green: 145 60% 38%;--ef-orange: 39 90% 38%;--ef-purple: 270 65% 50%;--background: 0 0% 97%;--foreground: 0 0% 8%;--card: 0 0% 100%;--card-foreground: 0 0% 15%;--popover: 0 0% 100%;--popover-foreground: 0 0% 15%;--primary: 42 90% 42%;--primary-foreground: 0 0% 100%;--secondary: 0 0% 93%;--secondary-foreground: 0 0% 15%;--muted: 0 0% 93%;--muted-foreground: 0 0% 42%;--accent: 0 0% 93%;--accent-foreground: 42 90% 42%;--destructive: 355 80% 50%;--destructive-foreground: 0 0% 100%;--border: 0 0% 0% / .1;--border-strong: 0 0% 0% / .18;--border-accent: 42 90% 42% / .4;--input: 0 0% 0% / .12;--ring: 42 90% 42%;--surface-canvas: 0 0% 97%;--surface-0: 0 0% 95%;--surface-1: 0 0% 100%;--surface-2: 0 0% 97%;--surface-3: 0 0% 93%;--surface-hover: 0 0% 92%;--surface-active: 0 0% 88%;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .08);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .08);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .12), 0 4px 6px -4px rgb(0 0 0 / .08);--shadow-glow: 0 0 20px hsl(var(--primary) / .25)}body{background-color:hsl(var(--background));color:hsl(var(--foreground));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+:root{--ef-black: 0 0% 4%;--ef-black-soft: 0 0% 6.7%;--ef-black-muted: 0 0% 10%;--ef-dark-gray: 0 0% 13.3%;--ef-gray: 0 0% 20%;--ef-gray-mid: 0 0% 40%;--ef-gray-light: 0 0% 60%;--ef-white-muted: 0 0% 80%;--ef-white-soft: 0 0% 87.8%;--ef-white: 0 0% 94.1%;--ef-pure-white: 0 0% 100%;--ef-yellow: 48 100% 58%;--ef-yellow-dark: 48 85% 39%;--ef-blue: 201 66% 58%;--ef-blue-light: 196 64% 69%;--ef-blue-dark: 202 56% 38%;--ef-cyan: 186 100% 50%;--ef-red: 355 100% 64%;--ef-green: 145 67% 51%;--ef-orange: 39 100% 50%;--ef-purple: 270 77% 64%;--background: 0 0% 4%;--foreground: 0 0% 94.1%;--card: 0 0% 7.8%;--card-foreground: 0 0% 87.8%;--popover: 0 0% 10%;--popover-foreground: 0 0% 87.8%;--primary: 48 100% 58%;--primary-foreground: 0 0% 4%;--secondary: 0 0% 10%;--secondary-foreground: 0 0% 87.8%;--muted: 0 0% 13.3%;--muted-foreground: 0 0% 60%;--accent: 0 0% 10%;--accent-foreground: 48 100% 58%;--destructive: 355 100% 64%;--destructive-foreground: 0 0% 100%;--border: 0 0% 100% / .06;--border-strong: 0 0% 100% / .12;--border-accent: 48 100% 58% / .4;--input: 0 0% 100% / .1;--ring: 48 100% 58%;--radius: 0px;--radius-none: 0px;--radius-sm: 2px;--radius-md: 4px;--surface-canvas: 0 0% 4%;--surface-0: 0 0% 5.9%;--surface-1: 0 0% 7.8%;--surface-2: 0 0% 10%;--surface-3: 0 0% 13.3%;--surface-hover: 0 0% 11.8%;--surface-active: 0 0% 14.5%;--header-height: 64px;--sidebar-width: 280px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .4);--shadow-glow: 0 0 20px hsl(var(--primary) / .2);--z-below: -1;--z-base: 0;--z-raised: 1;--z-dropdown: 100;--z-sticky: 200;--z-header: 1000;--z-overlay: 1500;--z-modal: 2000;--z-toast: 3000;--z-tooltip: 4000;--z-max: 9999;--ease-default: cubic-bezier(.25, .8, .25, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-sharp: cubic-bezier(.4, 0, .2, 1);--ease-smooth: cubic-bezier(.45, 0, .55, 1);--duration-instant: .1s;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--duration-slower: .8s;--ef-yellow-glow: rgba(255, 212, 41, .15);--text-primary: hsl(0 0% 94.1%);--text-secondary: hsl(0 0% 87.8%);--text-tertiary: hsl(0 0% 80%);--text-muted: hsl(0 0% 60%);--text-placeholder: hsl(0 0% 40%);--text-disabled: hsl(0 0% 26.7%);--text-link: hsl(201 66% 58%);--text-accent: hsl(48 100% 58%);--text-error: hsl(355 100% 64%);--text-success: hsl(145 67% 51%);--border-subtle: 0 0% 100% / .06;--border-default: 0 0% 100% / .1;--font-display: "Bender", "Orbitron", sans-serif;--font-ui: "Orbitron", monospace;--font-mono: "JetBrains Mono", "Courier New", monospace;--font-body: "Source Han Sans", "Noto Sans SC", "Inter", sans-serif;--font-decorative: "Morro", "Bender", sans-serif;--ef-red-soft: rgba(255, 71, 87, .1);--ef-green-soft: rgba(46, 213, 115, .1);--ef-orange-soft: rgba(255, 165, 2, .1);--opacity-overlay: .85;--opacity-hover: .08;--opacity-disabled: .38;--opacity-border: .12;--opacity-focus: .24;--opacity-muted: .5;--ef-gradient-primary: linear-gradient(135deg, #ffd429 0%, #ffa502 100%);--ef-gradient-overlay: linear-gradient( 180deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .4) 50%, rgba(10, 10, 10, .95) 100% );--ef-gradient-line: linear-gradient( 90deg, transparent 0%, #ffd429 50%, transparent 100% );--ef-gradient-card-hover: linear-gradient( 145deg, rgba(255, 212, 41, .05) 0%, transparent 60% );--ef-gradient-scanline: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255, 255, 255, .015) 2px, rgba(255, 255, 255, .015) 4px );--chart-1: #ffd429;--chart-2: #00e5ff;--chart-3: #a55eea;--chart-4: #2ed573;--chart-5: #ffa502;--chart-6: #4da8da;--chart-7: #ff4757;--chart-8: #7ec8e3;--bp-mobile: 480px;--bp-tablet: 768px;--bp-laptop: 1024px;--bp-desktop: 1280px;--bp-wide: 1536px;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--ef-lime: 84 100% 63%;--ef-lime-dark: 84 80% 42%;--ef-lime-glow: rgba(203, 255, 64, .25);--accent-active: 84 100% 63%;--shadow-glow-sm: 0 0 6px rgba(0, 0, 0, .25);--shadow-glow-md: 0 0 12px rgba(0, 0, 0, .35);--shadow-glow-lg: 0 0 24px rgba(0, 0, 0, .5);--shadow-accent: 0 0 16px hsl(var(--primary) / .35);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;--space-32: 128px;--container-max: 1280px;--container-padding: 24px;--grid-columns: 12;--grid-gutter: 24px;--content-narrow: 680px;--content-default: 960px;--content-wide: 1200px;--type-display-xl-size: 72px;--type-display-lg-size: 56px;--type-h1-size: 48px;--type-h2-size: 36px;--type-h3-size: 28px;--type-h4-size: 22px;--type-body-lg-size: 18px;--type-body-size: 16px;--type-body-sm-size: 14px;--type-caption-size: 12px;--type-overline-size: 11px;--lh-heading: 1;--lh-display: .95;--lh-body: 1.6;--lh-caption: 1.4;--icon-xs: 16px;--icon-sm: 20px;--icon-md: 24px;--icon-lg: 32px;--icon-xl: 48px;--icon-2xl: 64px;--ratio-banner: 21 / 9;--ratio-feature: 16 / 9;--ratio-portrait: 3 / 4;--ratio-cinematic: 21 / 9;--bg-grid-size: 60px;--bg-grid-color: rgba(255, 255, 255, .03);--bg-glow-primary: radial-gradient( ellipse 80% 50% at 50% 0%, hsl(var(--primary) / .12) 0%, transparent 70% );--bg-glow-lime: radial-gradient( ellipse 80% 50% at 50% 0%, hsl(var(--ef-lime) / .1) 0%, transparent 70% );--bg-diagonal: repeating-linear-gradient( -45deg, transparent, transparent 4px, rgba(255, 255, 255, .02) 4px, rgba(255, 255, 255, .02) 8px );--bracket-size: 24px;--bracket-width: 2px;--bracket-color: hsl(var(--primary) / .4)}.light{--ef-black: 0 0% 96%;--ef-black-soft: 0 0% 93%;--ef-black-muted: 0 0% 90%;--ef-dark-gray: 0 0% 87%;--ef-gray: 0 0% 80%;--ef-gray-mid: 0 0% 50%;--ef-gray-light: 0 0% 35%;--ef-white-muted: 0 0% 25%;--ef-white-soft: 0 0% 15%;--ef-white: 0 0% 8%;--ef-pure-white: 0 0% 0%;--ef-yellow: 42 90% 42%;--ef-yellow-dark: 42 85% 30%;--ef-blue-light: 196 50% 55%;--ef-blue-dark: 202 56% 30%;--ef-cyan: 186 80% 35%;--ef-red: 355 85% 48%;--ef-green: 145 60% 38%;--ef-orange: 39 90% 38%;--ef-purple: 270 65% 50%;--background: 0 0% 97%;--foreground: 0 0% 8%;--card: 0 0% 100%;--card-foreground: 0 0% 15%;--popover: 0 0% 100%;--popover-foreground: 0 0% 15%;--primary: 42 90% 42%;--primary-foreground: 0 0% 100%;--secondary: 0 0% 93%;--secondary-foreground: 0 0% 15%;--muted: 0 0% 93%;--muted-foreground: 0 0% 42%;--accent: 0 0% 93%;--accent-foreground: 42 90% 42%;--destructive: 355 80% 50%;--destructive-foreground: 0 0% 100%;--border: 0 0% 0% / .1;--border-strong: 0 0% 0% / .18;--border-accent: 42 90% 42% / .4;--input: 0 0% 0% / .12;--ring: 42 90% 42%;--surface-canvas: 0 0% 97%;--surface-0: 0 0% 95%;--surface-1: 0 0% 100%;--surface-2: 0 0% 97%;--surface-3: 0 0% 93%;--surface-hover: 0 0% 92%;--surface-active: 0 0% 88%;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .08);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .08);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .12), 0 4px 6px -4px rgb(0 0 0 / .08);--shadow-glow: 0 0 20px hsl(var(--primary) / .25);--shadow-glow-sm: 0 0 6px rgba(0, 0, 0, .1);--shadow-glow-md: 0 0 12px rgba(0, 0, 0, .15);--shadow-glow-lg: 0 0 24px rgba(0, 0, 0, .2);--shadow-accent: 0 0 16px hsl(var(--primary) / .25);--ef-lime: 84 90% 38%;--ef-lime-dark: 84 80% 28%;--ef-lime-glow: rgba(100, 160, 0, .2);--accent-active: 84 90% 38%;--bg-grid-color: rgba(0, 0, 0, .04);--bg-glow-primary: radial-gradient( ellipse 80% 50% at 50% 0%, hsl(var(--primary) / .1) 0%, transparent 70% );--bg-glow-lime: radial-gradient( ellipse 80% 50% at 50% 0%, hsl(var(--ef-lime) / .08) 0%, transparent 70% );--bg-diagonal: repeating-linear-gradient( -45deg, transparent, transparent 4px, rgba(0, 0, 0, .015) 4px, rgba(0, 0, 0, .015) 8px );--bracket-color: hsl(var(--primary) / .35);--text-primary: hsl(0 0% 8%);--text-secondary: hsl(0 0% 20%);--text-tertiary: hsl(0 0% 35%);--text-muted: hsl(0 0% 45%);--text-placeholder: hsl(0 0% 55%);--text-disabled: hsl(0 0% 65%);--text-link: hsl(202 56% 35%);--text-accent: hsl(42 90% 42%);--text-error: hsl(355 85% 48%);--text-success: hsl(145 60% 38%);--ef-gradient-scanline: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, .04) 2px, rgba(0, 0, 0, .04) 4px )}body{background-color:hsl(var(--background));color:hsl(var(--foreground));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.clip-corner{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}.clip-corner-sm{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}.clip-corner-lg{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}.font-display,.font-ui{font-family:Orbitron,monospace}.font-mono{font-family:JetBrains Mono,Courier New,monospace}.font-body{font-family:Source Han Sans,Noto Sans SC,Inter,sans-serif}.corner-brackets{position:relative}.corner-brackets:before,.corner-brackets:after{content:"";position:absolute;width:24px;height:24px;pointer-events:none}.corner-brackets:before{top:-1px;left:-1px;border-top:2px solid hsl(var(--primary) / .4);border-left:2px solid hsl(var(--primary) / .4)}.corner-brackets:after{bottom:-1px;right:-1px;border-bottom:2px solid hsl(var(--primary) / .4);border-right:2px solid hsl(var(--primary) / .4)}.scanline-overlay{position:relative}.scanline-overlay:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.015) 2px,rgba(255,255,255,.015) 4px);pointer-events:none}.light .scanline-overlay:after{background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px)}.glow-yellow{box-shadow:0 0 20px hsl(var(--primary) / .2)}.glow-yellow-strong{box-shadow:0 0 40px hsl(var(--primary) / .3)}.text-glow-yellow{text-shadow:0 0 20px hsl(var(--primary) / .3)}.gradient-line-h{height:1px;background:linear-gradient(90deg,transparent 0%,hsl(var(--primary)) 50%,transparent 100%)}.gradient-line-v{width:1px;background:linear-gradient(180deg,transparent 0%,hsl(var(--primary)) 50%,transparent 100%)}.diamond-marker:before{content:"◆";color:hsl(var(--primary));margin-right:8px;font-size:8px;vertical-align:middle}.panel-glass{background:#1414148c;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 24px #0006;color:hsl(var(--foreground))}.panel-glass-light{background:#14141459;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);color:hsl(var(--foreground))}.panel-glass-dark{background:#0a0a0aa6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);color:#f0f0f0}.light .panel-glass{background:#ffffffbf;border:1px solid rgba(0,0,0,.08);box-shadow:0 4px 24px #00000014;color:hsl(var(--foreground))}.light .panel-glass-light{background:#ffffff8c;border:1px solid rgba(0,0,0,.06);color:hsl(var(--foreground))}@media (prefers-reduced-transparency: reduce){.panel-glass,.panel-glass-light,.panel-glass-dark{background:hsl(var(--surface-2));backdrop-filter:none;-webkit-backdrop-filter:none}.light .panel-glass,.light .panel-glass-light{background:hsl(var(--surface-2))}}.bg-grid-pattern{background-image:linear-gradient(var(--bg-grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid-color) 1px,transparent 1px);background-size:var(--bg-grid-size) var(--bg-grid-size)}.bg-radial-glow{background-image:var(--bg-glow-primary);background-repeat:no-repeat;background-position:center top;background-size:100% 600px}.bg-radial-glow-lime{background-image:var(--bg-glow-lime);background-repeat:no-repeat;background-position:center top;background-size:100% 600px}.bg-diagonal-lines{background-image:var(--bg-diagonal)}.bg-noise-overlay{position:relative}.bg-noise-overlay:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");opacity:.025;pointer-events:none;z-index:0}.ef-heading{font-family:Orbitron,monospace;line-height:var(--lh-heading, 1);text-transform:uppercase;letter-spacing:.05em}.ef-display{font-family:Orbitron,monospace;line-height:var(--lh-display, .95);text-transform:uppercase;letter-spacing:.08em;font-weight:700}.ef-overline{font-family:JetBrains Mono,monospace;font-size:var(--type-overline-size, 11px);text-transform:uppercase;letter-spacing:.12em;color:hsl(var(--muted-foreground))}.shadow-glow-sm{box-shadow:var(--shadow-glow-sm)}.shadow-glow-md{box-shadow:var(--shadow-glow-md)}.shadow-glow-lg{box-shadow:var(--shadow-glow-lg)}.shadow-accent{box-shadow:var(--shadow-accent)}mark,.search-highlight{background:#ffd42933;color:hsl(var(--primary));border-radius:0;padding:0 2px}.search-result-category{font-family:Orbitron,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--muted-foreground))}.search-result-title{font-family:Bender,sans-serif;font-size:16px;font-weight:600;color:hsl(var(--foreground))}.search-result-excerpt{font-size:14px;color:hsl(var(--muted-foreground));line-height:1.5}.light mark,.light .search-highlight{background:#ffb40026;color:hsl(var(--primary))}.spoiler{background:hsl(var(--foreground));color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .2s ease}.spoiler:hover,.spoiler:focus,.spoiler[data-revealed=true]{background:transparent;color:inherit}.ripple{position:relative;overflow:hidden}.ripple:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,rgba(255,212,41,.15) 0%,transparent 60%);opacity:0;transform:scale(0);transition:transform .4s ease,opacity .4s ease}.ripple:active:after{transform:scale(2.5);opacity:1;transition:transform 0s,opacity 0s}:not(pre)>code{background:#1a1a1a;padding:2px 6px;font-family:JetBrains Mono,monospace;font-size:.875em;color:hsl(var(--ef-yellow));border:1px solid hsl(var(--border))}@media print{.print-hidden{display:none!important}.print-only{display:block!important}.print-break-before{page-break-before:always}.print-break-after{page-break-after:always}.print-no-break{page-break-inside:avoid}}@media (pointer: coarse){.touch-target{min-width:44px;min-height:44px}[role=dialog][data-sheet=bottom]{padding-bottom:calc(var(--safe-bottom) + 12px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loadingDot{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}@keyframes glitch{0%,90%,to{transform:translate(0)}92%{transform:translate(-2px,1px)}94%{transform:translate(2px,-1px)}96%{transform:translate(-1px,-1px)}98%{transform:translate(1px,1px)}}@keyframes cursorBlink{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes pulseGlow{0%,to{box-shadow:0 0 8px hsl(var(--primary) / .2)}50%{box-shadow:0 0 20px hsl(var(--primary) / .4)}}@keyframes skeletonShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes slideDown{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes diamondSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes switchThumbSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes countUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes particleDrift{0%{transform:translate(0)}33%{transform:translate(2px,-3px)}66%{transform:translate(-2px,2px)}to{transform:translate(0)}}.animate-fade-in{animation:fadeIn .3s ease forwards}.animate-fade-in-up{animation:fadeInUp .4s var(--ease-default, ease) forwards}.animate-fade-in-down{animation:fadeInDown .4s var(--ease-default, ease) forwards}.animate-slide-in-right{animation:slideInRight .4s var(--ease-default, ease) forwards}.animate-scale-in{animation:scaleIn .3s var(--ease-default, ease) forwards}.animate-rotate{animation:rotate 1s linear infinite}.animate-loading-dot{animation:loadingDot 1.4s ease-in-out infinite both}.animate-glitch{animation:glitch 3s infinite}.animate-cursor-blink{animation:cursorBlink 1s step-end infinite}.animate-pulse-glow{animation:pulseGlow 2s ease-in-out infinite}.animate-skeleton{background:linear-gradient(90deg,hsl(var(--surface-1)),hsl(var(--surface-2)),hsl(var(--surface-1)));background-size:200% 100%;animation:skeletonShimmer 1.5s infinite}.animate-slide-down{animation:slideDown .3s ease forwards;transform-origin:top;overflow:hidden}.animate-diamond-spin{animation:diamondSpin .8s linear infinite}.animate-switch-spin{animation:switchThumbSpin .35s cubic-bezier(.34,1.56,.64,1) both}.animate-shrink{animation:shrink 5s linear forwards;transform-origin:left}.animate-dialog-in{animation:dialog-in .3s ease forwards}.animate-accordion-down{animation:accordion-down .25s cubic-bezier(.16,1,.3,1)}.animate-accordion-up{animation:accordion-up .2s cubic-bezier(.7,0,1,1)}.animate-shake{animation:shake .4s var(--ease-sharp, cubic-bezier(.4, 0, .2, 1))}.animate-slide-up{animation:slideUp .3s var(--ease-sharp, cubic-bezier(.4, 0, .2, 1)) forwards}.animate-particle-drift{animation:particleDrift var(--particle-dur, 3s) ease-in-out infinite}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}::view-transition-old(root){animation:fadeOut .2s var(--ease-sharp, ease) forwards}::view-transition-new(root){animation:fadeIn .3s var(--ease-default, ease) forwards}@media (prefers-reduced-motion: reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}.scrollable-panel{overscroll-behavior:contain}body.no-pull-refresh{overscroll-behavior-y:none}.autosave-indicator{font-family:Orbitron,monospace;font-size:11px;display:flex;align-items:center;gap:6px}.autosave-saved{color:#2ed573}.autosave-saving{color:#999}.autosave-unsaved{color:#ffa502}.autosave-error{color:#ff4757}@media (hover: hover) and (pointer: fine){.btn{min-height:36px}}@media (prefers-contrast: more){:root{--border-subtle: rgba(255, 255, 255, .2);--border-default: rgba(255, 255, 255, .4);--text-muted: #BBBBBB}}@media (forced-colors: active){.btn-primary,[class*=btn-]{background:ButtonFace;color:ButtonText;border:2px solid ButtonText;forced-color-adjust:none}.card,[class*=border-border]{border:1px solid CanvasText}[class*=clip-corner]{clip-path:none;border-radius:2px}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reend-components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": false,
   "description": "Tactical, sci-fi, and gaming-inspired React component library — Arknights: Endfield Design System",
   "type": "module",
@@ -20,6 +20,7 @@
     },
     "./styles.css": "./dist/lib/style.css",
     "./variables.css": "./src/styles/variables.css",
+    "./utilities.css": "./src/styles/utilities.css",
     "./tailwind": {
       "import": "./src/tailwind-preset.ts",
       "require": "./src/tailwind-preset.ts"
@@ -80,6 +81,12 @@
     },
     "lucide-react": {
       "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
     }
   },
   "scripts": {
@@ -115,6 +122,8 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "react-resizable-panels": "^4.6.4",
+    "recharts": "^3.7.0",
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"

package/src/styles/utilities.css

@@ -0,0 +1,580 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   ReEnd-Components CSS Utilities
+   Exported to npm via dist/lib/style.css (imported by src/components/ui/index.ts)
+   Design tokens live in variables.css — this file contains COMPONENT + ANIMATION utilities.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ═══ CLIP-PATH ENDFIELD SIGNATURE ═══ */
+.clip-corner {
+  clip-path: polygon(
+    0 0,
+    calc(100% - 12px) 0,
+    100% 12px,
+    100% 100%,
+    12px 100%,
+    0 calc(100% - 12px)
+  );
+}
+.clip-corner-sm {
+  clip-path: polygon(
+    0 0,
+    calc(100% - 8px) 0,
+    100% 8px,
+    100% 100%,
+    8px 100%,
+    0 calc(100% - 8px)
+  );
+}
+.clip-corner-lg {
+  clip-path: polygon(
+    0 0,
+    calc(100% - 16px) 0,
+    100% 16px,
+    100% 100%,
+    16px 100%,
+    0 calc(100% - 16px)
+  );
+}
+
+/* ═══ TYPOGRAPHY CLASSES ═══ */
+.font-display {
+  font-family: "Orbitron", monospace;
+}
+.font-ui {
+  font-family: "Orbitron", monospace;
+}
+.font-mono {
+  font-family: "JetBrains Mono", "Courier New", monospace;
+}
+.font-body {
+  font-family: "Source Han Sans", "Noto Sans SC", "Inter", sans-serif;
+}
+
+/* ═══ CORNER BRACKETS — ENDFIELD SIGNATURE ═══ */
+.corner-brackets {
+  position: relative;
+}
+.corner-brackets::before,
+.corner-brackets::after {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  pointer-events: none;
+}
+.corner-brackets::before {
+  top: -1px;
+  left: -1px;
+  border-top: 2px solid hsl(var(--primary) / 0.4);
+  border-left: 2px solid hsl(var(--primary) / 0.4);
+}
+.corner-brackets::after {
+  bottom: -1px;
+  right: -1px;
+  border-bottom: 2px solid hsl(var(--primary) / 0.4);
+  border-right: 2px solid hsl(var(--primary) / 0.4);
+}
+
+/* ═══ SCANLINE OVERLAY ═══ */
+.scanline-overlay {
+  position: relative;
+}
+.scanline-overlay::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(255, 255, 255, 0.015) 2px,
+    rgba(255, 255, 255, 0.015) 4px
+  );
+  pointer-events: none;
+}
+.light .scanline-overlay::after {
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.04) 2px,
+    rgba(0, 0, 0, 0.04) 4px
+  );
+}
+
+/* ═══ GLOW EFFECTS ═══ */
+.glow-yellow {
+  box-shadow: 0 0 20px hsl(var(--primary) / 0.2);
+}
+.glow-yellow-strong {
+  box-shadow: 0 0 40px hsl(var(--primary) / 0.3);
+}
+.text-glow-yellow {
+  text-shadow: 0 0 20px hsl(var(--primary) / 0.3);
+}
+
+/* ═══ GRADIENT LINE ═══ */
+.gradient-line-h {
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    hsl(var(--primary)) 50%,
+    transparent 100%
+  );
+}
+.gradient-line-v {
+  width: 1px;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    hsl(var(--primary)) 50%,
+    transparent 100%
+  );
+}
+
+/* ═══ DIAMOND MARKER ═══ */
+.diamond-marker::before {
+  content: "◆";
+  color: hsl(var(--primary));
+  margin-right: 8px;
+  font-size: 8px;
+  vertical-align: middle;
+}
+
+/* ═══ GLASSMORPHISM ═══ */
+.panel-glass {
+  background: rgba(20, 20, 20, 0.55);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  color: hsl(var(--foreground));
+}
+.panel-glass-light {
+  background: rgba(20, 20, 20, 0.35);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: hsl(var(--foreground));
+}
+.panel-glass-dark {
+  background: rgba(10, 10, 10, 0.65);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: #f0f0f0;
+}
+.light .panel-glass {
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  color: hsl(var(--foreground));
+}
+.light .panel-glass-light {
+  background: rgba(255, 255, 255, 0.55);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  color: hsl(var(--foreground));
+}
+@media (prefers-reduced-transparency: reduce) {
+  .panel-glass,
+  .panel-glass-light,
+  .panel-glass-dark {
+    background: hsl(var(--surface-2));
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+  .light .panel-glass,
+  .light .panel-glass-light {
+    background: hsl(var(--surface-2));
+  }
+}
+
+/* ═══ BACKGROUND DECORATIONS ═══ */
+.bg-grid-pattern {
+  background-image:
+    linear-gradient(var(--bg-grid-color) 1px, transparent 1px),
+    linear-gradient(90deg, var(--bg-grid-color) 1px, transparent 1px);
+  background-size: var(--bg-grid-size) var(--bg-grid-size);
+}
+.bg-radial-glow {
+  background-image: var(--bg-glow-primary);
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: 100% 600px;
+}
+.bg-radial-glow-lime {
+  background-image: var(--bg-glow-lime);
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: 100% 600px;
+}
+.bg-diagonal-lines {
+  background-image: var(--bg-diagonal);
+}
+.bg-noise-overlay {
+  position: relative;
+}
+.bg-noise-overlay::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
+  opacity: 0.025;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ═══ TYPOGRAPHY UTILITIES ═══ */
+.ef-heading {
+  font-family: "Orbitron", monospace;
+  line-height: var(--lh-heading, 1);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.ef-display {
+  font-family: "Orbitron", monospace;
+  line-height: var(--lh-display, 0.95);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 700;
+}
+.ef-overline {
+  font-family: "JetBrains Mono", monospace;
+  font-size: var(--type-overline-size, 11px);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: hsl(var(--muted-foreground));
+}
+
+/* ═══ GLOW SHADOW UTILITIES ═══ */
+.shadow-glow-sm {
+  box-shadow: var(--shadow-glow-sm);
+}
+.shadow-glow-md {
+  box-shadow: var(--shadow-glow-md);
+}
+.shadow-glow-lg {
+  box-shadow: var(--shadow-glow-lg);
+}
+.shadow-accent {
+  box-shadow: var(--shadow-accent);
+}
+
+/* ═══ SEARCH HIGHLIGHT ═══ */
+mark,
+.search-highlight {
+  background: rgba(255, 212, 41, 0.2);
+  color: hsl(var(--primary));
+  border-radius: 0;
+  padding: 0 2px;
+}
+.search-result-category {
+  font-family: 'Orbitron', monospace;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: hsl(var(--muted-foreground));
+}
+.search-result-title {
+  font-family: 'Bender', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+.search-result-excerpt {
+  font-size: 14px;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.5;
+}
+.light mark,
+.light .search-highlight {
+  background: rgba(255, 180, 0, 0.15);
+  color: hsl(var(--primary));
+}
+
+/* ═══ SPOILER ═══ */
+.spoiler {
+  background: hsl(var(--foreground));
+  color: transparent;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+}
+.spoiler:hover,
+.spoiler:focus,
+.spoiler[data-revealed="true"] {
+  background: transparent;
+  color: inherit;
+}
+
+/* ═══ RIPPLE EFFECT ═══ */
+.ripple {
+  position: relative;
+  overflow: hidden;
+}
+.ripple::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle, rgba(255, 212, 41, 0.15) 0%, transparent 60%);
+  opacity: 0;
+  transform: scale(0);
+  transition: transform 0.4s ease, opacity 0.4s ease;
+}
+.ripple:active::after {
+  transform: scale(2.5);
+  opacity: 1;
+  transition: transform 0s, opacity 0s;
+}
+
+/* ═══ INLINE CODE (prose) ═══ */
+:not(pre) > code {
+  background: #1a1a1a;
+  padding: 2px 6px;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.875em;
+  color: hsl(var(--ef-yellow));
+  border: 1px solid hsl(var(--border));
+}
+
+/* ═══ PRINT UTILITIES ═══ */
+@media print {
+  .print-hidden {
+    display: none !important;
+  }
+  .print-only {
+    display: block !important;
+  }
+  .print-break-before {
+    page-break-before: always;
+  }
+  .print-break-after {
+    page-break-after: always;
+  }
+  .print-no-break {
+    page-break-inside: avoid;
+  }
+}
+
+/* ═══ POINTER / TOUCH ═══ */
+@media (pointer: coarse) {
+  .touch-target {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  [role="dialog"][data-sheet="bottom"] {
+    padding-bottom: calc(var(--safe-bottom) + 12px);
+  }
+}
+
+/* ═══ KEYFRAME ANIMATIONS ═══ */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeInDown {
+  from { opacity: 0; transform: translateY(-16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(-24px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.92); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+@keyframes loadingDot {
+  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
+  40%           { opacity: 1;   transform: scale(1); }
+}
+@keyframes glitch {
+  0%, 90%, 100% { transform: translate(0); }
+  92%            { transform: translate(-2px, 1px); }
+  94%            { transform: translate(2px, -1px); }
+  96%            { transform: translate(-1px, -1px); }
+  98%            { transform: translate(1px, 1px); }
+}
+@keyframes cursorBlink {
+  0%, 50%   { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+@keyframes pulseGlow {
+  0%, 100% { box-shadow: 0 0 8px hsl(var(--primary) / 0.2); }
+  50%      { box-shadow: 0 0 20px hsl(var(--primary) / 0.4); }
+}
+@keyframes skeletonShimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+@keyframes slideDown {
+  from { transform: scaleY(0); opacity: 0; }
+  to   { transform: scaleY(1); opacity: 1; }
+}
+@keyframes diamondSpin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+@keyframes switchThumbSpin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+@keyframes shrink {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+@keyframes countUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes dialog-in {
+  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
+  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+@keyframes accordion-down {
+  from { height: 0; }
+  to   { height: var(--radix-accordion-content-height); }
+}
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to   { height: 0; }
+}
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20%, 60%  { transform: translateX(-4px); }
+  40%, 80%  { transform: translateX(4px); }
+}
+@keyframes slideUp {
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+}
+@keyframes particleDrift {
+  0%   { transform: translate(0,    0);   }
+  33%  { transform: translate(2px,  -3px); }
+  66%  { transform: translate(-2px,  2px); }
+  100% { transform: translate(0,    0);   }
+}
+
+/* ═══ ANIMATION UTILITY CLASSES ═══ */
+.animate-fade-in        { animation: fadeIn 0.3s ease forwards; }
+.animate-fade-in-up     { animation: fadeInUp 0.4s var(--ease-default, ease) forwards; }
+.animate-fade-in-down   { animation: fadeInDown 0.4s var(--ease-default, ease) forwards; }
+.animate-slide-in-right { animation: slideInRight 0.4s var(--ease-default, ease) forwards; }
+.animate-scale-in       { animation: scaleIn 0.3s var(--ease-default, ease) forwards; }
+.animate-rotate         { animation: rotate 1s linear infinite; }
+.animate-loading-dot    { animation: loadingDot 1.4s ease-in-out infinite both; }
+.animate-glitch         { animation: glitch 3s infinite; }
+.animate-cursor-blink   { animation: cursorBlink 1s step-end infinite; }
+.animate-pulse-glow     { animation: pulseGlow 2s ease-in-out infinite; }
+.animate-skeleton {
+  background: linear-gradient(
+    90deg,
+    hsl(var(--surface-1)) 0%,
+    hsl(var(--surface-2)) 50%,
+    hsl(var(--surface-1)) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeletonShimmer 1.5s infinite;
+}
+.animate-slide-down     { animation: slideDown 0.3s ease forwards; transform-origin: top; overflow: hidden; }
+.animate-diamond-spin   { animation: diamondSpin 0.8s linear infinite; }
+.animate-switch-spin    { animation: switchThumbSpin 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
+.animate-shrink         { animation: shrink 5s linear forwards; transform-origin: left; }
+.animate-dialog-in      { animation: dialog-in 0.3s ease forwards; }
+.animate-accordion-down  { animation: accordion-down 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
+.animate-accordion-up    { animation: accordion-up 0.2s cubic-bezier(0.7, 0, 1, 1); }
+.animate-shake           { animation: shake 0.4s var(--ease-sharp, cubic-bezier(0.4, 0, 0.2, 1)); }
+.animate-slide-up        { animation: slideUp 0.3s var(--ease-sharp, cubic-bezier(0.4, 0, 0.2, 1)) forwards; }
+.animate-particle-drift  { animation: particleDrift var(--particle-dur, 3s) ease-in-out infinite; }
+
+/* ═══ REDUCED MOTION ═══ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ═══ VIEW TRANSITIONS API ═══ */
+::view-transition-old(root) {
+  animation: fadeOut 0.2s var(--ease-sharp, ease) forwards;
+}
+::view-transition-new(root) {
+  animation: fadeIn 0.3s var(--ease-default, ease) forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+}
+
+/* ═══ SCROLL BEHAVIOR (Section 101) ═══ */
+.scrollable-panel {
+  overscroll-behavior: contain;
+}
+body.no-pull-refresh {
+  overscroll-behavior-y: none;
+}
+
+/* ═══ AUTOSAVE INDICATOR (Section 103) ═══ */
+.autosave-indicator {
+  font-family: 'Orbitron', monospace;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.autosave-saved   { color: #2ED573; }
+.autosave-saving  { color: #999; }
+.autosave-unsaved { color: #FFA502; }
+.autosave-error   { color: #FF4757; }
+
+/* ═══ POINTER TYPE — fine (mouse/trackpad) (Section 107) ═══ */
+@media (hover: hover) and (pointer: fine) {
+  .btn { min-height: 36px; }
+}
+
+/* ═══ HIGH CONTRAST MODE (Section 107) ═══ */
+@media (prefers-contrast: more) {
+  :root {
+    --border-subtle: rgba(255, 255, 255, 0.2);
+    --border-default: rgba(255, 255, 255, 0.4);
+    --text-muted: #BBBBBB;
+  }
+}
+
+/* ═══ FORCED COLORS / WINDOWS HIGH CONTRAST (Section 107) ═══ */
+@media (forced-colors: active) {
+  .btn-primary,
+  [class*="btn-"] {
+    background: ButtonFace;
+    color: ButtonText;
+    border: 2px solid ButtonText;
+    forced-color-adjust: none;
+  }
+  .card,
+  [class*="border-border"] {
+    border: 1px solid CanvasText;
+  }
+  /* clip-path is invisible in forced-colors — fall back to border radius */
+  [class*="clip-corner"] {
+    clip-path: none;
+    border-radius: 2px;
+  }
+}