/* -*- outline-regexp: "/[*] --" -*- */

/* -- Setup -- */

* {
    box-sizing: border-box;
}

html, body, h1 {
    margin: 0;
    padding: 0;
    font-family: verdana, sans-serif;
}


/* -- Light / Dark Body -- */

body {
    background: white;
    color: black;
    --accent: #319926;
}
@media (prefers-color-scheme: dark) {
    body {
        --accent: #51defe;

        background: black;
        color: rgb(245, 245, 247);
    }
}


/* -- Header -- */

header {
    height: 240px;
    position: relative;
    background:
        linear-gradient(0deg, #C3E58B, rgb(137, 207, 0));
    background-size:
        100%;
}

header::before {
    content: "";
    position: absolute; left:0; top:0; right:0; bottom: 0;
    background:
        url(../blog/b-tree-l.png) top left no-repeat,
        url(../blog/b-island.png) max(100px, min(20%, calc(50% - 160px))) 0 no-repeat,
        url(../blog/b-tree.png) 70% min(0px, calc((100vw - 800px) * 9999.0)) no-repeat,
        url(../blog/b-light.png) calc(100% + 75px) -15px no-repeat,
        url(../blog/b-building.png) max(100%, 380px) 100% no-repeat,
        url(../blog/b-light.png) 50% -4vw no-repeat,
        url(../blog/b-light.png) 3% -10vw no-repeat,

        url(../blog/b-bgtree-3.png) 73% 100% no-repeat,

        linear-gradient(0deg, #C3E58B00 0, rgba(137,207,0,0.7) 60%, rgba(137,207,0,0.0) 100%),

        url(../blog/b-light.png) 10% 23% no-repeat,
        url(../blog/b-light.png) 25% 20% no-repeat,
        url(../blog/b-light.png) 62% 21% no-repeat,
        url(../blog/b-light.png) 78% 18% no-repeat,

        url(../blog/b-light.png) 7% 41% no-repeat,
        url(../blog/b-light.png) 17% 40% no-repeat,
        url(../blog/b-light.png) 35% 40% no-repeat,
        url(../blog/b-light.png) 55% 40% no-repeat,
        url(../blog/b-light.png) 70% 43% no-repeat,
        url(../blog/b-light.png) 88% 38% no-repeat,

        url(../blog/b-bgtree-1.png) 10% 0 no-repeat,
        url(../blog/b-bgtree-2.png) 25% 0 no-repeat,
        url(../blog/b-bgtree-1.png) 60% 0 no-repeat,
        url(../blog/b-bgtree-2.png) 80% 0 no-repeat
    ;
    background-size:
        auto 100%,
        auto 100%,
        auto 100%,
        290px auto,
        auto 80%,
        30% auto,
        30% auto,

        auto min(50%, 10vw),

        auto,

        min(18%, 140px) auto,
        min(18%, 140px) auto,
        min(18%, 140px) auto,
        min(18%, 140px) auto,

        min(10%, 110px) auto,
        min(10%, 110px) auto,
        min(10%, 110px) auto,
        min(10%, 110px) auto,
        min(10%, 110px) auto,
        min(10%, 110px) auto,

        auto 100%,
        auto 100%,
        auto 100%,
        auto 100% ;
}

header::after {
    content: "";
    position: absolute; left:0; top:190px; right:0; bottom: 0;
    background: url(../blog/trim-light.png) bottom center repeat-x;
    background-size: 40px;
}
@media (prefers-color-scheme: dark) {
    header::after {
        background-image: url(../blog/trim-dark.png);
    }
}

header > a {
    width: 150px;
    height: 150px;
    position: absolute; left:50%; top: 50%; transform:translate(-50%,-50%);
}

header > div {
    position: absolute;
    background-image: url(b-light.png);
    width: 150px;
    height: 100px;
    background-size: cover;
    background-repeat: no-repeat;
}


/* -- Document Metrics -- */

article {
    //max-width: 36em;
    max-width: 39em;
    margin: auto;
    padding: 0 20px;
    line-height: 1.41;
}

p {
    margin: .75em 0;
    padding: 0;
}
p + p {
    margin-top: 1.3em;
}

blockquote {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

ol, ul {
    margin-bottom: 2.0em;
    margin-top: -.5em;
}
li {
    margin-bottom: 1.0em;
}


/* -- Links -- */

article a {
    text-decoration: none;
    color: var(--accent);
    //font-weight: bold;
}
article a:hover {
    text-decoration: underline;
}


/* -- Minor Styles -- */

sup {
    vertical-align: top;
    position: relative;
    top: -0.3em;
}
sup a {
    font-weight:normal;
}
p var, ol var, ul var {
    font-family: Monaco,Consolas,monospace;
    font-style:normal;
    background: #eee;
}
@media (prefers-color-scheme: dark) {
    p var, ol var, ul var {
        background: inherit;
        color: #8a8;
    }
}


/* -- Headings -- */

h1 {
    padding: 40px 0 40px;
    font-family: "Verdana";
    text-align:Center;
    font-size: 30px;
    color: var(--accent);
}
h1 img { filter: invert(1) }
@media (prefers-color-scheme: dark) {
    h1 img { filter: none }
}

h1 img {
    max-width: 90vw;
}

h2 {
    font-size: inherit;
    font-weight: bold;
}


/* -- Adaptive layout -- */

@media only screen and (min-width: 850px) {
    article {
        margin-left: 200px;
        padding: 0;
    }
    h2 {
        font-size: inherit;
        font-weight: bold;
        position: relative;
        left: -180px;
        top: .75em;
        width: 160px;
        text-align: right;
        height: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

}
@media only screen and (min-width: 1000px) {
    article {
        margin: auto;
    }
    h2 {
        left: -210px;
        width: 190px;
    }
}


/* -- Figures -- */

figure {
    padding: 30px 0;
    margin: 0;
}
figure.image {
    text-align: center;
}
figure img {
    max-width: 100%;
}
figure.same-line {
    display: inline-block;
    max-width: 45%;
    margin: auto;
}
figure video {
    max-width: 100%;
}
figcaption {
    text-align: center;
    font-style: italic;
    color: #777;
    font-size: 95%;
}
@media (prefers-color-scheme: dark) {
    figcaption {
        color: #888;
    }
}
figcaption span {
    padding: 0 .2em;
}
figure.mac-window-screenshot {
    padding-top: 0;
    margin-bottom: -20px;
    margin-top: -30px;
}
figure.mac-window-screenshot figcaption {
    //margin-top: -75px;
    margin: -75px 0 75px;
    color: #888;
    z-index: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1.0);
}
/*
figure.mac-window-screenshot + figure.mac-window-screenshot {
    margin-top: -50px;
}
*/
@media (prefers-color-scheme: dark) {
    figure.mac-window-screenshot figcaption {
        text-shadow: none;
    }
}


/* -- Notes -- */

.notes {
    padding-top: 4em;
    font-size: 80%;
}


/* -- Footer -- */

footer {
    margin-top: 80px;
    min-height: 10px;
    background: url(../blog/trim2-light.png) top center repeat-x;
    background-color: black;
    background-size: 40px;
    color: white;
    text-align: center;
    padding: 70px 0 30px;
}
footer img {
    margin-top: 30px;
}
footer a {
    color: white;
}
@media (prefers-color-scheme: dark) {
    footer {
        color: black;
        background-color: white;
        background-image: url(../blog/trim2-dark.png);
    }
    footer a {
        color: black;
    }
}

/* -- Row -- */
.row { display:flex; justify-content:Space-between}


/* -- Window -- */

.window { display: inline-block; border: 1px solid #ccc; width: 48%; margin: 50px 0; border-radius: 7px 7px 0 0; background: white; box-shadow: 0 15px 50px rgba(0,0,0,0.2); color: black; }
.window .title { border-radius:7px 7px 0 0; border-bottom: 1px solid rgb(179,179,179); border-top: 1px solid rgb(240,240,240); text-align: center; height: 25px; line-height: 24px; background: linear-gradient(rgb(229,229,229), rgb(206,206,206)); color: rgb(76,76,76) }
.window .main { padding: 5px; font-family: monaco, consolas, monospace; overflow:hidden }

/* -- Article: haptril -- */

.article-haptril .soft-white-bg { background: rgba(255,255,255,.75); }
.article-haptril .callout-color-yellow { background: #ffb; }
.article-haptril .callout-color-cyan { background: #cff; }
.article-haptril .callout-color-green { background: #cfc; }

@media (prefers-color-scheme: dark) {
    .article-haptril .callout-color-yellow { background: inherit; color: #ff9; }
    .article-haptril .callout-color-cyan { background: inherit; color: #9ff; }
    .article-haptril .callout-color-green { background: inherit; color: #9f9; }
}

.article-haptril .window code span { color: #888; }
.article-haptril .window code em { font-style:normal; color: #23e; }
.article-haptril .window code var { font-style:normal; font-weight: bold; color: #c39;}

/* -- Article: quicklook -- */

.article-quicklook h1 { padding: 50px 0 20px; position:relative; left:-4px }



    /* -- Code -- */
    code {
        font-family: monaco,
        consolas,monospace;
    }

.listing {
    display:block;
    white-space: pre;
    overflow-x: auto;
    background: #efe;
    font-size:80%;
    padding: 1em .5em;
    margin-bottom: 1.5em;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
@media (prefers-color-scheme: dark) {
    .listing {
        background: #222;
        border-color: #999;
    }
}


.listing > div { margin:0;padding:0; }

.listing .diff-meta {background: #ffd;}
.listing .diff-hunk {background: #fdf;}
.listing .diff-add {background: #cfc; color: #338;}
.listing .diff-del {background: #fcc; color: #fff;}
.listing .diff-context {color: #888;}

.syntax-lldb {
    color: #666;
}
.listing .gp { color: #000; font-weight: bold}
.listing .g-Input { color: #000; }

.listing .g-ViewTree { color: #666; }
.listing .g-ViewTreeName { color: #000; font-weight: bold }


@media (prefers-color-scheme: dark) {
    .syntax-lldb { color: #ccd; }
    .listing .g { color: #66f; }
    .listing .gp { color: #ff6; }
    .listing .g-Input { color: #fff; }
    .listing .g-FrameNo { color: #6aa; }

    .listing .g-Addr { color: #666; }

    .listing .g-Frame { color: #999; }
    .listing .g-FrameAddr { color: #666; }
    .listing .g-FrameMarker { color: #6ee; }
    .listing .g-FrameImage { color: #9a9; }
    .listing .g-FrameSymbol { color: #99a; }

    .listing .g-ViewTree { color: #777; }
    .listing .g-ViewTreeName { color: #9a9; }

    .listing .g-AsmMarker { color: #6ee; }
    .listing .g-Asm { color: #999; }
    .listing .g-AsmAddr { color: #666; }
    .listing .g-AsmOffset { color: #886; }

    .listing .kt { color: #adb4e8; }
    .listing .mf { color: #6aa; }
}

//.syntax-lldb { font-size: 11px; }

.syntax-lldb { padding-top: 0; }
.syntax-lldb .g-Input,
.syntax-lldb .gp {
    display: inline-block;
    //font-size: 12.8px;
    padding-bottom: 5px;
    padding-top: 10px;
}
.syntax-xml {
    color: #ddd;
}

.syntax-xml .cp,
.syntax-xml .nt,
.syntax-xml .na,
.syntax-xml .s {
    color: #88a;
}


/* -- Side-by-side */

.side-by-side {
    margin-top: 50px;
    overflow: hidden;
}
@media only screen and (min-width: 1050px) {
    .side-by-side {
        width: 100vw;
        position: relative;
        left: calc(-50vw + 50%);
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .side-by-side .mac-window-screenshot {
        margin-left: -20px;
        margin-right: -20px;
    }
}

.zongle {
    display: none;
}

.spoiler {
    cursor:pointer;background:#555;color:transparent;
}