html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, 
sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
    border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
img { border: 0px; }
li { list-style-type: none; }

:root {
    /* Aritfact Red */
        --artifactRed: #ff0546; 
        --artifactRedLight: #ff363c;
        --artifactRedDark: #e6053f; 
        --artifactRedDark2: #cc0438;
        --linkBlue: #0069FF;
        --artifactNavy: var(--gray16);

        /* Primary */
        --opalRed1: #611616;
        --opalRed2: #881b1b;
        --opalRed3: #b92120;
        --opalRed4: #df2e2d;
        --opalRed5: #e36363;
        --opalRed6: #f3aaaa;
        --opalRed7: #fbe9e9;
        --opalRed8: #fcf4f4;

        --opalOrange1: #612f16;
        --opalOrange2: #883f1b;
        --opalOrange3: #b95320;
        --opalOrange4: #df682d;
        --opalOrange5: #e38e63;
        --opalOrange6: #f3c2aa;
        --opalOrange7: #fbefe9; 
        --opalOrange8: #fcf7f5;

        --opalYellow1: #5c4814;
        --opalYellow2: #8c6d1f;
        --opalYellow3: #caa53d;
        --opalYellow4: #f5ca67;
        --opalYellow5: #fae2a0;
        --opalYellow6: #fdf4d7;
        --opalYellow7: #fffef6; 

        --opalGreen1: #155239;
        --opalGreen2: #187841;
        --opalGreen3: #249d57;
        --opalGreen4: #39c173;
        --opalGreen5: #75d99e;
        --opalGreen6: #a9edc2;
        --opalGreen7: #e3fded; 
        --opalGreenCode: #cef2dc;
        --opalGreen8: #f5fdf8;

        --opalBlue1: #1e3c54;
        --opalBlue2: #1a4a72;
        --opalBlue3: #2268a3;
        --opalBlue4: #3183c9;
        --opalBlue5: #62a2d8;
        --opalBlue6: #aad5f6;
        --opalBlue7: #eef8fe;
        --opalBlue8: #f6fbfe;

        --opalPurple1: #3c1e54;
        --opalPurple2: #4a1a72;
        --opalPurple3: #6822a3;
        --opalPurple4: #8331c9;
        --opalPurple5: #a262d8;
        --opalPurple6: #f6aad5;
        --opalPurple7: #feecf8;

        --opalTeal1: #124446;
        --opalTeal2: #1b655e;
        --opalTeal3: #299187;
        --opalTeal4: #3caea3;
        --opalTeal5: #6dd7d2;
        --opalTeal6: #aaedeb;
        --opalTeal7: #e8ffff;       

        /* Gray */
        --white: #ffffff;
        --gray1: #f8f9fa;
        --gray2: #f6f7f8;
        --gray3: #eeeff0;
        --gray4: #e0e5ec; 
        --gray5: #d7d7de;
        --gray6: #c7c7d1;
        --gray7: #b6b6c4;
        --gray8: #a7a7b8;
        --gray9: #9898ab;
        --gray10: #89899e;
        --gray11: #7b7b91;
        --gray12: #707085;
        --gray13: #646478;
        --gray14: #58586b;
        --gray15: #4c4c5e;
        --gray16: #454253;
        --gray17: #383645;
        --gray18: #2d2b38;
        --gray19: #23212b;
        --gray20: #18171f;
        --gray21: #0e0d12;

        --moonDust1: #f7fafe;
        --moonDust2: #dee7f1;
        --moonDust3: #e1ebf5;
        --moonDust4: #ccdbeb;
        --moonDust5: #c1d1e2;

        --primaryTextColor: var(--gray20);
        --secondaryTextColor: var(--gray15);
        --focusColor: var(--gray4); 


    --primaryTextColor: #12151a;
    --focusColor: var(--gray4); 

    --primaryFont: Inter, Helvetica, Arial, Sans-serif;
    --primaryMonospaceFont: 'Source Code Pro', 'Courier New', Courier, monospace;
    --blockquoteFont: Georgia, Sans-serif;

        --fieldBoxShadow: 5px 5px 0px rgba(25,35,50,.055);

    /* Hacks */
    --xTwitterWidth: calc(100% + 7px);
    --xTwitterHeight: 600px;

    --pageBoxShadow: 0 0 30px rgba(0,0,0,.15), 6px 6px 0px rgba(25,35,50,.085);
    --itemBoxShadow: 4px 4px 0px rgba(25,35,50,.055);

}

/* ================== EVERYTHING is BOX-SIZED - position relative ================== */
* { position: relative; box-sizing: border-box; -webkit-text-size-adjust: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; }
/* ================== EVERYTHING is BOX-SIZED - position relative ================== */

* { -webkit-text-size-adjust: none; } /* Disable iOS gettin' in muh business */

body { height: 100%; font-size: 16px; font-family: Inter, Helvetica, Arial, sans-serif; line-height: 1.5em; margin: 0; color: #12151a; }
body.background { background-color: var(--white); background-color: var(--white);
    background-image: 
        radial-gradient(circle, rgba(0, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 90%),
        radial-gradient(circle, rgba(160, 0, 255, 0.05) 0%, rgba(255, 255, 255, 0) 90%),
        radial-gradient(circle, rgba(0, 180, 255, 0.05) 0%, rgba(255, 255, 255, 0) 90%);                
    background-size: 1000px 1000px, 1000px 1000px, 1000px 1000px;
    background-position: 0 0, 500px 500px, 750px 750px;
    background-repeat: repeat, repeat, repeat; }

/* Headings & Text */
h1, h2, h3, h4, h5, h6 { font-size: 16px; -webkit-font-smoothing: antialiased; 
    line-height: 1.2em; font-family: var(--primaryFont); letter-spacing: -.03em; font-weight: bold; }
h1 { font-size: 1.9em; margin-bottom: 10px; }
h2 { font-size: 1.775em; margin-bottom: 10px; }
h3 { font-size: 1.525em; margin-bottom: 7px; }
h4 { font-size: 1.4em; margin-bottom: 5px;}
h5 { font-size: 1.25em; }
h6 { font-size: 1.1em; }

/* Weights, Italics, Underlines, Strikes */
    strong, .strong, .weight700 { font-weight: bold; } 
    .lightweight, .weight300 { font-weight: 300; }
    .normalweight, .weight400 { font-weight: normal; }
    .midweight, .semiweight, .weight600 { font-weight: 600; }
    .heavyweight, .weight800 { font-weight: 800; }
    .blackweight, .weight900 { font-weight: 900; }

    em, .italic { font-style: italic; }
    .stritalic { font-weight: bold; font-style: italic; }
    .underline { text-decoration: underline; }
    .strike { text-decoration: line-through; }

/* Character Spacing & Casing */
    tt { font-family: var(--primaryMonospaceFont); }
    .tight { letter-spacing: -.03em; }
    .tight2 { letter-spacing: -.06em; }
    .upper { text-transform: uppercase; }
    .lower { text-transform: none; }
    code { padding: 1px 3px; border-radius: 1px; background-color: #cef2dc; font-family: var(--primaryMonospaceFont); }
    code.inline-code { font-family: var(--primaryMonospaceFont); background-color: rgba(77,203,255,.2); border-radius: 1px; padding: 1px 3px; font-size: 13px; color: #1e3c54;
        font-weight: normal; letter-spacing: .01em; margin: 0; }

/* Text Alignment */
    .center, .centertext { text-align: center; }
    .indent { margin-left: 30px; margin-bottom: 30px; }

/* Basic Paragraph Rules */
    p { line-height: 1.7em; margin-bottom: 30px; }
    p:last-child { margin-bottom: 0; }
    p.withlist { margin-bottom: 15px; }
    p.nobot, p.mclear { margin-bottom: 0; }

/* Lists */
    ul, ol { margin-bottom: 30px; }
    ul:last-child, ol:last-child { margin-bottom: 0; }
    ul li, ol li { margin-left: 30px; list-style-type: disc; margin-top: 5px; margin-bottom: 5px; }
    ol li { list-style-type: decimal; }

input[type="checkbox"] { transform: scale(1.2); margin: 2px 0 0 0; }

/* Code */
pre, .raw-html { background-color: var(--gray1); border: 1px solid var(--gray4); border-radius: 1px; padding: 7px 15px; font-family: var(--primaryMonospaceFont); width: 100%;
    word-wrap: break-word; white-space: pre-wrap; font-size: 14px; margin: 0; color: var(--primaryTextColor); }
pre code { background-color: unset; border-radius: unset; padding: unset; font-size: unset; color: unset; white-space: pre-wrap; }
    

/* Links */
    a, a:visited { color: var(--linkBlue); text-decoration: none; cursor: pointer;	transition:color .15s linear; outline: 3px solid transparent; }
    a:focus { outline: 3px solid var(--focusColor); }
    a:hover, a:visited:hover { color: var(--gray11); }
    a.link { color: var(--linkBlue); }
    a.link:hover { color: var(--gray11); }
    
        .iconright { padding-right: 20px; position: relative; }
        .iconright svg { position: absolute; top: -2px; right: 0; width: 20px; }
        button.button.iconright { padding-right: 25px; }
        button.button.iconright svg { top: 1px; right: 3px;}

        .iconleft { padding-left: 20px; position: relative; }
        .iconleft svg { position: absolute; top: -2px; left: 0; width: 20px; }
        button.button.iconleft { padding-left: 25px; }
        button.button.iconleft svg { top: 1px; left: 3px; }    

        a.button, button[type=submit], input[type=submit], button.button { font-family: var(--primaryFont); display: inline-flex; flex-shrink: 0;
            padding: 10px 20px; border-radius: 2px; font-size: 16px; line-height: 16px; text-align: center; margin: 0px; 
            border-width: 1px; border-style: solid; color: var(--primaryTextColor); background-color: var(--gray2); border-color: var(--gray7);
            font-weight: bold; align-items: center; gap: 5px; transition: .15s linear all; box-shadow: var(--fieldBoxShadow); }
        a.button:hover, button[type=submit]:hover, input[type=submit]:hover, button.button:hover { cursor: pointer;  transition: .15s linear all; background-color: var(--white); }	  

        /* Small Button */
            .button.small, a.button.small, button[type=submit].small, input[type=submit].small { font-size: 13px; padding: 4px 10px; font-weight: 500; }
            .button.withiconright.small { padding-right: 26px; }
            .button.withiconright.small svg { position: absolute; width: 16px; height: 16px; right: 5px; top: 4px; }

            button.copylink.button.small, a.copylink.button.small { padding-left: 25px; background-color: rgba(0,0,0,.05); 
                border-color: rgba(0,0,0,.15); opacity: 1; transition: .15s linear all; }
            button.copylink.button.small svg, a.copylink.button.small svg { width: 14px; position: absolute; top: 4px; left: 5px; }
            button.copylink.button.small:hover, a.copylink.button.small:hover { opacity: .7; transition: .15s linear all; }

a.made-with-opal { font-family: var(--primaryFont); display: inline-block; position: fixed; top: 5px; right: 10px; z-index: 1000;
    font-size: 13px; padding: 8px 12px; font-weight: 500; border-radius: 1px; line-height: 16px; text-align: center; margin: 0px; 
    border-width: 1px; border-style: solid; color: var(--primaryTextColor); background-color: rgba(0,0,0,.055); border-color: var(--gray7);
    font-weight: bold; display: inline-block;  transition: .15s linear all; display: flex; align-items: center; box-shadow: var(--fieldBoxShadow); }
a.made-with-opal:hover { cursor: pointer;  transition: .15s linear all; background-color: var(--white); color: var(--primaryTextColor); }

    .made-with-opal img { width: 70px; display: inline-block; margin-left: 5px; }
    .made-with-text { font-size: 13px; }

    .menu-shine-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background-color: rgba(255,255,255,.5); }
        .menu-shine { position: absolute;right: 0; width: 100px; height: 10px; bottom: auto; top: 0; background-color: var(--white); transform: rotate(-45deg); }
        .menu-shine.one { right: -15px; top: -5px; height: 7px; }
        .menu-shine.two { right: 20px; top: -5px; height: 20px; }
        .menu-shine.three { right: 35px; top: -5px; height: 3px; }
        .menu-shine.four { right: 75px; top: -5px; height: 8px; }

.container { width: 100%; max-width: 840px; padding: 100px 60px; margin: 0 auto; }
.container.binder { max-width: 100%; padding: 40px; }
.container.fill { max-width: 100%; }

    #published-content p, #published-content ul, #published-content ol, #published-content blockquote, #published-content pre { margin-bottom: 0; }
    .published-content-demo p, .published-content-demo ul, .published-content-demo ol, .published-content-demo blockquote, .published-content-demo pre { margin-bottom: 0; }

        a.logo { width: 160px; margin-bottom: 10px; display: block;}
        a.logo img { width: 100%; }

        h2.description { font-size: 1.3em; font-weight: 300; margin-top: 5px; }
        .content { margin-top: 30px; }

        a.item-link { padding-left: 20px; display: inline-block; font-weight: bold; text-decoration: underline; color: var(--primaryTextColor); visibility: hidden;  }
        a.item-link:hover { color: var(--gray11); }
        a.item-link svg { width: 20px; position: absolute; top: 3px; left: 0; }

        a.item-link.processed { visibility: visible; }

        figure { margin: 0; }
        figcaption { font-size: 13px; color: var(--gray14); }


        .link-info { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
        img.link-favicon { width: 40px; height: 40px; object-fit: cover; }

        figure.image-block { max-width: 100%; }
        figure.image-block img { max-width: 100%; }

        @media only screen and (max-width: 860px) {
            .container { padding: 60px 30px; }
        }

        table.editor-table { width: 100%; max-width: 100%;border: none; border-collapse: collapse; border-radius: 0; table-layout: fixed; }
        table.editor-table tr th { padding: 10px 10px; font-weight: bold; line-height: 14px; vertical-align: middle; text-align: left; border: 1px solid var(--icc4);
            background-color: var(--icc1); }
        table.editor-table tr { transition:background .15s linear; }
        table.editor-table tr td { background: #fff; border: 1px solid var(--gray4); padding: 6px 10px; line-height: 16px; vertical-align: middle; background: #fff; 
            line-height: 1.2em; transition:background .15s linear; word-wrap: break-word; }
        
        table.editor-table tr:nth-child(even) td{ background: var(--gray1); }

        .empty-block { height: 30px; }

        .video-block { width: 100%; height: 0; padding-top: 56.25%; position: relative; }
        .video-block video { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important; }

        audio, video, iframe { border: 1px solid var(--gray7); border-radius: 1px; box-shadow: var(--fieldBoxShadow); background-color: #f1f3f4; width: 100%; }
        .audio-info { font-size: 12px; color: var(--gray10); font-family: var(--primaryMonospaceFont); line-height: 1.1em; display: none; }

        .container.binder iframe, .container.binder video { border-left: 0; border-right: 0; }
        .container.binder iframe { border-bottom: 0; }
        iframe { height: 405px; }

        .column-list { display: flex; gap: 30px; }
            .column { min-width: 0; }

        .file-block { width: 100%; border: 1px solid var(--gray7); border-radius: 1px; box-shadow: var(--fieldBoxShadow); background-color: #f1f3f4; 
            display: flex; align-items: center; height: 34px; padding: 0 15px 0 10px; margin-bottom: 10px; }
        .file-block a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primaryTextColor); padding: 0 0 0 25px; width: 100%; display: block; 
            font-size: 15px; }
        .file-block a svg { width: 18px; height: 18px; position: absolute; top: 2px; left: 0; }

        .delimiter-block hr { border: 0; width: 100%; border-top: 1px solid var(--gray6); }

        .file-public-meta { font-size: 14px; color: var(--gray12); margin-top: 5px; margin-bottom: 25px; }
        .file-public-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 10px; background: var(--gray2);  margin-bottom: 30px;
            border: 1px solid var(--gray5); border-radius: 2px; color: var(--primaryTextColor); font-weight: 500; text-decoration: none; box-shadow: var(--fieldBoxShadow); }
        .file-public-link:hover { background: var(--gray3); color: var(--primaryTextColor); }
        .file-public-link svg { width: 20px; height: 20px; flex-shrink: 0; }

        .checklist-item { padding-left: 23px; margin-bottom: 7px; }
        .checklist-item:last-child { margin-bottom: 0; }
        .checklist-item input {  }
        .checklist-item input[type="checkbox"] { position: absolute; top: 4px; left: 0; cursor: pointer; }
        .checklist-item.nested { padding-left: 25px; }
        .checklist-item .checked-text { text-decoration: line-through; opacity: 0.6; }

        #published-content .indent-block, .published-content-demo .indent-block {
            margin-left: calc(var(--indent-level, 1) * 30px);
        }

/* Page View for Container Publish */
    button.close-button, button.close-button-dormant { width: 26px; height: 26px; font-size: 26px; cursor: pointer; border: unset; opacity: 1; color: inherit;
        transition: .15s linear all; position: absolute; top: 12px; right: 7px; z-index: 100; background-color: transparent; }
    button.close-button svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
    button.close-button:hover, button.close-button-dormant:hover { opacity: .5; }

    a.standalone { position: absolute; top: 10px; left: 10px; z-index: 10; }


    .pages-wrap { position: fixed; top: 44px; left: 0; right: 0; bottom: 10px; display: flex; gap: 0; width: auto; padding-right: 5px; z-index: 10;
        justify-content: center; }
        .page-wrap { height: 100%; max-width: 100%; width: 858px; position: relative; padding-left: 5px; padding-right: 5px; }
        .page-wrap.fill { width: unset; height: unset; position: fixed; top: 44px; right: 5px; bottom: 10px; left: 5px; z-index: 100; }

        .page-wrap.type-note { width: 500px; }
        .page-wrap.fill.type-note { width: auto; }
        
            .page { width: 100%; height: 100%; background-color: var(--white); border-radius: 1px; box-shadow: var(--pageBoxShadow); border: 1px solid rgba(0,0,0,.25); 
                overflow: hidden; }

                .page-sticky { position: absolute; top: 0; right: 6px; left: 0; height: 50px; background-color: var(--white); z-index: 15; transition: .15s linear all; }
                .page-wrap.scrolled .page-sticky, .panel-settings.scrolled .panel-sticky { box-shadow: 0 5px 0px rgba(25,35,50,.055); transition: .15s linear all; }

                .page-inside { overflow-y: auto; height: 100%; overflow-x: hidden; padding-top: 50px; display: flex; flex-direction: column; }
                .page-header { padding: 19px 67px 10px 67px; width: 100%; }
                    h1.page-title { width: 100%; font-size: 32px; font-weight: bold; letter-spacing: -.03em; padding: 0; border: 1px solid transparent; 
                    border-radius: 1px; margin-bottom: 0; }
                    .page-wrap.type-note .page-title:focus { border: 1px solid rgba(0,0,0,.15); }
                    .page-description { margin-top: 0; font-size: 18px; font-weight: 300; letter-spacing: -.03em; padding: 0; 
                        border: 1px solid transparent; border-radius: 1px; min-height: 26px; }

                    .dates-wrap { display: flex; gap: 30px; align-items: center; margin-top: 10px; margin-left: 5px; margin-bottom: 20px; }
                    .created-date-wrap, .modified-date-wrap { opacity: .6; display: flex; gap: 5px; font-family: var(--primaryMonospaceFont); line-height: 16px; }
                        .date-label { text-transform: uppercase; font-weight: 600; font-size: 11px; flex-shrink: 0; }
                        .date-value { font-size: 11px; }

                    .page-wrap.type-binder .dates-wrap { flex-direction: column; gap: 5px; align-items: unset; margin-bottom: 10px; }

                    .page-link-url-wrap { font-size: 14px; margin-bottom: 10px; min-height: 42px; display: flex; align-items: center; gap: 10px; overflow: hidden; max-width: 100%; padding-top: 4px; }

                        .link-url-buttons-wrap { display: flex; flex-direction: column; gap: 5px;  }

                        .page-item-link-favicon { width: 42px; height: 42px; flex-shrink: 0; }
                        .page-item-link-favicon img { width: 100%; height: 100%; object-fit: cover; }

                        .page-wrap.type-iframe .page-item-link-favicon { width: 24px; height: 24px; top: 45px; position: absolute; left: 15px; z-index: 15; }
                        .page-wrap.type-iframe .page-item-link-favicon img { width: 100%; height: 100%; object-fit: cover; }

                .page-content { padding: 0 67px 10px 67px; font-size: 15px; width: 100%; }
                .page-wrap.fill .page-content, .page-wrap.fill .page-header { margin: 0 auto; width: 100%; }


            /* Iframe Page */
                .page-wrap.type-iframe .page-sticky { display: flex; flex-direction: column; height: 80px; }

                    .page-iframe-url-wrap { width: 100%; padding: 10px 43px 10px 165px; display: flex; align-items: center; gap: 10px; }
                        .page-iframe-favicon { width: 24px; height: 24px; }
                        .page-iframe-favicon img { width: 100%; height: 100%; object-fit: cover; }
                    
                        a.page-view-link { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 14px; }
                        span.page-view-link { right: 4px; }

                    .page-wrap.type-iframe h1.page-title { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; height: auto;
                        border: 0; padding: 0 10px; }

                .page-wrap.type-iframe .page-inside { padding-top: 80px; overflow: hidden; }
                .page-wrap.type-iframe .iframe-wrap { width: 100%; height: 100%; border-top: 1px solid var(--gray4); }
                .page-wrap.type-iframe .iframe-wrap iframe { width: 100%; height: 100%; }

        
            /* File Page */
                .page-wrap.type-file .page-content { padding: 0; height: 100%; }
                .page-wrap.type-file.file-type-pdf .page-inside { overflow: hidden; }

                .page-wrap.type-file .file-page-icon { width: 30px; height: 30px; position: absolute; top: 25px; left: 30px; z-index: 15; }

                .page-wrap.type-file .file-content { width: 100%; }
                .page-wrap.type-file .file-content-image { text-align: center; }
                .page-wrap.type-file .file-content-image img { max-width: 100%; height: auto; border-radius: 1px; }
                .page-wrap.type-file .file-content-video { width: 100%; }
                .page-wrap.type-file .file-content-video video { width: 100%; max-height: 500px; border-radius: 1px; background-color: #000; }
                .page-wrap.type-file .file-content-audio { width: 100%; padding: 0 67px; }
                .page-wrap.type-file .file-content-audio audio { width: 100%; }
                .page-wrap.type-file.file-type-pdf .page-inside { overflow: hidden; }
                .page-wrap.type-file .file-content-pdf { width: 100%; height: 100%; min-height: 400px; display: flex; flex-direction: column; }
                .page-wrap.type-file .file-content-pdf .pdf-viewport { flex: 1; overflow: auto; position: relative; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
                .page-wrap.type-file .file-content-pdf .pdf-scale-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }
                .page-wrap.type-file .file-content-pdf iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid var(--gray6); border-radius: 1px; transform-origin: top left; }
                .pdf-zoom-controls { display: none; }
                @media (hover:none) {
                    .pdf-zoom-controls { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--gray2); border-bottom: 1px solid var(--gray6); flex-shrink: 0; }
                    .pdf-zoom-controls button { min-width: 32px; font-size: 16px; line-height: 1; padding: 0 8px; }
                    .pdf-zoom-level { font-size: 12px; min-width: 40px; text-align: center; color: var(--gray14); }
                    .page-wrap.type-file.file-type-pdf .page-inside { overflow: auto; }
                    .page-wrap.type-file .file-content-pdf .pdf-viewport { overflow: hidden; }
                    .page-wrap.type-file .file-content-pdf iframe { pointer-events: none; }
                }
                .page-wrap.type-file .file-content-text { width: 100%; }
                .page-wrap.type-file .file-content-text pre { border-left: 0; border-right: 0; border-radius: 0; padding: 10px 20px; }
                
                .page-wrap.type-file .file-content-document,
                .page-wrap.type-file .file-content-rtf { width: 100%; padding: 30px; border: 1px solid var(--gray6); border-radius: 0; background-color: var(--white);
                    min-height: 100px; border-left: 0; border-right: 0; }
                .page-wrap.type-file .file-content-document img { max-width: 100%; }
                .page-wrap.type-file .file-content-spreadsheet { width: 100%; overflow: auto; }
                .file-spreadsheet-tabs { display: flex; align-items: center; gap: 1px; padding: 0 30px; width: 100%; overflow-x: auto; }
                button.spreadsheet-tab { border: 1px solid var(--gray6); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom: 0;
                    background-color: var(--gray2); padding: 2px 8px; }
                button.spreadsheet-tab.active { background-color: var(--white); font-weight: 600; }
                .file-spreadsheet-render { width: 100%; overflow-x: auto; }
                .page-wrap.type-file .file-content-spreadsheet table { width: 100%; border-collapse: collapse; font-size: 12px; }
                .page-wrap.type-file .file-content-spreadsheet th,
                .page-wrap.type-file .file-content-spreadsheet td { border: 1px solid var(--gray5); padding: 4px 8px; text-align: left; white-space: nowrap; }
                .page-wrap.type-file .file-content-spreadsheet th { background-color: var(--gray3); font-weight: 600; position: sticky; top: 0; }
                .file-render-error { height: 30px; display: flex; align-items: center; gap: 5px; }
                .file-render-error a.button { display: inline-flex; align-items: center; gap: 4px; }
                .file-render-error a.button svg { width: 16px; height: 16px; }
                .file-content.file-content-document-unsupported { padding: 0 30px; }

                .page-wrap.type-file.file-type-zip { width: 500px; }
                .page-wrap.type-file .file-content-zip { padding: 20px 67px 20px 67px; }
                    .file-zip-box { display: flex; align-items: center; gap: 10px; line-height: 1.1em; }
                    .file-zip-box svg { width: 16px; height: 16px; }
                .page-wrap.type-file .file-content-zip .file-zip-icon { flex-shrink: 0; }
                .page-wrap.type-file .file-content-zip .file-zip-icon svg { width: 30px; height: 30px; color: var(--opalYellow2); }
                .page-wrap.type-file .file-content-zip a { color: var(--primaryColor); text-decoration: none; font-weight: 500; }
                .page-wrap.type-file .file-content-zip a:hover { }

                .page-wrap.type-file.file-type-unknown { width: 500px; }
                .page-wrap.type-file .file-content-unknown { padding: 20px; text-align: center; border: 1px solid var(--gray6); border-radius: 1px; 
                    background-color: var(--gray2); border-right: 0; border-left: 0; }
                .page-wrap.type-file .file-content-unknown .file-zip-icon { margin-bottom: 10px; }
                .page-wrap.type-file .file-content-unknown .file-zip-icon svg { width: 48px; height: 48px; color: var(--gray11); }
                .page-wrap.type-file .file-content-unknown a { color: var(--primaryColor); text-decoration: none; font-weight: 500; }
                .page-wrap.type-file .file-content-unknown a:hover { text-decoration: underline; }

                button.copy-text-content.copylink.small, button.download-file { background-color: var(--gray1); }
                button.copy-text-content.copylink.small:hover, button.download-file:hover { background-color: var(--white); }

                .page-content button.copy-text-content.copylink.small, .page-content button.download-file, .content button.copy-text-content.copylink.button.small
                    { position: absolute; z-index: 10; right: 10px; top: -13px; }

                .content .file-content { margin-top: 30px; }
                .content .file-content pre { box-shadow: var(--fieldBoxShadow); }

        .panel-shine-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
            .panel-shine-wrap { background: rgb(255,255,255); background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(248,249,250,1) 60%); }
                .panel-shine { position: absolute; bottom: 0; right: 0; width: 500px; height: 20px; background-color: var(--white); transform: rotate(-45deg); }
                .panel-shine.one { bottom: 100px; right: -100px; height: 60px; }
                .panel-shine.two { bottom: 100px; right: 0; height: 15px; }
                .panel-shine.three { bottom: -60px; right: -110px; height: 30px; }

/* Public Binder */

::-webkit-scrollbar { width: 6px; background: transparent; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.055); width: 6px; border-radius: 1px; }
::-webkit-scrollbar-track-piece { border: 0;  }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 1px; transition: .15s linear all; border: 1px solid rgba(255,255,255,.5); }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-button:hover { background: rgba(0,0,0,.25); transition: .15s linear all; }
    
    .page-wrap.type-binder { width: 300px; }
        .binder-wrap { width: 100%; height: 100%; box-shadow: var(--pageBoxShadow); border-radius: 1px; background-color: var(--gray1); 
            border: 1px solid rgba(0,0,0,.2); }

            .binder-header { z-index: 20; position: absolute; top: 0; right: 0; left: 0; }

                .binder-count { z-index: 10; display: flex; align-items: center; gap: 4px; width: 100%; justify-content: center; }
                    .binder-count-value { font-weight: 300; font-size: 18px; }
                    .binder-count-label { font-size: 14px; }                    

                .binder-title-wrap { width: 100%; padding: 5px 9px 5px 9px; display: flex; flex-direction: column; gap: 0; }
                    .page-wrap.type-binder .page-title { font-weight: bold; font-size: 18px; letter-spacing: -.03em; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap;
                        padding: 3px 5px; border: 1px solid transparent; border-radius: 1px; line-height: 1.3em; height: 28px; padding-right: 26px;  }
                    p.page-description { font-size: 13px; margin: 0; padding: 0; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap;
                        padding: 3px 5px; border: 1px solid transparent; border-radius: 1px; line-height: 1.3em;  font-weight: 300; }

            .binder-list-wrap { width: 100%; position: absolute; top: 88px; right: 0; bottom: 0; left: 0; overflow-y: auto; padding: 4px 15px 15px 15px; }
            .binder-list-wrap::-webkit-scrollbar-track { background: transparent; }
            .binder-list-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); }

            .page-wrap.type-binder.showing-timestamps .binder-list-wrap { top: 145px; }

                .binder-list { width: 100%; display: grid; grid-template-columns: 100%; gap: 4px; }
                .binder-list .item-in-binder { text-align: left; padding: 0; width: 100%; 
                    transition: .15s linear background-color; border: 1px solid rgba(0,0,0,.2); cursor: pointer; background-color: rgba(0,0,0,.02); border-radius: 1px; min-height: 32px;
                    box-shadow: var(--itemBoxShadow); }
                .binder-list .item-in-binder:hover { background-color: #fff; transition: .15s linear all; width: 100%; }    
                .binder-list .item-in-binder.active { background-color: var(--opalBlue7); transition: .15s linear all; flex-flow: nowrap; 
                    border: 1px solid var(--opalBlue4); color: var(--opalBlue1); }           

                    .iib-icon, .available-item-icon, .listed-item-icon, .active-share .shared-item-icon { position: absolute; top: 0; left: 0; bottom: 0; width: 32px; }
                    .iib-icon svg, .available-item-icon svg, .listed-item-icon svg, .active-share .shared-item-icon svg { width: 16px; position: absolute; left: 8px; top: 0; bottom: 0; 
                        margin: auto 0; padding: 0; }

                    .iib-title-wrap, .available-item-title-wrap, .listed-item-title-wrap, .active-share .shared-item-title-wrap { width: 100%; height: 100%; display: flex; 
                        align-items: center; padding: 5px 10px 4px 30px; gap: 8px; }

                        .iib-title, .available-item-title, .listed-item-title, .active-share .shared-item-title { width: 100%; text-overflow: ellipsis; pointer-events: none; font-size: 13px; 
                            font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2em; }

                        .listed-item-open { font-size: 10px; font-weight: 500; color: var(--gray10); position: absolute; top: 0; right: 0; bottom: 0; padding: 2px 5px; text-transform: uppercase;
                            display: flex; align-items: center; transition: .15s linear all; }
                        .listed-item-open:hover { background-color: rgba(0,0,0,.06); transition: .15s linear all; }

/* =============================================================================
   Fence publishing (Phase 3)
   -----------------------------------------------------------------------------
   Layout mirrors the in-app DOM: `#public-fence-canvas` is a position:fixed
   div that fills the full viewport (matching the app's #pixi-canvas-layer),
   and the toolbar + banners sit as separate position:fixed elements on top
   of it. `.pages-wrap` stays in the tree for page-view overlays (nested-binder
   + leaf page views) but is empty until the user opens one.
   ============================================================================= */

    body.fence { overflow: hidden; background: none; }
    body.fence .made-with-opal { z-index: 300; }

    .public-fence-canvas { position: fixed; inset: 0; z-index: 0; background: transparent; pointer-events: none; }
    .public-fence-canvas canvas { position: fixed; top: 0; left: 0; background: transparent !important; touch-action: none; pointer-events: all; }

        .menu-buttons.public-fence-menu { position: fixed; top: 5px; left: 0; right: 0; margin: 0 auto; height: 34px; border-radius: 1px; border: 1px solid var(--gray7); 
            z-index: 200; backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.25); box-shadow: var(--fieldBoxShadow); padding: 0; width: 93px; }
        .menu-buttons.public-fence-menu .menu-buttons-inside { width: 100%; height: 100%; display: flex; gap: 0; align-items: center; 
            background-color: rgba(255, 255, 255, 0.25); }
        .menu-buttons.public-fence-menu button.menu-button.button { height: 100%; padding: 5px 10px; font-size: 13px; font-weight: 500; background-color: transparent; 
            border: 0; display: flex; align-items: center; color: #18171f; cursor: pointer; transition: background-color 0.15s linear; 
            font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; box-shadow: unset; }
        .menu-buttons.public-fence-menu button.menu-button.button:hover { background-color: #ffffff; }
        .menu-buttons.public-fence-menu button.menu-button.button:focus { outline: none; }

        .menu-buttons.public-fence-menu button.reset-all.top { width: 42px; padding-left: 10px; flex-shrink: 0; }
        .menu-buttons.public-fence-menu button.reset-all.top svg { width: 16px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
    
        .menu-buttons.public-fence-menu button.reset-zoom.top { padding-left: 23px; flex-shrink: 0; }
        .menu-buttons.public-fence-menu button.reset-zoom.top svg { width: 16px; position: absolute; left: 5px; top: 8px; }
        .menu-buttons.public-fence-menu .reset-zoom-label { font-size: 13px; font-weight: 500; }

        .fence-truncation-banner { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 150; max-width: 560px; padding: 10px 16px; border-radius: 8px;
            background: #fff4d4; color: #5a4510; font-size: 13px; line-height: 1.4; text-align: center; box-shadow: 0 2px 10px rgba(25, 35, 50, 0.12); }

        .fence-empty-banner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; padding: 16px 28px; border-radius: 10px;
            background: rgba(255, 255, 255, 0.94); color: #6c7380; font-size: 14px; box-shadow: 0 2px 10px rgba(25, 35, 50, 0.08); pointer-events: none; }

        .fence-fallback { position: relative; z-index: 10; max-width: 720px; margin: 60px auto; padding: 32px; border-radius: 1px; box-shadow: var(--pageBoxShadow); 
            pointer-events: all; }
        .fence-fallback-title { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #12151a; }
        .fence-fallback-desc { margin: 0 0 16px; color: #444a55; font-size: 14px; }
        .fence-fallback-note { margin: 0 0 20px; color: #6c7380; font-size: 13px; }
        .fence-fallback-list { margin: 0; padding: 0; list-style: none; margin-top: 20px; }
        .fence-fallback-list li { list-style-type: none; margin: 0; padding: 5px 0; border-top: 1px solid var(--gray4); }
        .fence-fallback-list li:first-child { border-top: 0; }
        .fence-fallback-list a { color: #2c4bd8; text-decoration: none; font-weight: 500; }
        .fence-fallback-list a:hover { text-decoration: underline; }

        .page-wrap.type-binder.nested-binder .binder-header { position: relative; }
        .page-wrap.type-binder.nested-binder .binder-header .close-button.close-page { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; 
            border: 0; border-radius: 6px; background: transparent; color: #444a55; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
        .page-wrap.type-binder.nested-binder .binder-header .close-button.close-page:hover { background: rgba(25, 35, 50, 0.08); }

        body.fence .pages-wrap { z-index: 50; pointer-events: none; justify-content: flex-end; padding-right: 5px; }
        body.fence .pages-wrap > .page-wrap { pointer-events: all; z-index: 51; }

/* Phase 2 additions — binder publishing */

    button.item-in-binder { font: inherit; color: inherit; cursor: pointer; }

    .pages-wrap > .page-wrap { flex-shrink: 0; }

    .pages-wrap.overlay-mode > .page-wrap[data-child-slug] { position: fixed; top: 35px; right: 10px; bottom: 10px; left: auto; z-index: 200; 
        max-width: calc(100vw - 20px); height: auto; }

    .public-banner { padding: 10px 15px; margin: 0 0 10px; border-radius: 2px; font-size: 14px; line-height: 1.4em; }
    .public-banner.error { background-color: rgba(200, 40, 40, 0.1); border: 1px solid rgba(200, 40, 40, 0.3); color: #8a2020; }

    .file-spreadsheet-render table { width: auto; border-collapse: collapse; font-size: 12px; }
    .file-spreadsheet-render td, .file-spreadsheet-render th { border: 1px solid var(--gray5); padding: 4px 8px; white-space: nowrap; vertical-align: top; }
    .file-spreadsheet-render { max-height: calc(100vh - 250px); overflow: auto; }

    /* Copy-text button inside a file-content-text child */
    button.copy-text-content { display: inline-flex; align-items: center; gap: 5px; }


@media only screen and (max-width: 880px) {

    .pages-wrap, .panel-tasks { max-width: 100%; }
        .page-wrap.type-document, .page-wrap.type-link, .page-wrap.type-iframe { width: 100%; left: 0; right: 0; padding-left: 10px; max-width: 860px; }

    .menu-buttons.public-fence-menu { right: auto; left: 10px;}

}

@media only screen and (max-width: 650px) {

    .page-header { padding-left: 17px; padding-right: 17px; }
    .page-content { padding-left: 17px; padding-right: 17px; }

    /* iFrames & Links */
    .page-link-url-wrap { height: 64px; padding-top: 0; margin-bottom: 0; }

        .page-wrap.type-iframe .page-inside { padding-top: 105px; top: 12px; }
        .type-iframe .page-title, .page-wrap.type-iframe .page-item-link-favicon { top: 85px; }

    .type-iframe a.page-view-link { position: absolute; top: 40px; left: 4px; right: 4px;  }  

    /* File Item Types */
    .page-wrap.type-file .file-page-icon { left: 20px; }
    .page-wrap.type-file .page-title { padding-left: 40px; }

}