/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Space_Grotesk","arguments":[{"subsets":["latin","latin-ext"],"variable":"--font-space-grotesk","display":"swap"}],"variableName":"spaceGrotesk"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/e1aab0933260df4d-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/b7387a63dd068245-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/36966cca54120369-s.p.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: 'Space Grotesk Fallback';src: local("Arial");ascent-override: 89.71%;descent-override: 26.62%;line-gap-override: 0.00%;size-adjust: 109.69%
}.__className_97ef00 {font-family: 'Space Grotesk', 'Space Grotesk Fallback';font-style: normal
}.__variable_97ef00 {--font-space-grotesk: 'Space Grotesk', 'Space Grotesk Fallback'
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"IBM_Plex_Sans","arguments":[{"subsets":["latin","latin-ext"],"weight":["400","500"],"variable":"--font-ibm-sans","display":"swap"}],"variableName":"ibmSans"} ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/7b19b489dc6743ba-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/28793f5c5e3d822d-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/c9c3823090ec8b55-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/b3bf17a9041d9433-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/2801417b65625cf5-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/26d4368bf94c0ec4-s.p.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/7b19b489dc6743ba-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/28793f5c5e3d822d-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/c9c3823090ec8b55-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/b3bf17a9041d9433-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/2801417b65625cf5-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/26d4368bf94c0ec4-s.p.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 Fallback';src: local("Arial");ascent-override: 101.32%;descent-override: 27.18%;line-gap-override: 0.00%;size-adjust: 101.17%
}.__className_b78252 {font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback';font-style: normal
}.__variable_b78252 {--font-ibm-sans: 'IBM Plex Sans', 'IBM Plex Sans Fallback'
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"IBM_Plex_Mono","arguments":[{"subsets":["latin","latin-ext"],"weight":["400","500"],"variable":"--font-ibm-mono","display":"swap"}],"variableName":"ibmMono"} ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/58f386aa6b1a2a92-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/011e180705008d6f-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7ba5fb2a8c88521c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/92eeb95d069020cc-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/d3ebbfd689654d3a-s.p.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ef4d5661765d0e49-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/d29838c109ef09b4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e40af3453d7c920a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/99dcf268bda04fe5-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/98e207f02528a563-s.p.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 Mono Fallback';src: local("Arial");ascent-override: 76.16%;descent-override: 20.43%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_308571 {font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback';font-style: normal
}.__variable_308571 {--font-ibm-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/styles/foundation.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
/* ==========================================================================
   KONTRA — foundation.css
   Fundament anty-generycznego systemu projektowego. Dołącz jako PIERWSZY
   arkusz w projekcie. Ustawia kolejność warstw, tokeny (OKLCH), ruch,
   z-index, reset, bazę, bariery dostępności i trzy style-packi.
   Potem dopisujesz tylko komponenty i kierownictwo artystyczne.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KOLEJNOŚĆ WARSTW (jedyne miejsce, w którym ustala się priorytety).
   Późniejsza warstwa wygrywa niezależnie od specyficzności — dlatego
   `themes` nadpisuje komponenty bez !important.
   -------------------------------------------------------------------------- */
@layer reset, tokens, base, layout, components, utilities, themes;

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-block-size: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video, canvas { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
}

/* --------------------------------------------------------------------------
   3. TOKENY
   Poziomy: PRYMITYWY (nie używać w komponentach) → SEMANTYCZNE (warstwa pracy)
            → KOMPONENTOWE. Komponent nigdy nie sięga po prymityw.
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* ---- PRYMITYWY: kolor w OKLCH ----
       Skala generowana zmianą L przy stałych C,H — percepcyjnie równe stopnie. */
    --blue-50:  oklch(0.97 0.02 255);
    --blue-100: oklch(0.93 0.05 255);
    --blue-200: oklch(0.87 0.08 255);
    --blue-300: oklch(0.79 0.12 255);
    --blue-400: oklch(0.70 0.15 255);
    --blue-500: oklch(0.62 0.17 255);
    --blue-600: oklch(0.53 0.16 255);
    --blue-700: oklch(0.45 0.14 255);
    --blue-800: oklch(0.37 0.11 255);
    --blue-900: oklch(0.29 0.08 255);

    --violet-500: oklch(0.55 0.20 300);
    --acid:       oklch(0.85 0.20 110);  /* kwasowy akcent brutalistyczny */

    --red-600:   oklch(0.55 0.20 25);
    --green-600: oklch(0.58 0.15 150);
    --amber-500: oklch(0.78 0.16 75);

    /* Neutralne: chroma bliska 0; lekka chroma daje ciepłą/zimną szarość */
    --ink:    oklch(0.22 0.01 270);
    --paper:  oklch(0.98 0.005 90);
    --gray-300: oklch(0.75 0.01 270);
    --gray-600: oklch(0.50 0.01 270);

    /* ---- SEMANTYCZNE (operuj tylko tutaj) ---- */
    --surface-action-primary: var(--blue-500);
    --text-on-action:         var(--blue-50);
    /* Stany pochodne przez color-mix — bez nowych zmiennych */
    --surface-action-hover: color-mix(in oklch, var(--surface-action-primary), black 12%);
    --surface-action-soft:  color-mix(in oklch, var(--surface-action-primary), transparent 90%);
    --border-subtle:        color-mix(in oklch, var(--ink), transparent 88%);

    --feedback-danger:  var(--red-600);
    --feedback-success: var(--green-600);
    --feedback-warning: var(--amber-500);

    --focus-ring: var(--surface-action-primary);

    /* ---- ODSTĘPY (skala modularna, baza 4px) ---- */
    --space-0:  0;
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-40: 10rem;                       /* "przesada" z Prawa 1 */
    --spacing-fluid: clamp(1rem, 2vw, 2rem);

    /* ---- PROMIENIE / OBRAMOWANIA / BLUR ---- */
    --radius-none: 0;
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   1rem;
    --radius-pill: 999px;
    --border-hairline: 1px solid var(--border-subtle);
    --border-bold:     2px solid var(--ink);
    --blur-glass: 16px;
    --blur-soft:  8px;

    /* ---- CIENIE (światło fizyczne lub twardy uskok) ---- */
    --shadow-organic:
      0 1px 1px rgba(0,0,0,0.02),
      0 2px 2px rgba(0,0,0,0.03),
      0 4px 4px rgba(0,0,0,0.04),
      0 8px 8px rgba(0,0,0,0.04),
      0 16px 16px rgba(0,0,0,0.05);
    --shadow-organic-lifted: 0 24px 32px rgba(0,0,0,0.08);
    --shadow-brutal:         8px 8px 0 var(--ink);
    --shadow-brutal-lifted:  12px 12px 0 var(--ink);

    /* ---- TYPOGRAFIA (variable fonts + kontrast skali) ---- */
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    ui-monospace, "JetBrains Mono", monospace;

    --font-size-display: clamp(3rem, 10vw, 8rem);
    --font-size-h1:      clamp(1.5rem, 4vw + 1rem, 3rem);
    --font-size-h2:      clamp(1.25rem, 2vw + 0.75rem, 2rem);
    --font-size-body:    1rem;
    --font-size-caption: 0.8125rem;

    --font-weight-regular: 400;
    --font-weight-medium:  525;               /* niestandardowa, precyzyjna waga */
    --font-weight-heavy:   850;

    --tracking-display: -0.06em;
    --tracking-tight:   -0.04em;
    --leading-tight: 0.9;
    --leading-body:  1.6;

    /* ---- RUCH (Prawo 8) ---- */
    --duration-instant:   100ms;
    --duration-snappy:    150ms;
    --duration-fast:      220ms;
    --duration-base:      320ms;
    --duration-cinematic: 800ms;

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    /* Prawdziwa sprężyna z odbiciami (cubic-bezier tego nie odda) */
    --ease-spring-physical: linear(
      0, 0.402 7.4%, 0.711 15.9%, 0.929 23.7%, 1.008 28.5%,
      1.067 33.9%, 1.099 39.3%, 1.097 50.5%, 1.018 73.5%, 1.001 88.7%, 1
    );

    /* ---- Z-INDEX (sztywna skala; wartości spoza skali zakazane) ---- */
    --z-below:      -1;
    --z-base:        0;
    --z-noise:      10;
    --z-content:    20;
    --z-sticky:     30;
    --z-nav:        50;
    --z-dropdown:   60;
    --z-overlay-bg: 80;
    --z-toast:     100;
    /* Nakładki (modal/popover/tooltip/menu) idą do TOP LAYER, nie tutaj. */

    /* ---- KONTENERY / MIARA ---- */
    --container-sm: 30rem;
    --container-md: 48rem;
    --container-lg: 64rem;
    --measure: 70ch;

    /* ---- POWIERZCHNIE / TEKSTURA ---- */
    --surface-muted: color-mix(in oklch, var(--paper), var(--ink) 6%);
    --surface-glass: color-mix(in srgb, var(--paper), transparent 30%);
    --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

    /* ---- TOKENY MOTYWOWALNE (flipowane przez style-packi w warstwie themes) ---- */
    --radius-base:  var(--radius-md);
    --shadow-base:  var(--shadow-organic);
    --border-base:  none;
    --surface-card: var(--paper);
  }
}

/* --------------------------------------------------------------------------
   4. BAZA
   -------------------------------------------------------------------------- */
@layer base {
  :root { color-scheme: light dark; interpolate-size: allow-keywords; }

  body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--leading-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;                        /* zbliżona długość linii w nagłówku */
  }
  p, .prose { text-wrap: pretty; max-inline-size: var(--measure); } /* brak "sierot" */

  a { color: var(--surface-action-primary); text-underline-offset: 0.15em; }

  /* Autorski wskaźnik fokusu — nigdy domyślna niebieska obwódka */
  :focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--surface-action-primary); color: var(--text-on-action); }

  :root { accent-color: var(--surface-action-primary); }
}

/* --------------------------------------------------------------------------
   5. MOTYWY I STYLE-PACKS (warstwa o najwyższym priorytecie)
   -------------------------------------------------------------------------- */
@layer themes {
  /* Tryb jasny/ciemny przez light-dark() — jeden token, obie wartości */
  :root {
    --bg-primary:   light-dark(oklch(0.98 0.005 90), oklch(0.20 0.02 265));
    --text-primary: light-dark(oklch(0.22 0.01 270), oklch(0.97 0.01 90));
    --text-muted:   light-dark(oklch(0.50 0.01 270), oklch(0.72 0.02 265));
    --surface-solid: light-dark(var(--paper), oklch(0.27 0.03 265));
  }
  [data-mode="light"] { color-scheme: light; }
  [data-mode="dark"]  { color-scheme: dark; }

  /* Pacing teatralny — ciemny blok na pojedynczej sekcji (Prawo 5) */
  [data-theme="dark"] {
    --bg-primary: oklch(0.20 0.02 265);
    --surface-solid: oklch(0.27 0.03 265);
    --text-primary: oklch(0.97 0.01 90);
    --text-muted: oklch(0.72 0.02 265);
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }

  /* ---- STYLE-PACK: EDITORIAL (stonowany, redakcyjny) ---- */
  [data-pack="editorial"] {
    --surface-action-primary: var(--ink);
    --radius-base: var(--radius-md);
    --shadow-base: var(--shadow-organic);
    --border-base: none;
    --surface-card: var(--surface-solid);
    --font-display: "Newsreader", Georgia, serif;
    --tracking-display: -0.02em;
  }

  /* ---- STYLE-PACK: BRUTALIST (twardy, anty-design) ---- */
  [data-pack="brutalist"] {
    --surface-action-primary: var(--acid);
    --text-on-action: var(--ink);
    --radius-base: var(--radius-none);
    --radius-md: var(--radius-none);
    --radius-lg: var(--radius-none);
    --shadow-base: var(--shadow-brutal);
    --border-base: var(--border-bold);
    --surface-card: var(--paper);
    --font-display: "Space Grotesk", system-ui, sans-serif;
  }

  /* ---- STYLE-PACK: GLASS (warstwowy, premium) ---- */
  [data-pack="glass"] {
    --surface-action-primary: var(--blue-500);
    --radius-base: var(--radius-lg);
    --radius-md: var(--radius-lg);
    --shadow-base: var(--shadow-organic);
    --border-base: 1px solid color-mix(in srgb, var(--paper), transparent 55%);
    --surface-card: var(--surface-glass);
  }
}

/* --------------------------------------------------------------------------
   6. BARIERY DOSTĘPNOŚCI (poza warstwami — muszą wygrać; Prawo 10)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-panel, .surface-glass, [data-pack="glass"] .card {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    background: var(--surface-solid) !important;
  }
}

@media (prefers-contrast: more) {
  :root { --border-subtle: var(--ink); }
}

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/styles/landing.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* BytePlus Lab — landing (KONTRA · 2001 × AI zen) */

@layer themes {
  [data-pack="odyssey"] {
    --void: oklch(0.07 0.015 265);
    --bone: oklch(0.93 0.01 85);
    --zen: oklch(0.72 0.06 210);
    --hal: oklch(0.68 0.16 45);

    --bg-primary: var(--void);
    --text-primary: var(--bone);
    --text-muted: oklch(0.62 0.02 265);
    --surface-action-primary: var(--zen);
    --text-on-action: var(--void);
    --focus-ring: var(--zen);
    --surface-solid: oklch(0.11 0.02 265);
    --border-subtle: color-mix(in oklch, var(--bone), transparent 88%);
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  }
}

@layer layout {
  .odyssey {
    min-block-size: 100svh;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: clip;
  }

  .odyssey__noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-noise);
    opacity: 0.35;
    background-image: var(--texture-noise);
  }

  .odyssey__nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-12));
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    mix-blend-mode: difference;
  }

  .odyssey__nav a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .odyssey__nav a:hover {
    color: var(--bone);
  }

  .odyssey__nav-links {
    display: flex;
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .odyssey__hal {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--hal);
    box-shadow: 0 0 12px var(--hal);
    animation: hal-pulse 4s var(--ease-in-out) infinite;
  }

  @keyframes hal-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
  }

  .kadr {
    position: relative;
    padding-block: clamp(var(--space-16), 12vh, var(--space-40));
    padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
  }

  .kadr__inner {
    max-inline-size: var(--container-lg);
    margin-inline: auto;
  }

  .kadr__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    -webkit-margin-after: var(--space-4);
            margin-block-end: var(--space-4);
  }

  .kadr__title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    max-inline-size: 14ch;
    text-wrap: balance;
  }

  .kadr__lead {
    -webkit-margin-before: var(--space-6);
            margin-block-start: var(--space-6);
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
    color: var(--text-muted);
    max-inline-size: 42ch;
    line-height: 1.7;
  }
}

@layer components {
  /* —— Prolog —— */
  .prolog {
    min-block-size: 100svh;
    display: grid;
    align-items: end;
    -webkit-padding-after: clamp(var(--space-16), 15vh, var(--space-40));
            padding-block-end: clamp(var(--space-16), 15vh, var(--space-40));
    isolation: isolate;
  }

  .prolog__media {
    position: absolute;
    inset: 0;
    z-index: var(--z-below);
    overflow: hidden;
  }

  .prolog__photo {
    object-fit: cover;
    object-position: 55% 55%;
    filter: contrast(1.04) saturate(0.78) brightness(0.92);
  }

  .prolog__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--texture-noise);
    opacity: 0.12;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: calc(var(--z-base) + 2);
  }

  .prolog__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      oklch(0.07 0.015 265 / 0.78) 0%,
      oklch(0.07 0.015 265 / 0.35) 38%,
      oklch(0.07 0.015 265 / 0.12) 72%,
      transparent 100%
    );
    z-index: var(--z-base);
  }

  .prolog__media .starfield {
    display: none;
  }

  .prolog__grid {
    position: relative;
    z-index: var(--z-content);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-gap: var(--space-12);
    gap: var(--space-12);
    align-items: end;
  }

  .prolog__horizon {
    position: absolute;
    inset-block-end: 28%;
    inset-inline: 0;
    block-size: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in oklch, var(--bone), transparent 40%) 20%,
      color-mix(in oklch, var(--bone), transparent 40%) 80%,
      transparent
    );
    z-index: var(--z-content);
  }

  .starfield {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: var(--z-below);
    opacity: 0.7;
  }

  .prolog__display {
    font-size: clamp(2.5rem, 8vw + 1rem, 6.5rem);
    font-weight: var(--font-weight-heavy);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
    max-inline-size: 11ch;
  }

  .prolog__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    -webkit-margin-before: var(--space-8);
            margin-block-start: var(--space-8);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zen);
    text-decoration: none;
    -webkit-border-after: 1px solid color-mix(in oklch, var(--zen), transparent 50%);
            border-block-end: 1px solid color-mix(in oklch, var(--zen), transparent 50%);
    -webkit-padding-after: var(--space-1);
            padding-block-end: var(--space-1);
    transition: border-color var(--duration-base) var(--ease-out-expo);
  }

  .prolog__cta:hover {
    border-color: var(--zen);
    text-decoration: none;
  }

  /* —— Kontrapunkt (teza — memorable element) —— */
  .kontrapunkt {
    background: oklch(0.05 0.01 265);
    border-block: var(--border-hairline);
    overflow: hidden;
  }

  .kontrapunkt__layout {
    display: grid;
    grid-template-columns: minmax(14rem, 26rem) minmax(0, 1fr);
    grid-gap: clamp(var(--space-6), 5vw, var(--space-16));
    gap: clamp(var(--space-6), 5vw, var(--space-16));
    align-items: center;
  }

  .kontrapunkt__frame {
    margin: 0;
    position: relative;
    overflow: hidden;
    border: var(--border-hairline);
    aspect-ratio: 4 / 5;
    max-block-size: 32rem;
    box-shadow: var(--shadow-organic-lifted);
    transform: translateX(clamp(-0.5rem, -2vw, -1.5rem));
  }

  .kontrapunkt__photo {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 48% 42%;
    filter: contrast(1.08) saturate(0.15) brightness(0.95);
  }

  .kontrapunkt__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--texture-noise);
    opacity: 0.14;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  .kontrapunkt__hal {
    position: absolute;
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--hal);
    box-shadow: 0 0 10px var(--hal);
    opacity: 0.85;
  }

  .kontrapunkt__copy {
    -webkit-padding-start: clamp(0rem, 2vw, var(--space-6));
            padding-inline-start: clamp(0rem, 2vw, var(--space-6));
  }

  .kontrapunkt__quote {
    font-size: clamp(1.125rem, 2vw + 0.5rem, 1.75rem);
    font-weight: var(--font-weight-regular);
    line-height: 1.55;
    max-inline-size: 38ch;
    color: color-mix(in oklch, var(--bone), transparent 8%);
  }

  .kontrapunkt__meta {
    -webkit-margin-before: var(--space-6);
            margin-block-start: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    color: var(--text-muted);
    letter-spacing: 0.08em;
  }

  /* —— Transmisje —— */
  .transmisje__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    -webkit-margin-after: var(--space-12);
            margin-block-end: var(--space-12);
  }

  .transmisje__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    grid-gap: var(--space-4);
    gap: var(--space-4);
  }

  .sygnal {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--surface-solid);
    border: var(--border-hairline);
    text-decoration: none;
    color: inherit;
    transition:
      border-color var(--duration-base) var(--ease-standard),
      transform var(--duration-cinematic) var(--ease-out-expo);
  }

  .sygnal:hover {
    border-color: color-mix(in oklch, var(--zen), transparent 50%);
    transform: translateY(-2px);
    text-decoration: none;
  }

  .sygnal__id {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--zen);
    -webkit-margin-after: var(--space-3);
            margin-block-end: var(--space-3);
  }

  .sygnal__title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    -webkit-margin-after: var(--space-3);
            margin-block-end: var(--space-3);
  }

  .sygnal__excerpt {
    font-size: 0.9rem;
    color: var(--text-muted);
    flex: 1 1;
  }

  .sygnal__time {
    -webkit-margin-before: var(--space-4);
            margin-block-start: var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
  }

  /* —— Przekaźnik (reklama) —— */
  .przekaznik {
    padding-block: var(--space-12);
  }

  .przekaznik__panel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: var(--space-6);
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-6) var(--space-8);
    background: color-mix(in oklch, var(--surface-solid), var(--zen) 4%);
    border: 1px solid color-mix(in oklch, var(--zen), transparent 75%);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    letter-spacing: 0.06em;
  }

  .przekaznik__tag {
    padding: var(--space-1) var(--space-3);
    border: 1px solid color-mix(in oklch, var(--zen), transparent 60%);
    color: var(--zen);
    text-transform: uppercase;
  }

  .przekaznik__body {
    color: var(--text-muted);
    line-height: 1.5;
  }

  .przekaznik__body strong {
    color: var(--bone);
    font-weight: var(--font-weight-medium);
  }

  .przekaznik__slot {
    color: var(--hal);
    white-space: nowrap;
  }

  /* —— Orbity (eseje) —— */
  .orbity {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .orbity__media {
    position: absolute;
    inset: 0;
    z-index: var(--z-below);
  }

  .orbity__photo {
    object-fit: cover;
    object-position: 58% 48%;
    filter: saturate(0.82) brightness(0.88) contrast(1.02);
  }

  .orbity__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--texture-noise);
    opacity: 0.1;
    mix-blend-mode: soft-light;
    pointer-events: none;
  }

  .orbity__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      oklch(0.07 0.015 265 / 0.55) 0%,
      oklch(0.07 0.015 265 / 0.4) 45%,
      oklch(0.07 0.015 265 / 0.75) 100%
    );
  }

  .orbity__content {
    position: relative;
    z-index: var(--z-content);
  }

  .orbity__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .orbita {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-gap: var(--space-8);
    gap: var(--space-8);
    -webkit-padding-after: var(--space-8);
            padding-block-end: var(--space-8);
    -webkit-border-after: var(--border-hairline);
            border-block-end: var(--border-hairline);
    text-decoration: none;
    color: inherit;
    transition: opacity var(--duration-base) var(--ease-standard);
  }

  .orbita:last-child {
    -webkit-border-after: none;
            border-block-end: none;
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }

  .orbita:hover {
    opacity: 0.88;
    text-decoration: none;
  }

  .orbita__index {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-heavy);
    letter-spacing: var(--tracking-display);
    color: color-mix(in oklch, var(--bone), transparent 82%);
    line-height: 1;
  }

  .orbita__title {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 2rem);
    font-weight: var(--font-weight-medium);
    -webkit-margin-after: var(--space-3);
            margin-block-end: var(--space-3);
  }

  .orbita__excerpt {
    color: var(--text-muted);
    max-inline-size: 55ch;
  }

  /* —— Zwrotka (newsletter) —— */
  .zwrotka {
    background: var(--surface-solid);
    border-block: var(--border-hairline);
  }

  .zwrotka__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-gap: var(--space-12);
    gap: var(--space-12);
    align-items: center;
  }

  .zwrotka__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .zwrotka__label {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .zwrotka__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .zwrotka__row input {
    flex: 1 1;
    min-inline-size: 12rem;
    padding: var(--space-3) var(--space-4);
    background: var(--void);
    border: var(--border-hairline);
    color: var(--bone);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .zwrotka__row input:focus {
    outline: none;
    border-color: var(--zen);
  }

  .zwrotka__row button {
    padding: var(--space-3) var(--space-6);
    background: var(--surface-action-primary);
    color: var(--text-on-action);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-standard);
  }

  .zwrotka__row button:hover {
    opacity: 0.9;
  }

  .zwrotka__confirm {
    font-size: 0.85rem;
    color: var(--zen);
  }

  /* —— Dek (stopka) —— */
  .dek {
    padding-block: var(--space-12) var(--space-16);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .dek__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-6);
    align-items: center;
  }

  .dek__links {
    display: flex;
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .dek__links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .dek__links a:hover {
    color: var(--zen);
  }

  .empty-state {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: var(--space-8);
    border: 1px dashed color-mix(in oklch, var(--text-muted), transparent 50%);
  }

  .link-more {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zen);
    text-decoration: none;
  }

  .link-more:hover {
    text-decoration: underline;
  }
}

@layer utilities {
  @media (max-width: 48rem) {
    .prolog__grid {
      grid-template-columns: 1fr;
    }

    .kontrapunkt__layout {
      grid-template-columns: 1fr;
    }

    .kontrapunkt__frame {
      transform: none;
      max-block-size: 24rem;
    }

    .orbita {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    .zwrotka__layout {
      grid-template-columns: 1fr;
    }

    .przekaznik__panel {
      grid-template-columns: 1fr;
      text-align: start;
    }
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* Legacy blog/showcase — zachowane dla podstron */
.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.muted {
  color: var(--text-muted);
}

.article-list {
  list-style: none;
  padding: 0;
}

.article-list li {
  background: var(--surface-solid);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  border: var(--border-hairline);
}

.article-list p {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.showcase-placeholder {
  border: 1px dashed color-mix(in oklch, var(--text-muted), transparent 50%);
  border-radius: var(--radius-lg);
  padding: 3rem;
  text-align: center;
  color: var(--text-muted);
}

.social-brief {
  background: var(--surface-solid);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-top: 2rem;
  border: var(--border-hairline);
}

.social-brief h3 {
  margin-top: 0;
}

.social-brief pre {
  white-space: pre-wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
}