:root{--heading-font:concourse_4;--text-font:heliotrope_4;--nav-font-size:1.2rem;--bs-primary-rgb:20, 135, 55;--bs-body-font-size:1.055rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--site-heading-color:#121111;--site-text-color:#615b5b;--site-subheading-color:#545454}.navbar-brand{--bs-navbar-brand-font-size:1.575rem;color:#fff;margin-right:2rem;font-weight:600;text-transform:uppercase}.navbar-nav *{text-rendering:optimizeLegibility;--bs-navbar-nav-link-padding-x:0.65rem}nav,h1,h2,h3,h4,th{font-family:var(--heading-font);text-rendering:optimizeLegibility;color:var(--site-heading-color)}h1{font-size:2.5rem}h2{margin-top:4rem;margin-bottom:1rem}h3{color:var(--site-subheading-color);font-size:1.5em;margin-top:3rem}h4{color:var(--site-subheading-color);font-size:1.35em;margin-top:2rem}nav li{font-family:var(--heading-font);font-size:var(--nav-font-size);text-rendering:optimizeLegibility;color:var(--site-heading-color)}p,li,time{font-family:var(--text-font);color:var(--site-text-color);line-height:1.55;letter-spacing:-.03em}p,li{font-size:1.3em}li li{font-size:.9em}time{font-size:1em}p,li{max-width:70ch}a{text-decoration:none;&:hover { text-decoration:none; }}table{border-collapse:collapse;max-width:100%;width:fit-content;overflow-x:auto;td, th { font-family: var(--text-font); color: var(--site-text-color); line-height: var(--bs-body-line-height); } thead th { background-color: rgba(var(--bs-primary-rgb), 0.05); font-family: var(--heading-font); color: var(--site-heading-color); }}.chapter table{display:block;margin:2rem auto;td, th { padding: 1.6rem; border: 2px solid rgb(var(--bs-primary-rgb)); } tr { &:first-child th { border-top: 0; } &:last-child td { border-bottom: 0; } td, th { &:first-child { border-left: 0; } &:last-child { border-right: 0; } } } @media screen and (max-width: 768px) { font-size: 0.9em; td, th { padding: 0.8rem; } }}.btn-cta{background-color:#fff;color:var(--bs-primary-rgb);padding:.375rem .75rem;border-radius:.375rem;margin-left:.5rem;border:2px solid #fff;transition:all .2s ease-in-out;&:hover { background-color:rgba(255,255,255,0.9); color:rgb(var(--bs-primary-rgb)); transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.1); }}blockquote{border-left:4px solid #add8e6;border-radius:0 4px 4px 0;background-color:#f5f5f5;padding:1.25rem;margin:1rem;line-height:1.8;color:#4a4a4a;@media screen and (min-width:768px){padding: 1.5rem; margin: 1rem 3rem;}p { margin-bottom: 0.5rem; font-size: 1.25em; } .source { display: block; text-align: right; margin-top: 1rem; } .source::before { content: "— "; }}pre{max-width:88ch;padding:1rem}.chapter img,.chapter video{margin:0 auto;max-width:100%;display:block}figcaption{p { text-align: center; font-style: normal; font-size: 1em; margin: 0; }}.alert{margin-left:auto;margin-right:auto}.navbar,.content{padding:1rem}.subscribe-box{padding:0 1rem 1rem;max-width:100%;display:inline-block;@media screen and (min-width:768px){max-width: 700px; margin: 2rem 0; padding: 2rem;}h2 { max-width: 100%; margin-top: 0.5rem !important; margin-bottom: 2rem; } form { input[type="email"] { max-width: 28ch; } input[type="submit"] { font-size: 1.2em; } }}.landing{text-align:center;h1 { text-transform: uppercase; font-weight: 800; } h2 { margin-top: 5rem; } p { margin: 1.5rem auto; } .fluffy p, li { font-size: 20pt; max-width: 800px; } .book-cover { max-width: 400px; margin-top: 5rem; margin-bottom: 5rem; } .callout { background-color: rgb(224, 236, 255); border: 1px solid gray; border-radius: 5px; } .subtitle { font-size: 1.4em; p { margin-top: 0; margin-bottom: 0; } } .byline { font-size: 1.2em; margin-bottom: 1rem; p { margin-top: 0; margin-bottom: 0; } } .book-features { display: flex; justify-content: center; ul, li { text-align: left; margin: auto 2rem; } }}.list-index,.tool,.single-page{text-align:left;margin:0 auto;max-width:80ch}.img-border{border:1px solid rgba(177,177,177,.76)}.chapter{article { text-align: left; margin: 0 auto; max-width: 75ch; .byline { font-size: 1.15em; margin-bottom: 0.9rem; } .heading-anchor { opacity: 0; text-decoration: none; margin-left: 0.5em; transition: opacity 0.2s; font-size: 0.75em; } h2:hover .heading-anchor, h3:hover .heading-anchor { opacity: 1; } .img-wrapper { max-width: 100%; margin-left: auto; margin-right: auto; } .img-wrapper + p { margin-top: 2rem; } .extra-wide-image { width: min(130%, 100vw); left: 50%; transform: translateX(-50%); position: relative; margin: 2rem 0; max-width: 100vw; padding: 0 1rem; } } .pitch { margin: 3rem auto; padding: 1rem; border: 1px solid #1a365d; background-color: #faf5e6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; h2 { margin-bottom: 0; padding-bottom: 0; } .book-cover { max-width: 300px; } } .revision-timeline { --indent: 10ch; ul li { padding-left: var(--indent); text-indent: calc(-1 * var(--indent)); } }}.chapter .alert{max-width:600px;h2 { font-size: 1.5em; } p { font-size: 1.2em; }}.sponsors{background-color:#fcfaf7;border:1px solid #e0d8c9;max-width:800px;margin:0 auto;padding:20px;p { margin: 0; padding: 0; } ul { column-count: 2; list-style-type: none; padding: 0; li { margin-top: 0.75rem; } } img { height: 50px; max-width: auto; }}.video-calls{h2 { margin-top: 5rem; } h3 { margin-top: 1rem; margin-bottom: 1rem; }}.navbar-dark{.navbar-nav { .nav-link { color: rgba(255, 255, 255, 0.95); font-weight: 500; transition: all 0.2s ease; &:hover, &:focus { color: #ffffff; background-color: rgba(255, 255, 255, 0.1); border-radius: 0.25rem; } &.active { color: #ffffff; font-weight: 600; } } .show > .nav-link { color: #ffffff; font-weight: 600; } }}.dropdown-menu{background-color:#fff;border:1px solid rgba(var(--bs-primary-rgb),.15)}.dropdown-item{color:rgb(var(--bs-primary-rgb));font-weight:500;&:hover,&:focus { background-color:rgba(var(--bs-primary-rgb),0.1); color:rgb(var(--bs-primary-rgb)); }}.navbar{.btn-cta { background: #ffffff !important; color: rgb( var(--bs-primary-rgb) ) !important; font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 50px; margin-left: 1rem; border: 2px solid #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.95rem; &:hover { background: rgba( 255, 255, 255, 0.95 ) !important; color: rgb(var(--bs-primary-rgb)) !important; transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.9) !important; } }}@media(max-width:768px){.navbar{.btn-cta { margin-top: 1rem; margin-left: 0; display: inline-block; width: auto; }}.navbar-nav{padding-top:1rem}}.btn-early-access{position:relative;background:linear-gradient(135deg,#148837 0%,#1a9d42 50%,#20b84d 100%);border:none;color:#fff;font-weight:600;font-size:1.2rem;padding:1rem 2.5rem;border-radius:50px;box-shadow:0 8px 25px rgba(20,136,55,.3);transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:280px;overflow:visible;&:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 15px 35px rgba(20,136,55,0.4); background:linear-gradient(135deg,#0f6b2a 0%,#148837 50%,#1a9d42 100%); color:white; text-decoration:none; .fas { animation:cart-shake 0.5s ease-in-out; } } &:active { transform:translateY(-1px) scale(1.02); } .fas { font-size:1.1em; animation:cart-bounce 2s ease-in-out infinite; } .btn-text { font-weight:600; letter-spacing:0.5px; } .btn-price { font-weight:700; font-size:1.3em; margin-left:0.3rem; text-shadow:0 1px 2px rgba(0,0,0,0.2); } .discount-badge { position:absolute; top:-12px; right:-12px; background:linear-gradient(45deg,#ff6b35,#ff8c42); color:white; font-size:0.7rem; font-weight:700; padding:0.3rem 0.6rem; border-radius:12px; box-shadow:0 2px 8px rgba(255,107,53,0.4); animation:pulse-badge 2s ease-in-out infinite; text-transform:uppercase; letter-spacing:0.3px; white-space:nowrap; z-index:10; } &::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient( 135deg,rgba(255,255,255,0.2) 0%,transparent 50% ); border-radius:50px; opacity:0; transition:opacity 0.3s ease; } &:hover::before { opacity:1; } @media (max-width:768px) { min-width:250px; font-size:1.1rem; padding:0.9rem 2rem; .btn-price { font-size:1.2em; } .discount-badge { font-size:0.65rem; padding:0.25rem 0.5rem; top:-10px; right:-10px; } }}@keyframes cart-bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(-2px)}}@keyframes cart-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}@keyframes pulse-badge{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.95}}.social-discuss{text-align:left;margin:3rem auto;max-width:80ch}.btn-social{color:#fff;border-radius:5px;padding:.75rem;margin-right:1rem}.btn-social:hover{text-decoration:none}.btn-social span{display:none}@media screen and (min-width:768px){.btn-social span{display:inline-block}}.btn-hacker-news{background-color:#f60}.btn-hacker-news:hover{background-color:#c95609}.btn-reddit{background-color:#ff5700}.btn-reddit:hover{background-color:#e24d02}.chapter{article { .example { display: grid; grid-template-rows: auto 1fr; padding: 0; max-width: 90%; margin: 2rem auto; border: 1px solid black; overflow: hidden; h3, h4 { margin-top: 0.5rem; } pre { max-width: 100%; font-size: 1.05em; } } .bad-example { background-color: #ffd1ce; code:not(pre code) { background-color: #2f2f2f; color: #ffffff; padding: 0.2rem 0.4rem; font-size: 1.15rem; border-radius: 4px; white-space: nowrap; display: inline-block; line-height: 1.4; margin: 0.1rem 0; vertical-align: middle; } } .good-example { background-color: #e6ffe8; } .example-header { background-color: #ffb3ae; padding: 0.25rem 0.5rem; font-size: 1.2rem; font-weight: 600; border-bottom: 1px solid black; white-space: normal; word-wrap: break-word; } .example-content { padding: 1.3rem 1rem; font-size: 0.9em; overflow-x: auto; .highlight pre { overflow-x: auto; white-space: pre; word-wrap: normal; } p:last-child, ol:last-child, ul:last-child, .highlight:last-child pre { margin-bottom: 0; } } .bad-example .example-header { background-color: #ffb3ae; } .good-example .example-header { background-color: #ccffcf; } }}@font-face{font-family:concourse_4;font-style:normal;font-weight:400;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/concourse_4_regular.woff2)format("woff2")}@font-face{font-family:concourse_4;font-style:italic;font-weight:400;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/concourse_4_italic.woff2)format("woff2")}@font-face{font-family:concourse_4;font-style:normal;font-weight:700;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/concourse_4_bold.woff2)format("woff2")}@font-face{font-family:concourse_4;font-style:italic;font-weight:700;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/concourse_4_bold_italic.woff2)format("woff2")}@font-face{font-family:heliotrope_4;font-style:normal;font-weight:400;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/heliotrope_4_regular.woff2)format("woff2")}@font-face{font-family:heliotrope_4;font-style:italic;font-weight:400;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/heliotrope_4_italic.woff2)format("woff2")}@font-face{font-family:heliotrope_4;font-style:normal;font-weight:700;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/heliotrope_4_bold.woff2)format("woff2")}@font-face{font-family:heliotrope_4;font-style:italic;font-weight:700;font-stretch:normal;font-display:auto;src:url(/fonts/mbtype/heliotrope_4_bold_italic.woff2)format("woff2")}.labelled-sentence{border:1px solid #ddd;padding:3rem 12px;margin:3rem 0;position:relative;text-align:center;p { font-size: 18pt; font-family: Arial, Helvetica, sans-serif; } p + p { margin-top: 3rem; } .label { position: absolute; top: -12px; left: 10px; background: white; padding: 0 5px; font-weight: bold; font-size: 16pt; } .actor, .verb, .object, .to-be, .past-participle { padding: 3px 8px; position: relative; margin: 0 3px; margin-bottom: 25px; display: inline-block; min-width: 80px; } .actor { background-color: #e6f3ff; } .verb { background-color: #fff0e6; } .object { background-color: #e6ffe6; } .to-be { background-color: #ffe4d3; min-width: 6ch; margin: 0 1rem; } .past-participle { background-color: #fff7f1; } .actor::after { content: "actor"; } .verb::after { content: "verb"; } .object::after { content: "object"; } .to-be::after { content: 'form of "to be"'; } .past-participle::after { content: "past participle"; } .actor::after, .verb::after, .object::after, .to-be::after, .past-participle::after { position: absolute; left: -20px; right: -20px; bottom: -30px; text-align: center; font-size: 13pt; }}.toc{max-width:800px;margin:2rem auto;padding:2rem;background-color:#fcfaf7;border:1px solid #e0d8c9;box-shadow:0 2px 8px rgba(0,0,0,.1)}.toc .col{padding:0 1.5rem}.toc ol{counter-reset:item;list-style-type:none;padding-left:0}.toc ol ol{padding-left:2rem;margin-bottom:.5rem;margin-top:.5rem}.toc ol>li{position:relative;padding:.5rem 0;margin-bottom:.5rem;font-size:1.3rem;display:flex;align-items:flex-start;flex-wrap:wrap}.toc ol>li::before{counter-increment:item;content:counter(item)".";font-weight:700;min-width:2rem;margin-right:.5rem;color:#5a4a42;flex-shrink:0}.toc ol ol>li::before{content:counter(item,lower-alpha)".";font-style:italic;flex-shrink:0}.toc li>a,.toc li>span{display:inline;text-indent:0;hyphens:auto}.toc a{text-decoration:none;border-bottom:1px dotted #1a5891}.toc a:hover{color:#0d2e4a;border-bottom:1px solid #0d2e4a}.toc li{display:flex;align-items:flex-start;width:100%;flex-wrap:wrap}.toc li>ol{flex-basis:100%;order:1}.toc>.col>ol>li{font-weight:600;font-size:1.2rem;margin-top:.8rem;margin-bottom:.2rem}.toc ol ol>li{font-weight:400;font-size:1.1rem;padding:.3rem 0;margin-bottom:.2rem}.toc::before{content:"CONTENTS";display:block;text-align:center;font-size:1.5rem;font-weight:700;margin-bottom:2rem;padding-bottom:.5rem;border-bottom:2px solid #5a4a42;color:#5a4a42;letter-spacing:.2rem}@media(max-width:768px){.toc ol>li,.toc ol ol>li{padding-left:2.5rem;position:relative;display:block}.toc ol>li::before,.toc ol ol>li::before{position:absolute;left:0;top:.5rem}.toc ol ol{padding-left:0}}