.metaperformer-layout { --mp-blue: hsl(var(--color-accent-runtime)); --mp-cyan: #45c4f4; --mp-blue-text: #1a66cf; --mp-cyan-text: #087bb1; --mp-ink: #0a0a0a; --mp-muted: #525252; --mp-line: #ececec; --mp-grey-1: #fafafa; --mp-grey-2: #f4f4f5; --mp-shadow-soft: 0 1px 2px #0000000a, 0 8px 24px -12px #00000014; --mp-shadow-lift: 0 2px 4px #0000000d, 0 16px 36px -16px #0000001f; --font-sans: 'Sora', ui-sans-serif, system-ui, sans-serif; --font-display: 'Sora', ui-sans-serif, sans-serif; --font-body: 'Sora', ui-sans-serif, sans-serif; font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; color: var(--mp-ink); background-color: hsl(var(--color-background-runtime)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } .metaperformer-layout .display-hero, .metaperformer-layout .mp-display { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.75rem, 6.6vw, 6rem); line-height: 1.02; letter-spacing: -0.03em; } .metaperformer-layout .display-section, .metaperformer-layout .mp-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; } .metaperformer-layout .display-stat { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; } .metaperformer-layout .mp-dark .text-accent { color: var(--mp-cyan); } .metaperformer-layout .mp-stat-value { white-space: nowrap; } @media (min-width: 400px) { .metaperformer-layout h2 .mp-underline { -webkit-hyphens: none; hyphens: none; } } .metaperformer-layout .mp-etikett { overflow-wrap: normal; } .metaperformer-layout .mp-range { height: 44px; background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)) center / 100% 4px no-repeat; border-radius: 0; } .metaperformer-layout .mp-range:focus-visible { outline: 2px solid var(--mp-cyan); outline-offset: 2px; border-radius: 6px; } .metaperformer-layout .mp-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--mp-cyan), 0 2px 6px rgba(0, 0, 0, 0.4); } .metaperformer-layout .mp-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--mp-cyan); } .metaperformer-layout .mp-input::placeholder { color: #6b7280; } .metaperformer-layout .mp-input[aria-invalid='true'] { border-color: #b91c1c; } @media (pointer: coarse) { .metaperformer-layout .mp-footer-link { position: relative; } .metaperformer-layout .mp-footer-link::before { content: ''; position: absolute; inset: -12px 0; } }