*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            /* ── Professional palette: Blush background · Lavender panels · Rose & Violet accents ── */
            --bg-page:   #fdf4f7;
            --bg-panel:  #ffffff;
            --bg-card:   #faf5fd;
            --bg-muted:  #f3eaf6;
            --accent:         #b5224f;
            --accent-hover:   #8f1a3d;
            --accent-dim:     rgba(181, 34, 79, 0.08);
            --violet:         #6b21a8;
            --violet-light:   #8b5cf6;
            --violet-dim:     rgba(107, 33, 168, 0.08);
            --border:         rgba(107, 33, 168, 0.12);
            --border-strong:  rgba(181, 34, 79, 0.22);
            --shadow-sm:  0 1px 4px rgba(60,20,60,0.06), 0 2px 12px rgba(60,20,60,0.04);
            --shadow-md:  0 4px 20px rgba(60,20,60,0.08), 0 1px 4px rgba(60,20,60,0.04);
            --shadow-lg:  0 8px 40px rgba(60,20,60,0.10), 0 2px 8px rgba(60,20,60,0.06);
            --text:           #1a0c1e;
            --text-secondary: #4a2d5a;
            --text-muted:     #7a5e88;
            --danger:         #b91c1c;
            --danger-dim:     rgba(185, 28, 28, 0.08);
            --success:        #15803d;
            --radius-sm:  6px;
            --radius-md:  12px;
            --radius-lg:  18px;
            --radius-xl:  28px;
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-page);
            color: var(--text);
            line-height: 1.75;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        /* ── NAV ── */
        nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            background: rgba(253, 244, 247, 0.96);
            backdrop-filter: blur(20px) saturate(1.6);
            -webkit-backdrop-filter: blur(20px) saturate(1.6);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 1px 12px rgba(60,20,60,0.06);
        }
        .nav-inner {
            max-width: 1280px; margin: 0 auto; padding: 0 40px;
            display: flex; align-items: center; justify-content: space-between; height: 62px;
        }
        .nav-brand {
            font-family: 'Playfair Display', Georgia, serif;
            font-weight: 700; font-size: 1.18rem; color: var(--accent);
            letter-spacing: 0.10em; text-decoration: none; display: flex; align-items: center; gap: 8px;
        }
        .nav-links { display: flex; gap: 2px; }
        .nav-links a {
            padding: 6px 12px; font-size: 0.80rem; font-weight: 500;
            color: var(--text-secondary); text-decoration: none;
            border-radius: var(--radius-sm); transition: color 0.2s, background 0.2s; white-space: nowrap;
            display: flex; align-items: center; gap: 5px;
        }
        .nav-links a i { font-size: 0.72rem; opacity: 0.7; }
        .nav-links a:hover { color: var(--accent); background: var(--accent-dim); }

        /* ── LAYOUT ── */
        .page { max-width: 1280px; margin: 0 auto; padding: 88px 40px 80px; }
        section { margin-bottom: 56px; scroll-margin-top: 80px; }

        /* ── HERO ── */
        .hero {
            position: relative; padding: 72px 64px 64px;
            border-radius: var(--radius-xl);
            background: linear-gradient(135deg, #fff 0%, #fdf0f5 45%, #f5eaff 100%);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-lg);
            overflow: hidden; margin-bottom: 56px;
        }
        .hero::after {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
            background: linear-gradient(90deg, var(--accent) 0%, var(--violet) 100%);
        }
        .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
        .hero-eyebrow {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 0.70rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
            color: var(--accent); padding: 5px 14px;
            border: 1px solid var(--border-strong); border-radius: 999px;
            background: var(--accent-dim); margin-bottom: 20px;
        }
        .hero h1 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 3.6rem; font-weight: 800; line-height: 1.06;
            letter-spacing: -0.02em; margin-bottom: 18px; color: var(--text);
        }
        .hero h1 .accent {
            background: linear-gradient(130deg, var(--accent) 0%, var(--violet) 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .hero-subtitle { font-size: 1.08rem; color: var(--text-secondary); max-width: 520px; line-height: 1.75; }
        .hero-panel {
            background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
            padding: 28px; box-shadow: var(--shadow-sm);
        }
        .hero-panel-label {
            font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
            color: var(--text-muted); margin-bottom: 18px; padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }
        .hero-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .hero-metric {
            padding: 14px; background: var(--bg-muted); border: 1px solid var(--border);
            border-radius: var(--radius-md);
        }
        .hero-metric-val {
            font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem;
            font-weight: 700; color: var(--accent);
        }
        .hero-metric-lbl {
            font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase;
            letter-spacing: 0.07em; margin-top: 3px;
        }

        /* ── HEADINGS ── */
        .section-heading {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 2.1rem; font-weight: 700; margin-bottom: 8px; line-height: 1.2;
            color: var(--text);
        }
        .section-heading::after {
            content: ''; display: block; width: 40px; height: 3px; margin-top: 14px;
            background: linear-gradient(90deg, var(--accent), var(--violet));
            border-radius: 2px;
        }
        .section-lead {
            font-size: 1.04rem; color: var(--text-secondary); max-width: 720px;
            margin: 20px 0 36px; line-height: 1.8;
        }
        h3 {
            font-family: 'DM Sans', sans-serif; font-size: 1.15rem; font-weight: 600;
            color: var(--violet); margin: 40px 0 14px; display: flex; align-items: center; gap: 8px;
        }
        h3 i { font-size: 0.95rem; }
        h4 { font-size: 1.0rem; font-weight: 600; color: var(--accent); margin: 24px 0 10px; }
        p { margin-bottom: 14px; color: var(--text-secondary); }
        strong { color: var(--text); font-weight: 600; }

        /* ── SURFACES ── */
        .panel {
            background: var(--bg-panel); border: 1px solid var(--border);
            border-radius: var(--radius-lg); padding: 48px;
            margin-bottom: 32px; box-shadow: var(--shadow-sm);
        }
        .card {
            background: var(--bg-panel); border: 1px solid var(--border);
            border-radius: var(--radius-md); padding: 28px;
            box-shadow: var(--shadow-sm);
            transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
        }
        .card:hover {
            border-color: var(--border-strong);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }
        .card-title { font-weight: 600; font-size: 1.0rem; color: var(--text); margin-bottom: 10px; }

        /* ── STATS ── */
        .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 28px 0; }
        .stat {
            text-align: center; padding: 28px 16px; background: var(--bg-panel);
            border: 1px solid var(--border); border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s;
        }
        .stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
        .stat-value {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 2.4rem; font-weight: 700; color: var(--accent);
        }
        .stat-label { font-size: 0.80rem; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

        /* ── TABLE ── */
        table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.92rem; border-radius: var(--radius-md); overflow: hidden; }
        th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--border); }
        th {
            font-weight: 600; color: var(--violet); font-size: 0.75rem;
            text-transform: uppercase; letter-spacing: 0.08em;
            background: var(--violet-dim);
        }
        td { color: var(--text-secondary); }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background: var(--accent-dim); }

        /* ── LISTS ── */
        ul, ol { margin: 14px 0; padding-left: 22px; color: var(--text-secondary); }
        li { margin: 7px 0; padding-left: 3px; }
        .check-list { list-style: none; padding: 0; }
        .check-list li {
            position: relative; padding: 10px 0 10px 30px;
            border-bottom: 1px solid var(--border); color: var(--text-secondary);
        }
        .check-list li::before {
            content: '✓'; position: absolute; left: 0; top: 10px;
            color: var(--success); font-weight: 700; font-size: 0.9rem;
        }

        /* ── CALLOUTS ── */
        .callout { padding: 20px 24px; border-radius: var(--radius-md); margin: 20px 0; border-left: 3px solid; }
        .callout.info { background: var(--accent-dim); border-color: var(--accent); }
        .callout.danger { background: var(--danger-dim); border-color: var(--danger); }
        .callout.ice { background: var(--violet-dim); border-color: var(--violet); }
        .callout.gold { background: var(--violet-dim); border-color: var(--violet-light); }
        .callout strong { color: var(--text); }
        .callout p { margin-bottom: 8px; font-size: 0.95rem; }

        /* ── GRIDS ── */
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 20px 0; }
        .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; }

        /* ── CODE ── */
        pre {
            background: #1a0c1e; border: 1px solid var(--border); border-radius: var(--radius-md);
            padding: 22px; overflow-x: auto; margin: 18px 0;
            font-family: 'JetBrains Mono', monospace; font-size: 0.80rem; line-height: 1.7; color: #f0c8d8;
        }
        code { font-family: 'JetBrains Mono', monospace; font-size: 0.88em; }

        /* ── TIMELINE ── */
        .timeline { position: relative; padding-left: 36px; margin: 28px 0; }
        .timeline::before {
            content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px;
            background: linear-gradient(180deg, var(--accent), var(--violet)); border-radius: 2px;
        }
        .tl-item { position: relative; margin-bottom: 32px; }
        .tl-item::before {
            content: ''; position: absolute; left: -33px; top: 6px; width: 11px; height: 11px;
            border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-page);
            box-shadow: 0 0 0 2px var(--accent);
        }
        .tl-title { font-weight: 600; font-size: 1.05rem; color: var(--text); margin-bottom: 6px; }

        /* ── CANISTER REF ── */
        .ref-layout { display: grid; grid-template-columns: 180px 1fr; gap: 40px; align-items: start; margin: 28px 0; }
        .ref-canister {
            position: relative; width: 74px; height: 260px; margin: 0 auto; border-radius: 18px;
            background: linear-gradient(180deg, rgba(181,34,79,0.08) 0%, rgba(107,33,168,0.10) 50%, rgba(181,34,79,0.05) 100%);
            border: 1.5px solid var(--border); box-shadow: var(--shadow-md);
        }
        .ref-canister::before {
            content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
            width: 32px; height: 10px; border-radius: 999px;
            background: linear-gradient(180deg, #c0d0e8, #7891b0);
        }
        .ref-canister::after {
            content: 'O₂ 12 g'; position: absolute; top: 34px; left: 0; right: 0; text-align: center;
            font-size: 0.52rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text-muted);
        }
        .ref-dim { position: absolute; font-size: 0.72rem; font-weight: 600; color: var(--accent); }
        .ref-dim.h { right: -52px; top: 50%; transform: translateY(-50%) rotate(90deg); white-space: nowrap; }
        .ref-dim.w { bottom: -22px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

        /* ── CUTAWAY ── */
        .cutaway-layout { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; margin: 28px 0; }
        .cutaway-device {
            position: relative; width: 220px; height: 460px; margin: 0 auto; border-radius: 36px;
            background: linear-gradient(180deg, #2a1540, #371d52);
            border: 1.5px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden;
        }
        .cutaway-part {
            position: absolute; left: 26px; width: 76px; border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center;
            text-align: center; font-size: 0.62rem; font-weight: 500; line-height: 1.3; padding: 7px; z-index: 2;
        }
        .cutaway-part.screen { top: 48px; height: 56px; background: rgba(7,16,32,0.90); color: #b3d8ff; }
        .cutaway-part.pcb { top: 120px; height: 96px; background: rgba(36,100,80,0.60); color: #d0ffe6; }
        .cutaway-part.batt { top: 232px; height: 74px; background: rgba(100,80,30,0.55); color: #ffe9b7; }
        .cutaway-part.air { top: 322px; height: 60px; background: rgba(60,80,130,0.55); color: #d0e4ff; }
        .cutaway-canister {
            position: absolute; top: 42px; right: 20px; width: 66px; height: 300px; border-radius: 24px;
            background: linear-gradient(180deg, rgba(181,34,79,0.15), rgba(107,33,168,0.12), rgba(181,34,79,0.06));
            border: 1px solid rgba(255,255,255,0.12); z-index: 2;
        }
        .cutaway-hatch {
            position: absolute; left: 16px; right: 16px; bottom: 14px; height: 52px; border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.52rem; color: rgba(255,255,255,0.45); letter-spacing: 0.14em; z-index: 3;
        }
        .callout-stack { display: grid; gap: 10px; }
        .callout-card {
            padding: 14px 18px; background: var(--bg-panel); border: 1px solid var(--border);
            border-radius: var(--radius-md); font-size: 0.90rem; box-shadow: var(--shadow-sm);
        }
        .callout-card strong { color: var(--accent); }

        /* ── FOOTER ── */
        footer {
            text-align: center; padding: 52px 0 40px;
            border-top: 1px solid var(--border); margin-top: 48px;
            background: linear-gradient(180deg, transparent, var(--bg-muted));
        }
        footer p { color: var(--text-muted); font-size: 0.84rem; }

        /* ── RESPONSIVE ── */
        @media (max-width: 960px) {
            .hero-grid { grid-template-columns: 1fr; }
            .hero h1 { font-size: 2.6rem; }
            .hero { padding: 44px 32px; }
            .grid-2, .ref-layout, .cutaway-layout { grid-template-columns: 1fr; }
            .nav-links { display: none; }
            .section-heading { font-size: 1.75rem; }
            .page { padding: 80px 20px 48px; }
            .panel { padding: 28px 20px; }
        }
        @media print {
            nav { display: none; }
            body { background: white; color: #111; }
            .panel { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
        }