.mel-sheets { position: relative; isolation: isolate; }
        .mel-sheet {
          position: relative; isolation: isolate;
          border-radius: 28px 28px 0 0;
          padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 64px) clamp(72px, 9vw, 120px);
        }
        .mel-sheet + .mel-sheet { margin-top: -28px; }
        .mel-sheet:last-child { border-radius: 28px; }
        .mel-sheet-in { position: relative; max-width: 1180px; margin: 0 auto; }
        .mel-sheet-in--narrow { max-width: 820px; }

        .mel-sheet--light {
          background: #F8FAFC;
          box-shadow: 0 -1px 0 rgba(15,23,42,0.07), 0 -30px 60px -40px rgba(11,21,48,0.45);
        }
        .mel-sheet--deep {
          background: radial-gradient(135% 115% at 50% -12%, #223052 0%, #141B2B 46%, #0C1017 100%);
          box-shadow: 0 -30px 60px -30px rgba(11,21,48,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
        }
        html.dark .mel-sheet--light { box-shadow: 0 -30px 60px -30px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.9); }
        html.dark .mel-sheet--deep {
          background: radial-gradient(135% 115% at 50% -12%, #151C2C 0%, #0C111B 48%, #07090F 100%);
          box-shadow: 0 -30px 60px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
        }

        html.dark .mel-sheet--light {
          color-scheme: light;
          --background: #F8FAFC; --foreground: #0F172A;
          --card: #FFFFFF; --card-foreground: #0F172A;
          --muted: #F1F5F9; --muted-foreground: #475569;
          --border: rgba(100,116,139,0.22); --input: rgba(100,116,139,0.18);
          --mel-text-primary: #0F172A; --mel-text-secondary: #1E293B; --mel-text-tertiary: #475569;
          --mel-text-muted: #64748B; --mel-text-faint: rgba(71,85,105,0.4);
          --mel-surface-1: #F8FAFC; --mel-surface-2: #F1F5F9; --mel-surface-3: #E2E8F0;
          --mel-surface-overlay: #FFFFFF; --mel-surface-card: #FFFFFF; --mel-surface-panel: #F8FAFC; --mel-surface-modal: #FFFFFF;
          --mel-input-bg: #FFFFFF; --mel-input-border: rgba(100,116,139,0.28); --mel-input-text-muted: #475569; --mel-input-label: #1E293B;
          --mel-border-subtle: rgba(100,116,139,0.18); --mel-border-default: rgba(100,116,139,0.24); --mel-border-muted: rgba(100,116,139,0.14);
          color: #0F172A;
        }

        html:not(.dark) .mel-sheet--deep {
          color-scheme: dark;
          --background: #050711; --foreground: #E8EDF5;
          --card: #0B0F1E; --card-foreground: #E8EDF5;
          --muted: #0D1322; --muted-foreground: #8A9AB5;
          --border: rgba(255,255,255,0.09); --input: rgba(255,255,255,0.08);
          --mel-text-primary: rgba(240,244,250,0.94); --mel-text-secondary: rgba(220,228,240,0.80); --mel-text-tertiary: rgba(200,210,230,0.66);
          --mel-text-muted: rgba(180,195,220,0.55); --mel-text-faint: rgba(200,210,230,0.24);
          --mel-surface-1: rgba(255,255,255,0.035); --mel-surface-2: rgba(255,255,255,0.06); --mel-surface-3: rgba(255,255,255,0.09);
          --mel-surface-overlay: rgba(6,10,24,0.98); --mel-surface-card: rgba(255,255,255,0.045); --mel-surface-panel: rgba(6,9,20,0.9); --mel-surface-modal: rgba(4,6,14,0.92);
          --mel-input-bg: rgba(8,12,28,0.6); --mel-input-border: rgba(167,139,250,0.22); --mel-input-text-muted: rgba(180,195,220,0.65); --mel-input-label: rgba(196,181,253,0.9);
          --mel-border-subtle: rgba(255,255,255,0.07); --mel-border-default: rgba(255,255,255,0.11); --mel-border-muted: rgba(255,255,255,0.06);
          color: #E6ECF5;
        }
        .mel-sheet--light { color: #0F172A; }
        .mel-sheet--deep { color: #E6ECF5; }

        /* Eyebrow: mono numeral + short rule + label (as on the product sheets). */
        .mel-sheet-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
          font: 700 12px/1.4 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
        .mel-sheet-eyebrow .n { color: var(--mel-sheet-accent, #7C6FF0); }
        .mel-sheet-eyebrow .r { width: 24px; height: 1px; background: currentColor; opacity: 0.4; }
        .mel-sheet--light .mel-sheet-eyebrow { color: rgba(15,23,42,0.78); }
        .mel-sheet--deep .mel-sheet-eyebrow { color: rgba(226,232,240,0.9); }
        .mel-sheet-title { margin: 0; font: 700 clamp(1.9rem, 3.6vw, 3rem)/1.08 Poppins, system-ui, sans-serif; letter-spacing: -0.035em; text-wrap: balance; }
        .mel-sheet-underline { width: 58px; height: 3px; margin: 16px 0 0; border-radius: 3px;
          background: linear-gradient(90deg, var(--mel-sheet-accent, #7C6FF0), var(--mel-sheet-accent2, #22D3EE)); }
        .mel-sheet-lede { margin: 18px 0 0; max-width: 62ch; font: 400 clamp(1rem, 1.3vw, 1.18rem)/1.62 Poppins, system-ui, sans-serif; }
        .mel-sheet--light .mel-sheet-lede { color: #1E293B; }
        .mel-sheet--deep .mel-sheet-lede { color: rgba(226,232,240,0.8); }

        /* Neomorphic card, one per surface. */
        .mel-sheet-card { position: relative; border-radius: 20px; padding: clamp(18px, 2vw, 26px); transition: transform .2s ease, box-shadow .2s ease; }
        .mel-sheet--light .mel-sheet-card {
          background: #FFFFFF; border: 1px solid rgba(15,23,42,0.06);
          box-shadow: 0 18px 38px -22px rgba(15,23,42,0.28), 6px 6px 16px rgba(15,23,42,0.07), -6px -6px 16px rgba(255,255,255,0.95);
        }
        .mel-sheet--deep .mel-sheet-card {
          background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
          border: 1px solid rgba(255,255,255,0.08);
          box-shadow: 0 24px 52px -24px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.07);
        }
        a.mel-sheet-card:hover, .mel-sheet-card.is-interactive:hover { transform: translateY(-2px); }
        .mel-sheet--light a.mel-sheet-card:hover, .mel-sheet--light .mel-sheet-card.is-interactive:hover {
          box-shadow: 0 24px 44px -22px rgba(15,23,42,0.34), 6px 6px 16px rgba(15,23,42,0.08), -6px -6px 16px rgba(255,255,255,0.95);
        }
        .mel-sheet--deep a.mel-sheet-card:hover, .mel-sheet--deep .mel-sheet-card.is-interactive:hover {
          border-color: rgba(255,255,255,0.14);
        }
        /* Recessed well (tables, code, quotes) inside a card or sheet. */
        .mel-sheet-well { border-radius: 14px; padding: 14px 16px; }
        .mel-sheet--light .mel-sheet-well { background: #EEF2F7; box-shadow: inset 3px 3px 7px rgba(15,23,42,0.08), inset -3px -3px 7px rgba(255,255,255,0.9); }
        .mel-sheet--deep .mel-sheet-well { background: rgba(4,8,18,0.5); box-shadow: inset 2px 2px 6px rgba(0,0,0,0.55), inset -1px -1px 3px rgba(255,255,255,0.05); }

        @media (max-width: 767px) {
          .mel-sheet { border-radius: 24px 24px 0 0; padding: 44px 16px 64px; }
          .mel-sheet + .mel-sheet { margin-top: -24px; }
          .mel-sheet:last-child { border-radius: 24px; }
        }
        @media (prefers-reduced-motion: reduce) { .mel-sheet-card { transition: none; } }