@bookklik/senangstart-css 0.2.7 → 0.2.8

package/public/senangstart.css

@@ -0,0 +1,1196 @@
+:root {
+  --s-none: 0px;
+  --s-thin: 1px;
+  --s-regular: 2px;
+  --s-thick: 3px;
+  --s-tiny: 4px;
+  --s-tiny-2x: 6px;
+  --s-small: 8px;
+  --s-small-2x: 10px;
+  --s-small-3x: 12px;
+  --s-small-4x: 14px;
+  --s-medium: 16px;
+  --s-medium-2x: 20px;
+  --s-medium-3x: 24px;
+  --s-medium-4x: 28px;
+  --s-large: 32px;
+  --s-large-2x: 36px;
+  --s-large-3x: 40px;
+  --s-large-4x: 44px;
+  --s-big: 48px;
+  --s-big-2x: 56px;
+  --s-big-3x: 64px;
+  --s-big-4x: 80px;
+  --s-giant: 96px;
+  --s-giant-2x: 112px;
+  --s-giant-3x: 128px;
+  --s-giant-4x: 144px;
+  --s-vast: 160px;
+  --s-vast-2x: 176px;
+  --s-vast-3x: 192px;
+  --s-vast-4x: 208px;
+  --s-vast-5x: 224px;
+  --s-vast-6x: 240px;
+  --s-vast-7x: 256px;
+  --s-vast-8x: 288px;
+  --s-vast-9x: 320px;
+  --s-vast-10x: 384px;
+  --r-none: 0px;
+  --r-small: 4px;
+  --r-medium: 8px;
+  --r-big: 16px;
+  --r-round: 9999px;
+  --shadow-none: none;
+  --shadow-small: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-medium: 0 4px 6px rgba(0,0,0,0.1);
+  --shadow-big: 0 10px 15px rgba(0,0,0,0.15);
+  --shadow-giant: 0 25px 50px rgba(0,0,0,0.25);
+  --font-mini: 0.75rem;
+  --font-small: 0.875rem;
+  --font-base: 1rem;
+  --font-large: 1.125rem;
+  --font-big: 1.25rem;
+  --font-huge: 1.5rem;
+  --font-grand: 1.875rem;
+  --font-giant: 2.25rem;
+  --font-mount: 3rem;
+  --font-mega: 3.75rem;
+  --font-giga: 4.5rem;
+  --font-tera: 6rem;
+  --font-hero: 8rem;
+  --font-lh-mini: 1rem;
+  --font-lh-small: 1.25rem;
+  --font-lh-base: 1.5rem;
+  --font-lh-large: 1.75rem;
+  --font-lh-big: 1.75rem;
+  --font-lh-huge: 2rem;
+  --font-lh-grand: 2.25rem;
+  --font-lh-giant: 2.5rem;
+  --font-lh-mount: 1;
+  --font-lh-mega: 1;
+  --font-lh-giga: 1;
+  --font-lh-tera: 1;
+  --font-lh-hero: 1;
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-bold: 700;
+  --c-white: #FFFFFF;
+  --c-black: #000000;
+  --c-grey: #6B7280;
+  --c-dark: #3E4A5D;
+  --c-light: #DBEAFE;
+  --c-primary: #2563EB;
+  --c-secondary: #DBEAFE;
+  --c-success: #10B981;
+  --c-warning: #F59E0B;
+  --c-danger: #EF4444;
+  --c-red-50: #FEF2F2;
+  --c-red-100: #FEE2E2;
+  --c-red-200: #FECACA;
+  --c-red-300: #FCA5A5;
+  --c-red-400: #F87171;
+  --c-red-500: #EF4444;
+  --c-red-600: #DC2626;
+  --c-red-700: #B91C1C;
+  --c-red-800: #991B1B;
+  --c-red-900: #7F1D1D;
+  --c-red-950: #450A0A;
+  --c-orange-50: #FFF7ED;
+  --c-orange-100: #FFEDD5;
+  --c-orange-200: #FED7AA;
+  --c-orange-300: #FDBA74;
+  --c-orange-400: #FB923C;
+  --c-orange-500: #F97316;
+  --c-orange-600: #EA580C;
+  --c-orange-700: #C2410C;
+  --c-orange-800: #9A3412;
+  --c-orange-900: #7C2D12;
+  --c-orange-950: #431407;
+  --c-amber-50: #FFFBEB;
+  --c-amber-100: #FEF3C7;
+  --c-amber-200: #FDE68A;
+  --c-amber-300: #FCD34D;
+  --c-amber-400: #FBBF24;
+  --c-amber-500: #F59E0B;
+  --c-amber-600: #D97706;
+  --c-amber-700: #B45309;
+  --c-amber-800: #92400E;
+  --c-amber-900: #78350F;
+  --c-amber-950: #451A03;
+  --c-yellow-50: #FEFCE8;
+  --c-yellow-100: #FEF9C3;
+  --c-yellow-200: #FEF08A;
+  --c-yellow-300: #FDE047;
+  --c-yellow-400: #FACC15;
+  --c-yellow-500: #EAB308;
+  --c-yellow-600: #CA8A04;
+  --c-yellow-700: #A16207;
+  --c-yellow-800: #854D0E;
+  --c-yellow-900: #713F12;
+  --c-yellow-950: #422006;
+  --c-lime-50: #F7FEE7;
+  --c-lime-100: #ECFCCB;
+  --c-lime-200: #D9F99D;
+  --c-lime-300: #BEF264;
+  --c-lime-400: #A3E635;
+  --c-lime-500: #84CC16;
+  --c-lime-600: #65A30D;
+  --c-lime-700: #4D7C0F;
+  --c-lime-800: #3F6212;
+  --c-lime-900: #365314;
+  --c-lime-950: #1A2E05;
+  --c-green-50: #F0FDF4;
+  --c-green-100: #DCFCE7;
+  --c-green-200: #BBF7D0;
+  --c-green-300: #86EFAC;
+  --c-green-400: #4ADE80;
+  --c-green-500: #22C55E;
+  --c-green-600: #16A34A;
+  --c-green-700: #15803D;
+  --c-green-800: #166534;
+  --c-green-900: #14532D;
+  --c-green-950: #052E16;
+  --c-emerald-50: #ECFDF5;
+  --c-emerald-100: #D1FAE5;
+  --c-emerald-200: #A7F3D0;
+  --c-emerald-300: #6EE7B7;
+  --c-emerald-400: #34D399;
+  --c-emerald-500: #10B981;
+  --c-emerald-600: #059669;
+  --c-emerald-700: #047857;
+  --c-emerald-800: #065F46;
+  --c-emerald-900: #064E3B;
+  --c-emerald-950: #022C22;
+  --c-teal-50: #F0FDFA;
+  --c-teal-100: #CCFBF1;
+  --c-teal-200: #99F6E4;
+  --c-teal-300: #5EEAD4;
+  --c-teal-400: #2DD4BF;
+  --c-teal-500: #14B8A6;
+  --c-teal-600: #0D9488;
+  --c-teal-700: #0F766E;
+  --c-teal-800: #115E59;
+  --c-teal-900: #134E4A;
+  --c-teal-950: #042F2E;
+  --c-cyan-50: #ECFEFF;
+  --c-cyan-100: #CFFAFE;
+  --c-cyan-200: #A5F3FC;
+  --c-cyan-300: #67E8F9;
+  --c-cyan-400: #22D3EE;
+  --c-cyan-500: #06B6D4;
+  --c-cyan-600: #0891B2;
+  --c-cyan-700: #0E7490;
+  --c-cyan-800: #155E75;
+  --c-cyan-900: #164E63;
+  --c-cyan-950: #083344;
+  --c-sky-50: #F0F9FF;
+  --c-sky-100: #E0F2FE;
+  --c-sky-200: #BAE6FD;
+  --c-sky-300: #7DD3FC;
+  --c-sky-400: #38BDF8;
+  --c-sky-500: #0EA5E9;
+  --c-sky-600: #0284C7;
+  --c-sky-700: #0369A1;
+  --c-sky-800: #075985;
+  --c-sky-900: #0C4A6E;
+  --c-sky-950: #082F49;
+  --c-blue-50: #EFF6FF;
+  --c-blue-100: #DBEAFE;
+  --c-blue-200: #BFDBFE;
+  --c-blue-300: #93C5FD;
+  --c-blue-400: #60A5FA;
+  --c-blue-500: #3B82F6;
+  --c-blue-600: #2563EB;
+  --c-blue-700: #1D4ED8;
+  --c-blue-800: #1E40AF;
+  --c-blue-900: #1E3A8A;
+  --c-blue-950: #172554;
+  --c-indigo-50: #EEF2FF;
+  --c-indigo-100: #E0E7FF;
+  --c-indigo-200: #C7D2FE;
+  --c-indigo-300: #A5B4FC;
+  --c-indigo-400: #818CF8;
+  --c-indigo-500: #6366F1;
+  --c-indigo-600: #4F46E5;
+  --c-indigo-700: #4338CA;
+  --c-indigo-800: #3730A3;
+  --c-indigo-900: #312E81;
+  --c-indigo-950: #1E1B4B;
+  --c-violet-50: #F5F3FF;
+  --c-violet-100: #EDE9FE;
+  --c-violet-200: #DDD6FE;
+  --c-violet-300: #C4B5FD;
+  --c-violet-400: #A78BFA;
+  --c-violet-500: #8B5CF6;
+  --c-violet-600: #7C3AED;
+  --c-violet-700: #6D28D9;
+  --c-violet-800: #5B21B6;
+  --c-violet-900: #4C1D95;
+  --c-violet-950: #2E1065;
+  --c-purple-50: #FAF5FF;
+  --c-purple-100: #F3E8FF;
+  --c-purple-200: #E9D5FF;
+  --c-purple-300: #D8B4FE;
+  --c-purple-400: #C084FC;
+  --c-purple-500: #A855F7;
+  --c-purple-600: #9333EA;
+  --c-purple-700: #7E22CE;
+  --c-purple-800: #6B21A8;
+  --c-purple-900: #581C87;
+  --c-purple-950: #3B0764;
+  --c-fuchsia-50: #FDF4FF;
+  --c-fuchsia-100: #FAE8FF;
+  --c-fuchsia-200: #F5D0FE;
+  --c-fuchsia-300: #F0ABFC;
+  --c-fuchsia-400: #E879F9;
+  --c-fuchsia-500: #D946EF;
+  --c-fuchsia-600: #C026D3;
+  --c-fuchsia-700: #A21CAF;
+  --c-fuchsia-800: #86198F;
+  --c-fuchsia-900: #701A75;
+  --c-fuchsia-950: #4A044E;
+  --c-pink-50: #FDF2F8;
+  --c-pink-100: #FCE7F3;
+  --c-pink-200: #FBCFE8;
+  --c-pink-300: #F9A8D4;
+  --c-pink-400: #F472B6;
+  --c-pink-500: #EC4899;
+  --c-pink-600: #DB2777;
+  --c-pink-700: #BE185D;
+  --c-pink-800: #9D174D;
+  --c-pink-900: #831843;
+  --c-pink-950: #500724;
+  --c-rose-50: #FFF1F2;
+  --c-rose-100: #FFE4E6;
+  --c-rose-200: #FECDD3;
+  --c-rose-300: #FDA4AF;
+  --c-rose-400: #FB7185;
+  --c-rose-500: #F43F5E;
+  --c-rose-600: #E11D48;
+  --c-rose-700: #BE123C;
+  --c-rose-800: #9F1239;
+  --c-rose-900: #881337;
+  --c-rose-950: #4C0519;
+  --c-slate-50: #F8FAFC;
+  --c-slate-100: #F1F5F9;
+  --c-slate-200: #E2E8F0;
+  --c-slate-300: #CBD5E1;
+  --c-slate-400: #94A3B8;
+  --c-slate-500: #64748B;
+  --c-slate-600: #475569;
+  --c-slate-700: #334155;
+  --c-slate-800: #1E293B;
+  --c-slate-900: #0F172A;
+  --c-slate-950: #020617;
+  --c-gray-50: #F9FAFB;
+  --c-gray-100: #F3F4F6;
+  --c-gray-200: #E5E7EB;
+  --c-gray-300: #D1D5DB;
+  --c-gray-400: #9CA3AF;
+  --c-gray-500: #6B7280;
+  --c-gray-600: #4B5563;
+  --c-gray-700: #374151;
+  --c-gray-800: #1F2937;
+  --c-gray-900: #111827;
+  --c-gray-950: #030712;
+  --c-zinc-50: #FAFAFA;
+  --c-zinc-100: #F4F4F5;
+  --c-zinc-200: #E4E4E7;
+  --c-zinc-300: #D4D4D8;
+  --c-zinc-400: #A1A1AA;
+  --c-zinc-500: #71717A;
+  --c-zinc-600: #52525B;
+  --c-zinc-700: #3F3F46;
+  --c-zinc-800: #27272A;
+  --c-zinc-900: #18181B;
+  --c-zinc-950: #09090B;
+  --c-neutral-50: #FAFAFA;
+  --c-neutral-100: #F5F5F5;
+  --c-neutral-200: #E5E5E5;
+  --c-neutral-300: #D4D4D4;
+  --c-neutral-400: #A3A3A3;
+  --c-neutral-500: #737373;
+  --c-neutral-600: #525252;
+  --c-neutral-700: #404040;
+  --c-neutral-800: #262626;
+  --c-neutral-900: #171717;
+  --c-neutral-950: #0A0A0A;
+  --c-stone-50: #FAFAF9;
+  --c-stone-100: #F5F5F4;
+  --c-stone-200: #E7E5E4;
+  --c-stone-300: #D6D3D1;
+  --c-stone-400: #A8A29E;
+  --c-stone-500: #78716C;
+  --c-stone-600: #57534E;
+  --c-stone-700: #44403C;
+  --c-stone-800: #292524;
+  --c-stone-900: #1C1917;
+  --c-stone-950: #0C0A09;
+  --z-base: 0;
+  --z-low: 10;
+  --z-mid: 50;
+  --z-high: 100;
+  --z-top: 9999;
+  --tw-0: 0px;
+  --tw-1: 0.25rem;
+  --tw-2: 0.5rem;
+  --tw-3: 0.75rem;
+  --tw-4: 1rem;
+  --tw-5: 1.25rem;
+  --tw-6: 1.5rem;
+  --tw-7: 1.75rem;
+  --tw-8: 2rem;
+  --tw-9: 2.25rem;
+  --tw-10: 2.5rem;
+  --tw-11: 2.75rem;
+  --tw-12: 3rem;
+  --tw-14: 3.5rem;
+  --tw-16: 4rem;
+  --tw-20: 5rem;
+  --tw-24: 6rem;
+  --tw-28: 7rem;
+  --tw-32: 8rem;
+  --tw-36: 9rem;
+  --tw-40: 10rem;
+  --tw-44: 11rem;
+  --tw-48: 12rem;
+  --tw-52: 13rem;
+  --tw-56: 14rem;
+  --tw-60: 15rem;
+  --tw-64: 16rem;
+  --tw-72: 18rem;
+  --tw-80: 20rem;
+  --tw-96: 24rem;
+  --tw-px: 1px;
+  --tw-0\\.5: 0.125rem;
+  --tw-1\\.5: 0.375rem;
+  --tw-2\\.5: 0.625rem;
+  --tw-3\\.5: 0.875rem;
+  --tw-rounded-none: 0px;
+  --tw-rounded-sm: 0.125rem;
+  --tw-rounded-DEFAULT: 0.25rem;
+  --tw-rounded-md: 0.375rem;
+  --tw-rounded-lg: 0.5rem;
+  --tw-rounded-xl: 0.75rem;
+  --tw-rounded-2xl: 1rem;
+  --tw-rounded-3xl: 1.5rem;
+  --tw-rounded-full: 9999px;
+  --tw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-DEFAULT: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-none: 0 0 #0000;
+  --tw-text-xs: 0.75rem;
+  --tw-text-sm: 0.875rem;
+  --tw-text-base: 1rem;
+  --tw-text-lg: 1.125rem;
+  --tw-text-xl: 1.25rem;
+  --tw-text-2xl: 1.5rem;
+  --tw-text-3xl: 1.875rem;
+  --tw-text-4xl: 2.25rem;
+  --tw-text-5xl: 3rem;
+  --tw-text-6xl: 3.75rem;
+  --tw-text-7xl: 4.5rem;
+  --tw-text-8xl: 6rem;
+  --tw-text-9xl: 8rem;
+  --tw-leading-xs: 1rem;
+  --tw-leading-sm: 1.25rem;
+  --tw-leading-base: 1.5rem;
+  --tw-leading-lg: 1.75rem;
+  --tw-leading-xl: 1.75rem;
+  --tw-leading-2xl: 2rem;
+  --tw-leading-3xl: 2.25rem;
+  --tw-leading-4xl: 2.5rem;
+  --tw-leading-5xl: 1;
+  --tw-leading-6xl: 1;
+  --tw-leading-7xl: 1;
+  --tw-leading-8xl: 1;
+  --tw-leading-9xl: 1;
+  --tw-font-thin: 100;
+  --tw-font-extralight: 200;
+  --tw-font-light: 300;
+  --tw-font-normal: 400;
+  --tw-font-medium: 500;
+  --tw-font-semibold: 600;
+  --tw-font-bold: 700;
+  --tw-font-extrabold: 800;
+  --tw-font-black: 900;
+}
+
+/* 
+ * SenangStart Preflight v1.0
+ * An opinionated set of base styles for SenangStart CSS projects
+ * Based on modern-normalize and Tailwind CSS Preflight
+ */
+
+/*
+ * 1. Prevent padding and border from affecting element width
+ * 2. Allow adding a border to an element by just adding a border-width
+ */
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
+}
+
+/*
+ * 1. Use a consistent sensible line-height in all browsers
+ * 2. Prevent adjustments of font size after orientation changes in iOS
+ * 3. Use a more readable tab size
+ * 4. Use the user's configured sans font-family by default
+ * 5. Use the user's configured sans font-feature-settings by default
+ * 6. Use the user's configured sans font-variation-settings by default
+ * 7. Disable tap highlights on iOS
+ */
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+ * 1. Remove the margin in all browsers
+ * 2. Inherit line-height from html so users can set them as a class directly on the html element
+ */
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+ * 1. Add the correct height in Firefox
+ * 2. Correct the inheritance of border color in Firefox
+ * 3. Ensure horizontal rules are visible by default
+ */
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+ * Add the correct text decoration in Chrome, Edge, and Safari
+ */
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+ * Remove the default font size and weight for headings
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+ * Reset links to optimize for opt-in styling instead of opt-out
+ */
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+ * Add the correct font weight in Edge and Safari
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+ * 1. Use the user's configured mono font-family by default
+ * 2. Use the user's configured mono font-feature-settings by default
+ * 3. Use the user's configured mono font-variation-settings by default
+ * 4. Correct the odd em font sizing in all browsers
+ */
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-feature-settings: normal; /* 2 */
+  font-variation-settings: normal; /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+ * Add the correct font size in all browsers
+ */
+small {
+  font-size: 80%;
+}
+
+/*
+ * Prevent sub and sup elements from affecting the line height in all browsers
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+ * 1. Remove text indentation from table contents in Chrome and Safari
+ * 2. Correct table border color inheritance in all Chrome and Safari
+ * 3. Remove gaps between table borders by default
+ */
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+ * 1. Change the font styles in all browsers
+ * 2. Remove the margin in Firefox and Safari
+ * 3. Remove default padding in all browsers
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+ * Remove the inheritance of text transform in Edge and Firefox
+ */
+button,
+select {
+  text-transform: none;
+}
+
+/*
+ * 1. Correct the inability to style clickable types in iOS and Safari
+ * 2. Remove default button styles
+ */
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+ * Use the modern Firefox focus style for all focusable elements
+ */
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+ * Remove the additional :invalid styles in Firefox
+ */
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+ * Add the correct vertical alignment in Chrome and Firefox
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/*
+ * Correct the cursor style of increment and decrement buttons in Safari
+ */
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+ * 1. Correct the odd appearance in Chrome and Safari
+ * 2. Correct the outline style in Safari
+ */
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+ * Remove the inner padding in Chrome and Safari on macOS
+ */
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+ * 1. Correct the inability to style clickable types in iOS and Safari
+ * 2. Change font properties to inherit in Safari
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+ * Add the correct display in Chrome and Safari
+ */
+summary {
+  display: list-item;
+}
+
+/*
+ * Removes the default spacing and border for appropriate elements
+ */
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+/*
+ * Remove default list styles
+ */
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Reset default styling for dialogs
+ */
+dialog {
+  padding: 0;
+}
+
+/*
+ * Prevent resizing textareas horizontally by default
+ */
+textarea {
+  resize: vertical;
+}
+
+/*
+ * 1. Reset the default placeholder opacity in Firefox
+ * 2. Set the default placeholder color to a semi-transparent gray
+ */
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+ * Set the default cursor for buttons
+ */
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+ * Make sure disabled buttons don't get the pointer cursor
+ */
+:disabled {
+  cursor: default;
+}
+
+/*
+ * 1. Make replaced elements display: block by default
+ * 2. Add vertical-align: middle to align replaced elements more sensibly by default
+ */
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+ * Constrain images and videos to the parent width and preserve their intrinsic aspect ratio
+ */
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+ * Make elements with the HTML hidden attribute stay hidden by default
+ */
+[hidden] {
+  display: none;
+}
+
+/* SenangStart CSS - Animation Keyframes */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+@keyframes pulse {
+  50% { opacity: .5; }
+}
+@keyframes bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+
+/* SenangStart CSS - Utility Classes */
+[layout~="flex"] { display: flex; }
+[layout~="col"] { flex-direction: column; }
+[layout~="grow"] { flex-grow: 1; }
+[layout~="wrap"] { flex-wrap: wrap; }
+[layout~="center"] { justify-content: center; align-items: center; }
+[layout~="row-reverse"] { flex-direction: row-reverse; }
+[layout~="between"] { justify-content: space-between; }
+[layout~="grid"] { display: grid; }
+[layout~="grid-cols:3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+[layout~="grid-cols:2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+[layout~="col-span:2"] { grid-column: span 2 / span 2; }
+[layout~="items:center"] { align-items: center; }
+[layout~="relative"] { position: relative; }
+[layout~="absolute"] { position: absolute; }
+[layout~="top:small"] { top: var(--s-small); }
+[layout~="left:small"] { left: var(--s-small); }
+[layout~="right:small"] { right: var(--s-small); }
+[layout~="bottom:small"] { bottom: var(--s-small); }
+[layout~="z:base"] { z-index: var(--z-base); }
+[layout~="top:0"] { top: 0; }
+[layout~="left:0"] { left: 0; }
+[layout~="z:low"] { z-index: var(--z-low); }
+[layout~="top:[20px]"] { top: 20px; }
+[layout~="left:[20px]"] { left: 20px; }
+[layout~="z:mid"] { z-index: var(--z-mid); }
+[layout~="top:[40px]"] { top: 40px; }
+[layout~="left:[40px]"] { left: 40px; }
+[layout~="items:end"] { align-items: flex-end; }
+[layout~="block"] { display: block; }
+[layout~="justify:center"] { justify-content: center; }
+[layout~="grid-cols:1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+[layout~="justify:between"] { justify-content: space-between; }
+[space~="w:[100%]"] { width: 100%; }
+[space~="h:[100vh]"] { height: 100vh; }
+[space~="h:[100%]"] { height: 100%; }
+[space~="p:big"] { padding: var(--s-big); }
+[space~="m:medium"] { margin: var(--s-medium); }
+[space~="max-w:[1200px]"] { max-width: 1200px; }
+[space~="m-x:auto"] { margin-left: auto; margin-right: auto; }
+[space~="m-b:big"] { margin-bottom: var(--s-big); }
+[space~="p:medium"] { padding: var(--s-medium); }
+[space~="m-b:medium"] { margin-bottom: var(--s-medium); }
+[space~="m-t:medium"] { margin-top: var(--s-medium); }
+[space~="g:small"] { gap: var(--s-small); }
+[space~="p:small"] { padding: var(--s-small); }
+[space~="w:[120px]"] { width: 120px; }
+[space~="h:[60px]"] { height: 60px; }
+[space~="w:[180px]"] { width: 180px; }
+[space~="g:tiny"] { gap: var(--s-tiny); }
+[space~="w:[150px]"] { width: 150px; }
+[space~="p:tiny"] { padding: var(--s-tiny); }
+[space~="g:medium"] { gap: var(--s-medium); }
+[space~="w:[200px]"] { width: 200px; }
+[space~="m-t:tiny"] { margin-top: var(--s-tiny); }
+[space~="p:none"] { padding: var(--s-none); }
+[space~="p-x:big"] { padding-left: var(--s-big); padding-right: var(--s-big); }
+[space~="p-y:tiny"] { padding-top: var(--s-tiny); padding-bottom: var(--s-tiny); }
+[space~="m-l:big"] { margin-left: var(--s-big); }
+[space~="w:[100px]"] { width: 100px; }
+[space~="h:[50px]"] { height: 50px; }
+[space~="h:[80px]"] { height: 80px; }
+[space~="min-w:[200px]"] { min-width: 200px; }
+[space~="m-t:small"] { margin-top: var(--s-small); }
+[space~="w:[80px]"] { width: 80px; }
+[space~="p-x:medium"] { padding-left: var(--s-medium); padding-right: var(--s-medium); }
+[space~="w:[60px]"] { width: 60px; }
+[space~="h:[120px]"] { height: 120px; }
+[space~="p:[20px]"] { padding: 20px; }
+[space~="m:[10px]"] { margin: 10px; }
+[space~="h:[100px]"] { height: 100px; }
+[space~="w:[300px]"] { width: 300px; }
+[space~="w:[48px]"] { width: 48px; }
+[space~="h:[48px]"] { height: 48px; }
+[space~="p-x:small"] { padding-left: var(--s-small); padding-right: var(--s-small); }
+[space~="m-l:medium"] { margin-left: var(--s-medium); }
+[space~="p:tw-8"] { padding: var(--tw-8); }
+[space~="m:tw-4"] { margin: var(--tw-4); }
+[space~="m-b:tw-8"] { margin-bottom: var(--tw-8); }
+[space~="p-x:tw-1"] { padding-left: var(--tw-1); padding-right: var(--tw-1); }
+[space~="p:tw-6"] { padding: var(--tw-6); }
+[space~="m-b:tw-6"] { margin-bottom: var(--tw-6); }
+[space~="m-t:tw-2"] { margin-top: var(--tw-2); }
+[space~="m-t:tw-4"] { margin-top: var(--tw-4); }
+[space~="g:tw-4"] { gap: var(--tw-4); }
+[space~="p:tw-1"] { padding: var(--tw-1); }
+[space~="p:tw-2"] { padding: var(--tw-2); }
+[space~="p:tw-4"] { padding: var(--tw-4); }
+[space~="p-x:tw-8"] { padding-left: var(--tw-8); padding-right: var(--tw-8); }
+[space~="p-y:tw-2"] { padding-top: var(--tw-2); padding-bottom: var(--tw-2); }
+[space~="p-t:tw-10"] { padding-top: var(--tw-10); }
+[space~="p-b:tw-2"] { padding-bottom: var(--tw-2); }
+[space~="p-x:tw-4"] { padding-left: var(--tw-4); padding-right: var(--tw-4); }
+[space~="g:tw-2"] { gap: var(--tw-2); }
+[space~="m:tw-1"] { margin: var(--tw-1); }
+[space~="m:tw-2"] { margin: var(--tw-2); }
+[space~="m-l:tw-16"] { margin-left: var(--tw-16); }
+[space~="p:tw-3"] { padding: var(--tw-3); }
+[space~="g:tw-8"] { gap: var(--tw-8); }
+[space~="g-x:tw-12"] { column-gap: var(--tw-12); }
+[space~="g-y:tw-4"] { row-gap: var(--tw-4); }
+[space~="w:tw-16"] { width: var(--tw-16); }
+[space~="h:tw-16"] { height: var(--tw-16); }
+[space~="w:tw-24"] { width: var(--tw-24); }
+[space~="h:tw-12"] { height: var(--tw-12); }
+[space~="w:tw-32"] { width: var(--tw-32); }
+[space~="h:tw-20"] { height: var(--tw-20); }
+[space~="w:tw-48"] { width: var(--tw-48); }
+[space~="w:tw-20"] { width: var(--tw-20); }
+[space~="m-t:tw-6"] { margin-top: var(--tw-6); }
+[space~="g:tw-6"] { gap: var(--tw-6); }
+[space~="m:small"] { margin: var(--s-small); }
+[space~="w:tw-80"] { width: var(--tw-80); }
+[space~="w:tw-14"] { width: var(--tw-14); }
+[space~="h:tw-14"] { height: var(--tw-14); }
+[space~="g:tw-3"] { gap: var(--tw-3); }
+[space~="m-l:tw-6"] { margin-left: var(--tw-6); }
+[space~="min-h:[100vh]"] { min-height: 100vh; }
+[space~="p-y:big"] { padding-top: var(--s-big); padding-bottom: var(--s-big); }
+[space~="m:none"] { margin: var(--s-none); }
+[space~="m-b:tiny"] { margin-bottom: var(--s-tiny); }
+[space~="p-y:small"] { padding-top: var(--s-small); padding-bottom: var(--s-small); }
+[space~="h:[200px]"] { height: 200px; }
+[space~="min-h:[200px]"] { min-height: 200px; }
+[space~="min-h:[150px]"] { min-height: 150px; }
+[visual~="bg:slate-100"] { background-color: var(--c-slate-100); }
+[visual~="text-size:vast"] { font-size: var(--font-vast); line-height: var(--font-lh-vast); }
+[visual~="font:bold"] { font-weight: var(--fw-bold); }
+[visual~="text:slate-800"] { color: var(--c-slate-800); }
+[visual~="text:slate-500"] { color: var(--c-slate-500); }
+[visual~="text-size:medium"] { font-size: var(--font-medium); line-height: var(--font-lh-medium); }
+[visual~="bg:indigo-50"] { background-color: var(--c-indigo-50); }
+[visual~="border:indigo-200"] { border-color: var(--c-indigo-200); border-style: solid; }
+[visual~="border-w:[1px]"] { border-width: 1px; border-style: solid; }
+[visual~="rounded:medium"] { border-radius: var(--r-medium); }
+[visual~="text-size:big"] { font-size: var(--font-big); line-height: var(--font-lh-big); }
+[visual~="text:indigo-900"] { color: var(--c-indigo-900); }
+[visual~="bg:indigo-500"] { background-color: var(--c-indigo-500); }
+[visual~="text:white"] { color: var(--c-white); }
+[visual~="rounded:small"] { border-radius: var(--r-small); }
+[visual~="bg:indigo-600"] { background-color: var(--c-indigo-600); }
+[visual~="bg:indigo-400"] { background-color: var(--c-indigo-400); }
+[visual~="bg:indigo-100"] { background-color: var(--c-indigo-100); }
+[visual~="bg:violet-50"] { background-color: var(--c-violet-50); }
+[visual~="border:violet-200"] { border-color: var(--c-violet-200); border-style: solid; }
+[visual~="text:violet-900"] { color: var(--c-violet-900); }
+[visual~="bg:violet-500"] { background-color: var(--c-violet-500); }
+[visual~="text:center"] { text-align: center; }
+[visual~="bg:violet-400"] { background-color: var(--c-violet-400); }
+[visual~="text-size:tiny"] { font-size: var(--font-tiny); line-height: var(--font-lh-tiny); }
+[visual~="text:violet-600"] { color: var(--c-violet-600); }
+[visual~="bg:violet-600"] { background-color: var(--c-violet-600); }
+[visual~="bg:violet-300"] { background-color: var(--c-violet-300); }
+[visual~="bg:emerald-50"] { background-color: var(--c-emerald-50); }
+[visual~="border:emerald-200"] { border-color: var(--c-emerald-200); border-style: solid; }
+[visual~="text:emerald-900"] { color: var(--c-emerald-900); }
+[visual~="bg:emerald-500"] { background-color: var(--c-emerald-500); }
+[visual~="bg:emerald-600"] { background-color: var(--c-emerald-600); }
+[visual~="bg:emerald-400"] { background-color: var(--c-emerald-400); }
+[visual~="bg:teal-50"] { background-color: var(--c-teal-50); }
+[visual~="border:teal-200"] { border-color: var(--c-teal-200); border-style: solid; }
+[visual~="text:teal-900"] { color: var(--c-teal-900); }
+[visual~="bg:teal-500"] { background-color: var(--c-teal-500); }
+[visual~="bg:teal-600"] { background-color: var(--c-teal-600); }
+[visual~="bg:teal-400"] { background-color: var(--c-teal-400); }
+[visual~="bg:sky-50"] { background-color: var(--c-sky-50); }
+[visual~="border:sky-200"] { border-color: var(--c-sky-200); border-style: solid; }
+[visual~="text:sky-900"] { color: var(--c-sky-900); }
+[visual~="bg:primary"] { background-color: var(--c-primary); }
+[visual~="bg:secondary"] { background-color: var(--c-secondary); }
+[visual~="text:dark"] { color: var(--c-dark); }
+[visual~="bg:success"] { background-color: var(--c-success); }
+[visual~="bg:warning"] { background-color: var(--c-warning); }
+[visual~="bg:danger"] { background-color: var(--c-danger); }
+[visual~="bg:dark"] { background-color: var(--c-dark); }
+[visual~="bg:light"] { background-color: var(--c-light); }
+[visual~="bg:grey"] { background-color: var(--c-grey); }
+[visual~="text:sky-800"] { color: var(--c-sky-800); }
+[visual~="bg:blue-100"] { background-color: var(--c-blue-100); }
+[visual~="text:blue-900"] { color: var(--c-blue-900); }
+[visual~="bg:blue-300"] { background-color: var(--c-blue-300); }
+[visual~="bg:blue-500"] { background-color: var(--c-blue-500); }
+[visual~="bg:blue-700"] { background-color: var(--c-blue-700); }
+[visual~="bg:blue-900"] { background-color: var(--c-blue-900); }
+[visual~="bg:red-500"] { background-color: var(--c-red-500); }
+[visual~="bg:green-500"] { background-color: var(--c-green-500); }
+[visual~="bg:purple-500"] { background-color: var(--c-purple-500); }
+[visual~="bg:orange-500"] { background-color: var(--c-orange-500); }
+[visual~="bg:blue-50"] { background-color: var(--c-blue-50); }
+[visual~="border:blue-200"] { border-color: var(--c-blue-200); border-style: solid; }
+[visual~="border:blue-500"] { border-color: var(--c-blue-500); border-style: solid; }
+[visual~="rounded:none"] { border-radius: var(--r-none); }
+[visual~="rounded:big"] { border-radius: var(--r-big); }
+[visual~="rounded:round"] { border-radius: var(--r-round); }
+[visual~="border:danger"] { border-color: var(--c-danger); border-style: solid; }
+[visual~="border-w:[2px]"] { border-width: 2px; border-style: solid; }
+[visual~="border:success"] { border-color: var(--c-success); border-style: solid; }
+[visual~="border-t:primary"] { border-top-color: var(--c-primary); border-top-style: solid; }
+[visual~="border-t-w:[2px]"] { border-top-width: 2px; border-top-style: solid; }
+[visual~="border-b:warning"] { border-bottom-color: var(--c-warning); border-bottom-style: solid; }
+[visual~="border-b-w:[2px]"] { border-bottom-width: 2px; border-bottom-style: solid; }
+[visual~="border-x:secondary"] { border-left-color: var(--c-secondary); border-right-color: var(--c-secondary); border-left-style: solid; border-right-style: solid; }
+[visual~="border-x-w:[2px]"] { border-left-width: 2px; border-right-width: 2px; border-left-style: solid; border-right-style: solid; }
+[visual~="border-y:success"] { border-top-color: var(--c-success); border-bottom-color: var(--c-success); border-top-style: solid; border-bottom-style: solid; }
+[visual~="border-y-w:[2px]"] { border-top-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-bottom-style: solid; }
+[visual~="bg:gray-100"] { background-color: var(--c-gray-100); }
+[visual~="border:gray-200"] { border-color: var(--c-gray-200); border-style: solid; }
+[visual~="text:gray-900"] { color: var(--c-gray-900); }
+[visual~="bg:white"] { background-color: var(--c-white); }
+[visual~="shadow:none"] { box-shadow: var(--shadow-none); }
+[visual~="shadow:small"] { box-shadow: var(--shadow-small); }
+[visual~="shadow:medium"] { box-shadow: var(--shadow-medium); }
+[visual~="shadow:big"] { box-shadow: var(--shadow-big); }
+[visual~="shadow:giant"] { box-shadow: var(--shadow-giant); }
+[visual~="bg:pink-50"] { background-color: var(--c-pink-50); }
+[visual~="border:pink-200"] { border-color: var(--c-pink-200); border-style: solid; }
+[visual~="text:pink-900"] { color: var(--c-pink-900); }
+[visual~="bg:pink-500"] { background-color: var(--c-pink-500); }
+[visual~="opacity:100"] { opacity: 1; }
+[visual~="opacity:75"] { opacity: 0.75; }
+[visual~="opacity:50"] { opacity: 0.5; }
+[visual~="opacity:25"] { opacity: 0.25; }
+[visual~="bg:amber-50"] { background-color: var(--c-amber-50); }
+[visual~="border:amber-200"] { border-color: var(--c-amber-200); border-style: solid; }
+[visual~="text:amber-900"] { color: var(--c-amber-900); }
+[visual~="text:amber-800"] { color: var(--c-amber-800); }
+[visual~="text-size:small"] { font-size: var(--font-small); line-height: var(--font-lh-small); }
+[visual~="text-size:giant"] { font-size: var(--font-giant); line-height: var(--font-lh-giant); }
+[visual~="font:normal"] { font-weight: var(--fw-normal); }
+[visual~="text:amber-700"] { color: var(--c-amber-700); }
+[visual~="font:medium"] { font-weight: var(--fw-medium); }
+[visual~="text:left"] { text-align: left; }
+[visual~="bg:amber-100"] { background-color: var(--c-amber-100); }
+[visual~="text:right"] { text-align: right; }
+[visual~="italic"] { font-style: italic; }
+[visual~="underline"] { text-decoration-line: underline; }
+[visual~="line-through"] { text-decoration-line: line-through; }
+[visual~="uppercase"] { text-transform: uppercase; }
+[visual~="lowercase"] { text-transform: lowercase; }
+[visual~="capitalize"] { text-transform: capitalize; }
+[visual~="bg:rose-50"] { background-color: var(--c-rose-50); }
+[visual~="border:rose-200"] { border-color: var(--c-rose-200); border-style: solid; }
+[visual~="text:rose-900"] { color: var(--c-rose-900); }
+[visual~="bg:rose-500"] { background-color: var(--c-rose-500); }
+[visual~="border:none"] { border-color: var(--c-none); border-style: solid; }
+[visual~="hover:bg:rose-700"]:hover { background-color: var(--c-rose-700); }
+[visual~="bg:amber-400"] { background-color: var(--c-amber-400); }
+[visual~="hover:bg:rose-500"]:hover { background-color: var(--c-rose-500); }
+[visual~="hover:text:white"]:hover { color: var(--c-white); }
+[visual~="border:rose-300"] { border-color: var(--c-rose-300); border-style: solid; }
+[visual~="focus:border:rose-500"]:focus { border-color: var(--c-rose-500); border-style: solid; }
+[visual~="focus:shadow:medium"]:focus { box-shadow: var(--shadow-medium); }
+[visual~="bg:cyan-50"] { background-color: var(--c-cyan-50); }
+[visual~="border:cyan-200"] { border-color: var(--c-cyan-200); border-style: solid; }
+[visual~="text:cyan-900"] { color: var(--c-cyan-900); }
+[visual~="bg:cyan-500"] { background-color: var(--c-cyan-500); }
+[visual~="rotate:45"] { transform: rotate(45deg); }
+[visual~="bg:cyan-600"] { background-color: var(--c-cyan-600); }
+[visual~="scale:110"] { transform: scale(1.1); }
+[visual~="bg:cyan-400"] { background-color: var(--c-cyan-400); }
+[visual~="translate-x:[10px]"] { transform: translateX(10px); }
+[visual~="bg:cyan-700"] { background-color: var(--c-cyan-700); }
+[visual~="skew-x:6"] { transform: skewX(6deg); }
+[visual~="origin:top-left"] { transform-origin: top left; }
+[visual~="translate-y:small"] { transform: translateY(var(--s-small)); }
+[visual~="bg:lime-50"] { background-color: var(--c-lime-50); }
+[visual~="border:lime-200"] { border-color: var(--c-lime-200); border-style: solid; }
+[visual~="text:lime-900"] { color: var(--c-lime-900); }
+[visual~="bg:lime-500"] { background-color: var(--c-lime-500); }
+[visual~="transition:all"] { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+[visual~="duration:slow"] { transition-duration: 300ms; }
+[visual~="hover:bg:lime-700"]:hover { background-color: var(--c-lime-700); }
+[visual~="hover:shadow:big"]:hover { box-shadow: var(--shadow-big); }
+[visual~="bg:lime-600"] { background-color: var(--c-lime-600); }
+[visual~="transition:transform"] { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+[visual~="duration:fast"] { transition-duration: 150ms; }
+[visual~="hover:scale:110"]:hover { transform: scale(1.1); }
+[visual~="bg:lime-400"] { background-color: var(--c-lime-400); }
+[visual~="ease:out"] { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+[visual~="animate:spin"] { animation: spin 1s linear infinite; }
+[visual~="animate:pulse"] { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+[visual~="animate:bounce"] { animation: bounce 1s infinite; }
+[visual~="bg:fuchsia-50"] { background-color: var(--c-fuchsia-50); }
+[visual~="border:fuchsia-200"] { border-color: var(--c-fuchsia-200); border-style: solid; }
+[visual~="text:fuchsia-900"] { color: var(--c-fuchsia-900); }
+[visual~="bg:fuchsia-100"] { background-color: var(--c-fuchsia-100); }
+[visual~="bg:fuchsia-500"] { background-color: var(--c-fuchsia-500); }
+[visual~="bg:fuchsia-600"] { background-color: var(--c-fuchsia-600); }
+[visual~="bg:fuchsia-400"] { background-color: var(--c-fuchsia-400); }
+[visual~="bg:fuchsia-700"] { background-color: var(--c-fuchsia-700); }
+[visual~="bg:purple-50"] { background-color: var(--c-purple-50); }
+[visual~="border:purple-200"] { border-color: var(--c-purple-200); border-style: solid; }
+[visual~="text:purple-900"] { color: var(--c-purple-900); }
+[visual~="bg:[#8B5CF6]"] { background-color: #8B5CF6; }
+[visual~="rounded:[12px]"] { border-radius: var(--r-12px); }
+[visual~="text:purple-600"] { color: var(--c-purple-600); }
+[visual~="bg:[linear-gradient(135deg,#667eea,#764ba2)]"] { background-color: linear-gradient(135deg,#667eea,#764ba2); }
+[visual~="bg:orange-50"] { background-color: var(--c-orange-50); }
+[visual~="border:orange-200"] { border-color: var(--c-orange-200); border-style: solid; }
+[visual~="text:orange-900"] { color: var(--c-orange-900); }
+[visual~="text:orange-600"] { color: var(--c-orange-600); }
+[visual~="bg:orange-100"] { background-color: var(--c-orange-100); }
+[visual~="bg:red-50"] { background-color: var(--c-red-50); }
+[visual~="border:red-200"] { border-color: var(--c-red-200); border-style: solid; }
+[visual~="text:red-900"] { color: var(--c-red-900); }
+[visual~="bg:red-400"] { background-color: var(--c-red-400); }
+[visual~="bg:red-600"] { background-color: var(--c-red-600); }
+[visual~="bg:slate-50"] { background-color: var(--c-slate-50); }
+[visual~="border:slate-200"] { border-color: var(--c-slate-200); border-style: solid; }
+[visual~="text:slate-900"] { color: var(--c-slate-900); }
+[visual~="transition:shadow"] { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+[visual~="text:slate-600"] { color: var(--c-slate-600); }
+[visual~="hover:bg:blue-700"]:hover { background-color: var(--c-blue-700); }
+[visual~="text:blue-500"] { color: var(--c-blue-500); }
+[visual~="hover:bg:blue-500"]:hover { background-color: var(--c-blue-500); }
+[visual~="bg:zinc-100"] { background-color: var(--c-zinc-100); }
+[visual~="border:zinc-300"] { border-color: var(--c-zinc-300); border-style: solid; }
+[visual~="text:zinc-900"] { color: var(--c-zinc-900); }
+[visual~="text:zinc-700"] { color: var(--c-zinc-700); }
+[visual~="text-size:tw-4xl"] { font-size: var(--tw-text-4xl); line-height: var(--tw-leading-4xl); }
+[visual~="text-size:tw-lg"] { font-size: var(--tw-text-lg); line-height: var(--tw-leading-lg); }
+[visual~="bg:slate-200"] { background-color: var(--c-slate-200); }
+[visual~="rounded:tw-md"] { border-radius: var(--r-tw-md); }
+[visual~="rounded:tw-lg"] { border-radius: var(--r-tw-lg); }
+[visual~="text-size:tw-2xl"] { font-size: var(--tw-text-2xl); line-height: var(--tw-leading-2xl); }
+[visual~="text:blue-600"] { color: var(--c-blue-600); }
+[visual~="text-size:tw-sm"] { font-size: var(--tw-text-sm); line-height: var(--tw-leading-sm); }
+[visual~="rounded:tw-sm"] { border-radius: var(--r-tw-sm); }
+[visual~="bg:blue-600"] { background-color: var(--c-blue-600); }
+[visual~="bg:blue-400"] { background-color: var(--c-blue-400); }
+[visual~="bg:emerald-100"] { background-color: var(--c-emerald-100); }
+[visual~="bg:amber-500"] { background-color: var(--c-amber-500); }
+[visual~="bg:amber-600"] { background-color: var(--c-amber-600); }
+[visual~="text:amber-600"] { color: var(--c-amber-600); }
+[visual~="text:cyan-600"] { color: var(--c-cyan-600); }
+[visual~="rounded:tw-none"] { border-radius: var(--r-tw-none); }
+[visual~="rounded:tw-DEFAULT"] { border-radius: var(--r-tw-DEFAULT); }
+[visual~="rounded:tw-xl"] { border-radius: var(--r-tw-xl); }
+[visual~="rounded:tw-2xl"] { border-radius: var(--r-tw-2xl); }
+[visual~="rounded:tw-3xl"] { border-radius: var(--r-tw-3xl); }
+[visual~="rounded:tw-full"] { border-radius: var(--r-tw-full); }
+[visual~="text:gray-600"] { color: var(--c-gray-600); }
+[visual~="shadow:tw-sm"] { box-shadow: var(--shadow-tw-sm); }
+[visual~="shadow:tw-DEFAULT"] { box-shadow: var(--shadow-tw-DEFAULT); }
+[visual~="shadow:tw-md"] { box-shadow: var(--shadow-tw-md); }
+[visual~="shadow:tw-lg"] { box-shadow: var(--shadow-tw-lg); }
+[visual~="shadow:tw-xl"] { box-shadow: var(--shadow-tw-xl); }
+[visual~="shadow:tw-2xl"] { box-shadow: var(--shadow-tw-2xl); }
+[visual~="shadow:tw-inner"] { box-shadow: var(--shadow-tw-inner); }
+[visual~="shadow:tw-none"] { box-shadow: var(--shadow-tw-none); }
+[visual~="border:gray-300"] { border-color: var(--c-gray-300); border-style: solid; }
+[visual~="text:rose-600"] { color: var(--c-rose-600); }
+[visual~="text-size:tw-xs"] { font-size: var(--tw-text-xs); line-height: var(--tw-leading-xs); }
+[visual~="text:rose-800"] { color: var(--c-rose-800); }
+[visual~="text-size:tw-base"] { font-size: var(--tw-text-base); line-height: var(--tw-leading-base); }
+[visual~="text-size:tw-xl"] { font-size: var(--tw-text-xl); line-height: var(--tw-leading-xl); }
+[visual~="text-size:tw-3xl"] { font-size: var(--tw-text-3xl); line-height: var(--tw-leading-3xl); }
+[visual~="text-size:tw-5xl"] { font-size: var(--tw-text-5xl); line-height: var(--tw-leading-5xl); }
+[visual~="text:indigo-600"] { color: var(--c-indigo-600); }
+[visual~="hover:shadow:tw-2xl"]:hover { box-shadow: var(--shadow-tw-2xl); }
+[visual~="bg:zinc-200"] { background-color: var(--c-zinc-200); }
+[visual~="bg-image:gradient-to-r"] { background-image: url(gradient-to-r); }
+[visual~="text-size:huge"] { font-size: var(--font-huge); line-height: var(--font-lh-huge); }
+[visual~="font:tw-semibold"] { font-weight: var(--tw-font-semibold); }
+[visual~="opacity:90"] { opacity: 0.9; }
+[visual~="bg:gray-50"] { background-color: var(--c-gray-50); }
+[visual~="border-b-w:[1px]"] { border-bottom-width: 1px; border-bottom-style: solid; }
+[visual~="text:gray-700"] { color: var(--c-gray-700); }
+[visual~="cursor:pointer"] { cursor: pointer; }
+[visual~="bg-image:gradient-to-br"] { background-image: url(gradient-to-br); }
+[visual~="bg:[rgba(255,255,255,0.2)]"] { background-color: rgba(255,255,255,0.2); }
+[visual~="border:[rgba(255,255,255,0.3)]"] { border-color: rgba(255,255,255,0.3); border-style: solid; }
+[visual~="text-size:mini"] { font-size: var(--font-mini); line-height: var(--font-lh-mini); }
+[visual~="transition:fast"] { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+[visual~="hover:bg:[rgba(255,255,255,0.3)]"]:hover { background-color: rgba(255,255,255,0.3); }
+[visual~="border-w:thin"] { border-width: var(--s-thin); border-style: solid; }
+[visual~="font:mono"] { font-family: ui-monospace, monospace; }
+[visual~="resize:y"] { resize: vertical; }
+[visual~="focus:outline:none"]:focus { outline-color: var(--c-none); }
+[visual~="focus:border:blue-500"]:focus { border-color: var(--c-blue-500); border-style: solid; }
+[visual~="font:tw-medium"] { font-weight: var(--tw-font-medium); }
+[visual~="text:gray-500"] { color: var(--c-gray-500); }
+[visual~="tracking:[0.05em]"] { letter-spacing: 0.05em; }
+
+@media (min-width: 768px) {
+  [visual~="tab:bg:green-500"] { background-color: var(--c-green-500); }
+}
+
+@media (min-width: 1024px) {
+  [layout~="lap:grid-cols:2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  [visual~="lap:bg:amber-500"] { background-color: var(--c-amber-500); }
+}
+
+@media (min-width: 1280px) {
+  [visual~="desk:bg:red-500"] { background-color: var(--c-red-500); }
+}