/* Slow Pixels: styles every page shares. Each page keeps its own layout in its own <style>. */
/* The site's own copies of its two fonts (fonts/, SIL Open Font License), so a visitor's browser asks nobody else
   for anything. The pixel font is cut down to Latin letters and the signs the pages use: scripts/make_fonts.py. */
@font-face{font-family:'DotGothic16';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dotgothic16.woff) format('woff');unicode-range:U+20-7E,U+A0-FF,U+152-153,U+2010-2016,U+2018-201A,U+201C-201E,U+2020-2022,U+2025-2026,U+2030,U+2032-2033,U+2039-203B,U+20AC,U+2122,U+2190-2193,U+21D2,U+21D4,U+2212,U+2460-2473,U+2500-2503,U+2581-258F,U+2594-2595,U+25A0-25A2,U+25B2-25B3,U+25B7,U+25BC-25BD,U+25C1,U+25C6-25C7,U+25C9,U+25CB,U+25CE-25CF,U+25EF,U+2605-2606}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lato-400.woff) format('woff')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lato-700.woff) format('woff')}
/* ---- Dark, in the Mac app's colours. It follows the computer until someone picks one. ---- */
html[data-theme="dark"] .pal-paper{--bg:#151515;--bg2:#0E0E0D;--ink:#F4F2EC;--soft:#A8A49B;--accent:#F4F2EC;--on:#151515;--paper:#1E1E1C;--sink:#F4F2EC}
html[data-theme="dark"] .pal-paper .scr{background:#FBFAF6 !important}
html[data-theme="dark"] .pal-paper .scr::after{display:none}
html[data-theme="dark"] .pal-paper span[style*="line-height: 0"] > img{filter:invert(1)}
html[data-theme="dark"] .pal-paper [style*="var(--scr)"] span[style*="line-height: 0"] > img,html[data-theme="dark"] .pal-paper .scr span[style*="line-height: 0"] > img{filter:none}
html[data-theme="dark"] .pal-paper .lt{display:none}
html[data-theme="dark"] .pal-paper .dk{display:block}
@media (prefers-color-scheme:dark){
html:not([data-theme="light"]) .pal-paper{--bg:#151515;--bg2:#0E0E0D;--ink:#F4F2EC;--soft:#A8A49B;--accent:#F4F2EC;--on:#151515;--paper:#1E1E1C;--sink:#F4F2EC}
html:not([data-theme="light"]) .pal-paper .scr{background:#FBFAF6 !important}
html:not([data-theme="light"]) .pal-paper .scr::after{display:none}
html:not([data-theme="light"]) .pal-paper span[style*="line-height: 0"] > img{filter:invert(1)}
html:not([data-theme="light"]) .pal-paper [style*="var(--scr)"] span[style*="line-height: 0"] > img,html:not([data-theme="light"]) .pal-paper .scr span[style*="line-height: 0"] > img{filter:none}
html:not([data-theme="light"]) .pal-paper .lt{display:none}
html:not([data-theme="light"]) .pal-paper .dk{display:block}
}
.dk{display:none}

/* ---- Picture shows: one picture at a time, turned by ‹ and › or by itself (site.js). ---- */
.shots{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;width:100%}
.shots-view{position:relative;width:100%}
.shots-phone .shots-view{width:min(300px,100%)}
.shots .shot{display:none;margin:0;min-width:0}
.shots .shot.on{display:flex;flex-direction:column;gap:10px}
.shots .shot figcaption{font-size:var(--sm);line-height:1.35;text-align:center;min-height:2.7em}
.shots .scr{display:block}
.shots-nav{display:flex;align-items:center;gap:10px}
.shots-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:4px;padding:0;border:0;background:transparent;color:var(--ink);font-family:'DotGothic16',monospace;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 -3px 0 0 currentColor,0 3px 0 0 currentColor,-3px 0 0 0 currentColor,3px 0 0 0 currentColor}
.shots-btn:hover{background:var(--bg2)}
.shots-btn:active{background:var(--ink);color:var(--bg)}
.shots-count{min-width:5em;text-align:center;font-size:var(--sm);color:var(--soft)}
.shots-flash{position:absolute;inset:0;z-index:2;background:var(--ink);opacity:0;pointer-events:none}
.shots.flash .shots-flash{animation:shots-flash .12s steps(1,end) 1}
@keyframes shots-flash{from{opacity:1}to{opacity:0}}
.shots-caps{margin:0;min-height:2.9em;max-width:40em;text-align:center}
.shots-caps .cap{display:none}
.shots-caps .cap.on{display:block}
/* A row of pictures on a wide screen, a picture show on a narrow one. */
@media (min-width:760px){
.shots-row{align-items:stretch}
.shots-row .shots-view{display:flex;align-items:flex-start;gap:16px}
.shots-row .shot,.shots-row .shot.on{display:flex;flex:1 1 0;flex-direction:column;gap:10px}
.shots-row .shots-nav{display:none}
.shots-row .shot figcaption{min-height:0;text-align:left}
}
@media (max-width:759px){.shots-row .shots-view{width:min(300px,100%)}.shots-row .shot figcaption{min-height:2.7em}}
.shots-row .shots-flash{display:none}
/* An app's own page: its pictures in a row that scrolls sideways on a wide screen, one at a time on a narrow one. */
@media (min-width:760px){
.shots-app .shots-view{gap:28px;overflow-x:auto}
.shots-app .shot,.shots-app .shot.on{flex:0 0 auto;gap:12px}
}
@media (max-width:759px){
.shots-app .shot .scr{width:100% !important;height:auto !important;aspect-ratio:3 / 5}
.shots-app .shot.land .scr{aspect-ratio:5 / 3}
.shots-app .shot figcaption{max-width:none !important}
}

/* ---- The Mac app in a window ---- */
.macshow{align-items:stretch;gap:16px}
.macwin{position:relative;width:100%;background:var(--bg);box-shadow:0 0 0 3px var(--ink)}
.macwin::after{content:"";position:absolute;left:10px;right:-10px;top:10px;bottom:-10px;z-index:-1;background-image:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0);background-size:4px 4px;opacity:.45}
.macshow{position:relative;z-index:0}
.macbar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;background:var(--bg2);border-bottom:3px solid var(--ink)}
.macbar i{display:block;width:12px;height:12px;border:2px solid var(--ink)}
.macbar span{flex:1 1 auto;padding-right:52px;text-align:center;font-family:var(--fd);font-size:16px;line-height:1}
.macbody{display:flex;align-items:stretch}
.macside{flex:0 0 184px;display:flex;flex-direction:column;gap:2px;padding:14px 10px;background:var(--bg2);border-right:3px solid var(--ink)}
.macside b{padding:12px 10px 4px;font:700 11px Lato,system-ui,sans-serif;letter-spacing:.08em;color:var(--soft)}
.macside button,.macside span{display:block;min-height:32px;padding:7px 10px;border:0;background:none;color:var(--ink);font-family:var(--fd);font-size:16px;line-height:1.15;text-align:left}
.macside button{cursor:pointer}
.macside button:hover{background:var(--bg)}
.macside button.on{background:var(--ink);color:var(--bg)}
.macside span{color:var(--soft)}
.macside .gap{flex:1 1 auto;min-height:8px;padding:0}
.macview{flex:1 1 0;min-width:0;aspect-ratio:1904 / 1240;overflow:hidden;background:var(--bg)}
.macview .shot.on{display:block}
.macview img{width:100%;height:auto;vertical-align:top}
.macshow .shots-nav{justify-content:center}
.macshow .shots-caps{align-self:center;margin-top:10px}
@media (max-width:759px){
.macside{display:none}
.macview{aspect-ratio:auto;overflow-x:auto}
.macview img{width:640px;max-width:none}
.macbar span{padding-right:0}
}

/* ---- Small screens ---- */
.sp .phone{max-width:100%}
@media (max-width:560px){
.nav-extra{display:none}
.sp header .nav{gap:2px 16px !important}
.sp header .btn{min-height:44px;padding:8px 14px}
}

/* ---- E Ink view: for a Kompakt's own browser, and anyone who switches it on at the bottom of a page.
        Black on white only (greys turn to dots on E Ink), nothing moves, bigger small print, pixel letters only at
        the sizes that land on whole dots (24, 36 and 48 on a Kompakt). ---- */
html[data-eink] .pal-paper{--bg:#fff;--bg2:#fff;--ink:#000;--soft:#000;--accent:#000;--on:#fff;--paper:#fff;--sink:#000;--scr:#fff;--scri:#000;--shade:transparent;--dev:#000;--dev2:#000;--devink:#fff;--fd:Lato,system-ui,sans-serif;--fm:Lato,system-ui,sans-serif;--dw:700;--h1:36px;--h1s:24px;--h2:24px;--h3:20px;--sm:17px;--lb:17px}
html[data-eink] .sp *,html[data-eink] .sp *::before,html[data-eink] .sp *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
html[data-eink] .sp h1,html[data-eink] .sp [style*="font-size: var(--h2)"],html[data-eink] .sp [style*="font-size: var(--h1"],html[data-eink] .sp .logo{font-family:'DotGothic16',monospace !important;font-weight:400 !important;letter-spacing:0}
html[data-eink] .sp h1{line-height:1.12}
html[data-eink] .sp .logo{font-size:24px !important}
html[data-eink] .sp h3,html[data-eink] .sp h4{line-height:1.25}
html[data-eink] .sp [style*="font-size: 13px"],html[data-eink] .sp [style*="font-size: 14px"],html[data-eink] .sp [style*="font-size: 15px"],html[data-eink] .sp [style*="font-size: 12.5px"],html[data-eink] .sp [style*="font-size: 14.5px"]{font-size:16px !important}
html[data-eink] .sp [style*="letter-spacing"]{letter-spacing:0 !important}
html[data-eink] .sp .btn{font-size:18px;box-shadow:0 -3px 0 0 #000,0 3px 0 0 #000,-3px 0 0 0 #000,3px 0 0 0 #000}
html[data-eink] .sp .btn-fill{background:#000;color:#fff}
html[data-eink] .sp .btn:hover,html[data-eink] .sp .btn:active{transform:none}
html[data-eink] .sp .tag{font-size:16px;font-weight:700}
html[data-eink] .sp .nav a{font-size:18px}
html[data-eink] .sp header .nav{gap:0 18px !important}
html[data-eink] .sp header .nav a[href^="Blog"]{display:none}
html[data-eink] .theme-btn,html[data-eink] .sp header .btn,html[data-eink] .nav-extra,html[data-eink] .dither,html[data-eink] .blink,html[data-eink] .trail,html[data-eink] .zz,html[data-eink] .inkflash,html[data-eink] .shots-flash,html[data-eink] .cm-scan{display:none !important}
html[data-eink] .sp .crawl{transform:translateX(24px)}
html[data-eink] .sp [style*="max-width: 1200px"],html[data-eink] .sp [style*="max-width: 1040px"],html[data-eink] .sp [style*="max-width: 820px"]{padding-left:16px !important;padding-right:16px !important}
html[data-eink] .sp section[style*="padding: 72px"],html[data-eink] .sp section[style*="padding: 88px"],html[data-eink] .sp section[style*="padding: 96px"],html[data-eink] .sp section > div[style*="padding: 72px"],html[data-eink] .sp section > div[style*="padding: 80px"],html[data-eink] .sp section > div[style*="padding: 88px"],html[data-eink] .sp section > div[style*="padding: 64px"],html[data-eink] .sp section > div[style*="padding: 96px"]{padding-top:40px !important;padding-bottom:40px !important}
html[data-eink] .sp .scr img{mix-blend-mode:normal}
html[data-eink] .sp .scr::after{display:none}
html[data-eink] .sp .cm-walk{left:40%}
html[data-eink] .sp .demo b,html[data-eink] .sp .demo .saved,html[data-eink] .sp .demo .mtag,html[data-eink] .sp .demo .jump,html[data-eink] .sp .cm-rec,html[data-eink] .sp .cm-fmt,html[data-eink] .sp .cm-labs span,html[data-eink] .sp .cm-copied,html[data-eink] .sp .cm-imp{font-family:Lato,system-ui,sans-serif !important;font-weight:700 !important}
html[data-eink] .sp .cm-hl{background-size:100% 100%;background-image:none;text-decoration:underline}
html[data-eink] .sp .macwin::after{display:none}
html[data-eink] .sp .macview img{filter:grayscale(1) brightness(1.12) contrast(1.6)}
html[data-eink] .sp .macbar{background:#fff}
html[data-eink] .sp .shots-count{color:#000}
html[data-eink] .sp ::placeholder{color:#000;opacity:1}
html[data-eink] .sp .lt{display:block !important}
html[data-eink] .sp .dk{display:none !important}
html[data-eink] .sp #coffee{background:#fff !important;color:#000 !important;border-top:3px solid #000}
html[data-eink] .sp #coffee .btn{color:#000 !important}
.eink-switch{padding:10px 2px;border:0;border-bottom:3px solid transparent;background:none;color:inherit;font-family:var(--fd);font-weight:var(--dw);font-size:var(--sm);cursor:pointer}
.eink-switch:hover{border-bottom-color:currentColor}

@media (prefers-reduced-motion:reduce){.shots-flash{display:none}}

/* ---- The Mac app's three small demos (home page). Each one's resting look is its last frame, so with motion
   off (E Ink view, or a visitor who asked for less motion) it still says what happened. ---- */
.demo.mc,.demo.mt,.demo.md{font-family:Lato,system-ui,sans-serif;font-size:15px;line-height:1.3}
.mc-app{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(264px,calc(100% - 32px));box-sizing:border-box;padding:14px;display:flex;flex-direction:column;gap:6px;background:var(--scr);border:2px solid var(--scri);box-shadow:4px 4px 0 var(--shade)}
.mc-top{display:flex;align-items:flex-start;justify-content:space-between}
.mc-ic{line-height:0}
.mc-tag{padding:1px 6px;border:2px solid var(--scri);font-size:12px;font-weight:700}
.mc-app strong{font-family:'DotGothic16',monospace;font-weight:400;font-size:24px;line-height:1.1}
.mc-app small{font-size:13px;opacity:.75}
.mc-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.mc-btn{position:relative;flex:none;width:136px;height:32px}
.mc-btn i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:2px solid var(--scri);font-style:normal;font-family:'DotGothic16',monospace;font-size:16px;white-space:nowrap;background:var(--scr)}
.mc-btn .mc-a{opacity:0;animation:mc-a 8s steps(1) infinite}
.mc-btn .mc-b{opacity:0;justify-content:flex-start;padding:4px;animation:mc-b 8s steps(1) infinite}
.mc-b b{display:block;height:100%;width:100%;background:var(--scri);animation:mc-fill 8s steps(1) infinite}
.mc-btn .mc-c{background:var(--scri);color:var(--scr);animation:mc-c 8s steps(1) infinite}
.mc-cur{position:absolute;left:calc(50% + 66px);top:calc(50% + 56px);opacity:0;animation:mc-cur 8s linear infinite}
@keyframes mc-a{0%,23%{opacity:1;background:var(--scr);color:var(--scri)}24%,29%{opacity:1;background:var(--scri);color:var(--scr)}30%,100%{opacity:0}}
@keyframes mc-b{0%,29%{opacity:0}30%,67%{opacity:1}68%,100%{opacity:0}}
@keyframes mc-fill{0%,31%{width:0}36%{width:14%}41%{width:28%}46%{width:42%}51%{width:57%}56%{width:71%}61%{width:86%}66%,100%{width:100%}}
@keyframes mc-c{0%,67%{opacity:0}68%,100%{opacity:1}}
@keyframes mc-cur{0%{opacity:1;transform:translate(64px,34px);animation-timing-function:steps(7)}20%,30%{opacity:1;transform:translate(0,0)}31%,100%{opacity:0;transform:translate(0,0)}}
.mt-who{position:absolute;left:16px;top:12px;font-family:'DotGothic16',monospace;font-size:16px}
.mt-in,.mt-out{position:absolute;max-width:72%;padding:8px 12px;border:2px solid var(--scri);box-sizing:border-box}
.mt-in{left:16px;top:40px;background:var(--scr)}
.mt-out{right:16px;top:88px;background:var(--scri);color:var(--scr);animation:mt-out 8s steps(1) infinite}
.mt-tag{position:absolute;right:16px;top:132px;font-size:12px;opacity:.75;animation:mt-tag 8s steps(1) infinite}
.mt-box{position:absolute;left:16px;right:16px;bottom:14px;height:36px;display:flex;align-items:center;padding:0 10px;box-sizing:border-box;border:2px solid var(--scri);background:var(--scr)}
.mt-type{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;animation:mt-type 8s steps(1) infinite}
.mt-box i{width:2px;height:18px;margin-left:1px;background:var(--scri);animation:blink 1s steps(1) infinite}
@keyframes mt-type{0%,5%{max-width:0}9%{max-width:26px}13%{max-width:52px}17%{max-width:70px}21%{max-width:98px}25%{max-width:112px}29%{max-width:136px}33%{max-width:160px}37%{max-width:178px}41%{max-width:200px}45%,57%{max-width:260px}58%,100%{max-width:0}}
@keyframes mt-out{0%,57%{opacity:0}58%,100%{opacity:1}}
@keyframes mt-tag{0%,63%{opacity:0}64%,100%{opacity:.75}}
.md-mic{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:64px;height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:4px;border:2px solid var(--scri);border-radius:50%;background:var(--scr)}
.md-mic i{width:5px;height:26px;background:var(--scri);transform:scaleY(.5);animation:md-bar 1.1s steps(4) infinite}
.md-mic i:nth-child(2){animation-delay:-.25s}.md-mic i:nth-child(3){animation-delay:-.6s}.md-mic i:nth-child(4){animation-delay:-.4s}.md-mic i:nth-child(5){animation-delay:-.85s}
@keyframes md-bar{0%{transform:scaleY(.25)}25%{transform:scaleY(1)}50%{transform:scaleY(.45)}75%{transform:scaleY(.8)}100%{transform:scaleY(.25)}}
.md-words{position:absolute;left:16px;right:16px;top:104px;margin:0;padding:8px 10px;min-height:54px;box-sizing:border-box;border:2px solid var(--scri);background:var(--scr);font-size:17px;line-height:1.35}
.md-words span{animation:8s steps(1) infinite}
.md-words span:nth-child(1){animation-name:md-w1}.md-words span:nth-child(2){animation-name:md-w2}.md-words span:nth-child(3){animation-name:md-w3}.md-words span:nth-child(4){animation-name:md-w4}.md-words span:nth-child(5){animation-name:md-w5}.md-words span:nth-child(6){animation-name:md-w6}
.md-words b{display:none}
@keyframes md-w1{0%,9%{opacity:0}10%,100%{opacity:1}}
@keyframes md-w2{0%,19%{opacity:0}20%,100%{opacity:1}}
@keyframes md-w3{0%,29%{opacity:0}30%,100%{opacity:1}}
@keyframes md-w4{0%,39%{opacity:0}40%,100%{opacity:1}}
@keyframes md-w5{0%,47%{opacity:0}48%,100%{opacity:1}}
@keyframes md-w6{0%,56%{opacity:0}57%,100%{opacity:1}}
.md-foot{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:12px;opacity:.75}
@media (prefers-reduced-motion:reduce){.demo.mc *,.demo.mt *,.demo.md *{animation:none !important}}
html[data-eink] .sp .mc-cur,html[data-eink] .sp .mt-box i,html[data-eink] .sp .md-words b{display:none}
html[data-eink] .sp .mc-app small,html[data-eink] .sp .mt-tag,html[data-eink] .sp .md-foot{opacity:1;font-size:14px !important}
html[data-eink] .sp .mc-app{box-shadow:none}