h1{font-size:48px;margin-top:8px;font-family:var(--font-family-secondary);color:var(--text-color-secondary);text-transform:lowercase}#left h2{font-size:36px;font-family:var(--font-family-secondary);color:var(--text-color-secondary);text-transform:lowercase}@media only screen and (min-width: 1024px){#left h2{font-size:32px;margin-bottom:56px}}#left h2 a{color:var(--text-color-primary);text-decoration:none}#left h2 a:hover{text-decoration:underline;color:var(--link-color)}a:link{color:var(--link-color);font-weight:600}a:visited{color:var(--link-visited-color)}a.number:link{text-decoration:none}dt{padding-top:16px;font-weight:600}code,.code,.demonstrate{color:var(--demonstrate-text-color);font-size:14px;padding:4px;margin:0 -2px}code,.code{text-transform:none}code{transition:all .1s ease}code:hover{padding:8px;margin:0 -6px;color:var(--link-visited-color)}.code,.demonstrate code{font-family:monospace;line-height:1.6}code em,.code em{font-style:normal;color:var(--demonstrate-emphasis-text-color)}body{background-color:var(--bg-color);color:var(--text-color-primary);font-family:var(--font-family-primary);font-size:16px;line-height:1.3;display:flow-root}body::before,body::after{content:"";display:block;position:fixed;z-index:11}main::before,main::after{content:"";display:block;position:fixed;z-index:11}.mobile-only{display:inherit}.desktop-only,.hidden{display:none}.transitioning-mode body{transition:all .3s ease}main{margin:20px}#left,#right{width:100%}#left{text-align:center;margin-bottom:48px}.image-credit{text-align:center;font-size:11px;color:var(--bg-color);opacity:.4}#right{padding-bottom:30px}#colophon{margin:48px 0}section{padding-bottom:30px}.intro{margin-bottom:48px;font-size:18px}.outro{padding-top:20px;margin-top:20px}.demonstrate{padding:16px;background-color:var(--demonstrate-bg-color)}code{background-color:var(--demonstrate-bg-color)}.demonstrate code{background-color:rgba(0,0,0,0)}.spot{width:40%;float:right;margin:0 0 30px 40px}@media only screen and (min-width: 1024px){.mobile-only{display:none}.desktop-only{display:inherit}main{margin:50px auto;max-width:960px}#left{float:left;width:300px;margin-right:60px}#right{float:left;width:600px}img.spot{margin:0 -100px 30px 50px;width:350px}}nav{line-height:1.4}nav h2{font-size:36px;margin:0}nav ul{list-style:none;padding:0;margin:0 0 36px}nav ul li{margin:0;display:inline-block;font-size:21px;margin:0 12px;text-transform:lowercase}nav ul li:first-child{margin-left:0}nav ul li.current a{color:var(--accent-color);text-decoration:none}@media only screen and (min-width: 1024px){nav ul{margin:0 0 56px}}.in-page-nav{display:inline-block;margin-top:24px;font-size:24px}a[href="#up"].in-page-nav{float:right;text-decoration:none}:root{--portrait-light: url("/images/portrait-1-c7b8f0762aeff71248918b3f767008ff.png?vsn=d");--portrait-transition: url("/images/portrait-2-d7025041862130712797b6bc1635ac81.png?vsn=d");--portrait-dark: url("/images/portrait-3-4e86953c50d5895aa9504f305010c088.png?vsn=d")}#portrait{display:block;margin:0 auto;background-size:contain;background-repeat:no-repeat;background-position:center center;width:360px;height:467px;text-indent:-9999px;position:relative;background-image:var(--portrait-light);filter:drop-shadow(-4px 6px 0 var(--shadow-color));z-index:1}@media only screen and (min-width: 1024px){#portrait{padding-top:130.4348%;width:initial;height:initial;max-width:initial}}:root.dark-mode #portrait{background-image:var(--portrait-dark)}:root:not(.dark-mode) #portrait{background-image:var(--portrait-light)}:root:not(.dark-mode) #portrait:hover{background-image:var(--portrait-transition)}.sticker-sheet{position:relative;width:100%;max-width:256px;margin:16px auto;height:200px;margin-top:-132px;z-index:1}@media only screen and (min-width: 1024px){.sticker-sheet{height:250px;margin-top:-48px;z-index:0}}.sticker{position:absolute;display:flex;align-items:center;justify-content:center;padding:15px;overflow:hidden;box-sizing:border-box;border-radius:100%;text-align:center}.sticker.one{z-index:2;top:-10px;left:-20px;width:140px;height:140px;background:coral;background:-webkit-linear-gradient(-135deg, transparent 45px, coral 0, crimson);box-shadow:-2px 2px 2px var(--shadow-color)}.sticker.one p{transform:rotate(-12deg);color:#fff;text-transform:uppercase;font-weight:800;font-size:20px;font-family:sans-serif}.sticker.two{z-index:1;top:5px;left:100px;width:180px;height:180px;background:#adff2f;background:-webkit-linear-gradient(-135deg, greenyellow 0, lightgreen 85%);border:8px solid #fff;padding:20px;box-shadow:-1px 1px 1px var(--shadow-color)}.sticker.two p{transform:rotate(8deg);color:#2f4f4f;font-weight:400;font-size:18px;font-family:serif}.sticker.two p span{color:#006400;font-weight:500;font-size:19px;bottom:-2px;position:relative;line-height:1}@media only screen and (min-width: 1024px){.sticker.two{top:25px}}.sticker.three{z-index:2;top:109px;left:25px;width:110px;height:110px;background:tomato;background:-webkit-linear-gradient(-135deg, gold 0, orange 70%);border:4px solid orange;padding:10px;box-shadow:-2px 2px 2px var(--shadow-color);text-decoration:none;transform:rotate(8deg);transition:transform .4s cubic-bezier(0.68, -0.55, 0.27, 1.55)}.sticker.three:hover{transform:scale(1.1);border:4px solid #fff}.sticker.three p{color:#2f4f4f;font-weight:400;font-size:12px;font-family:monospace;text-transform:none}.sticker.three p strong{font-family:sans-serif;line-height:1.8}@media only screen and (min-width: 1024px){.sticker.three{top:135px;left:20px}}.sticker .fold{content:"";position:absolute;display:block;width:160px;height:160px;top:-96px;right:-96px;border-radius:100%;background:-webkit-linear-gradient(-135deg, transparent 180px, #cab567 160px, #feeba7 85%)}.demonstrate.sprites{text-align:center}.demonstrate.sprites svg{display:inline-block;vertical-align:middle;height:100%;width:45%;margin:16px 0}.demonstrate.sprites .animal{color:#fff8dc}.demonstrate.sprites .nature{color:#9acd32}.demonstrate.sprites .bird{color:crimson}.demonstrate.sprites .rain{color:#f5fffa}#ui-controls{position:absolute;top:32px;right:32px;display:flow-root;z-index:2}#ui-controls .themes{float:left;border-right:1px solid}.theme-switch{cursor:pointer;border:1px solid;font-family:var(--font-family-secondary);height:32px;width:32px;float:left;margin-right:8px;display:none}.theme-switch.active{opacity:.5;cursor:default}#mode-switch{border:none;height:32px;width:32px;padding:0;overflow:hidden;color:var(--text-color-primary);background-color:rgba(0,0,0,0);cursor:pointer;border-bottom:1px solid var(--text-color-primary);position:relative;transition:color .2s ease}#mode-switch .svg-sprite{height:100%;width:32px;position:absolute;left:0;top:0;transition:transform .4s ease-in-out}#mode-switch .moon{transform:translateY(0)}#mode-switch .moon:hover{color:var(--moon-color)}#mode-switch .sun{transform:translateY(-100%)}#mode-switch .sun:hover{color:var(--sun-color)}:root.dark-mode #mode-switch .moon{transform:translateY(100%)}:root.dark-mode #mode-switch .sun{transform:translateY(0)}:root:not(.dark-mode) #mode-switch .sun{opacity:0}:root.transitioning-mode #mode-switch .moon,:root.transitioning-mode #mode-switch .sun{transition:transform .4s cubic-bezier(0.68, -0.55, 0.27, 1.55)}body.page-home #right .intro{line-height:1.4}@media only screen and (min-width: 1024px){body.page-home #left{width:400px;margin-top:-36px}body.page-home #right{width:500px}}:root,:root[data-theme=default]{--bg-color: honeydew;--accent-color: crimson;--title-color: darkslateblue;--demonstrate-bg-color: darkslateblue;--demonstrate-text-color: lavenderblush;--demonstrate-emphasis-text-color: lightsalmon;--text-color-primary: darkslateblue;--text-color-secondary: darkslateblue;--link-color: mediumvioletred;--link-visited-color: yellowgreen;--font-family-primary: Courier, monospace;--font-family-secondary: Courier, monospace;--frame-top-color: yellowgreen;--frame-right-color: mediumvioletred;--frame-bottom-color: coral;--frame-left-color: mediumvioletred;--sun-color: coral;--moon-color: gold;--shadow-color: rgba(199, 21, 133, 0.7)}:root.dark-mode,:root[data-theme=default].dark-mode{--bg-color: darkslateblue;--accent-color: coral;--title-color: white;--demonstrate-bg-color: midnightblue;--demonstrate-text-color: white;--demonstrate-emphasis-text-color: coral;--text-color-primary: lavenderblush;--text-color-secondary: white;--link-color: lightpink;--link-visited-color: greenyellow;--font-family-primary: Courier, monospace;--font-family-secondary: Courier, monospace;--frame-top-color: greenyellow;--frame-right-color: midnightblue;--frame-bottom-color: lightpink;--frame-left-color: midnightblue;--sun-color: coral;--moon-color: gold;--shadow-color: rgba(25, 25, 112, 0.7)}:root,:root[data-theme=default]{text-transform:lowercase}:root nav,:root[data-theme=default] nav{line-height:1.2}:root nav h2,:root[data-theme=default] nav h2{color:var(--title-color)}:root main::before,:root[data-theme=default] main::before{width:4px;top:0;bottom:0;left:0;background-color:var(--frame-left-color)}:root main::after,:root[data-theme=default] main::after{width:4px;top:0;bottom:0;right:0;background-color:var(--frame-right-color)}:root .theme-switch#default,:root[data-theme=default] .theme-switch#default{border-color:#fff;background-color:rgba(0,0,0,0);color:coral;border-radius:100%}:root body::before,:root[data-theme=default] body::before{height:4px;top:0;left:0;right:0;background-color:var(--frame-top-color)}:root body::after,:root[data-theme=default] body::after{height:4px;width:100%;bottom:0;left:0;right:0;background-color:var(--frame-bottom-color)}:root[data-theme=assert]{--bg-color: midnightblue;--text-color-primary: greenyellow;--text-color-secondary: greenyellow;--link-color: rebeccapurple;--link-visited-color: violet;--font-family-primary: Roboto Mono, monospace;--font-family-secondary: Helvetica Neue, Helvetica, Arial}:root[data-theme=assert].dark-mode{--bg-color: greenyellow;--text-color-primary: midnightblue;--text-color-secondary: midnightblue;--link-color: rebeccapurple;--link-visited-color: violet;--font-family-primary: Roboto Mono, monospace;--font-family-secondary: Helvetica Neue, Helvetica, Arial}:root[data-theme=assert] .theme-switch#assert{border-color:#adff2f;background-color:#adff2f;color:#191970}