:root { --mb-navy: #0E1B2E; --mb-cyan: #17B4D6; --mb-white: #FFFFFF; --mb-coral: #E8734A; --mb-navy-50: #F1F4F9; --mb-navy-100: #DFE6F1; --mb-navy-200: #C0CEE3; --mb-navy-300: #97ADCE; --mb-navy-400: #6C8AB7; --mb-navy-500: #476A9E; --mb-navy-600: #2F4B75; --mb-navy-700: #1C304F; --mb-navy-750: #152540; --mb-navy-800: #0E1B2E; --mb-navy-850: #0B1523; --mb-navy-900: #08101C; --mb-cyan-50: #EDFAFD; --mb-cyan-100: #D1F2FA; --mb-cyan-200: #A3E6F5; --mb-cyan-300: #6CD7EF; --mb-cyan-400: #3AC9E9; --mb-cyan-500: #17B4D6; --mb-cyan-600: #1094B2; --mb-cyan-700: #0B768E; --mb-cyan-800: #075769; --mb-cyan-900: #043C49; --mb-coral-300: #F5AF93; --mb-coral-400: #F08A64; --mb-coral-500: #E8734A; --mb-coral-600: #BE4C26; --mb-coral-700: #A8431F; --mb-gray-50: #F9FAFB; --mb-gray-100: #F0F2F4; --mb-gray-200: #DFE2E7; --mb-gray-300: #C6CBD2; --mb-gray-400: #A0A7B1; --mb-gray-500: #7A8290; --mb-gray-600: #5C6470; --mb-gray-700: #424852; --mb-gray-800: #2B2F36; --mb-gray-900: #181B20; --mb-success-dark: #30B584; --mb-success-light: #0C7A53; --mb-warning-dark: #F0A119; --mb-warning-light: #9A6200; --mb-danger-dark: #FF6B6B; --mb-danger-light: #C42B2B; --mb-info-dark: #4CC2F0; --mb-info-light: #0B76A8; --mb-s-0: 0; --mb-s-1: 4px; --mb-s-2: 8px; --mb-s-3: 12px; --mb-s-4: 16px; --mb-s-5: 24px; --mb-s-6: 32px; --mb-s-7: 48px; --mb-s-8: 64px; --mb-s-9: 96px; --mb-font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --mb-font-en: var(--mb-font-ar); --mb-font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Arial, sans-serif; --mb-font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; --mb-font-heading: var(--mb-font-ar); --mb-t-xs: 0.75rem; --mb-t-sm: 0.875rem; --mb-t-base: 1rem; --mb-t-lg: 1.125rem; --mb-t-xl: 1.25rem; --mb-t-2xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.5rem); --mb-t-3xl: clamp(1.625rem, 1.4rem + 1.1vw, 1.875rem); --mb-t-4xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.5rem); --mb-t-5xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem); --mb-w-regular: 400; --mb-w-medium: 500; --mb-w-semibold: 600; --mb-w-bold: 700; --mb-lh-tight: 1.2; --mb-lh-snug: 1.4; --mb-lh-normal: 1.6; --mb-lh-relaxed: 1.8; --mb-ls-tight: -0.02em; --mb-ls-normal: 0; --mb-ls-wide: 0.04em; --mb-r-none: 0; --mb-r-sm: 4px; --mb-r-md: 8px; --mb-r-lg: 12px; --mb-r-xl: 18px; --mb-r-2xl: 26px; --mb-r-full: 9999px; --mb-shadow-none: none; --mb-shadow-sm: 0 1px 2px rgb(8 16 28 / 0.20); --mb-shadow-md: 0 4px 10px rgb(8 16 28 / 0.24); --mb-shadow-lg: 0 10px 26px rgb(8 16 28 / 0.30); --mb-shadow-xl: 0 22px 50px rgb(8 16 28 / 0.38); --mb-dur-fast: 120ms; --mb-dur-base: 200ms; --mb-dur-slow: 360ms; --mb-dur-liquid: 500ms; --mb-ease: cubic-bezier(0.4, 0, 0.2, 1); --mb-ease-out: cubic-bezier(0, 0, 0.2, 1); --mb-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); --mb-ease-liquid: cubic-bezier(0.34, 1.2, 0.64, 1); --mb-ease-press: cubic-bezier(0.32, 0.72, 0, 1); --mb-z-base: 0; --mb-z-dropdown: 100; --mb-z-sticky: 200; --mb-z-bar: 300; --mb-z-overlay: 400; --mb-z-modal: 500; --mb-z-toast: 600; --mb-bp-sm: 480px; --mb-bp-md: 768px; --mb-bp-lg: 1024px; --mb-bp-xl: 1440px; --mb-width-text: 68ch; --mb-width-page: 1200px; --mb-width-wide: 1440px; --mb-tap: 44px; } :root, [data-theme="dark"] { --mb-bg: var(--mb-navy-800); --mb-bg-elevated: var(--mb-navy-750); --mb-bg-sunken: var(--mb-navy-900); --mb-fg: var(--mb-white); --mb-fg-muted: var(--mb-navy-100); --mb-fg-subtle: var(--mb-navy-300); --mb-border: #24344C; --mb-border-strong: #3A4E6E; --mb-accent: var(--mb-cyan-400); --mb-accent-hover: var(--mb-cyan-300); --mb-accent-fg: var(--mb-navy-900); --mb-cta: var(--mb-coral-500); --mb-cta-hover: var(--mb-coral-400); --mb-cta-fg: var(--mb-navy-900); --mb-success: var(--mb-success-dark); --mb-warning: var(--mb-warning-dark); --mb-danger: var(--mb-danger-dark); --mb-info: var(--mb-info-dark); --mb-focus-ring: var(--mb-cyan-300); --mb-focus-ring-offset: var(--mb-bg); --mb-overlay: rgb(8 16 28 / 0.72); --mb-shadow: var(--mb-shadow-md); --mb-skeleton-bg: rgb(255 255 255 / 0.08); --mb-skeleton-bg: color-mix(in srgb, var(--mb-fg) 9%, transparent); --mb-shimmer: rgb(255 255 255 / 0.14); --mb-shimmer: color-mix(in srgb, var(--mb-fg) 15%, transparent); --mb-nav-bg: rgb(14 27 46 / var(--mb-nav-bg-alpha, 0.55)); --mb-nav-solid: var(--mb-navy-800); --mb-nav-fg: var(--mb-white); --mb-nav-muted: var(--mb-navy-200); --mb-nav-border: #24344C; --mb-nav-pill: color-mix(in srgb, var(--mb-cyan-400) 18%, transparent); --mb-nav-ring: rgb(255 255 255 / 0.15); --mb-nav-highlight: rgb(255 255 255 / 0.20); --mb-nav-caustic: rgb(0 0 0 / 0.10); --mb-nav-reflection: rgb(255 255 255 / 0.12); --mb-nav-glass-shadow: rgb(0 0 0 / 0.55); --mb-nav-glare: color-mix(in srgb, var(--mb-cyan-400) 40%, transparent); --mb-nav-pill-shadow: 0 4px 12px rgb(0 0 0 / 0.40), inset 0 1px 1px rgb(255 255 255 / 0.15); } [data-theme="light"] { --mb-bg: var(--mb-white); --mb-bg-elevated: var(--mb-gray-50); --mb-bg-sunken: var(--mb-gray-100); --mb-fg: var(--mb-navy-800); --mb-fg-muted: var(--mb-navy-600); --mb-fg-subtle: var(--mb-gray-600); --mb-border: var(--mb-gray-200); --mb-border-strong: var(--mb-gray-400); --mb-accent: var(--mb-cyan-700); --mb-accent-hover: var(--mb-cyan-800); --mb-accent-fg: var(--mb-white); --mb-cta: var(--mb-coral-600); --mb-cta-hover: var(--mb-coral-700); --mb-cta-fg: var(--mb-white); --mb-success: var(--mb-success-light); --mb-warning: var(--mb-warning-light); --mb-danger: var(--mb-danger-light); --mb-info: var(--mb-info-light); --mb-focus-ring: var(--mb-cyan-700); --mb-focus-ring-offset: var(--mb-bg); --mb-overlay: rgb(14 27 46 / 0.55); --mb-shadow: 0 4px 14px rgb(14 27 46 / 0.10); --mb-skeleton-bg: rgb(14 27 46 / 0.07); --mb-skeleton-bg: color-mix(in srgb, var(--mb-fg) 8%, transparent); --mb-shimmer: rgb(14 27 46 / 0.11); --mb-shimmer: color-mix(in srgb, var(--mb-fg) 12%, transparent); --mb-nav-bg: rgb(255 255 255 / var(--mb-nav-bg-alpha, 0.55)); --mb-nav-solid: var(--mb-white); --mb-nav-fg: var(--mb-navy-800); --mb-nav-muted: var(--mb-navy-600); --mb-nav-border: var(--mb-gray-200); --mb-nav-pill: rgb(255 255 255 / 0.85); --mb-nav-ring: rgb(14 27 46 / 0.15); --mb-nav-highlight: rgb(255 255 255 / 0.80); --mb-nav-caustic: rgb(255 255 255 / 0.40); --mb-nav-reflection: rgb(255 255 255 / 0.60); --mb-nav-glass-shadow: rgb(14 27 46 / 0.15); --mb-nav-glare: color-mix(in srgb, var(--mb-cyan-500) 35%, transparent); --mb-nav-pill-shadow: 0 4px 12px rgb(14 27 46 / 0.12), inset 0 1px 1px rgb(255 255 255 / 0.80); } :root { --mb-bar-h: 56px; --mb-bar-bg: var(--mb-navy-800); --mb-bar-fg: var(--mb-white); --mb-bar-muted: var(--mb-navy-200); --mb-bar-accent:var(--mb-cyan-400); --mb-bar-hover: var(--mb-navy-700); --mb-bar-focus: var(--mb-cyan-300); --mb-bar-font: var(--mb-font-body); --mb-bar-size: var(--mb-t-sm); --mb-bar-pad: var(--mb-s-3); --mb-bar-gap: var(--mb-s-3); --mb-bar-border:#24344C; --mb-bar-z: var(--mb-z-bar); --mb-btn-h: var(--mb-tap); --mb-btn-pad: var(--mb-s-5); --mb-btn-radius: var(--mb-r-md); --mb-btn-font: var(--mb-font-body); --mb-btn-size: var(--mb-t-base); --mb-btn-weight: var(--mb-w-semibold); --mb-btn-border-w: 1px; --mb-card-pad: var(--mb-s-5); --mb-card-radius: var(--mb-r-lg); --mb-card-bg: var(--mb-bg-elevated); --mb-card-border: var(--mb-border); --mb-card-shadow: var(--mb-shadow); --mb-modal-w: 520px; --mb-modal-radius: var(--mb-r-xl); --mb-modal-pad: var(--mb-s-6); --mb-modal-bg: var(--mb-bg-elevated); --mb-modal-fg: var(--mb-fg); --mb-modal-z: var(--mb-z-modal); --mb-input-h: var(--mb-tap); --mb-input-pad: var(--mb-s-3); --mb-input-radius: var(--mb-r-md); --mb-input-border: var(--mb-border-strong); --mb-input-bg: var(--mb-bg-sunken); --mb-input-fg: var(--mb-fg); --mb-input-placeholder: var(--mb-fg-subtle); --mb-badge-radius: var(--mb-r-full); --mb-badge-pad: var(--mb-s-1) var(--mb-s-3); --mb-badge-size: var(--mb-t-xs); --mb-badge-font: var(--mb-font-mono); --mb-skeleton-radius: var(--mb-r-sm); --mb-skeleton-dur: 1.8s; --mb-skeleton-line: 0.85em; --mb-skeleton-gap: 0.7em; --mb-grid-gap: var(--mb-s-5); --mb-grid-min: 260px; --mb-ring-w: 3px; --mb-ring-offset: 2px; --mb-icon-size: 20px; --mb-icon-stroke: 1.75; --mb-check-size: 22px; --mb-check-radius: var(--mb-r-sm); --mb-switch-w: 48px; --mb-switch-h: 28px; --mb-file-pad: var(--mb-s-6); --mb-form-gap: var(--mb-s-5); --mb-form-col: 280px; --mb-nav-h: 64px; --mb-nav-blur: 50px; --mb-nav-blur-sm: 12px; --mb-nav-saturate: 200%; --mb-nav-bg-alpha: 0.55; --mb-nav-radius: var(--mb-r-full); --mb-nav-gap: var(--mb-s-2); --mb-nav-z: var(--mb-z-sticky); --mb-nav-panel-z: var(--mb-z-overlay); --mb-footer-pad: var(--mb-s-6); --mb-section-pad: var(--mb-s-8); --mb-hero-pad: var(--mb-s-9); --mb-hero-overlay: rgb(14 27 46 / 0.72); --mb-pricing-radius: var(--mb-r-xl); --mb-step-dot: 44px; --mb-accordion-dur: var(--mb-dur-base); --mb-prose-measure: var(--mb-width-text); --mb-toast-w: 380px; --mb-toast-gap: var(--mb-s-3); --mb-toast-inset: var(--mb-s-5); --mb-spinner-size: 24px; --mb-progress-h: 6px; } [data-theme="light"] { --mb-bar-bg: var(--mb-white); --mb-bar-fg: var(--mb-navy-800); --mb-bar-muted: var(--mb-navy-600); --mb-bar-accent:var(--mb-cyan-700); --mb-bar-hover: var(--mb-gray-100); --mb-bar-focus: var(--mb-cyan-700); --mb-bar-border:var(--mb-gray-200); } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-arabic-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-arabic-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plex-arabic-600-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plex-arabic-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plex-arabic-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plex-arabic-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre { margin: 0; padding: 0; } ul[role="list"], ol[role="list"] { list-style: none; } body { min-block-size: 100vh; margin: 0; font-family: var(--mb-font-body); font-size: var(--mb-t-base); line-height: var(--mb-lh-normal); color: var(--mb-fg); background-color: var(--mb-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { font-family: var(--mb-font-heading); font-weight: var(--mb-w-bold); line-height: var(--mb-lh-tight); letter-spacing: var(--mb-ls-tight); text-wrap: balance; } p, li { text-wrap: pretty; } a { color: var(--mb-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--mb-accent-hover); } img, picture, svg, video, canvas { display: block; max-inline-size: 100%; block-size: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } table { border-collapse: collapse; inline-size: 100%; } code, kbd, samp, pre { font-family: var(--mb-font-mono); font-size: 0.95em; } hr { border: none; border-block-start: 1px solid var(--mb-border); margin-block: var(--mb-s-5); } :focus { outline: none; } :focus-visible { outline: var(--mb-ring-w) solid var(--mb-focus-ring); outline-offset: var(--mb-ring-offset); border-radius: var(--mb-r-sm); } ::selection { background-color: var(--mb-accent); color: var(--mb-accent-fg); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .mb-page { inline-size: 100%; max-inline-size: var(--mb-width-page); margin-inline: auto; padding-inline: var(--mb-s-4); } .mb-stack { display: flex; flex-direction: column; gap: var(--mb-s-4); } .mb-stack--sm { gap: var(--mb-s-2); } .mb-stack--lg { gap: var(--mb-s-6); } .mb-stack--xl { gap: var(--mb-s-8); } .mb-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-s-3); } .mb-cluster--sm { gap: var(--mb-s-2); } .mb-cluster--lg { gap: var(--mb-s-5); } .mb-cluster--between { justify-content: space-between; } .mb-cluster--center { justify-content: center; } .mb-cluster--end { justify-content: flex-end; } .mb-grid { display: grid; gap: var(--mb-grid-gap); grid-template-columns: repeat(auto-fill, minmax(min(var(--mb-grid-min), 100%), 1fr)); } .mb-grid--wide { --mb-grid-min: 320px; } .mb-grid--tight { --mb-grid-min: 180px; } .mb-prose { max-inline-size: var(--mb-width-text); } .mb-section { padding-block: var(--mb-s-8); } .mb-title { font-family: var(--mb-font-heading); font-size: var(--mb-t-4xl); font-weight: var(--mb-w-bold); } .mb-subtitle { font-family: var(--mb-font-heading); font-size: var(--mb-t-2xl); font-weight: var(--mb-w-semibold); } .mb-text { font-size: var(--mb-t-base); color: var(--mb-fg); } .mb-muted { color: var(--mb-fg-muted); } .mb-subtle { color: var(--mb-fg-subtle); font-size: var(--mb-t-sm); } .mb-num { font-family: var(--mb-font-mono); font-variant-numeric: tabular-nums; } .mb-sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .mb-skip { position: absolute; inset-block-start: -100px; inset-inline-start: var(--mb-s-4); z-index: var(--mb-z-toast); background: var(--mb-accent); color: var(--mb-accent-fg); padding: var(--mb-s-3) var(--mb-s-4); border-radius: var(--mb-r-md); font-weight: var(--mb-w-semibold); text-decoration: none; } .mb-skip:focus-visible { inset-block-start: var(--mb-s-3); } .mb-icon { inline-size: var(--mb-icon-size); block-size: var(--mb-icon-size); flex: none; fill: none; stroke: currentColor; stroke-width: var(--mb-icon-stroke); stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; } .mb-icon--sm { --mb-icon-size: 16px; } .mb-icon--lg { --mb-icon-size: 28px; } .mb-icon--xl { --mb-icon-size: 40px; --mb-icon-stroke: 1.5; } .mb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mb-s-2); min-block-size: var(--mb-btn-h); min-inline-size: var(--mb-tap); padding-inline: var(--mb-btn-pad); padding-block: var(--mb-s-2); font-family: var(--mb-btn-font); font-size: var(--mb-btn-size); font-weight: var(--mb-btn-weight); line-height: var(--mb-lh-snug); border-radius: var(--mb-btn-radius); border: var(--mb-btn-border-w) solid transparent; text-decoration: none; text-align: center; cursor: pointer; user-select: none; transition: background-color var(--mb-dur-fast) var(--mb-ease), border-color var(--mb-dur-fast) var(--mb-ease), color var(--mb-dur-fast) var(--mb-ease), transform var(--mb-dur-fast) var(--mb-ease); } .mb-btn:active { transform: translateY(1px); } .mb-btn:disabled, .mb-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; } .mb-btn--primary { background-color: var(--mb-accent); color: var(--mb-accent-fg); border-color: var(--mb-accent); } .mb-btn--primary:hover { background-color: var(--mb-accent-hover); border-color: var(--mb-accent-hover); } .mb-btn--secondary { background-color: transparent; color: var(--mb-accent); border-color: var(--mb-accent); } .mb-btn--secondary:hover { background-color: var(--mb-bg-elevated); color: var(--mb-accent-hover); border-color: var(--mb-accent-hover); } .mb-btn--ghost { background-color: transparent; color: var(--mb-fg-muted); border-color: transparent; } .mb-btn--ghost:hover { background-color: var(--mb-bg-elevated); color: var(--mb-fg); } .mb-btn--cta { background-color: var(--mb-cta); color: var(--mb-cta-fg); border-color: var(--mb-cta); font-weight: var(--mb-w-bold); } .mb-btn--cta:hover { background-color: var(--mb-cta-hover); border-color: var(--mb-cta-hover); } .mb-btn--sm { min-block-size: var(--mb-tap); padding-inline: var(--mb-s-3); font-size: var(--mb-t-sm); } .mb-btn--block { display: flex; inline-size: 100%; } .mb-btn--icon { padding-inline: var(--mb-s-2); min-inline-size: var(--mb-tap); min-block-size: var(--mb-tap); } .mb-card { display: block; background-color: var(--mb-card-bg); border: 1px solid var(--mb-card-border); border-radius: var(--mb-card-radius); padding: var(--mb-card-pad); color: var(--mb-fg); box-shadow: var(--mb-card-shadow); } a.mb-card, button.mb-card, .mb-card--link { text-decoration: none; transition: border-color var(--mb-dur-base) var(--mb-ease), transform var(--mb-dur-base) var(--mb-ease); } a.mb-card:hover, button.mb-card:hover, .mb-card--link:hover { border-color: var(--mb-accent); transform: translateY(-2px); } .mb-card__title { font-family: var(--mb-font-heading); font-size: var(--mb-t-lg); font-weight: var(--mb-w-semibold); margin-block-end: var(--mb-s-2); color: var(--mb-fg); } .mb-card__desc { color: var(--mb-fg-muted); font-size: var(--mb-t-sm); } .mb-badge { display: inline-flex; align-items: center; gap: var(--mb-s-1); padding: var(--mb-badge-pad); border-radius: var(--mb-badge-radius); font-family: var(--mb-badge-font); font-size: var(--mb-badge-size); line-height: 1.6; background-color: var(--mb-bg-sunken); color: var(--mb-fg-muted); border: 1px solid var(--mb-border); white-space: nowrap; } .mb-badge--accent { color: var(--mb-accent); border-color: var(--mb-accent); } .mb-badge--success { color: var(--mb-success); border-color: var(--mb-success); } .mb-badge--warning { color: var(--mb-warning); border-color: var(--mb-warning); } .mb-badge--danger { color: var(--mb-danger); border-color: var(--mb-danger); } .mb-badge--info { color: var(--mb-info); border-color: var(--mb-info); } .mb-field { display: flex; flex-direction: column; gap: var(--mb-s-2); } .mb-label { font-size: var(--mb-t-sm); font-weight: var(--mb-w-medium); color: var(--mb-fg-muted); } .mb-hint { font-size: var(--mb-t-xs); color: var(--mb-fg-subtle); } .mb-error { font-size: var(--mb-t-xs); color: var(--mb-danger); } .mb-input, .mb-select, .mb-textarea { inline-size: 100%; min-block-size: var(--mb-input-h); padding-inline: var(--mb-input-pad); padding-block: var(--mb-s-2); background-color: var(--mb-input-bg); color: var(--mb-input-fg); border: 1px solid var(--mb-input-border); border-radius: var(--mb-input-radius); font-family: var(--mb-font-body); font-size: var(--mb-t-base); transition: border-color var(--mb-dur-fast) var(--mb-ease); } .mb-textarea { min-block-size: calc(var(--mb-input-h) * 2.5); resize: vertical; } .mb-input::placeholder, .mb-textarea::placeholder { color: var(--mb-input-placeholder); } .mb-input:hover, .mb-select:hover, .mb-textarea:hover { border-color: var(--mb-accent); } .mb-input:disabled, .mb-select:disabled, .mb-textarea:disabled { opacity: 0.5; cursor: not-allowed; } .mb-select { appearance: none; padding-inline-end: var(--mb-s-7); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } [dir="rtl"] .mb-select { background-position: 20px calc(50% + 2px), 14px calc(50% + 2px); background-image: linear-gradient(135deg, currentColor 50%, transparent 50%), linear-gradient(45deg, transparent 50%, currentColor 50%); } .mb-toggle, .mb-switch { display: inline-flex; align-items: center; gap: var(--mb-s-3); min-block-size: var(--mb-tap); cursor: pointer; user-select: none; } .mb-toggle input, .mb-switch input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; } .mb-toggle__track, .mb-switch__track { --mb-switch-thumb: calc(var(--mb-switch-h) - 8px); position: relative; flex: none; inline-size: var(--mb-switch-w); block-size: var(--mb-switch-h); border-radius: var(--mb-r-full); background-color: var(--mb-bg-sunken); border: 1px solid var(--mb-border-strong); transition: background-color var(--mb-dur-base) var(--mb-ease); } .mb-toggle__track::after, .mb-switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: var(--mb-switch-thumb); block-size: var(--mb-switch-thumb); border-radius: var(--mb-r-full); background-color: var(--mb-fg-subtle); transition: translate var(--mb-dur-base) var(--mb-ease), background-color var(--mb-dur-base) var(--mb-ease); } .mb-toggle input:checked + .mb-toggle__track, .mb-switch input:checked + .mb-switch__track { background-color: var(--mb-accent); border-color: var(--mb-accent); } .mb-toggle input:checked + .mb-toggle__track::after, .mb-switch input:checked + .mb-switch__track::after { translate: calc(var(--mb-switch-w) - var(--mb-switch-thumb) - 8px) 0; background-color: var(--mb-accent-fg); } [dir="rtl"] .mb-toggle input:checked + .mb-toggle__track::after, [dir="rtl"] .mb-switch input:checked + .mb-switch__track::after { translate: calc((var(--mb-switch-w) - var(--mb-switch-thumb) - 8px) * -1) 0; } .mb-toggle input:focus-visible + .mb-toggle__track, .mb-switch input:focus-visible + .mb-switch__track { outline: var(--mb-ring-w) solid var(--mb-focus-ring); outline-offset: var(--mb-ring-offset); } .mb-switch input:disabled + .mb-switch__track { opacity: 0.5; cursor: not-allowed; } .mb-skeleton { position: relative; overflow: hidden; inline-size: 100%; block-size: var(--mb-s-5); border-radius: var(--mb-skeleton-radius); background-color: var(--mb-skeleton-bg); } .mb-skeleton::after { content: ""; position: absolute; inset-block: 0; inset-inline: 0; background-image: linear-gradient( to right, transparent 0%, var(--mb-shimmer) 45%, var(--mb-shimmer) 55%, transparent 100% ); animation: mb-shimmer-ltr var(--mb-skeleton-dur) var(--mb-ease) infinite; } [dir="rtl"] .mb-skeleton::after { animation-name: mb-shimmer-rtl; } @keyframes mb-shimmer-ltr { from { translate: -100% 0; } to { translate: 100% 0; } } @keyframes mb-shimmer-rtl { from { translate: 100% 0; } to { translate: -100% 0; } } .mb-skeleton--text { block-size: var(--mb-skeleton-line); border-radius: var(--mb-r-full); } .mb-skeleton--text-short { block-size: var(--mb-skeleton-line); border-radius: var(--mb-r-full); inline-size: 62%; } .mb-skeleton--title { block-size: 1.5em; inline-size: 55%; border-radius: var(--mb-r-sm); } .mb-skeleton--paragraph { block-size: calc(var(--mb-skeleton-line) * 3 + var(--mb-skeleton-gap) * 2); border-radius: 0; background-color: var(--mb-skeleton-bg); -webkit-mask-image: repeating-linear-gradient( to bottom, black 0 var(--mb-skeleton-line), transparent var(--mb-skeleton-line) calc(var(--mb-skeleton-line) + var(--mb-skeleton-gap)) ); mask-image: repeating-linear-gradient( to bottom, black 0 var(--mb-skeleton-line), transparent var(--mb-skeleton-line) calc(var(--mb-skeleton-line) + var(--mb-skeleton-gap)) ); } .mb-skeleton--card { block-size: var(--mb-s-9); border-radius: var(--mb-card-radius); } .mb-skeleton--image { block-size: auto; aspect-ratio: 16 / 9; border-radius: var(--mb-r-md); } .mb-skeleton--circle { flex: none; inline-size: var(--mb-s-7); block-size: var(--mb-s-7); border-radius: var(--mb-r-full); } @media (prefers-reduced-motion: reduce) { .mb-skeleton::after { animation: none; translate: none; background-image: linear-gradient( to right, transparent 0%, var(--mb-shimmer) 50%, transparent 100% ); opacity: 0.7; } } .mb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mb-s-3); padding: var(--mb-s-8) var(--mb-s-4); text-align: center; color: var(--mb-fg-subtle); border: 1px dashed var(--mb-border-strong); border-radius: var(--mb-r-lg); } .mb-divider { block-size: 1px; background-color: var(--mb-border); border: 0; } .mb-hide { display: none !important; } .mb-center { text-align: center; } .mb-flow > * + * { margin-block-start: var(--mb-s-4); } @media (max-width: 480px) { .mb-hide-sm { display: none !important; } .mb-page { padding-inline: var(--mb-s-3); } } .mb-btn-vampire { --vampire-100: #FFA485; --vampire-300: #F08560; --vampire-500: #E8734A; --vampire-600: #C25631; --radius: var(--mb-r-full); border-radius: var(--radius); outline: none; cursor: pointer; font-size: var(--mb-t-base); font-family: var(--mb-font-heading); font-weight: var(--mb-w-semibold); background: transparent; border: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-inline-size: 180px; min-block-size: 50px; padding: 3px; box-shadow: 0 4px 16px rgba(232, 115, 74, 0.35); transition: transform var(--mb-dur-fast) var(--mb-ease); } .mb-btn-vampire:hover { transform: translateY(-2px); } .mb-btn-vampire:active { transform: translateY(1px); } .mb-btn-vampire__wrap { border-radius: inherit; overflow: hidden; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; padding: 3px; background: linear-gradient( to bottom, var(--vampire-100) 0%, var(--vampire-600) 100% ); position: relative; transition: all 0.3s ease; } .mb-btn-vampire__content { pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; width: 100%; height: 100%; padding-inline: var(--mb-s-6); padding-block: var(--mb-s-3); border-radius: calc(var(--radius) * 0.85); color: #FFFFFF; font-weight: var(--mb-w-semibold); background: linear-gradient( to bottom, var(--vampire-300) 0%, var(--vampire-500) 100% ); box-shadow: inset -2px 12px 11px -5px var(--vampire-100), inset 1px -3px 11px 0px rgb(0 0 0 / 25%); transition: all 0.3s ease; white-space: nowrap; } .mb-btn-vampire:hover .mb-btn-vampire__wrap { background: linear-gradient( to bottom, var(--vampire-300) 0%, var(--vampire-100) 100% ); } body.mb-bar-host { padding-block-start: var(--mb-bar-h); padding-block-end: var(--mb-bar-h); } .mb-bar { position: fixed; inset-inline: 0; z-index: var(--mb-bar-z); display: flex; align-items: center; gap: var(--mb-bar-gap); min-block-size: var(--mb-bar-h); padding-inline: var(--mb-bar-pad); background-color: var(--mb-bar-bg); color: var(--mb-bar-fg); font-family: var(--mb-bar-font); font-size: var(--mb-bar-size); line-height: var(--mb-lh-snug); box-sizing: border-box; } .mb-bar * { box-sizing: border-box; } .mb-bar--top { inset-block-start: 0; border-block-end: 1px solid var(--mb-bar-border); } .mb-bar--bottom { inset-block-end: 0; border-block-start: 1px solid var(--mb-bar-border); justify-content: space-between; } .mb-bar__back, .mb-bar__icon-btn, .mb-bar__site, .mb-bar__cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--mb-s-2); min-block-size: var(--mb-tap); min-inline-size: var(--mb-tap); padding-inline: var(--mb-s-3); border-radius: var(--mb-r-md); text-decoration: none; font-weight: var(--mb-w-semibold); color: var(--mb-bar-fg); border: 1px solid transparent; background: none; cursor: pointer; transition: background-color var(--mb-dur-fast) var(--mb-ease), color var(--mb-dur-fast) var(--mb-ease), border-color var(--mb-dur-fast) var(--mb-ease); white-space: nowrap; flex: none; } .mb-bar__back { border-color: var(--mb-bar-border); } .mb-bar__back:hover { background-color: var(--mb-bar-hover); color: var(--mb-bar-accent); } .mb-bar__tools { display: flex; gap: var(--mb-s-1); flex: none; } .mb-bar__icon-btn { padding-inline: var(--mb-s-2); color: var(--mb-bar-muted); font-family: var(--mb-font-mono); font-size: var(--mb-t-sm); } .mb-bar__icon-btn:hover { background-color: var(--mb-bar-hover); color: var(--mb-bar-accent); } .mb-bar__icon { font-size: var(--mb-t-lg); line-height: 1; } .mb-bar__arrow { display: inline-block; font-size: 1.1em; line-height: 1; } [dir="rtl"] .mb-bar__arrow { scale: -1 1; } .mb-bar__label { flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; justify-content: center; gap: var(--mb-s-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mb-bar-muted); } .mb-bar__label-text { overflow: hidden; text-overflow: ellipsis; font-weight: var(--mb-w-medium); } .mb-bar__sep { color: var(--mb-bar-border); flex: none; } .mb-bar__brand { font-family: var(--mb-font-en); font-weight: var(--mb-w-bold); letter-spacing: var(--mb-ls-wide); color: var(--mb-bar-fg); flex: none; } .mb-bar__brand b { color: var(--mb-bar-accent); font-weight: inherit; } .mb-bar__site { color: var(--mb-bar-accent); font-family: var(--mb-font-mono); font-weight: var(--mb-w-regular); } .mb-bar__site:hover { background-color: var(--mb-navy-700); } .mb-bar__note { color: var(--mb-bar-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; } .mb-bar__cta { --vampire-100: var(--mb-coral-300); --vampire-300: var(--mb-coral-400); --vampire-500: var(--mb-coral-500); border: 0; border-radius: var(--mb-r-full); min-inline-size: 180px; min-block-size: 50px; padding-inline: var(--mb-s-6); padding-block: var(--mb-s-3); color: var(--mb-white); font-family: var(--mb-font-heading); font-weight: var(--mb-w-semibold); background: linear-gradient( to bottom, var(--vampire-300) 0%, var(--vampire-500) 100% ); box-shadow: inset -2px 12px 11px -5px var(--vampire-100), inset 1px -3px 11px 0px rgb(0 0 0 / 25%); transition: transform var(--mb-dur-fast) var(--mb-ease), background var(--mb-dur-base) var(--mb-ease); white-space: nowrap; } .mb-bar__cta:hover { transform: translateY(-2px); background: linear-gradient( to bottom, var(--vampire-100) 0%, var(--vampire-300) 100% ); } .mb-bar__cta:active { transform: translateY(1px); } .mb-bar :focus-visible { outline: var(--mb-ring-w) solid var(--mb-bar-focus); outline-offset: 2px; } .mb-bar__langbox { position: relative; display: inline-flex; } .mb-bar__lang-label { font-family: var(--mb-font-mono); font-size: var(--mb-t-xs); margin-inline-start: var(--mb-s-1); } .mb-bar__langmenu { position: absolute; inset-block-start: calc(100% + var(--mb-s-2)); inset-inline-end: 0; z-index: var(--mb-z-dropdown); min-inline-size: 160px; margin: 0; padding: var(--mb-s-2); list-style: none; background-color: var(--mb-bg-elevated); border: 1px solid var(--mb-border); border-radius: var(--mb-r-lg); box-shadow: var(--mb-shadow-lg); } .mb-bar__langmenu[hidden] { display: none; } .mb-bar__langitem { display: flex; align-items: center; gap: var(--mb-s-2); inline-size: 100%; min-block-size: var(--mb-tap); padding-inline: var(--mb-s-3); border: none; border-radius: var(--mb-r-md); background: none; color: var(--mb-fg-muted); font: inherit; text-align: start; cursor: pointer; } .mb-bar__langitem:hover { background-color: var(--mb-bg-sunken); color: var(--mb-fg); } .mb-bar__langitem[aria-current="true"] { color: var(--mb-accent); font-weight: var(--mb-w-semibold); } @media (max-width: 480px) { .mb-bar { --mb-bar-pad: var(--mb-s-2); gap: var(--mb-s-2); } .mb-bar__label { display: none; } .mb-bar__site { font-size: var(--mb-t-xs); } .mb-bar--top { justify-content: space-between; } .mb-bar__note { font-size: var(--mb-t-xs); } } @media (max-width: 360px) { .mb-bar__note { display: none; } .mb-bar__back .mb-bar__back-text { display: none; } } .mb-modal-backdrop { position: fixed; inset: 0; z-index: var(--mb-modal-z); display: flex; align-items: center; justify-content: center; padding: var(--mb-s-4); background-color: var(--mb-overlay); animation: mb-modal-fade var(--mb-dur-base) var(--mb-ease-out); } @keyframes mb-modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mb-modal-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } } .mb-modal { inline-size: 100%; max-inline-size: var(--mb-modal-w); max-block-size: calc(100vh - var(--mb-s-8)); overflow-y: auto; padding: var(--mb-modal-pad); border-radius: var(--mb-modal-radius); background-color: var(--mb-modal-bg); color: var(--mb-modal-fg); border: 1px solid var(--mb-border); box-shadow: var(--mb-shadow-xl); animation: mb-modal-rise var(--mb-dur-base) var(--mb-ease-spring); box-sizing: border-box; } .mb-modal * { box-sizing: border-box; } .mb-modal[data-variant="inherit"] { font-family: inherit; background-color: var(--mb-bg-elevated); color: var(--mb-fg); } .mb-modal[data-variant="brand"] { --mb-accent: var(--mb-cyan-400); --mb-accent-hover: var(--mb-cyan-300); --mb-accent-fg: var(--mb-navy-900); --mb-bg-sunken: var(--mb-navy-900); font-family: var(--mb-font-body); background-color: var(--mb-navy-750); color: var(--mb-white); border-color: var(--mb-navy-700); } .mb-modal[data-variant="brand"] .mb-modal__title { color: var(--mb-white); } .mb-modal[data-variant="brand"] .mb-modal__body { color: var(--mb-navy-100); } .mb-modal[data-variant="brand"] .mb-modal__close { color: var(--mb-navy-200); } .mb-modal[data-variant="brand"] .mb-modal__close:hover { background-color: var(--mb-navy-700); color: var(--mb-white); } .mb-modal__head { display: flex; align-items: flex-start; gap: var(--mb-s-3); margin-block-end: var(--mb-s-4); } .mb-modal__title { flex: 1 1 auto; margin: 0; font-family: var(--mb-font-heading); font-size: var(--mb-t-xl); font-weight: var(--mb-w-bold); line-height: var(--mb-lh-snug); } .mb-modal[data-variant="inherit"] .mb-modal__title { font-family: inherit; } .mb-modal__close { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--mb-tap); block-size: var(--mb-tap); margin: calc(var(--mb-s-2) * -1); border: none; background: none; cursor: pointer; border-radius: var(--mb-r-md); font-size: var(--mb-t-xl); line-height: 1; color: var(--mb-fg-subtle); } .mb-modal__close:hover { background-color: var(--mb-bg-sunken); color: var(--mb-fg); } .mb-modal__body { margin-block-end: var(--mb-s-5); line-height: var(--mb-lh-normal); } .mb-modal__body:last-child { margin-block-end: 0; } .mb-modal__actions { display: flex; flex-wrap: wrap; gap: var(--mb-s-3); justify-content: flex-end; } .mb-modal__actions:empty { display: none; } .mb-modal__btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--mb-tap); min-inline-size: var(--mb-tap); padding-inline: var(--mb-s-5); border-radius: var(--mb-r-md); border: 1px solid var(--mb-accent); background-color: var(--mb-accent); color: var(--mb-accent-fg); font: inherit; font-weight: var(--mb-w-semibold); cursor: pointer; text-decoration: none; } .mb-modal__btn:hover { background-color: var(--mb-accent-hover); border-color: var(--mb-accent-hover); } .mb-modal__btn[data-kind="secondary"] { background-color: transparent; color: var(--mb-accent); } .mb-modal__btn[data-kind="secondary"]:hover { background-color: var(--mb-bg-sunken); } html.mb-modal-open, body.mb-modal-open { overflow: hidden; } @media (max-width: 480px) { .mb-modal { padding: var(--mb-s-5); } .mb-modal__actions { flex-direction: column-reverse; } .mb-modal__btn { inline-size: 100%; } } .mb-form-grid { display: grid; gap: var(--mb-form-gap); grid-template-columns: repeat(auto-fit, minmax(min(var(--mb-form-col), 100%), 1fr)); align-items: start; } .mb-form-grid > .mb-field--full { grid-column: 1 / -1; } .mb-fieldset { border: 1px solid var(--mb-border); border-radius: var(--mb-card-radius); padding: var(--mb-s-5); margin: 0; min-inline-size: 0; } .mb-fieldset > legend { padding-inline: var(--mb-s-2); font-family: var(--mb-font-heading); font-size: var(--mb-t-lg); font-weight: var(--mb-w-semibold); color: var(--mb-fg); } .mb-fieldset__desc { color: var(--mb-fg-subtle); font-size: var(--mb-t-sm); margin-block-end: var(--mb-s-4); } .mb-label { display: inline-flex; align-items: center; gap: var(--mb-s-1); } .mb-label__req { color: var(--mb-danger); font-weight: var(--mb-w-bold); line-height: 1; } .mb-label__opt { color: var(--mb-fg-subtle); font-size: var(--mb-t-xs); font-weight: var(--mb-w-regular); } .mb-input:focus-visible, .mb-select:focus-visible, .mb-textarea:focus-visible { border-color: var(--mb-accent); } .mb-input[readonly], .mb-textarea[readonly] { background-color: var(--mb-bg-elevated); border-style: dashed; cursor: default; } .mb-field[data-state="error"] .mb-input, .mb-field[data-state="error"] .mb-select, .mb-field[data-state="error"] .mb-textarea, .mb-input[aria-invalid="true"], .mb-select[aria-invalid="true"], .mb-textarea[aria-invalid="true"] { border-color: var(--mb-danger); } .mb-field[data-state="success"] .mb-input, .mb-field[data-state="success"] .mb-select, .mb-field[data-state="success"] .mb-textarea { border-color: var(--mb-success); } .mb-error { display: flex; align-items: center; gap: var(--mb-s-1); } .mb-error:empty { display: none; } .mb-hint:empty { display: none; } .mb-counter { align-self: flex-end; font-family: var(--mb-font-mono); font-size: var(--mb-t-xs); color: var(--mb-fg-subtle); } .mb-counter[data-over="true"] { color: var(--mb-danger); } .mb-checkbox, .mb-radio { display: inline-flex; align-items: flex-start; gap: var(--mb-s-3); min-block-size: var(--mb-tap); padding-block: var(--mb-s-2); cursor: pointer; user-select: none; line-height: var(--mb-lh-snug); } .mb-checkbox input, .mb-radio input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; } .mb-checkbox__box, .mb-radio__box { position: relative; flex: none; inline-size: var(--mb-check-size); block-size: var(--mb-check-size); margin-block-start: 2px; border: 2px solid var(--mb-border-strong); background-color: var(--mb-bg-sunken); transition: background-color var(--mb-dur-fast) var(--mb-ease), border-color var(--mb-dur-fast) var(--mb-ease); } .mb-checkbox__box { border-radius: var(--mb-check-radius); } .mb-radio__box { border-radius: var(--mb-r-full); } .mb-checkbox:hover .mb-checkbox__box, .mb-radio:hover .mb-radio__box { border-color: var(--mb-accent); } .mb-checkbox__box::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 6px; inline-size: 5px; block-size: 10px; border: solid var(--mb-accent-fg); border-width: 0 2px 2px 0; rotate: 45deg; opacity: 0; transition: opacity var(--mb-dur-fast) var(--mb-ease); } .mb-radio__box::after { content: ""; position: absolute; inset: 4px; border-radius: var(--mb-r-full); background-color: var(--mb-accent-fg); scale: 0; transition: scale var(--mb-dur-fast) var(--mb-ease-spring); } .mb-checkbox input:checked + .mb-checkbox__box, .mb-radio input:checked + .mb-radio__box { background-color: var(--mb-accent); border-color: var(--mb-accent); } .mb-checkbox input:checked + .mb-checkbox__box::after { opacity: 1; } .mb-radio input:checked + .mb-radio__box::after { scale: 1; } .mb-checkbox input:focus-visible + .mb-checkbox__box, .mb-radio input:focus-visible + .mb-radio__box { outline: var(--mb-ring-w) solid var(--mb-focus-ring); outline-offset: var(--mb-ring-offset); } .mb-checkbox input:disabled ~ *, .mb-radio input:disabled ~ * { opacity: 0.5; } .mb-checkbox:has(input:disabled), .mb-radio:has(input:disabled) { cursor: not-allowed; } .mb-choices { display: flex; flex-direction: column; gap: var(--mb-s-1); } .mb-choices--inline { flex-direction: row; flex-wrap: wrap; gap: var(--mb-s-4); } .mb-file { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mb-s-2); padding: var(--mb-file-pad) var(--mb-s-4); min-block-size: calc(var(--mb-tap) * 2); text-align: center; border: 2px dashed var(--mb-border-strong); border-radius: var(--mb-input-radius); background-color: var(--mb-bg-sunken); color: var(--mb-fg-muted); cursor: pointer; transition: border-color var(--mb-dur-fast) var(--mb-ease), background-color var(--mb-dur-fast) var(--mb-ease); } .mb-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; inline-size: 100%; block-size: 100%; } .mb-file:hover, .mb-file[data-drag="true"] { border-color: var(--mb-accent); background-color: var(--mb-bg-elevated); } .mb-file[data-drag="true"] { border-style: solid; } .mb-file:has(input:focus-visible) { outline: var(--mb-ring-w) solid var(--mb-focus-ring); outline-offset: var(--mb-ring-offset); } .mb-file__icon { color: var(--mb-accent); } .mb-file__text { font-size: var(--mb-t-sm); } .mb-file__name { font-family: var(--mb-font-mono); font-size: var(--mb-t-xs); color: var(--mb-fg); word-break: break-all; } .mb-file__name:empty { display: none; } .mb-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-s-3); margin-block-start: var(--mb-s-5); } .mb-form__status { display: flex; align-items: center; gap: var(--mb-s-2); font-size: var(--mb-t-sm); } .mb-form__status:empty { display: none; } .mb-form__status[data-type="success"] { color: var(--mb-success); } .mb-form__status[data-type="error"] { color: var(--mb-danger); } .mb-btn[data-loading="true"] { pointer-events: none; opacity: 0.75; } .mb-hp { position: absolute !important; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; } @media (max-width: 480px) { .mb-fieldset { padding: var(--mb-s-4); } .mb-form__actions > .mb-btn { inline-size: 100%; } } body.mb-nav-host { padding-block-start: var(--mb-nav-h); } .mb-nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--mb-nav-z); display: flex; align-items: center; gap: var(--mb-s-4); min-block-size: var(--mb-nav-h); padding-inline: var(--mb-s-4); background-color: var(--mb-nav-bg); color: var(--mb-nav-fg); -webkit-backdrop-filter: blur(var(--mb-nav-blur)) saturate(var(--mb-nav-saturate)); backdrop-filter: blur(var(--mb-nav-blur)) saturate(var(--mb-nav-saturate)); box-shadow: 0 40px 80px -20px var(--mb-nav-glass-shadow), 0 10px 30px -10px var(--mb-nav-glass-shadow), inset 0 2px 3px -1px var(--mb-nav-highlight), inset 0 -2px 4px -1px var(--mb-nav-caustic), inset 0 0 0 1px var(--mb-nav-ring); transition: background-color var(--mb-dur-liquid) var(--mb-ease), box-shadow var(--mb-dur-liquid) var(--mb-ease); isolation: isolate; } .mb-nav::before { content: ""; position: absolute; inset-block-start: 1px; inset-inline: 1px; block-size: 46%; background: linear-gradient(180deg, var(--mb-nav-reflection) 0%, transparent 100%); pointer-events: none; z-index: 0; transition: background var(--mb-dur-liquid) var(--mb-ease); } .mb-nav > .mb-nav__glare { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; overflow: hidden; background: radial-gradient(circle 90px at var(--mb-glare-x, 50%) var(--mb-glare-y, 50%), var(--mb-nav-glare) 0%, transparent 100%); mix-blend-mode: overlay; transition: opacity var(--mb-dur-slow) var(--mb-ease); } .mb-nav:hover .mb-nav__glare { opacity: 1; } @media (hover: none) { .mb-nav__glare { display: none; } } @supports not (backdrop-filter: blur(1px)) { @supports not (-webkit-backdrop-filter: blur(1px)) { .mb-nav { background-color: var(--mb-nav-solid); } } } .mb-nav[data-scrolled="true"] { --mb-nav-bg-alpha: 0.88; } .mb-nav > * { position: relative; z-index: 3; } .mb-nav__brand { display: inline-flex; align-items: center; min-block-size: var(--mb-tap); padding-inline: var(--mb-s-2); font-family: var(--mb-font-en); font-size: var(--mb-t-lg); font-weight: var(--mb-w-bold); letter-spacing: var(--mb-ls-wide); color: var(--mb-nav-fg); text-decoration: none; flex: none; } .mb-nav__brand b { color: var(--mb-cyan-400); font-weight: inherit; } [data-theme="light"] .mb-nav__brand b { color: var(--mb-cyan-700); } .mb-nav__links { position: relative; display: flex; align-items: center; gap: var(--mb-nav-gap); margin: 0; padding: 0; list-style: none; flex: 1 1 auto; justify-content: center; min-inline-size: 0; } .mb-nav__item { position: relative; } .mb-nav__link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: var(--mb-s-2); min-block-size: var(--mb-tap); padding-inline: var(--mb-s-5); border-radius: var(--mb-nav-radius); color: var(--mb-nav-muted); font-size: var(--mb-t-sm); font-weight: var(--mb-w-semibold); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color var(--mb-dur-slow) var(--mb-ease), scale var(--mb-dur-base) var(--mb-ease-press); } .mb-nav__link:hover { color: var(--mb-nav-fg); } .mb-nav__link:active { scale: 0.92; } .mb-nav__link[aria-current="page"] { color: var(--mb-nav-fg); } .mb-nav__indicator { position: absolute; inset-block: 6px; inset-inline-start: 0; inline-size: 0; z-index: 1; border-radius: var(--mb-nav-radius); background-color: var(--mb-nav-pill); box-shadow: var(--mb-nav-pill-shadow); opacity: 0; pointer-events: none; transition: translate var(--mb-dur-liquid) var(--mb-ease-liquid), inline-size var(--mb-dur-liquid) var(--mb-ease-liquid), background-color var(--mb-dur-liquid) var(--mb-ease), box-shadow var(--mb-dur-liquid) var(--mb-ease), opacity var(--mb-dur-base) var(--mb-ease); } .mb-nav__indicator[data-on="true"] { opacity: 1; } .mb-nav__indicator[data-init="true"] { transition: none; } .mb-nav__sub { position: absolute; inset-block-start: calc(100% + var(--mb-s-2)); inset-inline-start: 0; z-index: var(--mb-z-dropdown); min-inline-size: 200px; margin: 0; padding: var(--mb-s-2); list-style: none; background-color: var(--mb-bg-elevated); border: 1px solid var(--mb-border); border-radius: var(--mb-r-lg); box-shadow: var(--mb-shadow-lg); display: none; } .mb-nav__item[data-open="true"] > .mb-nav__sub { display: block; } .mb-nav__sub .mb-nav__link { display: flex; inline-size: 100%; justify-content: flex-start; color: var(--mb-fg-muted); border-radius: var(--mb-r-md); } .mb-nav__sub .mb-nav__link:hover { background-color: var(--mb-bg-sunken); color: var(--mb-fg); } .mb-nav__tools { display: flex; align-items: center; gap: var(--mb-s-1); flex: none; margin-inline-start: auto; } .mb-nav__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mb-s-1); min-inline-size: var(--mb-tap); min-block-size: var(--mb-tap); padding-inline: var(--mb-s-2); border: 1px solid transparent; border-radius: var(--mb-nav-radius); background: none; color: var(--mb-nav-muted); font: inherit; font-size: var(--mb-t-sm); cursor: pointer; transition: background-color var(--mb-dur-fast) var(--mb-ease), color var(--mb-dur-fast) var(--mb-ease); } .mb-nav__btn:hover { background-color: var(--mb-nav-pill); color: var(--mb-nav-fg); } .mb-nav__btn[aria-expanded="true"] { background-color: var(--mb-nav-pill); color: var(--mb-nav-fg); } .mb-nav__btn-label { font-family: var(--mb-font-mono); font-size: var(--mb-t-xs); } .mb-nav__btn { -webkit-tap-highlight-color: transparent; } .mb-nav__divider { inline-size: 1px; block-size: 24px; margin-inline: var(--mb-s-1); background-color: var(--mb-nav-ring); flex: none; } .mb-nav__theme { border-radius: var(--mb-r-full); } .mb-nav__icons { position: relative; inline-size: var(--mb-icon-size); block-size: var(--mb-icon-size); pointer-events: none; transition: scale var(--mb-dur-base) var(--mb-ease-press); } .mb-nav__theme:active .mb-nav__icons { scale: 0.8; } .mb-nav__icons .mb-icon { position: absolute; inset-block-start: 0; inset-inline-start: 0; transition: rotate var(--mb-dur-liquid) var(--mb-ease-liquid), scale var(--mb-dur-liquid) var(--mb-ease-liquid), opacity var(--mb-dur-slow) var(--mb-ease); } .mb-nav__icons .mb-nav__sun { opacity: 1; rotate: 0deg; scale: 1; } .mb-nav__icons .mb-nav__moon { opacity: 0; rotate: -90deg; scale: 0; } [data-theme="dark"] .mb-nav__icons .mb-nav__sun { opacity: 0; rotate: 90deg; scale: 0; } [data-theme="dark"] .mb-nav__icons .mb-nav__moon { opacity: 1; rotate: 0deg; scale: 1; } @media (prefers-reduced-motion: reduce) { .mb-nav__icons .mb-icon { transition: opacity 1ms; rotate: 0deg; scale: 1; } .mb-nav__indicator { transition: opacity 1ms; } .mb-nav__link:active { scale: 1; } } .mb-nav__langbox { position: relative; } .mb-nav__langmenu { position: absolute; inset-block-start: calc(100% + var(--mb-s-2)); inset-inline-end: 0; z-index: var(--mb-z-dropdown); min-inline-size: 160px; margin: 0; padding: var(--mb-s-2); list-style: none; background-color: var(--mb-bg-elevated); border: 1px solid var(--mb-border); border-radius: var(--mb-r-lg); box-shadow: var(--mb-shadow-lg); } .mb-nav__langmenu[hidden] { display: none; } .mb-nav__langitem { display: flex; align-items: center; gap: var(--mb-s-2); inline-size: 100%; min-block-size: var(--mb-tap); padding-inline: var(--mb-s-3); border: none; border-radius: var(--mb-r-md); background: none; color: var(--mb-fg-muted); font: inherit; text-align: start; cursor: pointer; } .mb-nav__langitem:hover { background-color: var(--mb-bg-sunken); color: var(--mb-fg); } .mb-nav__langitem[aria-current="true"] { color: var(--mb-accent); font-weight: var(--mb-w-semibold); } .mb-nav__cta { display: inline-flex; align-items: center; gap: var(--mb-s-2); min-block-size: var(--mb-tap); padding-inline: var(--mb-s-4); border-radius: var(--mb-nav-radius); background-color: var(--mb-cta); color: var(--mb-cta-fg); font-weight: var(--mb-w-bold); font-size: var(--mb-t-sm); text-decoration: none; white-space: nowrap; transition: background-color var(--mb-dur-fast) var(--mb-ease); } .mb-nav__cta:hover { background-color: var(--mb-cta-hover); color: var(--mb-cta-fg); } .mb-nav__cta[data-style="whatsapp"] { background-color: var(--mb-success); color: var(--mb-white); } .mb-nav__cta[data-style="whatsapp"]:hover { filter: brightness(1.12); } .mb-nav__cta[data-style="ghost"] { background: none; border: 1px solid var(--mb-accent); color: var(--mb-accent); } .mb-nav :focus-visible { outline: var(--mb-ring-w) solid var(--mb-focus-ring); outline-offset: 2px; } .mb-nav__burger { display: none; } @media (max-width: 1024px) { .mb-nav { --mb-nav-blur: var(--mb-nav-blur-sm); --mb-nav-saturate: 140%; --mb-nav-bg-alpha: 0.82; } .mb-nav__burger { display: inline-flex; } .mb-nav__links, .mb-nav__cta, .mb-nav__lang-desktop { display: none; } .mb-nav__tools { margin-inline-start: auto; } } .mb-nav-panel { position: fixed; inset: 0; z-index: var(--mb-nav-panel-z); display: flex; flex-direction: column; padding: var(--mb-s-4); padding-block-start: calc(var(--mb-nav-h) + var(--mb-s-4)); background-color: var(--mb-bg); color: var(--mb-fg); overflow-y: auto; opacity: 0; translate: 0 -12px; transition: opacity var(--mb-dur-base) var(--mb-ease), translate var(--mb-dur-base) var(--mb-ease); } .mb-nav-panel[hidden] { display: none; } .mb-nav-panel[data-open="true"] { opacity: 1; translate: 0 0; } .mb-nav-panel__list { display: flex; flex-direction: column; gap: var(--mb-s-1); margin: 0; padding: 0; list-style: none; } .mb-nav-panel__link { display: flex; align-items: center; justify-content: space-between; gap: var(--mb-s-3); min-block-size: 56px; padding-inline: var(--mb-s-4); border-radius: var(--mb-r-lg); color: var(--mb-fg); font-size: var(--mb-t-lg); font-weight: var(--mb-w-medium); text-decoration: none; border-block-end: 1px solid var(--mb-border); } .mb-nav-panel__link:hover { background-color: var(--mb-bg-elevated); } .mb-nav-panel__link[aria-current="page"] { color: var(--mb-accent); } .mb-nav-panel__sub { margin: 0; padding: 0 0 var(--mb-s-2); list-style: none; padding-inline-start: var(--mb-s-5); } .mb-nav-panel__sub .mb-nav-panel__link { min-block-size: var(--mb-tap); font-size: var(--mb-t-base); color: var(--mb-fg-muted); border-block-end: none; } .mb-nav-panel__foot { margin-block-start: auto; padding-block-start: var(--mb-s-6); display: flex; flex-direction: column; gap: var(--mb-s-3); } .mb-nav-panel__foot .mb-nav__cta { display: inline-flex; justify-content: center; } @media (prefers-reduced-motion: reduce) { .mb-nav-panel { transition: none; translate: none; } .mb-nav__indicator { transition: opacity 1ms; } } .mb-footer { border-block-start: 1px solid var(--mb-border); background-color: var(--mb-bg-sunken); color: var(--mb-fg-muted); padding-block: var(--mb-footer-pad); font-size: var(--mb-t-sm); } .mb-footer__inner { inline-size: 100%; max-inline-size: var(--mb-width-page); margin-inline: auto; padding-inline: var(--mb-s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-s-4) var(--mb-s-5); } .mb-footer__brand { display: inline-flex; align-items: center; gap: var(--mb-s-2); font-family: var(--mb-font-en); font-weight: var(--mb-w-bold); color: var(--mb-fg); text-decoration: none; flex: none; } .mb-footer__brand b { color: var(--mb-accent); font-weight: inherit; } .mb-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-s-2) var(--mb-s-4); margin: 0; padding: 0; list-style: none; } .mb-footer__link { display: inline-flex; align-items: center; min-block-size: var(--mb-tap); color: var(--mb-fg-muted); text-decoration: none; } .mb-footer__link:hover { color: var(--mb-accent); } .mb-footer__social { display: flex; gap: var(--mb-s-1); } .mb-footer__social a { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--mb-tap); block-size: var(--mb-tap); border-radius: var(--mb-r-full); color: var(--mb-fg-muted); } .mb-footer__social a:hover { background-color: var(--mb-bg-elevated); color: var(--mb-accent); } .mb-footer__copy { margin-inline-start: auto; font-size: var(--mb-t-xs); color: var(--mb-fg-subtle); } @media (max-width: 768px) { .mb-footer__inner { flex-direction: column; align-items: flex-start; } .mb-footer__copy { margin-inline-start: 0; } } .mb-section { padding-block: var(--mb-section-pad); background-color: var(--mb-bg); } .mb-section--alt { background-color: var(--mb-bg-elevated); } .mb-section--sunken { background-color: var(--mb-bg-sunken); } .mb-sections > .mb-section:nth-of-type(even) { background-color: var(--mb-bg-elevated); } .mb-section__inner { inline-size: 100%; max-inline-size: var(--mb-width-page); margin-inline: auto; padding-inline: var(--mb-s-4); } .mb-section__head { max-inline-size: var(--mb-width-text); margin-block-end: var(--mb-s-6); } .mb-section__head--center { margin-inline: auto; text-align: center; } .mb-section__eyebrow { display: inline-block; margin-block-end: var(--mb-s-2); font-family: var(--mb-font-mono); font-size: var(--mb-t-xs); letter-spacing: var(--mb-ls-wide); color: var(--mb-accent); text-transform: uppercase; } .mb-section__title { font-family: var(--mb-font-heading); font-size: var(--mb-t-3xl); font-weight: var(--mb-w-bold); color: var(--mb-fg); } .mb-section__desc { margin-block-start: var(--mb-s-3); color: var(--mb-fg-muted); font-size: var(--mb-t-lg); } .mb-hero { position: relative; padding-block: var(--mb-hero-pad); background-color: var(--mb-bg); color: var(--mb-fg); overflow: hidden; } .mb-hero[data-bg] { background-image: var(--mb-hero-image); background-size: cover; background-position: center; background-blend-mode: multiply; background-color: var(--mb-hero-overlay); color: var(--mb-white); } .mb-hero[data-bg] .mb-hero__desc { color: var(--mb-navy-100); } .mb-hero__inner { position: relative; inline-size: 100%; max-inline-size: var(--mb-width-page); margin-inline: auto; padding-inline: var(--mb-s-4); display: grid; gap: var(--mb-s-7); align-items: center; grid-template-columns: 1fr; } .mb-hero--split .mb-hero__inner { grid-template-columns: 1fr; } @media (min-width: 1024px) { .mb-hero--split .mb-hero__inner { grid-template-columns: 1.1fr 0.9fr; } } .mb-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--mb-s-2); margin-block-end: var(--mb-s-4); padding: var(--mb-s-1) var(--mb-s-3); border: 1px solid var(--mb-border-strong); border-radius: var(--mb-r-full); font-family: var(--mb-font-mono); font-size: var(--mb-t-xs); color: var(--mb-accent); } .mb-hero__title { font-family: var(--mb-font-heading); font-size: var(--mb-t-5xl); font-weight: var(--mb-w-bold); line-height: var(--mb-lh-tight); } .mb-hero__swap { color: var(--mb-accent); display: inline-block; min-inline-size: 1ch; } .mb-hero__swap::after { content: ""; display: inline-block; inline-size: 2px; block-size: 0.9em; margin-inline-start: 2px; vertical-align: -0.1em; background-color: currentColor; animation: mb-caret 1.05s steps(1) infinite; } .mb-hero__swap[data-caret="off"]::after { display: none; } @keyframes mb-caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mb-hero__swap::after { animation: none; opacity: 1; } } .mb-hero__desc { margin-block-start: var(--mb-s-4); max-inline-size: var(--mb-width-text); font-size: var(--mb-t-lg); color: var(--mb-fg-muted); } .mb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--mb-s-3); margin-block-start: var(--mb-s-6); } .mb-hero__media { border-radius: var(--mb-r-xl); overflow: hidden; border: 1px solid var(--mb-border); background-color: var(--mb-bg-elevated); } .mb-hero__media img { inline-size: 100%; block-size: auto; } .mb-pricing { display: grid; gap: var(--mb-s-5); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: stretch; } .mb-plan { position: relative; display: flex; flex-direction: column; gap: var(--mb-s-4); padding: var(--mb-s-6); border: 1px solid var(--mb-border); border-radius: var(--mb-pricing-radius); background-color: var(--mb-bg-elevated); } .mb-plan--featured { border-color: var(--mb-accent); box-shadow: var(--mb-shadow-lg); } .mb-plan__badge { position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: -50% -50%; padding: var(--mb-s-1) var(--mb-s-4); border-radius: var(--mb-r-full); background-color: var(--mb-accent); color: var(--mb-accent-fg); font-size: var(--mb-t-xs); font-weight: var(--mb-w-bold); white-space: nowrap; } [dir="rtl"] .mb-plan__badge { translate: 50% -50%; } .mb-plan__name { font-family: var(--mb-font-heading); font-size: var(--mb-t-xl); font-weight: var(--mb-w-semibold); } .mb-plan__price { display: flex; align-items: baseline; gap: var(--mb-s-2); flex-wrap: wrap; } .mb-plan__amount { font-family: var(--mb-font-mono); font-size: var(--mb-t-4xl); font-weight: var(--mb-w-bold); color: var(--mb-fg); line-height: 1; } .mb-plan__period { color: var(--mb-fg-subtle); font-size: var(--mb-t-sm); } .mb-plan__note { color: var(--mb-fg-muted); font-size: var(--mb-t-sm); } .mb-plan__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mb-s-2); } .mb-plan__list li { display: flex; align-items: flex-start; gap: var(--mb-s-2); font-size: var(--mb-t-sm); color: var(--mb-fg-muted); } .mb-plan__list li .mb-icon { color: var(--mb-success); margin-block-start: 2px; } .mb-plan__list li[data-off="true"] { opacity: 0.55; } .mb-plan__list li[data-off="true"] .mb-icon { color: var(--mb-fg-subtle); } .mb-plan__foot { margin-block-start: auto; } .mb-plan__foot .mb-btn { inline-size: 100%; } .mb-steps { position: relative; display: grid; gap: var(--mb-s-6); grid-template-columns: 1fr; counter-reset: mb-step; } @media (min-width: 768px) { .mb-steps { grid-template-columns: repeat(var(--mb-steps-count, 3), 1fr); gap: var(--mb-s-5); } } .mb-step { position: relative; display: flex; flex-direction: column; gap: var(--mb-s-3); padding-inline-start: calc(var(--mb-step-dot) + var(--mb-s-4)); } @media (min-width: 768px) { .mb-step { padding-inline-start: 0; text-align: center; align-items: center; } } .mb-step__dot { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--mb-step-dot); block-size: var(--mb-step-dot); border-radius: var(--mb-r-full); border: 1px solid var(--mb-accent); background-color: var(--mb-bg); color: var(--mb-accent); z-index: 1; } @media (min-width: 768px) { .mb-step__dot { position: static; } } .mb-step__num { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-inline-size: 20px; padding: 0 5px; border-radius: var(--mb-r-full); background-color: var(--mb-accent); color: var(--mb-accent-fg); font-family: var(--mb-font-mono); font-size: 11px; line-height: 20px; text-align: center; } .mb-step__title { font-weight: var(--mb-w-semibold); font-size: var(--mb-t-lg); } .mb-step__desc { color: var(--mb-fg-muted); font-size: var(--mb-t-sm); } .mb-steps__line { display: none; } @media (min-width: 768px) { .mb-steps__line { display: block; position: absolute; inset-block-start: calc(var(--mb-step-dot) / 2); inset-inline: 12%; block-size: 1px; background: linear-gradient(to right, transparent, var(--mb-border-strong) 15%, var(--mb-border-strong) 85%, transparent); pointer-events: none; } } .mb-features { display: grid; gap: var(--mb-s-5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .mb-feature { display: flex; flex-direction: column; gap: var(--mb-s-3); padding: var(--mb-s-5); border: 1px solid var(--mb-border); border-radius: var(--mb-card-radius); background-color: var(--mb-bg-elevated); } .mb-feature__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--mb-s-7); block-size: var(--mb-s-7); border-radius: var(--mb-r-lg); background-color: var(--mb-bg-sunken); color: var(--mb-accent); flex: none; } .mb-feature__title { font-weight: var(--mb-w-semibold); font-size: var(--mb-t-lg); } .mb-feature__desc { color: var(--mb-fg-muted); font-size: var(--mb-t-sm); } .mb-accordion { display: grid; gap: var(--mb-s-2); max-inline-size: var(--mb-width-text); } .mb-accordion--wide { max-inline-size: none; } .mb-accordion__item { border: 1px solid var(--mb-border); border-radius: var(--mb-r-lg); background-color: var(--mb-bg-elevated); overflow: hidden; } .mb-accordion__item[data-open="true"] { border-color: var(--mb-accent); } .mb-accordion__btn { display: flex; inline-size: 100%; align-items: center; justify-content: space-between; gap: var(--mb-s-3); min-block-size: var(--mb-tap); padding: var(--mb-s-4); border: none; background: none; color: var(--mb-fg); font: inherit; font-weight: var(--mb-w-semibold); text-align: start; cursor: pointer; } .mb-accordion__btn:hover { background-color: var(--mb-bg-sunken); } .mb-accordion__btn .mb-icon { color: var(--mb-accent); transition: rotate var(--mb-accordion-dur) var(--mb-ease); } .mb-accordion__btn[aria-expanded="true"] .mb-icon { rotate: 180deg; } .mb-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mb-accordion-dur) var(--mb-ease); } .mb-accordion__item[data-open="true"] .mb-accordion__panel { grid-template-rows: 1fr; } .mb-accordion__panel > div { overflow: hidden; } .mb-accordion__body { padding: 0 var(--mb-s-4) var(--mb-s-4); color: var(--mb-fg-muted); line-height: var(--mb-lh-normal); } @media (prefers-reduced-motion: reduce) { .mb-accordion__panel { transition: none; } } .mb-prose { max-inline-size: var(--mb-prose-measure); color: var(--mb-fg-muted); line-height: var(--mb-lh-relaxed); font-size: var(--mb-t-base); } .mb-prose > * + * { margin-block-start: var(--mb-s-4); } .mb-prose h1, .mb-prose h2, .mb-prose h3, .mb-prose h4 { color: var(--mb-fg); font-family: var(--mb-font-heading); line-height: var(--mb-lh-snug); } .mb-prose h1 { font-size: var(--mb-t-3xl); margin-block-start: var(--mb-s-7); } .mb-prose h2 { font-size: var(--mb-t-2xl); margin-block-start: var(--mb-s-7); } .mb-prose h3 { font-size: var(--mb-t-xl); margin-block-start: var(--mb-s-6); } .mb-prose h4 { font-size: var(--mb-t-lg); margin-block-start: var(--mb-s-5); } .mb-prose > :first-child { margin-block-start: 0; } .mb-prose ul, .mb-prose ol { padding-inline-start: var(--mb-s-5); } .mb-prose li + li { margin-block-start: var(--mb-s-2); } .mb-prose li::marker { color: var(--mb-accent); } .mb-prose a { color: var(--mb-accent); } .mb-prose strong { color: var(--mb-fg); font-weight: var(--mb-w-semibold); } .mb-prose blockquote { padding-inline-start: var(--mb-s-4); border-inline-start: 3px solid var(--mb-accent); color: var(--mb-fg-subtle); font-style: italic; } .mb-prose code { padding: 2px 6px; border-radius: var(--mb-r-sm); background-color: var(--mb-bg-sunken); color: var(--mb-fg); } .mb-prose pre { padding: var(--mb-s-4); border-radius: var(--mb-r-md); background-color: var(--mb-bg-sunken); overflow-x: auto; } .mb-prose pre code { padding: 0; background: none; } .mb-prose table { inline-size: 100%; font-size: var(--mb-t-sm); } .mb-prose th, .mb-prose td { padding: var(--mb-s-2) var(--mb-s-3); text-align: start; border-block-end: 1px solid var(--mb-border); } .mb-prose th { color: var(--mb-fg); font-weight: var(--mb-w-semibold); } .mb-prose hr { border-block-start: 1px solid var(--mb-border); } .mb-prose img { border-radius: var(--mb-r-lg); } @media (max-width: 480px) { .mb-section { --mb-section-pad: var(--mb-s-7); } .mb-hero { --mb-hero-pad: var(--mb-s-8); } .mb-plan { padding: var(--mb-s-5); } } .mb-toasts { position: fixed; z-index: var(--mb-z-toast); inset-inline: var(--mb-toast-inset); display: flex; flex-direction: column; gap: var(--mb-toast-gap); pointer-events: none; } .mb-toasts[data-pos="top"] { inset-block-start: var(--mb-toast-inset); } .mb-toasts[data-pos="bottom"] { inset-block-end: var(--mb-toast-inset); flex-direction: column-reverse; } .mb-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--mb-s-3); inline-size: 100%; max-inline-size: var(--mb-toast-w); margin-inline-start: auto; padding: var(--mb-s-4); border: 1px solid var(--mb-border); border-inline-start: 3px solid var(--mb-fg-subtle); border-radius: 0 var(--mb-r-lg) var(--mb-r-lg) 0; background-color: var(--mb-bg-elevated); color: var(--mb-fg); box-shadow: var(--mb-shadow-lg); font-size: var(--mb-t-sm); animation: mb-toast-in var(--mb-dur-base) var(--mb-ease-spring); } [dir="rtl"] .mb-toast { border-radius: var(--mb-r-lg) 0 0 var(--mb-r-lg); } .mb-toast[data-leaving="true"] { animation: mb-toast-out var(--mb-dur-base) var(--mb-ease) forwards; } @keyframes mb-toast-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } } @keyframes mb-toast-out { to { opacity: 0; translate: 0 -8px; } } @media (prefers-reduced-motion: reduce) { .mb-toast, .mb-toast[data-leaving="true"] { animation: none; } } .mb-toast__icon { flex: none; margin-block-start: 1px; } .mb-toast__text { flex: 1 1 auto; min-inline-size: 0; line-height: var(--mb-lh-snug); } .mb-toast__close { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--mb-tap); block-size: var(--mb-tap); margin: calc(var(--mb-s-3) * -1); border: none; background: none; cursor: pointer; color: var(--mb-fg-subtle); border-radius: var(--mb-r-md); } .mb-toast__close:hover { background-color: var(--mb-bg-sunken); color: var(--mb-fg); } .mb-toast[data-type="success"] { border-inline-start-color: var(--mb-success); } .mb-toast[data-type="error"] { border-inline-start-color: var(--mb-danger); } .mb-toast[data-type="warning"] { border-inline-start-color: var(--mb-warning); } .mb-toast[data-type="info"] { border-inline-start-color: var(--mb-info); } .mb-toast[data-type="success"] .mb-toast__icon { color: var(--mb-success); } .mb-toast[data-type="error"] .mb-toast__icon { color: var(--mb-danger); } .mb-toast[data-type="warning"] .mb-toast__icon { color: var(--mb-warning); } .mb-toast[data-type="info"] .mb-toast__icon { color: var(--mb-info); } .mb-alert { display: flex; align-items: flex-start; gap: var(--mb-s-3); padding: var(--mb-s-4); border: 1px solid var(--mb-border); border-inline-start: 3px solid var(--mb-fg-subtle); border-radius: var(--mb-r-md); background-color: var(--mb-bg-elevated); color: var(--mb-fg); font-size: var(--mb-t-sm); line-height: var(--mb-lh-snug); } .mb-alert__icon { flex: none; margin-block-start: 1px; } .mb-alert__title { font-weight: var(--mb-w-semibold); margin-block-end: var(--mb-s-1); } .mb-alert__body { color: var(--mb-fg-muted); } .mb-alert[data-type="success"] { border-inline-start-color: var(--mb-success); } .mb-alert[data-type="error"] { border-inline-start-color: var(--mb-danger); } .mb-alert[data-type="warning"] { border-inline-start-color: var(--mb-warning); } .mb-alert[data-type="info"] { border-inline-start-color: var(--mb-info); } .mb-alert[data-type="success"] .mb-alert__icon { color: var(--mb-success); } .mb-alert[data-type="error"] .mb-alert__icon { color: var(--mb-danger); } .mb-alert[data-type="warning"] .mb-alert__icon { color: var(--mb-warning); } .mb-alert[data-type="info"] .mb-alert__icon { color: var(--mb-info); } .mb-spinner { display: inline-block; inline-size: var(--mb-spinner-size); block-size: var(--mb-spinner-size); border: 2px solid var(--mb-border-strong); border-block-start-color: var(--mb-accent); border-radius: var(--mb-r-full); animation: mb-spin 0.7s linear infinite; vertical-align: -0.2em; } .mb-spinner--sm { --mb-spinner-size: 16px; } .mb-spinner--lg { --mb-spinner-size: 40px; border-width: 3px; } @keyframes mb-spin { to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .mb-spinner { animation: mb-pulse 1.4s ease-in-out infinite; border-block-start-color: var(--mb-accent); } @keyframes mb-pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } } } .mb-progress { inline-size: 100%; block-size: var(--mb-progress-h); border-radius: var(--mb-r-full); background-color: var(--mb-bg-sunken); overflow: hidden; } .mb-progress__bar { block-size: 100%; inline-size: 0; border-radius: inherit; background-color: var(--mb-accent); transition: inline-size var(--mb-dur-base) var(--mb-ease); } .mb-progress[data-indeterminate="true"] .mb-progress__bar { inline-size: 35%; animation: mb-prog 1.3s var(--mb-ease) infinite; } @keyframes mb-prog { 0% { translate: -100% 0; } 100% { translate: 300% 0; } } @media (prefers-reduced-motion: reduce) { .mb-progress[data-indeterminate="true"] .mb-progress__bar { animation: none; inline-size: 100%; opacity: 0.5; } } .mb-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mb-s-3); padding: var(--mb-s-8) var(--mb-s-4); text-align: center; border: 1px dashed var(--mb-border-strong); border-radius: var(--mb-r-lg); color: var(--mb-fg-subtle); } .mb-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--mb-s-8); block-size: var(--mb-s-8); border-radius: var(--mb-r-full); background-color: var(--mb-bg-sunken); color: var(--mb-fg-subtle); } .mb-empty-state__title { color: var(--mb-fg); font-weight: var(--mb-w-semibold); font-size: var(--mb-t-lg); } .mb-empty-state__desc { max-inline-size: 44ch; } @media (max-width: 480px) { .mb-toasts { inset-inline: var(--mb-s-3); } .mb-toast { max-inline-size: none; } }