a#bubbleTopLink, ul#bubbleTree {
        --primary-hue: 20;
        --primary-saturation: 100%;
        --primary-lightness: 49%;
        --secondary-hue: 20;
        --secondary-saturation: 0%;
        --secondary-lightness: 30%;
        --alpha-value: 0.6; /* Opacity value (0.0 to 1.0) */
        --portrait-child-peek: 0.15; /* portrait gutter (0-1 of width) so children peek; shared with navigate() */
        --font-family: 'Inter', Arial, Helvetica, sans-serif;
        --base-font-size: 5cqh;
        --h1-font-size: 10cqh;
        --heading-font-size: 8cqh;
        --subheading-font-size: 6cqh;
    }
    
    a#bubbleTopLink {
        display: block;
        position: fixed;
        top:0;
        left:0;
        height:8vh;
        width:8vh;
        border-radius: 50%;
        background-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), var(--alpha-value));
        background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><path fill="%23ffffff" d="m 15.495797,17.978817 a 1,1 0 0 0 1.414,-1.414 l -6,-6 a 1,1 0 0 0 -1.4139999,0 l -6.0000001,6 a 1,1 0 0 0 1.414,1.414 l 5.293,-5.293 z m 0,-7.9999999 a 1,1 0 1 0 1.414,-1.414 l -6,-6.0000004 a 1,1 0 0 0 -1.4139999,0 L 3.495797,8.5648171 a 1,1 0 0 0 1.414,1.414 l 5.293,-5.2930004 z" id="path1"/></svg>');
        background-repeat: no-repeat;
        background-position: center 44%;
        background-size: 60%;
        z-index: 100;
        transition: display 0.7s ease, opacity 0.7s ease;
        transition-behavior: allow-discrete;
        opacity:0.8;
    }
    
    a#bubbleTopLink:hover {
        background-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);
    }

    a#bubbleTopLink.hidden {
        display:none;
        opacity: 0;
    }

    /* portrait container can exceed viewport width (off-screen part is just gutter); clip it */
    html { overflow-x: hidden; }

    ul#bubbleTree {
        position:relative;
        list-style-type: none;
        padding-left: 0;
        transition: transform 0.7s ease, translate 0.7s ease, scale 0.7s ease;
        pointer-events:none;
        transform-origin: top left;
        width:92vh;
        height:92vh;
        margin-left:0;
        font-family: var(--font-family);
        box-sizing: border-box;
        color: white;
    }

    @media (orientation: landscape) {
    /* CSS for landscape orientation (width > height) */
    }

    @media (orientation: portrait) {
    /* CSS for portrait orientation (height > width) */
    /* fit all top-level bubbles: each fills (1-peek) of width, capped to viewport height.
       N from --top-node-count (JS). */
        ul#bubbleTree {
            width:  min(calc(var(--top-node-count, 1) * (1 - var(--portrait-child-peek)) * 100vw), 100vh);
            height: min(calc(var(--top-node-count, 1) * (1 - var(--portrait-child-peek)) * 100vw), 100vh);
        }
    }

    ul#bubbleTree, ul#bubbleTree * {
        box-sizing: border-box;
    }

    ul#bubbleTree {
        
        ul {
            list-style-type: none;
            position:absolute;
            top:0;
            left:0;
            height:100%;
            width:100%;
            padding-left: 0;
            pointer-events:none;
        }
        
        > li:first-of-type {
            background-color: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), var(--alpha-value));
        }

        li > * {
            padding:0 12% 0 13%;
            font-size:var(--base-font-size);
        }
    
        li:has(ul) > * {
            padding-right:19%;
        }
    
        li > *:not(a) {
            pointer-events:none;
        }
    }

    ul#bubbleTree li a, ul#bubbleTree li a img {
        pointer-events:auto;
    }

    ul#bubbleTree li {
        position:absolute;
        left:80%;
        border-radius:50%; 
        background-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), var(--alpha-value));
        /* background-color: hsla(20, 100%, 49%, 50%); */
        pointer-events: auto;
        container-type:size;
        background-size: cover; /* this is usually what's wanted when someone sets background-image */
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    ul#bubbleTree ul li {
        cursor: zoom-in;
        /* transform: translate(50%, 0); */
        /* transform: translate(-20cqw, 0); */
    }

    ul#bubbleTree > li {
        left:0;
    }
    
    ul#bubbleTree li:not(:has(ul)) { /* leaf nodes: secondary color */
        background-color: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), var(--alpha-value));
    }

    ul#bubbleTree li:not(:has(ul)):hover { /* leaf nodes: secondary, full opacity */
        background-color: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
    }

    ul#bubbleTree li:not(:has(ul)) * { /* children of leaf nodes */
        /* pointer-events:auto; */
    }

    ul#bubbleTree li > :first-child {
        margin-top:-0.25em;
    }
    
    ul#bubbleTree a {
        color: inherit;
        font-size: inherit;
        text-decoration: none;
        /* border: 2ex solid white; */
        /* background-color: hsla(var(--primary-hue), var(--primary-saturation), 100%, 0.2); */
        font-weight: bold;
    }

    ul#bubbleTree a:not(:has(img))::before {
        content: "[";
    }
    
    ul#bubbleTree a:not(:has(img))::after {
        content: "]";
    }

    ul#bubbleTree a:hover {
        background-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 0.5);
    }
    


    /* ul#bubbleTree li > p:hover {
        background-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);
        text-decoration: underline;
    } */

    ul#bubbleTree p {
        font-size:var(--base-font-size);
        font-size-adjust: none;
        margin:0.5cqh 0 3cqh 0;
        /* line-height: var(--base-font-size); */
        /* line-height: 1; */
        margin-top:-0.2em;
        flex:none;
        text-decoration-thickness: 0.1em;
        /* display:block; */
        /* text-decoration: none; */
        /* border:0.01cqw dotted yellow; */
        text-align: left;
        text-align-last: left;
        display:block;
    }
    
    ul#bubbleTree p.headingSized {
        font-size: var(--heading-font-size);
        font-weight: bold;
    }

    ul#bubbleTree p.subheadingSized {
        font-size: var(--subheading-font-size);
        font-weight: bold;
        margin-bottom: 0.2em;
    }

    ul#bubbleTree h1, ul#bubbleTree h2, ul#bubbleTree h3, ul#bubbleTree h4, ul#bubbleTree h5, ul#bubbleTree h6 {
        margin:0 0 0.2cqh 0;
        /* line-height: 1.1; */
    }

    ul#bubbleTree h1 {
        font-size: var(--h1-font-size);
        /* line-height: 1; */
        margin-bottom: 2cqh;
    }
    
    ul#bubbleTree h2 {
        font-size: var(--heading-font-size);
        /* line-height: 1; */
        margin-bottom: 2cqh;
    }
    
    ul#bubbleTree h3, ul#bubbleTree h4 {
        font-size: var(--heading-font-size);
        /* line-height: 1; */
        margin-bottom: 2cqh;
    }
    
    ul#bubbleTree p.bullet1 {
        text-indent: 1em hanging;
        margin:0.2cqh 0 0.2cqh 0;
    }
    
    ul#bubbleTree p.bullet1::before {
        content: "\2022\00a0\00a0";
    }
    
    ul#bubbleTree p.bullet2 {
        text-indent: 1.5em hanging;
        margin:0.2cqh 0 0.2cqh 0;
    }
    
    ul#bubbleTree p.bullet2::before {
        content: "\00a0\00a0\25E6\00a0\00a0";
    }

    /* for vertical positioning based on number of siblings */
    /* you can easily expand for >5 siblings if you want, just add more pseudoclasses */
    /* first item, regardless of number of siblings */

    ul#bubbleTree {

        li:first-of-type {
            top:0;
        }

        /* one sibling */
        li:first-of-type:nth-last-of-type(1) {
        /* -or- li:only-of-type { */
            width: 100%;
            height: 100%;
        }

        /* two siblings */
        li:first-of-type:nth-last-of-type(2),
        li:first-of-type:nth-last-of-type(2) ~ li {
            width: 50%;
            height: 50%;
        }

        li:first-of-type:nth-last-of-type(2) ~ li:last-of-type {
            top:50%;
        }

        /* three siblings */
        li:first-of-type:nth-last-of-type(3),
        li:first-of-type:nth-last-of-type(3) ~ li {
            width: 33.333333%;
            height: 33.333333%;
        }

        li:first-of-type:nth-last-of-type(3) ~ li:nth-of-type(2) {
            top:33.333333%;
        }

        li:first-of-type:nth-last-of-type(3) ~ li:last-of-type {
            top:66.666667%;
        }

        /* four siblings */
        li:first-of-type:nth-last-of-type(4),
        li:first-of-type:nth-last-of-type(4) ~ li {
            width: 25%;
            height: 25%;
        }
        
        li:first-of-type:nth-last-of-type(4) ~ li:nth-of-type(2) {
            top: 25%;
        }
        
        li:first-of-type:nth-last-of-type(4) ~ li:nth-of-type(3) {
            top: 50%;
        }
        
        li:first-of-type:nth-last-of-type(4) ~ li:nth-of-type(4) {
            top: 75%;
        }

        /* five siblings */
        li:first-of-type:nth-last-of-type(5),
        li:first-of-type:nth-last-of-type(5) ~ li {
            width: 20%;
            height: 20%;
        }
        
        li:first-of-type:nth-last-of-type(5) ~ li:nth-of-type(2) {
            top: 20%;
        }
        
        li:first-of-type:nth-last-of-type(5) ~ li:nth-of-type(3) {
            top: 40%;
        }
        
        li:first-of-type:nth-last-of-type(5) ~ li:nth-of-type(4) {
            top: 60%;
        }
        
        li:first-of-type:nth-last-of-type(5) ~ li:nth-of-type(5) {
            top: 80%;
        }


        /* six siblings */
        li:first-of-type:nth-last-of-type(6),
        li:first-of-type:nth-last-of-type(6) ~ li {
            width: 16.66667%;
            height: 16.66667%;
        }
        
        li:first-of-type:nth-last-of-type(6) ~ li:nth-of-type(2) {
            top: 16.66667%;
        }
        
        li:first-of-type:nth-last-of-type(6) ~ li:nth-of-type(3) {
            top: 33.3333%;
        }
        
        li:first-of-type:nth-last-of-type(6) ~ li:nth-of-type(4) {
            top: 50%;
        }

        li:first-of-type:nth-last-of-type(6) ~ li:nth-of-type(5) {
            top: 66.66667%;
        }
        
        li:first-of-type:nth-last-of-type(6) ~ li:nth-of-type(6) {
            top: 83.33333%;
        }

    }