header,footer,nav,article,section,aside{display:block}h1{display:none}
*{margin:0;padding:0;line-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%;position:relative}

body   { background: #f0f0e8; color: #262626 }
header { background: #686058; color: white   }
nav    { background: #686058; color: white   }
a      { color: #698 }
.Legal, .Disclaimer { color: #aaa }
@media (prefers-color-scheme: dark)
    {
    body   { background: #303438; color: #ddd  }
    header { background: #404854; color: white }
    nav    { background: #404854; color: white }
    a      { color: #9cb }
    .Legal, .Disclaimer { color: #777 }
    }

body   { font: normal 400 16px/100% ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", "Helvetica", sans-serif }
footer { position: fixed; bottom: 4px; right: 4px; font-size: 8px; font-weight: 100; color: #888 }
section, header div.Title, nav ul { max-width: 800px; margin: 0 auto }

a      { text-decoration: none }
section  a { font-weight: 500  }
a:hover, a:focus { text-decoration: underline }
em     { font-style: italic;  font-weight: inherit }
strong { font-style: inherit; font-weight: 600     }
em strong, strong em
       { font-style: italic;  font-weight: 600 }
h2     { font-weight: 600; font-size: 18px }
.Legal { font-size: 56% }
.Disclaimer { font-size: 80%; font-weight: 300 }
.Mono  { font-family: monospace }

header div { padding: 10px }
header div.Title { font-size: 36px; font-weight: 600 }
header div.Logo  { float: left }
header div.Logo img { width: 58px; height: 58px }
div.Title span.Subtitle { font-weight: 300; margin-left: 8px }

nav li { display: inline-block; font-size: 14px; font-weight: 300; padding: 0 20px 6px 0 }
nav li a { color: white }

section p  { margin-bottom: 10px; line-height: 135% }
section h2 { margin: 18px 0 6px 0 }
section.Legal p { padding: 20px 0 10px 0 }
p.Disclaimer { margin-top: -7px }
dd.Disclaimer { margin-top: 4px }

img.AppStore { height: 50px } /* Minimum = 40px per Apple usage guidelines */
img.AppStore.White { display: none }
@media (prefers-color-scheme:dark)
    {
    img.AppStore.White { display: inline }
    img.AppStore.Black { display: none   }
    }

.AppStore div { text-align: center; padding-top: 10px }
.AppStore span { display: inline-block }
.AppStore .Panel { width: 280px; cursor: pointer }
.AppStore .Links { width: 200px; text-align: center }
.AppStore .Desktop.Panel { text-align: right; padding-right: 16px }
.AppStore .Mobile.Panel  { text-align: left;  padding-left:  16px }
.AppStore .Panel { font-size: 24px; font-weight: 900; position: relative; bottom: 15px }
.AppStore .Panel.Current { color: #262626 }
.AppStore .Panel.Other   { color: #bbb }
.AppStore a.Other   { display: none   }
.AppStore a.Current { display: inline }
@media (prefers-color-scheme: dark)
    {
    .AppStore .Panel.Current { color: #ddd }
    .AppStore .Panel.Other   { color: #777 }
    }


img.FrontPage { height: 260px }
img.FrontPage.Screen_VGA         { float: right; margin: 0 -50px 0 20px    }
img.FrontPage.Screen_CRT_Effects { float: left;  margin: 10px 20px 0 -70px }
img.FrontPage.Screen_StickyNotes { float: right; margin: 0 -130px 0 10px   }
section.PromoImage img { width: 900px; margin: 15px 0 0 -60px }


dl.FAQ * { line-height: 150% }
dl.FAQ dt { font-weight: 500 }
dl.FAQ dt:before, dl.FAQ dd:before
    {
    display:    inline-block;
    text-align: center;
    background: #8db39a;
    color:      white;
    width:       16px;
    line-height: 100%;
    font-weight:  500;
    margin-right: 6px;
    border-radius:8px;
    text-indent:    0;
    padding:        0;
    }
dl > dt { margin-top: 16px }
dl.FAQ dt:before { content: "?" }
dl.FAQ dd:before { content: "!" }
dl.FAQ dd + dd:before { content: "" }
dl.FAQ dd + dd { padding-top: 4px }
@media (prefers-color-scheme:dark)
    { dl.FAQ dt:before, dl.FAQ dd:before { background: #5a8066 } }
dl.FAQ dt, dl.FAQ dd { text-indent: -22px; padding-left: 22px }

p.BeforeList { margin-bottom: 6px }
section ul  { margin-bottom: 14px }
section li { list-style: inside; margin-left: 2em; line-height: 130%; text-indent: -1em }
section li + li { margin-top: 7px }


section.TOC { margin-top: 5px }
section.TOC div
    {
    float:      right;
    width:      210px;
    background: #f4f0e8;
    padding:    0 20px;
    font-size:  90%;
    border:     3px solid #cba;
    border-radius: 8px;
    margin-left: 20px;
    }
section.TOC .Here { font-weight: 900 }
section.TOC ul { margin-bottom: 12px }
section.TOC h2 { font-size: 110%; margin: 12px 0 9px 0 }
section.TOC li { margin-left: 0; text-indent: 0 }
@media (prefers-color-scheme: dark)
    { section.TOC div { background: #343840; border-color: #456 } }


figure { width: 350px }
figure.Left { float: left; margin: 0 15px 0 0 }
figure.Right { float: right; margin: 0 -50px 0 10px }
figure.Narrow { width: 250px }
figcaption:before { content: "▲ " }
figcaption
    {
    font-size:    80%;
    line-height: 125%;
    padding:      3px;
    }
figure img { width: 350px; border-radius: 8px }
figure.Narrow img { width: 250px }
h2 .PlatformNote { font-weight: 200; color: #888 }


section.ComingSoon
    {
    background:    black;
    color:         #eee;
    text-align:    center;
    font-size:     24px;
    font-weight:   900;
    border-radius: 15px;
    margin-top:    20px;
    padding: 20px 0 15px 0;
    }