:root {
            color-scheme: dark;
            --paper: #0b0711;
            --paper-deep: #150d1f;
            --ink: #f8efff;
            --muted: #ccb8ee;
            --line: rgba(194, 132, 255, .22);
            --moss: #a78bfa;
            --ember: #ff7067;
            --sky: #e8cf9a;
            --sun: #e8cf9a;
            --display: Georgia, "Times New Roman", serif;
            --body: "Trebuchet MS", "Segoe UI", sans-serif;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            background:
                radial-gradient(1100px 620px at 50% -10%, #2a1442 0%, transparent 62%),
                linear-gradient(180deg, #140b1f 0%, #0b0711 100%);
            background-attachment: fixed;
            color: var(--ink);
            font-family: var(--body);
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; }
        button, input { font: inherit; }
        button { color: inherit; }
        .wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
        .site-header { width: min(1160px, calc(100% - 48px)); min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-inline: auto; border-bottom: 1px solid var(--line); }
        .site-header .wordmark { color: var(--ink); font-family: var(--display); font-size: 18px; font-weight: 700; text-decoration: none; }
        .site-header .wordmark span { color: var(--ember); }
        .header-note { color: var(--muted); font-family: "Courier New", monospace; font-size: 10px; }
        .intro, .projects { width: min(900px, calc(100% - 48px)); margin-inline: auto; }
        .intro { padding: 48px 0 25px; }
        .legal-back { display: inline-block; margin-bottom: 28px; color: var(--muted); font-size: 12px; text-decoration: none; }
        .legal-back:hover { color: var(--ink); }
        .intro h1 { max-width: 760px; margin: 14px 0 12px; font-size: 56px; line-height: 1.05; }
        .intro-copy { max-width: 620px; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
        .projects { padding-bottom: 72px; }
        .project { border: 1px solid var(--line); background: rgba(21, 13, 31, .72); }
        .project-copy { max-width: 760px; padding: 30px; }
        .project-copy h2 { margin: 27px 0 9px; font-family: var(--display); font-size: 25px; }
        .project-copy h2:first-of-type { margin-top: 12px; }
        .project-copy p { color: var(--muted); font-size: 13px; line-height: 1.8; }
        .project-copy a { color: var(--sky); }
        .demo-note {
            min-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 16px;
            background: #08040d;
            color: var(--ink);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .06em;
            text-align: center;
        }
        .demo-note span { color: var(--sun); margin-right: 8px; }
        .topbar { border-bottom: 1px solid var(--line); background: rgba(11, 8, 18, .88); }
        .nav {
            min-height: 72px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
        .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
        .brand-mark {
            width: 35px;
            aspect-ratio: 1;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: linear-gradient(145deg, #7c3aed, #4c2a72);
            color: #fff;
            font-size: 19px;
            font-weight: 700;
            box-shadow: 0 0 0 1px var(--line), 0 0 22px rgba(140, 70, 220, .3);
        }
        .brand-name { font-family: var(--display); font-size: 21px; line-height: .9; text-transform: uppercase; }
        .brand-sub { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .17em; }
        .nav-links { display: flex; align-items: center; gap: 30px; }
        .nav-links a { color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; }
        .nav-links a:hover { color: var(--ember); }
        .nav-cta, .button {
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0 17px;
            border: 1px solid var(--ink);
            background: linear-gradient(180deg, #7c3aed, #5b21b6);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
            transition: transform .18s ease, filter .18s ease;
            cursor: pointer;
        }
        .nav-cta:hover, .button:hover { transform: translateY(-2px); filter: brightness(1.15); }
        .hero {
            min-height: 485px;
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            align-items: center;
            gap: 30px;
            padding-block: 42px 48px;
        }
        .hero-copy { position: relative; z-index: 1; padding-block: 20px; }
        .eyebrow, .section-kicker {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--moss);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
        }
        .eyebrow::before, .section-kicker::before { width: 24px; height: 2px; background: currentColor; content: ""; }
        h1, h2, h3, p { margin-top: 0; }
        h1 {
            max-width: 560px;
            margin: 17px 0 17px;
            font-family: var(--display);
            font-size: 94px;
            font-weight: 800;
            letter-spacing: 0;
            line-height: .92;
        }
        h1 span { color: var(--ember); }
        .hero-copy > p { max-width: 380px; margin-bottom: 25px; color: var(--muted); font-size: 14px; line-height: 1.75; }
        .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
        .button-secondary { border-color: var(--line); background: rgba(21, 13, 31, .8); color: var(--ink); }
        .button-secondary:hover { background: #211534; }
        .hero-footnote { display: flex; align-items: center; gap: 8px; margin-top: 21px; color: var(--muted); font-size: 10px; }
        .hero-footnote b { color: var(--ink); font-size: 11px; }
        .hero-art {
            position: relative;
            min-height: 370px;
            overflow: hidden;
            isolation: isolate;
            border: 1px solid var(--line);
            background: #10091a;
            box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
        }
        .hero-art-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 54%;
        }
        .hero-art::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,7,17,.34), transparent 58%), linear-gradient(0deg, rgba(8,4,13,.76), transparent 34%); content: ""; }
        .art-label {
            position: absolute;
            right: 14px;
            bottom: 14px;
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 9px 12px;
            z-index: 1;
            border: 1px solid rgba(232,207,154,.48);
            background: rgba(8,4,13,.82);
            color: var(--ink);
            font-size: 10px;
            font-weight: 600;
        }
        .art-label span { color: var(--sun); font-size: 15px; }
        .ticker { overflow: hidden; border-block: 1px solid var(--line); background: rgba(21,13,31,.82); }
        .ticker-inner { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
        .ticker-item { display: flex; align-items: center; gap: 9px; color: var(--muted); font-family: "Courier New", monospace; font-size: 10px; font-weight: 600; white-space: nowrap; }
        .ticker-item b { color: var(--ember); font-size: 15px; }
        .shop-section { padding: 76px 0 82px; }
        .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
        .section-head h2 { margin: 10px 0 0; font-family: var(--display); font-size: 46px; line-height: 1; }
        .section-head > p { max-width: 290px; margin: 0 0 3px; color: var(--muted); font-size: 12px; line-height: 1.7; }
        .rank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
        .rank-card { position: relative; display: flex; flex-direction: column; min-height: 378px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, #211534, #1a1028); box-shadow: 0 14px 34px rgba(0,0,0,.28); transition: transform .18s ease, border-color .18s ease; }
        .rank-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.38); }
        .rank-card.featured { border-color: rgba(255,112,103,.65); background: linear-gradient(180deg, #2a1740, #1a1028); }
        .rank-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; }
        .rank-number { color: var(--muted); font-family: "Courier New", monospace; font-size: 10px; }
        .rank-tag { padding: 5px 8px; border: 1px solid var(--line); background: rgba(124,58,237,.14); color: var(--ink); font-family: "Courier New", monospace; font-size: 9px; font-weight: 700; text-transform: uppercase; }
        .rank-card.featured .rank-tag { border-color: transparent; background: var(--ember); color: #160d18; }
        .rank-card h3 { margin: 23px 0 4px; font-family: var(--display); font-size: 34px; line-height: 1.1; }
        .rank-card[data-tone="moss"] h3 { color: #c4a9ff; }
        .rank-card[data-tone="ember"] h3 { color: var(--ember); }
        .rank-card[data-tone="sky"] h3 { color: var(--sky); }
        .rank-description { min-height: 39px; margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.6; }
        .price { display: flex; align-items: baseline; gap: 5px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
        .price strong { color: var(--sky); font-family: var(--display); font-size: 40px; line-height: 1; }
        .price span { color: var(--muted); font-size: 10px; }
        .feature-list { display: grid; gap: 12px; margin: 17px 0 22px; padding: 0; list-style: none; }
        .feature-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 11px; line-height: 1.4; }
        .feature-list li::before { flex: 0 0 auto; width: 15px; height: 15px; display: grid; place-items: center; background: rgba(124,58,237,.2); color: #c4a9ff; content: "+"; font-size: 12px; font-weight: 700; }
        .rank-card .button { width: 100%; margin-top: auto; }
        .rank-card.featured .button { border-color: var(--ember); background: linear-gradient(180deg, #ff7067, #d93956); color: #180c16; }
        .permanent-note { margin: 13px 0 0; color: var(--muted); font-size: 9px; text-align: center; }
        .how-section { padding: 42px 0; border-block: 1px solid var(--line); background: rgba(8,4,13,.72); color: var(--ink); }
        .how-grid { display: grid; grid-template-columns: .9fr 2.1fr; gap: 45px; align-items: start; }
        .how-section .section-kicker { color: var(--sun); }
        .how-section h2 { max-width: 250px; margin: 11px 0 0; font-family: var(--display); font-size: 39px; line-height: 1; }
        .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; }
        .step { padding-top: 7px; border-top: 1px solid var(--line); }
        .step b { color: var(--sun); font-family: var(--display); font-size: 19px; }
        .step h3 { margin: 13px 0 6px; font-size: 12px; }
        .step p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
        .faq-section { padding: 68px 0; }
        .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 65px; }
        .faq-grid h2 { margin: 11px 0 0; font-family: var(--display); font-size: 43px; line-height: 1; }
        .faq-list details { border-top: 1px solid var(--line); }
        .faq-list details:last-child { border-bottom: 1px solid var(--line); }
        .faq-list summary { padding: 16px 0; font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
        .faq-list summary::-webkit-details-marker { display: none; }
        .faq-list summary::after { float: right; color: var(--ember); content: "+"; font-size: 17px; line-height: 12px; }
        .faq-list details[open] summary::after { content: "-"; }
        .faq-list p { max-width: 560px; margin: -3px 0 17px; color: var(--muted); font-size: 11px; line-height: 1.7; }
        footer { padding: 19px 0; border-top: 1px solid var(--line); background: rgba(8,7,12,.8); }
        .footer-inner { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-family: "Courier New", monospace; font-size: 10px; }
        .footer-inner a { text-decoration: none; }
        .footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
        .modal-backdrop { position: fixed; z-index: 5; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(13,21,17,.68); }
        .modal-backdrop.is-open { display: grid; }
        .modal { position: relative; width: min(440px, 100%); padding: 27px; border: 1px solid var(--line); background: #1a1028; box-shadow: 0 20px 70px rgba(0,0,0,.55); }
        .modal-close { position: absolute; top: 12px; right: 13px; width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; }
        .modal .section-kicker { margin-bottom: 14px; }
        .modal h2 { margin: 0 40px 7px 0; font-family: var(--display); font-size: 36px; line-height: 1; text-transform: uppercase; }
        .modal-copy { margin: 0 0 21px; color: var(--muted); font-size: 11px; line-height: 1.65; }
        .modal-order { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-block: 1px solid var(--line); font-size: 12px; font-weight: 700; }
        .modal-order strong { color: var(--ember); }
        .modal label { display: block; margin: 18px 0 7px; font-size: 10px; font-weight: 700; }
        .modal input { width: 100%; height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: #120a1c; color: var(--ink); font-size: 12px; }
        .modal input:focus { outline: 2px solid var(--sky); outline-offset: 1px; }
        .modal .button { width: 100%; margin-top: 14px; }
        .modal-result { display: none; margin-top: 14px; padding: 12px; border-left: 3px solid var(--ember); background: rgba(255,112,103,.12); color: var(--ink); font-size: 11px; line-height: 1.6; }
        .modal-result.is-visible { display: block; }
        .modal-privacy { margin: 9px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
        @media (max-width: 780px) {
            .wrap { width: min(100% - 36px, 560px); }
            .nav { min-height: 64px; }
            .nav-links { gap: 16px; }
            .nav-links a:first-child { display: none; }
            .nav-cta { min-height: 38px; padding-inline: 12px; font-size: 10px; }
            .hero { min-height: auto; grid-template-columns: 1fr; gap: 23px; padding-block: 38px 34px; }
            h1 { max-width: 500px; font-size: 76px; }
            .hero-copy > p { max-width: 460px; }
            .hero-art { min-height: 290px; }
            .shop-section { padding: 54px 0 58px; }
            .rank-grid { gap: 10px; }
            .rank-card { min-height: 385px; padding: 16px; }
            .rank-card h3 { font-size: 31px; }
            .price strong { font-size: 36px; }
            .how-grid { grid-template-columns: 1fr; gap: 27px; }
            .how-section h2 { max-width: none; }
            .faq-grid { gap: 35px; }
        }
        @media (max-width: 560px) {
            .wrap { width: calc(100% - 32px); }
            .site-header, .intro, .projects { width: calc(100% - 32px); }
            .site-header { min-height: 62px; }
            .intro { padding-top: 32px; }
            .intro h1 { font-size: 42px; }
            .project-copy { padding: 22px; }
            .demo-note { font-size: 9px; }
            .brand-name { font-size: 18px; }
            .brand-mark { width: 31px; }
            .nav-links { display: none; }
            .nav-cta { width: 38px; overflow: hidden; padding: 0; font-size: 0; }
            .nav-cta::after { content: "+"; font-size: 19px; }
            .hero { padding-top: 31px; }
            h1 { margin-top: 14px; font-size: 65px; }
            .hero-copy > p { font-size: 12px; }
            .hero-art { min-height: 250px; }
            .sun-disc { width: 67px; }
            .section-head { display: block; }
            .section-head h2 { font-size: 43px; }
            .section-head > p { margin-top: 12px; }
            .rank-grid { grid-template-columns: 1fr; gap: 12px; }
            .rank-card { min-height: 0; padding: 20px; }
            .rank-card h3 { margin-top: 17px; font-size: 35px; }
            .rank-description { min-height: 0; margin-bottom: 14px; }
            .feature-list { grid-template-columns: 1fr 1fr; gap: 10px; margin-block: 15px 18px; }
            .feature-list li { font-size: 10px; }
            .steps { grid-template-columns: 1fr; gap: 16px; }
            .step { display: grid; grid-template-columns: 35px 1fr; column-gap: 10px; }
            .step b { grid-row: span 2; }
            .step h3 { margin: 2px 0 5px; }
            .faq-grid { grid-template-columns: 1fr; gap: 23px; }
            .faq-grid h2 { font-size: 39px; }
            .footer-inner { flex-wrap: wrap; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
        }